/* Layout: one dark vertical "flight path" — starfield hero, cinematic full-bleed game panels,
   a pinned filmstrip, a two-sided Develop/Publish split, founder log, pitch form. Single committed dark look. */
:root{
  --void:#06070a;        /* deep space ground */
  --hull:#0d0f14;        /* raised panels */
  --line:#1c2029;        /* hairlines */
  --star:#e8ebf0;        /* primary text */
  --dust:#8b93a1;        /* secondary text, cool grey */
  --ion:#8fb8ff;         /* single accent: ion-engine blue */
  --ion-dim:rgba(143,184,255,.14);
  --f-display:"Michroma","Eurostile","Microgramma","Segoe UI",sans-serif;
  --f-body:"Hanken Grotesk","Segoe UI",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --gutter:max(16px,env(safe-area-inset-left,0px));
  --gutter-r:max(16px,env(safe-area-inset-right,0px));
  --wrap:1240px;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;background:var(--void);overflow-x:clip}
body{margin:0;background:var(--void);color:var(--star);font-family:var(--f-body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--void)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--ion);color:var(--void)}
:focus-visible{outline:1.5px solid var(--ion);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-left:var(--gutter);padding-right:var(--gutter-r)}
.mono{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dust)}
.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ion);
  display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor;opacity:.7}
h1,h2,h3{font-family:var(--f-display);font-weight:400;line-height:1.08;text-wrap:balance;margin:0;letter-spacing:.02em}
h2{font-size:clamp(28px,4.4vw,56px)}
h3{font-size:clamp(20px,2vw,26px)}
p{margin:0}
.lede{color:var(--dust);font-size:clamp(17px,1.4vw,19px);max-width:58ch}

/* chrome lettering with a slow light sweep */
.chrome{background:linear-gradient(100deg,#7d8590 0%,#f4f6f9 18%,#aab1bc 34%,#5d6570 48%,#e9edf2 62%,#9ba3ae 80%,#eef1f5 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sweep 9s ease-in-out infinite}
@keyframes sweep{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* buttons */
.btn{--h:52px;display:inline-flex;align-items:center;gap:14px;height:var(--h);padding:0 26px;border:1px solid var(--line);
  font-family:var(--f-mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--star);
  background:rgba(13,15,20,.6);backdrop-filter:blur(6px);position:relative;overflow:hidden;
  transition:border-color .35s,color .35s;cursor:pointer}
.btn::after{content:"";position:absolute;inset:0;background:var(--star);transform:translateY(101%);transition:transform .45s cubic-bezier(.7,0,.2,1);z-index:-1}
.btn:hover{color:var(--void);border-color:var(--star)}
.btn:hover::after{transform:none}
.btn .arr{transition:transform .35s}
.btn:hover .arr{transform:translateX(4px)}
.btn.primary{border-color:var(--ion);color:var(--ion)}
.btn.primary::after{background:var(--ion)}
.btn.primary:hover{color:var(--void)}

/* ---------- nav ---------- */
.nav{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:50;transition:background .4s,border-color .4s,transform .5s;
  border-bottom:1px solid transparent}
.nav.solid{background:rgba(6,7,10,.78);backdrop-filter:blur(14px);border-color:var(--line)}
.nav.hide{transform:translateY(-100%)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:104px;padding-top:6px;gap:24px;max-width:1440px}
.brand{display:flex;align-items:center;gap:14px;font-family:var(--f-display);font-size:17px;letter-spacing:.18em;line-height:1}
.brand img{width:58px;height:58px;object-fit:contain;flex:none}
.nav ul{display:flex;gap:34px;list-style:none;margin:0;padding:0}
.nav ul a{font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dust);position:relative;transition:color .3s}
.nav ul a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:var(--ion);transition:right .35s}
.nav ul a:hover{color:var(--star)}
.nav ul a:hover::after{right:0}
.nav .btn{--h:40px;padding:0 18px;font-size:11.5px}
.menu-btn{display:none;background:none;border:0;color:var(--star);width:40px;height:40px;cursor:pointer;padding:0}
.menu-btn span{display:block;width:22px;height:1px;background:currentColor;margin:6px auto;transition:transform .3s}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(100svh,980px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;
  padding-block:160px 56px}
#stars{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 70% at 50% 120%,rgba(143,184,255,.12),transparent 60%),
             linear-gradient(180deg,rgba(6,7,10,0) 55%,var(--void) 100%)}
