/* ══ DANGER ZONE — fighter dossier pages ══════════════════════════════
   Shared by every /fighters/*.html page. Each page sets its own accent by
   putting a fighter class on <body>: .f-jaxon .f-raze .f-nyx .f-mira
   .f-viktor .f-kairo .f-sable
   ──────────────────────────────────────────────────────────────────── */
:root{
  --void:#0B0A0C; --ash:#17161A; --concrete:#2A272C; --bone:#DEDBD2;
  --sodium:#E8C83D; --steel:#3AA0FF; --blood:#B4121B;
  --ink:#D8D5CE; --ink-dim:#A29CA9;
  --display:'Big Shoulders Display', Impact, sans-serif;
  --body:'Barlow', system-ui, sans-serif;
  --mono:'Space Mono', ui-monospace, monospace;
  /* Brand marks, drawn as masks so each one takes its link's colour. */
  --ic-tiktok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07Z'/%3E%3C/svg%3E");
  --ic-ig:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm7.846-10.405a1.441 1.441 0 01-2.88 0 1.44 1.44 0 012.88 0z'/%3E%3C/svg%3E");
  --ic-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z'/%3E%3C/svg%3E");
  --ic-yt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
  /* overridden per fighter */
  --fc:#4FB4FF; --fcG:rgba(58,160,255,.85); --fcDim:rgba(58,160,255,.12);
}
.f-jaxon{--fc:#4FB4FF; --fcG:rgba(58,160,255,.85); --fcDim:rgba(58,160,255,.12)}
.f-raze {--fc:#FF3644; --fcG:rgba(255,54,68,.80);  --fcDim:rgba(255,54,68,.12)}
.f-nyx  {--fc:#B36BFF; --fcG:rgba(168,85,247,.80); --fcDim:rgba(168,85,247,.13)}
.f-mira {--fc:#4FD8E8; --fcG:rgba(79,216,232,.78); --fcDim:rgba(79,216,232,.12)}
.f-viktor{--fc:#29E0FF; --fcG:rgba(41,224,255,.80); --fcDim:rgba(41,224,255,.13)}
.f-kairo{--fc:#F2C83A; --fcG:rgba(242,200,58,.80); --fcDim:rgba(242,200,58,.12)}
.f-sable{--fc:#E5263C; --fcG:rgba(229,38,60,.80);  --fcDim:rgba(229,38,60,.12)}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--void); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* static grain — the same paper the rest of the site is printed on */
body::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9; opacity:.06;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:var(--fc)}
img{max-width:100%; display:block}
:focus-visible{outline:2px solid var(--sodium); outline-offset:3px}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px}
.skip{
  position:fixed; top:-100px; left:14px; z-index:40; background:var(--blood); color:#fff;
  text-decoration:none; font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; padding:12px 18px; transition:top .18s;
}
.skip:focus{top:14px}

/* ── top bar ── */
.topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center;
  justify-content:space-between; gap:20px; padding:15px 24px;
  border-bottom:1px solid #1F1D22; background:rgba(11,10,12,.92);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.topbar__mark{
  font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:1.35rem;
  line-height:1; letter-spacing:-.01em; color:var(--bone); text-decoration:none;
}
.topbar__mark span{color:var(--blood)}
.topbar__back{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-dim); text-decoration:none; white-space:nowrap;
}
.topbar__back:hover{color:var(--bone)}
/* the Steam page is live: every dossier carries the wishlist, same look as the home page's nav button */
.topbar__nav{display:flex; align-items:center; gap:18px}
.topbar__cta{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bone); text-decoration:none; white-space:nowrap; padding:9px 14px;
  border:1px solid #3A3742; transition:border-color .2s, background .2s;
}
.topbar__cta:hover{border-color:var(--bone); background:rgba(255,255,255,.05)}
@media (max-width:560px){ .topbar__back{display:none} }

/* ── hero — the file cover ── */
.hero{position:relative; overflow:hidden; border-bottom:1px solid #1F1D22; isolation:isolate}
.hero::before{
  content:''; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(70% 90% at 74% 40%, var(--fcDim), transparent 68%),
    radial-gradient(120% 80% at 50% 120%, rgba(0,0,0,.6), transparent 60%);
}
/* faint grid, like the file was printed on graph paper */
.hero::after{
  content:''; position:absolute; inset:0; z-index:-1; opacity:.35; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 40%, #000, transparent);
          mask-image:radial-gradient(70% 70% at 50% 40%, #000, transparent);
}
.hero__in{
  display:grid; grid-template-columns:1fr minmax(280px,440px); gap:40px;
  align-items:center; padding:54px 24px 0; min-height:600px;
}
.fileno{
  display:inline-block; margin:0; padding:6px 22px 6px 12px;
  clip-path:polygon(0 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
  background:var(--fc); color:#0B0A0C;
  font-family:var(--mono); font-size:10px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
}
.hero h1{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(3.2rem,8vw,6.4rem); line-height:.84; letter-spacing:-.02em;
  margin:18px 0 0; color:#fff;
}
.hero h1 span{display:block; color:var(--fc); text-shadow:0 0 32px var(--fcDim)}
.codename{
  margin:16px 0 0; font-family:var(--mono); font-size:13px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--fc);
}
/* Hero quote. Optional - a page only gets one if the fighter has an
   authored line, so it sits between the codename and the buttons. */
.heroquote{
  max-width:30ch; margin:20px 0 0; padding-left:18px;
  border-left:2px solid var(--fc);
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.05rem,2.1vw,1.5rem); line-height:1.16; letter-spacing:.005em;
  color:#fff;
}
.heroquote::before{content:'\201C'} .heroquote::after{content:'\201D'}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px; margin:30px 0 46px}
.btn{
  font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; padding:15px 26px;
  border:1px solid var(--concrete); background:transparent; color:var(--bone);
  transition:border-color .2s, background .2s;
}
.btn:hover{border-color:var(--bone); background:rgba(255,255,255,.04)}
.btn--go{background:var(--fc); border-color:var(--fc); color:#0B0A0C}
.btn--go:hover{filter:brightness(1.12); background:var(--fc)}
.hero__art{
  position:relative; justify-self:center; align-self:end;
  max-height:640px; width:auto;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.65));
}
.hero__art::after{content:''}

/* ── section shell ── */
.sec{padding:78px 0; border-bottom:1px solid #1F1D22}
.sec__k{
  font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-dim); margin:0 0 6px;
}
.sec__h{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.7rem,3.6vw,2.4rem); line-height:1; letter-spacing:-.01em;
  color:var(--bone); margin:0 0 30px;
}
.sec__h b{color:var(--fc); font-weight:700}

