:root {
  --def: #4ecb70;
  --def-rgb: 78, 203, 112;
  --ks-ease: cubic-bezier(0.2, 0.75, 0.25, 1);
  --ks-spring: cubic-bezier(0.16, 1, 0.3, 1);

  /* Enter cascade budget: base + 3*step + dur ≈ 394ms; cards trail inside. */
  --ks-base: 50ms;
  --ks-step: 28ms;
  --ks-dur: 260ms;
  --ks-card-step: 14ms;
}

@keyframes ks-rise {
  from { opacity: 0; transform: translate3d(0, 9px, 0); }
  to { opacity: 1; transform: none; }
}

/* ── Play return cue + left dim ── */

body[data-lobby-panel="loadout"] .slant-nav__item[data-nav="play"] {
  color: #e8c07a;
}

body[data-lobby-panel="loadout"] .slant-nav__item[data-nav="play"] .slant-nav__return {
  opacity: 1;
  transform: translateY(-50%);
}

body[data-lobby-panel="loadout"] .slant-nav__item[data-nav="play"]:hover {
  color: #ffe0a8;
}

body[data-lobby-panel="loadout"] .slant-nav__item[data-nav="play"]:hover .slant-nav__return {
  color: var(--amber-hot, #ffc252);
}

body[data-lobby-panel="loadout"] .play-left-dim {
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 280ms var(--ks-ease);
}

body[data-lobby-panel="loadout"] .lobby-left .play-cluster .quick-play-frame {
  opacity: 1;
  pointer-events: auto;
}

body[data-lobby-panel="loadout"] .panel--squad,
body[data-lobby-panel="loadout"] .panel--identity,
body[data-lobby-panel="loadout"] .camera-dock {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms var(--ks-ease), visibility 0s linear 220ms;
}

/* Right: hide play stack + other mode panels (Killstreaks owns center) */
body[data-lobby-panel="loadout"] .play-right-stack,
body[data-lobby-panel="loadout"] .store-shop-panel,
body[data-lobby-panel="loadout"] .inventory-panel,
body[data-lobby-panel="loadout"] .leaderboard-panel {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(-8px, 0, 0);
  transition:
    opacity 260ms var(--ks-ease),
    transform 320ms var(--ks-spring),
    visibility 0s linear 260ms;
}

body[data-lobby-panel="loadout"] .coin-packages-shell,
body[data-lobby-panel="loadout"] .below-stage-slot .combat-record-shell {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── Center aperture: covers hero stage + below-stage ── */

.lobby-center {
  position: relative;
}

.killstreaks-aperture {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  min-height: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Same lateral shell language as Store / Leaderboards — not a modal lift */
  transform: translate3d(12px, 0, 0);
  transition:
    opacity 260ms var(--ks-ease),
    transform 320ms var(--ks-spring),
    visibility 0s linear 260ms;
}

body[data-lobby-panel="loadout"] .killstreaks-aperture {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition:
    opacity 260ms var(--ks-ease),
    transform 320ms var(--ks-spring),
    visibility 0s;
}

body[data-lobby-panel="loadout"] .hero-preview,
body[data-lobby-panel="loadout"] .below-stage-slot {
  /* Keep footprint; fade under the incoming panel (pause is deferred in JS) */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 300ms var(--ks-ease), visibility 0s linear 300ms;
}

/* Aperture panel fills the center column — not the old modal viewport box */
.killstreaks-aperture .ks-panel {
  width: 100%;
  max-width: none;
  max-height: none;
  height: 100%;
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

/* ── Enter cascade: header → progress → slots → cards → intel ──
   Arsenal wrapper stays still so card stagger isn’t nested under a second fade. */

body[data-lobby-panel="loadout"] .killstreaks-aperture .ks-header,
body[data-lobby-panel="loadout"] .killstreaks-aperture .ks-progress,
body[data-lobby-panel="loadout"] .killstreaks-aperture .ks-body > section:first-child,
body[data-lobby-panel="loadout"] .killstreaks-aperture .ks-arsenal__topline,
body[data-lobby-panel="loadout"] .killstreaks-aperture .ks-card,
body[data-lobby-panel="loadout"] .killstreaks-aperture .ks-intel {
  animation: ks-rise var(--ks-dur) var(--ks-spring) both;
}

body[data-lobby-panel="loadout"] .killstreaks-aperture .ks-header {
  animation-delay: var(--ks-base);
}

body[data-lobby-panel="loadout"] .killstreaks-aperture .ks-progress {
  animation-delay: calc(var(--ks-base) + var(--ks-step));
}

body[data-lobby-panel="loadout"] .killstreaks-aperture .ks-body > section:first-child {
  animation-delay: calc(var(--ks-base) + (2 * var(--ks-step)));
}

body[data-lobby-panel="loadout"] .killstreaks-aperture .ks-arsenal__topline {
  animation-delay: calc(var(--ks-base) + (3 * var(--ks-step)));
}

body[data-lobby-panel="loadout"] .killstreaks-aperture .ks-card {
  animation-delay: calc(
    var(--ks-base) + (3 * var(--ks-step)) + (var(--i, 0) * var(--ks-card-step))
  );
}

body[data-lobby-panel="loadout"] .killstreaks-aperture .ks-intel {
  animation-delay: calc(var(--ks-base) + (3 * var(--ks-step)) + (2 * var(--ks-card-step)));
}

@media (prefers-reduced-motion: reduce) {
  .killstreaks-aperture,
  body[data-lobby-panel="loadout"] .killstreaks-aperture,
  body[data-lobby-panel="loadout"] .hero-preview,
  body[data-lobby-panel="loadout"] .below-stage-slot {
    transition: none;
  }

  body[data-lobby-panel="loadout"] .killstreaks-aperture .ks-header,
  body[data-lobby-panel="loadout"] .killstreaks-aperture .ks-progress,
  body[data-lobby-panel="loadout"] .killstreaks-aperture .ks-body > section:first-child,
  body[data-lobby-panel="loadout"] .killstreaks-aperture .ks-arsenal__topline,
  body[data-lobby-panel="loadout"] .killstreaks-aperture .ks-card,
  body[data-lobby-panel="loadout"] .killstreaks-aperture .ks-intel {
    animation: none;
  }
}

/* Ghost flies across the viewport — must stay global */
.ks-ghost {
  position: fixed;
  z-index: 9999;
  display: grid;
  place-items: center;
  pointer-events: none;
  text-shadow: 0 0 18px currentColor;
  will-change: transform, opacity;
}

/* ── Killstreaks chrome (from loadout.html modal → in-aperture panel) ── */

@property --bus {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}



.killstreaks-aperture .ks-panel {
  position: relative;
  isolation: isolate;
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  border: 1px solid rgba(180, 196, 211, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.025), transparent 28%),
    linear-gradient(180deg, #0b1016, #06090d);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.74),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}


/* corner brackets — the shell's only decoration, kept from the rail */
.killstreaks-aperture .ks-panel::before, .killstreaks-aperture .ks-panel::after {
  position: absolute;
  z-index: 6;
  width: 20px;
  height: 20px;
  border-color: rgba(var(--amber-rgb), 0.86);
  content: "";
  pointer-events: none;
}

.killstreaks-aperture .ks-panel::before { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
.killstreaks-aperture .ks-panel::after { right: -1px; bottom: -1px; border-right: 2px solid; border-bottom: 2px solid; }

/* ── 1 · header ────────────────────────────────────────────────
   Honeycomb kept, and now it is the only thing living on the right
   half — nothing to out-read it, so the mesh can run hotter. */
.killstreaks-aperture .ks-header {
  --hex-w: 32px;
  --hex-line-alpha: 0.25;
  --hex-start: 6%;
  --hex-floor: 1;
  --hex-glow: 0.9;
  --scrim: 0.5;

  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 60px;
  flex: 0 0 auto;
  align-items: center;
  padding: 10px 50px 9px 16px;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(5, 8, 12, 0.99) 0 26%, rgba(7, 11, 15, 0.9) 50%, rgba(10, 15, 20, 0.8));
}

/* scrim under the title only, so the mesh stays legible to its right */
.killstreaks-aperture .ks-header::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(170px 58px at 42px 50%, rgba(4, 7, 11, 0.96), rgba(4, 7, 11, 0.5) 56%, transparent 82%),
    linear-gradient(90deg, rgba(4, 7, 11, 0.64), transparent 54%);
  content: "";
  pointer-events: none;
}

.killstreaks-aperture .ks-header::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--amber-rgb), 0.6), rgba(174, 191, 207, 0.12) 34%, transparent);
  content: "";
  pointer-events: none;
}

