:root {
  --red-rgb: 248 113 113;
  --blue-rgb: 56 189 248;
  --green-rgb: 74 222 128;
  --yellow-rgb: 253 224 71;
  --background-rgb: 0 0 0;
}

body {
  /* Allow scrolling on desktop */
  height: auto;
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: rgb(var(--background-rgb));
  overflow-x: hidden;
  /* overflow-y: scroll; Removed hidden */
  /* Perspective moved to #container-wrapper */
}

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

/*
  The container uses significantly more columns than rows so the text "CATALYST"
  can be rendered legibly across the grid. Increasing the number of columns
  improves horizontal resolution without drastically increasing the number of
  DOM elements (20 × 60 = 1200). This size was chosen to balance clarity
  against performance. You can tweak ROWS and COLS in the script below to
  adjust the density.
*/
/* Fixed Background Grid (Desktop & Mobile) */
#container-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 1;
  pointer-events: auto;
  perspective: 2000px;
}

#container {
  width: 120vw;
  height: 150vh;
  display: grid;
  grid-template-rows: repeat(30, 1fr);
  grid-template-columns: repeat(80, 1fr);
  position: absolute;
  top: -25%;
  left: -10%;
  transform: rotateX(50deg) rotateY(-5deg) rotateZ(20deg) scale(1.0);
}

#container::after,
#container::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#container::before {
  z-index: 2;
  background-image: url("https://assets.codepen.io/1468070/plus-pattern-center.png");
  background-size: 3%;
  background-repeat: repeat;
  opacity: 0.15;
}

#container::after {
  z-index: 3;
  background: 
    linear-gradient(to right, rgb(var(--background-rgb)) 0%, rgb(var(--background-rgb)) 15%, transparent 30%, transparent 70%, rgb(var(--background-rgb)) 85%, rgb(var(--background-rgb)) 100%),
    radial-gradient(circle, transparent 40%, rgb(var(--background-rgb)) 90%);
}

/* -- Blueprint Header -- */
.blueprint-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 2rem 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 20;
  pointer-events: auto;
}

.blueprint-header nav {
  display: flex;
  gap: 2rem;
}

.blueprint-header nav a {
  font-family: 'Space Mono', monospace;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s, text-shadow 0.3s;
}

.blueprint-header nav a:hover {
  color: #fff;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.blueprint-header .brand h1 {
  font-family: 'Space Mono', monospace;
  color: white;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 0.5rem;
}

/* -- Hero Actions -- */
.hero-actions {
  position: absolute;
  top: 75%; /* Lowered from 60% */
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  display: flex;
  gap: 1.5rem;
  pointer-events: auto;
}

.hero-actions a {
  text-decoration: none;
}

.hero-actions .btn-primary,
.hero-actions .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Mono', monospace;
  font-size: 1rem;
  padding: 1rem 2rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.btn-primary {
  background: white;
  color: black;
  border: 1px solid white;
  font-weight: 700;
}

