/* ============================================================
   CORE
============================================================ */

:root {

  --background: #06111f;
  --background-light: #091827;

  --surface: #0b1a2b;
  --surface-light: #102438;

  --blue: #078fe0;
  --blue-bright: #16b9f2;

  --cyan: #24d5d0;
  --cyan-dark: #0d9fa9;

  --white: #f4f9fc;
  --text: #dce8ef;
  --muted: #8da4b6;
  --muted-dark: #5f778b;

  --border: rgba(117, 181, 214, 0.16);
  --border-bright: rgba(70, 205, 229, 0.35);

  --container: 1180px;

  --transition: 220ms ease;

}


/* ============================================================
   RESET
============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}


html {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}


body {
  margin: 0;
  padding: 0;

  background: var(--background);

  color: var(--text);

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-size: 16px;

  line-height: 1.6;

  overflow-x: hidden;
}


body.menu-open {
  overflow: hidden;
}


img {
  display: block;
  max-width: 100%;
}


a {
  color: inherit;
  text-decoration: none;
}


button,
input,
textarea,
select {
  font: inherit;
}


button {
  cursor: pointer;
}


h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}


h1,
h2,
h3,
h4 {
  line-height: 1.1;
}


::selection {
  background: var(--cyan);
  color: var(--background);
}



/* ============================================================
   CONTAINER
============================================================ */

.container {

  width: min(
    var(--container),
    calc(100% - 48px)
  );

  margin-left: auto;
  margin-right: auto;

}



/* ============================================================
   ACCESSIBILITY
============================================================ */

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}



/* ============================================================
   SCROLLBAR
============================================================ */

::-webkit-scrollbar {
  width: 9px;
}


::-webkit-scrollbar-track {
  background: var(--background);
}


::-webkit-scrollbar-thumb {
  background: #17354b;
  border-radius: 10px;
}


::-webkit-scrollbar-thumb:hover {
  background: #20526f;
}



/* ============================================================
   SECTIONS
============================================================ */

.section {
  padding-top: 140px;
  padding-bottom: 140px;
}



/* ============================================================
   BUTTONS
============================================================ */

.button {

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 12px;

  min-height: 52px;

  padding:
    0 22px;

  border-radius: 5px;

  font-size: .84rem;

  font-weight: 800;

  letter-spacing: .04em;

  transition:
    transform var(--transition),
    background var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);

}


.button:hover {
  transform: translateY(-3px);
}


.button-primary {

  color: #03111d;

  background:
    linear-gradient(
      105deg,
      var(--blue),
      var(--cyan)
    );

  box-shadow:
    0 12px 35px rgba(0, 164, 220, .18);

}


.button-primary:hover {

  box-shadow:
    0 17px 45px rgba(0, 190, 220, .3);

}


.button-outline {

  color: var(--white);

  border: 1px solid var(--border);

  background:
    rgba(255,255,255,.025);

}


.button-outline:hover {

  border-color: var(--border-bright);

  background:
    rgba(255,255,255,.05);

}



/* ============================================================
   REVEAL ANIMATION
============================================================ */

.reveal {

  opacity: 0;

  transform:
    translateY(25px);

  transition:
    opacity 700ms ease,
    transform 700ms ease;

}


.reveal.revealed {

  opacity: 1;

  transform:
    translateY(0);

}


.reveal-delay {
  transition-delay: 180ms;
}



/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

}

.link-container {
  display: flex;       /* Aligns the links side-by-side */
  gap: 15px;           /* Adds space between the two links */
  align-items: center; /* Aligns them vertically if they have different heights */
}

/* ============================================================
   NAVBAR
============================================================ */

.navbar {

  position: fixed;

  top: 0;
  left: 0;
  right: 0;

  z-index: 100;

  border-bottom:
    1px solid transparent;

  background:
    rgba(6, 17, 31, .45);

  backdrop-filter:
    blur(16px);

  transition:
    background 250ms ease,
    border-color 250ms ease;

}


.navbar.scrolled {

  background:
    rgba(6, 17, 31, .9);

  border-color:
    var(--border);

}


