* {
    box-sizing: border-box;
}

@font-face {
    font-family: 'Reboot Crush';
    src: url('../fonts/reboot-crush.ttf');
}

@font-face {
    font-family: 'Glitch Inside';
    src: url('../fonts/glitch-inside.otf');
}

body {
    margin: 0;
    font-family: 'VT323', monospace;
    display: flex;
    justify-content: flex-start; /* Move content to the top */
    align-items: center;   /* Center content horizontally */
    min-height: 100vh;
    background-color: #1a0a2a; /* Very dark purple/blue for cyberpunk feel */
    color: #00ff00; /* Neon green default text color */
    padding: 5px 20px 20px 20px; /* Minimal top padding */
    flex-direction: column; /* Allow content to flow naturally */
}

/* Adjust body padding for desktop */
@media screen and (min-width: 768px) {
    body {
        padding: 5px 50px 50px 50px; /* Minimal top padding */
    }
}

.container {
    max-width: 1200px;
    width: 100%;
}

.content-card {
    background-color: #0d0413; /* Even darker background for the card */
    border-radius: 5px; /* Sharper corners */
    overflow: hidden;
    color: #00ff00; /* Neon green text color for the card */
    display: flex;
    flex-direction: column; /* Stack main-body and footer-bar */
    box-shadow: 0 0 15px #FF00FF; /* Neon magenta glow effect */
}

.main-body {
    display: flex;
    flex-direction: column; /* Mobile: stacking vertically */
}

.text-section {
    padding: 30px 30px 30px 30px; /* Added top padding to shift content down */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Center content for mobile */
    text-align: center; /* Center text for mobile */
    order: 1; /* Place text section after image on mobile */
}

.text-section .role {
    font-family: 'Glitch Inside', sans-serif; /* Apply the custom font */
    font-size: 0.9em;
    color: #fcfd00; /* Neon yellow */
    margin-top: 2px; /* Reduce margin to bring role closer */
    margin-bottom: 25px; /* Increased space before subscribe form */
    text-shadow: 0 0 5px #fcfd00; /* Subtle glow */
    order: 1; /* Place role second on mobile */
}

.text-section h1 {
    font-family: 'Reboot Crush', sans-serif; /* Apply the custom font */
    font-size: 6vw; /* Further reduced fluid font size for mobile */
    margin-bottom: 2px; /* Reduce margin to bring role closer */
    color: #fcfd00; /* Neon yellow */
    text-shadow: 0 0 10px #fcfd00; /* Stronger glow */
    padding: 0 10px; /* Add lateral padding for mobile */
    order: 0; /* Place h1 first on mobile */
}

.text-section .description {
    font-size: 1.1em;
    line-height: 1.4;
    color: #00cc00; /* Softer neon green */
    margin-bottom: 25px;
    max-width: 400px; /* Limit description width */
    order: 3; /* Place description last on mobile */
}

.main-description {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 1.5em;
    display: block;
    margin-bottom: 0;
    color: #fcfd00; /* Neon yellow to match the title */
    text-shadow: 0 0 5px #fcfd00;
}

.sub-description {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 400;
    font-size: 1.1em;
    color: #ffffff; /* White text */
    opacity: 0.9;
    line-height: 1.4;
    display: block;
    margin-top: -5px;
}

.sub-description.second-sentence {
    margin-top: 10px; /* This creates a gap smaller than two <br> tags but larger than the negative margin */
}

.game-stats {
    display: block; /* Make it a block-level element to allow centering */
    text-align: center; /* Center the text within the block */
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 1.3em;
    color: #fcfd00; /* Neon yellow to match the main description */
    text-shadow: 0 0 5px #fcfd00; /* Subtle glow */
    margin-top: -5px;
}

.game-icons {
    display: flex;
    justify-content: center;
    margin-top: 15px;
    margin-bottom: 25px;
    order: 4; /* Place after description (which is order: 3) */
    width: 100%;
}

.icons-image {
    max-width: 200px;
    width: 100%;
    height: auto;
}