.killstreaks-aperture .ks-header .hex-field {
  -webkit-mask-image: linear-gradient(96deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, var(--hex-floor)) var(--hex-start), #000 42%, #000 100%);
  mask-image: linear-gradient(96deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, var(--hex-floor)) var(--hex-start), #000 42%, #000 100%);
}

.killstreaks-aperture .ks-header .hex-field__glow {
  -webkit-mask-image: radial-gradient(58% 150% at 70% 78%, #000 0, transparent 72%);
  mask-image: radial-gradient(58% 150% at 70% 78%, #000 0, transparent 72%);
}

.killstreaks-aperture .ks-heading { position: relative; z-index: 2; min-width: 0; }

.killstreaks-aperture .ks-kicker {
  display: block;
  margin-bottom: 3px;
  color: var(--amber);
  font: 700 8px/1 "Saira Condensed", Rajdhani, sans-serif;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.killstreaks-aperture .ks-title {
  margin: 0;
  color: #fff;
  font: 700 25px/0.88 "Saira Condensed", Rajdhani, sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.92), 0 2px 16px rgba(0, 0, 0, 0.78);
}

.killstreaks-aperture .ks-close {
  position: absolute;
  z-index: 7;
  top: 9px;
  right: 9px;
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border: 1px solid rgba(183, 198, 212, 0.16);
  border-radius: 5px;
  background: rgba(4, 7, 10, 0.76);
  color: #8f99a2;
  cursor: pointer;
  font-size: 13px;
  transition: border-color 160ms, background 160ms, color 160ms, transform 160ms var(--ease-out);
}

.killstreaks-aperture .ks-close:hover {
  border-color: rgba(var(--amber-rgb), 0.42);
  background: rgba(var(--amber-rgb), 0.09);
  color: #fff;
  transform: rotate(3deg);
}

.killstreaks-aperture .ks-close:focus-visible { outline: 2px solid var(--amber-hot); outline-offset: 2px; }

/* body scrolls; header and progression stay pinned so rank and XP
   are never scrolled out of reach */
.killstreaks-aperture .ks-body {
  flex: 1;
  min-height: 0;
  padding: 12px 14px 14px;
  overflow-y: auto;
  scrollbar-color: rgba(var(--amber-rgb), 0.42) transparent;
  scrollbar-width: thin;
}

/* ── section label ─────────────────────────────────────────────
   An amber tab, a word, a number. The old build ran a 1px rule to
   the far edge of every heading, which drew three horizontal lines
   into a panel that already has four band edges. */
.killstreaks-aperture .ks-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 7px;
}

.killstreaks-aperture .ks-label h3 {
  margin: 0;
  color: #e6ebef;
  font: 700 11px "Saira Condensed", Rajdhani, sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.killstreaks-aperture .ks-label__tab {
  width: 2px;
  height: 11px;
  background: var(--amber);
  box-shadow: 0 0 8px rgba(var(--amber-rgb), 0.5);
}

.killstreaks-aperture .ks-label__count {
  margin-left: auto;
  color: #6f7a84;
  font: 700 9px "Saira Condensed", Rajdhani, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.killstreaks-aperture .ks-label__count b { color: var(--amber-hot); font-variant-numeric: tabular-nums; }

/* ── 2 · slot rail ─────────────────────────────────────────────
   Four hex sockets mounted on a power bus. The bus runs amber from
   the left cap to the last filled node and steel after it, so the
   row reads as routed hardware rather than four loose icons.

   Hex geometry: 25/75% shoulders on a box of ratio 0.866 is the one
   combination that yields a regular hexagon. The old build used
   16/84% on a 66x54 box — six unequal edges, which is the asymmetry
   you can see when you zoom in. */
.killstreaks-aperture .ks-rail {
  --hexw: 62px;
  --hexh: calc(var(--hexw) * 0.866);
  --chip: 8px;
  --pad-t: 9px;
  --icon: 19px;

  position: relative;
  display: grid;
  margin: 0;
  padding: var(--pad-t) 6px 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  list-style: none;
  background: linear-gradient(90deg, rgba(9, 14, 20, 0), rgba(12, 18, 25, 0.62) 22%, rgba(12, 18, 25, 0.62) 78%, rgba(9, 14, 20, 0));
}

.killstreaks-aperture .ks-bus {
  --bus: 0%;
  position: absolute;
  z-index: 0;
  top: calc(var(--pad-t) + var(--chip) + var(--hexh));
  right: 6%;
  left: 6%;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(var(--amber-rgb), 0.9) 0,
    rgba(var(--amber-rgb), 0.9) var(--bus),
    rgba(158, 176, 192, 0.22) var(--bus),
    rgba(158, 176, 192, 0.22) 100%
  );
  transition: --bus 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* the lit run gets its own bloom so the glow stops where power stops */
.killstreaks-aperture .ks-bus::after {
  position: absolute;
  top: -1px;
  left: 0;
  width: var(--bus);
  height: 3px;
  background: rgba(var(--amber-rgb), 0.55);
  content: "";
  filter: blur(3px);
  transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.killstreaks-aperture .ks-slot {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  padding: var(--chip) 2px 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: center;
}

.killstreaks-aperture button.ks-slot { cursor: pointer; }
.killstreaks-aperture button.ks-slot:focus-visible { outline: 2px solid var(--amber-hot); outline-offset: 3px; }

.killstreaks-aperture .ks-hex {
  position: relative;
  width: var(--hexw);
  height: var(--hexh);
  flex: 0 0 auto;
}

/* every layer inherits the same hexagon, so nothing in this stack
   can render a square edge — the old equip glow was a box-shadow on
   an unclipped wrapper, which is why it lit a rectangle */
.killstreaks-aperture .ks-hex > * { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }

/* socket — a milled recess the hex sits in */
.killstreaks-aperture .ks-hex__socket {
  position: absolute;
  inset: -5px;
  background: rgba(160, 180, 200, 0.07);
}

/* rim — the bevel. drop-shadow (not box-shadow) so the glow traces
   the hexagon's alpha silhouette instead of its layout box */
.killstreaks-aperture .ks-hex__rim {
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, rgba(203, 219, 234, 0.42), rgba(126, 142, 158, 0.2) 48%, rgba(94, 108, 122, 0.3));
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.46));
  transition: background 200ms, filter 220ms;
}

/* face — uneven inset: a hexagon needs 1.155x more horizontal than
   vertical inset for the rim to read one weight on all six edges */
.killstreaks-aperture .ks-hex__face {
  position: absolute;
  inset: 1.3px 1.5px;
  background: linear-gradient(180deg, #0e141b, #070a0e);
  transition: background 200ms;
}

.killstreaks-aperture .ks-hex__face::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.07), transparent 42%);
  content: "";
}