/* ── dossier table ── */
.dossier{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1px; background:#1F1D22; border:1px solid #1F1D22;
}
.dossier div{background:#0C0B10; padding:20px 22px}
.dossier dt{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-dim); margin:0 0 8px;
}
.dossier dd{
  margin:0; font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:1.22rem; letter-spacing:.01em; color:var(--bone); line-height:1.15;
}
.dossier dd.on{color:var(--fc)}
/* unconfirmed canon renders in-fiction rather than being invented */
.red{
  display:inline-block; font-family:var(--mono); font-size:.72em; font-weight:700;
  letter-spacing:.16em; color:#8A8490; background:repeating-linear-gradient(
    -45deg, rgba(255,255,255,.05) 0 6px, transparent 6px 12px);
  border:1px dashed #3A3742; padding:4px 9px;
}

/* ── biography ── */
.bio{max-width:70ch}
.bio p{margin:0 0 20px}
.bio p:last-child{margin-bottom:0}
.bio strong{color:var(--bone); font-weight:600}
.pull{
  margin:34px 0 0; padding:20px 0 20px 24px; border-left:2px solid var(--fc);
  font-family:var(--display); font-weight:400; font-size:clamp(1.2rem,2.4vw,1.7rem);
  line-height:1.25; color:#fff; max-width:34ch;
}
.pull::before{content:'“'} .pull::after{content:'”'}

