/* ════════════════════════════════════════════════════════════════
   DXED ARENA — LOBBY DESIGN SYSTEM (complete rebuild)

   One game shell: slim header · cinematic stage · one footer line.
   Charcoal surfaces, off-white text, amber reserved for the primary
   action and active selection, cyan only for live/technical states,
   red only for danger. Sentence case by default; uppercase micro-
   labels only for short category tags. One scroll area per screen.

   Layers:  shell (.gs-*) · play (.ph2-*) · mode browser (.mb2-*) ·
   career (.cr-*) · loadout (.lo2-*) · operators (.op2-*) ·
   armory (.av-* restyled) · private match (.pv-* restyled) ·
   drawers · shared components · states · responsive.
   ════════════════════════════════════════════════════════════════ */

#scrMenu {
  /* ── tokens ── */
  --ink0: #0a0c0f;            /* deepest — header/footer */
  --ink1: #101319;            /* panel base */
  --ink2: #171b23;            /* raised surface */
  --ink3: #1f2530;            /* hover surface */
  --line: rgba(255,255,255,.07);
  --line2: rgba(255,255,255,.13);
  --tx:  #edeae4;             /* soft off-white */
  --tx2: #a7adb7;             /* secondary */
  --tx3: #737a86;             /* metadata */
  --amb: #ffa54d;             /* primary action / selection */
  --amb-deep: #e0801f;
  --cyn: #2fe3cb;             /* live / technical only */
  --red: #ff5a5e;             /* danger only */
  --r-s: 8px; --r-m: 12px; --r-l: 16px;
  --head-h: 54px; --foot-h: 36px;
  --ease: cubic-bezier(.22,.9,.34,1);

  position: fixed; inset: 0;
  display: block;
  font-family: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  color: var(--tx);
  overflow: hidden;
  letter-spacing: 0;         /* kill the old tracked-out default */
}
#scrMenu *, #scrMenu *::before, #scrMenu *::after { box-sizing: border-box; }

/* Subtle top/bottom scene control — the 3D stays cinematic, text stays readable */
#scrMenu::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    linear-gradient(180deg, rgba(6,8,10,.88) 0%, rgba(6,8,10,.25) 14%, transparent 30%),
    linear-gradient(0deg, rgba(6,8,10,.92) 0%, rgba(6,8,10,.3) 12%, transparent 26%);
}

/* ── focus visibility (keyboard + controller) ── */
#scrMenu :focus { outline: none; }
#scrMenu :focus-visible, #scrMenu .gp-focus {
  outline: 2px solid var(--amb); outline-offset: 2px; border-radius: 6px;
}

/* ── one subtle scrollbar style everywhere ── */
#scrMenu ::-webkit-scrollbar { width: 8px; height: 8px; }
#scrMenu ::-webkit-scrollbar-track { background: transparent; }
#scrMenu ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 4px; }
#scrMenu ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.24); }
#scrMenu * { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }

/* ════════════ SHELL ════════════ */

.gs-top {
  position: absolute; top: 0; left: 0; right: 0; height: var(--head-h); z-index: 30;
  display: flex; align-items: center; gap: 22px;
  padding: 0 22px;
  background: color-mix(in srgb, var(--ink0) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.gs-brand { display: flex; align-items: center; gap: 10px; flex: none; }
.gs-logo {
  font-weight: 800; font-size: 17px; letter-spacing: .04em; color: var(--tx);
  display: flex; align-items: baseline; gap: 6px;
}
.gs-logo::before { content: ''; width: 4px; height: 16px; background: var(--amb); border-radius: 1px; align-self: center; }
.gs-logo span { color: var(--tx3); font-weight: 600; }
.gs-env {
  font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--cyn);
  padding: 2px 7px; border: 1px solid color-mix(in srgb, var(--cyn) 35%, transparent); border-radius: 4px;
}

/* Primary nav — one animated underline. Shrinks + scrolls if the tabs (now
   six) can't all fit, so no tab is ever clipped behind the profile cluster. */
.gs-nav { display: flex; align-items: stretch; gap: 4px; height: 100%; margin: 0 auto;
  flex: 1 1 auto; min-width: 0; justify-content: center; overflow-x: auto; scrollbar-width: none; }
.gs-nav::-webkit-scrollbar { display: none; }
.gs-nav .gs-tab {
  position: relative; display: flex; align-items: center; flex: 0 0 auto;
  padding: 0 16px; background: none; border: none; cursor: pointer;
  font: 700 14.5px/1 'Rajdhani', sans-serif; letter-spacing: .05em; text-transform: uppercase;
  color: var(--tx3); transition: color .16s var(--ease);
}
.gs-nav .gs-tab:hover { color: var(--tx2); }
.gs-nav .gs-tab.sel { color: var(--tx); }
.gs-nav .gs-tab::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px;
  background: var(--amb); border-radius: 1px;
  transform: scaleX(0); transition: transform .2s var(--ease);
}
.gs-nav .gs-tab.sel::after { transform: scaleX(1); }

.gs-right { display: flex; align-items: center; gap: 8px; flex: none; }
.gs-icobtn {
  position: relative; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: var(--r-s); color: var(--tx2); cursor: pointer;
  transition: color .15s, background .15s;
}
.gs-icobtn:hover { color: var(--tx); background: var(--ink3); }
.gs-icobtn svg { width: 18px; height: 18px; }
.gs-newsdot {
  position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--amb);
}
.gs-party {
  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px;
  background: none; border: 1px solid var(--line); border-radius: var(--r-s);
  color: var(--tx2); cursor: pointer; font: 600 12.5px 'Rajdhani', sans-serif;
  transition: color .15s, border-color .15s, background .15s;
}
.gs-party:hover { color: var(--tx); border-color: var(--line2); background: var(--ink3); }
.gs-party svg { width: 16px; height: 16px; }
.gs-party.open { border-color: var(--amb); color: var(--tx); }
.gs-ava {
  display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 5px 0 12px;
  background: none; border: none; border-radius: var(--r-s); cursor: pointer;
  color: var(--tx); font: 700 13px 'Rajdhani', sans-serif;
  transition: background .15s;
}
.gs-ava:hover { background: var(--ink3); }
.gs-lvl {
  min-width: 24px; height: 24px; padding: 0 5px; display: flex; align-items: center; justify-content: center;
  background: var(--ink3); border: 1px solid var(--line2); border-radius: 6px;
  font-size: 11.5px; font-weight: 800; color: var(--amb);
}

/* Stage — everything between header and footer. ONE scroll area: the
   stage itself. Sections are designed to fit at 1080p, so the scrollbar
   only exists on short windows — content is never cut off. */
.gs-stage {
  position: absolute; top: var(--head-h); bottom: var(--foot-h); left: 0; right: 0;
  z-index: 10; overflow-y: auto; overflow-x: hidden;
}

/* Footer — one slim line. */
.gs-foot {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--foot-h); z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 0 22px;
  background: color-mix(in srgb, var(--ink0) 88%, transparent);
  border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--tx3);
}
.gs-keys { display: flex; gap: 16px; align-items: center; }
.gs-keys kbd {
  font: 700 10px 'Rajdhani', sans-serif; color: var(--tx2);
  background: var(--ink3); border: 1px solid var(--line2); border-bottom-width: 2px;
  border-radius: 4px; padding: 1px 5px; margin-right: 2px;
}
.gs-build { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.gs-build i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyn); box-shadow: 0 0 8px var(--cyn); }
.gs-build em { font-style: normal; color: var(--tx3); font-weight: 500; }
.menu-queue { display: flex; align-items: center; gap: 10px; color: var(--tx); font-weight: 600; }
.menu-queue .spin {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--line2); border-top-color: var(--amb);
  animation: gsSpin .8s linear infinite;
}
@keyframes gsSpin { to { transform: rotate(360deg); } }

.gs-gate {
  position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  background: rgba(8,10,12,.9); font-size: 16px; gap: 6px;
}
.gs-gate .accent { color: var(--amb); }

/* ── Buttons ── */
.gs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 44px; padding: 0 26px; border-radius: var(--r-s); border: none; cursor: pointer;
  font: 700 15px 'Rajdhani', sans-serif; letter-spacing: .04em; text-transform: uppercase;
  transition: transform .12s var(--ease), filter .15s, background .15s, border-color .15s;
}
.gs-btn:active { transform: translateY(1px) scale(.99); }
.gs-btn.primary {
  background: linear-gradient(180deg, var(--amb), var(--amb-deep)); color: #171006;
  box-shadow: 0 6px 24px -8px color-mix(in srgb, var(--amb) 60%, transparent);
}
.gs-btn.primary:hover { filter: brightness(1.08); }
.gs-btn.ghost {
  background: color-mix(in srgb, var(--ink2) 80%, transparent); color: var(--tx2);
  border: 1px solid var(--line2);
}
.gs-btn.ghost:hover { color: var(--tx); border-color: rgba(255,255,255,.25); }
.gs-btn.small { height: 32px; padding: 0 14px; font-size: 12px; }
.gs-btn.danger { background: none; border: 1px solid color-mix(in srgb, var(--red) 45%, transparent); color: var(--red); }
.gs-btn.danger:hover { background: color-mix(in srgb, var(--red) 12%, transparent); }
.gs-btn:disabled { opacity: .45; cursor: default; transform: none; }

/* ── Section transitions ── */
.sec-in { animation: gsSecIn .24s var(--ease); }
@keyframes gsSecIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── Micro label (the ONLY uppercase metadata style) ── */
.gs-kick {
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--amb);
}
.gs-sub { font-size: 14px; color: var(--tx2); line-height: 1.5; }

