/* ============================================================
   🎨 COSMIC PASTA GAMES — GAMES PAGE THEME
   🔧 CHANGE ALL FUTURE THEME COLORS IN THIS SECTION.
   ============================================================ */
: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,.18);
  --color-line-strong: rgba(144,202,249,.38);
  --color-shadow: rgba(4,71,161,.34);
  --color-shadow-strong: rgba(33,150,243,.30);
  --color-overlay: rgba(4,17,29,.72);
  --color-success: #90CAF9;
  --color-danger: #FF8A80;
  --game-image-overlay: rgba(4,17,29,.20);
  --game-image-overlay-hover: rgba(4,17,29,.04);
  --scroll-bg-strength: .13;
  --scroll-bg-blur: 75px;
  --scroll-bg-opacity: .72;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--color-bg-deep); }
body {
  margin: 0; min-width: 320px; overflow-x: hidden;
  background: radial-gradient(circle at 50% -10%, rgba(33,150,243,.13), transparent 38%), var(--color-bg);
  color: var(--color-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.page-shell { width: min(1240px, calc(100% - 64px)); margin-inline: auto; }

body::before, body::after {
  content: ""; position: fixed; z-index: -3; pointer-events: none;
  width: 44vw; height: 44vw; border-radius: 50%; filter: blur(var(--scroll-bg-blur));
  opacity: var(--scroll-bg-opacity); will-change: transform;
}
body::before {
  top: -18vw; left: -12vw;
  background: radial-gradient(circle, rgba(33,150,243,.24), rgba(33,150,243,.06) 38%, transparent 70%);
  transform: translate3d(0, calc(var(--scroll-y,0px) * var(--scroll-bg-strength)), 0);
}
body::after {
  right: -14vw; bottom: -22vw;
  background: radial-gradient(circle, rgba(144,202,249,.18), rgba(13,71,161,.08) 42%, transparent 72%);
  transform: translate3d(0, calc(var(--scroll-y,0px) * -.08), 0);
}

.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 32px; border-bottom: 1px solid transparent; transition: .35s ease;
}
.site-header.scrolled {
  padding-block: 14px; background: rgba(4,17,29,.76);
  border-bottom-color: var(--color-line); backdrop-filter: blur(18px);
  box-shadow: 0 14px 50px rgba(4,17,29,.25);
}
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-symbol {
  width:36px;height:36px;display:grid;place-items:center;
  border:1px solid var(--color-primary);background:rgba(33,150,243,.12);
  color:var(--color-highlight);font-size:12px;font-weight:900;
}
.brand-copy { display:grid; line-height:.9; }
.brand-copy strong { font-size:12px;letter-spacing:.13em; }
.brand-copy small { margin-top:5px;color:var(--color-primary-light);font-size:8px;letter-spacing:.35em; }
.desktop-nav { display:flex;gap:28px; }
.nav-link { position:relative;padding:8px 0;color:var(--color-muted);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase; }
.nav-link::after { content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--color-primary-light);transition:right .25s; }
.nav-link:hover,.nav-link.active { color:var(--color-highlight); }
.nav-link:hover::after,.nav-link.active::after { right:0; }
.menu-toggle { display:none;width:42px;height:42px;border:1px solid var(--color-line);background:rgba(10,34,56,.72);color:var(--color-text);cursor:pointer; }
.menu-toggle span { display:block;width:16px;height:1px;margin:5px auto;background:currentColor; }
.mobile-menu {
  position:fixed;inset:74px 16px auto;z-index:49;display:none;padding:14px;
  border:1px solid var(--color-line);background:rgba(4,17,29,.96);backdrop-filter:blur(20px);
}
.mobile-menu.open { display:grid; }
.mobile-menu a { padding:15px 12px;border-bottom:1px solid var(--color-line);color:var(--color-text-soft);font-size:12px;letter-spacing:.14em;text-transform:uppercase; }

