/* ============================================================
   🎨 COSMIC PASTA GAMES — GALLERY THEME COLORS
   🔧 CHANGE COLORS HERE TO RETHEME THIS PAGE.
   Includes borders, shadows, hover states and overlays.
   ============================================================ */
: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,.28);
  --color-overlay: rgba(4,17,29,.72);
  --color-overlay-heavy: rgba(4,17,29,.94);
  --color-success: #90CAF9;
  --color-danger: #FF8A80;

  /* 🔧 Gallery-specific colors */
  --gallery-card-bg: #081D30;
  --gallery-image-overlay: rgba(4,17,29,.18);
  --gallery-image-overlay-hover: rgba(4,17,29,.04);
  --gallery-lightbox-bg: rgba(4,17,29,.96);

  /* 🔧 Scroll atmosphere */
  --scroll-bg-strength: .12;
  --scroll-bg-blur: 70px;
  --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:var(--color-bg);
  color:var(--color-text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.page-shell { width:min(1240px,calc(100% - 64px)); margin-inline:auto; }

/* HEADER */
.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,.78); 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-mark { 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:10px; font-weight:900; }
.brand-name { font-size:11px; font-weight:900; letter-spacing:.13em; }
.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; }

/* PAGE HERO */
.page-main { padding-top:150px; padding-bottom:120px; }
.page-hero { padding-bottom:70px; border-bottom:1px solid var(--color-line); }
.eyebrow { margin:0 0 14px; color:var(--color-primary-light); font-size:10px; font-weight:800; letter-spacing:.22em; }
.page-hero h1 { margin:15px 0 0; font-size:clamp(4rem,10vw,9rem); line-height:.84; letter-spacing:-.065em; }
.page-hero p { max-width:620px; margin-top:30px; color:var(--color-muted); line-height:1.75; font-size:16px; }

/* GAME SELECTOR */
.game-selector-section { padding:90px 0 70px; }
.section-heading { display:flex; justify-content:space-between; gap:40px; align-items:end; margin-bottom:25px; }
.section-heading h2 { margin:0; font-size:clamp(2.8rem,6vw,6rem); line-height:.82; letter-spacing:-.065em; }
.project-count { color:var(--color-muted); font-size:9px; font-weight:900; letter-spacing:.16em; }
.game-selector { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.game-select { position:relative; min-height:86px; display:grid; grid-template-columns:45px 1fr 30px; gap:15px; align-items:center; padding:16px 18px; border:1px solid var(--color-line); background:var(--gallery-card-bg); color:var(--color-text); text-align:left; cursor:pointer; overflow:hidden; transition:.3s ease; }
.game-select::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(33,150,243,.14),transparent 65%); opacity:0; transition:.3s; }
.game-select:hover,.game-select.active { border-color:var(--color-primary); transform:translateY(-2px); box-shadow:0 15px 45px var(--color-shadow); }
.game-select.active::before,.game-select:hover::before { opacity:1; }
.select-number,.select-arrow,.select-copy { position:relative; z-index:1; }
.select-number { color:var(--color-primary-light); font-size:9px; font-weight:900; letter-spacing:.12em; }
.select-copy { display:grid; gap:5px; }
.select-copy strong { font-size:16px; letter-spacing:-.025em; }
.select-copy small { color:var(--color-muted); font-size:8px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.select-arrow { justify-self:end; color:var(--color-primary-light); font-size:18px; transition:.25s; }
.game-select:hover .select-arrow,.game-select.active .select-arrow { transform:translate(4px,-4px); color:var(--color-highlight); }

/* ACTIVE GAME */
.gallery-project { scroll-margin-top:100px; }
.project-banner { position:relative; min-height:500px; overflow:hidden; border:1px solid var(--color-line); background:var(--color-surface-2); }
.project-banner img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .8s ease; }
.project-banner:hover img { transform:scale(1.025); }
.project-banner-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,17,29,.88),rgba(4,17,29,.34) 55%,rgba(4,17,29,.12)),linear-gradient(0deg,rgba(4,17,29,.78),transparent 58%); }
.project-banner-content { position:absolute; left:45px; right:45px; bottom:45px; max-width:720px; }
.project-status { display:inline-block; margin-bottom:14px; padding:7px 9px; border:1px solid rgba(227,242,253,.35); background:rgba(4,17,29,.42); color:var(--color-highlight); font-size:8px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; backdrop-filter:blur(10px); }
.project-banner h2 { margin:0; font-size:clamp(3rem,7vw,7rem); line-height:.82; letter-spacing:-.07em; }
.project-banner p { max-width:560px; margin:20px 0 0; color:var(--color-text-soft); font-size:13px; line-height:1.7; }
.project-code { position:absolute; right:25px; top:25px; color:rgba(227,242,253,.7); font-size:8px; font-weight:900; letter-spacing:.15em; }
.project-banner.image-missing::after { content:"ADD BANNER.JPG"; position:absolute; inset:0; z-index:5; 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; }