/* ════════════ PLAY SCREEN ════════════
   The emotional center: title top-left, rules-at-a-glance, one big
   PLAY. The operator owns the right half of the frame. The playlist
   rail is one horizontal strip along the bottom. */

.ph2 { position: relative; min-height: 100%; display: flex; flex-direction: column; }
.ph2-main {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 24px clamp(24px, 4vw, 64px) 8px;
  max-width: min(640px, 48vw);           /* the character safe zone starts here */
}
.ph2-main .gs-kick { margin-bottom: 8px; }
.ph2-title {
  margin: 0 0 10px; font-size: clamp(38px, 4.6vw, 58px); font-weight: 800;
  line-height: .95; letter-spacing: .01em; text-transform: uppercase; color: var(--tx);
  text-shadow: 0 2px 24px rgba(0,0,0,.5);
}
.ph2-desc { margin: 0 0 18px; max-width: 460px; font-size: 14.5px; line-height: 1.55; color: var(--tx2); }

/* Rules at a glance — ONE quiet line, not a grid of boxes */
.ph2-facts {
  display: flex; flex-wrap: wrap; gap: 6px 22px; margin-bottom: 14px;
  font-size: 13px; color: var(--tx2);
}
.ph2-facts b { color: var(--tx); font-weight: 700; }

/* Live population — quiet, cyan only on the live dot */
.ph2-pop { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--tx3); margin-bottom: 20px; }
.ph2-pop i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyn); box-shadow: 0 0 7px var(--cyn); }
.ph2-pop b { color: var(--tx2); font-weight: 600; }

/* Selected-modes chips (Quick Play only) */
.ph2-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; max-width: 480px; }
.ph2-chips .chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px;
  font-size: 12px; font-weight: 600; color: var(--tx2);
  background: color-mix(in srgb, var(--ink2) 85%, transparent);
  border: 1px solid var(--line); border-radius: 99px;
}
.ph2-chips .chip svg, .ph2-chips .chip i svg { width: 12px; height: 12px; }
.ph2-chips .edit {
  cursor: pointer; color: var(--amb); border-color: color-mix(in srgb, var(--amb) 35%, transparent);
  background: none; transition: background .15s;
}
.ph2-chips .edit:hover { background: color-mix(in srgb, var(--amb) 12%, transparent); }

/* Quiet inline rule controls (score / clock) */
.ph2-ctls { display: flex; gap: 14px; margin: 0 0 20px; flex-wrap: wrap; }
.ph2-ctl { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--tx3); }
.ph2-ctl select, .ph2-ctl input {
  height: 34px; min-width: 150px; padding: 0 10px;
  background: color-mix(in srgb, var(--ink2) 90%, transparent);
  border: 1px solid var(--line); border-radius: var(--r-s);
  color: var(--tx); font: 600 13px 'Rajdhani', sans-serif;
}
.ph2-ctl select:hover, .ph2-ctl input:hover { border-color: var(--line2); }

/* Segmented pick (trickshot ruleset, lab options) */
.ph2-seg { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.ph2-seg button {
  height: 32px; padding: 0 14px; border-radius: 99px; cursor: pointer;
  background: none; border: 1px solid var(--line); color: var(--tx2);
  font: 600 12.5px 'Rajdhani', sans-serif; transition: all .15s var(--ease);
}
.ph2-seg button:hover { border-color: var(--line2); color: var(--tx); }
.ph2-seg button.on { border-color: var(--amb); color: var(--amb); background: color-mix(in srgb, var(--amb) 10%, transparent); }
.ph2-lab { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tx3); margin: 0 0 8px; }

/* THE action row — one hero button, small quiet seconds */
.ph2-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ph2-go {
  display: inline-flex; align-items: center; gap: 12px;
  height: 58px; padding: 0 44px; border: none; border-radius: 10px; cursor: pointer;
  background: linear-gradient(180deg, var(--amb), var(--amb-deep)); color: #171006;
  font: 800 19px 'Rajdhani', sans-serif; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 10px 40px -10px color-mix(in srgb, var(--amb) 70%, transparent);
  transition: transform .14s var(--ease), filter .15s, box-shadow .2s;
}
.ph2-go:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 14px 48px -10px color-mix(in srgb, var(--amb) 80%, transparent); }
.ph2-go:active { transform: translateY(1px); }
.ph2-go svg, .ph2-go i svg { width: 18px; height: 18px; }
.ph2-min {
  height: 40px; padding: 0 16px; background: none; cursor: pointer;
  border: 1px solid var(--line2); border-radius: var(--r-s); color: var(--tx2);
  font: 600 13px 'Rajdhani', sans-serif; display: inline-flex; align-items: center; gap: 8px;
  transition: color .15s, border-color .15s;
}
.ph2-min:hover { color: var(--tx); border-color: rgba(255,255,255,.28); }
.ph2-min svg { width: 14px; height: 14px; }

/* Playlist rail — one horizontal strip along the bottom */
.ph2-rail {
  flex: none; display: flex; gap: 10px; align-items: stretch;
  padding: 14px clamp(24px, 4vw, 64px) 20px;
  overflow-x: auto; scrollbar-width: none;
}
.ph2-rail::-webkit-scrollbar { display: none; }
.ph2-pl {
  flex: none; min-width: 150px; padding: 12px 16px 11px; cursor: pointer; text-align: left;
  background: color-mix(in srgb, var(--ink1) 82%, transparent);
  border: 1px solid var(--line); border-radius: var(--r-m);
  color: var(--tx2); position: relative; overflow: hidden;
  transition: transform .16s var(--ease), border-color .16s, background .16s, color .16s;
  backdrop-filter: blur(6px);
}
.ph2-pl:hover { transform: translateY(-3px); border-color: var(--line2); color: var(--tx); }
.ph2-pl.sel {
  border-color: var(--amb); color: var(--tx);
  background: linear-gradient(180deg, color-mix(in srgb, var(--amb) 14%, var(--ink1)), color-mix(in srgb, var(--ink1) 92%, transparent));
}
.ph2-pl.sel::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--amb); }
.ph2-pl .ic { display: block; margin-bottom: 8px; color: inherit; }
.ph2-pl .ic svg { width: 18px; height: 18px; }
.ph2-pl b { display: block; font-size: 14.5px; font-weight: 700; }
.ph2-pl small { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tx3); }
.ph2-pl.sel small { color: var(--amb); }

/* ════════════ MODE BROWSER (full-screen takeover) ════════════ */

.mb2 { min-height: 100%; padding: 26px clamp(24px, 4vw, 64px) 40px; background: color-mix(in srgb, var(--ink0) 78%, transparent); backdrop-filter: blur(8px); }
.mb2-head { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-bottom: 4px; }
.mb2-head h1 { margin: 0; font-size: 34px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.mb2-head .gs-sub { flex: 1 1 260px; padding-bottom: 4px; }
.mb2-headact { display: flex; gap: 10px; align-items: center; }
.mb2-count { font-size: 12.5px; color: var(--tx3); }
.mb2-count b { color: var(--amb); }

.mb2-cats { display: flex; gap: 4px; margin: 18px 0 22px; border-bottom: 1px solid var(--line); }
.mb2-cat {
  position: relative; padding: 10px 16px 12px; background: none; border: none; cursor: pointer;
  font: 700 13.5px 'Rajdhani', sans-serif; letter-spacing: .05em; text-transform: uppercase;
  color: var(--tx3); transition: color .15s;
}
.mb2-cat:hover { color: var(--tx2); }
.mb2-cat.on { color: var(--tx); }
.mb2-cat.on::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--amb); }

.mb2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; max-width: 1480px; }
.mb2-card {
  position: relative; padding: 18px 18px 14px; cursor: pointer; text-align: left;
  background: var(--ink1); border: 1px solid var(--line); border-radius: var(--r-m);
  transition: transform .16s var(--ease), border-color .16s, background .16s;
  overflow: hidden;
}
.mb2-card:hover { transform: translateY(-3px); border-color: var(--line2); background: var(--ink2); }
.mb2-card.sel { border-color: var(--amb); background: linear-gradient(180deg, color-mix(in srgb, var(--amb) 9%, var(--ink1)), var(--ink1)); }
.mb2-card .ic {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border-radius: 10px; background: var(--ink3); color: var(--amb); margin-bottom: 12px;
}
.mb2-card .ic svg { width: 20px; height: 20px; }
.mb2-card h3 { margin: 0 0 4px; font-size: 17px; font-weight: 800; color: var(--tx); }
.mb2-card p { margin: 0 0 12px; font-size: 13px; line-height: 1.45; color: var(--tx2); min-height: 2.7em; }
.mb2-meta { font-size: 12px; color: var(--tx3); }
.mb2-meta b { color: var(--tx2); font-weight: 600; }
.mb2-meta .d { margin: 0 6px; opacity: .6; }
.mb2-fav {
  position: absolute; top: 12px; right: 12px; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: 8px; cursor: pointer; color: var(--tx3);
  transition: color .15s, background .15s;
}
.mb2-fav:hover { color: var(--amb); background: var(--ink3); }
.mb2-fav.on { color: var(--amb); }
.mb2-fav svg { width: 15px; height: 15px; }
.mb2-check {
  position: absolute; top: 14px; right: 48px;
  display: none; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--amb); text-transform: uppercase;
}
.mb2-card.sel .mb2-check { display: flex; }
.mb2-check svg { width: 14px; height: 14px; }