.hero .wrap{width:100%;max-width:1440px}
/* hero emblem: .hero-emblem = position + scroll drift, .emb-fly = flight path, .emb-flap = wing-beat squash */
.hero-emblem{position:absolute;right:max(24px,calc((100% - 1440px) / 2 + 24px));top:50%;margin-top:calc(min(40vw,560px) * -.54);
  width:min(40vw,560px);aspect-ratio:1;z-index:-1;pointer-events:none}
.emb-fly{position:absolute;inset:0;opacity:.08;will-change:transform,opacity}
.emb-flap{position:absolute;inset:0;transform-origin:50% 55%}
.emb-flap img,.emb-flap svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 40px rgba(143,184,255,.4))}
.emb-sheen{position:absolute;inset:0;opacity:0;
  -webkit-mask:url(/img/logo.svg) center/contain no-repeat;mask:url(/img/logo.svg) center/contain no-repeat;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.95) 50%,transparent 62%) 120% 0/300% 100% no-repeat}
.hero h1{font-size:clamp(46px,10.6vw,168px);letter-spacing:.04em;line-height:.95;margin:22px 0 28px}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .ln > span{display:inline-block}
.hero-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:32px}
.hero .lede{font-size:clamp(18px,1.6vw,21px);color:#b6bdc8;max-width:46ch}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.hud{margin-top:64px;padding-top:20px;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.hud div{display:flex;flex-direction:column;gap:6px;min-width:0}
.hud b{font-family:var(--f-mono);font-weight:400;font-size:13px;letter-spacing:.08em;color:var(--star);font-variant-numeric:tabular-nums}
.scroll-cue{position:absolute;left:50%;bottom:22px;translate:-50% 0;width:1px;height:46px;background:linear-gradient(var(--dust),transparent);
  overflow:hidden}
.scroll-cue::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--ion);animation:cue 2.2s cubic-bezier(.6,0,.3,1) infinite}
@keyframes cue{to{top:110%}}

/* ---------- section scaffolding ---------- */
section{position:relative}
.sec{padding-block:clamp(96px,13vw,180px)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end;margin-bottom:clamp(48px,6vw,88px)}
.sec-head > div{display:flex;flex-direction:column;gap:22px;min-width:0}

/* ---------- games ---------- */
.games{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,28px)}
.game{position:relative;display:grid;min-height:clamp(440px,62vw,720px);overflow:hidden;border:1px solid var(--line);isolation:isolate;background:var(--hull)}
.game .media{position:absolute;inset:-12% 0;z-index:-2}
.game .media img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.game:hover .media img{transform:scale(1.09)}
.game::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(6,7,10,.94) 0%,rgba(6,7,10,.72) 34%,rgba(6,7,10,.1) 70%),
             linear-gradient(0deg,rgba(6,7,10,.85),transparent 45%)}
.game .body{align-self:end;padding:clamp(24px,4vw,56px);display:flex;flex-direction:column;gap:20px;max-width:780px;min-width:0}
.game h3{font-size:clamp(26px,4.4vw,60px);letter-spacing:.03em}
.game p{color:#c2c8d2;max-width:50ch}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;border:1px solid rgba(232,235,240,.16);color:#c9cfd8;background:rgba(6,7,10,.35)}
.game .idx{position:absolute;top:clamp(20px,3vw,36px);right:clamp(20px,3vw,40px);text-align:right}
.game .links{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.game.flagship{min-height:clamp(500px,70vw,820px)}
.game.small-row{min-height:clamp(380px,40vw,520px)}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,28px)}
.pair .game h3{font-size:clamp(24px,3.2vw,44px)}
.next{border-style:dashed;background:
  repeating-linear-gradient(135deg,rgba(143,184,255,.035) 0 2px,transparent 2px 14px),var(--hull)}