.killstreaks-aperture .ks-hex__icon {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  /* Same opt-out as .ks-hex__key / __pulse — the hex clip on
     `.ks-hex > *` must not cut the FA glyph. */
  clip-path: none;
  color: #626d78;
  font-size: var(--icon, 19px);
  transform: translate(-50%, -50%);
  /* text-shadow, not filter: filter + transform double-rasters the ::before. */
  transition: color 200ms, text-shadow 200ms;
}

/* pulse ring — an SVG hexagon so the shockwave is the socket's own
   shape. preserveAspectRatio=none stretches it exactly to the box. */
.killstreaks-aperture .ks-hex__pulse {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: visible;
  clip-path: none;
  fill: none;
  opacity: 0;
  pointer-events: none;
  stroke: var(--amber-hot);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

/* hotkey chip — centred on the top edge. Previously it hung off the
   top-left vertex, which read as a second, competing origin. */
.killstreaks-aperture .ks-hex__key {
  position: absolute;
  z-index: 5;
  top: calc(var(--chip) * -1);
  left: 50%;
  display: grid;
  min-width: 20px;
  height: 16px;
  place-items: center;
  padding: 0 5px;
  border: 1px solid rgba(166, 183, 198, 0.36);
  border-radius: 3px;
  background: #05080b;
  clip-path: none;
  color: #9ca6af;
  font: 800 10px/1 Rajdhani, Inter, sans-serif;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.55);
  transform: translateX(-50%);
  transition: border-color 200ms, color 200ms, box-shadow 200ms;
}