.nav-inner {

  min-height: 84px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

}


.brand {

  display: flex;

  align-items: center;

  gap: 12px;

}


.brand img {

  width: 49px;
  height: 49px;

  object-fit: contain;

}


.brand-text {

  display: flex;

  flex-direction: column;

  line-height: 1;

}


.brand-text strong {

  font-size: 1.02rem;

  font-weight: 950;

  letter-spacing: .13em;

}


.brand-text span {

  margin-top: 5px;

  color: var(--blue-bright);

  font-size: .49rem;

  font-weight: 800;

  letter-spacing: .27em;

}


.nav-links {

  display: flex;

  align-items: center;

  gap: 30px;

}


.nav-links > a {

  color: #b9cad6;

  font-size: .8rem;

  font-weight: 750;

  transition:
    color var(--transition);

}


.nav-links > a:hover {

  color: white;

}

/* Mobile Navigation Dropdown Styles */
@media (max-width: 700px) {
  .nav-links {
    position: fixed;
    top: 70px; /* Adjust this to match the exact height of your navbar */
    left: 0;
    width: 100%;
    height: calc(100vh - 70px);

    /* Using your brand colors */
    background-color: var(--surface);
    border-top: 1px solid var(--border-bright);

    /* Center layout for dropdown links */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;

    /* Animation handling using your transition timing */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-15px);
    transition: all var(--transition);
    z-index: 999;
  }

  /* Triggered when JavaScript adds the .open class */
  .nav-links.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Dropdown links styling */
  .nav-links a {
    color: var(--text);
    font-size: 1.5rem;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.05em;
    transition: color var(--transition);
  }

  /* Dropdown links hover/active state */
  .nav-links a:hover {
    color: var(--cyan);
  }

  /* Optional: Adjusting the "Explore Games" button inside the mobile menu */
  .nav-links .nav-button {
    background-color: var(--blue);
    color: var(--white);
    padding: 0.8rem 2rem;
    border-radius: 4px;
  }

  .nav-links .nav-button:hover {
    background-color: var(--blue-bright);
    color: var(--white);
  }
}


.nav-button {

  padding:
    11px 17px;

  border:
    1px solid var(--border);

  border-radius: 4px;

  background:
    rgba(255,255,255,.025);

}


.nav-button:hover {

  border-color:
    var(--border-bright);

}


.mobile-menu {

  display: none;

  border: 0;

  background: transparent;

  padding: 8px;

}


.mobile-menu span {

  display: block;

  width: 25px;
  height: 2px;

  margin: 5px 0;

  background: white;

  transition: transform 200ms ease;

}

/* ============================================================
   FOOTER
============================================================ */

.footer {

  padding:
    35px 0;

  background:
    #040c15;

}


.footer-inner {

  display: grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items: center;

  gap: 30px;

}


.footer-brand {

  display: flex;

  align-items: center;

  gap: 12px;

}


.footer-brand img {

  width: 43px;
  height: 43px;

  object-fit: contain;

}


.footer-brand div {

  display: flex;

  flex-direction: column;

}


.footer-brand strong {

  color: #dcebf2;

  font-size: .72rem;

  letter-spacing: .12em;

}


.footer-brand span {

  color: #526b7d;

  font-size: .62rem;

}


.footer-nav {

  display: flex;

  gap: 25px;

}


.footer-nav a {

  color: #718899;

  font-size: .7rem;

  font-weight: 750;

}


.footer-nav a:hover {

  color: white;

}


.copyright {

  margin: 0;

  color: #435a6b;

  font-size: .65rem;

  text-align: right;

}

/* ============================================================
   BACK TO TOP
============================================================ */

.back-to-top {

  position: fixed;

  right: 24px;
  bottom: 24px;

  z-index: 80;

  width: 44px;
  height: 44px;

  display: grid;

  place-items: center;

  border:
    1px solid var(--border);

  border-radius: 4px;

  background:
    rgba(7, 20, 33, .9);

  color: white;

  opacity: 0;

  pointer-events: none;

  transform:
    translateY(10px);

  transition:
    opacity 200ms ease,
    transform 200ms ease,
    border-color 200ms ease;

}


