/* ============================================================
   🎨 COSMIC PASTA GAMES — THEME COLORS
   ------------------------------------------------------------
   🔧 CHANGE COLORS HERE WHEN YOU WANT A NEW WEBSITE THEME.

   Main palette:
   --color-bg       : deepest background
   --color-surface  : cards / panels
   --color-surface2 : secondary panels
   --color-primary  : main blue
   --color-primary2 : lighter blue
   --color-light    : light blue highlight
   --color-text     : main text
   --color-muted    : secondary text
   --color-line     : borders / dividers
   --color-shadow   : shadows
   --color-overlay  : transparent overlays
   --color-success  : success/status color
   --color-danger   : error/status color

   Change ONLY these values to retheme the site.
   ============================================================ */
:root {
  --color-bg: #071A2B;
  --color-bg-deep: #04111D;
  --color-surface: #0A2238;
  --color-surface-2: #0D2D4A;

  --color-primary: #2196F3;
  --color-primary-dark: #0D47A1;
  --color-primary-light: #90CAF9;
  --color-highlight: #E3F2FD;

  --color-text: #F4FAFF;
  --color-text-soft: #D6E8F7;
  --color-muted: #8FAFC8;

  --color-line: rgba(144, 202, 249, 0.18);
  --color-line-strong: rgba(144, 202, 249, 0.34);

  --color-shadow: rgba(4, 71, 161, 0.34);
  --color-shadow-strong: rgba(33, 150, 243, 0.28);

  --color-overlay: rgba(4, 17, 29, 0.72);
  --color-overlay-heavy: rgba(4, 17, 29, 0.92);

  --color-success: #90CAF9;
  --color-danger: #FF8A80;

  /* Backward-compatible aliases used by some components. */
  --bg: var(--color-bg);
  --surface: var(--color-surface);
  --surface-2: var(--color-surface-2);
  --text: var(--color-text);
  --muted: var(--color-muted);
  --line: var(--color-line);
  --accent: var(--color-primary-light);
  --accent-2: var(--color-primary);
}

*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.page-shell{width:min(1240px,calc(100% - 64px));margin-inline:auto}a{text-decoration:none;color:inherit}.site-header{position:fixed;z-index:50;top:0;left:0;right:0;height:82px;padding:0 32px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to bottom,rgba(7,10,16,.82),transparent);transition:.3s}.site-header.scrolled{background:rgba(7,10,16,.9);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}.brand{display:flex;align-items:center;gap:10px}.brand-mark{font-weight:900;letter-spacing:-.08em;font-size:23px}.brand-name{font-size:9px;letter-spacing:.18em;color:var(--color-muted)}.desktop-nav{display:flex;gap:28px}.nav-link{font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:var(--color-muted);transition:.2s}.nav-link:hover,.nav-link.active{color:var(--color-text)}.menu-toggle{display:none;background:none;border:0;width:42px;height:42px;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer}.menu-toggle span{display:block;width:21px;height:1px;background:#fff}.mobile-menu{position:fixed;z-index:45;inset:82px 0 auto 0;padding:25px 32px 35px;background:rgba(7,10,16,.96);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.1);display:none}.mobile-menu.open{display:flex;flex-direction:column;gap:22px}.mobile-menu a{font-size:12px;letter-spacing:.16em;text-transform:uppercase}.button{display:inline-flex;align-items:center;justify-content:center;gap:13px;min-height:48px;padding:0 22px;border:1px solid var(--color-line-strong);font-size:10px;text-transform:uppercase;letter-spacing:.15em;font-weight:700}.button-primary{background:var(--color-highlight);color:var(--color-primary-dark);border-color:var(--color-highlight);box-shadow:0 12px 35px var(--color-shadow)}.button-primary:hover{background:var(--color-primary);border-color:var(--color-primary);box-shadow:0 12px 35px var(--color-shadow-strong)}.button-ghost{color:var(--color-text)}.button-ghost:hover{border-color:var(--color-primary);color:var(--color-primary-light);box-shadow:0 0 24px var(--color-shadow-strong)}@media(max-width:900px){.page-shell{width:min(100% - 40px,1240px)}}

/* ============================================================
   🌊 SCROLL BACKGROUND ANIMATION
   ------------------------------------------------------------
   🔧 CHANGE THESE VALUES to control the atmosphere movement.
   --scroll-bg-strength : vertical movement multiplier
   --scroll-bg-blur     : glow softness
   --scroll-bg-opacity  : overall background intensity
   ============================================================ */
:root {
  --scroll-bg-strength: 0.12;
  --scroll-bg-blur: 70px;
  --scroll-bg-opacity: 0.72;
  --scroll-glow-size: 42vw;
}

body {
  --scroll-y: 0px;
  --scroll-progress: 0;
  --scroll-direction: 1;
  position: relative;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% -10%, var(--color-surface-2), transparent 38%),
    var(--color-bg);
}