/* Coming-soon shelf — separated, quiet, honest */
.mb2-soonlab { margin: 34px 0 12px; display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tx3); }
.mb2-soonlab::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.mb2-grid.soon .mb2-card { opacity: .55; cursor: default; }
.mb2-grid.soon .mb2-card:hover { transform: none; border-color: var(--line); background: var(--ink1); }
.mb2-grid.soon .mb2-card .ic { color: var(--tx3); }
.mb2-soon-tag { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: var(--tx3); text-transform: uppercase; }

/* Details drawer */
.mb2-drawer {
  position: fixed; top: var(--head-h); bottom: var(--foot-h); right: 0; width: min(430px, 92vw); z-index: 35;
  background: var(--ink1); border-left: 1px solid var(--line2);
  padding: 26px 26px 30px; overflow-y: auto;
  transform: translateX(102%); transition: transform .25s var(--ease);
  box-shadow: -24px 0 60px -20px rgba(0,0,0,.6);
}
.mb2-drawer.open { transform: none; }
.mb2-drawer h2 { margin: 0 0 6px; font-size: 24px; font-weight: 800; }
.mb2-drawer .gs-sub { margin-bottom: 18px; display: block; }
.mb2-drawer .rules { margin: 0 0 20px; padding: 0; list-style: none; }
.mb2-drawer .rules li {
  display: flex; justify-content: space-between; gap: 14px; padding: 9px 0;
  border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--tx2);
}
.mb2-drawer .rules li b { color: var(--tx); font-weight: 700; }
.mb2-x {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px;
  background: none; border: none; border-radius: 8px; color: var(--tx3); cursor: pointer; font-size: 17px;
}
.mb2-x:hover { color: var(--tx); background: var(--ink3); }

/* ════════════ CAREER ════════════ */

.cr { min-height: 100%; padding: 26px clamp(24px, 4vw, 64px) 40px; background: color-mix(in srgb, var(--ink0) 72%, transparent); backdrop-filter: blur(8px); }
.cr-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.cr-head h1 { margin: 0; font-size: 34px; font-weight: 800; text-transform: uppercase; }
.cr-tabs { display: flex; gap: 4px; margin: 16px 0 24px; border-bottom: 1px solid var(--line); }
.cr-tab {
  position: relative; padding: 10px 16px 12px; background: none; border: none; cursor: pointer;
  font: 700 13.5px 'Rajdhani', sans-serif; letter-spacing: .05em; text-transform: uppercase; color: var(--tx3);
}
.cr-tab:hover { color: var(--tx2); }
.cr-tab.on { color: var(--tx); }
.cr-tab.on::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--amb); }
.cr-body { max-width: 1200px; }

/* Overview: rank hero + tiles */
.cr-hero { display: flex; align-items: center; gap: 26px; margin-bottom: 26px; flex-wrap: wrap; }
.cr-rank {
  display: flex; flex-direction: column; gap: 2px; padding: 20px 28px;
  background: var(--ink1); border: 1px solid var(--line); border-radius: var(--r-l);
  min-width: 240px;
}
.cr-rank .div { font-size: 26px; font-weight: 800; color: var(--amb); text-transform: uppercase; letter-spacing: .03em; }
.cr-rank .rtg { font-size: 14px; color: var(--tx2); }
.cr-rank .idn { font-size: 12px; color: var(--tx3); margin-top: 4px; }
.cr-lvl { flex: 1; min-width: 260px; }
.cr-lvl .row { display: flex; justify-content: space-between; font-size: 13px; color: var(--tx2); margin-bottom: 7px; }
.cr-lvl .row b { color: var(--tx); }
.cr-bar { height: 6px; border-radius: 3px; background: var(--ink3); overflow: hidden; }
.cr-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--amb-deep), var(--amb)); border-radius: 3px; transition: width .5s var(--ease); }

.cr-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.cr-tile { padding: 18px; background: var(--ink1); border: 1px solid var(--line); border-radius: var(--r-m); }
.cr-tile .lab { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tx3); margin-bottom: 8px; }
.cr-tile .big { font-size: 24px; font-weight: 800; color: var(--tx); }
.cr-tile .sub { font-size: 12.5px; color: var(--tx2); margin-top: 3px; }
.cr-tile .win { color: var(--cyn); } .cr-tile .loss { color: var(--red); }

/* Challenges */
.cr-chals { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.chal {
  padding: 16px 18px; background: var(--ink1); border: 1px solid var(--line); border-radius: var(--r-m);
}
.chal.done { border-color: color-mix(in srgb, var(--cyn) 30%, transparent); }
.chal-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.chal-top b { font-size: 15px; color: var(--tx); }
.chal-top em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--amb); }
.chal p { margin: 0 0 12px; font-size: 12.5px; color: var(--tx2); }
.chal-bar { height: 5px; border-radius: 3px; background: var(--ink3); overflow: hidden; }
.chal-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--amb-deep), var(--amb)); border-radius: 3px; }
.chal.done .chal-bar i { background: var(--cyn); }
.chal-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 9px; font-size: 11.5px; color: var(--tx3); font-weight: 700; }
.chal-reroll {
  background: none; border: 1px solid var(--line2); border-radius: 6px; padding: 3px 10px;
  font: 600 11px 'Rajdhani', sans-serif; color: var(--tx2); cursor: pointer;
}
.chal-reroll:hover { color: var(--amb); border-color: color-mix(in srgb, var(--amb) 40%, transparent); }

/* Leaderboard / history tables */
.cr-table { width: 100%; border-collapse: collapse; background: var(--ink1); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.cr-table th {
  padding: 11px 16px; text-align: left; font-size: 11px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--tx3); border-bottom: 1px solid var(--line2); background: var(--ink2);
}
.cr-table td { padding: 11px 16px; font-size: 13.5px; color: var(--tx2); border-bottom: 1px solid var(--line); }
.cr-table tr:last-child td { border-bottom: none; }
.cr-table tr:hover td { background: var(--ink2); }
.cr-table .me td { background: color-mix(in srgb, var(--amb) 7%, transparent); }
.cr-table b { color: var(--tx); }
.arc-win { color: var(--cyn); } .arc-loss { color: var(--red); }

/* ════════════ LOADOUT ════════════
   A weapon room: class rail left, live class identity center-left,
   the operator carries the gun on the right. */