.next::before{display:none}
.next .body{align-self:center}
.cipher{color:var(--ion);display:block;white-space:nowrap;font-size:min(1em,7.4vw);margin-top:.15em;font-variant-numeric:tabular-nums;text-shadow:0 0 24px rgba(143,184,255,.35)}
.cipher::before{content:"[ ";color:var(--dust)}
.cipher::after{content:" ]";color:var(--dust)}
.prod{display:flex;align-items:center;gap:14px;max-width:460px;margin-top:4px}
.prod .bar{flex:1;height:3px;background:var(--line);position:relative;overflow:hidden}
.prod .bar i{position:absolute;inset:0 auto 0 0;width:35%;background:linear-gradient(90deg,transparent,var(--ion));animation:scan 2.4s cubic-bezier(.6,0,.4,1) infinite}
@keyframes scan{from{left:-35%}to{left:100%}}
.blink{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ion);box-shadow:0 0 12px var(--ion);margin-right:10px;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}

/* ---------- filmstrip ---------- */
.strip-sec{padding-block:0 clamp(96px,12vw,160px);overflow:hidden}
.strip-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:28px;flex-wrap:wrap}
.strip{display:flex;gap:16px;padding-left:var(--gutter);padding-right:var(--gutter-r);width:max-content;will-change:transform}
.strip figure{margin:0;width:clamp(280px,38vw,560px);aspect-ratio:16/9;overflow:hidden;position:relative;border:1px solid var(--line);flex:none;max-width:85vw}
.strip img{width:100%;height:100%;object-fit:cover;filter:saturate(.9);transition:filter .5s,transform .9s}
.strip figure:hover img{filter:saturate(1.1);transform:scale(1.04)}
.strip figcaption{position:absolute;left:12px;bottom:10px;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--star);
  text-shadow:0 1px 8px #000}
.strip-scroller{overflow-x:auto;scrollbar-width:none}
.strip-scroller::-webkit-scrollbar{display:none}
.js-pin .strip-scroller{overflow:visible}

/* ---------- develop / publish ---------- */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.side{padding:clamp(36px,5vw,72px) clamp(0px,4vw,56px) clamp(36px,5vw,72px) 0;display:flex;flex-direction:column;gap:26px;min-width:0}
.side + .side{border-left:1px solid var(--line);padding-left:clamp(24px,4vw,56px);padding-right:0}
.side h3{font-size:clamp(26px,3vw,40px)}
.side .k{font-family:var(--f-mono);font-size:12px;letter-spacing:.2em;color:var(--ion)}
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:16px 0;border-top:1px solid var(--line);color:#c9cfd8}
.list li span:last-child{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--dust);text-transform:uppercase;align-self:center}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:clamp(56px,7vw,96px)}
.step{display:flex;flex-direction:column;gap:12px;padding-top:20px;border-top:1px solid var(--line);position:relative;min-width:0}
.step::before{content:"";position:absolute;top:-1px;left:0;height:1px;width:var(--p,0%);background:var(--ion);transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
.step.on::before{--p:100%}
.step .n{font-family:var(--f-mono);font-size:12px;color:var(--ion);letter-spacing:.14em}
.step h4{margin:0;font-family:var(--f-display);font-weight:400;font-size:15px;letter-spacing:.08em}
.step p{color:var(--dust);font-size:15.5px}

/* ---------- studio ---------- */
.studio{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.portrait{position:sticky;top:110px;border:1px solid var(--line);aspect-ratio:4/5;overflow:hidden;background:var(--hull);display:grid;place-items:center;max-width:100%}
.portrait img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--void) 4%,transparent 60%)}
.portrait .cap{position:absolute;left:20px;right:20px;bottom:18px;z-index:1;display:flex;justify-content:space-between;gap:12px}
.studio-copy{display:flex;flex-direction:column;gap:28px;min-width:0}
.studio-copy p{color:#c2c8d2;max-width:62ch}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--line);margin-top:8px}
.facts div{padding:22px 20px 22px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:6px;min-width:0}
.facts div:nth-child(even){padding-left:20px;border-left:1px solid var(--line)}
.facts b{font-family:var(--f-display);font-weight:400;font-size:clamp(18px,1.8vw,22px);letter-spacing:.04em}
.log{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column}
.log li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:20px;padding:18px 0;border-top:1px solid var(--line);align-items:baseline}
.log li:last-child{border-bottom:1px solid var(--line)}
.log strong{font-family:var(--f-display);font-weight:400;font-size:15px;letter-spacing:.08em}
.log em{font-style:normal;color:var(--dust);font-size:15.5px;display:block;margin-top:4px}

