/* Exact Loadout from loadout.html (compact right-rail pass preserved).

   The socket rail and the quick-equip picker are the same .ks-* / .lo-*
   blocks loadout.html runs — copied verbatim, not re-derived. If either
   moves, both files move together: this is the pair that drifted last
   time, when the modal took the 25/75-on-0.866 hexagon and the rail was
   left on the old 16/84 frame. Driven by v2/js/loadout-quick-equip.js. */
    .loadout {
      /* streak class accents — the picker tints from these; loadout.html
         puts them on :root because its modal lives outside .loadout */
      --def: #4ecb70;
      --def-rgb: 78, 203, 112;

      position: relative;
      isolation: isolate;
      width: 100%;
      overflow: hidden;
      border: 1px solid rgba(174, 191, 207, 0.13);
      border-radius: 10px;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent 28%),
        linear-gradient(180deg, rgba(13, 19, 26, 0.98), rgba(7, 11, 15, 0.99));
      box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.56),
        inset 0 1px 0 rgba(255, 255, 255, 0.055);
    }

    .loadout::before,
    .loadout::after {
      position: absolute;
      display: none;
      z-index: 6;
      width: 30px;
      height: 30px;
      border-color: rgba(var(--amber-rgb), 0.76);
      content: "";
      pointer-events: none;
    }

    .loadout::before {
      top: -1px;
      left: -1px;
      border-top: 2px solid;
      border-left: 2px solid;
    }

    .loadout::after {
      right: -1px;
      bottom: -1px;
      border-right: 2px solid;
      border-bottom: 2px solid;
    }

    .loadout__honeycomb {
      position: absolute;
      z-index: 0;
      top: -38px;
      right: -34px;
      width: 360px;
      height: 238px;
      display: grid;
      grid-template-columns: repeat(7, 54px);
      grid-auto-rows: 47px;
      gap: 0;
      opacity: 0.46;
      pointer-events: none;
      transform: rotate(-1deg);
      -webkit-mask-image: linear-gradient(110deg, transparent 2%, #000 48%, #000 100%);
      mask-image: linear-gradient(110deg, transparent 2%, #000 48%, #000 100%);
    }

    .loadout__honeycomb span {
      position: relative;
      width: 54px;
      height: 62px;
      background: rgba(164, 183, 201, 0.12);
      clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
    }

    .loadout__honeycomb span:nth-child(even) {
      transform: translateY(31px);
    }

    .loadout__honeycomb span::after {
      position: absolute;
      inset: 1px;
      background: rgba(7, 11, 15, 0.9);
      clip-path: inherit;
      content: "";
    }

    .loadout__topline {
      position: absolute;
      display: none;
      z-index: 2;
      top: 0;
      left: 0;
      width: 44%;
      height: 2px;
      background: linear-gradient(90deg, var(--amber-hot), var(--amber), transparent);
      box-shadow: 0 0 14px rgba(var(--amber-rgb), 0.35);
      pointer-events: none;
    }

    .loadout__header {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 20px;
      min-height: 78px;
      padding: 15px 16px 12px 18px;
      background: linear-gradient(90deg, rgba(7, 11, 15, 0.98) 0 40%, rgba(7, 11, 15, 0.88) 74%, rgba(7, 11, 15, 0.58));
      border-bottom: 1px solid rgba(178, 195, 211, 0.12);
    }

    .loadout__title {
      margin: 0;
      color: #fff;
      font-family: Rajdhani, Inter, sans-serif;
      font-size: clamp(25px, 4.5vw, 30px);
      font-weight: 800;
      letter-spacing: 0.055em;
      line-height: 0.94;
      text-transform: uppercase;
      text-shadow: 0 2px 12px rgba(0, 0, 0, 0.62);
    }

    .loadout__title::after {
      display: block;
      width: 42px;
      height: 2px;
      margin-top: 8px;
      background: var(--amber);
      box-shadow: 0 0 10px rgba(var(--amber-rgb), 0.28);
      content: "";
    }

    .level {
      min-width: 166px;
      text-align: right;
    }

    .level__readout {
      display: flex;
      align-items: baseline;
      justify-content: flex-end;
      gap: 7px;
      font-family: Rajdhani, Inter, sans-serif;
      line-height: 1;
    }

    .level__label {
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .level__value {
      color: #fff;
      font-size: 29px;
      font-weight: 800;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
    }

    .level__progress {
      position: relative;
      width: 100%;
      height: 5px;
      margin-top: 7px;
      overflow: hidden;
      border: 1px solid rgba(177, 194, 210, 0.14);
      background: rgba(0, 0, 0, 0.62);
      transform: skewX(-28deg);
    }

    .level__progress-bar {
      display: block;
      width: 68.333%;
      height: 100%;
      background: linear-gradient(90deg, var(--amber-deep), var(--amber-hot));
      box-shadow: 0 0 12px rgba(var(--amber-rgb), 0.4);
    }

    .level__xp {
      display: block;
      margin-top: 5px;
      color: #99a3ad;
      font-family: Rajdhani, Inter, sans-serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.07em;
    }

    .next-unlock {
      position: relative;
      z-index: 1;
      display: flex;
      min-height: 38px;
      align-items: center;
      gap: 8px;
      padding: 0 18px;
      background: rgba(7, 11, 15, 0.88);
      border-bottom: 1px solid rgba(176, 192, 207, 0.1);
      color: var(--muted);
      font-size: 11px;
    }

    .next-unlock__label {
      flex: 0 0 auto;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.11em;
      text-transform: uppercase;
    }

    .next-unlock__chevron {
      width: 0;
      height: 0;
      border-top: 4px solid transparent;
      border-bottom: 4px solid transparent;
      border-left: 5px solid rgba(var(--amber-rgb), 0.7);
    }

    .next-unlock strong {
      min-width: 0;
      overflow: hidden;
      color: var(--amber-hot);
      font-family: Rajdhani, Inter, sans-serif;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 0.045em;
      text-overflow: ellipsis;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .next-unlock__level {
      flex: 0 0 auto;
      margin-left: auto;
      padding-left: 10px;
      border-left: 1px solid rgba(var(--amber-rgb), 0.24);
      color: #dfe4e8;
      font-family: Rajdhani, Inter, sans-serif;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    /* ── closed rail · sockets ──────────────────────────────────────
       The rail now runs the modal's own hardware at a smaller scale:
       the same .ks-slot / .ks-hex construction, the same 25/75-on-0.866
       hexagon, the same power bus. Only four size vars differ, so the
       two surfaces cannot drift apart again — which is exactly how the
       old 16/84-on-66x54 frame survived here after the modal moved on.

       Everything the sockets need is inherited from this container, so
       porting the rail is porting this rule plus the .ks-* block. */
    .loadout__rail {
      --hexw: 52px;
      --hexh: calc(var(--hexw) * 0.866);
      --chip: 7px;
      --pad-t: 10px;
      --icon: 17px;

      position: relative;
      z-index: 1;
      display: grid;
      margin: 0;
      padding: var(--pad-t) 8px 9px;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 6px;
      list-style: none;
      background:
        linear-gradient(90deg, rgba(4, 7, 10, 0.96), rgba(9, 14, 19, 0.9) 50%, rgba(4, 7, 10, 0.94)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent);
    }

    /* ── quick equip ────────────────────────────────────────────────
       A player who only wants to re-route key 4 should not have to open
       a modal to do it. The picker rises out of the rail, carries one
       hex chip per streak and one live readout line, and closes itself
       the moment the choice is made.

       It is one surface: a single rim, no internal rules, no per-chip
       labels. Class, name and cost live on the readout line and are
       told apart by weight, colour and space — the chips only have to
       be identifiable, which at this size is what a glyph is for. */
    .lo-pick {
      --accent: var(--amber);
      --accent-rgb: var(--amber-rgb);

      position: absolute;
      z-index: 4;
      right: 6px;
      bottom: calc(100% + 5px);
      left: 6px;
      /* Content-height by default, hung off the socket by JS. Column
         flex only matters in the fallback where the card is too short
         for that and both edges get pinned instead — then the readout
         and the chip row centre in the band rather than spilling. */
      display: flex;
      max-width: 280px;
      flex-direction: column;
      justify-content: center;
      padding: 9px 10px 10px;
      border-radius: 7px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 34%),
        linear-gradient(180deg, rgba(14, 20, 27, 0.99), rgba(7, 11, 15, 0.995));
      box-shadow:
        inset 0 0 0 1px rgba(178, 195, 211, 0.14),
        0 18px 40px rgba(0, 0, 0, 0.66);
      opacity: 0;
      transform: translateY(9px);
      transform-origin: bottom left;
      transition:
        opacity 150ms ease,
        transform 240ms var(--ease-out);
      will-change: transform, opacity;
    }

    .lo-pick[hidden] { display: none; }

    /* the edge that faces the rail carries the accent, so the panel
       reads as powered from the bus rather than floated over it */
    .lo-pick::before {
      position: absolute;
      right: 12px;
      bottom: 0;
      left: 12px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(var(--amber-rgb), 0.72), transparent);
      content: "";
      pointer-events: none;
    }

    /* lead wire — bridges the gap down to the socket being edited, so
       the panel is visibly wired to one slot and not to the rail */
    .lo-pick::after {
      position: absolute;
      bottom: -5px;
      left: var(--anchor, 12.5%);
      width: 1px;
      height: 5px;
      background: linear-gradient(180deg, var(--amber), rgba(var(--amber-rgb), 0));
      content: "";
      pointer-events: none;
    }

    .lo-pick.is-open {
      opacity: 1;
      transform: none;
    }

    .lo-pick__read {
      display: flex;
      align-items: baseline;
      gap: 7px;
      margin: 0 0 8px;
      padding: 0 1px;
    }

    .lo-pick__class {
      flex: 0 0 auto;
      color: var(--accent);
      font: 700 8px/1 "Saira Condensed", Rajdhani, sans-serif;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      transition: color 160ms;
    }

    .lo-pick__name {
      min-width: 0;
      overflow: hidden;
      color: #eef2f6;
      font: 700 11px/1 "Saira Condensed", Rajdhani, sans-serif;
      letter-spacing: 0.06em;
      text-overflow: ellipsis;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .lo-pick__fact {
      flex: 0 0 auto;
      margin-left: auto;
      color: #6d7883;
      font: 700 8px/1 "Saira Condensed", Rajdhani, sans-serif;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      transition: color 160ms;
    }

    .lo-pick__fact.is-on { color: var(--amber); }
    .lo-pick__fact.is-locked { color: #d08c82; }
    .lo-pick__fact.is-flash { animation: lo-fact-flash 380ms ease; }

    /* The row fills the panel exactly: six chips at flex-basis 0 with
       a 6px gap. align-items keeps the aspect ratio deriving height from
       width rather than the other way round, so the chip is a hexagon by
       construction and not by whatever the row happens to stretch to. */
    .lo-pick__row {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* chip — the socket's construction reduced to two layers, because
       at 45px a rim and a face are all that still read */
    .lo-chip {
      --accent: var(--amber);
      --accent-rgb: var(--amber-rgb);

      position: relative;
      display: grid;
      min-width: 0;
      max-width: 46px;
      flex: 1 1 0;
      place-items: center;
      aspect-ratio: 1000 / 866;
      padding: 0;
      border: 0;
      background: linear-gradient(150deg, rgba(203, 219, 234, 0.34), rgba(126, 142, 158, 0.16) 48%, rgba(94, 108, 122, 0.24));
      clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
      color: #7f8a95;
      cursor: pointer;
      filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.5));
      opacity: 0;
      transform: translateY(7px) scale(0.88);
      transition:
        opacity 170ms ease,
        transform 260ms var(--ease-out),
        background 180ms ease,
        filter 200ms ease;
    }

    .lo-chip::before {
      position: absolute;
      inset: 1px 1.15px;
      background: linear-gradient(180deg, #101720, #080c11);
      clip-path: inherit;
      content: "";
      transition: background 180ms ease;
    }

    .lo-chip__glyph {
      position: relative;
      z-index: 1;
      font-size: 14px;
      transition:
        color 180ms ease,
        filter 200ms ease,
        transform 220ms var(--ease-out);
    }

    /* the stagger is on opacity and transform only — a shared delay
       would also lag the hover tint by up to 130ms */
    .lo-pick.is-open .lo-chip {
      opacity: 1;
      transform: none;
      transition-delay: calc(var(--n) * 26ms), calc(var(--n) * 26ms), 0s, 0s;
    }

    .lo-chip.is-def {
      --accent: var(--def);
      --accent-rgb: var(--def-rgb);
    }

    .lo-chip:hover,
    .lo-chip:focus-visible {
      background: linear-gradient(150deg, rgba(255, 255, 255, 0.55), var(--accent) 42%, rgba(var(--accent-rgb), 0.45));
      filter: drop-shadow(0 0 11px rgba(var(--accent-rgb), 0.42)) drop-shadow(0 3px 7px rgba(0, 0, 0, 0.5));
      outline: none;
    }

    .lo-chip:hover .lo-chip__glyph,
    .lo-chip:focus-visible .lo-chip__glyph {
      color: var(--accent);
      transform: scale(1.1);
    }

    .lo-chip.is-equipped {
      background: linear-gradient(150deg, rgba(255, 255, 255, 0.62), var(--accent) 38%, rgba(var(--accent-rgb), 0.55));
      filter: drop-shadow(0 0 13px rgba(var(--accent-rgb), 0.45)) drop-shadow(0 3px 7px rgba(0, 0, 0, 0.5));
    }

    .lo-chip.is-equipped::before {
      background:
        radial-gradient(72% 72% at 50% 34%, rgba(var(--accent-rgb), 0.3), transparent 74%),
        linear-gradient(180deg, #131a22, #080c11);
    }

    .lo-chip.is-equipped .lo-chip__glyph {
      color: var(--accent);
      filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.5));
    }

    /* locked — the streak stays legible so the row still reads as a
       progression path; the hatch and the readout carry the gate */
    .lo-chip.is-locked {
      background: linear-gradient(150deg, rgba(150, 166, 182, 0.2), rgba(94, 108, 122, 0.09) 48%, rgba(70, 82, 94, 0.16));
      cursor: not-allowed;
      filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.5));
    }

    .lo-chip.is-locked::before {
      background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.045) 0 3px, transparent 3px 7px),
        linear-gradient(180deg, #0c1117, #06090d);
    }

    .lo-chip.is-locked .lo-chip__glyph { color: #4d5761; }

    .lo-chip.is-locked:hover,
    .lo-chip.is-locked:focus-visible {
      background: linear-gradient(150deg, rgba(208, 140, 130, 0.5), rgba(208, 140, 130, 0.16) 52%, rgba(208, 140, 130, 0.26));
    }

    .lo-chip.is-locked:hover .lo-chip__glyph,
    .lo-chip.is-locked:focus-visible .lo-chip__glyph {
      color: #d08c82;
      transform: none;
    }

    .lo-chip.is-denied { animation: lo-chip-deny 320ms ease; }

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

    @keyframes lo-fact-flash {
      0%, 100% { opacity: 1; }
      30% { opacity: 0.2; }
      60% { opacity: 1; }
    }

    /* --bus animates only if registered: a raw custom property in a
       gradient stop snaps between values instead of travelling. */
    @property --bus {
      syntax: "<percentage>";
      inherits: false;
      initial-value: 0%;
    }

    .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 */
    .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);
    }

    .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;
    }

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

    .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 */
    .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 */
    .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 */
    .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 */
    .ks-hex__face {
      position: absolute;
      inset: 1.3px 1.5px;
      background: linear-gradient(180deg, #0e141b, #070a0e);
      transition: background 200ms;
    }

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

    .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. */
    .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. */
    .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 */
    .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;
    }

    .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;
    }

    .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 */
    .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));
    }

    .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);
    }

    .ks-slot.is-filled .ks-hex__icon { color: var(--amber-hot); text-shadow: 0 0 10px rgba(var(--amber-rgb), 0.45); }
    .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); }
    .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); }
    .ks-slot.is-filled .ks-slot__name { color: #fff; }
    .ks-slot.is-filled .ks-slot__status { color: var(--amber); }

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

    /* locked — hazard hatching reads as "sealed", not merely dimmed */
    .ks-slot.is-locked { opacity: 0.72; }
    .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);
    }
    .ks-slot.is-locked .ks-hex__icon { font-size: calc(var(--icon, 19px) - 4px); }

    /* hover: only actionable sockets respond */
    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)); }
    button.ks-slot:hover .ks-hex__icon { text-shadow: 0 0 14px rgba(var(--amber-rgb), 0.6); }

    @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-hex-power-down {
      0% { opacity: 1; }
      18% { opacity: 0.25; }
      34% { opacity: 0.9; }
      52% { opacity: 0.15; }
      100% { opacity: 1; }
    }

    .ks-hex.is-seating { animation: ks-hex-seat 460ms cubic-bezier(0.22, 1, 0.36, 1); }
    .ks-hex.is-seating .ks-hex__icon { animation: ks-icon-pop 460ms cubic-bezier(0.22, 1, 0.36, 1); }
    .ks-hex.is-seating .ks-hex__pulse { animation: ks-pulse-ring 620ms cubic-bezier(0.16, 0.85, 0.35, 1); }
    .ks-hex.is-seating ~ .ks-slot__node { animation: ks-node-pop 460ms cubic-bezier(0.22, 1, 0.36, 1); }
    .ks-hex.is-clearing { animation: ks-hex-power-down 340ms steps(1, end); }

    /* ghost glyph — the only element the equip flight creates */
    .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;
    }

    .loadout__action-wrap {
      position: relative;
      z-index: 2;
      padding: 0 14px 14px;
      background: rgba(4, 7, 10, 0.95);
    }

    .loadout__action {
      position: relative;
      display: flex;
      width: 100%;
      min-height: 44px;
      align-items: center;
      justify-content: center;
      gap: 12px;
      overflow: hidden;
      border: 1px solid transparent;
      border-radius: 7px;
      outline: 0;
      background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.25), transparent 21%),
        linear-gradient(180deg, var(--amber-hot), var(--amber) 52%, var(--amber-deep));
      color: #1b1000;
      cursor: pointer;
      font-family: Rajdhani, Inter, sans-serif;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.17em;
      line-height: 1;
      text-transform: uppercase;
      box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.44);
      transition:
        transform 180ms var(--ease-out),
        filter 180ms var(--ease-out),
        box-shadow 180ms var(--ease-out);
    }

    .loadout__action::before {
      position: absolute;
      top: 0;
      bottom: 0;
      left: -30%;
      width: 18%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.38), transparent);
      content: "";
      opacity: 0;
      pointer-events: none;
      transform: skewX(-24deg);
      transition: left 420ms var(--ease-out), opacity 120ms ease;
    }

    .loadout__action i {
      font-size: 12px;
      transition: transform 180ms var(--ease-out);
    }

    .loadout__action:hover {
      filter: brightness(1.07) saturate(1.04);
      box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.34),
        0 0 20px rgba(var(--amber-rgb), 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.48);
      transform: translateY(-1px);
    }

    .loadout__action:hover::before {
      left: 112%;
      opacity: 1;
    }

    .loadout__action:hover i {
      transform: translateX(3px);
    }

    .loadout__action:active {
      filter: brightness(0.96);
      transform: translateY(0);
    }

    .loadout__action:focus-visible {
      outline: 2px solid #fff;
      outline-offset: 3px;
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    @media (max-width: 520px) {


      .loadout__header {
        gap: 12px;
        padding-right: 13px;
        padding-left: 14px;
      }

      .level {
        min-width: 144px;
      }

      .next-unlock {
        padding-right: 14px;
        padding-left: 14px;
      }

      .loadout__rail {
        --hexw: 48px;
        gap: 4px;
        padding-right: 6px;
        padding-left: 6px;
      }
    }

    @media (max-width: 380px) {
      .loadout__header {
        grid-template-columns: minmax(0, 0.9fr) minmax(132px, 1.1fr);
      }

      .next-unlock {
        gap: 6px;
      }

      .next-unlock__label {
        font-size: 9px;
      }

      .loadout__rail {
        --hexw: 44px;
        --icon: 15px;
      }
    }

    /* Compact right-rail sizing pass */
    .loadout {
      width: 100%;
    }

    .loadout::before,
    .loadout::after {
      width: 24px;
      height: 24px;
    }

    .loadout__honeycomb {
      top: -32px;
      right: -28px;
      width: 310px;
      height: 196px;
      grid-template-columns: repeat(7, 46px);
      grid-auto-rows: 40px;
    }

    .loadout__honeycomb span {
      width: 46px;
      height: 53px;
    }

    .loadout__honeycomb span:nth-child(even) {
      transform: translateY(26px);
    }

    .loadout__header {
      gap: 14px;
      min-height: 64px;
      padding: 11px 14px 9px 15px;
    }

    .loadout__title {
      font-size: clamp(22px, 4.5vw, 25px);
    }

    .loadout__title::after {
      width: 36px;
      margin-top: 6px;
    }

    .level {
      min-width: 144px;
    }

    .level__readout {
      gap: 5px;
    }

    .level__label,
    .level__xp {
      font-size: 10px;
    }

    .level__value {
      font-size: 25px;
    }

    .level__progress {
      height: 4px;
      margin-top: 5px;
    }

    .level__xp {
      margin-top: 4px;
    }

    .next-unlock {
      min-height: 32px;
      gap: 7px;
      padding: 0 15px;
      font-size: 10px;
    }

    .next-unlock__label {
      font-size: 9px;
    }

    .next-unlock strong {
      font-size: 13px;
    }

    .next-unlock__level {
      font-size: 11px;
    }

    .loadout__action-wrap {
      padding: 0 10px 10px;
    }

    .loadout__action {
      min-height: 38px;
      font-size: 12px;
    }

    @media (max-width: 520px) {
      .loadout__header {
        gap: 10px;
        padding: 10px 12px 8px 13px;
      }

      .level {
        min-width: 130px;
      }

      .next-unlock {
        padding-right: 12px;
        padding-left: 12px;
      }

      .loadout__rail {
        --hexw: 48px;
        gap: 4px;
        padding: 9px 6px 8px;
      }

      .lo-pick {
        right: 5px;
        left: 5px;
        padding: 8px 8px 9px;
      }

      .lo-pick__row { gap: 5px; }
    }

    @media (max-width: 380px) {
      .loadout__rail {
        --hexw: 44px;
        --icon: 15px;
      }

      .lo-chip__glyph { font-size: 12px; }
    }
    /* Header-only honeycomb treatment.
       The SVG tile is seamless in both axes, so the repeated pattern keeps
       complete flat-top hexagons without the triangular gaps from the old band. */
    .loadout {
      --hex-w: 35px;
      --hex-line-alpha: 0.25;
      --hex-start: 0%;
      --hex-floor: 1;
      --hex-glow: 0.85;
      --scrim: 0.55;
    }

    .loadout__header {
      position: relative;
      isolation: isolate;
      display: flex;
      min-height: 62px;
      align-items: center;
      padding: 11px 15px 10px;
      overflow: hidden;
      background: linear-gradient(90deg, rgba(6, 9, 13, 0.99) 0 30%, rgba(7, 11, 15, 0.9) 56%, rgba(11, 16, 22, 0.82));
    }

    .loadout__header::before {
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        radial-gradient(
          168px 58px at 66px 50%,
          rgba(5, 8, 12, calc(0.95 * var(--scrim))),
          rgba(5, 8, 12, calc(0.66 * var(--scrim))) 44%,
          rgba(5, 8, 12, 0) 76%
        ),
        linear-gradient(
          90deg,
          rgba(5, 8, 12, calc(0.68 * var(--scrim))) 0,
          rgba(5, 8, 12, calc(0.3 * var(--scrim))) 40%,
          rgba(5, 8, 12, 0) 68%
        );
      content: "";
      pointer-events: none;
    }

    .loadout__header::after {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 3;
      height: 1px;
      background: linear-gradient(90deg, rgba(171, 188, 204, 0.2), rgba(171, 188, 204, 0.08) 56%, transparent);
      content: "";
      pointer-events: none;
    }

    .hex-field {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      contain: paint;
      pointer-events: none;
      -webkit-mask-image: linear-gradient(
        96deg,
        rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, var(--hex-floor)) var(--hex-start),
        #000 62%
      );
      mask-image: linear-gradient(
        96deg,
        rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, var(--hex-floor)) var(--hex-start),
        #000 62%
      );
    }

    .hex-field__layer,
    .hex-field__glow {
      position: absolute;
      background-repeat: repeat;
      background-position: 0 0;
      background-size: calc(var(--hex-w) * 1.5) calc(var(--hex-w) * 0.866);
    }

    .hex-field__layer {
      inset: 0 calc(var(--hex-w) * -1.5) 0 0;
      opacity: var(--hex-line-alpha);
      background-image: 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-width='.45' 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");
    }

    .hex-field__glow {
      inset: 0;
      opacity: var(--hex-glow);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 17.32'%3E%3Cg fill='none' stroke='%23ff9d0a' stroke-width='.5' 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");
      -webkit-mask-image: radial-gradient(58% 150% at 72% 78%, #000 0, transparent 72%);
      mask-image: radial-gradient(58% 150% at 72% 78%, #000 0, transparent 72%);
    }

    .hex-cell {
      position: absolute;
      left: calc(var(--hex-w) * (0.75 * var(--i) - 0.5));
      top: calc(var(--hex-w) * (0.866 * var(--j) + 0.433 * var(--odd, 0) - 0.433));
      width: var(--hex-w);
      height: calc(var(--hex-w) * 0.866);
      background: rgba(var(--amber-rgb), var(--fill, 0.07));
      clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
    }

    .loadout__header .loadout__title {
      position: relative;
      z-index: 2;
      flex: 0 0 auto;
      font-size: 24px;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.92), 0 2px 16px rgba(0, 0, 0, 0.78);
    }

    /* ── Killstreaks rail · fit pass ────────────────────────────────────
       The right rail hands .loadout whatever height is left under Friends,
       and .loadout__rail is the one flex item that absorbs it. Below roughly
       745px of viewport height that leftover drops under the socket column's
       own 106px, and because the rail centres its grid row the column bled
       out of the band in both directions: the hotkey chips landed on the
       Next-unlock strip and the slot names were eaten by the CTA.

       So the rail becomes a size container and the socket column derives its
       scale from the height the band actually got, with 52px — the design
       size — as the cap. Every height with room for the full column renders
       exactly as before; shorter ones scale the socket down instead of
       overflowing. Nothing outside .loadout__rail moves or resizes.

       Desktop only: under 1281px the rail is in the stacked layout, where
       .loadout is content-height and size containment would collapse it. */
    @media (min-width: 1281px) {
      .lobby-right .loadout__rail {
        container-type: size;
        /* The band's height comes from flex, so this padding is pure tax on
           the socket column — trimmed to a hairline of separation. */
        padding-block: 2px;
      }

      /* One knob: --hexw. --ks-stack is everything the slot spends above and
         below the hex (chip + node + name + status), so the hex takes what
         the band has left. cqh resolves against the rail for every consumer
         below, because all of them are its descendants. */
      .lobby-right .loadout__rail > * {
        --ks-stack: 42px;
        --hexw: clamp(24px, (100cqh - var(--ks-stack)) * 1.1547, 52px);
        --hexh: calc(var(--hexw) * 0.866);
      }

      /* The socket's fixed-pixel details become fractions of the design hex,
         so they keep their proportions instead of over-filling a smaller one.
         Each fraction is the old value over 52px, so a full-size rail is
         pixel-identical; the floors keep the hotkey chip legible once the
         hex goes small. */
      .lobby-right .loadout__rail .ks-hex__socket {
        inset: calc(var(--hexw) * -5 / 52);
      }

      .lobby-right .loadout__rail .ks-hex__icon {
        font-size: calc(var(--hexw) * 17 / 52);
      }

      .lobby-right .loadout__rail .ks-slot.is-locked .ks-hex__icon {
        font-size: calc(var(--hexw) * 13 / 52);
      }

      .lobby-right .loadout__rail .ks-hex__key {
        min-width: max(16px, calc(var(--hexw) * 20 / 52));
        height: max(13px, calc(var(--hexw) * 16 / 52));
        font-size: max(9px, calc(var(--hexw) * 10 / 52));
      }

      .lobby-right .loadout__rail .ks-slot__node {
        --ks-node: max(6px, calc(var(--hexw) * 8 / 52));

        width: var(--ks-node);
        height: var(--ks-node);
        margin-top: calc(var(--ks-node) / -2);
      }

      /* The bus was offset from the rail's padding edge, so it only met the
         slot nodes when the band happened to equal the column height — at
         every other height it floated above them. Placing it in the sockets'
         own grid row makes align-content carry the two together. Every item
         is placed explicitly: an all-column bus would otherwise push the
         auto-placed sockets down into a second row. */
      .lobby-right .loadout__rail > .ks-bus {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        grid-area: 1 / 1 / 2 / -1;
        align-self: start;
        margin: calc(var(--chip) + var(--hexh)) 6% 0;
      }

      .lobby-right .loadout__rail > .ks-slot { grid-row: 1; }
      /* #lo-bus is child 1, so the four sockets are children 2–5. */
      .lobby-right .loadout__rail > .ks-slot:nth-child(2) { grid-column: 1; }
      .lobby-right .loadout__rail > .ks-slot:nth-child(3) { grid-column: 2; }
      .lobby-right .loadout__rail > .ks-slot:nth-child(4) { grid-column: 3; }
      .lobby-right .loadout__rail > .ks-slot:nth-child(5) { grid-column: 4; }

      /* Under the full column's 87px the status caption is the first thing to
         go: at these heights the CTA was covering it anyway, and spending its
         11px on the socket holds the hex at full size down to a 71px band. */
      @container (max-height: 87px) {
        .lobby-right .loadout__rail > * {
          --ks-stack: 26px;
          --chip: 6px;
        }

        .lobby-right .loadout__rail .ks-slot__status { display: none; }
        .lobby-right .loadout__rail .ks-slot__name { margin-top: 5px; }
      }

      /* Last resort — a band this short cannot seat both a socket and a label. */
      @container (max-height: 46px) {
        .lobby-right .loadout__rail > * { --ks-stack: 10px; }
        .lobby-right .loadout__rail .ks-slot__name { display: none; }
      }
    }