.games-hero {
  min-height: 68svh; position:relative; display:flex;align-items:end;overflow:hidden;
  padding: 0 0 92px; border-bottom:1px solid var(--color-line);
  background:
    radial-gradient(circle at 72% 35%, rgba(33,150,243,.24), transparent 18%),
    radial-gradient(circle at 48% 60%, rgba(144,202,249,.10), transparent 25%),
    linear-gradient(145deg, var(--color-bg-deep), var(--color-surface));
}
.games-hero::before {
  content:"";position:absolute;inset:0;opacity:.20;
  background-image:linear-gradient(rgba(144,202,249,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(144,202,249,.09) 1px,transparent 1px);
  background-size:90px 90px; transform:translate3d(0,calc(var(--scroll-y,0px)*-.03),0);
}
.hero-noise {
  position:absolute;inset:0;opacity:.25;pointer-events:none;
  background:radial-gradient(circle at 78% 30%, transparent 0 8%, rgba(33,150,243,.15) 8.2%, transparent 8.6% 14%, rgba(144,202,249,.10) 14.2%, transparent 14.6%);
}
.eyebrow { margin:0 0 18px;color:var(--color-primary-light);font-size:10px;font-weight:800;letter-spacing:.2em; }
.games-hero h1 {
  position:relative;margin:0;font-size:clamp(5rem,12vw,12rem);line-height:.78;letter-spacing:-.08em;
}
.games-hero h1 span { color:transparent;-webkit-text-stroke:1px rgba(227,242,253,.72); }
.hero-copy { position:relative;max-width:430px;margin:34px 0 0;color:var(--color-text-soft);line-height:1.75;font-size:15px; }

.section { padding:110px 0; }
.archive { border-bottom:1px solid var(--color-line); }
.filter-bar {
  display:flex;align-items:center;justify-content:space-between;gap:30px;
  padding-bottom:24px;border-bottom:1px solid var(--color-line);
}
.filter-intro { display:flex;align-items:center;gap:12px;color:var(--color-muted);font-size:9px;font-weight:800;letter-spacing:.15em; }
.filter-count { color:var(--color-primary-light);font-size:22px;letter-spacing:-.04em; }
.filters { display:flex;flex-wrap:wrap;gap:8px; }
.filter {
  padding:9px 12px;border:1px solid var(--color-line);background:transparent;
  color:var(--color-muted);font-size:8px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  cursor:pointer;transition:.25s;
}
.filter:hover,.filter.active {
  border-color:var(--color-primary);background:rgba(33,150,243,.12);color:var(--color-highlight);
  box-shadow:0 8px 28px rgba(33,150,243,.10);
}

.games-grid {
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px;
}
.game-card {
  position:relative;min-width:0;border:1px solid var(--color-line);
  background:var(--color-surface);overflow:hidden;transition:transform .35s,border-color .35s,box-shadow .35s;
}
.game-card.featured { grid-column:1 / -1; }
.game-card:hover { transform:translateY(-7px);border-color:var(--color-line-strong);box-shadow:0 28px 70px var(--color-shadow); }
.game-art {
  position:relative; display:block; overflow:hidden; min-height:390px;
  background:var(--color-surface-2); border-bottom:1px solid var(--color-line);
  color:var(--color-highlight); isolation:isolate;
}
.game-card.featured .game-art { min-height:520px; }
.game-banner img, .game-poster img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center; display:block;
  transform:scale(1.001); transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .5s;
}
.image-overlay {
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(4,17,29,.14),transparent 36%,rgba(4,17,29,.82) 100%),
             linear-gradient(90deg,rgba(4,17,29,.25),transparent 48%);
  transition:background .45s ease;
}
.game-art::before {
  content:""; position:absolute; inset:-20%; z-index:2; pointer-events:none;
  background:radial-gradient(circle at var(--x,65%) var(--y,32%),rgba(227,242,253,.18),transparent 13%);
  mix-blend-mode:screen; opacity:.55; transition:opacity .3s;
}
.game-card:hover .game-art img { transform:scale(1.045); filter:saturate(1.08); }
.game-card:hover .image-overlay {
  background:linear-gradient(180deg,rgba(4,17,29,.05),transparent 38%,rgba(4,17,29,.72) 100%),
             linear-gradient(90deg,rgba(4,17,29,.12),transparent 48%);
}
.game-art > * { position:absolute; z-index:3; }
.game-art-label {
  top:20px; left:20px; padding:7px 9px;
  border:1px solid rgba(227,242,249,.35); background:rgba(4,17,29,.45);
  backdrop-filter:blur(10px); color:var(--color-highlight);
  font-size:8px; font-weight:900; letter-spacing:.15em; text-transform:uppercase;
}
.game-art-title {
  left:20px; right:20px; bottom:24px;
  font-size:clamp(2rem,5vw,5.6rem); line-height:.84;
  letter-spacing:-.065em; text-shadow:0 8px 35px rgba(4,17,29,.65);
}
.game-poster .game-art-title { font-size:clamp(1.8rem,3.5vw,3.3rem); }
.game-art-code {
  right:20px; bottom:24px; color:rgba(227,242,253,.7);
  font-size:8px; font-weight:800; letter-spacing:.13em;
}
.game-art.image-missing::after {
  content:"ADD GAME ART"; position:absolute; inset:0; z-index:4;
  display:grid; place-items:center; color:var(--color-primary-light);
  background:linear-gradient(135deg,var(--color-surface-2),var(--color-bg-deep));
  font-size:10px; font-weight:900; letter-spacing:.2em;
}
.game-info { padding:20px;border-top:1px solid var(--color-line); }
.game-topline { display:flex;align-items:center;justify-content:space-between;gap:20px; }
.game-name { margin:0;font-size:22px;letter-spacing:-.035em; }
.status { padding:6px 8px;border:1px solid var(--color-line-strong);color:var(--color-primary-light);font-size:7px;font-weight:900;letter-spacing:.13em;text-transform:uppercase; }
.game-description { max-width:650px;margin:12px 0 22px;color:var(--color-muted);font-size:12px;line-height:1.7; }
.game-meta { display:flex;flex-wrap:wrap;gap:7px; }
.game-meta span { padding:6px 8px;border:1px solid var(--color-line);color:var(--color-text-soft);font-size:7px;font-weight:800;letter-spacing:.12em;text-transform:uppercase; }
.game-link { display:inline-flex;gap:9px;margin-top:22px;color:var(--color-highlight);font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase; }
.game-link span { color:var(--color-primary-light);transition:.2s; }
.game-card:hover .game-link span { transform:translateX(4px); }
.empty-state { margin:50px 0;text-align:center;color:var(--color-muted);font-size:13px; }

