/* XPshare Games v4 — arcade A/B landing + compact signed-in home. Preview branch only. */
html.xp-games{--gh-bg:#07080f;--gh-card:#14182a;--gh-ink:#f4f6ff;--gh-muted:#9aa3c0;--gh-pur:#a56bff;--gh-pur2:#7a3fe6;--gh-pur3:#4b209e;--gh-cyan:#5ee6ff;--gh-ok:#3ddea0;background:var(--gh-bg);color:var(--gh-ink)}
html.xp-games body{background:var(--gh-bg);color:var(--gh-ink);min-height:100%}
html.xp-games-lock,html.xp-games-lock body{height:100%;max-height:100dvh;overflow:hidden!important;overscroll-behavior:none;touch-action:manipulation;margin:0}
html.xp-games body>header{background:rgba(10,11,18,.85);backdrop-filter:blur(12px);border-bottom:1px solid #ffffff10;position:fixed;top:0;left:0;right:0;z-index:40;min-height:48px;box-sizing:border-box}
html.xp-games-lock #app{position:fixed!important;inset:48px 0 0 0!important;width:100%!important;max-width:none!important;margin:0!important;height:auto!important;overflow:hidden!important}
html.xp-games body>header .logo .wm,
html.xp-games body>header .logo .wm-2l,
html.xp-games body>header .logo .wm-2l img{display:none!important}
html.xp-games body>header .logo{gap:0;align-items:center;text-decoration:none}
html.xp-games body>header .logo::after{content:none!important;display:none!important}
/* Locked logo A: emblem + XPSHARE GAMES side wordmark */
html.xp-games body>header .logo-icon{display:none!important}
html.xp-games body>header .logo .gh-side{display:block;height:34px;width:auto;max-width:min(220px,58vw);image-rendering:pixelated;image-rendering:crisp-edges}
html.xp-games body>header .logo:not(.gh-locked) .logo-icon{display:block!important;width:32px;height:32px;border-radius:9px;box-shadow:0 0 0 1.5px #ffffff22;background:center/cover no-repeat url(/gameshome/logo.png?v=4)!important}
html.xp-games body>header .logo:not(.gh-locked)::after{content:"XPshare Games";display:inline;font:700 17px/1 "Pixelify Sans",system-ui}
html.xp-games body>footer{display:none!important} /* Games preview: no trader footer chrome */
html.xp-games #app{max-width:1100px;margin:0 auto}
html.xp-games:not(.xp-landing) #app{width:100%;max-width:1100px;margin:0 auto;padding-top:56px;box-sizing:border-box}
html.xp-games:not(.xp-landing) body>header{position:fixed}

html.xp-games .theme-bar,html.xp-games #theme-bar,html.xp-games .navmenu{display:none!important}
html.xp-landing #app{min-height:0}
html.xp-landing body>header .hrider,html.xp-landing body>header .acct,html.xp-landing body>header .alerts,html.xp-landing body>header .bell{display:none!important}

.gh-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px 22px;border-radius:16px;border:0;cursor:pointer;font:700 17px/1 "Pixelify Sans",system-ui;text-decoration:none;color:#fff;-webkit-tap-highlight-color:transparent}
.gh-btn:active{transform:translateY(2px)}
.gh-btn-pur{background:linear-gradient(180deg,var(--gh-pur),var(--gh-pur2));box-shadow:0 5px 0 var(--gh-pur3),0 12px 28px #a56bff44}
.gh-btn-ghost{background:#1c2033cc;color:#fff;box-shadow:inset 0 0 0 1.5px #ffffff28}
.gh-tag{display:inline-block;font:700 9px/1 "Press Start 2P",monospace;letter-spacing:.5px;padding:7px 9px;border-radius:9px;background:#000a;color:var(--gh-cyan);box-shadow:inset 0 0 0 1px #5ee6ff55}

/* ===== LANDING v3: fills one viewport, one CTA ===== */
.gl.gl3{position:absolute;inset:0;width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}
.gl-stage{position:relative;flex:1;min-height:0;margin:0;border-radius:0;overflow:hidden;background:#000}
.gl-stage .gl-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55) saturate(1.15)}
.gl-stage .gl-veil{position:absolute;inset:0;background:
  radial-gradient(80% 60% at 50% 40%,#0a0b1200 0%,#0a0b12cc 70%,#0a0b12 100%),
  linear-gradient(180deg,#0a0b1266 0%,#0a0b1200 30%,#0a0b12ee 88%,#0a0b12)}
.gl-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px 18px 20px;gap:0}
.gl-center .gh-tag{margin-bottom:10px}
.gl-center h1{font:700 28px/1.05 "Pixelify Sans",system-ui;text-shadow:0 2px 0 #000c,0 8px 24px #000a;max-width:14ch;margin:0}
.gl-center > p{margin:10px 0 0;font:600 14px/1.35 system-ui;color:#d7dcf0;max-width:34ch;text-shadow:0 1px 0 #000a}
.gl-previews{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(360px,100%);margin:16px 0 18px}
.gl-prev{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:1.15;background:var(--gh-card);box-shadow:0 0 0 1.5px #ffffff18,0 6px 0 #0006}
.gl-prev img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.gl-prev::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 35%,#0a0b12f0 95%)}
.gl-prev b{position:absolute;left:4px;right:4px;bottom:8px;z-index:1;font:700 11px/1.1 "Pixelify Sans",system-ui;text-shadow:0 1px 0 #000;text-align:center}
.gl-cta{min-width:min(280px,86vw);margin:0;font-size:18px}
.gl-si{margin-top:12px;font:600 13px/1.3 system-ui;color:#c9d0e8cc;text-decoration:underline;text-underline-offset:3px}
.gl-si:active{color:#fff}
@media (min-width:900px){
  html.xp-landing #app{max-width:none}
  .gl-center h1{font-size:44px;max-width:16ch}
  .gl-center > p{font-size:16px;max-width:42ch}
  .gl-previews{width:480px;gap:12px;margin:22px 0 24px}
  .gl-prev{border-radius:16px}
  .gl-cta{min-width:320px;min-height:56px;font-size:20px}
}
@media (max-height:700px){
  .gl-center h1{font-size:24px}
  .gl-center > p{font-size:13px;margin-top:6px}
  .gl-previews{margin:10px 0 12px;width:min(300px,100%)}
  .gl-cta{min-height:46px}
}



/* ===== LANDING v4: arcade composites A/B, locked logo ===== */
.gl.gl4{position:absolute;inset:0;width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}
.gl4 .gl-stage{position:relative;flex:1;min-height:0;margin:0;border-radius:0;overflow:hidden;background:#05060c}
.gl4 .gl-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;filter:brightness(.58) saturate(1.3) contrast(1.08)}
.gl4 .gl-bg-desk{display:none}
.gl4 .gl-veil{position:absolute;inset:0;background:
  radial-gradient(55% 42% at 50% 38%,#05060cee 0%,#05060cbb 42%,#05060c55 70%,#05060c00 100%),
  radial-gradient(80% 60% at 50% 40%,#0a0b1200 0%,#0a0b12aa 68%,#05060cf5 100%),
  linear-gradient(180deg,#05060caa 0%,#05060c33 18%,#05060c00 32%,#05060ccc 72%,#05060c)}
.gl4 .gl-spark{pointer-events:none;position:absolute;inset:0;background:
  radial-gradient(2px 2px at 20% 30%,#fff8,transparent 40%),
  radial-gradient(2px 2px at 70% 18%,#5ee6ffaa,transparent 40%),
  radial-gradient(1.5px 1.5px at 82% 55%,#ff9ad8aa,transparent 40%),
  radial-gradient(2px 2px at 35% 70%,#ffd75e88,transparent 40%);
  mix-blend-mode:screen;opacity:.55;animation:gh-twinkle 3.6s ease-in-out infinite alternate}
@keyframes gh-twinkle{from{opacity:.35}to{opacity:.7}}
@media (prefers-reduced-motion:reduce){.gl4 .gl-spark{animation:none;opacity:.45}}
.gl4 .gl-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:14px 16px 18px;gap:0}
.gl4 .gl-center .gh-tag{margin-bottom:10px;box-shadow:inset 0 0 0 1px #5ee6ff88,0 0 18px #5ee6ff33}
.gl4 .gl-center h1{font:700 27px/1.05 "Pixelify Sans",system-ui;text-shadow:0 2px 0 #000c,0 0 24px #a56bff66,0 8px 28px #000a;max-width:15ch;margin:0;letter-spacing:-.3px}
.gl4 .gl-center > p{margin:10px 0 0;font:600 13.5px/1.35 system-ui;color:#e4e8fb;max-width:34ch;text-shadow:0 1px 0 #000a}
.gl4 .gl-previews{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(360px,100%);margin:14px 0 16px}
.gl4 .gl-prev{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:1.15;background:#121526;box-shadow:0 0 0 1.5px #ffffff22,0 0 18px #a56bff33,0 6px 0 #0006;transform:translateZ(0)}
.gl4 .gl-prev img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.gl4 .gl-prev::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 30%,#0a0b12f2 96%)}
.gl4 .gl-prev b{position:absolute;left:4px;right:4px;bottom:8px;z-index:1;font:700 12px/1.1 "Pixelify Sans",system-ui;text-shadow:0 1px 0 #000,0 0 10px #000;text-align:center}
.gl4 .gl-cta{min-width:min(280px,86vw);margin:0;font-size:18px;box-shadow:0 5px 0 var(--gh-pur3),0 0 28px #a56bff66,0 12px 28px #a56bff44}
.gl4 .gl-si{margin-top:11px;font:600 13px/1.3 system-ui;color:#c9d0e8cc;text-decoration:underline;text-underline-offset:3px}
.gl4 .gl-switch{display:flex;gap:8px;margin-top:14px;opacity:.85}
.gl4 .gl-sw{font:700 10px/1 "Press Start 2P",monospace;padding:7px 9px;border-radius:999px;color:#9aa3c0;background:#121526aa;box-shadow:inset 0 0 0 1px #ffffff18;text-decoration:none}
.gl4 .gl-sw.on{color:#0a0b12;background:linear-gradient(180deg,#7af0ff,#2fc4e0);box-shadow:0 2px 0 #176a7c}
.gl4.gl-b .gh-btn-pur{background:linear-gradient(180deg,#ff7ad2,#c43f9a);box-shadow:0 5px 0 #7a2060,0 0 28px #ff7ad266,0 12px 28px #ff7ad244}
.gl4.gl-b .gh-tag{color:#ffb3e0;box-shadow:inset 0 0 0 1px #ff7ad288,0 0 18px #ff7ad233}
@media (min-width:900px){
  .gl4 .gl-bg-phone{display:none}
  .gl4 .gl-bg-desk{display:block}
  .gl4 .gl-center h1{font-size:44px;max-width:16ch}
  .gl4 .gl-center > p{font-size:16px;max-width:42ch}
  .gl4 .gl-previews{width:480px;gap:12px;margin:20px 0 22px}
  .gl4 .gl-cta{min-width:320px;min-height:56px;font-size:20px}
  .gl4 .gl-center{padding:20px}
}
@media (max-height:700px){
  .gl4 .gl-center h1{font-size:22px}
  .gl4 .gl-center > p{font-size:12.5px;margin-top:6px}
  .gl4 .gl-previews{margin:8px 0 10px;width:min(300px,100%)}
  .gl4 .gl-cta{min-height:46px}
  .gl4 .gl-switch{margin-top:8px}
}
/* ===== SIGNED-IN HOME v3: one viewport, dense ===== */
.fh.gh2{height:calc(100dvh - 52px);max-height:calc(100dvh - 52px);overflow:hidden;display:flex;flex-direction:column;padding:0;color:var(--gh-ink)}
.fh.gh2 .gh-hi{margin:6px 12px 0;display:flex;align-items:center;gap:8px;flex:none}
.fh.gh2 .gh-hi b{font:700 14px/1 "Pixelify Sans",system-ui}
.fh.gh2 .gh-hi .gh-chip{font:700 10px/1 system-ui;padding:5px 8px;border-radius:999px;background:#1c2033;color:var(--gh-muted);box-shadow:inset 0 0 0 1px #ffffff14}
.fh.gh2 .gh-hero{position:relative;margin:6px 10px 0;border-radius:16px;overflow:hidden;flex:0 0 auto;height:28%;min-height:120px;max-height:180px;box-shadow:0 0 0 1.5px #ffffff14,0 10px 24px #0008;background:#000}
.fh.gh2 .gh-hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.7) saturate(1.1)}
.fh.gh2 .gh-hero .veil{position:absolute;inset:0;background:linear-gradient(180deg,#0a0b1200 10%,#0a0b12ee 88%,#0a0b12),linear-gradient(90deg,#0a0b12aa 0%,transparent 45%)}
.fh.gh2 .gh-hero .copy{position:absolute;left:12px;right:12px;bottom:10px}
.fh.gh2 .gh-hero h1{font:700 18px/1.05 "Pixelify Sans",system-ui;text-shadow:0 2px 0 #000c;margin:4px 0 0;max-width:18ch}
.fh.gh2 .gh-hero p{display:none} /* tight: tag + title + CTA only */
.fh.gh2 .gh-hero .row{display:flex;gap:8px;margin-top:8px}
.fh.gh2 .gh-hero .gh-btn{min-height:36px;padding:8px 12px;font-size:13px;border-radius:12px}
.fh.gh2 .gh-wrap{flex:1;min-height:0;padding:6px 10px 8px;display:flex;flex-direction:column;overflow:hidden}
.fh.gh2 .gh-sec{display:flex;align-items:end;justify-content:space-between;margin:4px 2px 6px;flex:none}
.fh.gh2 .gh-sec h2{font:700 15px/1 "Pixelify Sans",system-ui;margin:0}
.fh.gh2 .gh-sec span{font:600 11px/1 system-ui;color:var(--gh-muted)}
.fh.gh2 .gh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;flex:1;min-height:0;align-content:stretch}
.fh.gh2 .gh-tile{position:relative;border-radius:12px;overflow:hidden;background:var(--gh-card);box-shadow:0 0 0 1.5px #ffffff12,0 4px 0 #0005;min-height:0;text-decoration:none;color:inherit;display:block}
.fh.gh2 .gh-tile.wide{grid-column:1/-1} /* still one row tall in dense grid — override */
.fh.gh2 .gh-tile.wide{grid-column:span 2}
.fh.gh2 .gh-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fh.gh2 .gh-tile .sh{position:absolute;inset:0;background:linear-gradient(180deg,#0000 20%,#0a0b12f5 92%)}
.fh.gh2 .gh-tile .go{display:none}
.fh.gh2 .gh-tile .meta{position:absolute;left:7px;right:7px;bottom:7px}
.fh.gh2 .gh-tile .gh-tag{font-size:7px;padding:4px 5px;margin:0}
.fh.gh2 .gh-tile h3{font:700 12px/1.05 "Pixelify Sans",system-ui;text-shadow:0 1px 0 #000;margin:4px 0 0}
.fh.gh2 .gh-tile p{display:none}
.fh.gh2 .gh-friends{display:none} /* keep friends in online pane only to save space */
.fh.gh2 .gh-onpane{flex:none;margin-top:6px;padding:8px 10px;border-radius:12px;background:#121526;box-shadow:0 0 0 1.5px #ffffff10;max-height:22%;overflow:hidden}
.fh.gh2 .gh-onpane .fh-h{font:700 13px/1 "Pixelify Sans",system-ui;margin:0 0 4px}
.fh.gh2 .fh-onw,.fh.gh2 .gh-more,.fh.gh2 .gh-foot,.fh.gh2 .gh-sec:has(+ .gh-more){display:none!important}
.fh.gh2 .fh-ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.fh.gh2 .fh-or{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:10px;background:#0d1020}
.fh.gh2 .fh-ob0{position:relative;width:22px;height:22px;flex:none}
.fh.gh2 .fh-oball{width:22px;height:22px}
.fh.gh2 .fh-dot{position:absolute;right:-1px;bottom:-1px;width:7px;height:7px;border-radius:50%;background:var(--gh-ok);box-shadow:0 0 0 2px #0d1020}
.fh.gh2 .fh-ox{flex:1;min-width:0}
.fh.gh2 .fh-ox b{display:block;font:700 12px/1.1 system-ui;color:#e8ecff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fh.gh2 .fh-ox small{color:var(--gh-muted);font:600 10px/1 system-ui}
.fh.gh2 .fh-ob,.fh.gh2 .fh-btn{min-height:28px;padding:5px 9px;border-radius:9px;border:0;font:700 11px/1 "Pixelify Sans",system-ui;cursor:pointer;background:linear-gradient(180deg,#2fd3c1,#149a8c);color:#042820}
.fh.gh2 .fh-btn.alt,.fh.gh2 .fh-ob.alt{background:#1c2033;color:#fff;box-shadow:inset 0 0 0 1px #ffffff28}
.fh.gh2 .fh-m{color:var(--gh-muted);font:600 11px/1.25 system-ui;margin:0}
.fh.gh2 .fh-one{display:flex;align-items:center;gap:8px}
.fh.gh2 .fh-zz{font:700 16px/1 "Pixelify Sans",system-ui;color:#5ee6ff88}
@media (min-width:900px){
  .fh.gh2{max-width:980px;margin:0 auto}
  .fh.gh2 .gh-hero{height:32%;max-height:220px;margin:10px 18px 0;border-radius:20px}
  .fh.gh2 .gh-hero h1{font-size:26px}
  .fh.gh2 .gh-wrap{padding:8px 18px 12px}
  .fh.gh2 .gh-grid{grid-template-columns:repeat(4,1fr);gap:10px}
  .fh.gh2 .gh-tile h3{font-size:14px}
}

/* ===== LANDING v5: Will's sunset backdrop + logo + real game previews ===== */
html.xp-landing body>header{display:none!important}
html.xp-landing.xp-games-lock #app{inset:0!important}
.gl.gl5{position:absolute;inset:0;overflow:hidden;background:#1a1030}
.g5-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 50%}
.g5-veil{position:absolute;inset:0;background:linear-gradient(180deg,#0000 0%,#0000 45%,#0a0b1288 78%,#0a0b12cc 100%)}
.g5-col{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:max(18px,env(safe-area-inset-top)) 0 max(16px,env(safe-area-inset-bottom));box-sizing:border-box;text-align:center}
.g5-logo{width:min(84vw,440px);height:auto;image-rendering:pixelated;filter:drop-shadow(0 4px 0 #0008) drop-shadow(0 0 20px #0006);margin-top:2vh}
.g5-sub{margin:6px 0 0;font:700 15px/1.3 "Pixelify Sans",system-ui;color:#fff;text-shadow:0 2px 0 #000a,0 0 12px #000}
.g5-rail{margin-top:auto;display:flex;gap:12px;width:100%;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 12vw 4px;box-sizing:border-box;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.g5-rail::-webkit-scrollbar{display:none}
.g5-card{position:relative;flex:0 0 76vw;max-width:340px;aspect-ratio:4/3;scroll-snap-align:center;border-radius:16px;overflow:hidden;text-decoration:none;color:#fff;background:#121526;box-shadow:0 0 0 2px #ffffffcc,0 0 0 4px #0008,0 10px 26px #000a}
.g5-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.g5-card .gh-tag{position:absolute;top:8px;left:8px}
.g5-meta{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 9px;text-align:left;background:linear-gradient(180deg,#0000,#0a0b12f0 60%)}
.g5-meta b{display:block;font:700 17px/1.1 "Pixelify Sans",system-ui}
.g5-meta small{display:block;font:600 12.5px/1.3 system-ui;color:#dfe4f7;margin-top:2px}
.g5-dots{display:flex;gap:6px;margin:8px 0 10px}
.g5-dots i{width:7px;height:7px;border-radius:9px;background:#ffffff66}
.g5-dots i.on{background:#fff;width:18px}
.g5-cta{min-width:min(280px,82vw)}
.g5-col .gl-si{margin-top:10px;font:600 13px/1.3 system-ui;color:#fff;text-shadow:0 1px 2px #000;text-decoration:underline}
@media (max-height:720px){.g5-card{flex-basis:64vw}.g5-logo{width:min(72vw,360px)}.g5-cta{min-height:46px}}
@media (min-width:900px){
  .g5-logo{width:min(46vw,600px);margin-top:4vh}.g5-sub{font-size:19px}
  .g5-rail{padding:6px 6vw 4px;justify-content:safe center}
  .g5-card{flex-basis:clamp(220px,17vw,300px)}
  .g5-cta{min-width:320px;min-height:56px;font-size:20px}
}
/* gs2 (Will Nov 6 4:39 PM): sunset + logo above, Play now, and a gliding bottom showcase of every game (HUD-free real art) */
.gl5{--sx:clamp(118px,24vh,190px)}
.gl5 .g5-col{bottom:var(--sx);justify-content:flex-start;padding-bottom:10px}
.gl5 .g5-cta{margin-top:auto}
.gl5 .g5-veil{background:linear-gradient(180deg,#0000 0%,#0000 40%,#0a0b1255 66%,#0a0b12dd 100%)}
.g5x-trader{position:absolute;top:max(10px,env(safe-area-inset-top));right:12px;z-index:3;padding:7px 11px;border-radius:999px;font:700 12.5px/1 system-ui;color:#fff;text-decoration:none;background:#0a0b1299;box-shadow:inset 0 0 0 1.5px #ffffff40;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.g5x{position:absolute;left:0;right:0;bottom:0;height:var(--sx);overflow:hidden;padding-bottom:env(safe-area-inset-bottom);box-sizing:border-box;
  -webkit-mask-image:linear-gradient(90deg,#0000,#000 7%,#000 93%,#0000);mask-image:linear-gradient(90deg,#0000,#000 7%,#000 93%,#0000)}
.g5x-track{display:flex;gap:14px;height:100%;width:max-content;align-items:center;padding:0 7px;animation:g5x 38s linear infinite;will-change:transform}
.g5x.held .g5x-track,.g5x:hover .g5x-track{animation-play-state:paused}
@keyframes g5x{to{transform:translateX(-50%)}}
.g5x-card{position:relative;height:calc(var(--sx) - 26px);aspect-ratio:3/2;border-radius:14px;overflow:hidden;flex:none;color:#fff;text-decoration:none;
  box-shadow:0 0 0 2px #fff3,0 10px 24px #000b;transform:translateY(0) rotate(-1.2deg);transition:transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .25s;animation:g5bob 4.2s ease-in-out infinite}
.g5x-card:nth-child(2n){transform:rotate(1.2deg);animation-delay:-2.1s}
.g5x-card:nth-child(3n){animation-delay:-1.3s}
@keyframes g5bob{50%{translate:0 -5px}}
.g5x-card:active,.g5x-card:hover{transform:scale(1.06) rotate(0);box-shadow:0 0 0 2.5px #ffd75e,0 0 26px #ffb84d88,0 12px 28px #000c}
.g5x-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.g5x-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0000 52%,#0a0b12e6);pointer-events:none}
.g5x-card::before{content:'';position:absolute;inset:-40% -60%;z-index:2;background:linear-gradient(105deg,#0000 42%,#ffffff2e 50%,#0000 58%);animation:g5shine 5.5s ease-in-out infinite;pointer-events:none}
@keyframes g5shine{0%,60%{transform:translateX(-60%)}100%{transform:translateX(60%)}}
.g5x-card b{position:absolute;z-index:3;left:9px;right:8px;bottom:7px;font:700 clamp(12px,1.9vh,16px)/1.1 "Pixelify Sans",system-ui;text-shadow:0 2px 0 #000a;text-align:left}
.g5x-tag{position:absolute;z-index:3;top:7px;left:7px;padding:3px 7px;border-radius:999px;font:800 10px/1 system-ui;letter-spacing:.06em;text-transform:uppercase;background:#ffd75e;color:#2a1600}
@media (prefers-reduced-motion:reduce){.g5x{overflow-x:auto}.g5x-track,.g5x-card,.g5x-card::before{animation:none}}
@media (min-width:900px){.gl5{--sx:clamp(160px,25vh,230px)}.g5x-track{animation-duration:48s}}
@media (max-height:420px){.gl5 .g5-logo{width:min(46vw,260px);margin-top:0}.gl5 .g5-sub{display:none}.gl5 .g5-cta{min-height:40px}.gl5 .g5-col .gl-si{margin-top:4px}.gl5{--sx:118px}}