/* Exact Friends/Squad hub from friends-squad.html (AAA compact pass preserved). */
    .squad-hub {
      position: relative;
      isolation: isolate;
      width: 100%;
      max-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 30%),
        linear-gradient(180deg, rgba(13, 19, 26, 0.985), rgba(7, 11, 15, 0.995));
      box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.58),
        inset 0 1px 0 rgba(255, 255, 255, 0.055);
    }

    .squad-hub__header {
      position: relative;
      display: flex;
      min-height: 56px;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      overflow: hidden;
      padding: 9px 13px 8px 15px;
      background:
        linear-gradient(90deg, rgba(6, 9, 13, 0.99) 0 42%, rgba(7, 11, 15, 0.9) 68%, rgba(10, 15, 20, 0.8));
    }

    .squad-hub__header::after {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: 1px;
      background: linear-gradient(90deg, rgba(171, 188, 204, 0.2), rgba(171, 188, 204, 0.07) 64%, transparent);
      content: "";
      pointer-events: none;
    }

    .squad-hub__planes {
      position: absolute;
      top: 8px;
      right: -20px;
      bottom: 7px;
      left: 44%;
      display: flex;
      gap: 5px;
      opacity: 0.34;
      pointer-events: none;
      transform: skewX(-13deg);
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 88%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 25%, #000 88%, transparent);
    }

    .squad-hub__planes span {
      flex: 1 0 62px;
      border: 1px solid rgba(157, 176, 194, 0.3);
      background: linear-gradient(180deg, rgba(157, 176, 194, 0.04), transparent);
    }

    .squad-hub__heading {
      position: relative;
      z-index: 1;
      min-width: 0;
    }

    .squad-hub__title {
      margin: 0;
      color: #fff;
      font-family: Rajdhani, Inter, sans-serif;
      font-size: 24px;
      font-weight: 800;
      letter-spacing: 0.065em;
      line-height: 0.92;
      text-transform: uppercase;
      text-shadow: 0 2px 12px rgba(0, 0, 0, 0.62);
    }

    .squad-hub__title::after {
      display: block;
      width: 35px;
      height: 2px;
      margin-top: 6px;
      background: var(--amber);
      box-shadow: 0 0 10px rgba(var(--amber-rgb), 0.3);
      content: "";
    }

    .squad-state {
      position: relative;
      z-index: 1;
      display: flex;
      min-width: 112px;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
    }

    .squad-state__slots {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .squad-state__slot {
      position: relative;
      width: 18px;
      height: 20px;
      border: 1px solid rgba(157, 176, 194, 0.2);
      background: rgba(4, 7, 10, 0.76);
      clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%);
    }

    .squad-state__slot.is-filled {
      border-color: transparent;
      background: linear-gradient(180deg, var(--amber-hot), var(--amber-deep));
      box-shadow: 0 0 12px rgba(var(--amber-rgb), 0.22);
    }

    .squad-state__slot.is-filled::after {
      position: absolute;
      inset: 6px;
      border-radius: 50%;
      background: #1a1207;
      content: "";
    }

    .squad-state__count {
      min-width: 45px;
      color: #fff;
      font-family: Rajdhani, Inter, sans-serif;
      font-size: 19px;
      font-weight: 800;
      letter-spacing: 0.05em;
      line-height: 1;
      text-align: right;
    }

    .squad-state__count span {
      color: var(--muted);
      font-size: 12px;
    }

    .squad-hub__body {
      padding: 9px 10px 10px;
    }

    .player-search {
      position: relative;
      display: grid;
      grid-template-columns: 24px minmax(0, 1fr) auto;
      min-height: 34px;
      align-items: center;
      gap: 4px;
      overflow: hidden;
      border-radius: 6px;
      background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.04), transparent 36%),
        rgba(0, 0, 0, 0.34);
      box-shadow: inset 0 0 0 1px rgba(174, 191, 207, 0.11);
      transition: box-shadow 160ms ease, background 160ms ease;
    }

    .player-search:focus-within {
      background:
        linear-gradient(90deg, rgba(var(--amber-rgb), 0.055), transparent 42%),
        rgba(0, 0, 0, 0.42);
      box-shadow:
        inset 0 0 0 1px rgba(var(--amber-rgb), 0.48),
        0 0 0 2px rgba(var(--amber-rgb), 0.06);
    }

    .player-search.is-invalid {
      animation: nudge 180ms ease-in-out 2;
      box-shadow: inset 0 0 0 1px rgba(255, 103, 73, 0.65);
    }

    .player-search__icon {
      color: #707b86;
      font-size: 10px;
      text-align: right;
    }

    .player-search__input {
      width: 100%;
      min-width: 0;
      height: 34px;
      padding: 0 5px;
      border: 0;
      outline: 0;
      background: transparent;
      color: #eef2f5;
      caret-color: var(--amber);
      font-size: 10.5px;
      font-weight: 500;
    }

    .player-search__input::placeholder {
      color: #68737e;
      opacity: 1;
    }

    .player-search__add {
      align-self: stretch;
      min-width: 64px;
      padding: 0 11px;
      border: 0;
      background:
        linear-gradient(180deg, rgba(var(--amber-rgb), 0.19), rgba(var(--amber-rgb), 0.08));
      color: var(--amber-hot);
      font-family: Rajdhani, Inter, sans-serif;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.105em;
      text-transform: uppercase;
      transition: background 150ms ease, color 150ms ease, filter 150ms ease;
    }

    .player-search__add:hover {
      background: linear-gradient(180deg, var(--amber-hot), var(--amber-deep));
      color: #171006;
    }

    .player-search__add:active {
      filter: brightness(0.9);
    }

    .player-search__add.is-sent {
      background: rgba(var(--green-rgb), 0.14);
      color: var(--green);
    }

    .player-search__add:focus-visible,
    .friend__invite:focus-visible,
    .player-search__input:focus-visible {
      outline: 2px solid var(--amber-hot);
      outline-offset: -2px;
    }

    .friends-heading {
      display: flex;
      min-height: 24px;
      align-items: end;
      justify-content: space-between;
      gap: 12px;
      padding: 5px 4px 4px;
      color: #a7b0b9;
      font-family: Rajdhani, Inter, sans-serif;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .friends-heading__online {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: var(--green);
      letter-spacing: 0.09em;
    }

    .friends-heading__online::before {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 7px rgba(var(--green-rgb), 0.65);
      content: "";
    }

    .friends-list {
      display: grid;
      gap: 5px;
    }

    .friend {
      position: relative;
      display: grid;
      grid-template-columns: 31px minmax(0, 1fr) auto;
      min-height: 43px;
      align-items: center;
      gap: 9px;
      overflow: hidden;
      padding: 5px 5px 5px 7px;
      border-radius: 6px;
      background:
        linear-gradient(100deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012) 52%, transparent),
        rgba(5, 8, 11, 0.62);
      box-shadow: inset 0 0 0 1px rgba(174, 191, 207, 0.075);
      transition: background 160ms ease, box-shadow 160ms ease, transform 160ms var(--ease-out);
    }

    .friend::before {
      position: absolute;
      top: 9px;
      bottom: 9px;
      left: 0;
      width: 2px;
      border-radius: 0 2px 2px 0;
      background: var(--friend-color);
      box-shadow: 0 0 8px var(--friend-glow);
      content: "";
    }

    .friend:hover {
      background:
        linear-gradient(100deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018) 60%, transparent),
        rgba(6, 9, 13, 0.8);
      box-shadow:
        inset 0 0 0 1px rgba(174, 191, 207, 0.12),
        0 8px 18px rgba(0, 0, 0, 0.16);
      transform: translateX(2px);
    }

    .friend[hidden] {
      display: none;
    }

    .friend--lobby {
      --friend-color: var(--green);
      --friend-glow: rgba(var(--green-rgb), 0.35);
    }

    .friend--match {
      --friend-color: var(--blue);
      --friend-glow: rgba(var(--blue-rgb), 0.32);
    }

    .friend__avatar {
      position: relative;
      display: grid;
      width: 31px;
      height: 31px;
      place-items: center;
      overflow: hidden;
      background:
        radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.13), transparent 42%),
        linear-gradient(145deg, #27313a, #11171d);
      color: #eaf0f4;
      font-family: Rajdhani, Inter, sans-serif;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.02em;
      clip-path: polygon(18% 0, 100% 0, 100% 72%, 78% 100%, 0 100%, 0 24%);
    }

    .friend--lobby .friend__avatar {
      background:
        radial-gradient(circle at 35% 24%, rgba(var(--green-rgb), 0.2), transparent 45%),
        linear-gradient(145deg, #26342f, #101914);
    }

    .friend__info {
      min-width: 0;
    }

    .friend__identity {
      display: flex;
      min-width: 0;
      align-items: baseline;
      gap: 6px;
      line-height: 1;
    }

    .friend__name {
      overflow: hidden;
      color: #f4f7f9;
      font-family: Rajdhani, Inter, sans-serif;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.025em;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .friend__level {
      flex: 0 0 auto;
      color: #7d8792;
      font-family: Rajdhani, Inter, sans-serif;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .friend__presence {
      display: flex;
      align-items: center;
      gap: 5px;
      margin-top: 4px;
      color: var(--friend-color);
      font-size: 9px;
      font-weight: 600;
      line-height: 1;
    }

    .friend__presence::before {
      width: 4px;
      height: 4px;
      flex: 0 0 auto;
      border-radius: 50%;
      background: var(--friend-color);
      box-shadow: 0 0 6px var(--friend-glow);
      content: "";
    }

    .friend__invite {
      display: inline-flex;
      min-width: 72px;
      height: 29px;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 0 9px;
      border: 0;
      border-radius: 4px;
      background: rgba(var(--amber-rgb), 0.075);
      box-shadow: inset 0 0 0 1px rgba(var(--amber-rgb), 0.31);
      color: var(--amber-hot);
      font-family: Rajdhani, Inter, sans-serif;
      font-size: 9.5px;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      transition: background 150ms ease, box-shadow 150ms ease, color 150ms ease;
    }

    .friend__invite i {
      font-size: 8px;
      transition: transform 150ms var(--ease-out);
    }

    .friend__invite:hover {
      background: linear-gradient(180deg, var(--amber-hot), var(--amber-deep));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.36),
        0 0 13px rgba(var(--amber-rgb), 0.14);
      color: #171006;
    }

    .friend__invite:hover i {
      transform: translateX(2px);
    }

    .friend__invite.is-invited {
      background: rgba(var(--green-rgb), 0.1);
      box-shadow: inset 0 0 0 1px rgba(var(--green-rgb), 0.26);
      color: var(--green);
    }

    .friend__invite.is-invited i {
      transform: none;
    }

    .friends-empty {
      display: none;
      min-height: 91px;
      place-items: center;
      border-radius: 6px;
      background: rgba(0, 0, 0, 0.2);
      color: #7a8590;
      font-family: Rajdhani, Inter, sans-serif;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.11em;
      text-align: center;
      text-transform: uppercase;
    }

    .friends-empty.is-visible {
      display: grid;
    }

    /* Friends / Squad navigation */
    .squad-hub__header {
      min-height: 56px;
      padding: 0;
    }

    .squad-tabs {
      position: relative;
      z-index: 2;
      display: grid;
      width: 100%;
      min-width: 0;
      grid-template-columns: 1fr 1fr;
      align-self: stretch;
      padding: 5px;
    }

    .squad-tab {
      position: relative;
      display: flex;
      min-width: 0;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 10px;
      overflow: hidden;
      border: 0;
      background: transparent;
      color: #78838e;
      font-family: Rajdhani, Inter, sans-serif;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      transition: color 150ms ease;
    }

    .squad-tab::before {
      position: absolute;
      inset: 0 2px;
      z-index: -1;
      background: rgba(255, 255, 255, 0.025);
      box-shadow: inset 0 0 0 1px rgba(168, 185, 201, 0.06);
      clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
      content: "";
      transition: background 150ms ease, box-shadow 150ms ease;
    }

    .squad-tab:hover {
      color: #dfe5e9;
    }

    .squad-tab:hover::before {
      background: rgba(255, 255, 255, 0.045);
    }

    .squad-tab[aria-selected="true"] {
      color: #fff;
    }

    .squad-tab[aria-selected="true"]::before {
      background: linear-gradient(180deg, rgba(var(--amber-rgb), 0.14), rgba(var(--amber-rgb), 0.035));
      box-shadow:
        inset 0 -2px 0 var(--amber),
        inset 0 0 0 1px rgba(var(--amber-rgb), 0.2),
        0 0 16px rgba(var(--amber-rgb), 0.06);
    }

    .squad-tab:focus-visible {
      outline: 2px solid var(--amber-hot);
      outline-offset: -4px;
    }

    .squad-tab__badge {
      display: inline-flex;
      min-width: 29px;
      height: 17px;
      align-items: center;
      justify-content: center;
      padding: 0 5px;
      border-radius: 3px;
      background: rgba(157, 176, 194, 0.075);
      color: #9ba6b0;
      font-size: 9px;
      letter-spacing: 0.06em;
    }

    .squad-tab__badge--online {
      background: rgba(var(--green-rgb), 0.1);
      color: var(--green);
    }

    .squad-tab__badge--online::before {
      width: 4px;
      height: 4px;
      margin-right: 4px;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 0 0 6px rgba(var(--green-rgb), 0.55);
      content: "";
    }

    .social-pane[hidden] {
      display: none;
    }

    .social-pane {
      min-height: 151px;
    }

    /* Squad roster */
    .roster-heading {
      display: flex;
      min-height: 24px;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 0 4px;
      color: #a7b0b9;
      font-family: Rajdhani, Inter, sans-serif;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .roster-heading__status {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: var(--green);
      letter-spacing: 0.08em;
    }

    .roster-heading__status::before {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 7px rgba(var(--green-rgb), 0.58);
      content: "";
    }

    .squad-roster {
      display: grid;
      gap: 4px;
    }

    .squad-member {
      position: relative;
      display: grid;
      min-height: 31px;
      grid-template-columns: 26px minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
      overflow: hidden;
      padding: 3px 6px;
      border-radius: 5px;
      background:
        linear-gradient(100deg, rgba(255, 255, 255, 0.04), transparent 62%),
        rgba(5, 8, 11, 0.62);
      box-shadow: inset 0 0 0 1px rgba(174, 191, 207, 0.075);
    }

    .squad-member--host {
      background:
        linear-gradient(100deg, rgba(var(--amber-rgb), 0.075), transparent 58%),
        rgba(5, 8, 11, 0.72);
    }

    .squad-member--host::before {
      position: absolute;
      top: 7px;
      bottom: 7px;
      left: 0;
      width: 2px;
      border-radius: 0 2px 2px 0;
      background: var(--amber);
      box-shadow: 0 0 8px rgba(var(--amber-rgb), 0.35);
      content: "";
    }

    .squad-member__avatar {
      display: grid;
      width: 26px;
      height: 25px;
      place-items: center;
      background: linear-gradient(145deg, #2d281e, #17140d);
      color: var(--amber-hot);
      font-family: Rajdhani, Inter, sans-serif;
      font-size: 9px;
      font-weight: 800;
      clip-path: polygon(18% 0, 100% 0, 100% 72%, 78% 100%, 0 100%, 0 24%);
    }

    .squad-member__copy {
      min-width: 0;
      line-height: 1;
    }

    .squad-member__name {
      display: block;
      overflow: hidden;
      color: #eef2f5;
      font-family: Rajdhani, Inter, sans-serif;
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: 0.035em;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .squad-member__meta {
      display: block;
      margin-top: 3px;
      color: #78838e;
      font-size: 8px;
      font-weight: 600;
    }

    .squad-member__ready {
      color: var(--green);
      font-family: Rajdhani, Inter, sans-serif;
      font-size: 8.5px;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .squad-member--open {
      background: rgba(0, 0, 0, 0.18);
      box-shadow: inset 0 0 0 1px rgba(174, 191, 207, 0.055);
    }

    .squad-member--open .squad-member__avatar {
      background: rgba(157, 176, 194, 0.045);
      color: #58636d;
      font-size: 10px;
    }

    .squad-member--open .squad-member__name {
      color: #929ca6;
      font-size: 9.5px;
      letter-spacing: 0.09em;
      text-transform: uppercase;
    }

    .slot-invite {
      height: 23px;
      padding: 0 8px;
      border: 0;
      border-radius: 3px;
      background: rgba(var(--amber-rgb), 0.07);
      box-shadow: inset 0 0 0 1px rgba(var(--amber-rgb), 0.25);
      color: var(--amber-hot);
      font-family: Rajdhani, Inter, sans-serif;
      font-size: 8.5px;
      font-weight: 800;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      transition: background 150ms ease, color 150ms ease;
    }

    .slot-invite:hover {
      background: linear-gradient(180deg, var(--amber-hot), var(--amber-deep));
      color: #171006;
    }

    .party-actions {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 5px;
      margin-top: 5px;
    }

    .party-action {
      min-height: 28px;
      padding: 0 11px;
      border: 0;
      border-radius: 4px;
      font-family: Rajdhani, Inter, sans-serif;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .party-action--invite {
      background: linear-gradient(180deg, var(--amber-hot), var(--amber-deep));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
      color: #171006;
    }

    .party-action--leave {
      background: rgba(255, 88, 62, 0.065);
      box-shadow: inset 0 0 0 1px rgba(255, 88, 62, 0.24);
      color: #ff8975;
    }

    .party-action--leave.is-confirming {
      background: rgba(255, 88, 62, 0.17);
      box-shadow: inset 0 0 0 1px rgba(255, 88, 62, 0.5);
      color: #ffb0a3;
    }

    .party-action:focus-visible,
    .slot-invite:focus-visible {
      outline: 2px solid var(--amber-hot);
      outline-offset: -2px;
    }

    /* Final social-state pass */
    .squad-hub__planes { display: none; }
    .squad-hub__body { position: relative; }
    .social-pane { min-height: 0; }

    .pane-toolbar {
      display: flex;
      min-height: 25px;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 3px 3px 4px 4px;
    }
    .pane-toolbar__summary { display: flex; min-width: 0; align-items: center; gap: 8px; }
    .pane-toolbar__title,
    .list-heading {
      color: #a7b0b9;
      font-family: Rajdhani, Inter, sans-serif;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }
    .list-heading {
      display: flex;
      min-height: 19px;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 0 3px;
      color: #727e89;
      font-size: 8px;
    }
    .list-heading__count { color: var(--green); letter-spacing: 0.06em; }

    .rank-insignia {
      display: grid;
      width: 31px;
      height: 31px;
      flex: 0 0 auto;
      place-items: center;
      overflow: hidden;
      border-radius: 5px;
      background: radial-gradient(circle at 50% 25%, rgba(var(--amber-rgb), 0.1), transparent 62%), rgba(8, 12, 16, 0.84);
      box-shadow: inset 0 0 0 1px rgba(174, 191, 207, 0.08);
    }
    .rank-insignia img { display: block; width: 29px; height: 29px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45)); }
    .rank-insignia--request { width: 28px; height: 28px; }
    .rank-insignia--request img { width: 26px; height: 26px; }
    .rank-insignia--party { width: 27px; height: 27px; background: transparent; box-shadow: none; }
    .rank-insignia--party img { width: 27px; height: 27px; }

    .friend { grid-template-columns: 31px minmax(0, 1fr) auto; }
    .friend__actions { display: flex; align-items: center; gap: 4px; }
    .friend__invite { min-width: 57px; height: 28px; padding: 0 7px; }
    .friend__invite:disabled {
      cursor: default;
      opacity: 0.42;
      background: rgba(157, 176, 194, 0.035);
      box-shadow: inset 0 0 0 1px rgba(157, 176, 194, 0.09);
      color: #7b8792;
    }
    .friend__remove,
    .member-kick {
      display: grid;
      width: 27px;
      height: 28px;
      flex: 0 0 auto;
      place-items: center;
      padding: 0;
      border: 0;
      border-radius: 4px;
      background: rgba(255, 92, 65, 0.045);
      box-shadow: inset 0 0 0 1px rgba(255, 92, 65, 0.14);
      color: #a86258;
      font-size: 8px;
    }
    .friend__remove:hover,
    .member-kick:hover { background: rgba(255, 92, 65, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 92, 65, 0.38); color: #ff917f; }
    .friend--online { --friend-color: var(--green); --friend-glow: rgba(var(--green-rgb), 0.35); }
    .friend--lobby { --friend-color: #ffd166; --friend-glow: rgba(255, 209, 102, 0.34); }
    .friend--match { --friend-color: #ff8a65; --friend-glow: rgba(255, 138, 101, 0.32); }
    .friend--offline { --friend-color: #6e7780; --friend-glow: rgba(110, 119, 128, 0.18); opacity: 0.66; }
    .friend__presence { font-family: Rajdhani, Inter, sans-serif; font-size: 8.5px; font-weight: 700; letter-spacing: 0.075em; text-transform: uppercase; }

    .requests-section { margin-top: 7px; padding-top: 4px; border-radius: 5px; background: linear-gradient(180deg, rgba(var(--amber-rgb), 0.035), transparent 42px); }
    .request-count { min-width: 17px; height: 15px; padding: 0 4px; border-radius: 3px; background: rgba(var(--amber-rgb), 0.13); color: var(--amber-hot); line-height: 15px; text-align: center; }
    .requests-list { display: grid; gap: 4px; }
    .request-row {
      display: grid;
      min-height: 38px;
      grid-template-columns: 28px minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
      padding: 4px 5px;
      border-radius: 5px;
      background: rgba(5, 8, 11, 0.7);
      box-shadow: inset 0 0 0 1px rgba(var(--amber-rgb), 0.09);
    }
    .request-row__copy { display: flex; min-width: 0; flex-direction: column; gap: 3px; line-height: 1; }
    .request-row__copy strong { overflow: hidden; color: #edf1f4; font-family: Rajdhani, Inter, sans-serif; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
    .request-row__copy span { color: #7e8994; font-size: 8px; }
    .request-row__actions { display: flex; gap: 4px; }
    .request-action { display: grid; width: 28px; height: 27px; place-items: center; padding: 0; border: 0; border-radius: 4px; font-size: 9px; }
    .request-action--accept { background: rgba(var(--green-rgb), 0.1); box-shadow: inset 0 0 0 1px rgba(var(--green-rgb), 0.24); color: var(--green); }
    .request-action--reject { background: rgba(255, 92, 65, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 92, 65, 0.18); color: #df7968; }

    .party-empty {
      display: grid;
      min-height: 91px;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 12px 12px 12px 14px;
      border-radius: 6px;
      background: linear-gradient(105deg, rgba(var(--amber-rgb), 0.055), transparent 58%), rgba(4, 7, 10, 0.54);
      box-shadow: inset 0 0 0 1px rgba(174, 191, 207, 0.075);
    }
    .party-empty[hidden], .party-active[hidden], .squad-member[hidden] { display: none; }
    .party-empty__intro {
      display: contents;
    }
    .party-empty__mark { display: flex; flex-shrink: 0; align-items: end; gap: 3px; }
    .party-empty__mark span { width: 8px; height: 26px; background: rgba(157, 176, 194, 0.09); clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%); }
    .party-empty__mark span:first-child { background: linear-gradient(180deg, var(--amber-hot), var(--amber-deep)); }
    .party-empty__copy {
      margin: 0;
      min-width: 0;
      color: #8b96a1;
      font-family: Inter, Rajdhani, sans-serif;
      font-size: 10px;
      line-height: 1.35;
    }
    .party-create {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-height: 36px;
      padding: 0 14px;
      border: 0;
      border-radius: 4px;
      background: linear-gradient(180deg, var(--amber-hot), var(--amber-deep));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
      color: #171006;
      font-family: Rajdhani, Inter, sans-serif;
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      white-space: nowrap;
      cursor: pointer;
      transition: filter 0.15s ease, box-shadow 0.15s ease;
    }
    .party-create i { font-size: 9px; }
    .party-create:hover {
      filter: brightness(1.05);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 10px rgba(var(--amber-rgb), 0.18);
    }
    .party-create:focus-visible {
      outline: 2px solid var(--amber-hot);
      outline-offset: 2px;
    }
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      clip-path: inset(50%);
      white-space: nowrap;
    }

    @keyframes nudge {
      0%,
      100% { transform: translateX(0); }
      50% { transform: translateX(3px); }
    }

    @media (max-width: 390px) {
      .squad-hub__header {
        gap: 10px;
        padding-right: 11px;
        padding-left: 13px;
      }

      .squad-state {
        min-width: 100px;
        gap: 7px;
      }

      .squad-state__slots {
        gap: 3px;
      }

      .squad-state__slot {
        width: 15px;
        height: 18px;
      }

      .squad-hub__body {
        padding-right: 8px;
        padding-left: 8px;
      }

      .friend {
        grid-template-columns: 29px minmax(0, 1fr) auto;
        gap: 7px;
      }

      .friend__avatar {
        width: 29px;
        height: 29px;
      }

      .friend__invite {
        min-width: 65px;
        padding: 0 7px;
      }

      .friend__invite i {
        display: none;
      }
    }

    @media (max-width: 340px) {
      .squad-state__slots {
        display: none;
      }

      .friend__level {
        display: none;
      }
    }

    }

    /* AAA three-workflow social hub */
    .squad-hub {
      display: flex;
      width: 100%;
      height: 276px;
      flex-direction: column;
    }
    .squad-hub__header { min-height: 54px; flex: 0 0 54px; padding: 0; }
    .squad-tabs {
      isolation: isolate;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
      padding: 5px 6px 4px;
    }
    .squad-tab {
      isolation: isolate;
      gap: 5px;
      padding: 0 8px;
      font-size: 10.5px;
      letter-spacing: 0.085em;
    }
    .squad-tab::before {
      inset: 0 1px;
      border-radius: 0;
      clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
      background: linear-gradient(112deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.01) 62%, transparent);
      box-shadow: inset 0 1px 0 rgba(188, 203, 216, 0.055), inset 0 -1px 0 rgba(188, 203, 216, 0.035);
    }
    .squad-tab[aria-selected="true"]::before {
      background:
        linear-gradient(112deg, rgba(var(--amber-rgb), 0.085), transparent 34%),
        linear-gradient(180deg, rgba(var(--amber-rgb), 0.13), rgba(var(--amber-rgb), 0.025));
      box-shadow: inset 0 1px 0 rgba(255, 204, 112, 0.16), inset 0 -2px 0 var(--amber), 0 7px 18px rgba(var(--amber-rgb), 0.055);
    }
    .squad-tab:focus-visible { outline: none; }
    .squad-tab:focus-visible::before {
      box-shadow: inset 0 0 0 1px rgba(231, 238, 244, 0.42);
    }
    .squad-tab[aria-selected="true"]:focus-visible::before {
      box-shadow: inset 0 -2px 0 var(--amber), inset 0 0 0 1px rgba(231, 238, 244, 0.34);
    }
    .squad-tab__badge { min-width: 23px; height: 16px; padding: 0 4px; font-size: 8px; }
    .squad-tab__badge--requests { background: rgba(var(--amber-rgb), 0.12); color: var(--amber-hot); }
    .squad-tab__badge[hidden] { display: none; }

    .squad-hub__body {
      display: flex;
      min-height: 0;
      flex: 1;
      padding: 9px 10px 10px;
      overflow: hidden;
    }
    .social-pane { width: 100%; height: 100%; min-height: 0; }
    .social-pane--friends { display: grid; grid-template-rows: 34px 24px minmax(0, 1fr); }
    .social-pane--requests { display: grid; grid-template-rows: 27px minmax(0, 1fr); }
    .social-pane--squad { display: grid; grid-template-rows: 26px minmax(0, 1fr); }

    .player-search { box-shadow: inset 0 0 0 1px rgba(174, 191, 207, 0.105); }
    .player-search:focus-within {
      background: linear-gradient(90deg, rgba(178, 195, 209, 0.035), transparent 44%), rgba(0, 0, 0, 0.42);
      box-shadow: inset 0 0 0 1px rgba(195, 209, 220, 0.24), 0 0 0 1px rgba(0, 0, 0, 0.5);
    }
    .player-search__add,
    .player-search__add:disabled {
      cursor: default;
      background: rgba(157, 176, 194, 0.045);
      box-shadow: inset 1px 0 0 rgba(174, 191, 207, 0.09);
      color: #717c87;
    }
    .player-search.has-value .player-search__add:not(:disabled) {
      cursor: pointer;
      background: linear-gradient(180deg, rgba(var(--amber-rgb), 0.18), rgba(var(--amber-rgb), 0.075));
      box-shadow: inset 1px 0 0 rgba(var(--amber-rgb), 0.32);
      color: var(--amber-hot);
    }
    .player-search.has-value .player-search__add:not(:disabled):hover {
      background: linear-gradient(180deg, var(--amber-hot), var(--amber-deep));
      color: #171006;
    }
    .player-search__add.is-sent,
    .player-search.has-value .player-search__add.is-sent {
      background: rgba(var(--green-rgb), 0.12);
      box-shadow: inset 1px 0 0 rgba(var(--green-rgb), 0.25);
      color: var(--green);
    }

    .pane-toolbar { min-height: 0; padding: 3px 3px 3px 4px; }
    .pane-toolbar__metric {
      color: #7e8994;
      font-family: Rajdhani, Inter, sans-serif;
      font-size: 8px;
      font-weight: 800;
      letter-spacing: 0.075em;
      text-transform: uppercase;
    }
    .pane-toolbar__metric--active { color: var(--green); }
    .pane-toolbar__metric--active::before {
      display: inline-block;
      width: 4px;
      height: 4px;
      margin-right: 5px;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 0 0 6px rgba(var(--green-rgb), 0.5);
      vertical-align: 1px;
      content: "";
    }

    .friends-scroll,
    .requests-scroll {
      min-height: 0;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding-right: 3px;
      scrollbar-color: rgba(var(--amber-rgb), 0.36) rgba(255, 255, 255, 0.025);
      scrollbar-width: thin;
    }
    .friends-scroll::-webkit-scrollbar,
    .requests-scroll::-webkit-scrollbar { width: 4px; }
    .friends-scroll::-webkit-scrollbar-track,
    .requests-scroll::-webkit-scrollbar-track { border-radius: 4px; background: rgba(255, 255, 255, 0.02); }
    .friends-scroll::-webkit-scrollbar-thumb,
    .requests-scroll::-webkit-scrollbar-thumb { border-radius: 4px; background: rgba(var(--amber-rgb), 0.32); }

    .rank-insignia,
    .rank-insignia--request,
    .rank-insignia--party {
      display: grid;
      width: 32px;
      height: 32px;
      flex: 0 0 32px;
      place-items: center;
      overflow: hidden;
      border-radius: 5px;
      background: radial-gradient(circle at 50% 25%, rgba(var(--amber-rgb), 0.1), transparent 62%), rgba(8, 12, 16, 0.84);
      box-shadow: inset 0 0 0 1px rgba(174, 191, 207, 0.08);
    }
    .rank-insignia img,
    .rank-insignia--request img,
    .rank-insignia--party img {
      display: block;
      width: 28px;
      height: 28px;
      object-fit: contain;
      filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
    }

    .friend { min-height: 44px; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 8px; }
    .friend.is-confirming,
    .squad-member.is-confirming {
      background: linear-gradient(100deg, rgba(255, 92, 65, 0.075), transparent 66%), rgba(8, 8, 10, 0.8);
      box-shadow: inset 0 0 0 1px rgba(255, 92, 65, 0.18);
    }

    .requests-section { height: 100%; min-height: 0; margin: 0; padding: 0; background: none; }
    .requests-list { display: grid; gap: 5px; }
    .request-row {
      min-height: 44px;
      grid-template-columns: 32px minmax(0, 1fr) auto;
      gap: 8px;
      padding: 5px 6px;
      box-shadow: inset 0 0 0 1px rgba(174, 191, 207, 0.075);
    }
    .request-action { width: 31px; height: 29px; }
    .requests-empty {
      display: grid;
      height: 100%;
      min-height: 0;
      place-items: center;
      border-radius: 6px;
      background: linear-gradient(105deg, rgba(var(--green-rgb), 0.035), transparent 58%), rgba(4, 7, 10, 0.45);
      color: #737f89;
      font-family: Rajdhani, Inter, sans-serif;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-align: center;
      text-transform: uppercase;
    }
    .requests-empty i { display: block; margin-bottom: 7px; color: #52606a; font-size: 18px; }
    .requests-empty[hidden] { display: none; }

    .party-role {
      color: #7f8a95;
      font-family: Rajdhani, Inter, sans-serif;
      font-size: 8px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .party-role.is-leader { color: var(--amber-hot); }
    .party-role i { margin-right: 4px; font-size: 7px; }
    .party-empty { height: 100%; min-height: 0; }
    .party-active {
      display: grid;
      height: 100%;
      min-height: 0;
      grid-template-rows: minmax(0, 1fr) 31px;
      gap: 6px;
    }
    .party-active[hidden] { display: none; }
    .squad-roster {
      display: grid;
      min-height: 0;
      grid-template-rows: repeat(3, minmax(0, 1fr));
      gap: 5px;
    }
    .squad-member { min-height: 0; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 8px; padding: 4px 6px; }
    .squad-member__name { font-size: 11px; }
    .squad-member__meta { font-size: 8.5px; }
    .party-actions { display: grid; height: 31px; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; margin: 0; }
    .party-action { min-height: 31px; }
    .party-action--invite {
      background: rgba(var(--amber-rgb), 0.09);
      box-shadow: inset 0 0 0 1px rgba(var(--amber-rgb), 0.28);
      color: var(--amber-hot);
    }
    .party-action--invite:hover {
      background: rgba(var(--amber-rgb), 0.17);
      box-shadow: inset 0 0 0 1px rgba(var(--amber-rgb), 0.46);
    }

    .inline-confirm { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 4px; }
    .inline-confirm__copy {
      display: flex;
      min-width: 0;
      flex: 1;
      flex-direction: column;
      gap: 1px;
      color: #e3e7ea;
      font-family: Rajdhani, Inter, sans-serif;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.045em;
      line-height: 1;
      white-space: nowrap;
    }
    .inline-confirm__copy small {
      overflow: hidden;
      color: #8b7470;
      font-family: Inter, sans-serif;
      font-size: 7.5px;
      font-weight: 600;
      letter-spacing: 0;
      text-overflow: ellipsis;
    }
    .inline-confirm__button {
      height: 26px;
      padding: 0 7px;
      border: 0;
      border-radius: 3px;
      font-family: Rajdhani, Inter, sans-serif;
      font-size: 8px;
      font-weight: 800;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .inline-confirm__button--cancel {
      background: rgba(157, 176, 194, 0.06);
      box-shadow: inset 0 0 0 1px rgba(157, 176, 194, 0.16);
      color: #a9b2ba;
    }
    .inline-confirm__button--danger {
      background: rgba(255, 92, 65, 0.12);
      box-shadow: inset 0 0 0 1px rgba(255, 92, 65, 0.34);
      color: #ff927f;
    }
    .inline-confirm__button--cancel:hover { background: rgba(157, 176, 194, 0.12); color: #e8edf0; }
    .inline-confirm__button--danger:hover { background: rgba(255, 92, 65, 0.24); color: #ffc0b5; }
    .friend > .inline-confirm,
    .squad-member > .inline-confirm { justify-self: end; }
    .party-actions.is-confirming { display: block; }
    .party-actions > .inline-confirm {
      width: 100%;
      height: 31px;
      padding: 2px 3px 2px 8px;
      border-radius: 4px;
      background: rgba(255, 92, 65, 0.055);
      box-shadow: inset 0 0 0 1px rgba(255, 92, 65, 0.19);
    }

    @media (max-width: 390px) {
      .squad-hub { width: 100%; height: 276px; }
      .squad-hub__header { padding: 0; }
      .squad-tab { gap: 3px; padding: 0 3px; font-size: 9.5px; letter-spacing: 0.06em; }
      .squad-tab__badge { min-width: 20px; padding: 0 3px; }
      .friend,
      .squad-member,
      .request-row { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 6px; }
      .rank-insignia,
      .rank-insignia--request,
      .rank-insignia--party { width: 30px; height: 30px; flex-basis: 30px; }
      .rank-insignia img,
      .rank-insignia--request img,
      .rank-insignia--party img { width: 27px; height: 27px; }
    }

    .requests-scroll { height: 100%; }
    .friend__actions[hidden],
    .party-action[hidden],
    .member-kick[hidden] { display: none; }
    .player-search__input:focus-visible { outline: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   Guest social presentation — keyed by body[data-lobby-account="guest"].
   Forked from lobby_guest.html #guest-layer (friends-only). Account roster
   stays mounted; CSS hides it. friends-squad.js never notices.
   ═══════════════════════════════════════════════════════════════════════════ */

body:not([data-lobby-account="guest"]) [data-gv-when="guest"] { display: none; }
body[data-lobby-account="guest"] [data-gv-when="account"] { display: none; }

[data-lobby-account="guest"] {
  --gv-rim: rgba(159, 181, 201, 0.26);
  --gv-rim-hot: rgba(255, 157, 10, 0.55);
  --gv-ink: #aab4bf;
  --gv-face: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02));
  --gv-face-hot: linear-gradient(180deg, rgba(255, 157, 10, 0.13), rgba(255, 255, 255, 0.025));
  --gv-cut: 7px;
}

.gv-hold {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 10px;
  border: 0;
  outline: 0;
  background: var(--gv-face);
  box-shadow: inset 0 0 0 1px var(--gv-rim);
  clip-path: polygon(var(--gv-cut) 0, 100% 0, calc(100% - var(--gv-cut)) 100%, 0 100%);
  color: var(--gv-ink);
  cursor: pointer;
  font-family: Rajdhani, "Arial Narrow", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    background 150ms ease,
    box-shadow 150ms ease,
    color 150ms ease;
}

.gv-hold > i {
  font-size: 9px;
  opacity: 0.75;
  transition: opacity 150ms ease;
}

.gv-hold:hover,
.gv-hold:focus-visible {
  outline: 0;
  background: var(--gv-face-hot);
  box-shadow: inset 0 0 0 1px var(--gv-rim-hot);
  color: var(--amber-hot);
}

.gv-hold:hover > i,
.gv-hold:focus-visible > i { opacity: 1; }

.gv-hold:active { transform: translateY(1px); }

.gv-hold--wide {
  width: 100%;
  min-height: 32px;
  font-size: 11px;
}

/* Social: an honest preview, not a fabricated friends list.
   Fixed 4-row grid keeps the CTA on the same baseline whether a pane
   has a body line (Squad) or not (Friends / Requests). */
.gv-preview {
  display: none;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(32px, auto) auto;
  justify-items: center;
  align-content: center;
  gap: 7px;
  min-height: 0;
  padding: 12px 16px 14px;
  text-align: center;
}

/* The authenticated pane is a fixed-row grid (search / toolbar / scroller).
   With those rows retired the preview would be crushed into row 1, so the
   pane drops to flow for guests — scoped past [hidden] so the tablist's
   own show/hide still wins. */
[data-lobby-account="guest"] .social-pane:not([hidden]) { display: flex; }

[data-lobby-account="guest"] .gv-preview { display: grid; }

.gv-preview > .gv-preview__mark { grid-row: 1; }
.gv-preview > strong { grid-row: 2; }
.gv-preview > p { grid-row: 3; align-self: start; }
.gv-preview > .gv-hold { grid-row: 4; }

.gv-preview__mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px dashed rgba(159, 181, 201, 0.32);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), transparent 64%);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  color: #79838e;
  font-size: 14px;
}

.gv-preview strong {
  color: #dfe4e9;
  font-family: Rajdhani, "Arial Narrow", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.gv-preview p {
  max-width: 30ch;
  margin: 0;
  color: #7f8a95;
  font-size: 11px;
  line-height: 1.45;
}

.gv-preview .gv-hold { margin-top: 4px; max-width: 220px; }

/* One rule retires the whole authenticated social stack; friends-squad.js
   keeps managing [hidden] on the panes underneath and never notices. */
[data-lobby-account="guest"] .social-pane > :not(.gv-preview) { display: none; }

/* "3 online" would be a claim about friends this player does not have. */
[data-lobby-account="guest"] .squad-tab__badge { display: none; }