.games-cta { padding:150px 0;background:linear-gradient(180deg,transparent,rgba(33,150,243,.08)); }
.cta-inner { text-align:center; }
.cta-inner h2 { margin:0 0 40px;font-size:clamp(4rem,9vw,9rem);line-height:.8;letter-spacing:-.075em; }
.cta-inner h2 span { color:transparent;-webkit-text-stroke:1px rgba(227,242,253,.7); }
.button { display:inline-flex;gap:12px;align-items:center;min-height:48px;padding:0 18px;border:1px solid var(--color-line-strong);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;transition:.25s; }
.button-primary { background:var(--color-primary);border-color:var(--color-primary);color:var(--color-highlight);box-shadow:0 14px 40px var(--color-shadow-strong); }
.button-primary:hover { background:var(--color-highlight);border-color:var(--color-highlight);color:var(--color-primary-dark);transform:translateY(-2px); }

.site-footer { background:var(--color-bg-deep); }
.footer-main { display:flex;justify-content:space-between;gap:60px;padding:90px 0; }
.footer-line { margin-top:20px;color:var(--color-muted);font-size:12px; }
.footer-columns { display:grid;grid-template-columns:repeat(3,150px);gap:30px; }
.footer-columns>div { display:grid;align-content:start;gap:10px; }
.footer-label { margin-bottom:8px;color:var(--color-primary-light);font-size:8px;font-weight:900;letter-spacing:.18em; }
.footer-columns a { color:var(--color-muted);font-size:11px;transition:color .2s; }
.footer-columns a:hover { color:var(--color-highlight); }
.footer-bottom { display:flex;justify-content:space-between;padding:18px 0 24px;border-top:1px solid var(--color-line);color:var(--color-muted);font-size:8px;font-weight:800;letter-spacing:.14em; }