.lo2 { position: relative; min-height: 100%; display: flex; flex-direction: column; padding: 26px clamp(24px, 4vw, 64px) 20px; }
.lo2-head { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.lo2-head h1 { margin: 0; font-size: 34px; font-weight: 800; text-transform: uppercase; }
.lo2-tabs { display: flex; gap: 6px; margin-left: 8px; }
.lo2-tab {
  height: 34px; padding: 0 16px; border-radius: 99px; cursor: pointer;
  background: none; border: 1px solid var(--line); color: var(--tx2);
  font: 700 12.5px 'Rajdhani', sans-serif; letter-spacing: .05em; text-transform: uppercase;
}
.lo2-tab:hover { color: var(--tx); border-color: var(--line2); }
.lo2-tab.on { border-color: var(--amb); color: var(--amb); background: color-mix(in srgb, var(--amb) 10%, transparent); }
.lo2-body { flex: 1; display: flex; gap: 26px; align-items: flex-start; }
.lo2-rail { flex: none; width: 240px; display: flex; flex-direction: column; gap: 8px; }
.lo2-cls {
  display: flex; align-items: center; gap: 12px; padding: 13px 15px; cursor: pointer; text-align: left;
  background: color-mix(in srgb, var(--ink1) 85%, transparent); border: 1px solid var(--line); border-radius: var(--r-m);
  color: var(--tx2); transition: border-color .15s, background .15s, color .15s;
  backdrop-filter: blur(6px);
}
.lo2-cls:hover { border-color: var(--line2); color: var(--tx); }
.lo2-cls.sel { border-color: var(--amb); color: var(--tx); background: linear-gradient(90deg, color-mix(in srgb, var(--amb) 12%, var(--ink1)), color-mix(in srgb, var(--ink1) 88%, transparent)); }
.lo2-cls .g { font-size: 17px; color: var(--amb); width: 22px; text-align: center; }
.lo2-cls b { display: block; font-size: 15px; }
.lo2-cls small { display: block; font-size: 11.5px; color: var(--tx3); }
.lo2-cls .eq { margin-left: auto; font-size: 10px; font-weight: 800; letter-spacing: .1em; color: var(--amb); text-transform: uppercase; }
.lo2-detail { flex: none; width: min(400px, 30vw); display: flex; flex-direction: column; gap: 14px; }
.lo2-wep { padding: 20px 22px; background: color-mix(in srgb, var(--ink1) 88%, transparent); border: 1px solid var(--line); border-radius: var(--r-l); backdrop-filter: blur(6px); }
.lo2-wep img.lo-preview { width: 100%; height: 110px; object-fit: contain; filter: drop-shadow(0 8px 20px rgba(0,0,0,.5)); }
.lo2-wep h3 { margin: 8px 0 2px; font-size: 21px; font-weight: 800; }
.lo2-wep .pair { font-size: 13px; color: var(--tx2); margin-bottom: 14px; }
.lo2-bars { display: flex; flex-direction: column; gap: 9px; }
.cb { display: grid; grid-template-columns: 86px 1fr; align-items: center; gap: 10px; }
.cb span { font-size: 10.5px; font-weight: 800; letter-spacing: .09em; color: var(--tx3); text-transform: uppercase; }
.cb-t { height: 5px; border-radius: 3px; background: var(--ink3); overflow: hidden; }
.cb-t i { display: block; height: 100%; background: linear-gradient(90deg, var(--amb-deep), var(--amb)); border-radius: 3px; }
.lo2-blurb { font-size: 13px; line-height: 1.5; color: var(--tx2); margin: 12px 0 0; }
.lo2-actions { display: flex; gap: 10px; }
.lo2-gun { flex: 1; }   /* gunsmith host — the stage scrolls, not the bench */

/* ════════════ OPERATOR ════════════ */

.op2 { position: relative; min-height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 26px clamp(24px, 4vw, 64px) 24px; }
.op2-id { max-width: 480px; }
.op2-id .gs-kick { margin-bottom: 6px; }
.op2-name { margin: 0 0 8px; font-size: clamp(36px, 4.2vw, 54px); font-weight: 800; text-transform: uppercase; line-height: .95; text-shadow: 0 2px 24px rgba(0,0,0,.55); }
.op2-bio { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--tx2); max-width: 420px; }
.op2-lab { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tx3); margin-bottom: 9px; }
.op2-swatches { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-bottom: 22px; }
.op2-sw {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  background: var(--sw); border: 2px solid transparent;
  transition: transform .14s var(--ease), border-color .14s, box-shadow .14s;
}
.op2-sw:hover { transform: scale(1.12); }
.op2-sw.sel { border-color: var(--tx); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sw) 40%, transparent); transform: scale(1.12); }
.op2-swatches input[type="color"] {
  width: 34px; height: 34px; border-radius: 50%; border: 1px dashed var(--line2);
  background: none; cursor: pointer; padding: 3px;
}
.op2-roster { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.op2-roster::-webkit-scrollbar { display: none; }
.op2-card {
  flex: none; width: 168px; padding: 14px 16px; text-align: left;
  background: color-mix(in srgb, var(--ink1) 85%, transparent); border: 1px solid var(--line); border-radius: var(--r-m);
  backdrop-filter: blur(6px);
}
.op2-card.active { border-color: var(--amb); }
.op2-card b { display: block; font-size: 15px; font-weight: 800; color: var(--tx); }
.op2-card span { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.4; color: var(--tx3); }
.op2-card .st { display: inline-block; margin-top: 9px; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.op2-card.active .st { color: var(--cyn); }
.op2-card.locked { opacity: .55; }
.op2-card.locked .st { color: var(--tx3); }

/* ════════════ ARMORY — collection · reward track · preview ════════════
   Header strip (level · XP · next unlocks · track toggle), an optional
   horizontal reward rail, then a three-column body: category rail ·
   card grid · preview aside. Rarity accents ride on the per-item
   --rc custom property emitted by menus.js; --c is the identity swatch. */

.av {
  display: flex; flex-direction: column; gap: 16px;
  min-height: 100%; padding: 22px clamp(24px, 3vw, 48px) 36px;
  background: color-mix(in srgb, var(--ink0) 80%, transparent);
  backdrop-filter: blur(8px);
}
.av .ph-desc { font-size: 13px; color: var(--tx2); line-height: 1.5; margin: 6px 0; }
.av .ph-sec.on {
  border-color: color-mix(in srgb, var(--amb) 55%, transparent);
  color: var(--amb); background: color-mix(in srgb, var(--amb) 9%, transparent);
}

/* ── Header: level badge · XP bar · next-unlock chips · track toggle ── */
.av-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.av-lvl {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 62px; height: 56px; border-radius: var(--r-m);
  background: var(--ink1); border: 1px solid var(--line);
}
.av-lvl b { font-size: 24px; font-weight: 800; line-height: 1; color: var(--amb); font-variant-numeric: tabular-nums; }
.av-lvl span { margin-top: 3px; font-size: 8.5px; font-weight: 800; letter-spacing: .16em; color: var(--tx3); }
.av-xp { flex: 1 1 240px; min-width: 200px; display: flex; flex-direction: column; gap: 7px; }
.av-xpbar { height: 6px; border-radius: 3px; background: var(--ink3); overflow: hidden; }
.av-xpbar i {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--amb-deep), var(--amb));
  transition: width .5s var(--ease);
}
.av-xp > span { font-size: 12px; color: var(--tx3); }
.av-next { display: flex; gap: 6px; flex-wrap: wrap; max-width: 520px; }
.av-next .chip {
  display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px;
  background: color-mix(in srgb, var(--ink2) 85%, transparent);
  border: 1px solid var(--line); border-radius: 99px; cursor: pointer;
  color: var(--tx2); font: 600 12px 'Rajdhani', sans-serif;
  transition: color .14s, border-color .14s;
}
.av-next .chip:hover { color: var(--tx); border-color: color-mix(in srgb, var(--rc) 55%, transparent); }
.av-next .chip i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--rc);
  box-shadow: 0 0 7px color-mix(in srgb, var(--rc) 60%, transparent);
}
.av-next .chip em { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; color: var(--tx3); }
.av-top > .ph-sec { flex: none; margin-left: auto; }

/* ── Reward track: thin horizontal rail, milestones grow taller ── */
.av-trackwrap {
  background: color-mix(in srgb, var(--ink1) 88%, transparent);
  border: 1px solid var(--line); border-radius: var(--r-m);
  padding: 12px 14px 8px;
}
.av-track {
  display: flex; align-items: flex-end; gap: 3px;
  overflow-x: auto; overflow-y: hidden; padding-bottom: 8px;
}
.av-cell {
  flex: none; width: 34px; height: 44px; padding: 2px 1px; cursor: pointer;
  display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 2px;
  background: var(--ink2); border: 1px solid var(--line); border-radius: 6px;
  transition: border-color .13s, background .13s, transform .13s var(--ease);
}
.av-cell:hover { border-color: color-mix(in srgb, var(--rc) 60%, var(--line2)); transform: translateY(-1px); }
.av-cell span {
  width: 100%; text-align: center; font: 700 10px 'Rajdhani', sans-serif;
  color: var(--tx3); font-variant-numeric: tabular-nums; pointer-events: none;
}
.av-cell i { width: 5px; height: 5px; border-radius: 50%; pointer-events: none; }
.av-cell.done { background: color-mix(in srgb, var(--cyn) 6%, var(--ink1)); border-color: color-mix(in srgb, var(--cyn) 18%, var(--line)); }
.av-cell.done span { color: color-mix(in srgb, var(--cyn) 45%, var(--tx3)); }
.av-cell.done i { opacity: .55; }
.av-cell.cur {
  background: color-mix(in srgb, var(--amb) 14%, var(--ink2));
  border-color: var(--amb);
  box-shadow: 0 0 12px -2px color-mix(in srgb, var(--amb) 55%, transparent);
}
.av-cell.cur span { color: var(--amb); }
.av-cell.m5 { height: 48px; }
.av-cell.m10 { height: 52px; }
.av-cell.m10 span { color: var(--tx2); }
.av-cell.m25 { height: 56px; border-color: color-mix(in srgb, var(--rc) 40%, var(--line)); }
.av-cell.m25 span { font-size: 11px; color: var(--tx2); }
.av-cell.m50 { height: 60px; border-color: color-mix(in srgb, var(--rc) 60%, var(--line)); }
.av-cell.m50 span { font-size: 12px; font-weight: 800; color: var(--tx); }
.av-cell.prst {
  border-color: color-mix(in srgb, var(--rc) 65%, transparent);
  box-shadow: 0 0 12px -1px color-mix(in srgb, var(--rc) 45%, transparent);
}
.av-cell.cur span, .av-cell.m50.done span { color: var(--amb); }
.av-tracklegend {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 8px; font-size: 11px; color: var(--tx3);
}
.av-tracklegend span { display: inline-flex; align-items: center; gap: 6px; }
.av-tracklegend i { width: 9px; height: 9px; border-radius: 3px; background: var(--ink3); border: 1px solid var(--line2); }
.av-tracklegend i.done { background: color-mix(in srgb, var(--cyn) 22%, var(--ink2)); border-color: color-mix(in srgb, var(--cyn) 40%, transparent); }
.av-tracklegend i.cur { background: var(--amb); border-color: var(--amb); }
.av-tracklegend i.prst { background: var(--ink2); border-color: var(--cyn); box-shadow: 0 0 6px color-mix(in srgb, var(--cyn) 55%, transparent); }
.av-tracklegend .hint { margin-left: auto; color: var(--tx3); }

/* ── Body: category rail · grid · preview aside ── */
.av-body {
  flex: 1; display: grid; grid-template-columns: 190px minmax(0, 1fr) 320px;
  gap: 18px; align-items: start;
}

/* Category rail */
.av-cats { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.av-cat {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; cursor: pointer; text-align: left;
  background: none; border: none; border-radius: var(--r-s); color: var(--tx3);
  font: 700 13.5px 'Rajdhani', sans-serif;
  transition: color .14s, background .14s;
}
.av-cat:hover { color: var(--tx2); background: var(--ink2); }
.av-cat.sel { color: var(--tx); background: var(--ink2); box-shadow: inset 2px 0 0 var(--amb); }
.av-cat i { flex: none; display: flex; width: 16px; color: inherit; }
.av-cat svg { width: 15px; height: 15px; }
.av-cat span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-cat em { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--tx3); font-variant-numeric: tabular-nums; }
.av-cat.sel em { color: var(--amb); }

