/* --- Header Layout --- */
.main-header {
    position: sticky; /* Swapped from fixed to sticky! */
    top: 0;
    left: 0;
    width: 100%;
    height: 70px; 
    background: rgba(10, 10, 10, 0.85); 
    backdrop-filter: blur(8px); 
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    z-index: 1000; 
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- Left Brand Block --- */
.brand-container {
    flex: 1; /* This container now does the stretching to balance the layout */
    display: flex;
    align-items: center;
}

.brand-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    /* Removed the flex: 1 from here! Now the hit-box hugs the text tightly. */
}

.header-logo {
    height: 45px;
    width: 45px;
    margin-right: 15px;
}

.brand-text {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 700; /* Bumping the weight to make it pop */
    letter-spacing: 1px;
    font-family: 'Orbitron', sans-serif; /* Adds Orbitron */
	transition: color 0.2s ease;
}

/* --- Center Navigation --- */
.center-nav {
    display: flex;
    gap: 40px;
    justify-content: center;
}

.header-spacer {
    flex: 1; /* Matches the brand-link flex to keep nav dead center */
}

/* --- The Glitch Hover Effect --- */
.glitch-link {
    color: #ffffff;
    text-decoration: none;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    transition: color 0.2s ease;
    font-family: 'Orbitron', sans-serif; /* Adds Orbitron */
    font-weight: 600;
}

.glitch-link:hover,
.brand-link:hover .brand-text {
    /* Plays for half a second, runs once, and 'forwards' locks it on the final frame */
    animation: text-glitch 0.5s forwards; 
}

