@font-face {
    font-family: 'Bubblegum';
    src: url('fonts/file.woff2') format('woff2');
    font-display: swap; /* Helps the page load text faster */
}
@font-face {
    font-family: 'AvenirCustom';
    src: url('/fonts/avenir.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

html {
    background-color: #C7E0FD !important;
}
/* Apply this to your main container or body */
body {
    
    -webkit-font-smoothing: antialiased;    /* For Chrome/Safari/MAMP */
    -moz-osx-font-smoothing: grayscale;      /* For Firefox */
    text-rendering: optimizeLegibility;
    margin: 0;
    padding: 0;
  
}
#bg-layer {
    position: fixed;   /* This keeps it from moving when you scroll */
    top: 0;
    left: 0;
    width: 100vw;      /* Viewport Width */
    height: 100vh;     /* Viewport Height */
    background: url('backgrounds/bamboo-house.webp') no-repeat center center fixed;
    background-size: cover;
    margin: 0;
    padding: 0;
    z-index: -1;       /* Ensures it stays BEHIND your buttons and text */
    opacity: 100;        /* Start invisible for the script */
}

/* Now apply it to your global elements */
body, .game-title, .home-btn, .nav-links a, .copyright {
    font-family: 'Bubblegum', sans-serif;
}



/* Specific fix for the Bubblegum font elements */
.game-title, .dl-btn, .nav-links a, .backup-title {
    font-weight: normal !important; /* Forces the browser to use the actual file weight */
    letter-spacing: 0.5px;          /* Tiny bit of extra space helps the 'o' look open */
}

/* Desktop Header Base Styles */
.desktop-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: rgba(0, 0, 0, 0.70); /* Semi-transparent black */
    backdrop-filter: blur(10px);    /* Modern blur effect */
    display: flex;
    align-items: center;
    z-index: 1000;
    transition: transform 0.3s ease-in-out; /* Smooth slide transition */
    /* border-bottom: 2px solid #ff66b2; /* Subtle pink line to match your theme */
}

/* Hide header when scrolling down */
.header-hidden {
    transform: translateY(-100%);
}

.nav-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo {
    font-family: 'Bubblegum', sans-serif;
    color: white;
    font-size: 24px;
    text-decoration: none;
}

.nav-links-desktop {
    list-style: none;
    display: flex;
    gap: 30px;
    margin: 0;
    padding: 0;
}

.nav-links-desktop li a {
    font-family: 'Bubblegum', sans-serif;
    color: white;
    text-decoration: none;
    font-size: 18px;
    transition: color 0.2s;
}

.nav-links-desktop li a:hover {
    color: #ff5e5e;
}

/* Burger Icon Styling */
.menu-toggle {
    display: none; /* Hidden on desktop */
    width: 30px;    /* FIXED WIDTH: This stops the long white line */
    height: 22px;   /* FIXED HEIGHT */
    cursor: pointer;
    position: fixed; 
    right: 20px;
    top: 25px;
    z-index: 1050;
    
    /* These three lines handle the spacing of the 3 spans */
    flex-direction: column;
    justify-content: space-between;
}

.menu-toggle span {
    display: block; /* THIS IS THE KEY FIX */
    width: 100%;
    height: 4px;
    background-color: white; /* Change to #ff5e5e if you want it red */
    border-radius: 10px;
    transition: all 0.3s ease;
}

/* Sidebar Styling */
.mobile-nav {
    position: fixed;
    top: 0;
    right: -50%; /* Start hidden off-screen */
    width: 50%;
    height: 100%;
    background-color: #2c2f48; 
    z-index: 1100;
    transition: right 0.3s ease;
    padding-top: 80px;
    box-shadow: -5px 0 15px rgba(0,0,0,0.5);
}

.mobile-nav.active {
    right: 0; /* Slide in */
}

.nav-links {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-family: 'Bubblegum', cursive;
    font-size: 22px;
}

.close-menu {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 40px;
    color: white;
    cursor: pointer;
    z-index: 1101;
}








/* Container to center everything */
.home-wrapper {
    max-width: 900px;
    margin: 120px auto 50px auto; /* 120px top margin to clear the header */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 0 20px;
}

/* Profile Image Styling */
.profile-img {
    width: 350px;
    height: 350px;

    object-fit: cover;
    margin-bottom: 20px;
}

.button-row {
    display: flex;
    gap: 60px;
    width: 100%;
    max-width: 800px; /* Lock the row width */
    justify-content: center;
}

/* Base button style */
.home-btn {
    font-family: 'Bubblegum', sans-serif;
    text-decoration: none;
    color: white;
    font-size: 22px;
    padding: 30px 30px;
    border-radius: 50px; /* Rounded pill shape */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform 0.2s, filter 0.2s;
    text-transform: uppercase;
    flex: 1; 
    width: 100%; /* Allows it to fill the available space */
    max-width: 400px; /* Limits the top two buttons */
    box-sizing: border-box;
}
.home-btn .btn-icon {
    width: 32px;     /* Match the visual weight of the Font Awesome icons */
    height: auto;
    object-fit: contain;
}
.home-btn:hover {
    transform: translateY(-3px);
    filter: brightness(1.1);
}