/* node — sits on the bus at the hex's bottom vertex */
.killstreaks-aperture .ks-slot__node {
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border: 1px solid rgba(165, 182, 198, 0.32);
  background: #080c11;
  transform: rotate(45deg);
  transition: background 200ms, border-color 200ms, box-shadow 200ms;
}

.killstreaks-aperture .ks-slot__name {
  margin-top: 9px;
  max-width: 100%;
  overflow: hidden;
  color: #8d97a1;
  font: 700 11px/1 "Saira Condensed", Rajdhani, sans-serif;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 200ms;
}

.killstreaks-aperture .ks-slot__status {
  margin-top: 3px;
  color: #545e68;
  font: 700 8px/1 "Saira Condensed", Rajdhani, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color 200ms;
}

/* filled */
.killstreaks-aperture .ks-slot.is-filled .ks-hex__rim {
  background: linear-gradient(150deg, #ffdc94, var(--amber-hot) 26%, var(--amber) 54%, #a2570a);
  filter: drop-shadow(0 0 10px rgba(var(--amber-rgb), 0.4)) drop-shadow(0 5px 7px rgba(0, 0, 0, 0.46));
}

.killstreaks-aperture .ks-slot.is-filled .ks-hex__face {
  background:
    radial-gradient(72% 72% at 50% 34%, rgba(var(--amber-rgb), 0.26), transparent 74%),
    linear-gradient(180deg, #131820, #080c11);
}

.killstreaks-aperture .ks-slot.is-filled .ks-hex__icon { color: var(--amber-hot); text-shadow: 0 0 10px rgba(var(--amber-rgb), 0.45); }
.killstreaks-aperture .ks-slot.is-filled .ks-hex__key { border-color: rgba(var(--amber-rgb), 0.72); color: var(--amber-hot); box-shadow: 0 0 11px rgba(var(--amber-rgb), 0.18), 0 3px 8px rgba(0, 0, 0, 0.55); }
.killstreaks-aperture .ks-slot.is-filled .ks-slot__node { border-color: var(--amber); background: var(--amber); box-shadow: 0 0 10px rgba(var(--amber-rgb), 0.6); }
.killstreaks-aperture .ks-slot.is-filled .ks-slot__name { color: #fff; }
.killstreaks-aperture .ks-slot.is-filled .ks-slot__status { color: var(--amber); }

.killstreaks-aperture .ks-slot.is-open .ks-hex__icon { color: #4f5964; }

/* locked — hazard hatching reads as "sealed", not merely dimmed */
.killstreaks-aperture .ks-slot.is-locked { opacity: 0.72; }
.killstreaks-aperture .ks-slot.is-locked .ks-hex__face {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.04) 0 4px, transparent 4px 9px),
    linear-gradient(180deg, #0c1117, #06090d);
}
.killstreaks-aperture .ks-slot.is-locked .ks-hex__icon { font-size: calc(var(--icon, 19px) - 4px); }

/* hover: only actionable sockets respond */
.killstreaks-aperture button.ks-slot:hover .ks-hex__rim { filter: drop-shadow(0 0 14px rgba(var(--amber-rgb), 0.5)) drop-shadow(0 5px 7px rgba(0, 0, 0, 0.46)); }
.killstreaks-aperture button.ks-slot:hover .ks-hex__icon { text-shadow: 0 0 14px rgba(var(--amber-rgb), 0.6); }

/* ── 3 · arsenal ───────────────────────────────────────────────
   Two columns: a compact tile grid on the left, a standing intel
   column on the right that reads whatever is hovered or focused.

   The tiles can stay small precisely because the intel column
   exists — a tile only has to be identifiable, not self-describing,
   so it carries a glyph, a name and a cost and nothing else. */
.killstreaks-aperture .ks-arsenal { margin-top: 12px; }

.killstreaks-aperture .ks-arsenal__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 194px;
  gap: 9px;
  align-items: stretch;
}

.killstreaks-aperture .ks-groups { display: grid; min-width: 0; align-content: start; gap: 10px; }

.killstreaks-aperture .ks-group { --accent: var(--amber); --accent-rgb: var(--amber-rgb); min-width: 0; }
.killstreaks-aperture .ks-group.is-defensive { --accent: var(--def); --accent-rgb: var(--def-rgb); }

/* colour + proximity groups these rows; a trailing rule would be
   another horizontal line in a panel that already has four */
.killstreaks-aperture .ks-group__label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  color: var(--accent);
  font: 700 8.5px "Saira Condensed", Rajdhani, sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.killstreaks-aperture .ks-group__label i { font-size: 8.5px; }

.killstreaks-aperture .ks-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }

/* rim / face construction — a 1px rim that follows the bottom-right
   chamfer, the same two-layer cut the LV chip and squad marks use */
.killstreaks-aperture .ks-card {
  --cut: 11px;
  position: relative;
  display: block;
  min-width: 0;
  height: 96px;
  padding: 0;
  border: 0;
  background: linear-gradient(160deg, rgba(198, 214, 230, 0.2), rgba(110, 126, 142, 0.09) 52%, rgba(84, 98, 112, 0.14));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
  color: inherit;
  cursor: pointer;
  filter: drop-shadow(0 5px 11px rgba(0, 0, 0, 0.4));
  text-align: left;
  transition: background 190ms, filter 200ms, transform 200ms var(--ease-out);
}

.killstreaks-aperture .ks-card__face {
  position: absolute;
  inset: 1px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #080c11;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}

/* art bed: supplied capture over an accent bloom over a whisper of
   the header's hex mesh — enough to tie tile to chrome, not enough
   to compete with the glyph */
.killstreaks-aperture .ks-card__art {
  --veil: 0.66;
  --bloom: 0.15;
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, rgba(6, 10, 14, 0.06), rgba(6, 10, 14, var(--veil)) 62%, #080c11 94%),
    var(--art, none),
    radial-gradient(84% 62% at 50% 26%, rgba(var(--accent-rgb), var(--bloom)), transparent 72%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 17.32'%3E%3Cg fill='none' stroke='%23a9bccf' stroke-opacity='.075' stroke-width='.4' stroke-linejoin='round'%3E%3Cpath d='M10 0L5 8.66L-5 8.66L-10 0L-5 -8.66L5 -8.66Z'/%3E%3Cpath d='M10 17.32L5 25.98L-5 25.98L-10 17.32L-5 8.66L5 8.66Z'/%3E%3Cpath d='M40 0L35 8.66L25 8.66L20 0L25 -8.66L35 -8.66Z'/%3E%3Cpath d='M40 17.32L35 25.98L25 25.98L20 17.32L25 8.66L35 8.66Z'/%3E%3Cpath d='M25 8.66L20 17.32L10 17.32L5 8.66L10 0L20 0Z'/%3E%3C/g%3E%3C/svg%3E");
  background-position: center;
  background-size: cover, cover, auto, 68px 39px;
  transition: opacity 200ms, transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.killstreaks-aperture .ks-card__glyph {
  position: absolute;
  top: 33px;
  left: 0;
  width: 100%;
  color: var(--accent);
  font-size: 26px;
  text-align: center;
  filter: drop-shadow(0 0 12px rgba(var(--accent-rgb), 0.26)) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6));
  transform: translateY(-50%);
  transition: transform 220ms var(--ease-out), filter 220ms;
}

/* corner mark — equipped check or lock, top-right (the square
   corner; the chamfer is diagonally opposite so they never fight) */
.killstreaks-aperture .ks-card__mark {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  display: grid;
  width: 21px;
  height: 21px;
  align-items: start;
  justify-items: end;
  padding: 2px 3px 0 0;
  background: rgba(148, 162, 176, 0.16);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  color: #94a0ab;
  font-size: 7px;
  opacity: 0;
  transform: translate(5px, -5px);
  transition: opacity 200ms, transform 260ms var(--ease-out), background 200ms, color 200ms;
}

.killstreaks-aperture .ks-card__body {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  padding: 0 8px 7px;
}

.killstreaks-aperture .ks-card__name {
  display: block;
  overflow: hidden;
  color: #e7ecf0;
  font: 700 11px/1.05 "Saira Condensed", Rajdhani, sans-serif;
  letter-spacing: 0.045em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  transition: color 190ms;
}

.killstreaks-aperture .ks-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  margin-top: 4px;
  font: 700 7.5px/1 "Saira Condensed", Rajdhani, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.killstreaks-aperture .ks-card__cost { display: inline-flex; align-items: center; gap: 3px; color: var(--accent); }
.killstreaks-aperture .ks-card__cost i { font-size: 7px; opacity: 0.8; }
.killstreaks-aperture .ks-card__state { color: #79848f; }

.killstreaks-aperture .ks-card:hover, .killstreaks-aperture .ks-card:focus-visible {
  background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.55), rgba(var(--accent-rgb), 0.18) 52%, rgba(var(--accent-rgb), 0.3));
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.5));
  outline: none;
  transform: translateY(-2px);
}

