/* Games art + interactions (homepage #games, /games/, game, support and privacy pages).
   Loaded after cyber.css. Everything works without js/games-fx.js; the script only adds motion,
   the lightbox, the trailer player, sound (opt-in) and the easter eggs. No libraries. */

/* ---------- Hero ---------- */
.gx-hero {position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-end;min-height:min(88vh,900px);padding:96px max(24px,5vw) 56px;background:#05010a;border-bottom:1px solid var(--cy-accent);box-shadow:0 1px 30px color-mix(in srgb,var(--cy-accent) 30%,transparent)}
.gx-layers {position:absolute;inset:0;z-index:-1;pointer-events:none}
.gx-layer {position:absolute;will-change:transform}
.gx-layer img {display:block}
.gx-bg {inset:-20px}
.gx-bg img {width:100%;height:100%;object-fit:cover}
.gx-pixel img,img.gx-pixel {image-rendering:pixelated}
.gx-scrim {position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,1,10,.9) 0,rgba(5,1,10,.62) 34%,rgba(5,1,10,0) 64%),linear-gradient(0deg,rgba(5,1,10,.92) 0,rgba(5,1,10,0) 46%)}
.gx-scan {position:absolute;inset:0;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.22) 0 1px,transparent 1px 4px);mix-blend-mode:multiply}
.gx-scan::after {content:"";position:absolute;left:0;right:0;top:0;height:18%;background:linear-gradient(transparent,color-mix(in srgb,var(--cy-accent-2) 10%,transparent),transparent);animation:gx-sweep 7s linear infinite}
.gx-copy {position:relative;max-width:620px}
.gx-copy .coming {display:inline-block;margin:0 0 14px;padding:5px 9px;background:rgba(5,1,10,.85);border:1px solid var(--cy-accent)}
.gx-copy .lede {margin:16px 0 0;color:var(--ink);text-shadow:0 1px 2px #000}
/* cyber.css :root :is(.city .lede) sets color to --muted (#9aa0c8). Brighten the City hero lede only; 18.7:1 on the hero, well above WCAG AA 4.5:1. */
:root body.city .gx-copy .lede {color:#f8f1e6}
.gx-copy .actions {margin-top:22px}
.gx-logo {display:block;margin:0;line-height:0}
.gx-logo img {width:min(560px,82vw);height:auto;filter:drop-shadow(0 0 14px color-mix(in srgb,var(--cy-accent) 45%,transparent))}
.gx-tools {position:absolute;top:18px;right:max(18px,3vw);z-index:2;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.gx-sfx {font:500 11px/1 var(--cy-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cy-accent-2);background:rgba(5,1,10,.85);border:1px solid var(--cy-accent-2);padding:9px 12px;min-height:36px;cursor:pointer}
.gx-sfx[aria-pressed="true"] {color:#05010a;background:var(--cy-accent-2)}
/* Aeon: Kanna + strays */
.gx-subject {right:max(2vw,calc(50% - 700px));bottom:0;height:94%}
.gx-subject img {height:100%;width:auto;filter:drop-shadow(0 0 24px rgba(255,62,184,.35))}
.gx-mobs {inset:0}
.gx-mobs img {position:absolute;width:auto;height:84px;image-rendering:pixelated;animation:gx-bob 3.4s ease-in-out infinite alternate;opacity:.9}
.gx-mobs img:nth-child(1) {left:52%;top:22%;height:66px}
.gx-mobs img:nth-child(2) {left:46%;top:58%;animation-delay:-1s}
.gx-mobs img:nth-child(3) {left:62%;top:12%;height:60px;animation-delay:-2s}
.gx-mobs img:nth-child(4) {left:40%;top:30%;height:54px;animation-delay:-.5s}
/* Fickle: floating card backs */
.gx-fly {inset:0}
.gx-fly img {position:absolute;width:clamp(56px,6vw,96px);height:auto;border-radius:6px;box-shadow:0 0 18px rgba(142,231,242,.35);animation:gx-float 6s ease-in-out infinite alternate}
.gx-fly img:nth-child(1) {left:30%;top:16%;--r:-14deg}
.gx-fly img:nth-child(2) {left:38%;top:9%;--r:10deg;animation-delay:-2s}
.gx-fly img:nth-child(3) {left:27%;top:44%;--r:8deg;animation-delay:-4s}
.gx-fly img:nth-child(4) {left:41%;top:36%;--r:-6deg;animation-delay:-1s}
/* City: title-free splash mid layer; the logo is its own parallax layer in .gx-copy */
.gx-mid {inset:-12px}
.gx-mid img {width:100%;height:100%;object-fit:cover;mix-blend-mode:lighten;-webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 45%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 70% 80% at 50% 45%,#000 55%,transparent 100%)}
.gx-layer-logo {margin:0 0 6px;will-change:transform}
.gx-hero.gx-flick {animation:gx-flick .7s steps(1,end)}
.gx-geiger {display:grid;gap:6px;justify-items:end;font-family:var(--cy-mono);color:var(--cy-accent);background:rgba(20,12,4,.9);border:1px solid var(--cy-accent-2);padding:10px 12px;box-shadow:0 0 18px color-mix(in srgb,var(--cy-accent) 25%,transparent)}
.gx-geiger small {font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cy-accent-2)}
.gx-lcd {font:700 26px/1 var(--cy-mono);letter-spacing:.06em;min-width:7.2ch;text-align:right;text-shadow:0 0 10px var(--cy-accent);animation:gx-lcd 3.2s steps(1,end) infinite}
.gx-geiger button {font:500 10px/1 var(--cy-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cy-accent);background:transparent;border:1px dashed var(--cy-accent-2);padding:8px 10px;cursor:pointer}
/* Logo glitch (one shot on load and on hover) */
.gx-glitching img {animation:gx-glitch .3s steps(2,end)}

/* ---------- Page sections ---------- */
.gx-main {width:min(1120px,calc(100% - 36px));margin:0 auto;padding:56px 0 80px;display:grid;gap:64px}
.gx-main > *,.gx-sec {min-width:0}
.gx-sec > h2 {margin:0 0 6px;font-size:20px;letter-spacing:.08em}
.gx-sec > .gx-sub {margin:0 0 18px;color:var(--muted);font-family:var(--cy-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
/* Trailer facade */
.gx-video {position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--cy-accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--cy-accent-2) 60%,transparent),0 0 40px color-mix(in srgb,var(--cy-accent) 22%,transparent);overflow:hidden}
.gx-video img,.gx-video video {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.gx-video video {object-fit:contain}
.gx-play {position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;color:var(--ink);text-decoration:none;background:radial-gradient(circle at center,rgba(5,1,10,.25),rgba(5,1,10,.6));font:700 14px/1.2 var(--cy-body);letter-spacing:.14em;text-transform:uppercase}
.gx-play::before {content:"";width:88px;height:88px;border-radius:50%;border:2px solid var(--cy-accent);background:rgba(5,1,10,.7) conic-gradient(from 90deg at 58% 50%,transparent 0 30deg,var(--cy-accent) 30deg 150deg,transparent 150deg) no-repeat center/34px 34px;box-shadow:0 0 30px color-mix(in srgb,var(--cy-accent) 60%,transparent);clip-path:none}
.gx-play:hover::before,.gx-play:focus-visible::before {background-color:color-mix(in srgb,var(--cy-accent) 25%,#05010a)}
.gx-play span {padding:4px 10px;background:rgba(5,1,10,.8)}
.gx-playing .gx-play,.gx-playing picture {display:none}
/* Screenshot strip */
.gx-strip {list-style:none;margin:0;padding:6px 6px 16px;display:grid;grid-auto-flow:column;grid-auto-columns:min(340px,74vw);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-color:var(--cy-accent) transparent}
.gx-strip li {scroll-snap-align:start;margin:0}
.gx-strip figure {margin:0}
.gx-strip figcaption {margin-top:8px;font:400 11px/1.4 var(--cy-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.gx-thumb {position:relative;display:block;width:100%;padding:0;border:1px solid var(--line);background:#000;cursor:zoom-in;overflow:hidden;line-height:0}
.gx-thumb img {width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.gx-thumb:hover {border-color:var(--cy-accent)}
/* Lightbox */
.gx-lb {width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(5,1,10,.97);color:var(--ink);overflow:hidden}
.gx-lb[open] {display:grid;grid-template-rows:1fr auto;place-items:center;animation:gx-fade .18s ease-out}
.gx-lb::backdrop {background:rgba(0,0,0,.7)}
.gx-lb-stage {display:grid;place-items:center;width:100%;height:100%;padding:56px 72px 0;touch-action:pan-y}
.gx-lb-stage img {max-width:min(1600px,100%);max-height:calc(100dvh - 140px);width:auto;height:auto;border:1px solid var(--cy-accent);box-shadow:0 0 40px color-mix(in srgb,var(--cy-accent) 25%,transparent)}
.gx-lb p {margin:0;padding:14px 20px 22px;font:400 13px/1.4 var(--cy-mono);letter-spacing:.08em;text-align:center}
.gx-lb-n {color:var(--cy-accent);margin-right:12px}
.gx-lb button {position:absolute;font:700 13px/1 var(--cy-body);letter-spacing:.1em;text-transform:uppercase;color:var(--cy-accent);background:rgba(5,1,10,.85);border:1px solid var(--cy-accent);min-width:48px;min-height:48px;padding:0 14px;cursor:pointer}
.gx-lb-x {top:12px;right:12px}
.gx-lb-p,.gx-lb-nx {top:50%;transform:translateY(-50%);font-size:22px}
.gx-lb-p {left:12px}
.gx-lb-nx {right:12px}
/* Feature panels */
.gx-panels {display:grid;gap:48px}
.gx-panel {display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:center}
.gx-panel:nth-of-type(even) .gx-panel-art {order:2}
.gx-panel-art {position:relative;margin:0;border:1px solid var(--cy-accent);box-shadow:10px 10px 0 color-mix(in srgb,var(--cy-accent-2) 35%,transparent);overflow:hidden;line-height:0;background:#000}
.gx-panel-art img {width:100%;height:auto}
.gx-panel-art figcaption {position:absolute;left:0;bottom:0;padding:6px 10px;background:rgba(5,1,10,.85);font:400 11px/1.3 var(--cy-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cy-accent-2)}
.gx-panel h3 {margin:0 0 10px;font-family:var(--cy-display);font-size:clamp(20px,2.4vw,28px);text-transform:uppercase;letter-spacing:.02em;color:var(--ink)}
.gx-panel p {margin:0;color:var(--muted);font-size:18px}
.gx-panel p + p {margin-top:10px}
.gx-js .gx-reveal > * {transition:opacity .6s ease,transform .6s ease,clip-path .7s ease}
.gx-js .gx-reveal > :nth-child(2) {transition-delay:.12s}
.gx-js .gx-reveal:not(.in) > * {opacity:0;transform:translateY(28px)}
.gx-js .gx-reveal:not(.in) > .gx-panel-art {clip-path:inset(0 100% 0 0)}
.gx-reveal.in > .gx-panel-art {clip-path:inset(0)}
/* Fickle commanders */
.gx-cmds {list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.gx-cmds figure {position:relative;margin:0;border:1px solid var(--line);background:#000;line-height:0}
.gx-cmds img {width:100%;height:auto}
.gx-cmds figcaption {position:absolute;left:0;right:0;bottom:0;padding:5px 8px;background:linear-gradient(transparent,rgba(5,1,10,.9));font:400 10px/1.3 var(--cy-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cy-accent)}
/* Record block */
.gx-record {display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.gx-record .readout,.gx-record .report {margin:0}
.gx-record :is(.readout,.report) {display:grid;grid-template-columns:140px 1fr;gap:8px 16px}
.gx-record .report > div {display:contents}
.gx-record :is(dt,dd) {margin:0}
.gx-record ul {list-style:none;padding:0;margin:12px 0 0;display:grid;gap:10px}
.gx-record li .btn {margin-left:8px}
.gx-card-face {background:var(--cy-card);border:1px solid var(--line);padding:22px}
.gx-card-face h2 {margin:0 0 12px;font-size:14px;letter-spacing:.12em}
.gx-card-face p {color:var(--muted)}

/* ---------- Easter eggs ---------- */
.gx-egg {position:relative}
/* Aeon: tower radio */
.gx-term {position:relative;display:grid;grid-template-columns:auto 1fr;gap:18px 26px;align-items:center;padding:22px 24px 22px 92px;background:#1d0b3e;border:2px solid #7ef6ff;box-shadow:8px 8px 0 #ff2ea6;color:#7ef6ff;font-family:"Silkscreen",var(--cy-mono);overflow:hidden}
.gx-term::before {content:"";position:absolute;left:24px;top:0;bottom:0;width:30px;background:repeating-linear-gradient(to bottom,transparent 0 22px,#ff7ad6 22px 25px,transparent 25px 32px);box-shadow:10px 0 0 rgba(126,246,255,.25)}
.gx-floor {margin:0;font-size:12px;letter-spacing:.08em;grid-column:1 / -1}
.gx-floor b {font-size:28px;font-weight:400;color:#ff7ad6;margin-left:8px}
.gx-tune {font:400 13px/1 "Silkscreen",var(--cy-mono);color:#1d0b3e;background:#7ef6ff;border:0;padding:12px 16px;min-height:44px;cursor:pointer;box-shadow:4px 4px 0 #ff2ea6}
.gx-out {margin:0;min-height:2.8em;font-size:15px;line-height:1.5;color:#e9fdff}
.gx-out::after {content:"_";margin-left:2px;animation:gx-blink 1s steps(1,end) infinite}
.gx-pop {position:absolute;left:30px;bottom:12px;width:72px;height:auto;image-rendering:pixelated;opacity:0;pointer-events:none}
.gx-pop.on {animation:gx-pop 1.9s ease-out forwards}
/* Fickle: loyalty dice */
.gx-table {display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;padding:24px;background:linear-gradient(135deg,#0a1a24,#08111a);border:1px solid var(--cy-accent-2);box-shadow:0 0 30px color-mix(in srgb,var(--cy-accent-2) 20%,transparent)}
.gx-side {display:grid;justify-items:center;gap:10px;font:400 11px/1.2 var(--cy-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cy-accent)}
.gx-die {position:relative;width:64px;height:64px;perspective:400px}
.gx-cube {position:absolute;inset:0;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.gx-face {position:absolute;inset:0;display:grid;grid-template:repeat(3,1fr) / repeat(3,1fr);padding:9px;border-radius:10px;background:linear-gradient(135deg,#f4f7fb 0%,#9aa9ba 42%,#e7edf3 58%,#5d6b7c 100%);box-shadow:inset 0 0 0 2px rgba(255,255,255,.5),inset 0 0 12px rgba(0,0,0,.35);backface-visibility:hidden}
.gx-face i {width:10px;height:10px;margin:auto;border-radius:50%;background:#101820;box-shadow:inset 0 1px 2px #000,0 0 6px rgba(142,231,242,.6)}
.gx-f1 {transform:translateZ(32px)}
.gx-f6 {transform:rotateY(180deg) translateZ(32px)}
.gx-f2 {transform:rotateY(90deg) translateZ(32px)}
.gx-f5 {transform:rotateY(-90deg) translateZ(32px)}
.gx-f3 {transform:rotateX(90deg) translateZ(32px)}
.gx-f4 {transform:rotateX(-90deg) translateZ(32px)}
.gx-mid-col {display:grid;gap:12px;text-align:center}
.gx-meter {height:12px;border:1px solid var(--cy-accent);background:#05101a;overflow:hidden}
.gx-meter i {display:block;height:100%;width:var(--lv,60%);background:linear-gradient(90deg,var(--cy-accent-2),var(--cy-accent));box-shadow:0 0 12px var(--cy-accent-2);transition:width .6s ease}
.gx-verdict {margin:0;font:700 clamp(20px,3vw,30px)/1 var(--cy-display);letter-spacing:.08em;color:var(--ink)}
.gx-roll-row {display:flex;justify-content:center}
.gx-rival {position:relative;width:84px;aspect-ratio:480/680;perspective:600px}
.gx-rival-in {position:absolute;inset:0;transform-style:preserve-3d;transition:transform .6s ease}
.gx-rival-in > * {position:absolute;inset:0;backface-visibility:hidden;border-radius:6px;overflow:hidden}
.gx-rival-in img {width:100%;height:100%;object-fit:cover}
.gx-rival-back {display:grid;place-items:center;transform:rotateY(180deg);background:radial-gradient(circle,color-mix(in srgb,var(--cy-accent-2) 40%,#05101a),#05101a);border:1px solid var(--cy-accent-2)}
.gx-rival-back img {width:70%;height:auto}
.gx-defected .gx-rival-in {transform:translateX(calc(-1 * var(--slide,0px))) rotateY(180deg)}
/* ---------- Cards (homepage #games and /games/) ---------- */
.gx-grid {list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:2fr 1fr;gap:16px}
.gx-grid > :first-child {grid-row:span 2}
.gx-card {position:relative;display:flex;flex-direction:column;min-width:0;background:var(--cy-card);border:1px solid color-mix(in srgb,var(--cy-accent) 55%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--cy-accent-2) 18%,transparent),0 0 26px color-mix(in srgb,var(--cy-accent) 18%,transparent);overflow:hidden;transition:border-color .15s,box-shadow .15s}
.gx-card:is(:hover,:focus-within) {border-color:var(--cy-accent);box-shadow:0 0 0 1px var(--cy-accent-2),0 0 36px color-mix(in srgb,var(--cy-accent) 40%,transparent)}
.gx-card::before {content:"";position:absolute;left:0;right:0;top:0;height:30%;z-index:3;pointer-events:none;opacity:0;background:linear-gradient(transparent,color-mix(in srgb,var(--cy-accent) 35%,transparent),transparent)}
.gx-card:focus-within::before {animation:gx-sweep-card .9s ease-out}
.gx-card-art {display:block;flex:none;overflow:hidden;background:#05010a;line-height:0}
.gx-card-art img {width:100%;height:auto;aspect-ratio:920/430;object-fit:cover}
.gx-card:hover .gx-card-art img {animation:gx-drift 7s ease-in-out infinite alternate}
.gx-card-body {display:flex;flex:1 1 auto;flex-direction:column;gap:6px;padding:16px 18px 18px}
.gx-card-body :is(h2,h3) {margin:0;font-family:var(--cy-body);font-size:24px;font-weight:700;text-transform:none;letter-spacing:.01em}
.gx-card-body :is(h2,h3) a {color:var(--ink);text-decoration:none}
.gx-card-body :is(h2,h3) a:hover {color:var(--cy-accent)}
.gx-card-body p {margin:0;color:var(--muted)}
.gx-card-body .soon,.gx-card-body .coming {color:var(--cy-accent)}
.gx-stretch::after {content:"";position:absolute;inset:0;z-index:1}
.gx-card-actions {position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:10px}
.gx-card-actions .btn {position:relative;z-index:2}
.gx-mini {position:relative;z-index:2;display:flex;gap:8px;margin-top:8px}
.gx-mini a {display:block;width:96px;line-height:0;border:1px solid var(--line)}
.gx-mini a:hover {border-color:var(--cy-accent)}
.gx-mini img {width:100%;height:auto}
.gx-grid > :first-child .gx-mini a {flex:1 1 0;width:auto;max-width:220px}
.gx-index .gx-grid {grid-template-columns:3fr 2fr;gap:20px}
.gx-index .gx-card-body :is(h2,h3) {font-size:28px}
/* Tilt + glare (enabled by JS only for fine pointers without reduced motion) */
.gx-tilt-on {transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease}
.gx-tilt-on::after {content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.2),transparent 55%)}
.gx-tilting {transition:transform .06s linear}
.gx-tilting::after {opacity:1}
/* ---------- Support / privacy banner ---------- */
.gx-banner {position:relative;z-index:1;height:160px;overflow:hidden;border-bottom:1px solid var(--cy-accent);box-shadow:0 1px 30px color-mix(in srgb,var(--cy-accent) 30%,transparent);background:#05010a}
.gx-banner picture img {width:100%;height:100%;object-fit:cover}
.gx-banner::after {content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.2) 0 1px,transparent 1px 4px),linear-gradient(90deg,rgba(5,1,10,.75),rgba(5,1,10,.1) 60%)}
.gx-banner .gx-mark {position:absolute;z-index:1;left:max(16px,calc(50% - 37ch));bottom:18px;width:auto;height:52px;filter:drop-shadow(0 0 12px color-mix(in srgb,var(--cy-accent) 60%,transparent))}

/* ---------- Keyframes ---------- */
@keyframes gx-sweep {from {transform:translateY(-100%)} to {transform:translateY(560%)}}
@keyframes gx-sweep-card {0% {opacity:1;transform:translateY(-100%)} 100% {opacity:0;transform:translateY(340%)}}
@keyframes gx-drift {from {transform:scale(1.03) translate(-1%,0)} to {transform:scale(1.08) translate(1%,-1.5%)}}
@keyframes gx-bob {from {transform:translateY(-6px)} to {transform:translateY(6px)}}
@keyframes gx-float {from {transform:translateY(-8px) rotate(var(--r,0deg))} to {transform:translateY(10px) rotate(calc(var(--r,0deg) * -.6))}}
@keyframes gx-glitch {
  0% {clip-path:inset(10% 0 62% 0);transform:translate(-6px,0);filter:drop-shadow(-4px 0 #00f0ff) drop-shadow(4px 0 #ff2bd6)}
  33% {clip-path:inset(54% 0 14% 0);transform:translate(6px,0);filter:drop-shadow(4px 0 #00f0ff) drop-shadow(-4px 0 #ff2bd6)}
  66% {clip-path:inset(28% 0 36% 0);transform:translate(-3px,0);filter:drop-shadow(-2px 0 #00f0ff) drop-shadow(2px 0 #ff2bd6)}
  100% {clip-path:inset(0);transform:none}
}
@keyframes gx-flick {0%,30%,60% {filter:brightness(1.6) contrast(1.3)} 15%,45%,80% {filter:brightness(.35)} 100% {filter:none}}
@keyframes gx-lcd {0%,100% {opacity:1} 47% {opacity:.78} 49% {opacity:1} 83% {opacity:.86}}
@keyframes gx-blink {50% {opacity:0}}
@keyframes gx-pop {0% {opacity:0;transform:translate(-30px,0) scale(.6)} 25% {opacity:1;transform:translate(10px,-30px) scale(1)} 70% {opacity:1;transform:translate(26px,-40px)} 100% {opacity:0;transform:translate(40px,-20px)}}
@keyframes gx-fade {from {opacity:0} to {opacity:1}}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .gx-panel,.gx-record {grid-template-columns:1fr;gap:18px}
  .gx-panel:nth-of-type(even) .gx-panel-art {order:0}
  .gx-cmds {grid-template-columns:repeat(3,1fr)}
  .gx-grid,.gx-index .gx-grid {grid-template-columns:1fr}
  .gx-grid > :first-child {grid-row:auto}
}
@media (max-width: 700px) {
  .gx-hero {min-height:70vh;padding:84px 18px 30px}
  .gx-scrim {background:linear-gradient(0deg,rgba(5,1,10,.94) 0,rgba(5,1,10,.75) 45%,rgba(5,1,10,.1) 80%)}
  .gx-subject {right:-6%;top:44px;bottom:auto;height:52%}
  .gx-mobs img {height:48px}
  .gx-mid {inset:44px -8px auto}
  .gx-mid img {height:auto;aspect-ratio:16/9}
  .gx-fly img:nth-child(n+3) {display:none}
  .gx-fly img:nth-child(1) {left:4%;top:12%}
  .gx-fly img:nth-child(2) {left:78%;top:8%}
  .gx-logo img {width:min(360px,86vw)}
  .gx-tools {top:10px;right:12px}
  .gx-lcd {font-size:20px}
  .gx-main {padding-top:40px;gap:52px}
  .gx-lb-stage {padding:60px 8px 0}
  .gx-lb-p,.gx-lb-nx {top:auto;bottom:12px;transform:none}
  .gx-term {grid-template-columns:1fr;padding-left:72px}
  .gx-table {grid-template-columns:1fr 1fr;gap:16px}
  .gx-mid-col {grid-column:1 / -1;order:3}
  .gx-record :is(.readout,.report) {grid-template-columns:1fr;gap:2px}
  .gx-banner {height:96px}
  .gx-banner .gx-mark {height:32px;bottom:12px}
  .gx-mini a {width:84px}
}

/* ---------- Reduced motion: nothing moves on its own ---------- */
@media (prefers-reduced-motion: reduce) {
  .gx-scan::after,.gx-mobs img,.gx-fly img,.gx-lcd,.gx-out::after,.gx-card:hover .gx-card-art img,.gx-card:focus-within::before,.gx-glitching img,.gx-hero.gx-flick,.gx-pop.on,.gx-lb[open] {animation:none !important}
  .gx-cube,.gx-rival-in,.gx-meter i,.gx-card,.gx-js .gx-reveal > * {transition:none !important}
  .gx-js .gx-reveal:not(.in) > * {opacity:1;transform:none;clip-path:none}
  .gx-fly img {transform:none}
}
/* cyber.js gives main h1 .cy-glitch (position:relative); keep the visually hidden h1 hidden. */
.u-hidden.cy-glitch {position:absolute}
.gx-copy h1:not(.u-hidden) {margin:0;font-size:clamp(30px,5vw,56px);line-height:1.05;text-shadow:0 0 20px color-mix(in srgb,var(--cy-accent) 50%,transparent)}
.gx-fickle-bg img {object-position:62% 50%}
@media (max-width: 700px) {.gx-fickle-bg img {object-position:50% 50%}}
.gx-record:has(> :only-child) {grid-template-columns:1fr}
/* .btn sets display:inline-flex; keep JS-only controls hidden until games-fx.js reveals them. */
:is(.gx-hero,.gx-main) [hidden] {display:none !important}