/* Middle column: toolbar · filters · grid */
.av-mid { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.av-toolbar { display: flex; gap: 8px; align-items: center; }
.av-search {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px;
  height: 38px; padding: 0 12px;
  background: color-mix(in srgb, var(--ink2) 90%, transparent);
  border: 1px solid var(--line); border-radius: var(--r-s);
  transition: border-color .15s;
}
.av-search:focus-within { border-color: color-mix(in srgb, var(--amb) 50%, transparent); }
.av-search svg { flex: none; width: 15px; height: 15px; color: var(--tx3); }
.av-search input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: var(--tx); font: 600 13.5px 'Rajdhani', sans-serif;
}
.av-search input::placeholder { color: var(--tx3); }
.av-toolbar select {
  flex: none; height: 38px; max-width: 190px; padding: 0 10px;
  background: color-mix(in srgb, var(--ink2) 90%, transparent);
  border: 1px solid var(--line); border-radius: var(--r-s);
  color: var(--tx); font: 600 13px 'Rajdhani', sans-serif; cursor: pointer;
}
.av-toolbar select:hover { border-color: var(--line2); }
.av-toolbar .ph-sec { flex: none; }

/* Advanced filter rows */
.av-adv {
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px;
  background: color-mix(in srgb, var(--ink1) 88%, transparent);
  border: 1px solid var(--line); border-radius: var(--r-m);
}
.av-advrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.av-advrow > span {
  flex: none; width: 74px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tx3);
}
.av-f {
  height: 27px; padding: 0 12px; border-radius: 99px; cursor: pointer;
  background: none; border: 1px solid var(--line); color: var(--tx2);
  font: 600 12px 'Rajdhani', sans-serif;
  transition: color .14s, border-color .14s, background .14s;
}
.av-f:hover { color: var(--tx); border-color: color-mix(in srgb, var(--rc, #8fa0b8) 50%, var(--line2)); }
.av-f.on {
  color: var(--rc, var(--amb));
  border-color: color-mix(in srgb, var(--rc, var(--amb)) 55%, transparent);
  background: color-mix(in srgb, var(--rc, var(--amb)) 10%, transparent);
}

/* Active filter chips */
.av-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.av-chips .chip.rm {
  display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px;
  border-radius: 99px; cursor: pointer;
  background: color-mix(in srgb, var(--amb) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--amb) 35%, transparent);
  color: var(--amb); font: 600 12px 'Rajdhani', sans-serif;
  transition: background .14s, border-color .14s;
}
.av-chips .chip.rm:hover { background: color-mix(in srgb, var(--amb) 16%, transparent); border-color: color-mix(in srgb, var(--amb) 55%, transparent); }
.av-chips .chip.rm svg { width: 10px; height: 10px; }

/* Card grid */
.av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.av-grid .ph-desc { grid-column: 1 / -1; }
.av-item {
  position: relative; padding: 0 0 10px; cursor: pointer; text-align: left;
  background: var(--ink1); border: 1px solid var(--line); border-radius: var(--r-m);
  border-bottom: 2px solid color-mix(in srgb, var(--rc) 65%, transparent);
  overflow: hidden;
  transition: transform .15s var(--ease), border-color .15s, background .15s, box-shadow .15s;
}
.av-item:hover {
  transform: translateY(-2px); background: var(--ink2);
  border-bottom-color: var(--rc);
  box-shadow: 0 12px 28px -16px rgba(0,0,0,.7), 0 8px 24px -16px color-mix(in srgb, var(--rc) 55%, transparent);
}
.av-item:focus-visible { outline: 2px solid var(--rc); outline-offset: 2px; }
.av-item.sel {
  border-color: color-mix(in srgb, var(--rc) 85%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rc) 60%, transparent),
              0 10px 28px -14px color-mix(in srgb, var(--rc) 50%, transparent);
}
.av-item.eq { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cyn) 22%, transparent); }
.av-item.locked .av-th { filter: saturate(.35) brightness(.55); }
.av-item.locked b { color: var(--tx2); }
.av-item.locked .av-rar { opacity: .65; }
.av-item.locked { border-bottom-color: color-mix(in srgb, var(--rc) 30%, transparent); }

/* Thumbnails — explicit size; variants: color swatch · glyph · reticle */
.av-th {
  display: block; width: 100%; height: 96px; font-style: normal;
  background: radial-gradient(90% 85% at 50% 38%, var(--ink3), var(--ink1));
  border-bottom: 1px solid var(--line);
}
.av-th.glyph {
  display: flex; align-items: center; justify-content: center;
  font-size: 38px; line-height: 1;
  text-shadow: 0 0 22px color-mix(in srgb, currentColor 45%, transparent);
}
.av-th.glyph svg {
  width: 44px; height: 44px; display: block;
  filter: drop-shadow(0 0 14px color-mix(in srgb, currentColor 40%, transparent));
}
.av-th.id { display: flex; align-items: center; justify-content: center; }
.av-th.id b {
  width: 42px; height: 42px; border-radius: 50%; background: var(--c);
  box-shadow: 0 0 20px color-mix(in srgb, var(--c) 55%, transparent),
              inset 0 -8px 14px rgba(0,0,0,.35);
}
.av-th.ret { position: relative; background: radial-gradient(90% 85% at 50% 45%, var(--ink3), var(--ink0)); }
.av-th.ret s, .av-th.ret u {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: block; text-decoration: none;
}
.av-th.ret s { background: var(--tx); border-radius: 1px; }
.av-th.ret u { width: 4px; height: 4px; border-radius: 50%; background: var(--amb); }

/* Card text + badges */
.av-item > b {
  display: block; padding: 9px 11px 0; font-size: 13px; font-weight: 700; color: var(--tx);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.av-rar {
  display: block; padding: 2px 11px 0; font-size: 10px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; color: var(--rc);
}
.av-badges {
  position: absolute; top: 7px; left: 7px; right: 7px;
  display: flex; gap: 4px; flex-wrap: wrap; pointer-events: none;
}
.av-badges em {
  font-style: normal; font-size: 8.5px; font-weight: 800; letter-spacing: .07em;
  padding: 2px 6px; border-radius: 4px; text-transform: uppercase;
  background: rgba(6,8,10,.78); border: 1px solid var(--line);
}
.av-badges .eq { color: var(--cyn); }
.av-badges .new { color: var(--amb); }
.av-badges .prst { color: var(--rc); border-color: color-mix(in srgb, var(--rc) 40%, transparent); }
.av-badges .fav { color: var(--amb); padding: 2px 4px; display: flex; align-items: center; }
.av-badges .fav svg { width: 10px; height: 10px; }
.av-lockchip {
  position: absolute; right: 7px; bottom: 8px;
  display: flex; align-items: center; gap: 4px; padding: 2px 7px;
  background: rgba(6,8,10,.82); border: 1px solid var(--line2); border-radius: 4px;
  font-size: 10px; font-weight: 800; letter-spacing: .05em; color: var(--tx2);
}
.av-lockchip svg { width: 10px; height: 10px; }

/* ── Preview aside: stage · item info · actions ── */
.av-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.av-stage {
  position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 32%, var(--ink3), var(--ink0) 82%);
  border: 1px solid var(--line); border-radius: var(--r-l);
}
.av-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.av-css {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center; padding: 22px;
}
.av-cssbanner {
  width: 100%; min-height: 88px; padding: 16px 18px; border-radius: var(--r-m);
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  border: 1px solid var(--line2); box-shadow: 0 12px 36px -14px rgba(0,0,0,.7);
}
.av-cssbanner b { font-size: 18px; font-weight: 800; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.75); }
.av-cssbanner em { font-style: normal; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.85); text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.av-cssbanner span { font-size: 10px; font-weight: 800; letter-spacing: .12em; color: rgba(255,255,255,.6); text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.av-cssemblem {
  font-size: 84px; line-height: 1;
  filter: drop-shadow(0 0 26px color-mix(in srgb, currentColor 55%, transparent));
}
.av-csstitle { text-align: center; }
.av-csstitle b { display: block; font-size: 20px; font-weight: 800; color: var(--tx); }
.av-csstitle em { display: block; margin-top: 5px; font-style: normal; font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--amb); text-transform: uppercase; }
.av-cssret { position: relative; width: 130px; height: 130px; }
.av-cssret i, .av-cssret b { position: absolute; left: 50%; top: 50%; display: block; }
.av-cssret i { background: var(--tx); border-radius: 1px; box-shadow: 0 0 6px rgba(0,0,0,.8); }
.av-cssret b { transform: translate(-50%, -50%); border-radius: 50%; background: var(--amb); }
.av-cssfx { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.av-cssfx span {
  font-size: 20px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  text-shadow: 0 0 18px color-mix(in srgb, currentColor 50%, transparent);
}
.av-lockover {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  padding: 24px; text-align: center;
  background: rgba(8,10,12,.68); backdrop-filter: blur(3px);
  color: var(--tx2); font-size: 13px; font-weight: 600; line-height: 1.4;
}
.av-lockover svg { width: 24px; height: 24px; color: var(--amb); }
.av-stagectl {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 4;
  display: flex; justify-content: space-between; gap: 8px; pointer-events: none;
}
.av-stagectl .grp {
  display: flex; gap: 3px; padding: 3px; pointer-events: auto;
  background: rgba(10,12,15,.74); border: 1px solid var(--line2); border-radius: 8px;
  backdrop-filter: blur(6px);
}
.av-stagectl .grp:last-child { margin-left: auto; }
.av-stagectl button {
  width: 27px; height: 27px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: 6px; cursor: pointer;
  color: var(--tx2); font: 700 11.5px 'Rajdhani', sans-serif;
  transition: color .13s, background .13s;
}
.av-stagectl button:hover { color: var(--tx); background: var(--ink3); }
.av-stagectl button svg { width: 14px; height: 14px; }
.av-anim {
  position: absolute; top: 10px; right: 10px; z-index: 4;
  height: 28px; max-width: 150px; padding: 0 8px;
  background: rgba(10,12,15,.74); border: 1px solid var(--line2); border-radius: 8px;
  color: var(--tx2); font: 600 12px 'Rajdhani', sans-serif; cursor: pointer;
  backdrop-filter: blur(6px);
}
.av-anim:hover { color: var(--tx); }
.av-info {
  padding: 14px 16px;
  background: color-mix(in srgb, var(--ink1) 88%, transparent);
  border: 1px solid var(--line); border-radius: var(--r-m);
}
.av-irar { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.av-info h3 { margin: 5px 0 4px; font-size: 19px; font-weight: 800; color: var(--tx); }
.av-info p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--tx2); }
.av-info p u { text-decoration: none; color: var(--amb); }
.av-info em { display: block; margin-top: 9px; font-style: normal; font-size: 12px; font-weight: 700; }
.av-info em.ok { color: var(--cyn); }
.av-info em.lk { color: var(--tx3); }
.av-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.av-actions .ph-cta { flex: 1 1 auto; }
.av-actions .ph-sec { flex: none; }

