/* ═══════════ 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}
.card--slot{grid-column:span 2}
@media (max-width:980px){
  .card--slot{grid-column:span 3}
}
@media (max-width:620px){
  .card--slot{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__desc{color:var(--ink-2);font-size:14.5px;line-height:1.8;margin: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 */
.slot{
  border-radius:var(--r-lg);padding:24px;
  display:flex;flex-direction:column;justify-content:space-between;gap:28px;
  min-height:230px;
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.014) 0 10px,transparent 10px 20px),
    var(--panel);
  transition:border-color .4s,transform .4s var(--ease);
}
.slot:hover{transform:translateY(-3px);border-color:rgba(150,180,255,.26)}
.slot__no{font-family:var(--display);font-size:clamp(44px,6vw,72px);line-height:.8;
  color:transparent;-webkit-text-stroke:1px rgba(154,178,230,.28)}
.slot__meta h3{margin:0 0 6px;font-size:16px;font-weight:700;letter-spacing:.04em;color:var(--ink)}
.slot__meta p{margin:0;font-size:12.5px;color:var(--ink-3);line-height:1.7}
.slot__bar{height:2px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden;margin-top:14px}
.slot__bar i{display:block;height:100%;width:22%;background:linear-gradient(90deg,var(--royal),var(--ice));opacity:.7}

/* ═══════════ modes ═══════════ */
.modes{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(18px,3vw,44px);align-items:start}
@media (max-width:900px){.modes{grid-template-columns:1fr}}

.modes__list{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.mode{
  display:flex;gap:14px;align-items:flex-start;width:100%;text-align:left;
  padding:15px 16px;border:1px solid transparent;border-radius:var(--r-md);
  transition:background .3s,border-color .3s,transform .3s var(--ease);
  position:relative;
}
.mode:hover{background:rgba(255,255,255,.03)}
.mode.is-active{background:rgba(255,255,255,.045);border-color:var(--line-ice);
  box-shadow:0 0 34px -16px rgba(54,226,255,.7)}
.mode__no{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--ink-3);
  padding-top:4px;flex:none;width:22px}
.mode.is-active .mode__no{color:var(--ice)}
.mode__txt strong{display:block;font-size:15.5px;font-weight:700;letter-spacing:.02em;color:var(--ink)}
.mode__txt em{display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:2px}
.mode__txt p{margin:8px 0 0;font-size:13px;color:var(--ink-2);line-height:1.7}

.modes__stage{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#05070f;
  aspect-ratio:1828/974}
.modes__stage img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .6s var(--ease),transform 1.2s var(--ease);transform:scale(1.03);
}
.modes__stage img.is-on{opacity:1;transform:scale(1)}
.modes__stage::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,.2) 2px 4px);
}
.modes__cap{
  position:absolute;left:14px;bottom:14px;z-index:2;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-2);background:rgba(4,5,11,.7);border:1px solid var(--line);
  padding:6px 11px;border-radius:999px;backdrop-filter:blur(8px);
}

/* ═══════════ roster ═══════════ */
.roster{
  display:grid;gap:clamp(7px,.85vw,12px);
  grid-template-columns:repeat(12,minmax(0,1fr));   /* 24 = 12 x 2 */
}
@media (max-width:1120px){.roster{grid-template-columns:repeat(8,minmax(0,1fr))}}   /* 8 x 3 */
@media (max-width:760px){.roster{grid-template-columns:repeat(6,minmax(0,1fr))}}    /* 6 x 4 */
@media (max-width:460px){.roster{grid-template-columns:repeat(4,minmax(0,1fr))}}    /* 4 x 6 */
.fighter{
  position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:1;
  border:1px solid var(--line);background:#080b16;
  transition:transform .4s var(--ease),border-color .3s,box-shadow .4s;
  display:block;width:100%;
}
.fighter img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.55) brightness(.78) contrast(1.05);
  transition:filter .4s,transform .6s var(--ease);
}
.fighter:hover,.fighter:focus-visible{transform:translateY(-4px) scale(1.03);border-color:var(--line-ice);
  box-shadow:0 16px 40px -20px rgba(54,226,255,.9);z-index:3}
