/* games.celermajer.dev: same system as noam.celermajer.dev, one big showcase per game */
.g-hero{height:82svh;min-height:520px}
.g-back{position:absolute;z-index:4;top:clamp(1rem,3vh,1.6rem);left:clamp(1.25rem,6vw,7rem);color:var(--ink2);text-decoration:none;font-size:.95rem}
.g-back:hover{color:var(--ink)}
.g-hero .rv-name{font-size:clamp(4.5rem,17vw,15rem)}
@media (max-width:700px){.g-hero .rv-name{font-size:24vw}}

.games{max-width:1320px;margin:0 auto;padding:clamp(1rem,4vw,3rem) clamp(1rem,4vw,4rem) clamp(3rem,7vw,6rem);display:grid;gap:clamp(1.2rem,3vw,2.4rem);perspective:1600px}
.game{--rx:0deg;--ry:0deg;position:relative;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;
  transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .6s cubic-bezier(.2,.8,.2,1),border-color .25s,opacity .8s}
.game.tilt{transition:transform .08s linear,border-color .25s}
.game:hover{border-color:var(--k)}
.game::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .3s;
  background:radial-gradient(600px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.06),transparent 60%)}
.game:hover::after{opacity:1}
.js .game.pre{opacity:0;transform:rotateX(-18deg) translateY(50px) scale(.97)}
.game:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.45fr)}
.game:nth-child(even) .g-art{order:2;border-left:1px solid var(--line);border-right:0}
.g-art{border-right:1px solid var(--line)}
.g-art .art{aspect-ratio:16/10}
.g-info{position:relative;padding:clamp(1.4rem,3vw,2.6rem);display:flex;flex-direction:column;justify-content:center}
.g-meta{font:500 .78rem ui-monospace,"Cascadia Mono",Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--k)}
.g-info h2{margin-top:.5rem;font:820 clamp(2.2rem,1.6rem + 2.4vw,3.6rem)/.95 var(--disp);letter-spacing:-.02em}
.g-line{margin-top:.9rem;color:var(--ink2);font-size:1.02rem;max-width:34ch}
.stats{margin:1.6rem 0 0;display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.4rem}
.stats div{display:flex;flex-direction:column;gap:.2rem}
.stats dd{margin:0;font:820 clamp(1.6rem,1.2rem + 1.2vw,2.3rem)/1 var(--disp);color:var(--ink)}
.stats dt{font-size:.8rem;color:var(--ink3);line-height:1.3}
.chips{list-style:none;margin:1.6rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.chips li{font-size:.78rem;color:var(--ink2);border:1px solid var(--line);border-radius:99px;padding:.22rem .65rem;background:#0d1115}
.game .tag{top:1rem;bottom:auto;right:1rem}

/* art details */
.art .sh-b{fill:#05070a}
.art .pipe{stroke-dasharray:40 1200;stroke-dashoffset:1240;animation:flow 4.2s linear infinite}
.art .pipe-t text{dominant-baseline:middle}
.art .sweep-dh2{animation:sweepw 6s ease-in-out infinite}
.art .bit{fill:#1d272f}.art .bit.on{fill:#3a4650}
.bits64 .bit.on{fill:color-mix(in srgb,var(--k) 55%,#0e1418)}
.art .lane{opacity:0;animation:lane 5.4s steps(1) infinite}
.bits32 .lane{fill:#fff}.bits64 .lane{fill:var(--k)}
.art .dbar{fill:#2b3741}.art .dbar.k{fill:color-mix(in srgb,var(--k) 70%,#0e1418)}
.art .dreg{font:500 8px ui-monospace,monospace;fill:var(--ink3)}
.art .dok{opacity:0;animation:dok 5.4s steps(1) infinite}
.art .cv{fill:color-mix(in srgb,var(--k) 75%,#0e1418)}.art .cv.open{fill:var(--orange)}
.art .cv{animation:cvlit 6s ease-in-out infinite}
@keyframes sweepw{0%,100%{transform:translateX(0)}50%{transform:translateX(560px)}}
@keyframes lane{0%{opacity:.35}11%,100%{opacity:0}}
@keyframes dok{0%,100%{opacity:1}}
@keyframes cvlit{0%,100%{opacity:1}50%{opacity:.75}}
.art .dok{animation:none;opacity:0;transition:opacity .2s}.art .dok.on{opacity:1}

@media (max-width:900px){
  .game,.game:nth-child(even){grid-template-columns:1fr}
  .game:nth-child(even) .g-art{order:0;border-left:0}
  .g-art{border-right:0;border-bottom:1px solid var(--line)}
  .game:nth-child(even) .g-art{border-bottom:1px solid var(--line)}
}
@media (prefers-reduced-motion:reduce){.js .game.pre{opacity:1;transform:none}}
.foot{max-width:1320px}
.rv-name{letter-spacing:.04em}

.g-head{display:flex;align-items:center;gap:1rem;margin-bottom:.4rem}
.g-icon{width:clamp(72px,7vw,96px);height:auto;aspect-ratio:1;border-radius:22%;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 10px 30px -8px color-mix(in srgb,var(--k) 45%,transparent);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.game:hover .g-icon{transform:translateZ(30px) rotate(-3deg) scale(1.04)}
.g-credit{font-size:.78rem;color:var(--ink3)}