.subscribe-form {
    display: flex;
    flex-direction: column; /* Stack vertically on mobile */
    gap: 10px;
    margin-bottom: 10px; /* Consistent space after subscribe form */
    width: 100%;
    max-width: 300px; /* Limit width of form on mobile */
    order: 2; /* Place form third on mobile */
}

.subscribe-form input {
    background-color: rgba(0, 255, 0, 0.1); /* Semi-transparent neon green */
    border: 1px solid #00ff00; /* Neon green border */
    border-radius: 3px; /* Sharper corners */
    padding: 10px 15px;
    color: #00ff00; /* Neon green text */
    font-size: 1em;
    width: 100%;
    box-sizing: border-box; /* Include padding in width */
}

.subscribe-form input::placeholder {
    color: rgba(0, 255, 0, 0.7); /* Neon green placeholder */
}

.subscribe-form button {
    background-color: #000000; /* Black background */
    color: #ffffff; /* White text */
    border: 1px solid #ffffff; /* Neutral white border */
    border-radius: 3px; /* Sharper corners */
    padding: 12px 20px; /* Increased padding */
    font-size: 1.1em; /* Slightly larger font */
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box; /* Include padding in width */
}

.subscribe-form button:hover {
    background-color: #333333; /* Dark gray on hover */
}

.success-message {
    color: #1a0a2a;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.2em;
    font-weight: 600;
    padding: 10px 0;
}

/* Adjust form for desktop */
@media screen and (min-width: 768px) {
    .subscribe-form {
        flex-direction: row; /* Horizontal layout on desktop */
        max-width: 400px; /* Allow wider form on desktop */
        order: 3; /* Place form after description on desktop */
    }

    .subscribe-form input {
        flex-grow: 1; /* Allow input to take available space */
    }

    .subscribe-form button {
        width: auto; /* Button width adjusts to content */
        padding: 10px 20px;
    }
}



.footer-bar {
    background-color: #fcfd00; /* Neon yellow to match the title */
    color: #0d0413; /* Dark text for contrast */
    padding: 25px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    text-align: center;
}

.bottom-signup {
    border-top: 2px solid #000; /* Stronger separation at the bottom */
}

.site-footer {
    background-color: #000;
    color: #888;
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.85em;
    letter-spacing: 1px;
}

.site-footer a {
    color: #888;
    text-decoration: none;
    transition: color 0.3s ease;
}

.site-footer a:hover {
    color: #fcfd00;
}

@media screen and (max-width: 480px) {
    .site-footer {
        flex-direction: column;
        gap: 10px;
        text-align: center;
        padding: 20px;
    }
}

.footer-text h3 {
    margin: 0 0 5px 0;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.4em;
    font-weight: 600;
    color: #1a0a2a;
}

.footer-text p {
    margin: 0;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1em;
    color: #1a0a2a;
}

/* Adjust subscribe form for footer */
.footer-bar .subscribe-form {
    margin-bottom: 0;
    width: 100%;
    max-width: 400px;
    order: unset; /* Reset mobile order */
}

.footer-bar .subscribe-form input {
    background-color: rgba(0, 0, 0, 0.05);
    border: 1px solid #1a0a2a;
    color: #1a0a2a;
}

.footer-bar .subscribe-form input::placeholder {
    color: rgba(26, 10, 42, 0.6);
}

.footer-bar .subscribe-form button {
}

.image-section {
    width: 100%;
    order: 0; /* Place image section before text on mobile */
}

.hero-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0; /* Sharper edges for cyberpunk look */
}

.fighter-selection {
    text-align: center;
    padding: 40px 20px 0 20px;
    width: 100%;
}

.selection-title {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 1.5em;
    color: #fcfd00; /* Neon yellow to match the main description */
    text-shadow: 0 0 5px #fcfd00;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.3s ease;
    display: inline-block;
    padding: 5px 15px;
    border-radius: 3px;
}

.selection-title.scrolled-active {
    color: #ffffff;
    background-color: #0000ff;
    text-shadow: none;
}

/* Title Glitch Effects */
.selection-title[class*="glitch-"] {
    transition: none !important; /* Instant jump to glitch state */
}

.selection-title.glitch-1 {
    text-shadow: 4px 0 0 #00ffff, -4px 0 0 #ff00ff;
    color: rgba(255, 255, 255, 0.8);
}