/* ---------- pitch / contact ---------- */
.pitch{position:relative;overflow:hidden;border-top:1px solid var(--line)}
.pitch .bgimg{position:absolute;inset:0;z-index:-2;opacity:.22}
.pitch .bgimg img{width:100%;height:100%;object-fit:cover}
.pitch::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--void),rgba(6,7,10,.7) 40%,var(--void))}
.pitch{isolation:isolate}
.pitch-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,96px);align-items:start}
.pitch-grid > div:first-child{display:flex;flex-direction:column;gap:24px;min-width:0}
form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;background:rgba(13,15,20,.72);backdrop-filter:blur(10px);
  border:1px solid var(--line);padding:clamp(20px,3vw,36px);min-width:0}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field.full{grid-column:1/-1}
label{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dust)}
input,select,textarea{font:inherit;font-size:16px;color:var(--star);background:transparent;border:0;border-bottom:1px solid #2a303b;padding:10px 0;
  border-radius:0;transition:border-color .3s;width:100%;min-width:0}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--dust) 50%),linear-gradient(135deg,var(--dust) 50%,transparent 50%);
  background-position:calc(100% - 12px) 55%,calc(100% - 7px) 55%;background-size:5px 5px;background-repeat:no-repeat}
select option{background:var(--hull)}
textarea{resize:vertical;min-height:110px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ion)}
.form-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin-top:10px}
.form-note{font-size:14px;color:var(--dust);min-height:1.4em}
.form-note.ok{color:var(--ion)}
.reach{display:flex;flex-direction:column;gap:0;margin-top:12px}
.reach a{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-top:1px solid var(--line);transition:color .3s,padding .4s}
.reach a:last-child{border-bottom:1px solid var(--line)}
.reach a:hover{color:var(--ion);padding-left:10px}
.reach a span:last-child{font-family:var(--f-mono);font-size:12px;color:var(--dust);letter-spacing:.1em}

/* ---------- footer ---------- */
footer{position:relative;border-top:1px solid var(--line);padding-block:clamp(64px,8vw,104px) 28px;overflow:hidden;isolation:isolate}
footer::before{content:"";position:absolute;left:50%;bottom:-40%;width:140%;aspect-ratio:3/1;translate:-50% 0;z-index:-1;
  background:radial-gradient(closest-side,rgba(143,184,255,.13),transparent 70%)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:40px}