.killstreaks-aperture .ks-card:hover .ks-card__art, .killstreaks-aperture .ks-card:focus-visible .ks-card__art { --veil: 0.6; --bloom: 0.24; transform: scale(1.04); }

.killstreaks-aperture .ks-card:hover .ks-card__glyph, .killstreaks-aperture .ks-card:focus-visible .ks-card__glyph { filter: drop-shadow(0 0 18px rgba(var(--accent-rgb), 0.45)) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6)); transform: translateY(-50%) scale(1.08); }

.killstreaks-aperture .ks-card:hover .ks-card__name, .killstreaks-aperture .ks-card:focus-visible .ks-card__name { color: #fff; }

/* equipped */
.killstreaks-aperture .ks-card.is-equipped {
  background: linear-gradient(160deg, #ffdc94, var(--accent) 42%, rgba(var(--accent-rgb), 0.55));
  filter: drop-shadow(0 0 12px rgba(var(--accent-rgb), 0.22)) drop-shadow(0 5px 11px rgba(0, 0, 0, 0.4));
}

.killstreaks-aperture .ks-card.is-equipped .ks-card__art { --veil: 0.58; --bloom: 0.3; }
.killstreaks-aperture .ks-card.is-equipped .ks-card__name { color: #fff; }
.killstreaks-aperture .ks-card.is-equipped .ks-card__mark { background: var(--accent); color: #14100a; opacity: 1; transform: none; }

/* locked */
.killstreaks-aperture .ks-card.is-locked { cursor: not-allowed; }
.killstreaks-aperture .ks-card.is-locked .ks-card__face { filter: grayscale(0.72) brightness(0.74); }
.killstreaks-aperture .ks-card.is-locked .ks-card__mark { opacity: 1; transform: none; }
.killstreaks-aperture .ks-card.is-locked:hover { background: linear-gradient(160deg, rgba(206, 120, 111, 0.42), rgba(206, 120, 111, 0.14) 52%, rgba(206, 120, 111, 0.2)); transform: translateY(-1px); }
.killstreaks-aperture .ks-card.is-locked:hover .ks-card__glyph { transform: translateY(-50%); }

/* ── intel column ──────────────────────────────────────────────
   One surface, one rim, zero internal dividers. The old panel drew
   a header rule, a bordered icon well and two bordered stat chips —
   four enclosures to carry four facts. Here the same four facts are
   separated by type weight, colour and space, and the only painted
   mass is the accent hairline at the top edge.

   It fills the grid row, so its height is set by the tile stack
   beside it and the two columns always bottom out together. */
.killstreaks-aperture .ks-intel {
  --accent: var(--amber);
  --accent-rgb: var(--amber-rgb);
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(171, 188, 204, 0.14);
  border-radius: 5px;
  background: #070b0f;
}

.killstreaks-aperture .ks-intel::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 3;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb), 0.1));
  content: "";
  transition: background 220ms;
}

