/* --- VARIABLES & RESET --- */
:root {
  /* Colors */
  --color-dark-green: #18221C;
  --color-red-primary: #E43331; 
  --color-yellow-primary:  #ba9977;
  --font-color-light: #ffffff;
  --color-nav-bg: rgba(0, 0, 0, 0.7);

  /* Gradient Colors for Box and Button */
  --color-gradient-start: rgba(26, 33, 26, 0.79); /* Darker, Bottom of 0deg gradient */
  --color-gradient-end: rgba(40, 63, 39, 0.79); /* Lighter, Top of 0deg gradient */
  
    --color-btn-gradient-start: rgba(26, 33, 26, 0.9); /* Darker, Bottom of 0deg gradient */
    --color-btn-gradient-end: rgba(40, 63, 39, 0.9); /* Lighter, Top of 0deg gradient */

  --color-more-button-width: 100px;
  --color-more-button-height: 45px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
  font-family: 'Belanosima', serif;
  color: var(--font-color-light);
  background-color: var(--color-dark-green);
  line-height: 1.6;
  min-height: 100vh;
  position: relative;
}

a {
    text-decoration: none; 
    color: inherit; /* Inherit the text color from the parent element (usually white) */
    transition: none; /* Remove transition properties */
}
/* Ensure no color change on hover, focus, or click */
a:hover, a:focus, a:active, a:visited {
    color: inherit; 
    text-decoration: none;
}

/* Dedicated Fixed Background Layer */
.background-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* SVG Pattern Styling (Inside the layer) */
.body__pattern {
  width: 100%;
  height: 100%;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

h2 {
  font-family: 'Belanosima', serif;
  margin-bottom: 20px;
  text-transform: uppercase;
  font-weight: 600;
}

/* --- CUSTOM NOTIFICATION STYLING --- */
.custom-notification {
    position: fixed;
    top: -60px; /* Start off-screen */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000; 
    padding: 15px 30px;
    border-radius: 5px;
    color: var(--font-color-light);
    font-size: 1.1em;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease-in-out;
    min-width: 300px;
    text-align: center;
}

.custom-notification.show {
    top: 20px; /* Slide down to visible position */
    opacity: 1;
    visibility: visible;
}

.custom-notification.success {
    background-color: rgba(40, 63, 39, 0.9); /* Dark Green */
    border: 1px solid var(--color-gradient-end);
}

.custom-notification.error {
    background-color: rgba(228, 51, 49, 0.9); /* Red */
    border: 1px solid var(--color-red-primary);
}


/* --- 1. HEADER / LOGO SECTION (The Hero) --- */
/* --- LIQUID BACKGROUND CONTAINER STYLES --- */
#liquid-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Place it behind the nav and logo (which implicitly have a higher z-index due to structure) */
    pointer-events: none; /* Crucial: Allows clicking through to the content behind the canvas */
}

/* Ensure the canvas element inside the container is also full size */
#liquid-bg-container canvas {
    display: block;
    width: 100%;
    height: 100%;
}


.hero-section {
  min-height: 75vh;
/* background-image: url('imgs/bg_top.png'); */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding-bottom: 50px;
}

/* Navigation Bar */
#navbar {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 30px;
  background-color: transparent;
  z-index: 20;
}

.nav-links a {
  color: var(--font-color-light);
  text-decoration: none;
  margin-left: 30px;
  font-size: 1.1em;
  text-transform: uppercase;
  transition: color 0.3s;
}
.nav-links a:hover {
  color: var(--color-red-primary);
}

.hamburger-menu {
  display: none;
}

/* GAME LOGO MAX WIDTH (PC) */
/* NEW: Wrapper to hold the eye and static logo together horizontally */
.logo-visuals {
    display: flex;
    align-items: center; /* Vertically align items in the middle */
    justify-content: center; /* Centers the combined element (eye + logo) */
    margin-bottom: 10px; /* Space between combined logo and slogan */
}

/* NEW: Style for the animated eye */
.logo-eye-animation {
    width: 128px;
    height: 128px;
    margin-right: 15px; /* Space between eye and logo image */
}

/* Modify existing .main-logo to ensure it aligns correctly within the new flex wrapper */
/* You should look for and replace the existing .main-logo block */
.main-logo {
    max-width: 700px; 
    height: auto;
    /* Clear previous margins, as spacing is now handled by the new wrappers */
    margin-bottom: 0; 
}