/* ── Armory responsive: aside narrows, then drops below the grid, then
   the category rail becomes a horizontal strip. ── */
@media (max-width: 1280px) {
  .av-body { grid-template-columns: 168px minmax(0, 1fr) 280px; }
}
@media (max-width: 1100px) {
  .av-body { grid-template-columns: 168px minmax(0, 1fr); }
  .av-side {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
    align-items: start;
  }
  .av-stage { grid-row: 1 / 3; }
}
@media (max-width: 760px) {
  .av { padding: 16px 14px 28px; }
  .av-body { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .av-cats { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .av-cat { flex: none; }
  .av-cat.sel { box-shadow: inset 0 -2px 0 var(--amb); }
  .av-side { grid-template-columns: minmax(0, 1fr); }
  .av-stage { grid-row: auto; max-width: 420px; }
  .av-next { display: none; }
  .av-toolbar { flex-wrap: wrap; }
  .av-search { flex: 1 1 100%; }
}

/* ════════════ PRIVATE MATCH (restyle of .pv-*) ════════════ */

.pv-wrap { max-width: 640px; }
.pv-code {
  font: 800 30px 'Rajdhani', monospace; letter-spacing: .3em; color: var(--amb);
  padding: 14px 22px; background: var(--ink1); border: 1px dashed color-mix(in srgb, var(--amb) 40%, transparent);
  border-radius: var(--r-m); display: inline-block; margin: 8px 0 16px;
}
.pv-roster { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.pv-player {
  display: flex; align-items: center; gap: 12px; padding: 11px 15px;
  background: color-mix(in srgb, var(--ink1) 88%, transparent); border: 1px solid var(--line); border-radius: var(--r-m);
  font-size: 14px; color: var(--tx);
}
.pv-player .rdy { margin-left: auto; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--cyn); text-transform: uppercase; }
.pv-player .wait { margin-left: auto; font-size: 11px; color: var(--tx3); }

/* ════════════ DRAWERS (party · intel · profile) ════════════ */

.gs-drawer {
  position: absolute; top: calc(var(--head-h) + 8px); right: 14px; width: 340px; max-height: calc(100% - var(--head-h) - var(--foot-h) - 20px);
  z-index: 40; overflow-y: auto;
  background: var(--ink1); border: 1px solid var(--line2); border-radius: var(--r-l);
  box-shadow: 0 24px 70px -18px rgba(0,0,0,.75);
  padding: 18px;
  animation: gsDrawerIn .2s var(--ease);
}
@keyframes gsDrawerIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.gs-drawer h3 { margin: 0 0 4px; font-size: 17px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.gs-drawer .gs-sub { display: block; font-size: 12.5px; margin-bottom: 14px; }
.gsd-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 6px;
  background: var(--ink2); border: 1px solid var(--line); border-radius: var(--r-m);
  font-size: 13.5px; color: var(--tx);
}
.gsd-row .tag { margin-left: auto; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--tx3); }
.gsd-row.you .tag { color: var(--amb); }
.gsd-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.gsd-news article { padding: 12px 0; border-bottom: 1px solid var(--line); }
.gsd-news article:last-child { border-bottom: none; }
.gsd-news time { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--amb); }
.gsd-news h4 { margin: 4px 0 4px; font-size: 14.5px; color: var(--tx); }
.gsd-news p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--tx2); }
.gsd-menu { display: flex; flex-direction: column; gap: 2px; }
.gsd-item {
  display: flex; align-items: center; gap: 11px; padding: 11px 12px; cursor: pointer; text-align: left;
  background: none; border: none; border-radius: var(--r-s); color: var(--tx2);
  font: 600 14px 'Rajdhani', sans-serif; transition: background .13s, color .13s;
  width: 100%;
}
.gsd-item:hover { background: var(--ink2); color: var(--tx); }
.gsd-item.danger { color: var(--red); }
.gsd-item.danger:hover { background: color-mix(in srgb, var(--red) 10%, transparent); }
.gsd-id { padding: 4px 12px 14px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.gsd-id b { font-size: 17px; display: block; }
.gsd-id span { font-size: 12px; color: var(--tx3); }

/* ════════════ SHARED STATES ════════════ */

.gs-empty { padding: 40px 20px; text-align: center; color: var(--tx3); font-size: 14px; }
.gs-empty b { display: block; color: var(--tx2); font-size: 16px; margin-bottom: 4px; }
.gs-skel { position: relative; overflow: hidden; background: var(--ink2); border-radius: var(--r-s); color: transparent !important; }
.gs-skel::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
  animation: gsShimmer 1.4s infinite;
}
@keyframes gsShimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ════════════ RESPONSIVE ════════════ */

@media (max-width: 1180px) {
  .ph2-main { max-width: min(560px, 56vw); }
  .lo2-detail { width: 340px; }
}
@media (max-width: 900px) {
  .gs-nav .gs-tab { padding: 0 11px; font-size: 13px; }
  .gs-party span { display: none; }
  .ph2-main { max-width: 92vw; padding-top: 12px; }
  .ph2-title { font-size: 34px; }
  .lo2-body { flex-direction: column; overflow-y: auto; }
  .lo2-rail { width: 100%; flex-direction: row; overflow-x: auto; overflow-y: hidden; }
  .lo2-cls { min-width: 190px; }
  .lo2-detail { width: 100%; }
}
/* Ultrawide: content stays composed, the scene gets the extra frame. */
@media (min-aspect-ratio: 21/9) {
  .ph2-main { max-width: 620px; margin-left: 4vw; }
  .mb2, .cr { padding-left: 8vw; padding-right: 8vw; }
  .mb2-grid, .cr-body { max-width: 1480px; }
}

/* ════════════ REDUCED MOTION ════════════ */
@media (prefers-reduced-motion: reduce) {
  #scrMenu *, #scrMenu *::before, #scrMenu *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* addenda: rules link on mode cards + play-screen left scrim */
.mb2-det { background: none; border: none; color: var(--amb); font: 600 12px 'Rajdhani', sans-serif; cursor: pointer; padding: 0 0 0 6px; }
.mb2-det:hover { text-decoration: underline; }
.ph2::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(7,9,12,.72) 0%, rgba(7,9,12,.42) 34%, transparent 56%);
}
.ph2-main, .ph2-rail { position: relative; }
.lo2::before, .op2::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(7,9,12,.7) 0%, rgba(7,9,12,.35) 40%, transparent 62%);
}
.lo2-head, .lo2-body, .op2-id, .op2-roster { position: relative; }

/* Legacy-button aliases — gunsmith + private match still emit .ph-cta /
   .ph-sec; they get the new button system without a rewrite. */