.reveal { opacity:0;transform:translateY(22px);transition:opacity .75s ease,transform .75s ease; }
.reveal.visible { opacity:1;transform:none; }

@media(max-width:900px) {
  .desktop-nav{display:none}.menu-toggle{display:block}.page-shell{width:min(100% - 36px,720px)}
  .games-grid{grid-template-columns:1fr}.game-card.featured{grid-column:auto}
  .game-card.featured .game-art{min-height:420px}
  .filter-bar{display:block}.filters{margin-top:20px}
}
@media(max-width:620px) {
  .site-header{padding:16px 18px}.page-shell{width:calc(100% - 32px)}
  .games-hero{min-height:65svh;padding-bottom:70px}.games-hero h1{font-size:clamp(4.5rem,19vw,7rem)}
  .section{padding:80px 0}.game-art{min-height:360px}.game-card.featured .game-art{min-height:380px}
  .footer-main{display:block;padding:70px 0}.footer-columns{margin-top:50px;grid-template-columns:1fr 1fr}
  .footer-columns>div:last-child{grid-column:1/-1}.footer-bottom{display:block;line-height:2}
}
@media(prefers-reduced-motion:reduce) {
  html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.games-hero::before,.games-hero::after,.games-hero .hero-noise::after{animation:none}
}


/* ============================================================
   🔧 LATEST GAME HERO
   Theme colors remain controlled by the :root color section.
   ============================================================ */