/* SLOGAN CENTERING (PC) */
.slogan {
    font-size: 1.2em;
    margin-bottom: 20px; /* Adds space below the line before the next section */
    text-transform: uppercase;
    text-align: center; 
}

.slogan::after {
    content: '';
    display: block;
    width: 100px; /* Adjust the length of the line */
    height: 2px; /* Adjust the thickness of the line */
    background-color: #C5D7D6; /* The requested color */
    margin: 10px auto 0; /* Centers the line horizontally and adds space above it */
}

/* --- 2. GAME THUMBNAILS SECTION (Overlap) --- */
.game-showcase {
  background-color: transparent;
  margin-top: -150px;
  padding: 80px 0;
  position: relative;
  z-index: 10;
}

.game-grid {
  display: flex;
  justify-content: center;
  gap: 60px; /* Increased gap */
}

.game-card {
  max-width: 300px;
  text-align: center;
  position: relative;
  cursor: pointer;
}
.game-card img {
  width: 100%;
  height: auto;
  display: block;
}


.more-button {
  background: linear-gradient(0deg, var(--color-btn-gradient-start) 5%, var(--color-btn-gradient-end) 46%);
 
  position: absolute;
  bottom: calc(0px - (var(--color-more-button-height) / 2));
  left: 50%;
  transform: translateX(-50%);

  width: var(--color-more-button-width);
  height: var(--color-more-button-height);
  line-height: var(--color-more-button-height);

  text-transform: uppercase;
  font-size: 0.9em;
 
  border-radius: 5px;
  transition: opacity 0.2s;
}

.more-button:hover {
  opacity: 0.9;
}


/* --- 3. BENEFITS SECTION (Transparent, Positioning for Title) --- */
.benefits-section {
  background-color: transparent;
  position: relative;
  /* Removed padding for desktop */
  padding-bottom: 100px;
}

.benefits-layout {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  text-align: left;
  gap: 40px;
}

/* Benefits Title Positioning */
.benefits-title {
  position: absolute;
  /* KEY CHANGE: Push title further up to overlap character's head area */
  /* top: -20px; */
  /* KEY CHANGE: Adjust horizontal position to sit just right of the character */
  left: 30%;
  transform: translateX(-50%);
  z-index: 0;
  /* Increased font size for scaling */
  font-size: 2.2em;
  padding: 8px 18px;
   background: linear-gradient(0deg, var(--color-gradient-start) 5%, var(--color-gradient-end) 46%);

    border-radius: 10px 10px 0 0; 
  margin: 0;
}

/* Character Image Holder */
.benefits-image-header {
  /* KEY CHANGE: Reduced width for the character column */
  flex: 0 0 350px;
  text-align: center;
  position: relative;
  /* Removed padding-top for a tighter fit */
  padding-top: 0;
}
.character-art {
  /* KEY CHANGE: Reduced max-width for slightly smaller character */
  max-width: 90%;
  height: auto;
  display: block;
  margin-top: 0;
}

/* --- Benefits Content Box (Scaling up the box) --- */
.benefits-content-box {
  flex: 1;
  /* Increased padding for bigger box */
  padding: 40px;
  background: linear-gradient(0deg, var(--color-gradient-start) 5%, var(--color-gradient-end) 46%);
 
  /* BORDER RADIUS: Top rounded, bottom square */
  border-radius: 40px 40px 0 0;
 
  /* KEY CHANGE: Reduced margin-top to pull the box higher */
  margin-top: 100px;
}

/* List Styles */
.benefits-list {
  list-style: none;
  padding-left: 0;
  /* Slightly larger font size for the list */
  font-size: 1.8em;
}

.benefits-list li {
  margin-bottom: 30px; /* More space between items */
  line-height: 1.4;
  padding-left: 35px; /* Adjust padding for bigger font/icon */
  position: relative;
}
.benefits-list li::before {
  /* Leaf icon image */
  content: '';
  position: absolute;
  left: 0;
  top: 7px; /* Adjusted vertical position for new font size */
  width: 25px; /* Slightly bigger icon */
  height: 25px;
  background-image: url('imgs/icon_leaf.png');
  background-size: contain;
  background-repeat: no-repeat;
  line-height: 1;
}
.benefits-list li strong {
  /*font-weight: 700;*/
  color: var(--color-yellow-primary);
}