/* Keyframes for a slower, deliberate glitch that ends on Cyan */
@keyframes text-glitch {
    0% { text-shadow: 4px 0 #00ffff, -4px 0 #ff00ff; color: #ffffff; }
    20% { text-shadow: -4px 0 #00ffff, 4px 0 #ff00ff; color: #ffffff; }
    40% { text-shadow: 4px 0 #00ffff, -4px 0 #ff00ff; color: #ffffff; }
    60% { text-shadow: -3px 0 #00ffff, 3px 0 #ff00ff; color: #ffffff; }
    80% { text-shadow: 2px 0 #00ffff, -2px 0 #ff00ff; color: #ff00ff; } /* A quick flash of purple text */
    100% { 
        text-shadow: 0px 0px 12px rgba(0, 255, 255, 0.6); /* A soft cyan glow */
        color: #00ffff; /* Text permanently turns Cyan while hovering */
    }
}

/* Add some padding to the top of your body so content isn't hidden behind the fixed header */
body {
    margin: 0;
    font-family: 'Rajdhani', sans-serif; /* Adds Rajdhani as the default text */
    background-color: #0a0a0a; /* Keeping your dark background */
}

/* --- Global Text Styles --- */
p {
    color: #cccccc; /* A nice readable light gray */
    line-height: 1.6; /* Gives the text some breathing room */
    margin-bottom: 20px;
}

/* --- Hero Section --- */
.hero-section {
    height: 80vh; /* Takes up 80% of the screen height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
}

.main-tagline {
    font-family: 'Orbitron', sans-serif;
    font-size: 5rem; /* Massive, punchy text */
    color: #ffffff;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin: 0 0 10px 0;
    text-shadow: 0px 0px 20px rgba(0, 255, 255, 0.3); /* Subtle cyan glow */
}

/* Styles the ™ symbol to be smaller and a sleek gray */
.main-tagline sup {
    font-size: 2rem;
    color: #888888;
    vertical-align: super;
}

.hero-subtext {
    font-size: 1.5rem;
    color: #cccccc;
    margin: 0;
}

.highlight-text {
    color: #00ffff; /* Makes 'The Haunted Loop' pop in cyan */
    font-weight: 600;
}

/* --- Hero Section & 3-Layer Setup --- */
.hero-section {
    position: relative;
    height: 85vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Keeps the massive background logo from breaking the page width */
}

/* Layer 1: Deep Background */
.background-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.bg-ghost-logo {
    width: 800px; /* Massive size */
    opacity: 0.08; /* Barely visible */
    animation: ghost-glitch 10s infinite; /* The subtle anomaly effect */
}

.bg-tagline {
    font-family: 'Orbitron', sans-serif;
    font-size: 3rem;
    color: #ffffff;
    opacity: 0.05; /* Almost invisible */
    letter-spacing: 10px;
    text-transform: uppercase;
    margin-top: -50px; /* Pulls it up slightly over the bottom of the logo */
}

.bg-tagline sup {
    font-size: 1rem;
    vertical-align: super;
}

/* Background Glitch Animation */
@keyframes ghost-glitch {
    0%, 96%, 100% { transform: translate(0, 0); filter: none; opacity: 0.08; }
    97% { transform: translate(-5px, 2px); filter: drop-shadow(5px 0 0 #00ffff); opacity: 0.15; }
    98% { transform: translate(5px, -2px); filter: drop-shadow(-5px 0 0 #ff00ff); opacity: 0.12; }
    99% { transform: translate(-2px, 5px); filter: none; opacity: 0.1; }
}

/* Layer 2: Middle Tint */
.tint-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Replaced the circular gradient with a flat dark tint to eliminate color banding */
    background: rgba(10, 10, 10, 0.10); 
    z-index: 2;
}

/* Layer 3: Foreground Content */
.foreground-layer {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.current-project-label {
    font-family: 'Orbitron', sans-serif;
    color: #00ffff;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-size: 1rem;
    margin-bottom: -10px; /* Tucks it nicely above the logo */
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.4);
}

.game-hero-logo {
    max-width: 600px; /* Keeps the 1280x720 logo contained */
    width: 100%;
    height: auto;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.game-logo-link:hover .game-hero-logo {
    transform: scale(1.02); /* Slight zoom on hover */
    filter: drop-shadow(0px 0px 15px rgba(255, 255, 255, 0.1));
}

/* Classic Steam Button */
.steam-wishlist-btn {
    margin-top: 30px;
    background: linear-gradient(to right, #75b022 5%, #588a1b 95%); /* Official Steam Green */
    color: #d2efa9;
    text-decoration: none;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    padding: 12px 35px;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    transition: all 0.2s ease;
}

.steam-wishlist-btn:hover {
    background: linear-gradient(to right, #8ed629 5%, #6aa620 95%); /* Brighter green on hover */
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(117, 176, 34, 0.4);
}

/* --- ABOUT PAGE STYLES --- */
.about-section {
    position: relative;
    min-height: 85vh; /* Allows it to grow if text gets long */
    display: flex;
    align-items: center;
    overflow: hidden;
}

.about-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
    display: flex;
    align-items: center;
    gap: 50px;
    text-align: left; /* Overrides the center-align from the home page */
}

/* Avatar Setup & Glitch Hover */
.avatar-frame {
    width: 250px;
    flex-shrink: 0;
}

.avatar-img {
    width: 100%;
    height: auto;
    border-radius: 4px; 
    border: 3px solid #00ffff;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.avatar-img:hover {
    border-color: #ff00ff; /* Snaps to magenta */
    box-shadow: 0 0 25px rgba(255, 0, 255, 0.4);
    transform: scale(1.02);
}

/* Bio Text */
.bio-content h1 {
    color: #ff00ff;
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 0;
    font-weight: 900;
}

.bio-content h2 {
    font-size: 1.2rem;
    color: #00ffff;
    margin-bottom: 20px;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 1px;
}

.bio-content p {
    color: #e0e0e0;
    font-size: 1.1rem;
    line-height: 1.6;
}

.bio-content strong {
    color: #00ffff; /* Highlights the game title */
}

/* Social Buttons with Glitch Hover */
.social-links {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.social-btn {
    display: inline-block;
    color: #ffffff;
    font-family: 'Orbitron', sans-serif;
    text-decoration: none;
    /* Made base background slightly darker to contrast against the faded background logo */
    background: rgba(0, 0, 0, 0.6); 
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    /* transition ensures smooth retreat when mouse leaves, but hover uses animation */
    transition: all 0.2s ease; 
}

.social-btn:hover {
    /* Border turns cyan */
    border-color: #00ffff;
    /* Background darkens significantly to isolate the button from the Ghost logo */
    background: rgba(0, 0, 0, 0.9); 
    /* Button frame gets a soft cyan glow */
    box-shadow: 0 0 12px rgba(0, 255, 255, 0.4);
    
    /* Triggers the EXISTING "text-glitch" animation we made earlier! */
    /* Rapid cyan/magenta flicker, settles on cyan. */
    animation: text-glitch 0.5s forwards; 
}

/* Redefining color transition behavior specifically for these buttons to avoid conflict with the animation */
.social-btn .brand-text {
    transition: color 0.2s ease;
}

/* =========================================
   --- THE HAUNTED LOOP GAME PAGE STYLES --- 
   ========================================= */

/* Hero Section with Breathing Background */
.game-hero-section {
    position: relative;
    height: 60vh;
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Pushes title to the bottom like original design */
    padding-bottom: 50px;
    overflow: hidden;
    box-shadow: inset 0 -50px 50px #0a0a0a; /* Fades the bottom into the page */
}

.bg-creepy-zoom {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 60 seconds total. 30s in, 30s out. Infinite loop. */
    animation: creepy-breathe 60s ease-in-out infinite; 
}

@keyframes creepy-breathe {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); } /* Zooms in 10% */
    100% { transform: scale(1); }
}

.game-hero-content {
    background: rgba(0, 0, 0, 0.75);
    padding: 20px 50px;
    border-radius: 4px;
    border: 1px solid rgba(0, 255, 255, 0.1);
    backdrop-filter: blur(5px);
}

.game-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 3.5rem;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #ffffff;
    text-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
}

.genre-tag {
    color: #ff00ff; /* Magenta accent */
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    display: block;
    margin-top: 5px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Main Content Container */
.game-container {
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px;
}

/* Split Layout */
.split-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 50px;
    margin-bottom: 60px;
}

.section-heading {
    font-family: 'Orbitron', sans-serif;
    color: #00ffff;
    border-left: 4px solid #ff00ff; /* Magenta stripe */
    padding-left: 15px;
    margin-top: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sub-heading {
    font-family: 'Orbitron', sans-serif;
    color: #ffffff;
    margin-top: 40px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Features List */
.features-list {
    list-style: none;
    padding: 0;
}

.features-list li {
    background: rgba(255, 255, 255, 0.03);
    margin-bottom: 12px;
    padding: 15px 20px;
    border-left: 2px solid #333;
    transition: all 0.3s ease;
    color: #cccccc;
}

.features-list li strong {
    color: #ffffff;
    font-family: 'Orbitron', sans-serif;
}

.features-list li:hover {
    border-left: 2px solid #00ffff;
    background: rgba(0, 255, 255, 0.05);
    transform: translateX(5px); /* Slight bump to the right on hover */
}

/* Sidebar Stats */
.stats-box {
    background: rgba(255, 255, 255, 0.03);
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.stats-box p {
    margin: 10px 0;
    color: #cccccc;
}

.stats-box strong {
    color: #00ffff;
}

.sidebar-divider {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 20px 0;
}

/* Gallery Grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 60px;
}

.gallery-img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

.gallery-img:hover {
    transform: scale(1.03);
    border-color: #ff00ff;
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.3);
}

/* Lightbox Styles */
#lightbox-overlay {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(5, 5, 5, 0.95);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(10px);
}

#lightbox-image {
    max-width: 90%;
    max-height: 80vh;
    border: 2px solid #00ffff;
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.2);
    border-radius: 4px;
}

/* Lightbox Nav & Close Glitch Hover */
.lightbox-nav,
#lightbox-close-btn {
    cursor: pointer;
    color: #888888;
    font-family: 'Orbitron', sans-serif;
    transition: all 0.2s ease;
    user-select: none;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 20px;
    font-size: 3rem;
}

.nav-prev { left: 20px; }
.nav-next { right: 20px; }

#lightbox-close-btn {
    margin-top: 25px;
    padding: 10px 40px;
    background: transparent;
    border: 1px solid #888888;
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Applying the Global Glitch */
.lightbox-nav:hover,
#lightbox-close-btn:hover {
    color: #00ffff;
    border-color: #00ffff;
    animation: text-glitch 0.5s forwards; /* Re-using our master glitch animation! */
}

/* Mobile Responsiveness */
@media (max-width: 900px) {
    .split-layout { grid-template-columns: 1fr; }
    .game-hero-content { padding: 15px 25px; }
    .game-title { font-size: 2.5rem; }
}

/* --- Dev Progress Tracker (Stacked Layout) --- */
.dev-tracker {
    margin-top: 20px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tracker-row {
    display: flex;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.tracker-row:last-child {
    border-bottom: none;
}

.chapter-header {
    font-weight: 700;
    min-width: 120px;
    font-size: 1rem;
    display: flex;
    align-items: center; /* Centers the chapter title vertically next to the data */
}

.chapter-data {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Spacing between Regular and Brutal lines */
    flex: 1;
}

.data-line {
    display: flex;
    align-items: center;
}

/* The little box that says REGULAR or BRUTAL */
.mode-tag {
    display: inline-block;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    font-size: 0.7rem;
    margin-right: 10px;
    width: 65px;
    text-align: center;
}

.divider {
    color: #444;
    margin: 0 10px;
}

/* Status Colors */
.status-done {
    color: #00ffff;
}

.status-done .mode-tag {
    background: rgba(0, 255, 255, 0.15);
    color: #00ffff;
}

.status-active {
    color: #ff00ff;
}

.status-active .mode-tag {
    background: rgba(255, 0, 255, 0.15);
    color: #ff00ff;
}

.status-planned {
    color: #666666;
}

.status-planned .mode-tag {
    background: rgba(255, 255, 255, 0.05);
    color: #666666;
}

/* Subtle pulse animation for the "In Progress" text */
.pulse-text {
    animation: text-pulse 2s infinite;
}

@keyframes text-pulse {
    0%, 100% { opacity: 1; text-shadow: 0 0 8px rgba(255, 0, 255, 0.6); }
    50% { opacity: 0.4; text-shadow: none; }
}

/* Mobile tweak to stack everything if the screen is too small */
@media (max-width: 600px) {
    .tracker-row {
        flex-direction: column;
        gap: 10px;
    }
    .chapter-header {
        margin-bottom: 5px;
    }
}

/* --- Footer (Centered & Single Line) --- */
.main-footer {
    background-color: #050505;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 25px 20px;
    margin-top: 60px;
    display: flex;
    justify-content: center; /* Centers the whole block */
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap; /* Allows it to stack on narrow phone screens */
    gap: 15px; /* Perfect spacing between items */
}

.footer-text {
    color: #888888;
    font-size: 0.9rem;
}

.footer-divider {
    color: #333333; /* Very subtle dark gray separator lines */
    font-size: 0.9rem;
}

.footer-tagline {
    font-family: 'Orbitron', sans-serif;
    color: #666666;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 0.8rem;
}

/* Anti-Scraper Contact Button */
.contact-reveal-btn {
    background: none;
    border: none;
    color: #888888;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s ease;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
}

.contact-reveal-btn:hover {
    color: #00ffff; /* Glows Cyan when hovered */
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.4);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        gap: 10px;
    }
    .footer-divider {
        display: none; /* Hides the vertical lines on mobile so it stacks cleanly */
    }
}

/* --- Mobile Header Swipe Navigation --- */
@media (max-width: 800px) {
    .main-header {
        justify-content: flex-start;
        overflow-x: auto; 
        overflow-y: hidden;
        padding: 0 20px;
        gap: 30px; 
        
        /* THE FIX: Force the layout to stay in a straight, un-squished line */
        flex-wrap: nowrap;
        white-space: nowrap;
        
        -ms-overflow-style: none; 
        scrollbar-width: none; 
    }
    
    .main-header::-webkit-scrollbar {
        display: none;
    }

    .brand-container {
        flex-shrink: 0; 
        border-right: 1px solid rgba(255, 255, 255, 0.2); /* Adds the vertical line */
        padding-right: 25px; /* Gives the line some breathing room */
    }

    /* Selects all navigation links EXCEPT the very last one */
    .center-nav a:not(:last-child) {
        border-right: 1px solid rgba(255, 255, 255, 0.2); /* Adds the vertical line */
        padding-right: 25px; 
    }

    .center-nav {
        gap: 25px; 
        padding-right: 20px; 
    }

    .header-spacer {
        display: none; 
    }
}