.selection-title.glitch-2 {
    text-shadow: -6px -2px 0 red, 6px 2px 0 blue;
    color: rgba(200, 200, 255, 0.9);
}

.selection-title.glitch-3 {
    text-shadow: 2px 2px 0 lime, -2px -2px 0 magenta;
    color: #ccffff;
}

.selection-title.glitch-4 {
    text-shadow: -5px 1px 0 #00ffff, 3px -1px 0 #ff00ff, 0px 0px 5px white;
    color: rgba(255, 255, 255, 0.4);
}

.selection-subtitle {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 400;
    font-size: 1.1em;
    color: #ffffff; /* White text */
    opacity: 0.9;
    line-height: 1.4;
    margin-top: 0;
    margin-bottom: 30px; /* Increased space before the next section */
}

.selection-title.second-title {
    margin-top: 0;
}

.selection-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    gap: 20px;
    margin-top: 25px;
    margin-bottom: 40px;
    padding: 0 10px;
}

.selection-card {
    max-width: 280px; /* Consistently sized for side-by-side layout */
    width: 100%;
    height: auto;
    transition: all 0.3s ease;
    cursor: pointer;
}

.selection-card:hover {
    transform: scale(1.05) translateY(-5px);
    filter: drop-shadow(0 0 15px rgba(255, 0, 255, 0.8)); /* Neon magenta glow behind the card */
}

/* Media query for desktop */
@media screen and (min-width: 768px) {
    .content-card {
        max-width: 1000px; /* Slightly wider for the footer layout */
        margin: 0 auto;
    }

    .main-body {
        flex-direction: row; /* Side-by-side image and text */
    }

    .text-section {
        flex: 1;
        padding: 50px 50px 50px 50px;
        text-align: left; /* Align text left for desktop */
        /* align-items: flex-start; - Removed to allow individual centering */
        order: 1; /* Place text section after image on desktop */
    }

    .text-section h1 {
        font-size: 2.5em; /* Smaller font for desktop */
        order: 0; /* Place h1 first on desktop */
    }

    .text-section .role {
        text-align: center; /* Center the role text on desktop */
        order: 1; /* Place role second on desktop */
    }

    .text-section .description {
        order: 2; /* Place description third on desktop */
    }

    .image-section {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #0d0413; /* Dark background for the image section on desktop */
        order: 0; /* Place image section before text on desktop */
    }

    .footer-bar {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
        padding: 25px 50px;
    }

    .footer-bar .subscribe-form {
        flex-direction: column; /* Force vertical layout even on desktop */
        max-width: 450px;
    }

    .footer-bar .subscribe-form button {
        width: 100%; /* Match input width */
    }
}

/* Video Page Styles */
.video-section {
    padding: 20px 0; /* Removed horizontal padding for mobile */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.video-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    border: 2px solid #00ff00;
    box-shadow: 0 0 15px #00ff00;
    margin-bottom: 20px;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-title {
    font-family: 'Reboot Crush', sans-serif;
    color: #fcfd00;
    text-shadow: 0 0 10px #fcfd00;
    margin-bottom: 20px;
    text-align: center;
    word-break: normal; /* Override previous break-word */
    white-space: nowrap; /* Force text to stay on a single line */
    overflow: hidden; /* Hide overflowing text */
    text-overflow: ellipsis; /* Add ellipsis if text overflows (though font size should prevent this) */
    padding: 0 5px; /* Small horizontal padding by default */
}

/* Adjust font size for mobile screens */
@media screen and (max-width: 767px) {
    .video-title {
        font-size: 5vw; /* Conservative font size to ensure it fits on one line */
    }
}

/* Adjust video section padding and title size for desktop */
@media screen and (min-width: 768px) {
    .video-section {
        padding: 50px; /* More padding on desktop */
    }

    .video-title {
        font-size: 2.5em; /* Original size for desktop */
        padding: 0; /* No horizontal padding on desktop, handled by video-section padding */
    }
}


/* Gameplay Section Styles */
.gameplay-section {
    display: flex;
    flex-direction: column; /* Stack image and text vertically on mobile */
    align-items: center;
    gap: 30px;
    padding: 0 20px 40px 20px;
    width: 100%;
}

.gameplay-image {
    width: 100%;
    max-width: 400px; /* Limit image width on mobile */
}

.feature-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 5px;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.8); /* Neon cyan glow */
}