/* --- 4. CALL TO ACTION (CTA) SECTION (Two-Column Layout) --- */
.cta-section {
  background-image: url('imgs/bg_top.png');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
 
  padding: 10px 0px 100px;
  position: relative;
}

.cta-layout {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  text-align: left;
  gap: 30px;
}

.cta-content {
  flex: 1;
  padding-bottom: 20px;
}

.cta-text {
  font-size: 2.5em;
  /*margin-bottom: 40px;*/
  line-height: 1.2;
  text-transform: uppercase;
}

/* --- MODAL (APPLICATION FORM) STYLING --- */

/* Modal Background (Full screen overlay) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 100; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.9); /* Black w/ high opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: var(--color-dark-green);
    margin: 5% auto; /* 5% from the top and centered */
    padding: 40px;
    border: 1px solid rgba(228, 51, 49, 0.5); /* Red border */
    width: 90%; 
    max-width: 700px; /* Max width for readability */
    position: relative;
    border-radius: 10px;
}

.modal-title {
    color: var(--color-red-primary);
    text-align: center;
    margin-bottom: 30px;
    font-size: 2em;
}

/* Close Button (X) */
.close-button {
    color: var(--font-color-light);
    float: right;
    font-size: 36px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 20px;
}
.close-button:hover,
.close-button:focus {
    color: var(--color-red-primary);
    text-decoration: none;
    cursor: pointer;
}

/* Form Styling */
.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 1.1em;
    color: #C5D7D6; /* Light gray color for labels */
}

.form-group input[type="email"],
.form-group input[type="text"],
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--color-gradient-start);
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.5);
    color: var(--font-color-light);
    font-size: 1em;
    resize: vertical;
}

.form-group small {
    display: block;
    margin-top: 5px;
    font-size: 0.85em;
    color: #999;
}

/* Checkbox Styling (Custom look to match design) */
.checkbox-container {
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 1em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--color-gradient-start);
    border-radius: 2px;
}
.checkbox-container input:checked ~ .checkmark {
    background-color: var(--color-red-primary);
}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.checkbox-container input:checked ~ .checkmark:after {
    display: block;
}
.checkbox-container .checkmark:after {
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.form-group input[type="email"],
.form-group input[type="text"],
.form-group input[type="url"], /* ADDED: This ensures link fields are styled */
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--color-gradient-start);
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.5);
    color: var(--font-color-light);
    font-size: 1em;
    resize: vertical;
}

/* Send Button */
.send-button {
    font-family: 'Belanosima', serif;
    font-weight: 700;
    font-size: 1.2em;
    padding: 12px 40px;
    border: none;
    cursor: pointer;
    color: var(--font-color-light);
    
    /* Dark BG for contrast with Apply button */
    background-color: #2c3e50; 
    transition: background-color 0.3s;
    border-radius: 4px;
    margin-left: 20px;
}

.send-button:hover {
    background-color: #34495e;
}

/* Submission Group Layout */
.submit-group {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 30px;
}

.privacy-notice {
    font-size: 0.75em;
    color: #999;
    text-align: right;
    margin-top: 10px;
}



.apply-button {
  font-family: 'Belanosima', serif;
  font-weight: 700;
  font-size: 1.5em;
  padding: 15px 50px;
  border: none;
  cursor: pointer;
  color: var(--font-color-light);
 
  /* RED with 75% transparency and gradient */
  background: rgba(228, 51, 49, 0.75);
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(228, 51, 49, 0.75));
 
  transition: background-color 0.3s;
  text-transform: uppercase;
}

.cta-image-container {
  flex: 0 0 400px;
  text-align: right;
  position: relative;
  z-index: 1;
}

.cta-character-art {
  max-width: 100%;
  height: auto;
  display: block;
 
  /* Negative margin to overlap the character */
  margin-top: -100px;
}


/* --- 5. FOOTER --- */
.main-footer {
    /* KEY CHANGE 1: Remove background and set minimal vertical padding on the full-width wrapper */
    padding: 20px 0 0; 
    font-size: 0.9em;
    background-color: transparent; /* Ensure the wrapper is transparent */
}