/* art well — the glyph floats on an accent bloom, no frame */
.killstreaks-aperture .ks-intel__well {
  position: relative;
  display: grid;
  min-height: 92px;
  flex: 1;
  place-items: center;
  overflow: hidden;
}

.killstreaks-aperture .ks-intel__art {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, rgba(7, 11, 15, 0.05), rgba(7, 11, 15, 0.72) 68%, #070b0f 96%),
    var(--art, none),
    radial-gradient(72% 60% at 50% 38%, rgba(var(--accent-rgb), 0.2), transparent 74%);
  background-position: center;
  background-size: cover, cover, auto;
  transition: background 220ms;
}

.killstreaks-aperture .ks-intel__glyph {
  position: relative;
  color: var(--accent);
  font-size: 44px;
  filter: drop-shadow(0 0 20px rgba(var(--accent-rgb), 0.3)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.7));
  transition: color 220ms;
}

.killstreaks-aperture .ks-intel__copy { padding: 0 11px; }

.killstreaks-aperture .ks-intel__class {
  display: block;
  color: var(--accent);
  font: 700 8px "Saira Condensed", Rajdhani, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: color 220ms;
}

.killstreaks-aperture .ks-intel__name {
  display: block;
  margin: 4px 0 6px;
  color: #fff;
  font: 700 18px/0.95 "Saira Condensed", Rajdhani, sans-serif;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.killstreaks-aperture .ks-intel__brief {
  display: block;
  color: #909aa4;
  font-size: 9.5px;
  line-height: 1.45;
}

/* facts — label left, value right, held apart by a dotted leader of
   nothing at all. Two type colours do the work a border used to. */
.killstreaks-aperture .ks-intel__facts {
  display: grid;
  margin: 0;
  padding: 11px 11px 10px;
  gap: 5px;
}

.killstreaks-aperture .ks-intel__fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font: 700 8.5px "Saira Condensed", Rajdhani, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.killstreaks-aperture .ks-intel__fact dt { color: #626d78; }
.killstreaks-aperture .ks-intel__fact dd { margin: 0; color: #d9e0e6; font-variant-numeric: tabular-nums; }
.killstreaks-aperture .ks-intel__fact dd i { margin-right: 4px; color: var(--accent); font-size: 8px; }
.killstreaks-aperture .ks-intel__fact.is-locked dd { color: #c98980; }
.killstreaks-aperture .ks-intel__fact.is-on dd { color: var(--accent); }

/* ── 4 · progression ───────────────────────────────────────────
   Insignia · LV chip · XP bar — lifted verbatim from the v2 lobby
   identity card, so the modal and the lobby share one construction
   rather than two dialects of the same idea. */
.killstreaks-aperture .ks-progress {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-top: 1px solid rgba(171, 188, 204, 0.11);
  background: linear-gradient(180deg, rgba(9, 13, 18, 0.92), rgba(4, 7, 10, 0.96));
}

.killstreaks-aperture .ks-progress__rank { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.killstreaks-aperture .ks-progress__rank img { display: block; width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45)); }

.killstreaks-aperture .ks-panel .rank-level {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  min-width: 42px;
  padding: 3px 7px;
  font: 800 11px/1 "Saira Condensed", Rajdhani, sans-serif;
  letter-spacing: 0.06em;
  white-space: nowrap;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.62));
}

.killstreaks-aperture .ks-panel .rank-level::before, .killstreaks-aperture .ks-panel .rank-level::after {
  position: absolute;
  content: "";
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}

.killstreaks-aperture .ks-panel .rank-level::before { --cut: 5px; inset: 0; background: rgba(4, 7, 11, 0.92); }
.killstreaks-aperture .ks-panel .rank-level::after {
  --cut: 4px;
  inset: 1px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, var(--amber-hot), var(--amber) 62%, #dd7f05);
}

.killstreaks-aperture .ks-panel .rank-level small, .killstreaks-aperture .ks-panel .rank-level b { position: relative; z-index: 1; }
.killstreaks-aperture .ks-panel .rank-level small { margin-right: 4px; color: rgba(38, 18, 0, 0.62); font-size: 8.5px; font-weight: 800; letter-spacing: 0.14em; }
.killstreaks-aperture .ks-panel .rank-level b { color: #231301; font-weight: 800; font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 rgba(255, 219, 150, 0.4); }

.killstreaks-aperture .ks-progress__meter { display: grid; flex: 1; min-width: 0; row-gap: 4px; }

.killstreaks-aperture .ks-panel .xp {
  --xp: 68.33%;
  position: relative;
  height: 13px;
  min-width: 0;
  background: linear-gradient(180deg, rgba(214, 228, 240, 0.24), rgba(120, 136, 150, 0.09) 46%, rgba(198, 214, 228, 0.16));
  clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}

.killstreaks-aperture .ks-panel .xp__track {
  position: absolute;
  inset: 1px;
  overflow: hidden;
  background: linear-gradient(180deg, #04070a, #0c1219);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.9);
  clip-path: inherit;
}

.killstreaks-aperture .ks-panel .xp__fill {
  position: relative;
  width: var(--xp);
  height: 100%;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.04) 46%, rgba(0, 0, 0, 0.2)),
    linear-gradient(-45deg, rgba(255, 255, 255, 0.17) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.17) 50%, rgba(255, 255, 255, 0.17) 75%, transparent 75%, transparent),
    linear-gradient(90deg, #b85f00, var(--amber) 56%, var(--amber-hot));
  background-size: 100% 100%, 14px 14px, 100% 100%;
  box-shadow: 0 0 14px rgba(var(--amber-rgb), 0.42);
  animation: ks-xp-stripes 760ms linear infinite;
}

@keyframes ks-xp-stripes{
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 0 0, 14px 0, 0 0; }
}