.foot-grid > div{display:flex;flex-direction:column;gap:18px;min-width:0}
.foot-grid p{color:var(--dust);font-size:15.5px;max-width:34ch}
.foot-grid h4{margin:0;font-family:var(--f-mono);font-weight:400;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ion)}
.foot-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.foot-grid ul a{color:#c2c8d2;font-size:15.5px;transition:color .3s}
.foot-grid ul a:hover{color:var(--star)}
.socials{display:flex;gap:8px;flex-wrap:wrap}
.socials a{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);color:var(--dust);transition:color .3s,border-color .3s,background .3s}
.socials a:hover{color:var(--void);background:var(--star);border-color:var(--star)}
.socials svg{width:16px;height:16px;fill:currentColor}
.horizon{position:relative;height:1px;margin-top:clamp(56px,7vw,96px);background:linear-gradient(90deg,transparent,rgba(143,184,255,.7) 50%,transparent)}
.horizon::after{content:"";position:absolute;left:50%;top:-1px;width:30%;height:3px;translate:-50% 0;filter:blur(4px);background:var(--ion);opacity:.6}
.wordmark{font-family:var(--f-display);font-size:clamp(30px,9.3vw,118px);letter-spacing:.06em;line-height:1;margin:22px 0 0;white-space:nowrap;
  text-align:center;-webkit-mask-image:linear-gradient(180deg,#000 35%,transparent 100%);mask-image:linear-gradient(180deg,#000 35%,transparent 100%)}
.foot-bot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px;padding-top:20px;border-top:1px solid var(--line)}
.to-top{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dust);transition:color .3s}
.to-top:hover{color:var(--ion)}
.to-top span{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--line);transition:transform .35s,border-color .3s}
.to-top:hover span{transform:translateY(-3px);border-color:var(--ion)}
@media (max-width:980px){.foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.foot-grid > div:first-child{grid-column:1/-1}}
@media (max-width:560px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- reveal helpers (visible at rest; JS only adds motion) ---------- */
.rv{will-change:transform}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .nav ul,.nav .btn{display:none}
  .menu-btn{display:block}
  .nav.open ul{display:flex;position:absolute;top:104px;left:0;right:0;flex-direction:column;gap:0;background:rgba(6,7,10,.96);
    border-bottom:1px solid var(--line);padding:8px var(--gutter-r) 20px var(--gutter)}
  .nav.open ul a{display:block;padding:14px 0;font-size:13px}
  .sec-head,.studio,.pitch-grid{grid-template-columns:minmax(0,1fr)}
  .pair{grid-template-columns:minmax(0,1fr)}
  .split{grid-template-columns:minmax(0,1fr)}
  .side,.side + .side{padding:40px 0;border-left:0}
  .side + .side{border-top:1px solid var(--line)}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .portrait{position:relative;top:0;aspect-ratio:16/10}
  .hud{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  body{font-size:16px}
  .brand img{width:46px;height:46px}
  .brand{font-size:15px}
  form{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:minmax(0,1fr)}
  .facts{grid-template-columns:minmax(0,1fr)}
  .facts div:nth-child(even){padding-left:0;border-left:0}
  .log li{grid-template-columns:minmax(0,1fr);gap:4px}
  .game::before{background:linear-gradient(0deg,rgba(6,7,10,.95) 10%,rgba(6,7,10,.55) 60%,rgba(6,7,10,.2))}
  .game .idx{display:none}
  .btn{--h:48px;padding:0 20px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ===================== game pages ===================== */
.ghero{position:relative;min-height:min(92svh,900px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;padding-block:170px 56px}
.ghero .art{position:absolute;inset:0;z-index:-2}
.ghero .art img{width:100%;height:100%;object-fit:cover}
.ghero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,7,10,.92) 0%,rgba(6,7,10,.55) 45%,rgba(6,7,10,.1) 80%),
             linear-gradient(0deg,var(--void) 0%,rgba(6,7,10,.4) 38%,transparent 60%),
             linear-gradient(180deg,rgba(6,7,10,.7),transparent 22%)}
.ghero .wrap{width:100%;max-width:1440px;display:flex;flex-direction:column;gap:24px}
.crumbs{display:flex;gap:10px;align-items:center;font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dust)}
.crumbs a{transition:color .3s}
.crumbs a:hover{color:var(--ion)}
.ghero h1{font-size:clamp(30px,8vw,128px);letter-spacing:.03em;line-height:.95}
.ghero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.ghero h1 .ln > span{display:inline-block}
.ghero .lede{font-size:clamp(18px,1.6vw,21px);color:#c2c8d2;max-width:52ch}
.gmeta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:16px 0 0;padding-top:20px;border-top:1px solid rgba(232,235,240,.14)}
.gmeta div{display:flex;flex-direction:column;gap:6px;min-width:0}
.gmeta dt{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dust)}
.gmeta dd{margin:0;font-family:var(--f-mono);font-size:13px;letter-spacing:.06em;color:var(--star)}