.fighter:hover img,.fighter:focus-visible img{filter:none;transform:scale(1.06)}
.fighter__name{
  position:absolute;left:0;right:0;bottom:0;padding:16px 4px 6px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);text-align:center;
  background:linear-gradient(to top,rgba(4,5,11,.94),transparent);
  transition:color .3s;
}
.fighter:hover .fighter__name{color:#fff}
.fighter__side{
  position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;
  box-shadow:0 0 8px currentColor;
}
.fighter[data-g="hero"] .fighter__side{color:var(--ice);background:currentColor}
.fighter[data-g="enemy"] .fighter__side{color:var(--fire);background:currentColor}
.fighter[data-g="secret"] .fighter__side{color:#c06bff;background:currentColor}
.fighter[data-g="template"] .fighter__side{color:var(--ink-3);background:currentColor}

.roster__legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:22px}
.roster__legend span{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.roster__legend i{width:6px;height:6px;border-radius:50%;box-shadow:0 0 8px currentColor;background:currentColor}

/* fighter detail panel */
.detail{
  margin-top:clamp(18px,2.4vw,28px);border-radius:var(--r-lg);padding:clamp(18px,2.6vw,30px);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2.6vw,32px);align-items:center;
  min-height:150px;
}
@media (max-width:620px){.detail{grid-template-columns:1fr;text-align:left}}
.detail__face{
  width:clamp(86px,10vw,120px);aspect-ratio:1;border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--line-ice);box-shadow:0 0 40px -18px rgba(54,226,255,.9);
}
.detail__face img{width:100%;height:100%;object-fit:cover}
.detail__name{font-family:var(--display);font-size:clamp(26px,3.6vw,44px);text-transform:uppercase;
  margin:0;letter-spacing:.01em;transform:skewX(-6deg)}
.detail__meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);margin:6px 0 0}
.detail__moves{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding:0;list-style:none}
.detail__moves li{
  display:inline-flex;align-items:center;gap:9px;padding:7px 12px;border-radius:8px;
  border:1px solid var(--line);background:rgba(255,255,255,.025);
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink);
}
.detail__moves li b{color:var(--ice);font-weight:600}
.detail__moves li em{font-style:normal;color:var(--ink-3);font-size:10.5px;letter-spacing:.1em}
.detail__none{margin:14px 0 0;font-size:13px;color:var(--ink-3)}

/* ═══════════ feature points ═══════════ */
.points{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.points{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.points{grid-template-columns:1fr}}
.point{background:var(--bg-lift);padding:clamp(22px,2.6vw,32px);position:relative;overflow:hidden;
  transition:background .4s}
.point:hover{background:#0d1120}
.point__ico{width:34px;height:34px;color:var(--ice);margin-bottom:18px}
.point__ico svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.4}
.point h3{margin:0 0 9px;font-size:16px;font-weight:700;letter-spacing:.02em}
.point p{margin:0;font-size:13px;color:var(--ink-2);line-height:1.75}
.point__no{position:absolute;top:14px;right:18px;font-family:var(--display);font-size:34px;
  color:transparent;-webkit-text-stroke:1px rgba(154,178,230,.16)}

/* ═══════════ shots strip ═══════════ */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,16px)}
@media (max-width:760px){.strip{grid-template-columns:1fr 1fr}}
.strip figure{margin:0;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);
  position:relative;background:#06080f;aspect-ratio:16/11}
.strip img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.strip figure:hover img{transform:scale(1.05)}
.strip figcaption{
  position:absolute;left:10px;bottom:10px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);
  background:rgba(4,5,11,.72);padding:5px 9px;border-radius:6px;backdrop-filter:blur(6px);
}

/* ═══════════ CTA band ═══════════ */
.band{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  padding:clamp(40px,6vw,88px) clamp(24px,4vw,64px);
  background:
    radial-gradient(70% 130% at 12% 0%,rgba(255,90,31,.22),transparent 62%),
    radial-gradient(60% 120% at 88% 100%,rgba(54,226,255,.2),transparent 62%),
    linear-gradient(160deg,#0b1020,#070a14);
  border:1px solid var(--line);
  text-align:center;
}
.band__title{font-size:clamp(38px,7vw,96px);margin:14px auto 0;max-width:16ch}
.band .lede{margin:18px auto 0;text-align:center}
.band .btn{margin-top:30px}
.band__glow{position:absolute;inset:auto 0 -55%;height:100%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(44,76,232,.4),transparent 70%);filter:blur(30px)}

/* ═══════════ 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}