/* ==========================================================================
   1. IMPORT LOCAL HARDCORE PIXEL FONT
   ========================================================================== */
@font-face {
  font-family: 'MyPixelFont';
  src: url('PixelifySans.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* ==========================================================================
   2. CORE GLOBALS & WRAPPER SETTINGS
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: #4a90e2;
  font-family: 'MyPixelFont', 'Courier New', Courier, monospace;
  overflow-y: scroll;
  overflow-x: hidden;
}

/* 
   FIXED CONTAINER ENGINE: 
   Switched to height: 100% and overflow: visible. 
   The page scrollbar now calculates its length dynamically based on the exact 
   height of your cards, protecting your scrolling boundaries perfectly.
*/
.parallax-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
}

/* --- UNIVERSAL BASE FOR ALL BACKGROUND LAYERS --- */
.parallax-layer, .animated-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100vw * (384 / 288));
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background-repeat: no-repeat;
  pointer-events: none;
  will-change: transform;
}

/* --- INDIVIDUAL LAYER STACKING --- */
.bg-sky {
  background-image: url('Background4.png');
  background-size: cover;
  z-index: 1;
}

.bg-mountains {
  background-image: url('Background3.png');
  background-size: 100% 100%;
  z-index: 2;
}

.bg-forest {
  background-image: url('Background2.png');
  background-size: 100% 100%;
  z-index: 3;
}

.animated-bg {
  z-index: 4;
  background-image: url('WaterfallVersionTest4.png');
  background-size: 500% 100%;
  background-position: 0% 0%;
  animation: playPercentageSprite 0.8s steps(5) infinite;
}

@keyframes playPercentageSprite {
  from { background-position-x: 0%; }
  to { background-position-x: 125%; }
}

/* ==========================================================================
   3. FIXED SOLID SCROLLER TRACK (Locks spacing relations permanently)
   ========================================================================== */
.content-scroller {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  /* FIXED COMPONENT GAP ENGINE: 
     Forces a permanent, non-negotiable 60px pixel gap between your title and every single box.
     They can never crash or shift closer together now. */
  gap: 60px; 
  
  padding-top: 50px;     /* Initial breathing space from the top of the browser screen */
  padding-bottom: 100px; /* Safe padding cushioning at the absolute bottom of the page */
  z-index: 9999;
}

/* ==========================================================================
   4. PERFECT CRISP PIXEL ART TITLE OVERLAY
   ========================================================================== */
.title {
  color: #ffffff;
  text-align: center;
  width: 90%;
  font-family: 'MyPixelFont', monospace;
  font-size: 6rem; 
  letter-spacing: 2px;
  
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: none;
  font-smooth: never;
  text-rendering: optimizeSpeed;

  text-shadow: 
    4px 4px 0px #000000, 
    -4px 4px 0px #000000, 
    4px -4px 0px #000000, 
    -4px 4px 0px #000000;
}

/* ==========================================================================
   5. PERMANENT 9-TILED MENU OVERLAYS
   ========================================================================== */
.menu-box {
  /* FIXED STRIP: Position absolute and top percentages have been deleted. 
     The layout engine now controls card order via natural HTML document tree order. */
  width: 90%;
  max-width: 420px;
  min-height: 140px; 
  padding: 32px;
  background-color: #111111;
  
  border: 8px solid transparent; 
  border-image-source: url('Page9Tile.png');
  border-image-slice: 8 fill;
  border-image-repeat: repeat;
  
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  pointer-events: auto; 
}

.links-box { 
  min-height: 280px; 
} 

/* --- MENU INTERIOR INTERFACE STYLING --- */
.menu-header {
  font-family: 'MyPixelFont', monospace;
  color: #ffffff;
  font-size: 2.5rem; 
  margin-bottom: 8px;
  text-shadow: 2px 2px 0px #000000;
  letter-spacing: 1px;
  text-align: center;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: none;
  font-smooth: never;
  text-rendering: optimizeSpeed;
}

.about-text {
  font-family: 'MyPixelFont', monospace;
  color: #ffffff;
  font-size: 1.4rem;
  line-height: 1.5; 
  text-align: center;
  text-shadow: 1px 1px 0px #000000;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: none;
  font-smooth: never;
  text-rendering: optimizeSpeed;
}

.menu-link-wrapper {
  width: 100%;
  text-decoration: none;
}

.menu-btn {
  font-family: 'MyPixelFont', monospace;
  background-color: #b30000;
  color: #ffffff;
  border: 4px solid #ffd700;
  padding: 12px 24px; 
  font-size: 1.4rem;  
  width: 100%;
  cursor: pointer;
  image-rendering: pixelated;
  text-shadow: 2px 2px 0px #000000;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: none;
  font-smooth: never;
  text-rendering: optimizeSpeed;
}

.menu-btn:hover {
  background-color: #ffd700;
  color: #b30000;
  text-shadow: none;
}

/* ==========================================================================
   6. RESPONSIVE MOBILE VIEWPORT CONFIGURATION
   ========================================================================== */
@media (max-width: 768px) {
  .parallax-layer, .animated-bg {
    width: auto;
    height: 150dvh;
    width: calc(150dvh * (288 / 384));
    left: 30%;
    transform: translate3d(-40%, 0, 0); 
  }
  
  .animated-bg {
    background-size: 500% 100%;
  }
  
  /* Narrows vertical spacing track gaps tightly for short mobile dimensions */
  .content-scroller {
    gap: 40px;
    padding-top: 30px;
  }

  .title {
    font-size: 3.5rem;
  }

  .menu-box {
    max-width: 280px;
    gap: 10px;
    padding: 16px;
  }
  
  .menu-header {
    font-size: 1.8rem;
  }

  .about-text {
    font-size: 1.15rem;
    line-height: 1.4;
  }

  .menu-btn {
    font-size: 1.2rem;
    padding: 8px 16px;
  }
}