/* Three depth layers are created with pseudo-elements so no HTML
   structure has to change. The JavaScript only updates scroll values. */
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -2;
  pointer-events: none;
  width: var(--scroll-glow-size);
  height: var(--scroll-glow-size);
  border-radius: 50%;
  opacity: var(--scroll-bg-opacity);
  filter: blur(var(--scroll-bg-blur));
  transform: translate3d(0, calc(var(--scroll-y) * var(--scroll-bg-strength)), 0);
  will-change: transform;
}

body::before {
  top: -18vw;
  left: -12vw;
  background: radial-gradient(circle, rgba(33,150,243,.20) 0%, rgba(33,150,243,.07) 38%, transparent 70%);
  animation: scrollGlowA 16s ease-in-out infinite alternate;
}

body::after {
  right: -14vw;
  bottom: -22vw;
  background: radial-gradient(circle, rgba(144,202,249,.17) 0%, rgba(13,71,161,.08) 42%, transparent 72%);
  transform: translate3d(0, calc(var(--scroll-y) * -0.08), 0);
  animation: scrollGlowB 20s ease-in-out infinite alternate;
}

/* A moving light band follows the user's scroll position. */
body > main::before {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  inset: -30vh -20vw;
  opacity: calc(.08 + (var(--scroll-progress) * .10));
  background:
    linear-gradient(
      115deg,
      transparent 30%,
      rgba(144,202,249,.10) 44%,
      rgba(33,150,243,.12) 50%,
      transparent 66%
    );
  transform: translate3d(calc(var(--scroll-progress) * 10vw), calc(var(--scroll-y) * -0.035), 0) rotate(-7deg);
  transition: opacity .25s ease;
  will-change: transform;
}

/* Home-page canvas gets its own depth movement while scrolling. */
.home-page #backgroundCanvas {
  transform: translate3d(0, calc(var(--scroll-y) * -0.055), 0) scale(1.035);
  transform-origin: center center;
  will-change: transform;
}

.home-page .hero-grid {
  transform: translate3d(0, calc(var(--scroll-y) * -0.025), 0);
  will-change: transform;
}

.home-page .hero-noise {
  transform: translate3d(0, calc(var(--scroll-y) * -0.015), 0);
  will-change: transform;
}

@keyframes scrollGlowA {
  from { transform: translate3d(0, calc(var(--scroll-y) * var(--scroll-bg-strength)), 0) scale(1); }
  to   { transform: translate3d(4vw, calc(var(--scroll-y) * var(--scroll-bg-strength) + 3vh), 0) scale(1.08); }
}

