/* OpenCF. One stylesheet, no framework. Rules for changing it are in STYLE.md beside site/.
   Order: tokens, base, chrome (header, footer), shared parts, then one block per page. */

:root {
  color-scheme: dark;

  --bg: #0a0a0c;
  --bg-1: #0f0f12;
  --bg-2: #151518;
  --bg-3: #1c1c21;
  --bg-4: #25252b;
  --line: #222228;
  --line-2: #303038;

  --text: #ececef;
  --text-2: #a9a9b4;
  --text-3: #8a8a96;
  --text-4: #5c5c67;

  /* The pink-red. --red fills (white text on it is 5.5:1); --pink is the same hue for text on black (5.4:1). */
  --red: #c8214f;
  --red-hover: #db2b5d;
  --red-deep: #7a1231;
  --red-night: #1b0a10;
  --pink: #f0436e;
  --hot: #ff7a98;
  --red-soft: rgba(200, 33, 79, .14);
  --red-line: rgba(240, 67, 110, .38);

  --gold: #e8b650;
  --gold-soft: rgba(232, 182, 80, .13);
  --steel: #7fc3de;
  --violet: #b49cff;
  --green: #5fcf8f;

  /* Chart series. */
  --c1: #f0436e; --c2: #d4d6de; --c3: #e8b650; --c4: #7fc3de; --c5: #b49cff; --c6: #ff9259; --c7: #5fcf8f; --c8: #6c6c78;

  /* CrossFire's own sites set headings in a condensed bold italic. Bahnschrift ships with Windows 10+
     and has a width axis; the rest are fallbacks with the same proportions. */
  --display: "Bahnschrift Condensed", Bahnschrift, "Barlow Condensed", "Roboto Condensed", "DIN Condensed", "Arial Narrow", sans-serif;
  --sans: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 1260px;
  --gutter: 24px;
  --cut: 10px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ── Base ─────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; }
a { color: var(--pink); text-decoration: none; }
a:hover { color: var(--hot); }
img { max-width: 100%; }
::selection { background: var(--red); color: #fff; }

h1, h2, h3, .display {
  font-family: var(--display);
  font-stretch: condensed;
  line-height: 1.02;
  margin: 0 0 .35em;
  color: var(--text);
}
h1 { font-size: clamp(34px, 4.6vw, 54px); font-weight: 700; font-style: italic; text-transform: uppercase; letter-spacing: .005em; }
h2 { font-size: 26px; font-weight: 700; font-style: italic; text-transform: uppercase; letter-spacing: .01em; }
h3 { font-size: 19px; font-weight: 600; letter-spacing: .01em; }
p { margin: 0 0 1em; }
b, strong { font-weight: 650; }
code, kbd { font-family: var(--mono); font-size: .86em; }
code { background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 2px; padding: 1px 5px; }
kbd { border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 2px; padding: 0 5px; color: var(--text-2); background: var(--bg-2); font-size: 11px; }
small { font-size: .86em; }
s { color: var(--text-3); }
.muted { color: var(--text-3); }
.small { font-size: 13px; }
.i { width: 18px; height: 18px; flex: none; vertical-align: -3px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--red); color: #fff; padding: 8px 12px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* The mark CrossFire's pages put beside a title: a slanted bar. */
.slash, .sec-head h2::before, .panel-h::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: .78em;
  margin-right: .42em;
  background: var(--red);
  transform: skewX(-16deg);
  vertical-align: -.02em;
}

@keyframes grow { from { transform: scaleX(0); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes slide-in { from { opacity: 0; transform: translateX(-28px); } }
@keyframes drift { from { transform: scale(1.05) translateX(0); } to { transform: scale(1.12) translateX(-2.5%); } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(240, 67, 110, .55); } 60% { box-shadow: 0 0 0 5px rgba(240, 67, 110, 0); } }
@keyframes sweep { from { transform: translateX(-120%) skewX(-20deg); } to { transform: translateX(320%) skewX(-20deg); } }

/* ── Header ──────────────────────────────────────────────────────────────── */

.top {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(6, 6, 8, .9);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border-bottom: 1px solid var(--line);
}
.top::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--red-deep) 20%, var(--red) 50%, var(--red-deep) 80%, transparent);
  opacity: .7;
}
.top-in { display: flex; align-items: stretch; gap: 26px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); white-space: nowrap; }
.brand:hover { color: var(--text); }
.brand-logo { display: block; width: auto; transition: filter .2s; }
.brand:hover .brand-logo { filter: brightness(1.12); }

.nav { flex: 1; display: flex; }
.nav-list { display: flex; list-style: none; margin: 0; padding: 0; }
.nav-item { position: relative; display: flex; }
.nav-link {
  position: relative;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 15px;
  color: var(--text-2);
  font: italic 600 18px/1 var(--display); font-stretch: condensed;
  text-transform: uppercase; letter-spacing: .03em;
  isolation: isolate;
}
.nav-link::before {
  content: "";
  position: absolute; left: 4px; right: 4px; top: 16px; bottom: 16px; z-index: -1;
  background: var(--bg-3);
  transform: skewX(-14deg) scaleX(0);
  transform-origin: left;
  transition: transform .22s var(--ease);
}
.nav-link:hover, .nav-item:focus-within > .nav-link, .has-menu:hover > .nav-link { color: var(--text); }
.nav-link:hover::before, .nav-item:focus-within > .nav-link::before, .has-menu:hover > .nav-link::before { transform: skewX(-14deg) scaleX(1); }
.nav-item.is-current > .nav-link { color: #fff; }
.nav-item.is-current > .nav-link::after {
  content: "";
  position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px;
  background: var(--red);
  transform: skewX(-24deg);
}
.nav-caret { width: 14px; height: 14px; opacity: .55; transition: transform .2s; }
.has-menu:hover .nav-caret { transform: rotate(180deg); }

.menu {
  position: absolute; top: 100%; left: 0;
  min-width: 300px;
  padding: 6px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-top: 2px solid var(--red);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9);
  opacity: 0; visibility: hidden;
  transform: translateY(6px);
  transition: opacity .16s, transform .16s var(--ease), visibility 0s linear .16s;
}
.has-menu:hover .menu, .has-menu:focus-within .menu, .has-menu.open .menu { opacity: 1; visibility: visible; transform: none; transition: opacity .16s, transform .16s var(--ease); }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu a { position: relative; display: block; padding: 9px 12px 9px 14px; color: var(--text); }
.menu a::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: var(--red); transform: scaleY(0); transition: transform .15s; }
.menu a:hover { background: var(--bg-3); color: #fff; }
.menu a:hover::before { transform: none; }
.menu b { display: block; font-size: 14.5px; }
.menu span { display: block; font-size: 12.5px; color: var(--text-3); }

.top-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.search-btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 38px; min-width: 290px; padding: 0 10px 0 12px;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 2px;
  color: var(--text-3); font: 13.5px var(--sans); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.search-btn:hover { border-color: var(--red-line); background: var(--bg-3); color: var(--text-2); }
.search-btn kbd { margin-left: auto; }
.search-btn-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-toggle { display: none; width: 42px; height: 38px; align-self: center; border: 1px solid var(--line-2); border-radius: 2px; background: var(--bg-2); color: var(--text); cursor: pointer; align-items: center; justify-content: center; }
/* Discord, in its own blurple (#5865F2), quieter until pointed at. */
.discord-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; color: var(--text-2); transition: color .15s; }
.discord-btn:hover, .discord-btn:focus-visible { color: #5865f2; }
.discord-btn .i { width: 24px; height: 24px; vertical-align: 0; }
/* "On OpenCF now" (lib/presence.js): a green light and the count; site.js keeps it current. */
.online-now { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 6px; color: var(--text-3); font-size: 13px; white-space: nowrap; text-decoration: none; }
.online-now:hover { color: var(--text-2); }
.online-now i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulse-green 2s infinite; }
.online-now b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
@keyframes pulse-green { 0%, 100% { box-shadow: 0 0 0 0 rgba(95, 207, 143, .5); } 60% { box-shadow: 0 0 0 5px rgba(95, 207, 143, 0); } }
@media (prefers-reduced-motion: reduce) { .online-now i { animation: none; } }
/* Only the light and the number show; "online" is still read out to screen readers. */
.online-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.foot {
  position: relative;
  margin-top: 96px;
  border-top: 1px solid var(--line);
  background: #070709;
  isolation: isolate;
  overflow: hidden;
}
.has-art .foot::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: url("https://z8games.akamaized.net/cfna/templates/assets/images/cff-bg-social.jpg") center top / cover;
  opacity: .5;
}
.foot-in { display: grid; grid-template-columns: 1.2fr 2fr; gap: 48px; padding-top: 48px; padding-bottom: 34px; }
.foot-brand p { color: var(--text-3); font-size: 13.5px; margin-top: 14px; max-width: 400px; }
.foot-discord { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; color: var(--text); }
.foot-discord:hover { color: var(--text); }
.foot-discord .i { width: 28px; height: 28px; color: var(--text-2); transition: color .15s; }
.foot-discord:hover .i { color: #5865f2; }
.foot-discord b { display: block; font-size: 14px; }
.foot-discord small { display: block; color: var(--text-3); font-size: 12px; }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.foot h2 { font-size: 17px; color: var(--text-2); margin-bottom: 12px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin: 7px 0; }
.foot li a { color: var(--text-3); font-size: 14px; }
.foot li a:hover { color: var(--text); }
.foot-note { border-top: 1px solid var(--line); padding-top: 18px; padding-bottom: 34px; }
.foot-note p { font-size: 12.5px; color: var(--text-4); margin: 0; max-width: 920px; }

/* ── Buttons, chips, fields ──────────────────────────────────────────────── */

/* Buttons are parallelograms, as on CrossFire's own pages. The slant is a clip, so the label stays upright. */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 24px;
  border: 0; border-radius: 0;
  clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
  background: var(--red); color: #fff;
  font: italic 700 17px/1 var(--display); font-stretch: condensed;
  text-transform: uppercase; letter-spacing: .04em;
  cursor: pointer; white-space: nowrap; overflow: hidden;
  transition: background .15s;
}
.btn::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 0; width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: translateX(-120%) skewX(-20deg);
  pointer-events: none;
}
.btn:hover { background: var(--red-hover); color: #fff; }
.btn:hover::after { animation: sweep .7s var(--ease); }
.btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #fff; }
.btn .i { width: 17px; height: 17px; }
.btn-ghost { background: var(--bg-3); color: var(--text); }
.btn-ghost:hover { background: var(--bg-4); color: #fff; }
.btn.is-on { background: var(--bg-4); }
/* To the CrossFire Wiki (Fandom): dark, with the book in the accent, like the GitHub buttons on teamvanilla.dev. */
.btn-wiki { background: #1b1b20; color: #fff; }
.btn-wiki > .i:first-child { color: var(--pink); }
.btn-wiki .btn-ext { width: 14px; height: 14px; opacity: .6; }
.btn-wiki:hover { background: var(--red); color: #fff; }
.btn-wiki:hover > .i:first-child { color: #fff; }
.mhero .btn-wiki { margin-top: 14px; }
.item-actions { margin: 16px 0 0; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--pink); font: inherit; font-size: 13px; cursor: pointer; }
.linkbtn:hover { color: var(--hot); text-decoration: underline; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 2px;
  color: var(--text-2); font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
a.chip:hover { color: var(--text); border-color: var(--red-line); }
.chip-gold { color: var(--gold); background: var(--gold-soft); border-color: rgba(232, 182, 80, .3); }
.chip-live { color: var(--text); border-color: var(--red-line); background: var(--red-soft); }
.chip-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pink); animation: pulse 1.8s infinite; }
.chip-warn { color: var(--gold); background: var(--gold-soft); border-color: rgba(232, 182, 80, .3); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 16px; }
.cur { font-weight: 700; }
.cur-zp, .chip.cur-zp { color: var(--gold); }
.cur-gp, .chip.cur-gp { color: var(--steel); }
.cur-mp, .chip.cur-mp { color: var(--violet); }
.vip { color: var(--gold); font-weight: 700; }

select, input[type="search"], input[type="text"], input:not([type]) {
  height: 40px; min-width: 0; padding: 0 12px;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 2px;
  color: var(--text); font: inherit;
}
select { padding-right: 28px; }
input::placeholder { color: var(--text-4); }
input:focus, select:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px var(--red-soft); }

.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--bg-1); border: 1px solid var(--line); }
.seg a, .seg button {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px;
  background: none; border: 0; cursor: pointer; white-space: nowrap;
  color: var(--text-3);
  font: italic 600 15.5px/1 var(--display); font-stretch: condensed; text-transform: uppercase; letter-spacing: .03em;
  transition: color .15s, background .15s;
}
.seg a:hover, .seg button:hover { color: var(--text); background: var(--bg-3); }
.seg .is-on, .seg .is-on:hover { background: var(--red); color: #fff; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 16px 0; }
.inline-search { display: inline-flex; align-items: center; gap: 8px; padding-left: 10px; background: var(--bg-2); border: 1px solid var(--line-2); color: var(--text-3); }
.inline-search input { height: 36px; padding-left: 0; border: 0; background: transparent; }
.inline-search input:focus { box-shadow: none; }
.inline-search:focus-within { border-color: var(--pink); }

/* ── Page heading band ───────────────────────────────────────────────────── */

.phead { position: relative; padding: 30px 0 22px; margin-bottom: 18px; isolation: isolate; }
.phead::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); z-index: -1;
  background: linear-gradient(180deg, #0d0d10, var(--bg));
  border-bottom: 1px solid var(--line);
}
.has-art .phead::before {
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(10, 10, 12, .6) 50%, rgba(10, 10, 12, .88) 100%),
    linear-gradient(0deg, var(--bg) 0%, rgba(10, 10, 12, 0) 70%),
    url("https://z8games.akamaized.net/cfna/templates/assets/images/cff-bg-social.jpg") center 30% / cover;
}
.phead h1 { margin: 0; }
.phead h1::before {
  content: "";
  display: inline-block;
  width: .14em; height: .74em;
  margin-right: .3em;
  background: var(--red);
  transform: skewX(-16deg);
  vertical-align: .02em;
}
.phead-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.phead-tag { margin: 10px 0 0; color: var(--text-3); font-size: 14px; }
.phead .lede { margin: 12px 0 0; }
.kicker { margin: 0 0 8px; color: var(--pink); font: italic 600 16px/1 var(--display); font-stretch: condensed; text-transform: uppercase; letter-spacing: .06em; }
.lede { color: var(--text-2); font-size: 16.5px; max-width: 780px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; color: var(--text-3); }
.crumbs a { color: var(--text-2); }
.crumbs a:hover { color: var(--pink); }
.crumbs span[aria-hidden] { color: var(--red); font-weight: 700; transform: skewX(-12deg); }