.games-hero {
  position:relative; min-height:78svh; display:flex; align-items:flex-end;
  overflow:hidden; isolation:isolate; padding:0 0 86px;
  border-bottom:1px solid var(--color-line); background:var(--color-bg-deep);
}
.games-hero-image {
  position:absolute; inset:-2%; z-index:-3;
  background-color:var(--color-surface-2); background-position:center;
  background-size:cover; background-repeat:no-repeat;
  transform:translate3d(calc(var(--hero-x,0) * 10px), calc(var(--hero-y,0) * 7px), 0) scale(1.035);
  transition:transform .25s ease-out, filter .6s ease; filter:saturate(.92) contrast(1.04);
}
.games-hero-overlay {
  position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(90deg, rgba(4,17,29,.94) 0%, rgba(4,17,29,.72) 32%, rgba(4,17,29,.28) 68%, rgba(4,17,29,.58) 100%),
    linear-gradient(0deg, rgba(4,17,29,.98) 0%, rgba(4,17,29,.55) 35%, rgba(4,17,29,.10) 100%);
}
.games-hero .hero-noise {
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.13;
  background-image:
    linear-gradient(rgba(227,242,253,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(227,242,253,.08) 1px, transparent 1px);
  background-size:80px 80px;
  mask-image:linear-gradient(to bottom, black, transparent 85%);
}
/* 🔧 HERO BACKGROUND ANIMATION — all colors inherit from the theme section above. */
.games-hero::before {
  content:""; position:absolute; inset:-10%; z-index:-1; pointer-events:none; opacity:.36;
  background:
    radial-gradient(circle at 20% 30%, rgba(144,202,249,.16) 0 1px, transparent 2px),
    radial-gradient(circle at 62% 18%, rgba(227,242,253,.20) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 64%, rgba(33,150,243,.22) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 42% 72%, rgba(144,202,249,.16) 0 1px, transparent 2px);
  background-size: 230px 190px, 310px 260px, 370px 320px, 280px 230px;
  animation: heroParticles 18s linear infinite;
}
.games-hero::after {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(circle at 75% 38%, rgba(33,150,243,.24), transparent 25%),
    radial-gradient(circle at 25% 20%, rgba(144,202,249,.10), transparent 30%);
  mix-blend-mode:screen;
  animation: heroPulse 7s ease-in-out infinite alternate;
}
.games-hero .hero-noise::after {
  content:""; position:absolute; left:-10%; right:-10%; top:-20%; height:2px;
  background:linear-gradient(90deg, transparent, rgba(144,202,249,.55), transparent);
  box-shadow:0 0 22px rgba(33,150,243,.22);
  animation: heroScan 6s ease-in-out infinite;
}
@keyframes heroParticles {
  from { transform:translate3d(0,0,0) rotate(0deg); }
  to { transform:translate3d(-35px,55px,0) rotate(2deg); }
}
@keyframes heroPulse {
  from { opacity:.55; transform:scale(1); }
  to { opacity:1; transform:scale(1.04); }
}
@keyframes heroScan {
  0%,100% { transform:translateY(0); opacity:0; }
  15% { opacity:.55; }
  50% { transform:translateY(95svh); opacity:.18; }
  70% { opacity:0; }
}

.games-hero-content { position:relative; z-index:2; }
.latest-game-badge {
  display:flex; align-items:center; gap:10px; width:max-content; margin-bottom:22px;
  padding:8px 11px; border:1px solid rgba(227,242,253,.24);
  background:rgba(4,17,29,.46); backdrop-filter:blur(12px);
  color:var(--color-highlight); font-size:8px; font-weight:900; letter-spacing:.16em;
}
.latest-game-badge strong {
  padding-left:10px; border-left:1px solid rgba(227,242,253,.22);
  color:var(--color-primary-light); font-size:7px;
}
.latest-dot {
  width:6px; height:6px; border-radius:50%; background:var(--color-primary);
  box-shadow:0 0 18px var(--color-primary);
}
.latest-game-info {
  position:relative; max-width:600px; margin-top:28px; padding-left:18px;
  border-left:2px solid var(--color-primary);
}
.latest-game-label {
  margin:0 0 7px; color:var(--color-primary-light);
  font-size:8px; font-weight:900; letter-spacing:.18em;
}
.latest-game-info h2 {
  margin:0; font-size:clamp(1.6rem,3vw,3rem);
  line-height:.95; letter-spacing:-.045em;
}
.latest-game-info > p:not(.latest-game-label) {
  max-width:540px; margin:10px 0 0; color:var(--color-text-soft);
  font-size:12px; line-height:1.7;
}
.latest-game-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:15px; }
.latest-game-meta span {
  padding:6px 8px; border:1px solid rgba(227,242,253,.2);
  background:rgba(4,17,29,.35); color:var(--color-muted);
  font-size:7px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
}
/* 🔧 HERO ARCHIVE MARKER — single bottom-right coordinate, no overlap. */
.hero-coordinate {
  position:absolute; right:32px; bottom:30px; z-index:3;
  padding:8px 10px; border-left:1px solid var(--color-primary);
  background:rgba(4,17,29,.42); backdrop-filter:blur(8px);
  color:rgba(227,242,253,.70); font-size:8px; font-weight:800; letter-spacing:.17em;
}
@media(max-width:620px) {
  .games-hero { min-height:84svh; padding-bottom:65px; }
  .games-hero-overlay {
    background:
      linear-gradient(90deg, rgba(4,17,29,.91), rgba(4,17,29,.48)),
      linear-gradient(0deg, rgba(4,17,29,.99), rgba(4,17,29,.10));
  }
  .hero-coordinate { right:18px; bottom:18px; font-size:7px; }
}


/* ============================================================
   🔧 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 STANDARD — KEEP CONSISTENT ON ALL PAGES
   Change these values if you want to retheme the navigation.
   ============================================================ */
.site-header {
  height: 72px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}