.gsec{padding-block:clamp(72px,9vw,128px)}
.gsec + .gsec{padding-top:0}
.about{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,96px);align-items:start}
.about .copy{display:flex;flex-direction:column;gap:22px;min-width:0}
.about .copy p{color:#c2c8d2;max-width:64ch}
.steam-card{border:1px solid var(--line);background:var(--hull);padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:18px;min-width:0}
.steam-card iframe{width:100%;max-width:646px;height:190px;border:0;background:transparent}
.steam-card .langs{color:var(--dust);font-size:14.5px}

.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.features > div{padding:clamp(22px,2.6vw,34px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:12px;min-width:0}
.features .k{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;color:var(--ion)}
.features h3{font-size:clamp(16px,1.4vw,19px);letter-spacing:.06em;line-height:1.3}
.features p{color:var(--dust);font-size:15.5px}

.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.gallery a{display:block;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line);position:relative;max-width:100%}
.gallery a:first-child{grid-column:span 2;grid-row:span 2}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .5s;filter:saturate(.92)}
.gallery a:hover img{transform:scale(1.05);filter:saturate(1.1)}
.gallery a::after{content:"+";position:absolute;right:12px;bottom:8px;font-family:var(--f-mono);color:var(--star);opacity:0;transition:opacity .3s}
.gallery a:hover::after{opacity:.9}

.reqs{width:100%;border-collapse:collapse;font-size:15.5px}
.reqs-wrap{overflow-x:auto;border-top:1px solid var(--line)}
.reqs th,.reqs td{text-align:left;padding:14px 16px 14px 0;border-bottom:1px solid var(--line);vertical-align:top}
.reqs th{font-family:var(--f-mono);font-weight:400;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dust);width:180px}
.reqs td{color:#c9cfd8}

.lightbox{position:fixed;inset:0;z-index:100;background:rgba(6,7,10,.94);display:grid;place-items:center;
  padding:max(56px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(56px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.lightbox img{max-width:min(1400px,100%);max-height:100%;object-fit:contain;border:1px solid var(--line)}
.lightbox button{position:absolute;width:48px;height:48px;border:1px solid var(--line);background:rgba(13,15,20,.8);color:var(--star);font-size:20px;cursor:pointer;transition:border-color .3s,color .3s}
.lightbox button:hover{border-color:var(--ion);color:var(--ion)}
.lb-close{top:max(16px,env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px))}
.lb-prev{left:max(16px,env(safe-area-inset-left,0px));top:50%;translate:0 -50%}
.lb-next{right:max(16px,env(safe-area-inset-right,0px));top:50%;translate:0 -50%}
.lb-count{position:absolute;bottom:max(18px,env(safe-area-inset-bottom,0px));left:50%;translate:-50% 0}

/* 404 */
.lost{min-height:100svh;display:flex;align-items:center;position:relative;overflow:hidden;isolation:isolate;padding-block:120px 80px}
.lost .wrap{display:flex;flex-direction:column;gap:24px;width:100%}
.lost h1{font-size:clamp(72px,18vw,240px);letter-spacing:.06em;line-height:.9}

@media (max-width:980px){
  .gmeta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about{grid-template-columns:minmax(0,1fr)}
  .features{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .features{grid-template-columns:minmax(0,1fr)}
  .gallery{grid-template-columns:minmax(0,1fr)}
  .gallery a:first-child{grid-column:auto;grid-row:auto}
  .reqs th{width:110px}
  .ghero::after{background:linear-gradient(0deg,var(--void) 8%,rgba(6,7,10,.65) 55%,rgba(6,7,10,.45))}
}