/* ── Sections and panels ─────────────────────────────────────────────────── */

.sec { margin-top: 44px; }
.sec-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.sec-head h2 { margin: 0; }
.sec-head p { margin: 0; color: var(--text-3); font-size: 14px; }
.more {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  color: var(--text-2);
  font: italic 600 16px/1 var(--display); font-stretch: condensed; text-transform: uppercase; letter-spacing: .04em;
}
.more:hover { color: var(--pink); }
.more .i { width: 15px; height: 15px; transition: transform .18s var(--ease); }
.more:hover .i { transform: translateX(4px); }
.more-row { margin: 16px 0 0; text-align: center; }
.sub-h { margin: 26px 0 10px; font: italic 600 17px/1 var(--display); font-stretch: condensed; text-transform: uppercase; color: var(--text-3); }

.panel {
  position: relative;
  min-width: 0;
  margin-top: 18px;
  padding: 20px 22px;
  background: var(--bg-1);
  border: 1px solid var(--line);
}
.panel::before {
  content: "";
  position: absolute; top: -1px; left: -1px;
  width: 56px; height: 2px;
  background: var(--red);
}
.panel-h { font-size: 21px; margin-bottom: 16px; }
.panel-h small { font: 500 13px var(--sans); text-transform: none; color: var(--text-3); }
.panel-sub { margin: 18px 0 8px; font: italic 600 16px/1 var(--display); font-stretch: condensed; text-transform: uppercase; color: var(--text-3); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.split > .sec { min-width: 0; }
.split > .panel { margin-top: 18px; }

.callout { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding: 13px 16px; background: var(--red-soft); border-left: 3px solid var(--red); }
.callout p { margin: 0; }
.callout .i { color: var(--pink); margin-top: 2px; }
.tip { display: flex; gap: 12px; margin-top: 32px; padding: 14px 16px; background: var(--bg-1); border: 1px solid var(--line); border-left: 3px solid var(--line-2); color: var(--text-2); }
.tip p { margin: 0; }
.tip .i { color: var(--text-3); margin-top: 2px; }
.note { display: flex; gap: 8px; align-items: center; margin: 12px 0; padding: 9px 12px; font-size: 13.5px; }
.note-warn { background: var(--gold-soft); color: var(--gold); border-left: 3px solid var(--gold); }
.fetched { margin-top: 10px; color: var(--text-3); font-size: 12.5px; }
.provenance { margin-top: 28px; }

.empty { padding: 36px 16px; text-align: center; color: var(--text-3); background: var(--bg-1); border: 1px dashed var(--line-2); }
.empty-i { width: 30px; height: 30px; margin-bottom: 8px; color: var(--text-4); }
.empty-t { margin: 0 0 4px; color: var(--text-2); font: italic 600 19px/1.1 var(--display); font-stretch: condensed; text-transform: uppercase; }
.empty-b { max-width: 540px; margin: 0 auto; font-size: 14px; }

.err { padding: 110px var(--gutter) 60px; text-align: center; }
.err-code {
  margin: 0;
  font: italic 700 150px/.9 var(--display); font-stretch: condensed;
  color: transparent;
  -webkit-text-stroke: 2px var(--red);
}
.err h1::before { display: none; }
.err .lede { margin: 0 auto 26px; }
.err p:last-child { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

/* ── Numbers ─────────────────────────────────────────────────────────────── */

/* A row of numbers reads as one instrument strip, not a wall of boxes. */
.grid-stats { display: flex; flex-wrap: wrap; gap: 1px; margin-top: 16px; background: var(--line); border: 1px solid var(--line); }
.stat { flex: 1 1 150px; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 14px 18px 15px; background: var(--bg-1); }
.stat-label { font: 600 14px/1 var(--display); font-stretch: condensed; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.stat-value { font: 700 30px/1.05 var(--display); font-stretch: condensed; font-variant-numeric: tabular-nums; color: #fff; overflow-wrap: anywhere; }
.stat-sub { font-size: 12.5px; color: var(--text-3); }
.stat.tone-good .stat-value { color: var(--pink); }
.stat.tone-bad .stat-value { color: var(--hot); }
.headline .stat-value { font-size: 36px; }

.bar { position: relative; display: inline-block; width: 100%; height: 6px; overflow: hidden; vertical-align: middle; background: var(--bg-4); }
.bar > span { position: absolute; inset: 0 auto 0 0; background: var(--text-3); transform-origin: left; animation: grow .9s var(--ease) both; }
.bar.tone-accent > span { background: linear-gradient(90deg, var(--red-deep), var(--red) 60%, var(--pink)); }
.bar.tone-good > span { background: linear-gradient(90deg, var(--red), var(--hot)); }
.bar.tone-bad > span { background: var(--text-4); }
.bar.tone-warn > span { background: var(--gold); }
ul.bars, ul.pbars { list-style: none; margin: 0; padding: 0; }
ul.bars li, ul.pbars li { display: grid; grid-template-columns: minmax(110px, 1.2fr) 2fr 64px; align-items: center; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
ul.pbars li { grid-template-columns: minmax(130px, 1.1fr) 2fr 150px; }
ul.bars li:last-child, ul.pbars li:last-child { border: 0; }
ul.bars b, ul.pbars b { text-align: right; font-variant-numeric: tabular-nums; }
ul.bars small { color: var(--text-3); }
.facts { list-style: none; margin: 0; padding: 0; }
.facts li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.facts li:last-child { border: 0; }
.facts span { color: var(--text-3); }
.facts b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* How to get it: each way, with how many independent sources name it. */
.ways { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.way { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 14px; background: var(--bg-2); border: 1px solid var(--line); }
.way.is-confirmed { border-color: rgba(95, 207, 143, .32); background: linear-gradient(90deg, rgba(95, 207, 143, .07), transparent 55%), var(--bg-2); }
.way-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--bg-3); color: var(--text-3); }
.way.is-confirmed .way-mark { background: rgba(95, 207, 143, .14); color: var(--green); }
.way-mark .i { width: 16px; height: 16px; vertical-align: 0; }
.way-main b { display: block; font-weight: 650; }
.way-main small { display: block; margin-top: 2px; color: var(--text-3); font-size: 13px; }
.way-src { text-align: right; color: var(--text-3); font: italic 600 14px/1.1 var(--display); font-stretch: condensed; text-transform: uppercase; letter-spacing: .03em; }
.way.is-confirmed .way-src { color: var(--green); }
.way-src small { display: block; margin-top: 3px; color: var(--text-4); font: 500 12px var(--sans); text-transform: none; letter-spacing: 0; }
.table.prices { max-width: 440px; }
.checks-wrap { margin-top: 16px; }
.checks-wrap summary { cursor: pointer; color: var(--text-2); font-size: 13.5px; }
.checks-wrap summary:hover { color: var(--text); }
.checks { list-style: none; margin: 10px 0 0; padding: 0; }
.checks li { display: grid; grid-template-columns: 18px minmax(150px, 210px) minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.checks li:last-child { border: 0; }
.checks b { font-weight: 600; }
.checks b a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.checks b a:hover { color: var(--pink); }
.checks li > span:last-child { color: var(--text-2); }
.check-mark { color: var(--text-4); }
.check-mark .i { width: 14px; height: 14px; vertical-align: -2px; }
.checks li.is-found .check-mark { color: var(--green); }
.chip-ok { color: var(--green); border-color: rgba(95, 207, 143, .32); }
.chip .i { width: 14px; height: 14px; vertical-align: 0; }
@media (max-width: 640px) {
  .way { grid-template-columns: 30px minmax(0, 1fr); }
  .way-src { grid-column: 2; text-align: left; }
  .checks li { grid-template-columns: 18px minmax(0, 1fr); }
  .checks li > span:last-child { grid-column: 2; }
}

/* Ring gauge (player banner). The arc length is set per ring as --p (0..100). */
.gauge { position: relative; display: grid; place-items: center; width: 132px; height: 132px; }
.gauge svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge-track { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 7; }
.gauge-arc { fill: none; stroke: var(--red); stroke-width: 7; stroke-dasharray: var(--p) 100; animation: gauge 1.2s var(--ease) both; }
.gauge.is-hi .gauge-arc { stroke: var(--pink); }
@keyframes gauge { from { stroke-dasharray: 0 100; } }
.gauge-v { position: relative; font: 700 34px/1 var(--display); font-stretch: condensed; font-variant-numeric: tabular-nums; }
.gauges { display: flex; flex-wrap: wrap; gap: 18px 26px; }
.gauge-cell { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.gauge-cell b { font: italic 600 16px/1 var(--display); font-stretch: condensed; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); }
.gauge-cell small { display: block; color: var(--text-3); font-size: 12px; margin-top: 3px; }

/* ── Tables ──────────────────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; background: var(--bg-1); border: 1px solid var(--line); -webkit-overflow-scrolling: touch; }
.panel .table-wrap { background: transparent; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { padding: 10px 14px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); }
.table thead th {
  position: sticky; top: 0;
  background: var(--bg-2);
  color: var(--text-3);
  font: 600 14px/1.1 var(--display); font-stretch: condensed; text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid var(--line-2);
}
.table thead th a { color: var(--text-3); }
.table thead th a:hover { color: var(--pink); }
.table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .014); }
.table tbody tr { transition: background .12s; }
.table tbody tr:hover { background: var(--bg-3); }
.table tbody tr:hover > :first-child { box-shadow: inset 3px 0 0 var(--red); }
.table tbody tr:last-child td, .table tbody tr:last-child th { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table td small { white-space: normal; }
.dmg { font-weight: 700; }
.dmg.is-lethal, td.is-lethal { color: var(--hot); }
.is-best { color: var(--pink); font-weight: 800; }
.who { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.who b { display: block; }
.who small { display: block; color: var(--text-3); font-size: 12px; }
.who:hover b { color: var(--pink); }
.rank-n { font: 700 19px/1 var(--display); font-stretch: condensed; color: var(--text-3); }
.wcell { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.wcell img { width: 76px; height: 42px; object-fit: contain; transition: transform .2s var(--ease); }
.wcell:hover span { color: var(--pink); }
.wcell:hover img { transform: translateX(3px); }

/* Top three on a ladder page. */
.ladder tr.top-1, .ladder tr.top-2, .ladder tr.top-3 { background: linear-gradient(90deg, var(--red-night), transparent 60%); }
.medal {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px;
  font: 700 17px/1 var(--display); font-stretch: condensed;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.medal-1 { background: linear-gradient(160deg, #ffd978, #b8862a); color: #241800; }
.medal-2 { background: linear-gradient(160deg, #eef0f5, #8d93a0); color: #16181d; }
.medal-3 { background: linear-gradient(160deg, #f0b183, #99562c); color: #251205; }

/* ── Pictures ────────────────────────────────────────────────────────────── */

.pic { display: block; object-fit: contain; height: auto; }
.rank-ico { width: auto; flex: none; }
.rank-chip { display: inline-flex; align-items: center; gap: 6px; }

/* Graph-paper backing for weapon renders, like the lobby's inspect screen. */
.grid-bg {
  background-color: #111115;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: -1px -1px;
}

/* ── Home ────────────────────────────────────────────────────────────────── */

.hero { position: relative; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--line); background: #060608; }
.hero-art {
  position: absolute; inset: 0; z-index: -3;
  background-position: 70% 30%;
  background-size: cover;
  filter: grayscale(1) contrast(1.25) brightness(.5);
  animation: drift 28s ease-in-out infinite alternate;
}
.has-art .hero-art { background-image: url("https://z8games.akamaized.net/cfna/templates/assets/naprofile2/web-v37_01062026/static/media/cover-sample.b00d2c21.jpg"); }
/* Tints the grey art toward the site's red, then darkens the side the text sits on. */
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--red); mix-blend-mode: color; opacity: .55; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, #060608 0%, rgba(6, 6, 8, .94) 32%, rgba(6, 6, 8, .45) 64%, rgba(6, 6, 8, .7) 100%),
    linear-gradient(0deg, var(--bg) 0%, rgba(10, 10, 12, 0) 45%),
    linear-gradient(180deg, rgba(6, 6, 8, .6) 0%, rgba(6, 6, 8, 0) 30%);
}
.hero-in { padding-top: 84px; padding-bottom: 72px; }
.hero h1 { max-width: 760px; font-size: clamp(42px, 6.4vw, 78px); line-height: .95; margin-bottom: 18px; animation: slide-in .6s var(--ease) both; }
.hero h1 em { font-style: inherit; color: var(--pink); }
.hero .lede { max-width: 640px; font-size: 17px; animation: rise .6s .08s var(--ease) both; }
.hero-search, .bigsearch {
  display: flex; align-items: center; gap: 10px;
  max-width: 660px; margin-top: 26px; padding: 6px 6px 6px 16px;
  background: rgba(15, 15, 18, .92);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--red);
  color: var(--text-3);
  transition: border-color .15s, box-shadow .15s;
}
.hero-search { animation: rise .6s .16s var(--ease) both; }
.hero-search:focus-within, .bigsearch:focus-within { border-color: var(--red-line); border-left-color: var(--pink); box-shadow: 0 0 0 4px var(--red-soft); }
.hero-search input, .bigsearch input { flex: 1; height: 46px; padding: 0; border: 0; background: transparent; font-size: 16px; }
.hero-search input:focus, .bigsearch input:focus { box-shadow: none; }
.hero-search .btn, .bigsearch .btn { height: 44px; }
.bigsearch { margin-top: 4px; }
.hero-try { margin-top: 16px; color: var(--text-3); font-size: 14px; animation: rise .6s .24s var(--ease) both; }
.hero-try a { margin-left: 12px; color: var(--text-2); border-bottom: 1px solid var(--red-line); }
.hero-try a:hover { color: #fff; border-color: var(--pink); }
.hero-facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 34px 0 0; padding: 0; list-style: none; color: var(--text-3); font-size: 13.5px; animation: rise .6s .3s var(--ease) both; }
.hero-facts b { color: #fff; font: 700 21px/1 var(--display); font-stretch: condensed; margin-right: 5px; font-variant-numeric: tabular-nums; }

.home-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; }
.home-side { min-width: 0; }

.ladder-mini { list-style: none; margin: 0; padding: 0; background: var(--bg-1); border: 1px solid var(--line); }
.ladder-mini a { position: relative; display: grid; grid-template-columns: 32px 30px minmax(0, 1fr) auto 64px; align-items: center; gap: 12px; padding: 9px 14px; color: var(--text); border-bottom: 1px solid var(--line); transition: background .12s; }
.ladder-mini li:last-child a { border: 0; }
.ladder-mini a:hover { background: var(--bg-3); }
.ladder-mini a:hover::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--red); }
.ladder-mini li:nth-child(-n+3) a { background: linear-gradient(90deg, var(--red-night), transparent 70%); }
.lm-n { text-align: center; font: 700 18px/1 var(--display); font-stretch: condensed; color: var(--text-3); font-variant-numeric: tabular-nums; }
.lm-name { min-width: 0; }
.lm-name b, .lm-name small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-name small { color: var(--text-3); font-size: 12px; }
.lm-score { text-align: right; font: 700 19px/1 var(--display); font-stretch: condensed; font-variant-numeric: tabular-nums; }

.rib-mini, .trend { list-style: none; margin: 0; padding: 0; background: var(--bg-1); border: 1px solid var(--line); }
.rib-mini a, .trend a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; color: var(--text); border-bottom: 1px solid var(--line); transition: background .12s; }
.rib-mini li:last-child a, .trend li:last-child a { border: 0; }
.rib-mini a:hover, .trend a:hover { background: var(--bg-3); }
.rib-mini span, .trend span { flex: 1; min-width: 0; }
.rib-mini b, .trend b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rib-mini small, .trend small { display: block; color: var(--text-3); font-size: 12px; }
.rib-mini em, .trend em { font-style: normal; color: var(--text-2); font-size: 13px; font-weight: 600; white-space: nowrap; }
.rib-mini em { color: var(--gold); }
.rib-img { width: 96px; height: 30px; object-fit: cover; flex: none; }

/* Map and mode tiles: grey until pointed at, then in full colour. */
.maptiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.maptiles li:first-child { grid-column: span 2; grid-row: span 2; }
.mapgrid, .mcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.mapcard, .mcard a {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: #fff;
  isolation: isolate;
}
.maptiles .mapcard { height: 100%; aspect-ratio: auto; min-height: 150px; }
.mapcard img, .mcard img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.9) brightness(.62) contrast(1.1);
  transition: filter .35s, transform .5s var(--ease);
}
.mapcard::after, .mcard a::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(6, 6, 8, .92) 0%, rgba(6, 6, 8, .2) 55%, transparent 100%);
}
a.mapcard:hover, .mcard a:hover { color: #fff; border-color: var(--red-line); }
a.mapcard:hover img, .mcard a:hover img { filter: none; transform: scale(1.06); }
.mapcard b, .mapcard small, .mcard-body { position: absolute; left: 12px; right: 12px; }
.mapcard b, .mcard-body b { display: block; font: italic 700 20px/1.05 var(--display); font-stretch: condensed; text-transform: uppercase; letter-spacing: .01em; }
.maptiles li:first-child .mapcard b { font-size: 30px; }
.mapcard b { bottom: 26px; transition: transform .25s var(--ease); }
.mapcard b:last-child { bottom: 10px; }
.mapcard small { bottom: 9px; color: rgba(255, 255, 255, .66); font-size: 12.5px; }
.mcard-body { bottom: 10px; }
.mcard-body small { display: block; color: rgba(255, 255, 255, .66); font-size: 12.5px; }
a.mapcard:hover b { transform: translateY(-3px); color: var(--hot); }
.mapcard.is-dim img, .mcards.is-dim img { filter: grayscale(1) brightness(.4); }

/* Map page: a real screenshot across the top, then its pictures. */
.mhero { position: relative; overflow: hidden; isolation: isolate; min-height: 380px; display: flex; align-items: flex-end; border-bottom: 1px solid var(--line); background: #060608; }
.mhero-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) brightness(.8); animation: drift 30s ease-in-out infinite alternate; }
.mhero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, var(--bg) 0%, rgba(10, 10, 12, .75) 38%, rgba(10, 10, 12, .15) 100%), linear-gradient(90deg, rgba(6, 6, 8, .75), transparent 65%);
}
.mhero-in { padding-top: 90px; padding-bottom: 26px; }
.mhero h1 { font-size: clamp(42px, 6vw, 72px); margin-bottom: 8px; animation: slide-in .6s var(--ease) both; }
.mhero .chips { margin-bottom: 0; }
.mhero .chip { background: rgba(15, 15, 18, .8); }
.shots-group + .shots-group { margin-top: 22px; }
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.shots a { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-2); border: 1px solid var(--line); cursor: zoom-in; }
.shots img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease), filter .3s; }
.shots a:hover { border-color: var(--red-line); }
.shots a:hover img { transform: scale(1.05); }
.shots a::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 -60px 50px -40px rgba(6, 6, 8, .7); pointer-events: none; }
.story p { color: var(--text); font-size: 16px; }
.mode-rows { margin: 0; padding: 0; list-style: none; background: var(--bg-1); border: 1px solid var(--line); }
.mode-row { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr) 18px; align-items: center; gap: 18px; padding: 12px 16px; color: var(--text); border-bottom: 1px solid var(--line); transition: background .12s; }
.mode-rows li:last-child .mode-row { border: 0; }
.mode-row:hover { background: var(--bg-3); color: var(--text); box-shadow: inset 3px 0 0 var(--red); }
.mode-row-name b { display: block; font: italic 700 19px/1.1 var(--display); font-stretch: condensed; text-transform: uppercase; }
.mode-row-name small { color: var(--text-3); font-size: 12.5px; }
.mode-row-text { color: var(--text-2); font-size: 14px; }
.mode-row .i { color: var(--text-4); transition: transform .18s var(--ease), color .15s; }
.mode-row:hover .i { color: var(--pink); transform: translateX(3px); }
.mode-about { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.mode-about .prose p { color: var(--text); font-size: 16px; }
.callout.win { margin-top: 0; }
.callout.win b { display: block; margin-bottom: 4px; font: italic 700 17px/1 var(--display); font-stretch: condensed; text-transform: uppercase; }
.callout.win p { margin: 0 0 6px; }

/* Full-size picture viewer, opened from a gallery. */
.viewer { position: fixed; inset: 0; z-index: 95; display: grid; grid-template-rows: 1fr auto; place-items: center; padding: 56px 72px 20px; background: rgba(3, 3, 5, .94); animation: rise .18s both; }
.viewer img { max-width: 100%; max-height: calc(100vh - 130px); object-fit: contain; box-shadow: 0 30px 80px rgba(0, 0, 0, .8); border: 1px solid var(--line-2); }
.viewer-cap { margin: 12px 0 0; color: var(--text-2); font-size: 14px; text-align: center; }
.viewer button { position: absolute; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: rgba(21, 21, 24, .9); border: 1px solid var(--line-2); color: var(--text); cursor: pointer; transition: background .15s, border-color .15s; }
.viewer button:hover { background: var(--red); border-color: var(--red); }
.viewer .i { width: 22px; height: 22px; }
.viewer-x { top: 14px; right: 14px; }
.viewer-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.viewer-next { right: 14px; top: 50%; transform: translateY(-50%); }

/* ── Weapon cards ────────────────────────────────────────────────────────── */

.wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; }
.wgrid-sm { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.wcard { position: relative; background: var(--bg-1); border: 1px solid var(--line); transition: border-color .2s; }
.wcard::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.wcard:hover { border-color: var(--line-2); }
.wcard:hover::after { transform: none; }
.wcard.is-vip::after { background: var(--gold); }
.wcard-link { display: block; color: var(--text); }
.wcard-link:hover { color: var(--text); }
.wcard-pic { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 300 / 158; padding: 12px 16px 6px; overflow: hidden; }
.wcard-pic { background-color: #111115; background-image: linear-gradient(rgba(255, 255, 255, .033) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .033) 1px, transparent 1px); background-size: 22px 22px; }
/* Target brackets that close in on the gun when the card is pointed at. */
.wcard-pic::before {
  content: "";
  position: absolute; inset: 18px;
  background:
    linear-gradient(var(--pink), var(--pink)) left top / 14px 2px,
    linear-gradient(var(--pink), var(--pink)) left top / 2px 14px,
    linear-gradient(var(--pink), var(--pink)) right top / 14px 2px,
    linear-gradient(var(--pink), var(--pink)) right top / 2px 14px,
    linear-gradient(var(--pink), var(--pink)) left bottom / 14px 2px,
    linear-gradient(var(--pink), var(--pink)) left bottom / 2px 14px,
    linear-gradient(var(--pink), var(--pink)) right bottom / 14px 2px,
    linear-gradient(var(--pink), var(--pink)) right bottom / 2px 14px;
  background-repeat: no-repeat;
  opacity: 0;
  transition: inset .25s var(--ease), opacity .2s;
  pointer-events: none;
}
.wcard.is-vip .wcard-pic::before { filter: hue-rotate(60deg) saturate(.8) brightness(1.3); }
.wcard:hover .wcard-pic::before { inset: 8px; opacity: .9; }
.wcard-pic img { width: 100%; height: 100%; object-fit: contain; transition: transform .35s var(--ease); filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .6)); }
.wcard:hover .wcard-pic img { transform: translateX(4px) scale(1.04); }
.wcard-body { padding: 10px 14px 14px; border-top: 1px solid var(--line); }
.wcard-name { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 19px/1.15 var(--display); font-stretch: condensed; letter-spacing: .01em; }
.wcard:hover .wcard-name { color: #fff; }
.wcard-meta { margin: 2px 0 10px; color: var(--text-3); font-size: 12.5px; }
.wcard-nums { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border-top: 1px solid var(--line); padding-top: 9px; }
.wcard-nums div + div { border-left: 1px solid var(--line); padding-left: 10px; }
.wcard-nums dt { font: 600 12px/1 var(--display); font-stretch: condensed; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); }
.wcard-nums dd { margin: 3px 0 0; font: 700 21px/1 var(--display); font-stretch: condensed; font-variant-numeric: tabular-nums; }
.wcard-nums small { margin-left: 2px; color: var(--text-3); font: 600 12px var(--sans); }
.wcard-bars { display: grid; gap: 7px; padding-top: 4px; }
.wcard-cmp {
  position: absolute; top: 8px; right: 8px;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: rgba(10, 10, 12, .85); border: 1px solid var(--line-2);
  color: var(--text-2); cursor: pointer;
  opacity: 0; transition: opacity .15s, background .15s;
}
.wcard:hover .wcard-cmp, .wcard-cmp:focus, .wcard-cmp.is-on { opacity: 1; }
.wcard-cmp:hover { color: #fff; border-color: var(--pink); }
.wcard-cmp.is-on { background: var(--red); border-color: var(--red); color: #fff; }
.wcard-cmp .i { width: 16px; height: 16px; }

/* Class tabs over the weapon list: CrossFire's black filter bar. */
.chipnav { display: flex; flex-wrap: wrap; margin: 4px 0 14px; padding: 0 4px; background: #060608; border: 1px solid var(--line); }
.chipnav-i {
  position: relative; flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  height: 44px; padding: 0 13px;
  color: var(--text-2);
  font: italic 600 16.5px/1 var(--display); font-stretch: condensed; text-transform: uppercase; letter-spacing: .02em;
  isolation: isolate;
}
.chipnav-i::before { content: ""; position: absolute; inset: 7px 2px; z-index: -1; background: var(--red); transform: skewX(-14deg) scaleX(0); transition: transform .2s var(--ease); }
.chipnav-i small { font: 600 11.5px var(--sans); color: var(--text-4); }
.chipnav-i:hover { color: #fff; }
.chipnav-i.is-on { color: #fff; }
.chipnav-i.is-on::before { transform: skewX(-14deg); }
.chipnav-i.is-on small { color: rgba(255, 255, 255, .75); }
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 10px; }
.filters label { display: flex; flex-direction: column; gap: 5px; font: 600 13px/1 var(--display); font-stretch: condensed; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
.filters .f-search { flex: 1 1 240px; flex-direction: row; align-items: center; gap: 8px; padding-left: 12px; background: var(--bg-2); border: 1px solid var(--line-2); text-transform: none; }
.filters .f-search:focus-within { border-color: var(--pink); }
.f-search input { flex: 1; padding-left: 0; border: 0; background: transparent; }
.f-search input:focus { box-shadow: none; }
.filters .f-check { flex-direction: row; align-items: center; gap: 8px; height: 40px; font: 14px var(--sans); text-transform: none; letter-spacing: 0; color: var(--text-2); }
.f-check input { width: 16px; height: 16px; accent-color: var(--red); }
.view-seg { margin-left: auto; }
.view-seg .i { width: 16px; height: 16px; }

.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 28px 0 0; }
.pager a, .pager span {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 40px; height: 40px; padding: 0 11px;
  background: var(--bg-1); border: 1px solid var(--line-2);
  color: var(--text-2);
  font: 600 17px/1 var(--display); font-stretch: condensed; font-variant-numeric: tabular-nums;
}
.pager a:hover { color: #fff; border-color: var(--pink); }
.pager .pg-cur { background: var(--red); border-color: var(--red); color: #fff; }
.pager .pg-gap { background: none; border: 0; }
.pager .pg-step { text-transform: uppercase; font-style: italic; }
.pager .i { width: 16px; height: 16px; }

/* ── Weapon page ─────────────────────────────────────────────────────────── */

.whero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); isolation: isolate; }
.whero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-color: #0c0c0f;
  background-image:
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%);
}
.whero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; z-index: -1; background: linear-gradient(0deg, var(--bg), transparent); }
.whero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 30px; align-items: center; padding-top: 26px; padding-bottom: 34px; }
.whero-text h1 { margin-top: 4px; }
.whero-pic { position: relative; }
/* The weapon's class, very large and outlined, behind the render. */
.whero-pic::before {
  content: attr(data-word);
  position: absolute; left: 50%; top: 50%; z-index: -1;
  transform: translate(-50%, -54%);
  font: italic 700 clamp(90px, 13vw, 190px)/1 var(--display); font-stretch: condensed;
  text-transform: uppercase; white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(240, 67, 110, .16);
  pointer-events: none;
}
.whero-pic::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 6%; height: 2px; background: linear-gradient(90deg, transparent, var(--red), transparent); opacity: .7; }
.whero-pic img { width: 100%; height: auto; max-height: 390px; object-fit: contain; filter: drop-shadow(0 34px 26px rgba(0, 0, 0, .7)); animation: slide-in .7s var(--ease) both; }
.whero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