/* ── moves ── */
.moves{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px}
.move{
  position:relative; border:1px solid #26242C; background:#0C0B10; padding:18px 20px;
  transition:border-color .25s, transform .25s cubic-bezier(.2,.7,.2,1);
}
.move:hover{border-color:var(--fc); transform:translateY(-3px)}
.move b{
  display:block; font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:1.24rem; letter-spacing:.01em; color:#fff; line-height:1;
}
.move span{
  display:block; margin-top:9px; font-family:var(--mono); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim);
}
.move--big{border-color:var(--fc); background:linear-gradient(160deg, var(--fcDim), #0C0B10 62%)}
.move--big b{color:var(--fc)}

/* ── shots strip ── */
.strip{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.strip a{position:relative; overflow:hidden; aspect-ratio:16/9; display:block; background:#111016}
.strip img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.2,1); filter:saturate(.94)
}
.strip a:hover img{transform:scale(1.05); filter:none}
.strip a::after{
  content:''; position:absolute; inset:0; box-shadow:inset 0 0 0 1px #26242C; transition:box-shadow .3s
}
.strip a:hover::after{box-shadow:inset 0 0 0 1px var(--fc)}

/* ── prev / next ── */
.pn{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:#1F1D22; border-bottom:1px solid #1F1D22}
.pn a{
  display:flex; flex-direction:column; gap:8px; padding:30px 24px;
  background:#0B0A0C; text-decoration:none; transition:background .25s;
}
.pn a:hover{background:#111016}
.pn a:last-child{text-align:right; align-items:flex-end}
.pn small{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-dim);
}
.pn b{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(1.3rem,3vw,2rem); line-height:1; color:var(--bone);
}
.pn a:hover b{color:var(--fc)}

/* ── SOCIALS ─────────────────────────────────────────────
   Brand marks are CSS masks, so each icon inherits the link's own colour
   and a new network is one variable plus one modifier class. */
.social{
  display:flex; justify-content:center; flex-wrap:wrap; gap:10px;
  margin:0 0 24px; padding:0;
}
.soc{
  --sc:var(--bone);
  display:grid; place-items:center; width:44px; height:44px;
  border:1px solid var(--concrete); color:#A29CA9; text-decoration:none;
  transition:color .2s, border-color .2s, background .2s;
}
.soc:hover,.soc:focus-visible{color:var(--sc); border-color:var(--sc); background:rgba(255,255,255,.05)}
.soc i{
  width:19px; height:19px; display:block; background:currentColor;
  -webkit-mask:var(--ic) center/contain no-repeat;
          mask:var(--ic) center/contain no-repeat;
}
.soc--tt{--ic:var(--ic-tiktok); --sc:#25F4EE}
.soc--ig{--ic:var(--ic-ig);     --sc:#E1306C}
.soc--x {--ic:var(--ic-x);      --sc:#FFFFFF}
.soc--yt{--ic:var(--ic-yt);     --sc:#FF3B3B}
/* ── footer ── */
.foot{padding:52px 24px 60px; text-align:center}
.foot__links{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px 0;
  margin:0 0 20px; font-family:var(--mono); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase;
}
.foot__links a{color:var(--ink-dim); text-decoration:none; padding:0 16px}
.foot__links a:hover{color:var(--bone)}
.foot__fine{
  margin:0; font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  color:#8E8894; text-transform:uppercase; line-height:1.9;
}

@media (max-width:900px){
  .hero__in{grid-template-columns:1fr; gap:0; padding-top:40px; min-height:0; text-align:center}
  .hero__cta{justify-content:center; margin-bottom:30px}
  .heroquote{margin-inline:auto; text-align:center; border-left:0; padding-left:0; border-top:2px solid var(--fc); padding-top:16px}
  .fileno{margin-inline:auto}
  .hero__art{max-height:420px; margin-top:8px}
  .strip{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  body{font-size:16px}
  .sec{padding:56px 0}
  .strip{grid-template-columns:1fr}
  .pn{grid-template-columns:1fr}
  .pn a:last-child{text-align:left; align-items:flex-start}
  .foot__links a{padding:0 10px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
}
@media print{
  body{background:#fff; color:#000}
  body::after,.topbar,.pn{display:none}
  .hero h1,.sec__h,.dossier dd,.move b{color:#000}
}