/* MEDIA TOOLBAR */
.media-toolbar { display:flex; justify-content:space-between; align-items:end; gap:30px; padding:42px 0 25px; border-bottom:1px solid var(--color-line); }
.media-toolbar strong { display:block; margin-top:7px; font-size:12px; letter-spacing:.1em; }
.media-filters { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.filter-btn { padding:10px 13px; 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-btn:hover,.filter-btn.active { border-color:var(--color-primary); background:rgba(33,150,243,.1); color:var(--color-highlight); box-shadow:0 8px 25px rgba(33,150,243,.08); }

/* GALLERY GRID */
.gallery-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:12px; padding-top:12px; }
.gallery-item { position:relative; grid-column:span 4; min-height:300px; overflow:hidden; border:1px solid var(--color-line); background:var(--gallery-card-bg); color:var(--color-text); cursor:pointer; padding:0; text-align:left; isolation:isolate; }
.gallery-item.wide { grid-column:span 6; }
.gallery-item img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .5s; }
.gallery-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(4,17,29,.05),transparent 35%,rgba(4,17,29,.82)); z-index:1; transition:.35s; }
.gallery-item::before { content:""; position:absolute; inset:-20%; z-index:2; background:radial-gradient(circle at var(--x,65%) var(--y,35%),rgba(227,242,253,.18),transparent 14%); opacity:.4; mix-blend-mode:screen; pointer-events:none; }
.gallery-item:hover img { transform:scale(1.055); filter:saturate(1.08); }
.gallery-item:hover .gallery-shade { background:linear-gradient(180deg,rgba(4,17,29,.02),transparent 35%,rgba(4,17,29,.68)); }
.gallery-label,.gallery-type { position:absolute; z-index:3; left:16px; }
.gallery-label { bottom:17px; font-size:13px; font-weight:800; letter-spacing:-.02em; }
.gallery-type { top:16px; padding:6px 8px; border:1px solid rgba(227,242,253,.3); background:rgba(4,17,29,.42); backdrop-filter:blur(8px); color:var(--color-primary-light); font-size:7px; font-weight:900; letter-spacing:.15em; text-transform:uppercase; }
.gallery-item.image-missing::after { content:"ADD MEDIA"; position:absolute; inset:0; z-index:4; display:grid; place-items:center; background:linear-gradient(135deg,var(--color-surface-2),var(--color-bg-deep)); color:var(--color-primary-light); font-size:9px; font-weight:900; letter-spacing:.2em; }
.empty-gallery { padding:70px 0; border-bottom:1px solid var(--color-line); text-align:center; color:var(--color-muted); font-size:12px; }

/* LIGHTBOX */
body.lightbox-open { overflow:hidden; }
.lightbox { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:50px; background:var(--gallery-lightbox-bg); opacity:0; visibility:hidden; pointer-events:none; transition:.25s; }
.lightbox.open { opacity:1; visibility:visible; pointer-events:auto; }
.lightbox-image { max-width:min(1200px,92vw); max-height:82vh; object-fit:contain; border:1px solid var(--color-line-strong); box-shadow:0 30px 100px rgba(0,0,0,.45); }
.lightbox-close { position:absolute; top:24px; right:28px; width:46px; height:46px; border:1px solid var(--color-line); background:rgba(10,34,56,.65); color:var(--color-highlight); font-size:28px; cursor:pointer; }
.lightbox-title { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); color:var(--color-primary-light); font-size:9px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; }

/* FOOTER */
.site-footer { background:var(--color-bg-deep); }
.footer-top { display:flex; justify-content:space-between; gap:60px; padding:90px 0; }
.footer-tagline { margin-top:20px; color:var(--color-muted); font-size:12px; }
.footer-links { display:grid; grid-template-columns:repeat(3,150px); gap:30px; }
.footer-links>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-links a { color:var(--color-muted); font-size:11px; transition:.2s; }
.footer-links 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; }

/* SCROLL BACKGROUND */
body::before,body::after { content:""; position:fixed; z-index:-3; pointer-events:none; width:45vw; height:45vw; 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,.05) 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,.17),rgba(13,71,161,.08) 42%,transparent 72%); transform:translate3d(0,calc(var(--scroll-y,0px)*-.08),0); }

@media(max-width:900px){
  .desktop-nav{display:none}.menu-toggle{display:block}.page-shell{width:min(100% - 36px,720px)}
  .game-selector{grid-template-columns:1fr}.section-heading{display:block}.project-count{display:block;margin-top:20px}.media-toolbar{display:block}.media-filters{justify-content:flex-start;margin-top:20px}
  .gallery-item,.gallery-item.wide{grid-column:span 6;min-height:260px}.footer-top{display:block}.footer-links{margin-top:50px}
}
@media(max-width:600px){
  .site-header{padding:16px 18px}.page-shell{width:calc(100% - 32px)}.page-main{padding-top:125px;padding-bottom:80px}
  .page-hero{padding-bottom:55px}.page-hero h1{font-size:clamp(4rem,18vw,7rem)}
  .game-selector-section{padding:65px 0 45px}.game-select{min-height:78px}.project-banner{min-height:430px}.project-banner-content{left:24px;right:24px;bottom:28px}.project-banner h2{font-size:clamp(2.8rem,14vw,5rem)}.project-code{right:18px;top:18px}
  .gallery-item,.gallery-item.wide{grid-column:span 12;min-height:270px}.lightbox{padding:25px}.lightbox-image{max-width:96vw;max-height:80vh}.footer-links{grid-template-columns:1fr 1fr}.footer-links>div:last-child{grid-column:1/-1}.footer-bottom{display:block;line-height:2}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.game-select,.gallery-item img,.project-banner img{transition:none}.game-select:hover{transform:none}.body::before,.body::after{transform:none}}