.hitbox-in { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 26px; align-items: start; }
.hitbox-fig { position: sticky; top: 90px; padding: 14px 10px; background: radial-gradient(closest-side, rgba(200, 33, 79, .08), transparent), var(--bg); border: 1px solid var(--line); }
.hitmap { display: block; width: 100%; max-width: 210px; height: auto; margin: 0 auto; }
.hitmap .hb { transition: opacity .15s, transform .15s; transform-box: fill-box; transform-origin: center; }
.hitmap .hb > * { stroke: var(--bg); stroke-width: 2; }
.hitmap:hover .hb, .hitmap.has-hl .hb { opacity: .35; }
.hitmap .hb:hover, .hitmap .hb.is-hl { opacity: 1; transform: scale(1.05); }
.hitmap .hb:hover > *, .hitmap .hb.is-hl > * { stroke: #fff; }
.legend-heat { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0 0; font-size: 12px; color: var(--text-3); }
.legend-heat i { width: 120px; height: 8px; background: linear-gradient(90deg, #2a1a20, #6d1530, #b01d48, #f0436e, #ffd6e0); }
tr[data-region-row].is-hl { background: var(--red-soft) !important; }
details.adv > summary { list-style: none; display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; cursor: pointer; }
details.adv > summary::-webkit-details-marker { display: none; }
details.adv > summary .panel-h { margin: 0; }
details.adv > summary::after { content: "Show"; margin-left: auto; color: var(--pink); font: italic 600 16px/1 var(--display); font-stretch: condensed; text-transform: uppercase; }
details.adv[open] > summary::after { content: "Hide"; }
details.adv[open] > summary { margin-bottom: 16px; }

.cmp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 16px; }
.cmp-bar .cmp-add { flex: 1 1 320px; max-width: 580px; margin: 0; }
.btn-sm { height: 36px; padding: 0 16px; font-size: 15px; --cut: 8px; }
.btn-sm .i { width: 15px; height: 15px; }
.wcmp-col { position: relative; }
.wcmp-x {
  position: absolute; top: -2px; right: -4px; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: var(--bg-3); border: 1px solid var(--line-2); color: var(--text-2);
  transition: background .15s, color .15s, border-color .15s;
}
.wcmp-x:hover, .wcmp-x:focus-visible { background: var(--red); border-color: var(--red); color: #fff; }
.wcmp-x .i { width: 16px; height: 16px; }
.wcmp td.num, .wcmp thead th { text-align: center; }
.wcmp td.is-best { background: var(--red-soft); color: #fff; }
.wcmp td.is-lethal { color: var(--hot); }
.wcmp-head small { color: var(--text-3); font: 13px var(--sans); }
.cmp-add { max-width: 580px; margin-bottom: 16px; }
.cmp-add .f-search { position: relative; display: flex; align-items: center; gap: 8px; padding-left: 12px; background: var(--bg-2); border: 1px solid var(--line-2); color: var(--text-3); }
.cmp-add input { flex: 1; border: 0; background: transparent; }
.wcmp th, .wcmp td { white-space: normal; vertical-align: middle; }
.wcmp thead th { position: static; min-width: 180px; background: var(--bg-2); color: var(--text); font: 600 16px var(--display); text-transform: none; letter-spacing: 0; }
.wcmp tbody th { color: var(--text-3); font-weight: 600; white-space: nowrap; }
.wcmp-head { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 30px 2px; color: var(--text); }
.wcmp-head img { width: 180px; height: 100px; object-fit: contain; transition: transform .25s var(--ease); }
.wcmp-head:hover img { transform: translateX(4px); }
.wcmp-head:hover b { color: var(--pink); }
.cmp-radar { display: flex; flex-direction: column; align-items: center; }
.radar { max-width: 100%; height: auto; }
.radar-ring { fill: none; stroke: var(--line-2); stroke-width: 1; }
.radar-spoke { stroke: var(--line); }
.radar-label { fill: var(--text-3); font: 600 13px var(--display); text-transform: uppercase; letter-spacing: .05em; }
.radar-shape { stroke-width: 2; fill-opacity: .16; animation: rise .6s var(--ease) both; transform-origin: center; }
.radar-shape.s1, .lc-series.s1 path { stroke: var(--c1); fill: var(--c1); }
.radar-shape.s2, .lc-series.s2 path { stroke: var(--c2); fill: var(--c2); }
.radar-shape.s3, .lc-series.s3 path { stroke: var(--c3); fill: var(--c3); }
.radar-shape.s4, .lc-series.s4 path { stroke: var(--c4); fill: var(--c4); }
.radar-shape.s5, .lc-series.s5 path { stroke: var(--c5); fill: var(--c5); }
.radar-shape.s6, .lc-series.s6 path { stroke: var(--c6); fill: var(--c6); }
.skey { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 12px 0 0; padding: 0; list-style: none; color: var(--text-2); font-size: 13px; }
.skey i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; transform: skewX(-14deg); }
.skey .s1 { background: var(--c1); } .skey .s2 { background: var(--c2); } .skey .s3 { background: var(--c3); } .skey .s4 { background: var(--c4); } .skey .s5 { background: var(--c5); } .skey .s6 { background: var(--c6); }

/* ── Charts ──────────────────────────────────────────────────────────────── */

.chart { overflow-x: auto; }
.linechart { display: block; width: 100%; min-width: 520px; height: 230px; }
.lc-grid { stroke: var(--line); stroke-width: 1; }
.lc-y, .lc-x { fill: var(--text-3); font: 12px var(--sans); }
.lc-series path { fill: none !important; stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.lc-dot { fill: var(--bg); stroke-width: 2; }
.lc-series.s1 .lc-dot { stroke: var(--c1); } .lc-series.s2 .lc-dot { stroke: var(--c2); } .lc-series.s3 .lc-dot { stroke: var(--c3); } .lc-series.s4 .lc-dot { stroke: var(--c4); } .lc-series.s5 .lc-dot { stroke: var(--c5); } .lc-series.s6 .lc-dot { stroke: var(--c6); }
.donut-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; }
.donut { flex: none; }
.donut-track { fill: none; stroke: var(--bg-4); }
.donut .seg { fill: none; transition: opacity .15s; }
.donut:hover .seg { opacity: .5; }
.donut .seg:hover { opacity: 1; }
.donut-v { fill: #fff; font: 700 20px var(--display); }
.donut-l { fill: var(--text-3); font: 600 12px var(--display); text-transform: uppercase; letter-spacing: .08em; }
.seg.c0 { stroke: var(--bg-4); } .seg.c1 { stroke: var(--c1); } .seg.c2 { stroke: var(--c2); } .seg.c3 { stroke: var(--c3); } .seg.c4 { stroke: var(--c4); } .seg.c5 { stroke: var(--c5); } .seg.c6 { stroke: var(--c6); } .seg.c7 { stroke: var(--c7); } .seg.c8 { stroke: var(--c8); }
.legend { flex: 1; min-width: 210px; margin: 0; padding: 0; list-style: none; }
.legend li { display: grid; grid-template-columns: 12px 1fr auto 58px; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.legend li:last-child { border: 0; }
.legend i { width: 10px; height: 10px; transform: skewX(-14deg); }
.legend b { font-variant-numeric: tabular-nums; }
.legend em { font-style: normal; text-align: right; color: var(--text-3); font-size: 13px; }
.legend .c1 { background: var(--c1); } .legend .c2 { background: var(--c2); } .legend .c3 { background: var(--c3); } .legend .c4 { background: var(--c4); } .legend .c5 { background: var(--c5); } .legend .c6 { background: var(--c6); } .legend .c7 { background: var(--c7); } .legend .c8 { background: var(--c8); }

/* ── Player page ─────────────────────────────────────────────────────────── */

.phero { position: relative; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--line); background: #060608; }
.phero-bg { position: absolute; inset: 0; z-index: -3; background-position: center 20%; background-size: cover; filter: grayscale(1) contrast(1.15) brightness(.5); }
.has-art .phero-bg { background-image: url("https://z8games.akamaized.net/cfna/templates/assets/naprofile2/web-v37_01062026/static/media/cover-sample.b00d2c21.jpg"); }
.phero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--red-deep); mix-blend-mode: color; opacity: .7; }
.phero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(6, 6, 8, .55) 0%, rgba(6, 6, 8, .8) 38%, rgba(6, 6, 8, .95) 100%),
    linear-gradient(0deg, var(--bg) 0%, rgba(10, 10, 12, 0) 50%);
}
.phero-in { display: grid; grid-template-columns: minmax(300px, 430px) minmax(0, 1fr); grid-template-rows: auto auto; gap: 22px 40px; align-items: start; padding-top: 30px; padding-bottom: 28px; }
.phero-char { grid-row: 1 / span 2; align-self: end; margin-bottom: -28px; }
/* Character art is 540x400 with the figures standing on the bottom edge; let it fill its column. */
.phero-char img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .7)); animation: slide-in .7s var(--ease) both; }
.phero-main { grid-column: 2; min-width: 0; }
.phero-main .kicker { color: var(--text-3); font-style: normal; font-weight: 600; letter-spacing: .08em; }
/* A player's name keeps its own capitals ("kATT" is not "KATT"). */
.phero-name { text-transform: none; margin-bottom: 14px; font-size: clamp(40px, 5.4vw, 68px); line-height: .95; overflow-wrap: anywhere; animation: rise .5s var(--ease) both; }
.phero-name::before { display: none; }
.phero-rank { display: flex; align-items: center; gap: 14px; }
.phero-rank .rank-ico { box-shadow: 0 0 0 1px var(--line-2); }
.phero-rank-body { flex: 1; min-width: 0; }
.phero-rank-body b { display: block; font: italic 700 22px/1.1 var(--display); font-stretch: condensed; text-transform: uppercase; }
.phero-rank-body > span { color: var(--text-3); font-size: 13.5px; }
.xpbar { max-width: 380px; margin-top: 8px; }
.xpbar .bar { height: 8px; background: rgba(255, 255, 255, .08); }
.xpbar .bar > span { overflow: hidden; }
.xpbar .bar > span::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); animation: sweep 2.8s 1s ease-in-out infinite; }
.xpbar small { display: block; margin-top: 5px; color: var(--text-3); font-size: 12px; }
.phero-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.clan-tag { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 4px; background: var(--bg-3); border: 1px solid var(--line-2); color: var(--text); font-size: 13px; font-weight: 700; }
.clan-tag:hover { border-color: var(--red-line); color: #fff; }
.clanmark { position: relative; display: inline-block; width: 22px; height: 22px; }
.clanmark img { position: absolute; inset: 0; width: 100%; height: 100%; }
.phero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.phero-actions .btn { height: 38px; padding: 0 20px; font-size: 16px; }
.phero-stats { grid-column: 2; display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: center; }
.phero-stats .gauge { width: 118px; height: 118px; }
.phero-stats .gauge-v { font-size: 30px; }
.phero-more { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); min-width: 150px; }
.phero-more .stat { padding: 11px 14px; background: rgba(15, 15, 18, .85); }
.phero-more .stat-value { font-size: 24px; }