@keyframes scrollGlowB {
  from { transform: translate3d(0, calc(var(--scroll-y) * -0.08), 0) scale(1); }
  to   { transform: translate3d(-4vw, calc(var(--scroll-y) * -0.08 - 4vh), 0) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  body > main::before,
  .home-page #backgroundCanvas,
  .home-page .hero-grid,
  .home-page .hero-noise {
    animation: none !important;
    transform: none !important;
  }
}


/* 🔧 Iceland is used only for the studio brand text. */
.brand-copy,
.brand-copy strong,
.brand-copy small {
  font-family:"Iceland", sans-serif;
}


/* ============================================================
   🔧 COSMIC PASTA GAMES LOGO
   The supplied 512x512 transparent logo is used unchanged.
   ============================================================ */
.brand-symbol {
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  overflow:hidden;
  flex:0 0 36px;
}
.brand-symbol img {
  display:block;
  width:30px;
  height:30px;
  max-width:30px;
  max-height:30px;
  object-fit:contain;
  object-position:center;
  user-select:none;
  -webkit-user-drag:none;
}

/* 🔧 Brand text only — Google Font: Iceland */
.brand-copy,
.brand-copy strong,
.brand-copy small {
  font-family:"Iceland", sans-serif;
}

/* 🔧 Orbit-center logo: keep it small inside the 250px orbit. */
.orbit-core img {
  display:block;
  width:64px;
  height:64px;
  max-width:64px;
  max-height:64px;
  object-fit:contain;
  object-position:center;
  user-select:none;
  -webkit-user-drag:none;
}


/* ============================================================
   🔧 GLOBAL NAVIGATION LOCK — IDENTICAL ON EVERY PAGE
   ============================================================ */
.site-header,
.site-header.scrolled {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  z-index: 100 !important;
  width: 100% !important;
  height: 72px !important;
  min-height: 72px !important;
  padding: 0 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  box-sizing: border-box !important;
  background: rgba(3,11,19,.78) !important;
  border-bottom: 1px solid rgba(144,202,249,.10) !important;
  box-shadow: 0 10px 36px rgba(0,0,0,.16) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
.site-header .brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  flex: 0 0 auto !important;
  min-width: max-content !important;
}
.site-header .brand-symbol {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 1px solid var(--color-primary, #2196f3) !important;
  background: rgba(33,150,243,.08) !important;
}
.site-header .brand-symbol img {
  width: 30px !important;
  height: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;
  object-fit: contain !important;
  display: block !important;
}
.site-header .brand-copy,
.site-header .brand-copy strong,
.site-header .brand-copy small {
  font-family: "Iceland", sans-serif !important;
}
.site-header .brand-copy strong {
  color: var(--color-highlight, #e3f2fd) !important;
  font-size: 12px !important;
  line-height: .9 !important;
  font-weight: 400 !important;
  letter-spacing: .13em !important;
}
.site-header .brand-copy small {
  margin-top: 5px !important;
  color: var(--color-primary-light, #90caf9) !important;
  font-size: 8px !important;
  line-height: 1 !important;
  letter-spacing: .35em !important;
}
.site-header .desktop-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 26px !important;
  margin-left: auto !important;
  flex: 0 0 auto !important;
}
.site-header .desktop-nav .nav-link {
  position: relative !important;
  display: inline-block !important;
  padding: 8px 0 !important;
  margin: 0 !important;
  color: var(--color-muted, #7892a8) !important;
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  transition: color .22s ease !important;
}
.site-header .desktop-nav .nav-link::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 100% !important;
  bottom: -4px !important;
  width: auto !important;
  height: 1px !important;
  background: var(--color-primary-light, #90caf9) !important;
  transform: none !important;
  transform-origin: left !important;
  transition: right .22s ease !important;
}
.site-header .desktop-nav .nav-link:hover,
.site-header .desktop-nav .nav-link.active {
  color: var(--color-highlight, #e3f2fd) !important;
}
.site-header .desktop-nav .nav-link:hover::after,
.site-header .desktop-nav .nav-link.active::after {
  right: 0 !important;
}
.site-header .menu-toggle {
  display: none !important;
  width: 38px !important;
  height: 38px !important;
  padding: 9px !important;
  border: 1px solid var(--color-line, rgba(144,202,249,.18)) !important;
  background: rgba(10,34,56,.72) !important;
  color: var(--color-highlight, #e3f2fd) !important;
  cursor: pointer !important;
}
.site-header .menu-toggle span {
  display: block !important;
  width: 16px !important;
  height: 1px !important;
  margin: 5px auto !important;
  background: currentColor !important;
}

/* ============================================================
   🌊 MORE NOTICEABLE SCROLL ATMOSPHERE
   ============================================================ */
.scroll-light {
  position: fixed;
  z-index: -4;
  top: 12vh;
  left: 50%;
  width: min(58vw, 820px);
  height: min(58vw, 820px);
  border-radius: 50%;
  pointer-events: none;
  opacity: .34;
  filter: blur(70px);
  background: radial-gradient(circle, rgba(33,150,243,.24), rgba(144,202,249,.08) 34%, transparent 70%);
  transform: translate3d(-50%, calc(var(--scroll-y, 0px) * -.10), 0) scale(calc(1 + var(--scroll-progress, 0) * .14));
  will-change: transform;
  transition: opacity .3s ease;
}
body.scroll-active .scroll-light { opacity: .52; }

@media (max-width: 900px) {
  .site-header,
  .site-header.scrolled { padding: 0 18px !important; }
  .site-header .desktop-nav { display: none !important; }
  .site-header .menu-toggle { display: block !important; }
}
@media (min-width: 901px) {
  .mobile-menu { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-light { transform: translate3d(-50%,0,0) !important; transition: none !important; }
}

/* ============================================================
   MOBILE NAVIGATION — FINAL SHARED FIX
   ============================================================ */
.site-header .menu-toggle {
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 6px !important;
  color: var(--color-highlight, #E3F2FD) !important;
}
.site-header .menu-toggle span {
  display: block !important;
  width: 18px !important;
  height: 1px !important;
  min-height: 1px !important;
  margin: 0 !important;
  flex: 0 0 1px !important;
  background: var(--color-highlight, #E3F2FD) !important;
  opacity: 1 !important;
}
.mobile-menu {
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease;
}
.mobile-menu.open {
  display: grid !important;
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 900px) {
  .site-header .desktop-nav { display: none !important; }
  .site-header .menu-toggle { display: flex !important; }
}
@media (min-width: 901px) {
  .site-header .menu-toggle { display: none !important; }
  .mobile-menu { display: none !important; }
}