/* Specific Button Colors */
.download-btn { background-color: #ff5e5e; } /* Your signature red */
.ng-btn { background-color: #222222; }   
.patreon-btn { background-color: #FF5A4A; }  
.substar-btn { background-color: #009688; }    /* Dark Grey/Black */
.discord-btn { 
    background-color: #5865F2; 
  
     width: 370px; 
    flex: none;      /* Prevents it from trying to 'flex' like the others */
    
}



.info-section-bg {
    width: 100%;
  
    /* THE GRADIENT: Adjust the #333333 to match your specific grey */
    background: linear-gradient(to bottom, transparent 0%, #798599 15%);
    margin-top: 50px;           /* Space between buttons and the grey strip */
    padding: 100px 0 60px 0;          /* Vertical padding inside the grey strip */
    display: flex;
    justify-content: center; 
    margin-bottom: 0 !important;  /* Centers the .game-info box inside it */
}

.about-section-bg {
    width: 100%;
  
    /* THE GRADIENT: Adjust the #333333 to match your specific grey */
    background: linear-gradient(to bottom, transparent 0%, #798599 75%);
    margin-top: 100px;           /* Space between buttons and the grey strip */
    padding: 100px 0 60px 0;          /* Vertical padding inside the grey strip */
    display: flex;
    justify-content: center; 
    margin-bottom: 0 !important;  /* Centers the .game-info box inside it */
}
/* Target your footer to remove any top gap */
footer {
    margin-top: 0 !important;
    padding-top: 40px; /* If you want space inside the footer instead of outside */
    background-color: #798599; /* Set this to the SAME grey so they blend together */
}
.game-info {
    max-width: 820px; /* Matches the width of your Discord button */
    margin-top: 50px; /* Space between the buttons and the text */
    text-align: center;
    color: white;
    padding: 20px;
    background: rgba(0, 0, 0, 0.0); /* Subtle dark background to make text pop */
    border-radius: 20px;
}

.game-info h2 {
    font-family: 'Bubblegum', sans-serif;
    font-size: 60px;
    color: #ffffff; /* Matching your red theme */
    margin-bottom: 60px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.game-info h3 {
    font-family: 'Bubblegum', sans-serif;
    font-size: 30px;
    color: #ffffff; /* Matching your red theme */
    margin-bottom: 20px;
    
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}

.game-info a {
    font-family: 'Bubblegum', sans-serif;
    font-size: 30px;
    color: #ffffff; /* Matching your red theme */
    margin-bottom: 20px;
    
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}

.game-info h4 {
    font-family: 'Bubblegum', sans-serif;
    font-size: 40px;
    color: #ffffff; /* Matching your red theme */
    margin-bottom: 60px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.game-info p {
    font-family: 'AvenirCustom', sans-serif; /* A cleaner font for long reading */
    font-size: 19px;
    line-height: 1.6; /* Adds "air" between lines for readability */
    color: #f0f0f0;
    font-weight: 510;
    text-align: justify;
    text-align-last: center;
}

.game-features h2 {
    
    margin-bottom: 20px;
    
}
.game-features a {
    font-family: 'Bubblegum', sans-serif;
    font-size: 30px;
    color: #ffffff; /* Matching your red theme */
    margin-bottom: 40px;
    
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}

.game-features h3 {
    font-family: 'Bubblegum', sans-serif;
    font-size: 30px;
    color: #ffffff; /* Matching your red theme */
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: left;
}

.game-features h4 {
    font-family: 'Bubblegum', sans-serif;
    font-size: 40px;
    color: #ffffff; /* Matching your red theme */
    margin-bottom: 60px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.game-features p {
    text-align: left;
    text-align-last: left; /* Overrides the center-last-line rule */
    margin-bottom: 30px; 
     font-weight: 510;  /* Adds a gap before the next H3 */
}

.install-instructions {

    margin-top: 40px;
        margin-bottom: 60px;
}

.install-instructions ul {
    list-style-type: disc; /* Standard solid bullet point */
    padding-left: 20px;    /* Space for the bullets */
    color: white;
}

.install-instructions li {
    font-family: "AvenirCustom", Avenir, sans-serif;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.6;
    margin-bottom: 15px;
        text-align: left; /* Adds space between each bullet point */
}

/* Optional: Make the bullet points your theme's red color */
.install-instructions li::marker {
    color: #ffffff;
    font-size: 1.2em;
}
.install-instructions p {
   text-align: center !important;

    margin-bottom: 30px; /* This creates the gap before the first H3 */
    font-size: 20px;
    font-style: italic;
         font-weight: 410;
}













.main-footer {
    width: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    padding: 40px 0 20px 0; /* Space for icons and copyright */
    margin-top: 50px;       /* Pushes footer away from page content */
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Very subtle top line */
}

.footer-left {
    position: absolute;
    left: 30px;
    bottom: 50px; /* Aligned with copyright and icons */
    display: flex;
    gap: 20px;
}

.footer-left a {
    font-family: 'AvenirCustom', sans-serif;
    color: rgba(255, 255, 255, 0.5); /* Matches copyright color */
    text-decoration: none;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.footer-left a:hover {
    color: #ffffff;
    transform: translateY(-2px);
}


.footer-container {
    width: 100%;
    max-width: 500px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 20px;
}

.footer-icon img {
    width: 32px;  /* Adjust this to make icons bigger or smaller */
    height: 32px;
    transition: all 0.3s ease;
    filter: brightness(0) invert(1); /* This turns colored SVGs into pure white */
}

/* Hover Effect */
.footer-icon:hover img {
    transform: translateY(-5px);
    /* This makes the icon turn your signature pink on hover */
    filter: invert(53%) sepia(82%) saturate(3545%) hue-rotate(328deg) brightness(101%) contrast(100%);
}

.copyright {
    position: absolute;     /* Pushes it out of the center flow */
    right: 30px;            /* 30px from the right edge */
     bottom: 50px;          /* Aligned with the icons vertically */
    font-family: 'Bubblegum', cursive;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;        /* Slightly smaller to keep it subtle */
    letter-spacing: 1px;
    margin: 0;
}







.about-info {
    max-width: 820px; /* Matches the width of your Discord button */
    margin-top: -50px; /* Space between the buttons and the text */
    text-align: center;
    color: white;
    padding: 20px;
    background: rgba(0, 0, 0, 0.0); /* Subtle dark background to make text pop */
    border-radius: 20px;
}
.about-info h1 {
    font-family: 'Bubblegum', sans-serif;
    font-size: 60px;
    color: #ffffff; /* Matching your red theme */
    margin-bottom: 60px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.about-info h2 {
    font-family: 'Bubblegum', sans-serif;
    font-size: 50px;
    color: #ffffff; /* Matching your red theme */
    margin-bottom: 20px;
    
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}
.about-info h3 {
    font-family: 'Bubblegum', sans-serif;
    font-size: 30px;
    color: #ffffff; /* Matching your red theme */
    margin-bottom: 20px;
    
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}

.about-info h4 {
    font-family: 'Bubblegum', sans-serif;
    font-size: 40px;
    color: #ffffff; /* Matching your red theme */
    margin-bottom: 60px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.about-info p {
    font-family: 'AvenirCustom', sans-serif; /* A cleaner font for long reading */
    font-size: 19px;
    line-height: 1.6; /* Adds "air" between lines for readability */
    color: #f0f0f0;
    font-weight: 510;
    text-align: justify;
    text-align-last: center;
}









.walkthrough-container {
    max-width: 800px;
    margin: 20px auto;
}

.walkthrough-item {
    /* Semi-transparent white to match your blue bg */
    padding: 20px;
    margin-bottom: 15px;
    border-radius: 10px;
    text-align: left;
   
}



.walkthrough-item h2 {
    font-family: 'AvenirCustom', sans-serif;
    font-size: 20px !important;
    color: #ffffff; /* Matching your red theme */
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: left;
    
}

.full-content p {
    font-family: 'AvenirCustom', sans-serif; /* A cleaner font for long reading */
    font-size: 15px;
    line-height: 1.6; /* Adds "air" between lines for readability */
    color: #f0f0f0;
    font-weight: 510;
    text-align: left;
    text-align-last: left;
}



.full-content {
    max-height: 0;
    overflow: hidden;
transition: max-height 0.4s ease-in-out, padding 0.3s ease;
    
    border-radius: 0px;
}

/* This class will be added by JavaScript when clicked */
.full-content.open {
 /* Large enough to fit any text */
    padding: 0px;
    margin-bottom: 15px;
   
}

.read-more-btn {
    /* 1. Remove the "Box" look */
    background: none;
    border: none;
    padding: 0; /* Remove padding to align perfectly with text */
    
    /* 2. Style the text */
    color: #ffffff; /* Or whatever color you want the "Link" to be */
    font-family: 'AvenirCustom', sans-serif;
    font-size: 19px; /* Matches your paragraph size */
    font-weight: bold;
    text-decoration: underline; /* Makes it look like a clickable link */
    
    /* 3. Keep it functional */
    cursor: pointer;
    transition: 0.2s;
    display: inline-block;
}

.read-more-btn:hover {
    color: #C7E0FD; /* Changes color when you hover over it */
    text-decoration: none; /* Optional: remove underline on hover */
}









.suggested-links {
    padding: 40px 20px;
    /* Slightly different blue to stand out */
    text-align: center;
 
}

.button-container {
    display: flex;
    justify-content: center;
    gap: 50px;
    margin-top: 20px;
}

.suggest-btn {
    padding: 15px 25px;
      font-size: 30px;
    color: #ffffff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    transition: transform 0.2s, background-color 0.2s;
}

.suggest-btn:hover {

    transform: translateY(-3px); /* Makes it feel "clickable" */
}







/* Update the main button style name */
.download-option-btn {
 font-family: 'Bubblegum', sans-serif;
    text-decoration: none;
    color: white;
    font-size: 27px;
    padding: 25px 20px;
    border-radius: 50px; /* Rounded pill shape */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform 0.2s, filter 0.2s;
    text-transform: uppercase;
    flex: 1; 
    width: 100%; /* Allows it to fill the available space */
    max-width: 500px; /* Limits the top two buttons */
    box-sizing: border-box;
    /* Add your specific colors or fonts here if they weren't in the specific btn classes */
}

/* Ensure the stack still works with the new name */
.button-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 100%;
    max-width: 500px;
    margin: 0px auto;
}

.download-option-btn .btn-icon {
    width: 32px;     /* Match the visual weight of the Font Awesome icons */
    height: auto;
    object-fit: contain;
}
.download-option-btn:hover {
    transform: translateY(-3px);
    filter: brightness(1.1);
}



.download-info {
    max-width: 820px; /* Matches the width of your Discord button */
    margin-top: -50px; /* Space between the buttons and the text */
    text-align: center;
    color: white;
    padding: 20px;
    background: rgba(0, 0, 0, 0.0); /* Subtle dark background to make text pop */
    border-radius: 20px;
}
.download-info h1 {
    font-family: 'Bubblegum', sans-serif;
    font-size: 45px;
    color: #ffffff; /* Matching your red theme */
    margin-bottom: -10px;
    text-transform: uppercase;
    letter-spacing: 1px;
       /* This is the layered 3D effect from your Wix code */
    text-shadow: 
        #c8c8c8 1px 1px 0px, 
        #b4b4b4 0px 2px 0px, 
        #a0a0a0 0px 3px 0px, 
        #8c8c8c 0px 4px 0px, 
        #787878 0px 0px 0px;
}

.download-info h2 {
    font-family: 'Bubblegum', sans-serif;
    font-size: 35px;
    color: #ffffff; /* Matching your red theme */
  
    text-transform: uppercase;
    letter-spacing: 1px;
     margin-top: 70px;
}


.help-installing {
    max-width: 820px; /* Matches the width of your Discord button */
    margin-top: -150px; /* Space between the buttons and the text */
    text-align: center;
    color: white;
    padding: 20px;
    background: rgba(0, 0, 0, 0.0); /* Subtle dark background to make text pop */
    border-radius: 20px;
}

.help-installing h2 {
    font-family: 'Bubblegum', sans-serif;
    font-size: 60px;
    color: #ffffff; /* Matching your red theme */
    margin-bottom: 40px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.help-installing h3 {
    font-family: 'Bubblegum', sans-serif;
    font-size: 30px;
    color: #ffffff; /* Matching your red theme */
    margin-bottom: 20px;
    
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}

.help-installing h4 {
    font-family: 'Bubblegum', sans-serif;
    font-size: 30px;
    color: #ffffff; /* Matching your red theme */
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
        text-align: left;
}

.help-installing h5 {
    font-family: 'Bubblegum', sans-serif;
    font-size: 25px;
    color: #ffffff; /* Matching your red theme */
    margin-bottom: 60px;
    
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}

.help-installing p {
    font-family: 'AvenirCustom', sans-serif; /* A cleaner font for long reading */
    font-size: 19px;
    line-height: 1.6; /* Adds "air" between lines for readability */
    color: #f0f0f0;
    font-weight: 510;
  
        text-align: left;
}





.ps-wrapper {
    max-width: 820px; /* Matches the width of your Discord button */
    margin-top: 50px; /* Space between the buttons and the text */
    text-align: center;
    color: white;
    padding: 20px;
    background: rgba(0, 0, 0, 0.0); /* Subtle dark background to make text pop */
    border-radius: 20px;
}

.ps-wrapper h1 {
    font-family: 'Bubblegum', sans-serif;
    font-size: 50px;
    color: #ffffff; /* Matching your red theme */
    margin-bottom: 60px;
    text-transform: uppercase;
    letter-spacing: 1px;
        text-shadow: 
        #c8c8c8 1px 1px 0px, 
        #b4b4b4 0px 2px 0px, 
        #a0a0a0 0px 3px 0px, 
        #8c8c8c 0px 4px 0px, 
        #787878 0px 0px 0px;
  
}

.ps-wrapper h2 {
    font-family: 'Bubblegum', sans-serif;
    font-size: 45px;
    color: #ffffff; /* Matching your red theme */
    margin-bottom: 60px;
        margin-top: 60px;
    text-transform: uppercase;
    letter-spacing: 1px;
}


/* The Background Overlay */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5); /* Dark semi-transparent background */
    backdrop-filter: blur(5px); /* Optional: blurs the background site */


    /* ADD THIS: This helps center the modal box if it's smaller than the screen */
    display: none; 
    align-items: flex-start; /* Keeps it near the top */
    justify-content: center;
    overflow-y: auto; /* Allows the WHOLE overlay to scroll if needed */
    padding: 20px;
}

/* The Box in the Middle */
.modal-content {
    background-color: rgba(0,0,0,0.5);
    margin: 3% auto;
    padding: 30px;
    
    width: 90%;
    max-width: 700px;
    border-radius: 15px;
    color: white;
    position: relative;

   

}


.modal-content h3 {
    font-family: 'Bubblegum', sans-serif; /* Use your specific game font here */
    font-size: 32px;
     text-align: center;
  
}

.modal-content h4 {
    font-family: 'AvenirCustom', sans-serif; /* Use your specific game font here */
    font-size: 17px;
       font-weight: bold;
       text-decoration: underline;
      
  
}

/* Styling the Update Notes Body (p) */
.modal-content p {
   font-family: 'AvenirCustom', sans-serif; /* A cleaner, readable font for long text */
    font-size: 15px;
  
}

.modal-content p a {
    color: #ffffff; /* Change this to your preferred brand color */
    text-decoration: none; /* Removes the underline if you want it cleaner */
    font-weight: bold;
}

/* This stops the link from turning purple after you click it */
.modal-content p a:visited {
    color: #3498db; /* Keep this the same as the 'p a' color */
}

/* This makes it react when the user moves their mouse over it */
.modal-content p a:hover {
    color: #61a6d5; /* Change to a different color on hover */
    text-decoration: underline;
}

/* The Close Button (X) */
.close-btn {
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 35px;
    cursor: pointer;
 
}

.update-notes-btn {
 font-family: 'Bubblegum', sans-serif;
   background-color: #B0CAEC; /* Change this to whatever hex color you want for the box */
    color: #ffffff;            /* Change this for the font color */
    border: none;              /* This removes the black border line */
    outline: none;             /* This removes the focus ring */
    cursor: pointer;
    
    font-size: 27px;
    padding: 25px 20px;
    border-radius: 50px; /* Rounded pill shape */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform 0.2s, filter 0.2s;
    text-transform: uppercase;

    width: 100%; /* Allows it to fill the available space */
    max-width: 500px; /* Limits the top two buttons */
    box-sizing: border-box;
   
}


.update-notes-btn:hover {
    transform: translateY(-3px);
    filter: brightness(1.1);
}


.modal-btn-row {
    display: flex;
    justify-content: center; /* Centers them horizontally */
    gap: 30px;               /* Space between the two words */
    margin-bottom: 20px;     /* Space before the H4 starts */
}

/* The actual text "buttons" */
.modal-text-btn {
    font-family: 'Bubblegum', sans-serif;
    font-size: 18px;
    color: #ffffff;          /* Your theme blue */
    cursor: pointer;
    text-transform: uppercase;
    transition: color 0.2s, transform 0.2s;
    border-bottom: 2px solid transparent; /* Prepare for a hover underline */
    padding-bottom: 5px;
}

/* Hover effect so users know they can interact with them */
.modal-text-btn:hover {
     /* Adds a nice underline on hover */
    transform: translateY(-2px);      /* Tiny "lift" effect */
}
/* On Desktop, make sure it's visible */
.hide-mobile {
    display: inline;
}


.install-container {
    display: flex;
    flex-direction: column; /* Keep them stacked vertically */
}
.timer-flex-container {
        display: flex;
        flex-wrap: wrap; /* Allows stacking on small phones */
        gap: 20px;
        justify-content: center;
        margin: 20px 0;
    }

    /* Individual timer boxes */
    .timer-box {
        flex: 1; /* Equal width */
        min-width: 280px; /* Prevents them from getting too squished */
        max-width: 450px;
        background: rgba(0,0,0,0.05); /* Very light grey background */
        padding: 20px;
        border-radius: 10px;
        text-align: center;
    }

    .timer-numbers {
        font-size: 2rem;
        font-weight: bold;
        font-family: monospace;
        color: #ffffff;
    }

    .timer-label {
        margin-top: 10px;
        font-style: italic;
        font-weight: bold;
        color: #555;
    }


.next-update-info {
    max-width: 820px; /* Matches the width of your Discord button */
    margin-top: 0px; /* Space between the buttons and the text */
    text-align: center;
    color: white;
    padding: 20px;
    background: rgba(0, 0, 0, 0.0); /* Subtle dark background to make text pop */
    border-radius: 20px;
}

.next-update-info h2 {
    font-family: 'Bubblegum', sans-serif;
    font-size: 60px;
    color: #ffffff; /* Matching your red theme */
    margin-bottom: 40px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.next-update-info h3 {
    font-family: 'AvenirCustom', sans-serif;
    font-size: 30px;
    color: #ffffff; /* Matching your red theme */
    margin-bottom: 40px;
    
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}

.next-update-info h4 {
    font-family: 'Bubblegum', sans-serif;
    font-size: 40px;
    color: #ffffff; /* Matching your red theme */
    margin-bottom: 60px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.next-update-info p {
    font-family: 'AvenirCustom', sans-serif; /* A cleaner font for long reading */
    font-size: 19px;
    line-height: 1.6; /* Adds "air" between lines for readability */
    color: #f0f0f0;
    font-weight: 510;
    text-align: justify;
    text-align-last: center;
       margin-top: 25px;
        margin-bottom: 25px;
}

.troubleshooting-section-bg {
    width: 100%;
  
    /* THE GRADIENT: Adjust the #333333 to match your specific grey */
    background: linear-gradient(to bottom, transparent 0%, #798599 45%);
    margin-top: 20px;           /* Space between buttons and the grey strip */
    padding: 100px 0 60px 0;          /* Vertical padding inside the grey strip */
    display: flex;
    justify-content: center; 
    margin-bottom: 0 !important;  /* Centers the .game-info box inside it */
}
.troubleshooting {
    max-width: 820px; /* Matches the width of your Discord button */
    margin-top: -30px; /* Space between the buttons and the text */
    
    color: white;
    padding: 20px;
    background: rgba(0, 0, 0, 0.0); /* Subtle dark background to make text pop */
    border-radius: 20px;
}

.troubleshooting h2 {
    font-family: 'Bubblegum', sans-serif;
    font-size: 60px;
    color: #ffffff; /* Matching your red theme */
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}

.troubleshooting h3 {
    font-family: 'Bubblegum', sans-serif;
    font-size: 20px;
    color: #ffffff; /* Matching your red theme */
    margin-bottom: 30px;
    
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}

.troubleshooting h4 {
      font-family: 'AvenirCustom', sans-serif;
    font-size: 20px;
    color: #ffffff; /* Matching your red theme */
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.troubleshooting p {
    font-family: 'AvenirCustom', sans-serif; /* A cleaner font for long reading */
    font-size: 19px;
    line-height: 1.6; /* Adds "air" between lines for readability */
    color: #f0f0f0;
    font-weight: 510;
  
}

/* Styling the button grid */
        .trouble-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 30px;
        }

        .jump-link {
            display: block;
            padding: 15px;
            background-color: #555;
            color: white;
            text-decoration: none;
            border-radius: 8px;
            font-weight: bold;
            transition: transform 0.2s, background 0.3s;
             font-family: 'AvenirCustom', sans-serif; /* A cleaner font for long reading */
    font-size: 19px;
        font-weight: 510;
        text-align: center;
        }

        .jump-link:hover {
            background-color: #555;
            transform: translateY(-3px);
        }

        /* Styling the actual content sections */
        .fix-section {
            margin-top: 80px; /* Big gap so it jumps clearly */
            padding-top: 40px;
            border-top: 1px solid #ddd;
            text-align: left;
        }

        .fix-section h2 {
    font-family: 'Bubblegum', sans-serif;
    font-size: 35px;
    color: #ffffff; /* Matching your red theme */
    margin-bottom: 30px;
    
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}

     .fix-section h3 {
           font-family: 'AvenirCustom', sans-serif; /* A cleaner font for long reading */
    font-size: 25px;
        font-weight: 510;
           text-align: left;
}

/* Style for the Paragraph Text (P) */
.fix-section p {
               font-family: 'AvenirCustom', sans-serif; /* A cleaner font for long reading */
    font-size: 19px;
        font-weight: 510;
          text-align: left !important;
}

.fix-section p a {
    color: #ffffff; /* A bright, clickable cyan */
    text-decoration: none; /* Removes the default underline if you want */
    font-weight: bold;
    transition: color 0.3s ease;
     text-decoration: underline;
}

/* Style for when the user hovers over the link */
.fix-section p a:hover {
    color: #ffffff; /* Turns white when hovered */
    text-decoration: underline; /* Adds underline back on hover for clarity */
}

.fix-section li {
    font-family: 'AvenirCustom', sans-serif;
     font-size: 19px;
        font-weight: 510;
        margin-bottom: 12px;
     
}
.fix-section ol {
   margin-top: -40px;
}
.fix-image-container {
    display: flex;
    gap: 20px;          /* Space between the two images */
    margin-top: 20px;
    justify-content: center; /* Centers the pair of images */
}

.fix-image-container img {
    width: 48%;         /* Takes up slightly less than half to allow for the gap */
    max-width: 400px;   /* Prevents images from becoming giant on huge screens */
    height: auto;       /* Keeps the image aspect ratio perfect */
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}























































/* --- MOBILE SPECIFIC STUFF --- */
@media (max-width: 768px) {
    
/* 1. GLOBAL MOBILE RESET: Stops the right-side shift */
    html, body {
        overflow-x: hidden; /* Kills horizontal scroll */
        width: 100%;
        position: relative;
    }

    
    .main-footer {
        display: none !important;
    }


    .home-button, .desktop-nav {
        display: none !important;
    }

    /* Show the Burger Menu Icon */
    .menu-toggle {
        display: flex;
    }



    .button-row {
        flex-direction: column;
        align-items: center;
    }
    .home-btn {
        width: 100%;
    }
.info-section-bg {
        margin-top: 0px !important; /* Shrunk from 50px to 20px */
        padding-top: 0px; 
            background: linear-gradient(to bottom, transparent 0%, #798599 55%);           /* Reduce internal top padding for mobile */
    }
.about-section-bg {
        margin-top: 0px !important; /* Shrunk from 50px to 20px */
        padding-top: 0px; 
            background: linear-gradient(to bottom, transparent 0%, #798599 55%);           /* Reduce internal top padding for mobile */
    }

    .profile-img {
        width: 220px;  /* Adjust this to the size you like for mobile */
        height: 220px;
        margin-top: -10px;
    }

   .button-row {
        flex-direction: column; 
        align-items: center;    /* Keeps them centered on the screen */
        gap: 30px;       /* Shrunk from 60px to 15px */
        margin-bottom: -10px; /   /* Adds space before the Discord button starts */
    }

    /* 2. Make all buttons a consistent width for mobile */
    .home-btn {
        width: 90%;             /* Makes them easy to tap with a thumb */
        max-width: 400px;       /* Prevents them from getting too wide on tablets */
        justify-content: center; /* Keeps text and icon centered inside the button */
        padding: 15px 10px;     /* Slightly slimmer padding for mobile screens */
        font-size: 16px;        /* Adjust font size so text doesn't wrap */
    }

    /* 3. Ensure the Discord container also centers its content */
    .button-full {
        width: 100%;
        display: flex;
        justify-content: center;
        
    }




    .game-info {
    max-width: 820px; /* Matches the width of your Discord button */
    margin-top: 50px; /* Space between the buttons and the text */
    text-align: center;
    color: white;
    padding: 20px;
    background: rgba(0, 0, 0, 0.0); /* Subtle dark background to make text pop */
    border-radius: 20px;
}

.game-info h2 {
    font-family: 'Bubblegum', sans-serif;
    font-size: 30px;
    color: #ffffff; /* Matching your red theme */
    margin-bottom: 60px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.game-info h3 {
    font-family: 'Bubblegum', sans-serif;
    font-size: 30px;
    color: #ffffff; /* Matching your red theme */
    margin-bottom: 20px;
    
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}

.game-info a {
   
    font-size: 20px;
   
   
}

.game-info h4 {
    font-family: 'Bubblegum', sans-serif;
    font-size: 40px;
    color: #ffffff; /* Matching your red theme */
    margin-bottom: 60px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.game-info p {
    font-family: 'AvenirCustom', sans-serif; /* A cleaner font for long reading */
    font-size: 12px;
    line-height: 1.6; /* Adds "air" between lines for readability */
    color: #f0f0f0;
    font-weight: 510;
    text-align: justify;
    text-align-last: center;
}


.game-features h2 {

 
    margin-bottom: 20px;
    
}

.game-features a {
    
    font-size: 15px;
  
}

.game-features h3 {
    font-family: 'Bubblegum', sans-serif;
    font-size: 20px;
    color: #ffffff; /* Matching your red theme */
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: left;
}

.game-features h4 {
    font-family: 'Bubblegum', sans-serif;
    font-size:18px;
    color: #ffffff; /* Matching your red theme */
    margin-bottom: 60px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.game-features p {
    text-align: left;
    text-align-last: left; /* Overrides the center-last-line rule */
    margin-bottom: 30px; 
     font-weight: 510;  /* Adds a gap before the next H3 */
}

.install-instructions {

    margin-top: 40px;
        margin-bottom: 60px;
}

.install-instructions ul {
    list-style-type: disc; /* Standard solid bullet point */
    padding-left: 20px;    /* Space for the bullets */
    color: white;
  }

.install-instructions li {
    font-family: "AvenirCustom", Avenir, sans-serif;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.6;
    margin-bottom: 15px;
           text-align: left; /* Adds space between each bullet point */
   }

/* Optional: Make the bullet points your theme's red color */
.install-instructions li::marker {
    color: #ffffff;
    font-size: 1.2em;
    }
.install-instructions p {
   text-align: center !important;

    margin-bottom: 0px; /* This creates the gap before the first H3 */
    font-size: 12px;
    font-style: italic;
         font-weight: 410;
 }

 /* Set the main container to Flex mode */
    .install-instructions {
        display: flex;
        flex-direction: column;
    }
  /* Force the intro paragraph to always stay at the very top */
    .install-intro {
        order: -2;
    }

    /* Move Android to the middle (above PC) */
    .android-instructions {
        order: -1;
    }

    /* PC will naturally sit at the bottom because its order is 0 */
    .pc-instructions {
        order: 0;
    }



.about-info {
        width: 90%;          /* Uses 90% of the screen width */
        max-width: 100%;     /* Prevents it from ever being wider than the screen */
        margin: 20px auto;   /* Centers it and brings it closer to the top */
        padding: 15px;       /* Smaller padding for small screens */
        box-sizing: border-box; /* CRITICAL: Includes padding in the width calculation */
        padding-bottom: 0px !important;
    }

.about-info h1 {
    font-family: 'Bubblegum', sans-serif;
    font-size: 30px;
    color: #ffffff; /* Matching your red theme */
        margin-top: 50px;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.about-info h2 {
    font-family: 'Bubblegum', sans-serif;
    font-size: 25px;
    color: #ffffff; /* Matching your red theme */
        margin-bottom: 20px;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.about-info h3 {
    font-family: 'Bubblegum', sans-serif;
    font-size: 22px;
    color: #ffffff; /* Matching your red theme */
    margin-bottom: 30px;
    
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}

.about-info h4 {
    font-family: 'Bubblegum', sans-serif;
    font-size: 40px;
    color: #ffffff; /* Matching your red theme */
    margin-bottom: 60px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.about-info p {
    font-family: 'AvenirCustom', sans-serif; /* A cleaner font for long reading */
    font-size: 12px;
    line-height: 1.6; /* Adds "air" between lines for readability */
    color: #f0f0f0;
    font-weight: 510;
    text-align: justify;
    text-align-last: center;
     
}

.button-container {
        display: flex;
        flex-direction: column; /* Stacks buttons on top of each other */
        align-items: center;    /* Centers them */
        gap: 15px;              /* Space between the stacked buttons */
        width: 100%;
         margin-bottom: -50px; 
        
    }

    /* 2. Ensure buttons don't exceed screen width */
    .suggest-btn {
        width: 100%;            /* Makes them full width of the about-info box */
        max-width: 300px;       /* Keeps them from getting too huge on tablets */
        box-sizing: border-box; /* Includes padding in width */
        text-align: center;
        padding: 15px;       
              font-size: 18px; 
              /* Comfortable thumb-tapping size */
    }


.read-more-btn {
    /* 1. Remove the "Box" look */
  
    font-size: 12px; /* Matches your paragraph size */
  
}


.walkthrough-item h2 {
   
    font-size: 17px !important;
   
    
}


.full-content p {
    font-family: 'AvenirCustom', sans-serif; /* A cleaner font for long reading */
    font-size: 12px;
    line-height: 1.6; /* Adds "air" between lines for readability */
    color: #f0f0f0;
    font-weight: 510;
    text-align: left;
    text-align-last: left;
}



.ps-wrapper {
        width: 90%;          /* Uses 90% of the screen width */
        max-width: 100%;     /* Prevents it from ever being wider than the screen */
        margin: -40px auto;   /* Centers it and brings it closer to the top */
        padding: 15px;       /* Smaller padding for small screens */
        box-sizing: border-box; /* CRITICAL: Includes padding in the width calculation */
        padding-bottom: 50px !important;
}

.ps-wrapper h1 {
 
    font-size: 30px;

  
}

.ps-wrapper h2 {

    font-size: 25px;
    margin-bottom: 35px;
  
}

.download-info {
          /* Uses 90% of the screen width */
        max-width: 100%;     /* Prevents it from ever being wider than the screen */
        margin: -70px auto;   /* Centers it and brings it closer to the top */
        padding: 15px;       /* Smaller padding for small screens */
        box-sizing: border-box; /* CRITICAL: Includes padding in the width calculation */
        padding-bottom: 50px !important;
         /* Forces text to stay on one line */
    width: 100%;         /* Ensures it takes up the full width of the parent */
    display: block;
}
.download-info h1 {
   
    font-size: 25px;
        max-width: 100%; 
        margin-bottom: 30px;
 
}

.download-info h2 {
    
    font-size: 15px;
    
}

.download-option-btn {
 
    font-size: 20px;
   
}

/* Ensure the stack still works with the new name */
.button-stack {
   
    max-width: 500px;
    margin: 0px auto;
}

.download-option-btn .btn-icon {
    width: 32px;     /* Match the visual weight of the Font Awesome icons */
    height: auto;
    object-fit: contain;
}
.hide-mobile {
        display: none;
    }




.help-installing {
       width: 90%;          /* Uses 90% of the screen width */
        max-width: 100%;     /* Prevents it from ever being wider than the screen */
        margin: -40px auto;   /* Centers it and brings it closer to the top */
        padding: 15px;       /* Smaller padding for small screens */
        box-sizing: border-box; /* CRITICAL: Includes padding in the width calculation */
       
}

.help-installing h2 {
    
    font-size: 30px;
   
}

.help-installing h3 {
   
    font-size: 30px;

}

.help-installing h4 {
   
    font-size: 20px;
}

.help-installing h5 {
  
    font-size: 14px;
    margin-bottom: 15px;
 
}

.help-installing p {
    
    font-size: 16px;
    
}

.install-container {
        display: flex;
        flex-direction: column;
    }

    .android {
        order: 1; /* Moves Android to the top */
    }

    .win-linux {
        order: 2; /* Moves Windows below Android */
    }

    .mac {
        order: 3; /* Moves Mac to the bottom */
    }

.update-notes-btn {
 
    
    font-size: 22px;
        max-width: 300px;

   
}


.modal {
        /* Remove the padding that is pushing the box to the right */
        padding: 0 !important; 
        display: none; /* Will be flex when open */
        align-items: flex-start;
        justify-content: center;
    }

    .modal-content {
        /* 1. Reset margins */
        margin: 20px auto !important; 
        
        /* 2. Fix the width math */
        width: 90% !important;
        max-width: 320px;
        
        /* 3. THE MAGIC LINE: Includes padding inside the width */
        box-sizing: border-box !important; 
        
        /* 4. Reset any positioning */
        left: 0;
        right: 0;
        position: relative;
    }


.modal-content h3 {
    
    font-size: 25px;
    
  
}

.modal-content h4 {
   
    font-size: 17px;
      
      
  
}

/* Styling the Update Notes Body (p) */
.modal-content p {
  
    font-size: 15px;
  
}

.close-btn {
        /* 1. Reset the desktop 'right' position */
        right: auto; 
        
        /* 2. Move to horizontal center */
        left: 50%;
        transform: translateX(-50%);
        
        /* 3. Move it "up a bit" */
        /* Currently it's 10px from top, negative value moves it higher */
        top: -8px; 
        
        /* 4. Optional: Make it easier to tap on mobile */
        font-size: 40px; 
        padding: 10px;
    }

.next-update-info {
    max-width: 820px; /* Matches the width of your Discord button */
    margin-top: -50px; /* Space between the buttons and the text */
    text-align: center;
    color: white;
    padding: 20px;
    background: rgba(0, 0, 0, 0.0); /* Subtle dark background to make text pop */
    border-radius: 20px;
}

.next-update-info h2 {
    font-family: 'Bubblegum', sans-serif;
    font-size: 30px;
    color: #ffffff; /* Matching your red theme */
    margin-bottom: 60px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.next-update-info h3 {
    font-family: 'AvenirCustom', sans-serif;
    font-size: 25px;
    color: #ffffff; /* Matching your red theme */
    margin-bottom: 40px;
    
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}

.next-update-info h4 {
    font-family: 'Bubblegum', sans-serif;
    font-size: 40px;
    color: #ffffff; /* Matching your red theme */
    margin-bottom: 60px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.next-update-info p {
    font-family: 'AvenirCustom', sans-serif; /* A cleaner font for long reading */
    font-size: 12px;
    line-height: 1.6; /* Adds "air" between lines for readability */
    color: #f0f0f0;
    font-weight: 510;
    text-align: justify;
    margin-top: 15px;
        margin-bottom: 15px;
    text-align-last: center;
}

.timer-numbers {
    font-size: 1.8rem !important; /* <--- CHANGE THIS NUMBER */
 
}



.troubleshooting-section-bg {
        margin-top: 0px !important; /* Shrunk from 50px to 20px */
        padding-top: 0px; 
            background: linear-gradient(to bottom, transparent 0%, #798599 55%);           /* Reduce internal top padding for mobile */
            overflow-x: hidden;
            margin-left: -14px;
    }


.troubleshooting {
        width: 90%;          /* Uses 90% of the screen width */
        max-width: 100%;     /* Prevents it from ever being wider than the screen */
        margin: 20px auto;   /* Centers it and brings it closer to the top */
        padding: 15px;       /* Smaller padding for small screens */
        box-sizing: border-box; /* CRITICAL: Includes padding in the width calculation */
        padding-bottom: 0px !important;
    }



.troubleshooting h2 {
        font-size: 28px; /* Down from 60px */
        margin-bottom: 20px;
        margin-top: -10px;
    }

    /* 2. Shrink section headers */
    .fix-section h2 {
        font-size: 28px; /* Down from 35px */
    }

    .fix-section h3 {
        font-size: 15px;
        margin-bottom: 12px; /* Down from 25px */
    }

    /* 3. Adjust body text for readability */
    .fix-section p {
        font-size: 12px; /* Down from 25px */
    }


.trouble-grid {
    grid-template-columns: 1fr; /* Stack buttons in a single column */
    gap: 10px;
    justify-items: center;      /* This centers the buttons horizontally in the grid */
    width: 100%;
}

.jump-link {
    width: 100%; 
    max-width: 300px;           /* Keeps them from becoming too wide */
    margin: 0 auto;             /* Standard centering trick */
    box-sizing: border-box; 
    font-size: 14px; 
    text-align: center;         /* Centers the text inside the button */
}

    /* 5. Fix the Image Container (Stack them) */
   .fix-image-container {
        flex-direction: column;
        align-items: center;
    }
    .fix-image-container img {
        width: 100%;
        max-width: 200px; /* Limits size on mobile so they don't get too tall */
    }

    /* 6. Fix Padding (Prevents text touching the screen edges) */
    .troubleshooting-section-bg {
        padding: 60px 15px 40px 15px; /* Add side padding */
    }

    .troubleshooting {
        padding: 10px; /* Less interior padding to save space */
    }

    .fix-section ol, .fix-section ul {
    padding-left: 20px !important; /* Shrunk from the default 40px */
    margin-left: 0 !important;
          margin-top: -20px;

}

.fix-section li {
    margin-left: 0 !important;
    padding-left: 0 !important;
     font-size: 12px; 
   
}












    .footer-container {
        max-width: 90%;
    }
    .footer-icon {
        font-size: 24px;
    }





}
    /* Add any other mobile-only styles here */