:root{
  --apple-sans: "SF Pro Display", "SF Pro Text", "SF Pro Rounded", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sticky-header-height: 0px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;background:#fff;color:#222;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2{font-family:var(--apple-sans);font-weight:700;letter-spacing:0}
header{display:flex;justify-content:space-between;align-items:center;padding:26px 60px;background:rgba(255,255,255,.92);position:sticky;top:0;z-index:1000;transition:box-shadow .25s ease,padding .25s ease;backdrop-filter:blur(14px)}
header.scrolled{box-shadow:0 8px 28px rgba(17,17,17,.08)}
.logo{display:block;width:clamp(220px,23vw,320px);line-height:0;cursor:pointer;z-index:1001;transition:transform .22s ease}
.logo img{display:block;width:100%;height:auto}
.logo:hover{transform:translateY(-2px)}
nav a{margin-left:36px;text-decoration:none;color:#111;font-family:var(--apple-sans);font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;position:relative}
nav a::after{content:"";position:absolute;right:0;bottom:-8px;left:0;height:2px;background:#111;transform:scaleX(0);transform-origin:right;transition:transform .22s ease}
nav a:hover::after,nav a:focus-visible::after{transform:scaleX(1);transform-origin:left}
nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.hamburger{display:none;font:inherit;font-size:28px;line-height:1;color:#111;cursor:pointer;user-select:none;z-index:1001;border:0;background:transparent}
.hero{width:100%;position:sticky;top:var(--sticky-header-height);z-index:0;overflow:hidden;background:#000;padding-top:42.5%;margin-bottom:0}
#home-page > :not(.hero),#play-page > :not(.hero){position:relative;z-index:1}
.section{padding:80px 60px;text-align:center}
#games{padding-top:48px}
.section h2{font-size:36px;margin-bottom:50px}
.section h2::after{content:none}
.games{display:grid;grid-template-columns:repeat(5,1fr);gap:44px}
.beta-section{padding-top:0}
.beta-intro{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);gap:56px;align-items:center;max-width:1160px;margin:0 auto 56px;text-align:left}
.beta-intro h3{font-family:var(--apple-sans);font-size:clamp(28px,4vw,44px);line-height:1.12;margin-bottom:20px}
.beta-intro p,.beta-update p{font-size:16px;line-height:1.75;color:#bbb;max-width:680px}
.button{display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;border:1px solid #8cc4ee;border-radius:4px;background:transparent;color:#8cc4ee !important;text-decoration:none;font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:background .2s ease,color .2s ease,transform .2s ease}
.button:hover{background:#8cc4ee;color:#000 !important;transform:translateY(-2px)}
.button:focus-visible{outline:3px solid #8cc4ee;outline-offset:4px}
.beta-readmore{margin-top:24px}
.beta-feature-art{margin:0;text-align:center}
.beta-feature-art video{display:block;width:100%;max-height:440px;object-fit:contain}
.beta-updates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 56px;max-width:1160px;margin:0 auto;text-align:left}
.beta-update{padding:24px 0 0;border-top:1px solid #444;transition:transform .25s ease}
.beta-update:hover{transform:translateY(-4px)}
.beta-update h3{font-family:var(--apple-sans);font-size:21px;font-weight:700;margin-bottom:12px}
.beta-callout{max-width:1160px;margin:56px auto 0;padding-top:28px;border-top:1px solid #444;text-align:left}
.beta-callout strong{display:inline-block;font-family:var(--apple-sans);font-size:14px;letter-spacing:.1em;margin-bottom:12px}
.beta-callout p{font-size:16px;line-height:1.7;color:#bbb;font-style:italic}
.artworks-section{padding-top:20px}
.artworks-marquee{position:relative;width:100vw;max-width:none;margin-left:calc(50% - 50vw);overflow:hidden;padding:8px 0}
.artworks-track{display:flex;align-items:center;gap:32px;width:max-content;animation:marquee-scroll 24s linear infinite}
.artwork{flex:0 0 clamp(150px,22vw,240px);height:360px;display:flex;align-items:center;justify-content:center}
.artwork.monkey-artwork{flex-basis:150px}
.artwork img{display:block;width:100%;height:100%;object-fit:contain;border-radius:0;background:transparent;box-shadow:none;border:none;padding:0}
.monkey-artwork img{height:320px}
@keyframes marquee-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.game{transition:transform .25s ease}
.game:hover{transform:translateY(-8px)}
.game img{width:150px;height:150px;border-radius:28px;margin:0 auto 18px;display:block;background:#fff;object-fit:cover;padding:0;box-shadow:0 8px 20px rgba(0,0,0,0);border:1px solid #f0f0f0;transition:transform .3s ease,box-shadow .3s ease}
.game:not(:nth-child(4)):hover img{transform:scale(1.04);box-shadow:0 16px 26px rgba(17,17,17,.14)}
.game h3{font-size:15px;font-weight:700;margin-bottom:10px;text-transform:uppercase;font-family:var(--apple-sans);letter-spacing:-0.04em}
.game p{font-size:13px;color:#888;line-height:1.5;max-width:200px;margin:0 auto}
.game:nth-child(4) img{object-fit:cover;object-position:center;transform:scale(1.08)}
.game:nth-child(4):hover img{transform:scale(1.12);box-shadow:0 16px 26px rgba(17,17,17,.14)}
.yellow{background:#8cc4ee;min-height:min(70svh,760px);padding:clamp(56px,8vh,88px) clamp(24px,7vw,100px);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.yellow h2{max-width:1100px;font-size:clamp(22px,6.5vw,96px);line-height:.98;color:#111;text-transform:uppercase;font-family:var(--apple-sans);font-weight:700;letter-spacing:-.04em;white-space:nowrap}
.yellow h3{margin-top:28px;font-family:var(--apple-sans);font-size:clamp(18px,2.2vw,30px);line-height:1.2;text-transform:uppercase;letter-spacing:.04em}
.yellow p{max-width:800px;margin:20px auto 0;font-size:clamp(16px,1.35vw,20px);line-height:1.6;color:#222}
.yellow .yellow-tagline{margin-top:26px;font-size:clamp(16px,1.5vw,22px);font-weight:700}


#play-page{min-height:calc(100vh - 112px)}
.play-games{display:grid;grid-template-columns:minmax(220px,280px);justify-content:center}
.play-game{display:block;padding:20px;border:0;border-radius:18px;color:inherit;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease}
.play-game:hover,.play-game:focus-visible{transform:translateY(-6px)}
.play-game img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;margin-bottom:18px}
.play-game h3{font-family:var(--apple-sans);font-size:20px;margin-bottom:8px}
.play-game p{font-size:14px;line-height:1.5;color:#bbb !important}
.morph-hero{position:relative;overflow:hidden}
.hero.morph-hero{position:sticky;top:var(--sticky-header-height);z-index:0}
#games-page > :not(.games-hero),#company-page > :not(.company-artworks-marquee),#contact-page > :not(.contact-hero){position:relative;z-index:1}
.games-hero,.company-artworks-marquee,.contact-hero{position:sticky;top:var(--sticky-header-height);z-index:0}
#contact-page > .privacy-content{background:#000}
.morph-hero-image{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;opacity:0;transition:opacity 2.8s cubic-bezier(.4,0,.2,1)}
.morph-hero-image:first-child{background-image:url('assets/jigsawspace.jpg')}
.morph-hero-image:nth-child(2){background-image:url('assets/gameshero.jpg')}
.morph-hero-image:nth-child(3){background-image:url('assets/games%20hero2.jpg')}
.morph-hero-image.is-active{opacity:1}
.games-hero{position:relative;width:100%;aspect-ratio:2398 / 1346;overflow:hidden;background:#000}
.company-content{padding:90px 60px;text-align:left;max-width:100%;margin:0 auto}
.company-content h2{font-size:68px;line-height:1.08;color:#111;text-transform:uppercase;margin-bottom:60px;max-width:100%;text-align:center;letter-spacing:0;font-family:var(--apple-sans);font-weight:700}
.company-content p{font-size:17px;line-height:1.8;color:#333;margin-bottom:24px;max-width:760px;margin-left:auto;margin-right:auto}
.company-content h3{max-width:760px;margin:56px auto 22px;font-family:var(--apple-sans);font-size:28px;line-height:1.15;text-align:left}
.company-content p.center{text-align:center;max-width:100%}
.company-content .tagline{font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#111;margin-top:50px;text-align:center;max-width:100%;font-family:var(--apple-sans)}




.contact-hero{width:100%;position:relative;overflow:hidden;background:#000 url('assets/jigsawspace.jpg') center center / cover no-repeat;padding-top:42.5%;margin-bottom:0}
#games-page > .games-hero,#contact-page > .contact-hero{position:sticky;top:var(--sticky-header-height);z-index:0}
.privacy-content{max-width:900px;margin:0 auto;padding:76px 40px 100px}
.privacy-content h1{font-size:48px;line-height:1.1;margin-bottom:12px}
.privacy-content .effective-date{color:#777;font-size:14px;margin-bottom:40px}
.privacy-content .intro{font-size:18px;line-height:1.75;color:#444;margin-bottom:24px}
.privacy-content section{padding-top:28px}
.privacy-content h2{font-size:24px;margin-bottom:14px}
.privacy-content h3{font-size:17px;margin:22px 0 10px}
.privacy-content p,.privacy-content li{font-size:16px;line-height:1.75;color:#444}
.privacy-content p{margin-bottom:14px}
.privacy-content ul{padding-left:24px;margin:10px 0 18px}
.privacy-content a{color:#111;text-underline-offset:3px}
.contact-form{max-width:720px;margin-top:34px;display:grid;gap:22px}
.contact-field{display:grid;gap:8px;text-align:left}
.contact-field label{font-size:14px;font-weight:700;color:#222}
.contact-field input,.contact-field textarea{width:100%;padding:14px 15px;border:1px solid #d7d7d7;border-radius:4px;background:#fff;color:#222;font:inherit;font-size:16px;transition:border-color .2s ease,box-shadow .2s ease}
.contact-field textarea{min-height:180px;resize:vertical}
.contact-field input:focus,.contact-field textarea:focus{outline:none;border-color:#438fc7;box-shadow:0 0 0 3px rgba(140,196,238,.28)}
.contact-submit{justify-self:start}
footer{background:#000;color:#999;padding:28px 60px;display:flex;justify-content:space-between;font-size:12px}
footer a{color:#999;text-decoration:none;margin-left:20px;transition:color .2s ease}
footer a:hover,footer a:focus-visible{color:#fff}

.reveal{opacity:0;transform:translateY(30px);transition:opacity .95s ease var(--reveal-delay,0ms),transform .95s cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms)}
.reveal.is-visible{opacity:1;transform:translateY(0)}
@media(hover:hover) and (pointer:fine) and (min-width:901px){
 .games .game{position:relative;transform-origin:center bottom;transition:transform .55s cubic-bezier(.2,.8,.2,1);will-change:transform}
 .games .game:hover{transform:translateY(-12px) scale(1.14);z-index:3}
 .games .game:hover + .game,.games .game:has(+ .game:hover){transform:translateY(-5px) scale(1.07);z-index:2}
 .games .game:hover + .game + .game,.games .game:has(+ .game + .game:hover){transform:translateY(-2px) scale(1.02);z-index:1}
}
@keyframes hero-drift{from{background-position:48% center}to{background-position:52% center}}
button:focus-visible,a:focus-visible{outline:3px solid #8cc4ee;outline-offset:5px}

/* MOBILE FULLSCREEN MENU */
@media(max-width:900px){
 .morph-hero-image:nth-child(2){background-image:url('assets/gamesherophone.jpg')}
 .morph-hero-image:nth-child(3){background-image:url('assets/games%20hero2phone.jpg')}
 header{padding:20px;position:sticky;top:0;background:#fff;z-index:1000}
 .logo{width:clamp(210px,38vw,270px)}
 .hamburger{display:block}
 nav{
   display:flex;
   position:fixed;
   top:0;left:0;right:0;bottom:0;
   width:100vw;height:100vh;
   background:#fff;
   flex-direction:column;
   justify-content:center;
   align-items:center;
   gap:32px;
   padding:0;
   z-index:999;
   opacity:0;
   pointer-events:none;
   transform:translateY(-20px);
   transition:all 0.25s ease;
 }
 nav.active{
   opacity:1;
   pointer-events:auto;
   transform:translateY(0);
 }
 nav a{
   margin:0;
   font-size:22px;
   font-weight:900;
   font-family:'Montserrat',sans-serif;
   letter-spacing:1px;
 }
 nav a::after{bottom:-10px}
 .hero{padding-top:0;height:480px;background-size:180%;background-position:52% center;margin-bottom:0}
 .contact-hero{padding-top:0;height:480px}
 .section{padding:60px 24px}
 #games{padding-top:32px}
 .section h2{font-size:28px}
 .games{grid-template-columns:1fr 1fr;gap:32px}
 .beta-intro{grid-template-columns:1fr;gap:28px;margin-bottom:40px}
 .beta-feature-art video{max-height:360px}
 .beta-updates{grid-template-columns:1fr;gap:28px}
 .beta-callout{margin-top:40px}
 .artworks-track{gap:24px}
 .artwork{flex-basis:clamp(150px,26vw,220px);height:300px}
 .artwork.monkey-artwork{flex-basis:125px}
 .monkey-artwork img{height:270px}
 .game img{width:140px;height:140px}
 .yellow{min-height:0;padding:64px 24px}
 .yellow h2{font-size:clamp(20px,7.5vw,52px)}
 .yellow h3{margin-top:24px}
 .company-content{padding:60px 24px}
 .company-content h2{font-size:34px;line-height:1.05}
 .company-content h3{font-size:23px;margin-top:44px}
 .privacy-content{padding:52px 24px 72px}
 .privacy-content h1{font-size:36px}
 .privacy-content h2{font-size:21px}
 footer{flex-direction:column;gap:10px;text-align:center}
}
@media(max-width:500px){
 .hero{height:520px;background-size:210%;background-position:54% center}
 .contact-hero{height:520px}
 .games{grid-template-columns:1fr}
 .artwork{flex-basis:180px;height:260px}
 .artwork.monkey-artwork{flex-basis:108px}
 .monkey-artwork img{height:235px}
 .game img{width:160px;height:160px}
 .game p{max-width:260px}
 .logo{width:clamp(195px,56vw,250px)}
 nav a{font-size:20px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
 .reveal{opacity:1;transform:none}
}
body{background:#000;color:#fff}
body *{color:#fff !important}
h1,h2,h3{color:#8cc4ee !important}
header,nav,.section,.yellow,.company-content{background-color:#000}
header{background:rgba(0,0,0,.92)}
nav a::after{background:#fff}
footer{background:#fff}
footer,footer *{color:#000 !important}
.game img{background:#000;border-color:#333}
.contact-field input,.contact-field textarea{background:#000;color:#fff;border-color:#666}

.shop-content{min-height:calc(100vh - 180px);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:80px 24px}
.shop-content h1{font-family:var(--apple-sans);font-size:clamp(42px,8vw,88px);line-height:1;margin-bottom:24px;text-transform:uppercase}
.shop-content p{max-width:620px;font-size:18px;line-height:1.7;color:#bbb;margin-bottom:32px}
.shop-content .button{font-size:16px}