.main-footer .container {
    /* KEY CHANGE 2: Override global container max-width to make it compact */
    max-width: 800px; 
    margin: 0 auto; /* Ensure it remains centered */
    
    /* KEY CHANGE 3: Apply styling to the compact container */
    background: linear-gradient(0deg, var(--color-gradient-start) 5%, var(--color-gradient-end) 46%);
    border-radius: 20px 20px 0 0;
    
    /* Adjust padding to create space inside the compact box */
    padding: 20px 40px; 
    
    /* Keep content alignment */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.social-links a {
  color: var(--font-color-light);
  margin-left: 15px;
  font-size: 1.2em;
  transition: color 0.3s;
}
.social-links a:hover {
  color: var(--color-red-primary);
}


/* --- MOBILE RESPONSIVENESS (BREAKPOINT: 768px) --- */
@media (max-width: 768px) {
  .container {
    padding: 0 15px;
  }
 
  /* GAME LOGO MAX WIDTH (MOBILE) */
  /* Modify existing .main-logo inside the media query */
    .main-logo {
        /* Keep existing logo responsiveness */
        width: 70vw; 
        max-width: none; 
    }
    
    /* NEW: Scale the eye down on mobile to match the smaller logo */
    .logo-eye-animation {
        width: 70px;
        height: 70px;
        margin-right: 10px;
    }
    
    /* Ensure the wrapper remains centered */
    .logo-visuals {
        margin-bottom: 5px;
    }
 
  /* 1. HEADER / LOGO SECTION - Mobile Adjustments */
  .hero-section {
    min-height: 70vh;
    padding-bottom: 0;
  }
 
  .more-button {
    bottom: calc(0px - (var(--color-more-button-height) / 2));
  }
 
 
  .nav-links {
    position: fixed;
    top: 0;
    /* Mobile menu size adjustment */
    right: -30%;
    width: 30%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    display: flex;
    flex-direction: column;
    padding-top: 80px;
    transition: right 0.3s ease-in-out;
  }
  .nav-links.active {
    right: 0;
  }
  .nav-links a {
    margin: 15px 0;
    padding: 10px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
 
  .hamburger-menu {
    display: block;
    font-size: 1.5em;
    background: none;
    border: none;
    color: var(--font-color-light);
    cursor: pointer;
    padding: 0;
    z-index: 30;
  }

  /* 2. GAME THUMBNAILS SECTION - MOBILE OVERLAP & STACKING */
  .game-showcase {
    background-color: transparent;
    margin-top: 0;
    padding-top: 0;
  }
 
  .game-grid {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }
  .game-card {
    max-width: 90%;
     margin-top: 60px;
  }
 
  /* Overlap the first card only (SAFER VALUE) */
  .game-card:first-child {
    margin-top: -100px;
  }
 
  /* 3. BENEFITS SECTION - Stacking */
  .benefits-section {
    padding-top: 30px;
    padding-bottom: 80px;
  }
 
  .benefits-layout {
    flex-direction: column;
    gap: 30px;
  }

  .benefits-title {
    position: static;
    transform: none;
    text-align: center;
    margin: 0 auto 0px;
  }
  .benefits-image-header {
    order: 1;
    margin-top: -100px;
  }
 
  .benefits-content-box {
    order: 2;
    max-width: 90%;
    margin: 0 auto;
    padding: 20px;
  }

  .benefits-list li {
    max-width: 90%;
    margin: 0 auto 15px;
  }
 
  /* 4. CTA SECTION: Stacking for Mobile */
  .cta-layout {
    flex-direction: column;
    align-items: center;
  }
 
  .cta-content {
    order: 2;
    text-align: center;
    padding-bottom: 0;
  }
 
  .cta-image-container {
    order: 1;
    flex: none;
    max-width: 90%;
    text-align: center;
  }
 
  .cta-character-art {
    /* Remove the overlap margin on mobile */
    margin-top: -50px;
    max-width: 70vw;
  }
  
  /* Footer Mobile Adjustment: Ensure it expands to full mobile width */
    .main-footer .container {
        max-width: 100%; /* Expands to fit screen on mobile */
        border-radius: 20px 20px 0 0; /* Adjust corner size for mobile */
        padding: 20px 15px;
    }
}