.btn-primary:hover {
  background: black;
  color: white;
  border-color: white;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

.btn-primary:active {
  transform: translateY(0) scale(0.98);
}

.btn-secondary {
  background: transparent;
  color: white;
  border: 1px solid white;
  font-weight: 400;
}

.btn-secondary:hover {
  background: white;
  color: black;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.btn-secondary:active {
  transform: translateY(0) scale(0.98);
}

.btn-secondary i {
  margin-left: 0.5rem;
  font-size: 0.8em;
}

.sponsor-contact-link {
  padding: 0.8rem 1.5rem;
  text-decoration: none;
  display: inline-block;
}

/* -- Floating Text -- */
.floating-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  color: rgba(255, 255, 255, 0.8);
  font-family: 'Space Mono', monospace;
  font-size: 0.8rem;
  pointer-events: none;
}

.floating-text.left {
  left: 8%;
  text-align: left;
}

.floating-text.right {
  right: 8%;
  text-align: right;
  top: 50%; /* Revert to center (50%) */
}

.floating-text h3 {
  color: white;
  margin-bottom: 1rem;
  font-family: 'Space Mono', monospace;
  font-size: 0.85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 1;
}

.floating-text p {
  display: block;
  line-height: 2;
  font-family: 'Space Mono', monospace;
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
}

.floating-text .label {
  color: rgb(var(--blue-rgb));
  font-weight: 700;
  margin-right: 0.5rem;
}

.tile {
  border: 1px solid rgb(255 255 255 / 25%);
  transition: background-color 1500ms;
}

.tile:hover {
  transition-duration: 0ms;
}

/*
  On hover, tiles cycle through the four theme colours. This behaviour
  remains unchanged from the original example, providing a subtle
  interactive effect over the static catalyst lettering.
*/
.tile:nth-child(4n):hover {
  background-color: rgb(var(--red-rgb));
}
.tile:nth-child(4n + 1):hover {
  background-color: rgb(var(--blue-rgb));
}
.tile:nth-child(4n + 2):hover {
  background-color: rgb(var(--green-rgb));
}
.tile:nth-child(4n + 3):hover {
  background-color: rgb(var(--yellow-rgb));
}
.tile:nth-child(7n):hover {
  background-color: rgb(var(--blue-rgb));
}
.tile:nth-child(7n + 3):hover {
  background-color: rgb(var(--green-rgb));
}
.tile:nth-child(7n + 5):hover {
  background-color: rgb(var(--yellow-rgb));
}
.tile:nth-child(7n + 6):hover {
  background-color: rgb(var(--red-rgb));
}
.tile:nth-child(11n + 1):hover {
  background-color: rgb(var(--red-rgb));
}
.tile:nth-child(11n + 4):hover {
  background-color: rgb(var(--blue-rgb));
}
.tile:nth-child(11n + 7):hover {
  background-color: rgb(var(--green-rgb));
}
.tile:nth-child(11n + 10):hover {
  background-color: rgb(var(--yellow-rgb));
}

/*
  Highlighted tiles for the "CATALYST" lettering. The colour and subtle
  shadow differentiate the active cells from the rest of the grid. You can
  adjust the colour to taste. A semi‑transparent white was chosen to
  contrast against the dark background while still allowing the border
  lines to peek through.
*/
.tile.active {
  background-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* -- Links -- */
#links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 100;
  padding: 1rem;
}
.meta-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.meta-link > :is(span, a) {
  font-family: "Rubik", sans-serif;
  font-size: 1.25rem;
  color: white;
}
.meta-link > .label {
  text-align: right;
}
.meta-link > a {
  text-decoration: none;
  outline: none;
}
.meta-link > a.source {
  color: rgb(94, 106, 210);
}
.meta-link > a:is(:hover, :focus) > i {
  color: white;
}
.meta-link > a.youtube {
  color: rgb(239, 83, 80);
}
.meta-link > a.youtube > i {
  padding-top: 0.2rem;
}
.meta-link > a > i {
  height: 1rem;
  line-height: 1rem;
}

/* -- New Sections -- */
.content-wrapper {
  position: relative;
  width: 100%;
  z-index: 30;
  pointer-events: none; /* Let clicks pass through to grid where possible */
}

/* Intro Grid (Desktop) */
.intro-grid {
  /* The "Hero" section must be at least full viewport height */
  min-height: 100vh;
  position: relative;
  width: 100%;
  pointer-events: none; /* Let clicks pass through empty areas to the grid */
}

/* Re-enable pointer events for interactive elements inside the hero */
.intro-grid .floating-text,
.intro-grid .hero-actions {
  pointer-events: auto;
}

.info-section:not(.intro-grid) {
  pointer-events: auto;
  padding: 4rem 2rem;
  /* Add a subtle background to ensure readability over the fixed grid as we scroll down */
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 20%, rgba(0,0,0,1) 100%);
  margin-bottom: 0; /* Reset margin */
}

/* Specific styling for sections to ensure they have backgrounds */
#prizes, #tracks, #schedule, #sponsors, #team, #faq {
  background-color: black;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.section-header {
  text-align: center;
  margin-bottom: 3rem;
  padding-top: 4rem;
}

.section-header h2 {
  font-family: 'Space Mono', monospace;
  color: white;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: inline-block;
  border-bottom: 2px solid rgb(var(--blue-rgb));
  padding-bottom: 0.5rem;
}

/* Track Grid */
.track-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.track-card {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2rem;
  transition: transform 0.3s, border-color 0.3s;
}

.track-card:hover {
  transform: translateY(-5px);
  border-color: rgb(var(--blue-rgb));
}