.killstreaks-aperture .ks-panel .xp__fill::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, #fff7e2, #ffd082);
  content: "";
  box-shadow: 0 0 8px rgba(var(--amber-rgb), 0.95), 0 0 20px rgba(var(--amber-rgb), 0.5);
}

.killstreaks-aperture .ks-panel .xp__ticks {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(0, 0, 0, 0.3) calc(10% - 2px) calc(10% - 1px), rgba(255, 255, 255, 0.055) calc(10% - 1px) 10%);
  pointer-events: none;
}

.killstreaks-aperture .ks-panel .xp__value {
  position: absolute;
  top: 0;
  right: 8px;
  bottom: 0;
  display: flex;
  align-items: center;
  color: #fff;
  font: 700 9px "Saira Condensed", Rajdhani, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.09em;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}

.killstreaks-aperture .ks-progress__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding-right: 8px;
  color: #6d7883;
  font: 600 8px/1 "Saira Condensed", Rajdhani, sans-serif;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
}

.killstreaks-aperture .ks-progress__meta b { color: var(--amber-hot); font-variant-numeric: tabular-nums; }
.killstreaks-aperture .ks-progress__meta .ks-next { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.killstreaks-aperture .ks-progress__meta .ks-next strong { color: #d7dde3; font-weight: 700; }

.killstreaks-aperture .ks-progress__hint { display: grid; flex: 0 0 auto; gap: 4px; }

.killstreaks-aperture .ks-hint {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #5d6873;
  font: 700 7.5px "Saira Condensed", Rajdhani, sans-serif;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.killstreaks-aperture .ks-hint kbd {
  display: inline-grid;
  min-width: 17px;
  height: 14px;
  place-items: center;
  padding: 0 4px;
  border: 1px solid rgba(173, 189, 204, 0.2);
  border-radius: 3px;
  background: #070a0e;
  color: #a7b0b8;
  font: 800 7.5px/1 Rajdhani, Inter, sans-serif;
  box-shadow: 0 2px 0 #020304;
}

/* ── toast ─────────────────────────────────────────────────────── */
.killstreaks-aperture .ks-toast {
  position: absolute;
  z-index: 12;
  right: 14px;
  bottom: 66px;
  max-width: min(320px, calc(100% - 28px));
  padding: 7px 11px;
  background: rgba(8, 11, 15, 0.98);
  border-left: 2px solid var(--amber);
  color: #e6eaed;
  font: 700 9.5px "Saira Condensed", Rajdhani, sans-serif;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transform: translateY(7px);
  transition: opacity 170ms, transform 210ms var(--ease-out);
}

.killstreaks-aperture .ks-toast.is-visible { opacity: 1; transform: none; }
.killstreaks-aperture .ks-toast.is-error { border-left-color: #ec695d; color: #ffaaa2; }

/* ── equip / unequip choreography ──────────────────────────────
   All of it is transform / opacity / colour on at most three
   elements per event, so it composites without layout.

   Order on equip: the tile flashes, a ghost glyph flies tile ->
   socket, and the socket seats on arrival (hex pop + icon pop +
   hexagonal shockwave + node pop) while the bus routes power. */
@keyframes ks-hex-seat{
  0% { transform: scale(0.84); }
  44% { transform: scale(1.15); }
  72% { transform: scale(0.975); }
  100% { transform: scale(1); }
}

@keyframes ks-icon-pop{
  0% { color: #fff; opacity: 0; transform: translate(-50%, -50%) scale(0.35); }
  42% { color: #fff; opacity: 1; transform: translate(-50%, -50%) scale(1.32); }
  100% { color: var(--amber-hot); opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes ks-pulse-ring{
  0% { opacity: 0.95; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.85); }
}

@keyframes ks-node-pop{
  0% { transform: rotate(45deg) scale(1); }
  45% { background: #fff; border-color: #fff; box-shadow: 0 0 14px #fff; transform: rotate(45deg) scale(1.7); }
  100% { transform: rotate(45deg) scale(1); }
}

@keyframes ks-card-equip{
  0% { transform: scale(1); }
  26% { filter: brightness(2.4) drop-shadow(0 0 18px rgba(var(--accent-rgb), 0.7)); transform: scale(1.045); }
  100% { transform: scale(1); }
}

@keyframes ks-card-clear{
  35% { filter: saturate(0.3) brightness(0.72); transform: scale(0.96); }
}

@keyframes ks-hex-power-down{
  0% { opacity: 1; }
  18% { opacity: 0.25; }
  34% { opacity: 0.9; }
  52% { opacity: 0.15; }
  100% { opacity: 1; }
}

@keyframes ks-card-deny{
  22% { transform: translateX(-4px); }
  52% { transform: translateX(4px); }
  78% { transform: translateX(-2px); }
}

.killstreaks-aperture .ks-hex.is-seating { animation: ks-hex-seat 460ms cubic-bezier(0.22, 1, 0.36, 1); }
.killstreaks-aperture .ks-hex.is-seating .ks-hex__icon { animation: ks-icon-pop 460ms cubic-bezier(0.22, 1, 0.36, 1); }
.killstreaks-aperture .ks-hex.is-seating .ks-hex__pulse { animation: ks-pulse-ring 620ms cubic-bezier(0.16, 0.85, 0.35, 1); }
.killstreaks-aperture .ks-hex.is-seating ~ .ks-slot__node { animation: ks-node-pop 460ms cubic-bezier(0.22, 1, 0.36, 1); }
.killstreaks-aperture .ks-hex.is-clearing { animation: ks-hex-power-down 340ms steps(1, end); }
.killstreaks-aperture .ks-card.just-equipped { animation: ks-card-equip 520ms cubic-bezier(0.22, 1, 0.36, 1); }
.killstreaks-aperture .ks-card.just-cleared { animation: ks-card-clear 360ms ease; }
.killstreaks-aperture .ks-card.is-denied { animation: ks-card-deny 320ms ease; }

/* ghost glyph — the only element the equip flight creates */


/* ── responsive ────────────────────────────────────────────────── */
@media (max-width: 660px) {
  .killstreaks-aperture .ks-panel { width: 100%; max-height: none; }
  .killstreaks-aperture .ks-header { min-height: 56px; padding: 9px 46px 8px 13px; }
  .killstreaks-aperture .ks-title { font-size: 22px; }
  .killstreaks-aperture .ks-body { padding: 10px 10px 12px; }
  .killstreaks-aperture .ks-rail { --hexw: 56px; gap: 3px; }

  /* intel drops under the tiles and lies down: well left, copy right */
  .killstreaks-aperture .ks-arsenal__grid { grid-template-columns: minmax(0, 1fr); }
  .killstreaks-aperture .ks-intel { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto; }
  .killstreaks-aperture .ks-intel__well { grid-row: 1 / 3; min-height: 104px; }
  .killstreaks-aperture .ks-intel__copy { padding: 11px 11px 0; }
  .killstreaks-aperture .ks-intel__facts { padding: 9px 11px 11px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .killstreaks-aperture .ks-intel__fact { flex-direction: column; align-items: flex-start; gap: 3px; }

  .killstreaks-aperture .ks-progress__hint { display: none; }
}

@media (max-width: 430px) {
  .killstreaks-aperture .ks-card { height: 88px; }
  .killstreaks-aperture .ks-intel { grid-template-columns: 78px minmax(0, 1fr); }
  .killstreaks-aperture .ks-progress__meta { font-size: 7.5px; letter-spacing: 0.1em; }
}

@media (prefers-reduced-motion: reduce) {
  .killstreaks-aperture .xp__fill { animation: none; }
}

/* Shared selection header aligns the offensive row with the intel card. */
.killstreaks-aperture .ks-arsenal__topline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 194px;
  gap: 9px;
  align-items: center;
  margin-bottom: 6px;
}
.killstreaks-aperture .ks-arsenal__topline .ks-group__label { margin: 0; }
.killstreaks-aperture .ks-arsenal__topline .ks-label__count { justify-self: end; }
.killstreaks-aperture .ks-toast { bottom: 14px; }

@media (max-width: 660px) {
  .killstreaks-aperture .ks-arsenal__topline { grid-template-columns: minmax(0, 1fr) auto; }
}


.killstreaks-aperture .ks-progress { gap: 14px; padding: 10px 14px; }
.killstreaks-aperture .ks-progress__rank img { width: 38px; height: 38px; }
.killstreaks-aperture .ks-progress__meter { row-gap: 6px; }
.killstreaks-aperture .ks-panel .xp { height: 15px; }
.killstreaks-aperture .ks-panel .xp__value { font-size: 10px; }
.killstreaks-aperture .ks-progress__meta {
  padding-right: 0;
  color: #89949e;
  font-size: 9.25px;
  line-height: 1.05;
  letter-spacing: 0.12em;
}
.killstreaks-aperture .ks-progress__meta .ks-next strong { color: #eef2f5; }

@media (max-width: 430px) {
  .killstreaks-aperture .ks-progress__meta { font-size: 8.25px; letter-spacing: 0.09em; }
}