.site-header .brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
}
.site-header .brand-symbol {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 36px;
}
.site-header .brand-symbol img {
  width: 30px;
  height: 30px;
  max-width: 30px;
  max-height: 30px;
  object-fit: contain;
  display: block;
}
.site-header .brand-copy {
  display: grid;
  line-height: .9;
  font-family: "Iceland", sans-serif;
}
.site-header .brand-copy strong {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .13em;
}
.site-header .brand-copy small {
  margin-top: 5px;
  font-size: 8px;
  letter-spacing: .35em;
}
.site-header .desktop-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 26px;
  margin-left: auto;
}
.site-header .desktop-nav .nav-link {
  position: relative;
  display: inline-block;
  padding: 8px 0;
  color: var(--color-muted, #7892a8);
  font-size: 9px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .25s ease;
}
.site-header .desktop-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -4px;
  height: 1px;
  background: var(--color-primary-light, #90caf9);
  transition: right .25s ease;
}
.site-header .desktop-nav .nav-link:hover,
.site-header .desktop-nav .nav-link.active {
  color: var(--color-highlight, #e3f2fd);
}
.site-header .desktop-nav .nav-link:hover::after,
.site-header .desktop-nav .nav-link.active::after {
  right: 0;
}
.site-header .menu-toggle {
  display: none;
  width: 38px;
  height: 38px;
  padding: 9px;
  border: 1px solid var(--color-line, rgba(144,202,249,.18));
  background: transparent;
  color: var(--color-text, #e3f2fd);
  cursor: pointer;
}
.site-header .menu-toggle span {
  display: block;
  width: 16px;
  height: 1px;
  margin: 5px auto;
  background: currentColor;
}
.mobile-menu {
  position: fixed;
  top: 72px;
  left: 16px;
  right: 16px;
  z-index: 90;
  display: none;
  padding: 14px;
  border: 1px solid var(--color-line, rgba(144,202,249,.18));
  background: rgba(4,17,29,.97);
  backdrop-filter: blur(20px);
}
.mobile-menu.open { display: grid; }
.mobile-menu a {
  padding: 15px 12px;
  border-bottom: 1px solid var(--color-line, rgba(144,202,249,.18));
  color: var(--color-text-soft, #b9cee0);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.mobile-menu a:last-child { border-bottom: 0; }
@media (max-width: 900px) {
  .site-header .desktop-nav { display: none; }
  .site-header .menu-toggle { display: block; }
}
@media (min-width: 901px) {
  .mobile-menu { display: none !important; }
}


/* ============================================================
   🔧 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; }
}

/* ============================================================
   🔧 ALL GAMES LINK
   ============================================================ */
.filter-bar{align-items:center;justify-content:space-between}
.all-games-button{display:inline-flex;align-items:center;gap:12px;padding:12px 15px;border:1px solid var(--color-line-strong,#8fc9f0);color:var(--color-text,#e3f2fd);font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;transition:.25s ease}
.all-games-button:hover{border-color:var(--color-primary,#2196f3);color:var(--color-primary-light,#90caf9);background:rgba(33,150,243,.08);transform:translateY(-2px)}
@media(max-width:700px){.filter-bar{align-items:flex-start;flex-direction:column}.all-games-button{width:100%;justify-content:space-between}}

/* ============================================================
   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; }
}

/* ============================================================
   GAME PAGE — REMOVE SIDE SPACE / HORIZONTAL OVERFLOW
   ============================================================ */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.game-hero,
.about-game,
.features,
.system-requirements,
.roadmap,
.game-gallery,
.download-section {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.game-hero-content {
    width: min(1240px, calc(100% - 40px));
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.container {
    width: min(1240px, calc(100% - 40px));
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

img,
video,
canvas {
    max-width: 100%;
}

@media (max-width: 768px) {

    .game-hero-content,
    .container {
        width: calc(100% - 32px);
        max-width: none;
    }

    .game-hero {
        width: 100%;
        overflow-x: hidden;
    }

}