.track-card h3 {
  font-family: 'Space Mono', monospace;
  color: rgb(var(--green-rgb));
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.track-card p {
  font-family: 'Space Mono', monospace;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.track-card .tags {
  font-family: 'Space Mono', monospace;
  color: rgb(var(--blue-rgb));
  font-size: 0.8rem;
  opacity: 0.8;
}

/* Schedule List */
.schedule-list {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.day-block h3 {
  font-family: 'Space Mono', monospace;
  color: rgb(var(--yellow-rgb));
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 0.5rem;
}

.schedule-item {
  display: flex;
  gap: 2rem;
  margin-bottom: 1rem;
  font-family: 'Space Mono', monospace;
  color: rgba(255, 255, 255, 0.9);
  padding: 0.5rem 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}

.schedule-item .time {
  min-width: 80px;
  color: rgb(var(--blue-rgb));
  font-weight: 700;
}

.schedule-item .event.highlight {
  color: rgb(var(--red-rgb));
  font-weight: 700;
}

/* FAQ Grid */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 2rem 4rem 2rem;
}

.faq-item h4 {
  font-family: 'Space Mono', monospace;
  color: white;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.faq-item p {
  font-family: 'Space Mono', monospace;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* -- Prizes Grid -- */
.prizes-grid {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}

.prize-card {
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 2rem;
  width: 280px;
  text-align: center;
  transition: transform 0.3s, border-color 0.3s;
}

.prize-card:hover {
  transform: translateY(-5px);
}

.prize-card.gold { border-color: #FFD700; box-shadow: 0 0 15px rgba(255, 215, 0, 0.2); }
.prize-card.silver { border-color: #C0C0C0; box-shadow: 0 0 15px rgba(192, 192, 192, 0.2); }
.prize-card.bronze { border-color: #CD7F32; box-shadow: 0 0 15px rgba(205, 127, 50, 0.2); }
.prize-card.track { border-color: rgb(var(--blue-rgb)); }

.prize-card .rank {
  font-family: 'Space Mono', monospace;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: white;
}

.prize-card .amount {
  font-family: 'Space Mono', monospace;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: white;
}

.prize-card .perks {
  font-family: 'Space Mono', monospace;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

/* -- Sponsors Grid -- */
.sponsors-grid {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  max-width: 1000px;
  margin: 0 auto 3rem auto;
  text-align: center;
}

.sponsor-tier h3 {
  font-family: 'Space Mono', monospace;
  color: rgb(var(--blue-rgb));
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: inline-block;
  padding-bottom: 0.5rem;
}

.sponsor-logo {
  font-family: 'Space Mono', monospace;
  color: white;
  font-size: 1.2rem;
  margin: 0.5rem 1rem;
  display: inline-block;
  opacity: 0.8;
  letter-spacing: 1px;
}

.sponsor-logo.placeholder {
  opacity: 0.5;
  font-style: italic;
}

.sponsor-cta {
  text-align: center;
  margin-top: 2rem;
}

.sponsor-cta p {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1rem;
  font-family: 'Space Mono', monospace;
}


/* -- Footer -- */
.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 3rem 2rem;
  background: black;
  text-align: center;
}

.footer-content p {
  font-family: 'Space Mono', monospace;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 1rem;
  font-size: 0.8rem;
}

.footer-content .socials {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.footer-content .socials a {
  font-family: 'Space Mono', monospace;
  color: white;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s;
}

.footer-content .socials a:hover {
  color: rgb(var(--blue-rgb));
}

/* -- Mobile Optimization -- */
@media (max-width: 768px) {
  body {
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    display: block;
  }

  /* Fixed Background Grid */
  #container-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1;
    pointer-events: none;
  }

  #container {
    position: absolute;
    width: 150vw;
    height: 50vh;
    top: 10vh; /* Moved down slightly */
    left: -25vw;
    transform: rotateX(40deg) rotateY(0deg) rotateZ(0deg) scale(0.65); /* Increased scale slightly */
    margin-bottom: 0;
  }
  
  #container::after {
    /* Adjust mask for mobile: Top/Bottom fade instead of Left/Right so grid is visible */
    background: 
      linear-gradient(to bottom, rgb(var(--background-rgb)) 0%, transparent 20%, transparent 80%, rgb(var(--background-rgb)) 100%),
      radial-gradient(circle, transparent 40%, rgb(var(--background-rgb)) 90%);
  }

  /* Header */
  .blueprint-header {
    position: sticky;
    top: 0;
    left: 0;
    padding: 0.9rem 1rem;
    flex-direction: column;
    gap: 0.8rem;
    align-items: center;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .blueprint-header .brand h1 {
    font-size: 1.05rem;
    border-bottom: none;
    text-align: center;
    white-space: normal;
    letter-spacing: 1px;
  }
  
  .blueprint-header nav {
    display: flex;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    flex-wrap: wrap;
  }
  
  .blueprint-header nav a {
    font-size: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
  }

  /* Content Overlay */
  .content-wrapper {
    position: relative;
    z-index: 10;
    width: 100%;
    overflow-x: hidden;
    padding-top: 0.5rem;
  }

  /* Mobile hero is stacked for readability */
  .intro-grid {
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.85rem;
    padding: 6.5rem 1rem 2rem;
  }

  .floating-text.left,
  .floating-text.right {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    width: 90%;
    max-width: 520px;
    margin: 0;
    background: rgba(0, 0, 0, 0.82);
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.45rem;
    text-align: left;
  }

  .hero-actions {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 90%;
    max-width: 520px;
    margin: 0;
    flex-direction: column;
    gap: 0.8rem;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-secondary {
    width: 100%;
    text-align: center;
  }

  /* Sections */
  .info-section:not(.intro-grid) {
    background: black;
    margin-bottom: 0;
    padding: 2.25rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .section-header {
    margin-bottom: 2rem;
    padding-top: 0;
  }

  .section-header h2 {
    font-size: 1.5rem;
  }

  .track-grid,
  .faq-grid,
  .schedule-list,
  .prizes-grid {
    padding: 0 1.5rem;
  }

  .track-grid,
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .prizes-grid {
    gap: 1rem;
  }

  .prize-card {
    width: 100%;
    max-width: 520px;
  }

  .day-block h3 {
    font-size: 1.15rem;
  }

  .schedule-item {
    flex-direction: column;
    gap: 0.3rem;
  }

  .sponsors-grid {
    gap: 2rem;
    margin-bottom: 2rem;
    padding: 0 1rem;
  }

  .footer-content .socials {
    flex-direction: column;
    gap: 0.8rem;
  }
}