.gameplay-text {
    width: 100%;
    max-width: 500px; /* Limit text width on mobile */
    text-align: center;
}

.feature-list {
    list-style: none; /* Remove default bullet points */
    padding: 0;
    margin: 0;
    text-align: left; /* Align bullet points left */
    color: #ffffff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1em;
    line-height: 1.6;
}

.feature-list li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 20px; /* Space for custom bullet */
}

.feature-list li::before {
    content: '>'; /* Custom bullet point */
    color: #fcfd00; /* Neon yellow for bullet */
    position: absolute;
    left: 0;
    font-weight: bold;
}

.feature-title {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 1.5em;
    color: #fcfd00; /* Neon yellow to match the main description */
    text-shadow: 0 0 5px #fcfd00;
    margin-top: 0;
    margin-bottom: 20px;
    letter-spacing: 2px;
}

.feature-description {
    color: #ffffff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1em;
    line-height: 1.6;
    text-align: left;
    margin: 0;
}

.final-call-to-action {
    text-align: center;
    padding: 20px 20px;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.final-call-to-action > p {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.8em;
    font-weight: 600;
    color: #fcfd00;
    text-shadow: 0 0 5px #fcfd00;
    line-height: 1.4;
    letter-spacing: 1px;
    margin: 0;
}

.brand-footer {
    margin-top: 30px;
    text-align: center;
    width: 100%;
    padding: 9 40px 0 20px; /* Increased right padding to shift text further to the left */
    box-sizing: border-box;
}

.brand-title {
    font-family: 'Reboot Crush', sans-serif;
    font-size: clamp(0.8rem, 5.5vw, 3.5rem);
    color: #fcfd00;
    text-shadow: 0 0 15px #fcfd00;
    margin: 0;
    line-height: 1.1;
    display: block;
    max-width: 100%;
}

.brand-subtitle {
    font-family: 'Glitch Inside', sans-serif;
    font-size: clamp(0.5rem, 2vw, 1.2rem);
    color: #fcfd00;
    text-shadow: 0 0 8px #fcfd00;
    margin: 5px 0 0 0;
    letter-spacing: clamp(1px, 0.8vw, 4px);
}


/* Desktop styles for gameplay section */
@media screen and (min-width: 768px) {
    .fighter-selection {
        padding: 40px 20px 20px 20px;
    }

    .final-call-to-action {
        padding: 40px 20px;
    }

    .gameplay-section {
        flex-direction: row; /* Side-by-side on desktop */
        justify-content: center;
        text-align: left;
        margin-top: 30px; /* Pull section up to reduce space */
        padding-bottom: 60px;
        padding-left: 50px;
        padding-right: 50px;
    }

    .gameplay-section .gameplay-text {
        flex: 1;
        max-width: 500px; /* Allow text to be larger on desktop */
        text-align: left;
        padding-right: 30px;
    }

    .gameplay-section .gameplay-image {
        flex: 1;
        max-width: 500px; /* Allow image to be larger on desktop */
        text-align: left; /* Align image to the left within its flex item */
        padding-left: 30px;
    }
}

/* Gameplay Section Reverse Styles */
.gameplay-section-reverse {
    display: flex;
    flex-direction: column-reverse; /* Stack text above image on mobile */
    align-items: center;
    gap: 30px;
    padding: 0 20px 40px 20px;
    width: 100%;
}

@media screen and (min-width: 768px) {
    .gameplay-section-reverse {
        flex-direction: row; /* Natural order */
        justify-content: center;
        text-align: left;
        padding-bottom: 60px;
        padding-left: 50px;
        padding-right: 50px;
    }
    
    .gameplay-section-reverse .gameplay-image {
        flex: 1;
        max-width: 500px;
        text-align: right;
        padding-right: 30px;
    }

    .gameplay-section-reverse .gameplay-text {
        flex: 1;
        max-width: 500px;
        text-align: left;
        padding-left: 30px;
    }
}