.ph-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 44px; padding: 0 26px; border-radius: 8px; border: none; cursor: pointer;
  background: linear-gradient(180deg, var(--amb, #ffa54d), var(--amb-deep, #e0801f)); color: #171006;
  font: 700 15px 'Rajdhani', sans-serif; letter-spacing: .04em; text-transform: uppercase;
  transition: transform .12s, filter .15s;
}
.ph-cta:hover { filter: brightness(1.08); }
.ph-cta:active { transform: translateY(1px); }
.ph-cta:disabled { opacity: .45; cursor: default; }
.ph-cta i svg, .ph-cta svg { width: 16px; height: 16px; }
.ph-cta.alt { background: none; border: 1px solid var(--line2, rgba(255,255,255,.13)); color: var(--tx2, #a7adb7); }
.ph-sec {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px;
  background: none; border: 1px solid var(--line2, rgba(255,255,255,.13)); border-radius: 8px;
  color: var(--tx2, #a7adb7); cursor: pointer; font: 600 13px 'Rajdhani', sans-serif;
  transition: color .15s, border-color .15s;
}
.ph-sec:hover { color: var(--tx, #edeae4); border-color: rgba(255,255,255,.28); }
.ph-sec.danger { border-color: color-mix(in srgb, var(--red, #ff5a5e) 45%, transparent); color: var(--red, #ff5a5e); }
.ph-sec svg { width: 14px; height: 14px; }

/* ════════════ GUNSMITH — the weapon bench, in the new system ════════════
   Three columns: weapon rail · attachment bench · live stats. Ported from
   the old bench and retinted: amber = selection, charcoal solids, quiet
   labels. Lives inside the Loadout stage; the PAGE scrolls, not the bench. */

.lo2-gun { overflow: visible; }
.gs { display: grid; grid-template-columns: 220px 1fr 260px; gap: 18px; min-height: 480px; }
.gs-rail { display: flex; flex-direction: column; gap: 7px; }
.gs-w {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  background: color-mix(in srgb, var(--ink1) 88%, transparent); border: 1px solid var(--line);
  border-radius: var(--r-m); padding: 11px 13px; cursor: pointer; color: var(--tx2); position: relative;
  transition: border-color .15s, background .15s, color .15s;
}
.gs-w:hover { border-color: var(--line2); color: var(--tx); }
.gs-w.sel { border-color: var(--amb); color: var(--tx); background: linear-gradient(90deg, color-mix(in srgb, var(--amb) 11%, var(--ink1)), var(--ink1)); }
.gs-w b { font-size: 14px; }
.gs-w small { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--tx3); }
.gs-w em { position: absolute; top: 9px; right: 11px; font-style: normal; font-size: 9.5px; color: var(--amb); letter-spacing: .06em; text-transform: uppercase; }

.gs-mid { display: flex; flex-direction: column; min-width: 0; }
.gs-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.gs-head h3 { margin: 0; font-size: 20px; font-weight: 800; color: var(--tx); }
.gs-head small { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--tx3); }
.gs-xp { flex: 0 0 160px; height: 6px; border-radius: 3px; background: var(--ink3); overflow: hidden; }
.gs-xp i { display: block; height: 100%; background: linear-gradient(90deg, var(--amb-deep), var(--amb)); }
.gs-note { font-size: 12px; color: var(--tx3); margin: 8px 0 10px; }
.gs-preview {
  width: 100%; max-width: 380px; height: 132px; object-fit: contain;
  background: radial-gradient(420px 120px at 50% 60%, color-mix(in srgb, var(--amb) 7%, transparent), transparent);
  border: 1px solid var(--line); border-radius: var(--r-m); margin: 10px 0 8px; align-self: center;
}

.gs-slots { display: flex; flex-direction: column; gap: 7px; }
.gs-slot {
  display: flex; align-items: flex-start; gap: 12px;
  background: color-mix(in srgb, var(--ink1) 80%, transparent); border: 1px solid var(--line);
  border-radius: var(--r-m); padding: 9px 13px;
}
.gs-slot h5 { margin: 4px 0 0; flex: 0 0 88px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--tx3); }
.gs-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.gs-att {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--ink2); border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 13px; color: var(--tx2); font-size: 12px; font-weight: 600; line-height: 1.3;
  transition: border-color .13s, background .13s, color .13s;
}
.gs-att:hover { border-color: var(--line2); color: var(--tx); }
.gs-att.on { border-color: var(--amb); color: var(--amb); background: color-mix(in srgb, var(--amb) 10%, transparent); }
.gs-att.locked { opacity: .45; cursor: default; }
.gs-att.full:not(.on) { opacity: .55; }
.gs-att i { font-style: normal; font-size: 9.5px; color: var(--amb); }

.gs-side { display: flex; flex-direction: column; gap: 10px; }
.gs-side h5 { margin: 0; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--tx3); }
.gs-stats { background: var(--ink1); border: 1px solid var(--line); border-radius: var(--r-m); padding: 11px 13px; }
.gs-stat { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; padding: 5px 0; border-bottom: 1px solid var(--line); color: var(--tx2); }
.gs-stat:last-child { border-bottom: none; }
.gs-stat span { color: var(--tx3); }
.gs-stat b { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--tx); }
.gs-stat.up b { color: var(--cyn); }
.gs-stat.down b { color: var(--red); }
.gs .gs-empty { font-size: 12px; color: var(--tx3); margin: 2px 0; line-height: 1.5; padding: 0; text-align: left; }
.gs-equipped { display: flex; flex-wrap: wrap; gap: 6px; }
.gs-equipped small { color: var(--tx3); font-size: 11.5px; }
.gs-actions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.gs-recoil { background: var(--ink1); border: 1px solid var(--line); border-radius: var(--r-m); width: 100%; }
.gs-code { display: flex; gap: 8px; }
.gs-code .ph-sec { flex: 1; justify-content: center; }
.gs .chip.rm { cursor: pointer; }

@media (max-width: 1180px) { .gs { grid-template-columns: 190px 1fr; } .gs-side { grid-column: 1 / -1; } }
@media (max-width: 900px) { .gs { display: flex; flex-direction: column; } }

/* ── Short windows (laptops, non-maximized): compact type + spacing so
   every section fits WITHOUT scrolling wherever possible. ── */
@media (max-height: 880px) {
  .ph2-title { font-size: clamp(30px, 4vw, 40px); margin-bottom: 6px; }
  .ph2-desc { margin-bottom: 12px; font-size: 13.5px; }
  .ph2-facts { margin-bottom: 10px; }
  .ph2-pop { margin-bottom: 12px; }
  .ph2-chips { margin-bottom: 10px; }
  .ph2-ctls { margin-bottom: 14px; }
  .ph2-go { height: 50px; padding: 0 34px; font-size: 17px; }
  .ph2-rail { padding-top: 8px; padding-bottom: 12px; }
  .ph2-pl { min-width: 132px; padding: 9px 13px 9px; }
  .ph2-pl .ic { margin-bottom: 5px; }
  .ph2-seg button { height: 28px; padding: 0 11px; font-size: 11.5px; }
  .lo2 { padding-top: 16px; }
  .lo2-head { margin-bottom: 12px; }
  .lo2-head h1, .cr-head h1, .mb2-head h1 { font-size: 26px; }
  .op2-name { font-size: clamp(30px, 3.6vw, 42px); }
  .op2-bio { margin-bottom: 12px; }
  .op2-swatches { margin-bottom: 14px; }
  .cr { padding-top: 16px; }
  .mb2 { padding-top: 16px; }
}

/* Gunsmith open: the bench owns the frame — full scrim, no bright floor
   bleeding through the action buttons. */
.lo2.gunsmith-open::before {
  background: color-mix(in srgb, var(--ink0) 84%, transparent);
  backdrop-filter: blur(6px);
}
.gs ~ * .ph-desc, .lo2-gun .ph-desc { font-size: 13px; color: var(--tx2); line-height: 1.5; margin: 6px 0 12px; }
.lo2-gun .ph-navlab { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tx3); margin: 0 0 8px; }

/* ════════════ KNIFE LOCKER — collection · rarity · crate opening ════════════
   Earn distinct blade shapes purely by leveling up. A live 3D turntable of the
   selected knife on the left, a rarity-graded grid + Supply Crate on the right,
   and a full-stage crate-opening ceremony. Rarity colour arrives per element
   as --rc so one rule set styles every tier. No store, no currency — earned. */
.kl { position: relative; display: flex; flex-direction: column; gap: 16px; height: 100%; min-height: 0; padding: 4px 2px; }
.kl-empty { color: var(--tx2); padding: 40px; text-align: center; }
.kl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.kl-h { font: 800 26px 'Rajdhani', sans-serif; letter-spacing: .01em; color: var(--tx); }
.kl-sub { font-size: 13px; color: var(--tx2); margin-top: 4px; max-width: 520px; line-height: 1.5; }
.kl-stats { flex-shrink: 0; }
.kl-lvl { min-width: 240px; text-align: right; }
.kl-lvl b { font: 800 18px 'Rajdhani', sans-serif; color: var(--amb); }
.kl-lvl i { display: block; font-size: 12px; color: var(--tx3); margin: 2px 0 6px; font-style: normal; }
.kl-xp { height: 7px; border-radius: 4px; background: var(--ink2); overflow: hidden; border: 1px solid var(--line); }
.kl-xp span { display: block; height: 100%; background: linear-gradient(90deg, var(--amb-deep), var(--amb)); border-radius: 4px; transition: width .5s var(--ease); }
.kl-lvl em { display: block; font-size: 11px; color: var(--tx3); margin-top: 5px; font-style: normal; }

.kl-body { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; flex: 1; min-height: 0; }
.kl-stage { position: relative; background: radial-gradient(120% 90% at 50% 30%, #131922, #090c11 78%); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; min-height: 340px; }
#klCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.kl-detail { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px; background: linear-gradient(0deg, rgba(6,9,13,.94), rgba(6,9,13,.55) 60%, transparent); border-top: 2px solid var(--rc, var(--amb)); }
.kl-dtop { display: flex; align-items: baseline; gap: 10px; }
.kl-dtop b { font: 800 20px 'Rajdhani', sans-serif; color: var(--tx); }
.kl-drar { font: 700 11px 'Rajdhani', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--rc, var(--amb)); }
.kl-dblurb { font-size: 12.5px; color: var(--tx2); line-height: 1.5; margin: 6px 0 12px; max-width: 480px; }
.kl-detail .gs-btn { min-width: 130px; }

.kl-side { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.kl-crate { display: flex; align-items: center; gap: 14px; background: var(--ink2); border: 1px solid var(--line); border-radius: var(--r-m); padding: 14px; }
.kl-crateart { position: relative; width: 54px; height: 48px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(160deg, #3a3020, #241b10); border: 1px solid #4a3a1e; display: flex; align-items: center; justify-content: center; }
.kl-crateart b { font: 800 20px 'Rajdhani', sans-serif; color: #f0c268; }
.kl-cratelid { position: absolute; top: 0; left: 0; right: 0; height: 14px; background: linear-gradient(180deg, #5a4526, #3a2d16); border-radius: 8px 8px 0 0; border-bottom: 1px solid #6a521f; }
.kl-crateart.ready { animation: klCratePulse 1.8s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(255,167,77,.5); }
@keyframes klCratePulse { 0%,100% { box-shadow: 0 0 12px 0 rgba(255,167,77,.35); } 50% { box-shadow: 0 0 20px 4px rgba(255,167,77,.15); } }
.kl-cratetext { flex: 1; }
.kl-cratetext b { display: block; font: 700 14px 'Rajdhani', sans-serif; color: var(--tx); }
.kl-cratetext span { font-size: 11.5px; color: var(--tx3); }

.kl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; overflow-y: auto; padding: 2px; align-content: start; }
.kl-card { position: relative; text-align: left; background: var(--ink2); border: 1px solid var(--line); border-radius: var(--r-s);
  padding: 12px 12px 10px; cursor: pointer; overflow: hidden; transition: transform .12s var(--ease), border-color .15s, background .15s; }
.kl-card:hover { transform: translateY(-2px); background: var(--ink3); }
.kl-card.sel { border-color: var(--rc); box-shadow: 0 0 0 1px var(--rc) inset; }
.kl-card .kl-rc { position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--rc); }
.kl-cn { display: block; font: 700 14px 'Rajdhani', sans-serif; color: var(--tx); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kl-cr { display: block; font: 600 10px 'Rajdhani', sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--rc); margin-top: 2px; }
.kl-eq { display: inline-block; margin-top: 8px; font: 800 9px 'Rajdhani', sans-serif; letter-spacing: .1em; color: #071009; background: var(--amb); padding: 2px 6px; border-radius: 4px; }
.kl-lk { display: inline-block; margin-top: 8px; font: 700 9px 'Rajdhani', sans-serif; letter-spacing: .1em; color: var(--tx3); }
.kl-card.locked { opacity: .62; }
.kl-card.locked .kl-cn { color: var(--tx3); }
.kl-card.locked:hover { opacity: .8; }

/* ── Crate-opening ceremony ── */
/* The base rule sets display:flex, which by itself would override the HTML
   [hidden] attribute (author display beats the UA sheet) and leave this dark,
   blurred scrim painted over the whole locker at all times — the "knives tab
   is blurred out" bug. The [hidden] rule below (higher specificity) restores
   proper hiding so the ceremony only shows during an actual crate opening. */
.kl-reveal { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 45%, rgba(10,14,20,.86), rgba(4,6,9,.96)); backdrop-filter: blur(3px); border-radius: var(--r-l); }
.kl-reveal[hidden] { display: none; }
.kl-rvbox { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.kl-rvcrate { position: relative; width: 120px; height: 108px; border-radius: 14px;
  background: linear-gradient(160deg, #47381f, #2a2012); border: 2px solid #5a451f; display: flex; align-items: center; justify-content: center; }
.kl-rvcrate i { font: 800 44px 'Rajdhani', sans-serif; color: #f0c268; }
.kl-rvcrate span:first-child { position: absolute; top: 0; left: 0; right: 0; height: 30px; background: linear-gradient(180deg, #6a5226, #43331a); border-radius: 12px 12px 0 0; transform-origin: top center; }
.kl-rvcrate span:nth-child(2) { position: absolute; inset: 0; border-radius: 12px; box-shadow: 0 0 30px 6px var(--rc); opacity: 0; }
.kl-rvcrate.shake { animation: klShake .7s ease-in-out .2s 1; }
@keyframes klShake { 0%,100% { transform: translateX(0) rotate(0); } 15% { transform: translateX(-5px) rotate(-3deg); } 30% { transform: translateX(6px) rotate(3deg); } 45% { transform: translateX(-6px) rotate(-4deg); } 60% { transform: translateX(6px) rotate(4deg); } 78% { transform: translateX(-4px) rotate(-2deg); } }
.kl-rvcrate.burst span:first-child { animation: klLid .5s var(--ease) forwards; }
.kl-rvcrate.burst span:nth-child(2) { animation: klGlow .6s ease-out forwards; }
.kl-rvcrate.burst i { animation: klCrateGone .4s ease-in forwards; }
@keyframes klLid { to { transform: translateY(-40px) rotate(-24deg); opacity: 0; } }
@keyframes klGlow { 0% { opacity: 0; transform: scale(.6); } 60% { opacity: 1; } 100% { opacity: 0; transform: scale(1.8); } }
@keyframes klCrateGone { to { opacity: 0; transform: scale(.5); } }
.kl-rvcard { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; max-width: 340px;
  padding: 22px 26px; border-radius: var(--r-l); background: var(--ink1); border: 1px solid var(--rc);
  box-shadow: 0 0 40px -8px var(--rc); opacity: 0; transform: translateY(14px) scale(.94); }
.kl-rvcard.in { animation: klCardIn .45s var(--ease) forwards; }
@keyframes klCardIn { to { opacity: 1; transform: translateY(0) scale(1); } }
.kl-rvrar { font: 800 12px 'Rajdhani', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--rc); }
.kl-rvname { font: 800 28px 'Rajdhani', sans-serif; color: var(--tx); }
.kl-rvblurb { font-size: 13px; color: var(--tx2); line-height: 1.5; }
.kl-rvnew { font: 800 11px 'Rajdhani', sans-serif; letter-spacing: .12em; color: var(--cyn); }
.kl-rvdup { font: 700 11px 'Rajdhani', sans-serif; letter-spacing: .06em; color: var(--tx3); }
.kl-rvcard .gs-btn { margin-top: 8px; min-width: 150px; }

@media (max-width: 900px) {
  .kl-body { grid-template-columns: 1fr; overflow-y: auto; }
  .kl-stage { min-height: 260px; }
  .kl-head { flex-direction: column; }
  .kl-lvl { text-align: left; min-width: 0; }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE LOBBY SHELL (mobile-lobby.js) — gated on body.dx-mnav,
   which DXMODE stamps ONLY for real touch-first devices or a manual
   Interface Mode → Mobile override. A resized desktop window never
   gets these rules; the desktop header/nav is untouched otherwise.
   ════════════════════════════════════════════════════════════════ */

/* The desktop header tab strip hides — the bottom bar owns navigation. */
body.dx-mnav .gs-nav { display: none !important; }
body.dx-mnav .gs-foot .gs-keys { display: none; }   /* keyboard hints are meaningless on touch */
body.dx-mnav .gs-top { padding: 6px max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left)); }
/* Stage scrolls INSIDE itself and clears the nav bar + safe area. */
body.dx-mnav .gs-stage { padding-bottom: calc(76px + env(safe-area-inset-bottom)); overflow-y: auto;
  -webkit-overflow-scrolling: touch; }
body.dx-mnav .gs-foot { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
body.dx-mnav .gs-drawer { bottom: calc(64px + env(safe-area-inset-bottom)); }

/* ── Bottom navigation bar ── */
#mNav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; align-items: stretch; justify-content: space-around;
  padding: 6px max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  background: rgba(9, 12, 18, .96); border-top: 1px solid rgba(120, 150, 200, .18);
  backdrop-filter: blur(8px); }
#mNav .mnav-item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 2px 6px; border: 0; background: none; color: #8b98ad; border-radius: 10px;
  font: 700 9.5px 'Rajdhani', 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase;
  -webkit-tap-highlight-color: transparent; min-width: 56px; }
#mNav .mnav-item svg { width: 22px; height: 22px; }
#mNav .mnav-item.on { color: #17d8c0; background: rgba(23, 216, 192, .1); }
#mNav .mnav-item:active { background: rgba(120, 150, 200, .14); }

/* ── MORE bottom sheet ── */
#mMore { position: fixed; inset: 0; z-index: 95; }
#mMore .mmore-scrim { position: absolute; inset: 0; background: rgba(3, 5, 9, .6); }
#mMore .mmore-sheet { position: absolute; left: 0; right: 0; bottom: 0;
  max-height: min(70vh, calc(var(--dxvh, 1vh) * 70)); overflow-y: auto;
  padding: 8px 14px calc(14px + env(safe-area-inset-bottom));
  background: #10141c; border-top: 1px solid rgba(120, 150, 200, .25);
  border-radius: 16px 16px 0 0; animation: mmoreUp .22s ease; }
@keyframes mmoreUp { from { transform: translateY(24px); opacity: .4; } to { transform: none; opacity: 1; } }
#mMore .mmore-grip { width: 42px; height: 4px; border-radius: 2px; margin: 4px auto 10px;
  background: rgba(140, 155, 180, .4); }
#mMore .mmore-item { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  padding: 12px 12px; border: 0; border-radius: 10px; background: none; color: #dfe7f4;
  -webkit-tap-highlight-color: transparent; }
#mMore .mmore-item:active { background: rgba(120, 150, 200, .12); }
#mMore .mmore-item b { font: 700 14px 'Rajdhani', 'Inter', sans-serif; letter-spacing: .06em; text-transform: uppercase; }
#mMore .mmore-item small { font: 500 11px 'Inter', sans-serif; color: #8b98ad; }

/* ── Mobile stage content: touch-sized cards, no desktop hover reliance ──
   These only refine EXISTING responsive rules and only under dx-mnav. */
body.dx-mnav .gs-stage button { min-height: 40px; }
body.dx-mnav .gs-stage h1 { font-size: clamp(20px, 6vw, 28px); }
/* Sticky primary action zones (Play / Equip / Save) stay reachable. */
body.dx-mnav .ph2-go, body.dx-mnav [data-sticky-cta] { position: sticky; bottom: 4px; z-index: 5; }

/* Full-height fixes on browsers where 100vh includes hidden chrome:
   the menu shell uses the measured viewport when available. */
body.dx-mobile .scr.menu2 { height: calc(var(--dxvh, 1vh) * 100); }