.tabs { display: flex; gap: 2px; overflow-x: auto; margin-top: 6px; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; flex: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 16px 16px 14px;
  color: var(--text-3);
  font: italic 600 18px/1 var(--display); font-stretch: condensed; text-transform: uppercase; letter-spacing: .03em;
  transition: color .15s;
}
.tab:hover { color: var(--text); }
.tab.is-on { color: #fff; }
.tab::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; background: var(--red); transform: skewX(-24deg) scaleX(0); transition: transform .22s var(--ease); }
.tab:hover::after { transform: skewX(-24deg) scaleX(.4); }
.tab.is-on::after { transform: skewX(-24deg) scaleX(1); }
.tab-n { padding: 2px 6px; background: var(--bg-3); color: var(--text-3); font: 600 11.5px var(--sans); font-style: normal; font-variant-numeric: tabular-nums; }
.tab.is-on .tab-n { background: var(--red-soft); color: var(--pink); }
.tabpanel { min-height: 300px; transition: opacity .15s; }
.tabpanel > * { animation: rise .35s var(--ease) both; }
.tabpanel.is-loading { opacity: .4; pointer-events: none; }
.subtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 12px; }
.subtab {
  display: inline-flex; align-items: center;
  height: 34px; padding: 0 14px;
  background: var(--bg-1); border: 1px solid var(--line-2);
  color: var(--text-2);
  font: italic 600 15.5px/1 var(--display); font-stretch: condensed; text-transform: uppercase; letter-spacing: .03em;
}
.subtab:hover { color: #fff; border-color: var(--red-line); }
.subtab.is-on { background: var(--red); border-color: var(--red); color: #fff; }

.cbadges { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.cbadge { margin: 0; text-align: center; }
.cbadge-art { position: relative; max-width: 96px; aspect-ratio: 1; margin: 0 auto; transition: transform .2s var(--ease); }
.cbadge:hover .cbadge-art { transform: translateY(-3px); }
.cbadge-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.cbadge.is-off .cbadge-art { opacity: .45; filter: grayscale(1); }
.cbadge figcaption b { display: block; margin-top: 6px; font: italic 600 16px/1 var(--display); font-stretch: condensed; text-transform: uppercase; }
.cbadge figcaption span { font-size: 11.5px; color: var(--text-3); }

.rk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.rk-card { padding: 14px 16px; background: var(--bg-2); border: 1px solid var(--line); }
.rk-mode { margin: 0 0 8px; font: italic 700 19px/1 var(--display); font-stretch: condensed; text-transform: uppercase; }
.rk-tier { margin: 0 0 12px; }
.rk-card dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; }
.rk-card dt { font: 600 12px/1 var(--display); font-stretch: condensed; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); }
.rk-card dd { margin: 3px 0 0; font: 700 19px/1 var(--display); font-stretch: condensed; font-variant-numeric: tabular-nums; }

.tier {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 11px;
  background: var(--bg-4); color: var(--text-2);
  font: italic 700 14px/1 var(--display); font-stretch: condensed; text-transform: uppercase; letter-spacing: .05em;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.tier i { font-style: normal; opacity: .8; }
.tier-iron { color: #b8b8c2; }
.tier-bronze { color: #e0a377; background: rgba(224, 163, 119, .14); }
.tier-silver { color: #d9dee6; background: rgba(217, 222, 230, .12); }
.tier-gold { color: var(--gold); background: var(--gold-soft); }
.tier-plat { color: #86e3d7; background: rgba(134, 227, 215, .12); }
.tier-diamond { color: #9ccbff; background: rgba(156, 203, 255, .13); }
.tier-master, .tier-gm { color: #c9b0ff; background: rgba(201, 176, 255, .14); }
.tier-myth { color: #fff; background: linear-gradient(90deg, var(--red), #8f1a8a); }
.tier-none { color: var(--text-3); }

.bags { display: grid; gap: 10px; }
.bag { display: grid; grid-template-columns: 74px repeat(4, minmax(0, 1fr)); gap: 10px; align-items: stretch; padding: 10px; background: var(--bg-2); border: 1px solid var(--line); }
.bag-n { align-self: center; font: italic 700 18px/1 var(--display); font-stretch: condensed; text-transform: uppercase; color: var(--text-3); }
.bag-slot { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bag-slot-l { font: 600 12px/1 var(--display); font-stretch: condensed; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); }
.bag-slot a { display: flex; flex-direction: column; color: var(--text); font-size: 12.5px; }
.bag-slot a:hover { color: var(--pink); }
.bag-slot img { width: 100%; max-width: 150px; height: 60px; object-fit: contain; transition: transform .2s var(--ease); }
.bag-slot a:hover img { transform: translateX(3px); }
.bag-slot a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-throw_slot { flex-direction: row; flex-wrap: wrap; }
.slot-throw_slot .bag-slot-l { flex-basis: 100%; }
.slot-throw_slot a { width: calc(33% - 4px); }
.slot-throw_slot a img { height: 40px; }
.slot-throw_slot a span { display: none; }
.bag-empty { color: var(--text-4); font-size: 12.5px; }

.progress-list { list-style: none; margin: 0; padding: 0; }
.progress-list a { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--text); }
.progress-list li:last-child a { border: 0; }
.progress-list a:hover span { color: var(--pink); }
.progress-list a .bar { grid-column: 1 / -1; }
.progress-list b { font-variant-numeric: tabular-nums; }
.pins { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pin img { width: 48px; height: 48px; object-fit: contain; transition: transform .2s var(--ease); }
.pin:hover img { transform: scale(1.12); }
.pin.is-off { opacity: .25; filter: grayscale(1); }
.modes-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 18px; align-items: start; }
.mode-list { max-height: 580px; overflow: auto; margin: 18px 0 0; padding: 0; list-style: none; background: var(--bg-1); border: 1px solid var(--line); }
.mode-list a { display: flex; justify-content: space-between; gap: 8px; padding: 9px 12px; color: var(--text-2); border-bottom: 1px solid var(--line); font-size: 14px; }
.mode-list a:hover { color: var(--text); background: var(--bg-3); }
.mode-list a.is-on { color: #fff; background: var(--red-soft); box-shadow: inset 3px 0 0 var(--red); }
.mode-list small { color: var(--text-3); }
.rib-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; margin-top: 20px; }
.rib-summary .muted { max-width: 520px; margin: 0; }
.rib-rarest h3 { font: italic 600 16px/1 var(--display); font-stretch: condensed; text-transform: uppercase; color: var(--text-3); }
.rib-rarest ol { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rib-rarest li { display: flex; align-items: center; gap: 10px; }
.rib-rarest img { width: 96px; height: 30px; object-fit: cover; }
.rib-rarest b, .rib-rarest small { display: block; }
.rib-rarest small { color: var(--gold); font-size: 12px; }
.tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.tier-step { padding: 10px; background: var(--bg-2); border: 1px solid var(--line); opacity: .5; }
.tier-step.is-on { opacity: 1; border-color: var(--red-line); }
.tier-step img { width: 100%; height: 34px; object-fit: cover; }
.tier-step b { display: block; margin-top: 6px; font-size: 13px; }
.tier-step small { display: block; color: var(--text-3); font-size: 12px; }
.tier-step em { display: block; margin-top: 4px; font-style: normal; font-size: 12px; color: var(--gold); }
.rib-group { margin-top: 26px; }
.rib-group h3 { font-style: italic; text-transform: uppercase; }
.rib-group h3 small { font: 600 13px var(--sans); color: var(--text-3); text-transform: none; }
.ribbons { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.ribbon a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 12px; background: var(--bg-1); border: 1px solid var(--line); color: var(--text); transition: border-color .15s, transform .2s var(--ease); }
.ribbon a:hover { border-color: var(--red-line); color: var(--text); transform: translateY(-2px); }
.ribbon img { width: 100%; height: 44px; object-fit: cover; }
.ribbon-name { margin-top: 4px; font-size: 14px; font-weight: 700; }
.ribbon-desc { font-size: 12.5px; color: var(--text-3); }
.ribbon-meta { margin-top: auto; font-size: 12px; color: var(--gold); }
.ribbon.is-off a { opacity: .42; }
.ribbon.is-off img { filter: grayscale(1); }
.achs { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.ach { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--line); }
.ach img { width: 56px; height: 56px; object-fit: contain; }
.ach b { display: block; font-size: 14px; }
.ach span { display: block; font-size: 12.5px; color: var(--text-3); }
.ach small { display: block; margin-top: 2px; font-size: 12px; color: var(--gold); }
.ach.is-off { opacity: .5; }
.ach.is-done { border-color: var(--red-line); }
.achs-cat .ach { grid-template-columns: 56px 1fr; align-items: start; background: var(--bg-1); }
.stages { display: flex; flex-wrap: wrap; gap: 4px; margin: 7px 0 0; padding: 0; list-style: none; }
.stages li { padding: 1px 7px; background: var(--bg-3); color: var(--text-2); font-size: 11.5px; }
.pips { display: inline-flex; gap: 3px; }
.pips i { width: 9px; height: 9px; background: var(--bg-4); transform: skewX(-16deg); }
.pips i.on { background: var(--pink); }

.igrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
.igrid-tall .itile-pic img { aspect-ratio: 1; }
.itile { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0 0 10px; background: var(--bg-1); border: 1px solid var(--line); color: var(--text); transition: border-color .15s; }
.itile:hover { border-color: var(--red-line); color: var(--text); }
.itile.is-vip { border-color: rgba(232, 182, 80, .28); }
.itile-pic { display: flex; justify-content: center; margin-bottom: 7px; overflow: hidden; background-color: #111115; background-image: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px); background-size: 18px 18px; border-bottom: 1px solid var(--line); }
.itile-pic img { width: 100%; height: auto; aspect-ratio: 300 / 169; object-fit: contain; transition: transform .3s var(--ease); }
.itile:hover .itile-pic img { transform: scale(1.05); }
.itile-name { padding: 0 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 700; }
.itile-sub { padding: 0 10px; color: var(--text-3); font-size: 12px; }

.ccards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.ccard { background: var(--bg-1); border: 1px solid var(--line); overflow: hidden; transition: border-color .15s; }
.ccard:hover { border-color: var(--line-2); }
.ccard > a { display: block; overflow: hidden; color: var(--text); }
.ccard img { width: 100%; aspect-ratio: 300 / 169; object-fit: cover; background: #111115; transition: transform .45s var(--ease), filter .3s; }
.ccard:hover img { transform: scale(1.05); }
.ccard-body { padding: 11px 13px 13px; border-top: 1px solid var(--line); }
.ccard-body b { display: block; font: 600 18px/1.15 var(--display); font-stretch: condensed; }
.ccard-body small { color: var(--text-3); }
.ccard-bar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; margin: 9px 0 6px; font-size: 13px; font-variant-numeric: tabular-nums; }
.ccard-meta { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12.5px; color: var(--text-3); }
.ccard.is-done { border-color: var(--red-line); }
.ccard.is-empty img { filter: grayscale(1) brightness(.6); }
.ccard-detail { margin-top: 10px; }
.cdetail { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.cdetail a { display: flex; flex-direction: column; padding: 6px; background: var(--bg-2); color: var(--text); font-size: 12px; }
.cdetail img { width: 100%; height: 44px; object-fit: contain; }
.cdetail small { color: var(--text-3); }
.cdetail .is-on small { color: var(--pink); }
.cdetail .is-off { opacity: .55; }

.plist { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.prow { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px; background: var(--bg-1); border: 1px solid var(--line); color: var(--text); transition: border-color .15s, background .15s; }
.prow:hover { background: var(--bg-2); border-color: var(--red-line); color: var(--text); }
.prow-wrap { position: relative; min-width: 0; }
.prow-wrap .prow { padding-right: 48px; height: 100%; }
.prow-x {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: none; border: 1px solid transparent; color: var(--text-3); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.prow-x:hover, .prow-x:focus-visible { background: var(--red); border-color: var(--red); color: #fff; }
.prow-x .i { width: 15px; height: 15px; }
.recent-foot { grid-column: 1 / -1; margin: 4px 0 0; }
.prow-n { width: 24px; text-align: right; font: 700 17px/1 var(--display); font-stretch: condensed; color: var(--text-3); }
.prow-main { min-width: 0; }
.prow-main b, .prow-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow-main small { color: var(--text-3); font-size: 12px; }

.cmp-form { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 12px; align-items: end; margin-bottom: 18px; }
.cmp-form label { position: relative; display: flex; flex-direction: column; gap: 5px; font: 600 13px/1 var(--display); font-stretch: condensed; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.vs { align-self: center; padding-top: 18px; color: var(--red); font: italic 700 22px/1 var(--display); font-stretch: condensed; text-transform: uppercase; }
.vs.big { padding: 0; font-size: 44px; }
.cmp-head { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; }
.cmp-card { display: grid; grid-template-columns: 120px 1fr; grid-template-rows: auto auto; gap: 4px 14px; align-items: center; padding: 14px; background: var(--bg-1); border: 1px solid var(--line); color: var(--text); }
.cmp-card:hover { border-color: var(--red-line); color: var(--text); }
.cmp-char { grid-row: span 2; }
.cmp-char img { width: 120px; height: 90px; object-fit: contain; }
.cmp-id { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cmp-id b { font: italic 700 24px/1 var(--display); font-stretch: condensed; }
.cmp-id small { width: 100%; color: var(--text-3); }
.cmp-score { color: var(--pink); font-size: 13px; font-weight: 700; }
.cmp-table, .cmp-kills { padding: 8px 22px; }
.cmp-row { display: grid; grid-template-columns: 90px 1fr 160px 1fr 90px; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.cmp-row:last-child { border: 0; }
.cmp-label { text-align: center; color: var(--text-3); font: 600 15px/1 var(--display); font-stretch: condensed; text-transform: uppercase; letter-spacing: .04em; }
.cmp-v { font: 700 19px/1 var(--display); font-stretch: condensed; font-variant-numeric: tabular-nums; }
.cmp-row .cmp-v:first-child { text-align: right; }
.cmp-v.is-win { color: var(--pink); }
.cmp-bar-a .bar { transform: scaleX(-1); }

.item-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; align-items: center; margin: 8px 0 10px; }
.item-hero.is-tall { grid-template-columns: 420px minmax(0, 1fr); }
.item-pic { display: flex; justify-content: center; padding: 16px; border: 1px solid var(--line); background-color: #111115; background-image: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px); background-size: 24px 24px; }
.item-pic img { width: 100%; height: auto; max-height: 420px; object-fit: contain; animation: rise .6s var(--ease) both; }
.item-body h1 { font-size: clamp(32px, 4vw, 48px); }
.reward { margin-top: 18px; padding: 14px 16px; background: var(--bg-1); border: 1px solid var(--line); border-left: 3px solid var(--gold); }
.reward-nc { display: flex; align-items: center; gap: 12px; }
.reward-nc img { width: 180px; height: auto; }
.reward-line { margin-top: 14px; color: var(--text-2); }
.leaders { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.leaders a { display: grid; grid-template-columns: 32px 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 12px; background: var(--bg-1); border: 1px solid var(--line); color: var(--text); font-size: 14px; transition: border-color .15s, background .15s; }
.leaders a:hover { background: var(--bg-2); border-color: var(--red-line); color: #fff; }
.leaders .is-top a { background: linear-gradient(90deg, var(--red-night), var(--bg-1) 70%); border-color: var(--red-line); }
.leaders .rank-ico { width: 28px; height: 28px; }
.leaders-date { color: var(--text-3); font-size: 12px; white-space: nowrap; }
.rib-list { margin: 0; padding: 0; list-style: none; background: var(--bg-1); border: 1px solid var(--line); }
.rib-row a { display: grid; grid-template-columns: 124px 1fr 210px; align-items: center; gap: 16px; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--text); transition: background .12s; }
.rib-row:last-child a { border: 0; }
.rib-row a:hover { background: var(--bg-3); color: var(--text); box-shadow: inset 3px 0 0 var(--red); }
.rib-row .rib-img { width: 124px; height: 39px; }
.rib-text b { display: block; }
.rib-text small { color: var(--text-3); }
.rib-count { display: grid; gap: 4px; }
.rib-count em { text-align: right; font-style: normal; font-size: 13px; font-weight: 700; color: var(--gold); }
.rib-hero { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 34px; align-items: center; margin: 8px 0; }
.rib-big { width: 100%; height: auto; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .9), 0 0 0 1px var(--line-2); animation: rise .6s var(--ease) both; }


.ranks { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 8px; }
.rank-row { display: grid; grid-template-columns: 44px 1fr auto auto; align-items: center; gap: 12px; padding: 8px 12px; background: var(--bg-1); border: 1px solid var(--line); transition: border-color .15s; }
.rank-row:hover { border-color: var(--line-2); }
.rank-row.is-unknown { opacity: .45; }
.rank-title b, .rank-title small { display: block; }
.rank-title small { color: var(--text-3); }
.rank-exp { text-align: right; font-size: 13.5px; font-variant-numeric: tabular-nums; }

.results { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.result { display: flex; align-items: center; gap: 12px; padding: 10px; background: var(--bg-1); border: 1px solid var(--line); color: var(--text); transition: border-color .15s; }
.result:hover { border-color: var(--red-line); color: var(--text); }
.result img { flex: none; width: 80px; height: 45px; object-fit: contain; }
.result-player img, .result-player .pic { width: 36px; height: 36px; }
.result span b, .result span small { display: block; }
.result span small { color: var(--text-3); font-size: 12.5px; }
.result-ico { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--bg-3); color: var(--text-3); }

.prose { max-width: 820px; }
.prose h2 { margin-top: 34px; font-size: 24px; }
.prose p { color: var(--text-2); }
.prose b { color: var(--text); }

/* ── Android app page ────────────────────────────────────────────────────── */

.btn-lg { height: 52px; padding: 0 30px; font-size: 20px; --cut: 12px; }
.apphero { position: relative; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--line); background: #060608; }
.apphero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, #060608 0%, rgba(6, 6, 8, .9) 45%, rgba(6, 6, 8, .6) 100%),
    linear-gradient(0deg, var(--bg), transparent 40%);
}
.has-art .apphero::after {
  content: ""; position: absolute; inset: 0; z-index: -2; opacity: .55;
  background: url("https://z8games.akamaized.net/cfna/templates/assets/images/cff-bg-social.jpg") center / cover;
}
.apphero-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-top: 56px; padding-bottom: 40px; }
.apphero h1 { font-size: clamp(40px, 5.6vw, 70px); animation: slide-in .6s var(--ease) both; }
.apphero h1::before { content: ""; display: inline-block; width: .14em; height: .74em; margin-right: .3em; background: var(--red); transform: skewX(-16deg); }
.app-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 26px; }
.app-cta + .app-cta { margin-top: 12px; }
.app-cta .btn-lg { min-width: 250px; justify-content: center; }
.app-meta { color: var(--text-3); font-size: 13.5px; }
.app-install { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px 24px; }
.app-install h3 { margin: 0 0 12px; font: italic 700 22px/1 var(--display); font-stretch: condensed; text-transform: uppercase; }
.apphero-art { margin: 0; justify-self: center; }
.apphero-art img { display: block; width: 100%; max-width: 560px; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .8)); animation: rise .7s .1s var(--ease) both; }
.phone-mock { display: grid; place-items: center; width: 220px; aspect-ratio: 9 / 18; border: 2px solid var(--line-2); border-radius: 28px; background: var(--bg-1); color: var(--text-4); }
.phone-mock .i { width: 64px; height: 64px; }
.app-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--line); border: 1px solid var(--line); }
.app-feats li { padding: 18px 20px; background: var(--bg-1); }
.app-feats b { display: block; margin-bottom: 6px; font: italic 700 21px/1 var(--display); font-stretch: condensed; text-transform: uppercase; }
.app-feats span { color: var(--text-2); font-size: 14.5px; }
.app-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 10px; }
.app-steps li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 14px 16px; background: var(--bg-1); border: 1px solid var(--line); counter-increment: step; }
.app-steps li::before { content: counter(step); grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; background: var(--red); color: #fff; font: italic 700 22px/1 var(--display); clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.app-steps b { font: italic 700 19px/1.1 var(--display); font-stretch: condensed; text-transform: uppercase; }
.app-steps span { color: var(--text-2); font-size: 14.5px; }
.app-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 44px; padding: 22px 26px; background: linear-gradient(90deg, var(--red-night), var(--bg-1) 70%); border: 1px solid var(--line); border-left: 3px solid var(--red); }
.app-band b { display: block; font: italic 700 26px/1 var(--display); font-stretch: condensed; text-transform: uppercase; }
.app-band span { color: var(--text-2); }

/* ── Search palette ──────────────────────────────────────────────────────── */

.palette { position: fixed; inset: 0; z-index: 90; display: flex; justify-content: center; align-items: flex-start; padding: 11vh 16px 16px; }
.palette-backdrop { position: absolute; inset: 0; background: rgba(3, 3, 5, .78); backdrop-filter: blur(3px); animation: rise .15s both; }
.palette-box {
  position: relative;
  display: flex; flex-direction: column;
  width: 100%; max-width: 690px; max-height: 76vh;
  overflow: hidden;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-top: 2px solid var(--red);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 1);
  animation: rise .18s var(--ease) both;
}
.palette-field { display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--line); color: var(--text-3); }
.palette-field input { flex: 1; height: 58px; padding: 0; border: 0; background: transparent; font-size: 17px; }
.palette-field input:focus { box-shadow: none; }
.palette-results { overflow-y: auto; padding: 6px; }
.pal-group { padding: 12px 10px 5px; font: 600 13px/1 var(--display); font-stretch: condensed; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); }
.pal-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 10px; color: var(--text); }
.pal-item img { flex: none; width: 64px; height: 36px; object-fit: contain; background: var(--bg-3); }
.pal-item.is-player img { width: 36px; height: 36px; }
.pal-item b { display: block; font-size: 14.5px; }
.pal-item small { display: block; color: var(--text-3); font-size: 12.5px; }
.pal-item.is-active, .pal-item:hover { background: var(--bg-3); color: #fff; box-shadow: inset 3px 0 0 var(--red); }
.pal-empty { padding: 26px; text-align: center; color: var(--text-3); }
.pal-ico { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--bg-3); color: var(--text-2); }
.palette-foot { display: flex; flex-wrap: wrap; gap: 14px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-3); }
.palette-foot kbd { margin-right: 3px; }

.suggest { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; padding: 4px; background: var(--bg-1); border: 1px solid var(--line-2); border-top: 2px solid var(--red); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .9); font: 400 14px var(--sans); text-transform: none; letter-spacing: 0; }
.suggest a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; color: var(--text); font-size: 14px; }
.suggest a img { width: 56px; height: 32px; object-fit: contain; }
.suggest a small { display: block; color: var(--text-3); font-size: 12px; }
.suggest a:hover, .suggest a.is-active { background: var(--bg-3); }

.tray { position: fixed; left: 50%; bottom: 18px; z-index: 60; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 24px); padding: 8px 8px 8px 14px; background: rgba(15, 15, 18, .97); border: 1px solid var(--line-2); border-top: 2px solid var(--red); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 1); transform: translateX(-50%); animation: rise .25s var(--ease) both; }
.tray-items { display: flex; gap: 6px; overflow-x: auto; }
.tray-item { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 10px; background: var(--bg-3); font-size: 13px; white-space: nowrap; }
.tray-item button { display: inline-flex; padding: 2px; background: none; border: 0; color: var(--text-3); cursor: pointer; }
.tray-item button:hover { color: var(--pink); }
.tray-item .i { width: 14px; height: 14px; }
.tray .btn { height: 34px; padding: 0 18px; font-size: 15px; }
.toast { position: fixed; left: 50%; bottom: 80px; z-index: 95; padding: 9px 16px; background: var(--red); color: #fff; font-weight: 700; font-size: 14px; transform: translateX(-50%); animation: rise .2s var(--ease) both; }

/* ── Narrow screens ──────────────────────────────────────────────────────── */

@media (max-width: 1200px) {
  .search-btn { min-width: 0; }
  .search-btn-text, .search-btn kbd { display: none; }
  .nav-link { padding: 0 11px; }
}
@media (max-width: 980px) {
  :root { --gutter: 16px; }
  .nav-toggle { display: inline-flex; }
  .nav { position: fixed; inset: 64px 0 auto 0; display: none; max-height: calc(100vh - 64px); overflow-y: auto; padding: 8px 16px 22px; background: var(--bg-1); border-bottom: 1px solid var(--line-2); }
  .nav.is-open { display: block; }
  .nav-list { flex-direction: column; }
  .nav-item { display: block; }
  .nav-link { padding: 14px 4px 8px; font-size: 22px; color: var(--text); }
  .nav-link::before, .nav-item.is-current > .nav-link::after, .nav-caret { display: none; }
  .nav-item.is-current > .nav-link { color: var(--pink); }
  .menu { position: static; min-width: 0; padding: 0 0 6px 6px; opacity: 1; visibility: visible; transform: none; background: none; border: 0; box-shadow: none; }
  .menu span { display: none; }
  .menu a { padding: 7px 10px; }
  .split, .home-top, .item-hero, .item-hero.is-tall, .whero-in, .rib-hero, .hitbox-in, .modes-layout, .foot-in, .mode-about, .apphero-in { grid-template-columns: minmax(0, 1fr); }
  .viewer { padding: 56px 12px 16px; }
  .viewer-prev, .viewer-next { top: auto; bottom: 12px; transform: none; }
  .hitbox-fig { position: static; }
  .mode-list { max-height: 260px; }
  .maptiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rib-row a { grid-template-columns: 96px 1fr; }
  .rib-row .rib-img { width: 96px; height: 30px; }
  .rib-count { grid-column: 1 / -1; }
  .cmp-row { grid-template-columns: 70px 1fr 110px 1fr 70px; gap: 8px; }
  .whero-pic { order: -1; }
}
@media (max-width: 720px) {
  .phero-in { grid-template-columns: minmax(0, 1fr); }
  .phero-char, .phero-main, .phero-stats { grid-column: 1; grid-row: auto; }
  .phero-char { width: 100%; max-width: 380px; margin: 0 auto -8px; }
  .chipnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .chipnav::-webkit-scrollbar { display: none; }
  .phero-stats { justify-content: center; }
  .phero-stats .gauge { width: 96px; height: 96px; }
  .phero-stats .gauge-v { font-size: 25px; }
  .phero-more { display: none; }
  .bag { grid-template-columns: 1fr 1fr; }
  .bag-n { grid-column: 1 / -1; }
  .cbadges { grid-template-columns: repeat(3, 1fr); }
  .cmp-form { grid-template-columns: minmax(0, 1fr); }
  .cmp-form .vs { padding: 0; text-align: center; }
  .cmp-head { grid-template-columns: minmax(0, 1fr); }
  .cmp-row { grid-template-columns: 1fr 1fr; }
  .cmp-row .cmp-bar { display: none; }
  .cmp-label { grid-column: 1 / -1; grid-row: 1; text-align: left; }
  .cmp-row .cmp-v:first-child { text-align: left; }
  .cmp-row .cmp-v:last-child { text-align: right; }
  ul.pbars li { grid-template-columns: 1fr 120px; }
  ul.pbars .pbar { grid-column: 1 / -1; grid-row: 2; }
  .ladder-mini a { grid-template-columns: 26px 28px minmax(0, 1fr) 56px; }
  .ladder-mini .tier { display: none; }
  .hero-in { padding-top: 54px; padding-bottom: 48px; }
  .hero::after { background: linear-gradient(0deg, var(--bg) 0%, rgba(6, 6, 8, .8) 50%, rgba(6, 6, 8, .7) 100%); }
  .hero-search .btn { display: none; }
  .ranks, .achs { grid-template-columns: minmax(0, 1fr); }
  .view-seg { margin-left: 0; }
  .palette { padding-top: 12px; }
  .palette-foot span:last-child { display: none; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .mode-row { grid-template-columns: minmax(0, 1fr) 18px; gap: 6px 12px; }
  .mode-row-text { grid-column: 1; grid-row: 2; }
  .err-code { font-size: 110px; }
}
@media (max-width: 440px) {
  .maptiles { grid-template-columns: minmax(0, 1fr); }
  .maptiles li:first-child { grid-column: auto; grid-row: auto; }
  .wgrid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .wcard-nums { grid-template-columns: 1fr 1fr; }
  .wcard-nums div:nth-child(3) { display: none; }
  .igrid { grid-template-columns: 1fr 1fr; }
  .stat-value { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Map layout: the plan drawn from the game's collision, with markers laid over it. */
.layout { margin: 0; }
.layout-plan { position: relative; display: block; max-width: 620px; margin: 0 auto; cursor: zoom-in; background: var(--bg-1); border: 1px solid var(--line); background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px; background-position: -1px -1px; }
.layout-plan img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: auto; }
.layout-marks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.layout-marks circle { stroke: rgba(8, 8, 10, .85); stroke-width: 2; }
.layout-marks .side-a { fill: var(--pink); }
.layout-marks .side-b { fill: var(--steel); }
.layout-marks .side-n { fill: #d4d6de; }
.layout-marks .site circle { fill: rgba(232, 182, 80, .16); stroke: var(--gold); stroke-width: 4; }
.layout-marks .site text { fill: var(--gold); font-family: var(--display); font-style: italic; font-weight: 700; text-anchor: middle; paint-order: stroke; stroke: rgba(8, 8, 10, .9); stroke-width: 6; }
.layout-north { position: absolute; top: 10px; right: 12px; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line-2); border-radius: 50%; background: rgba(10, 10, 12, .8); color: var(--text-2); font: italic 700 13px/1 var(--display); }
.layout-north::before { content: ""; position: absolute; top: -7px; border: 5px solid transparent; border-bottom-color: var(--pink); }
.layout-scale { position: absolute; left: 12px; bottom: 12px; min-width: 40px; }
.layout-scale i { display: block; height: 6px; border: 2px solid var(--text); border-top: 0; }
.layout-scale b { position: absolute; left: 0; bottom: 10px; color: var(--text); font: 600 12px var(--sans); white-space: nowrap; text-shadow: 0 1px 3px #000; }
.layout-plan:hover { border-color: var(--red-line); }
.layout figcaption { max-width: 620px; margin: 12px auto 0; }
.layout-key { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 8px; padding: 0; font-size: 13px; color: var(--text-2); }
.layout-key li { display: inline-flex; align-items: center; gap: 7px; }
.layout-key i { width: 11px; height: 11px; border-radius: 50%; }
.layout-key .k-a { background: var(--pink); }
.layout-key .k-b { background: var(--steel); }
.layout-key .k-n { background: #d4d6de; }
.layout-key .k-site { border: 2px solid var(--gold); background: rgba(232, 182, 80, .16); }
.layout-key .k-floor { width: 28px; height: 10px; border-radius: 0; background: linear-gradient(90deg, rgb(46, 46, 54), rgb(200, 203, 212)); }
.layout code { font-family: var(--mono); font-size: 12px; color: var(--text-2); }

/* App screenshots: a phone that slides (or, with reduced motion, fades) between real screens of the app.
   Without the script it is a strip that scrolls sideways. */
.appshots { margin: 0; width: min(300px, 78vw); animation: rise .7s .1s var(--ease) both; }
.phone { position: relative; padding: 9px; border: 1px solid var(--line-2); border-radius: 36px; background: linear-gradient(160deg, #2a2a31, #0c0c0f 55%); box-shadow: 0 34px 60px rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(255, 255, 255, .04); }
.phone::after { content: ""; position: absolute; top: 40%; right: -3px; width: 3px; height: 54px; border-radius: 0 2px 2px 0; background: #2a2a31; }
.phone-screen { overflow: hidden; aspect-ratio: 515 / 1143; border-radius: 27px; background: #0a0a0c; }
.appshots-track { display: flex; height: 100%; margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-y; }
.appshots-track::-webkit-scrollbar { display: none; }
.appshot { flex: 0 0 100%; height: 100%; scroll-snap-align: start; }
.appshot a { display: block; height: 100%; cursor: zoom-in; }
.apphero-art .appshot img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; filter: none; animation: none; -webkit-user-drag: none; user-select: none; }
.appshot-cap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.appshots.is-live .appshots-track { overflow: visible; scroll-snap-type: none; transition: transform .75s var(--ease); }
.appshots.is-fade .appshots-track { position: relative; display: block; overflow: hidden; }
.appshots.is-fade .appshot { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.appshots.is-fade .appshot.is-on { opacity: 1; }
.appshots-nav { display: none; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; }
.appshots.is-live .appshots-nav, .appshots.is-fade .appshots-nav { display: flex; }
.appshots-btn { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line-2); border-radius: 50%; background: var(--bg-2); color: var(--text-2); cursor: pointer; }
.appshots-btn:hover, .appshots-btn:focus-visible { color: var(--text); border-color: var(--red-line); }
.appshots-dots { display: flex; gap: 6px; }
.appshots-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: var(--line-2); cursor: pointer; transition: width .3s var(--ease), background .3s; }
.appshots-dots button[aria-selected="true"] { width: 22px; background: var(--pink); }
.appshots-caption { min-height: 2.8em; margin-top: 10px; color: var(--text-2); font-size: 13.5px; text-align: center; }
@media (prefers-reduced-motion: reduce) { .appshots { animation: none; } .appshots.is-live .appshots-track { transition: none; } }