.back-to-top.visible {

  opacity: 1;

  pointer-events: auto;

  transform:
    translateY(0);

}


.back-to-top:hover {

  border-color:
    var(--border-bright);

  color: var(--cyan);

}

@media (max-width: 950px) {
  .footer-inner {

    grid-template-columns:
      1fr
      1fr;

  }


  .copyright {

    grid-column: 1 / -1;

    text-align: left;

  }
}

/* ============================================================
   SCREENSHOTS
============================================================ */

.screenshots-section {
  padding:
    140px 0;

  background:
    #06111d;
}


.screenshot-feature {
  position: relative;

  overflow: hidden;

  border:
    1px solid var(--border);

  border-radius: 22px;

  background:
    #081827;
}


.screenshot-main {
  position: relative;

  display: block;

  width: 100%;

  padding: 0;

  border: 0;

  background: transparent;

  overflow: hidden;
}


.screenshot-main img {
  display: block;

  width: 100%;

  aspect-ratio: 16 / 9;

  object-fit: cover;

  transition:
    transform 500ms ease,
    filter 500ms ease;
}


.screenshot-main::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      135deg,
      rgba(0,0,0,.12),
      transparent 55%,
      rgba(0,0,0,.28)
    );

  pointer-events: none;
}


.screenshot-main:hover img {
  transform:
    scale(1.025);

  filter:
    brightness(1.08);
}


.screenshot-expand {
  position: absolute;

  right: 25px;
  bottom: 22px;

  z-index: 3;

  width: 42px;
  height: 42px;

  display: grid;

  place-items: center;

  border:
    1px solid rgba(255,255,255,.2);

  border-radius: 4px;

  background:
    rgba(4,12,21,.65);

  backdrop-filter:
    blur(12px);

  color: white;

  font-size: 1.3rem;

  transition:
    background var(--transition),
    border-color var(--transition);
}


.screenshot-main:hover .screenshot-expand {
  border-color:
    var(--border-bright);

  background:
    rgba(5,22,34,.9);

  color: var(--cyan);
}


.screenshot-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 14px;

  margin-top: 14px;
}


.screenshot-thumb {
  position: relative;

  display: block;

  width: 100%;

  padding: 0;

  overflow: hidden;

  border:
    1px solid var(--border);

  border-radius: 14px;

  background:
    #081827;
}


.screenshot-thumb img {
  display: block;

  width: 100%;

  aspect-ratio: 16 / 9;

  object-fit: cover;

  transition:
    transform 450ms ease,
    filter 450ms ease;
}


.screenshot-thumb:hover {
  border-color:
    var(--border-bright);
}


.screenshot-thumb:hover img {
  transform:
    scale(1.04);

  filter:
    brightness(1.08);
}

/* ============================================================
   LIGHTBOX
============================================================ */

.lightbox {
  position: fixed;

  inset: 0;

  z-index: 300;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 30px;

  background:
    rgba(2,8,14,.94);

  backdrop-filter:
    blur(16px);

  opacity: 0;

  pointer-events: none;

  transition:
    opacity 220ms ease;
}


.lightbox.active {
  opacity: 1;

  pointer-events: auto;
}


.lightbox img {
  max-width: min(1200px, 94vw);
  max-height: 88vh;

  width: auto;
  height: auto;

  object-fit: contain;

  border:
    1px solid var(--border);

  box-shadow:
    0 35px 100px rgba(0,0,0,.5);
}


.lightbox-close {
  position: absolute;

  top: 24px;
  right: 24px;

  width: 45px;
  height: 45px;

  display: grid;

  place-items: center;

  border:
    1px solid var(--border);

  border-radius: 4px;

  background:
    rgba(255,255,255,.025);

  color: white;

  font-size: 1.6rem;

  line-height: 1;

  transition:
    border-color var(--transition),
    color var(--transition);
}


.lightbox-close:hover {
  border-color:
    var(--border-bright);

  color: var(--cyan);
}