/* ============================================================
   🎨 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; }
.hero-coordinate { position:absolute;right:32px;bottom:30px;color:var(--color-muted);font-size:8px;font-weight:800;letter-spacing:.17em; }

.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)}
  .hero-coordinate{right:18px;bottom:18px;font-size:7px}
  .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}
}