/* ═══════════ game library ═══════════ */
.library{display:grid;gap:clamp(14px,1.6vw,20px);grid-template-columns:repeat(6,1fr)}
.card{position:relative;display:flex;flex-direction:column;min-height:260px;isolation:isolate}
.card--feature{grid-column:span 6}

/* featured game */
.feature{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  border-radius:var(--r-xl);
}
@media (max-width:900px){.feature{grid-template-columns:1fr}}

.feature__media{position:relative;overflow:hidden;min-height:280px;background:#070a14}
.feature__media img{
  width:100%;height:100%;object-fit:cover;object-position:center 55%;
  transition:transform 1.1s var(--ease),filter .6s;
  image-rendering:auto;
}
.feature:hover .feature__media img{transform:scale(1.045)}
.feature__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.22) 2px 4px),
    linear-gradient(90deg,transparent 55%,rgba(6,7,15,.85) 100%),
    linear-gradient(to top,rgba(6,7,15,.7),transparent 55%);
}
@media (max-width:900px){.feature__media::after{background:
  repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.22) 2px 4px),
  linear-gradient(to top,rgba(6,7,15,.88),transparent 60%)}}

.feature__body{padding:clamp(26px,3.4vw,50px);display:flex;flex-direction:column;gap:18px;justify-content:center}
.feature__tags{display:flex;flex-wrap:wrap;gap:8px}
.feature__title{font-size:clamp(34px,5vw,62px);margin:0}
.feature__cn{font-size:14px;letter-spacing:.3em;color:var(--ink-3);font-weight:600;margin:-6px 0 0}
.feature__facts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 20px;margin:4px 0 0;padding:0;list-style:none}
.feature__facts li{
  font-size:13px;color:var(--ink-2);display:flex;gap:9px;align-items:flex-start;line-height:1.5;
}
.feature__facts li::before{content:"";flex:none;width:5px;height:5px;margin-top:7px;
  background:var(--fire);transform:rotate(45deg)}
.feature__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
@media (max-width:520px){.feature__facts{grid-template-columns:1fr}}

/* coming-soon slot */

/* ═══════════ modes ═══════════ */

/* ═══════════ roster ═══════════ */   /* 8 x 3 */    /* 6 x 4 */    /* 4 x 6 */

/* fighter detail panel */

/* ═══════════ feature points ═══════════ */

/* ═══════════ shots strip ═══════════ */

/* ═══════════ CTA band ═══════════ */

/* ═══════════ cursor ═══════════ */
.cursor{
  position:fixed;top:0;left:0;width:26px;height:26px;border-radius:50%;z-index:95;
  pointer-events:none;mix-blend-mode:screen;opacity:0;
  background:radial-gradient(circle,rgba(54,226,255,.55),transparent 68%);
  transition:opacity .4s,width .3s var(--ease),height .3s var(--ease);
  will-change:transform;
}
.cursor.is-on{opacity:1}
.cursor.is-big{width:64px;height:64px}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ═══════════ reveal ═══════════ */
.js [data-reveal]{opacity:0;transform:translateY(26px)}
.js .hero__title .ln > span{transform:translateY(105%)}
.no-motion [data-reveal],.no-motion .hero__title .ln > span{opacity:1 !important;transform:none !important}

/* ═══════════ 滚动展示：粘性舞台 + 进度驱动切换 ═══════════ */
/* 轨道高度必须是舞台高度的整数倍，单位也要一致：舞台用 svh，轨道跟着用 svh，
   否则地址栏收起时两者差出一截，末尾会多出一条空白。 */
.show__track{position:relative;height:200svh}
.show__stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}
.show__media{position:absolute;inset:0;z-index:-2}
.show__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transform:scale(1.06);transition:opacity .7s var(--ease),transform 1.4s var(--ease)}
.show__vid.is-on{opacity:1;transform:scale(1)}
.show__shade{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(4,5,10,.93) 0%,rgba(4,5,10,.72) 44%,rgba(4,5,10,.2) 100%),
  linear-gradient(to top,rgba(4,5,10,.88),transparent 46%)}
.show__copy{position:relative;height:100%;display:flex;align-items:center}
.show__panel{position:absolute;max-width:min(560px,86%);opacity:0;transform:translateY(26px);
  pointer-events:none;transition:opacity .55s var(--ease),transform .55s var(--ease)}
.show__panel.is-on{opacity:1;transform:none;pointer-events:auto}
.show__title{font-size:clamp(38px,6vw,86px);margin:10px 0 0}
.show__cn{margin:8px 0 0;font-size:14px;letter-spacing:.28em;color:var(--ink-3);font-weight:600}
.show__facts{list-style:none;margin:22px 0 28px;padding:0;display:grid;gap:9px}
.show__facts li{font-size:13.5px;color:var(--ink-2);display:flex;gap:9px;align-items:flex-start;line-height:1.5}
.show__facts li::before{content:"";flex:none;width:5px;height:5px;margin-top:7px;background:var(--fire);transform:rotate(45deg)}
.show__dots{position:absolute;right:clamp(16px,3vw,42px);top:50%;transform:translateY(-50%);display:grid;gap:10px}
.show__dots i{display:block;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22);
  transition:background .4s var(--ease),transform .4s var(--ease)}
.show__dots i.is-on{background:var(--fire);transform:scale(1.4)}
@media (max-width:820px){
  .show__copy{align-items:flex-end;padding-bottom:clamp(64px,13vh,130px)}
  .show__shade{background:linear-gradient(to top,rgba(4,5,10,.95) 0%,rgba(4,5,10,.62) 48%,rgba(4,5,10,.18) 100%)}
}
@media (prefers-reduced-motion:reduce){.show__vid,.show__panel{transition:none}}

/* ═══════════ /games 列表页 ═══════════ */
.games{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr))}
.gcard{position:relative;overflow:hidden;border-radius:var(--r-xl);border:1px solid var(--line);background:#080b16;display:block}
.gcard__media{position:relative;aspect-ratio:16/9;overflow:hidden;background:#070a14}
.gcard__media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.gcard:hover .gcard__media img{transform:scale(1.05)}
.gcard__body{padding:clamp(18px,2vw,26px);display:grid;gap:10px}
.gcard__title{font-size:clamp(22px,2.4vw,30px);margin:0}
.gcard__meta{display:flex;flex-wrap:wrap;gap:8px}