/**
 * Live lobby topbar, navigation, wallet, account rail, and profile popovers.
 * Base chrome follows the density controls so the original cascade is kept.
 */

/* ── Topnav fit knobs (§3.11) ──────────────────────────────────────────
   The fork wraps the topbar under 1180 into two HARD-CODED rows
   (grid-template-rows: 68px 66px; min-height: 134px) that sit OUTSIDE the tb
   zoom — so density alone cannot move them and the bar eats 143px at the
   floor. These states give the runtime a way out. Every default reproduces the
   fork exactly, so existing band bakes are untouched:

     data-topbar-fit    = wrap (baseline) | row     — force one row, nav scrolls
     data-topbar-labels = full (baseline) | icon    — glyph-only tabs
     data-topbar-rail   = full (baseline) | compact — drop wallet +, shrink brand
     --tb-nav-density = 0.95 (master) … 0.6   — item width / pad / type

   Nav metrics run through vars so density multiplies whatever the active fit
   mode asks for, instead of flattening the ≤1180 compaction. */
html {
  --tb-nav-item-w: 108px;
  --tb-nav-item-h: 62px;
  --tb-nav-item-pad: 22px;
  --tb-nav-font: 16px;
  /* Keep in sync with comfort DEFAULTS (0.95). Do not reset to 1 here. */
  --tb-nav-density: 0.95;
}

/* Wrap mode keeps the fork's ≤1180 nav compaction as its base. */
@media (max-width: 1180px) {
  html[data-topbar-fit="wrap"] {
    --tb-nav-item-w: 96px;
    --tb-nav-item-h: 54px;
    --tb-nav-item-pad: 18px;
  }
}

html .slant-nav__item {
  min-width: calc(var(--tb-nav-item-w) * var(--tb-nav-density));
  min-height: calc(var(--tb-nav-item-h) * var(--tb-nav-density));
  padding-inline: calc(var(--tb-nav-item-pad) * var(--tb-nav-density));
  font-size: calc(var(--tb-nav-font) * var(--tb-nav-density));
}

/* Row mode — undo the ≤1180 wrap: three columns, one row, height owned by the
   Top nav knob (apply() writes topbar min-height = tbPx). .slant-nav already
   has overflow-x:auto, so anything that still will not fit scrolls instead of
   stealing a second row of vertical space. */
html[data-topbar-fit="row"] .lobby-topbar {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, auto);
  min-height: 0;
  padding: 0 14px;
}

html[data-topbar-fit="row"] .brand {
  grid-column: auto;
  grid-row: auto;
  justify-content: center;
}

html[data-topbar-fit="row"] .slant-nav {
  grid-column: auto;
  grid-row: auto;
  height: auto;
  margin-inline: 0;
  padding-inline: 4px;
  border-top: 0;
}

html[data-topbar-fit="row"] .player-rail {
  grid-column: auto;
  grid-row: auto;
  justify-self: auto;
  height: var(--tb-row-h, 76px);
  padding-left: 8px;
}

/* Icon-only tabs — the real width win at the floor. */
html .slant-nav__icon {
  display: none;
}

html[data-topbar-labels="icon"] {
  --tb-nav-item-w: 52px;
  --tb-nav-item-pad: 10px;
}

html[data-topbar-labels="icon"] .slant-nav__label {
  display: none;
}

html[data-topbar-labels="icon"] .slant-nav__icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(17px * var(--tb-nav-density));
  line-height: 1;
}

/* Keep the Inventory crate count readable when the label is gone. */
html[data-topbar-labels="icon"] .slant-nav__count {
  transform: scale(0.85);
}

/* Compact player rail.
   The "+" buttons are monetisation CTAs — they NEVER go. The width is in the
   profile trigger (226px) and the wallet's generous metrics, not the adds:

     profile trigger  226px → ~50px  (avatar only — the fork already does this
                                      at ≤760; compact just pulls it earlier)
     wallet balance   92 min-w + 11 pad + 38 add  → 62 + 8 + 30, ×2
     brand            152 + 24 pad  → 96 + 10

   ≈ 320 design px recovered vs ≈ 76 from hiding the adds. Rail metrics run
   through vars so --tb-rail-density can dial whatever the mode asks for. */
html {
  /* Keep in sync with comfort DEFAULTS (0.95). Do not reset to 1 here. */
  --tb-rail-density: 0.95;
  --tb-res-h: 46px;
  --tb-res-min-w: 92px;
  --tb-res-pad: 11px;
  --tb-res-gap: 9px;
  --tb-res-add-w: 38px;
  --tb-res-font: 18px;
  --tb-res-mark: 20px;
  --tb-util-w: 46px;
  --tb-profile-avatar: 42px;
  --tb-profile-meta: 116px;
  --tb-profile-gap: 10px;
  --tb-brand-w: 152px;
  --tb-brand-img: 128px;
  --tb-brand-pad: 24px;
}

html[data-topbar-rail="compact"] {
  --tb-res-min-w: 62px;
  --tb-res-pad: 8px;
  --tb-res-gap: 6px;
  --tb-res-add-w: 30px;
  --tb-res-font: 15px;
  --tb-res-mark: 17px;
  --tb-util-w: 40px;
  --tb-brand-w: 96px;
  --tb-brand-img: 84px;
  --tb-brand-pad: 10px;
}

html .brand {
  width: calc(var(--tb-brand-w) * var(--tb-rail-density));
  padding-right: calc(var(--tb-brand-pad) * var(--tb-rail-density));
}

html .brand img {
  width: calc(var(--tb-brand-img) * var(--tb-rail-density));
}

html .player-rail {
  gap: calc(9px * var(--tb-rail-density));
}

html .wallet {
  gap: calc(7px * var(--tb-rail-density));
}

html .resource {
  grid-template-columns: auto calc(var(--tb-res-add-w) * var(--tb-rail-density));
  height: calc(var(--tb-res-h) * var(--tb-rail-density));
}

html .resource__balance {
  min-width: calc(var(--tb-res-min-w) * var(--tb-rail-density));
  padding-inline: calc(var(--tb-res-pad) * var(--tb-rail-density));
  gap: calc(var(--tb-res-gap) * var(--tb-rail-density));
}

html .resource__value {
  font-size: calc(var(--tb-res-font) * var(--tb-rail-density));
}

html .resource__mark {
  width: calc(var(--tb-res-mark) * var(--tb-rail-density));
  height: calc(var(--tb-res-mark) * var(--tb-rail-density));
  font-size: calc(17px * var(--tb-rail-density));
}

/* The "+" stays — only its footprint tightens. */
html .resource__add {
  width: calc(var(--tb-res-add-w) * var(--tb-rail-density));
}

html .utility-button {
  width: calc(var(--tb-util-w) * var(--tb-rail-density));
  height: calc(var(--tb-util-w) * var(--tb-rail-density));
}

html .utility-button__glyph {
  display: block;
  width: calc(18px * var(--tb-rail-density));
  height: calc(18px * var(--tb-rail-density));
}

html .profile__trigger {
  grid-template-columns:
    calc(var(--tb-profile-avatar) * var(--tb-rail-density))
    minmax(calc(var(--tb-profile-meta) * var(--tb-rail-density)), 1fr)
    14px;
  gap: calc(var(--tb-profile-gap) * var(--tb-rail-density));
  width: calc(226px * var(--tb-rail-density));
}

/* Avatar-only profile — the single biggest width win in the rail. Same shape
   the fork already falls back to at ≤760, just available on demand. */
html[data-topbar-rail="compact"] .profile__trigger {
  grid-template-columns: calc(var(--tb-profile-avatar) * var(--tb-rail-density));
  gap: 0;
  width: auto;
  padding: 0 6px;
}

html[data-topbar-rail="compact"] .profile__meta,
html[data-topbar-rail="compact"] .profile__chevron {
  display: none;
}

    * {
      box-sizing: border-box;
    }

    html,
    body {
      height: 100%;
      margin: 0;
    }

    body {
      min-width: 320px;
      overflow: hidden;
      background:
        radial-gradient(circle at 50% -20%, rgba(var(--amber-rgb), 0.08), transparent 43rem),
        linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
        var(--page);
      background-size: auto, 48px 48px, 48px 48px, auto;
      color: var(--ink);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    button,
    a {
      font: inherit;
    }

    button {
      -webkit-tap-highlight-color: transparent;
    }

    /* ═══════════════════════════════════════
       TOP BAR SHELL — lobby chrome
       ═══════════════════════════════════════ */
    .lobby-topbar {
      position: sticky;
      top: 0;
      z-index: 1200;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: stretch;
      min-height: var(--tb-h);
      padding: 0 22px;
      background:
        linear-gradient(110deg, rgba(var(--amber-rgb), 0.045), transparent 23%),
        linear-gradient(180deg, var(--bar-top), var(--bar-bottom));
      border-bottom: 1px solid var(--line);
      box-shadow:
        0 1px rgba(var(--amber-rgb), 0.1),
        0 18px 48px rgba(0, 0, 0, 0.5);
    }

    .lobby-topbar::after {
      position: absolute;
      right: 0;
      bottom: -1px;
      left: 0;
      height: 1px;
      background: linear-gradient(
        90deg,
        transparent 2%,
        rgba(var(--amber-rgb), 0.27) 24%,
        rgba(var(--amber-rgb), 0.07) 58%,
        transparent 88%
      );
      content: "";
      pointer-events: none;
    }

    .brand {
      display: grid;
      place-items: center;
      width: 152px;
      padding-right: 24px;
      text-decoration: none;
    }

    .brand img {
      display: block;
      width: 128px;
      height: auto;
      filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.62));
    }

    /* ═══════════════════════════════════════
       SLANTED NAV — exact from top-nav-buttons.html
       ═══════════════════════════════════════ */
    .slant-nav {
      display: flex;
      align-items: stretch;
      min-width: 0;
      padding: 0 4px;
      overflow-x: auto;
      overflow-y: hidden;
      overscroll-behavior-inline: contain;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    .slant-nav::-webkit-scrollbar {
      display: none;
    }

    .slant-nav__item {
      position: relative;
      isolation: isolate;
      flex: 0 0 auto;
      min-width: 108px;
      min-height: 62px;
      padding: 0 22px;
      border: 0;
      outline: 0;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      font-family: "Rajdhani", "Bahnschrift SemiCondensed", "Arial Narrow", sans-serif;
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0.085em;
      line-height: 1;
      text-transform: uppercase;
      white-space: nowrap;
      -webkit-tap-highlight-color: transparent;
    }

    .slant-nav__surface {
      position: absolute;
      z-index: -1;
      inset: 14px -2px;
      pointer-events: none;
      transition:
        filter 180ms var(--ease-out),
        transform 180ms var(--ease-out);
    }

    .slant-nav__surface::before,
    .slant-nav__surface::after {
      position: absolute;
      inset: 0;
      clip-path: polygon(
        var(--slant) 0,
        100% 0,
        calc(100% - var(--slant)) 100%,
        0 100%
      );
      content: "";
      transition:
        background-color 150ms ease,
        opacity 150ms ease;
    }

    .slant-nav__surface::before {
      background: rgba(255, 255, 255, 0.055);
    }

    .slant-nav__surface::after {
      inset: 1px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 55%),
        linear-gradient(180deg, rgba(16, 20, 26, 0.42), rgba(7, 9, 12, 0.3));
    }

    .slant-nav__label {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      transform: translateY(1px);
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
      transition:
        color 150ms ease,
        text-shadow 150ms ease,
        transform 180ms var(--ease-out);
    }

    .slant-nav__item::after {
      position: absolute;
      right: 22px;
      bottom: 14px;
      left: 22px;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(
        90deg,
        transparent,
        var(--amber-hot) 25%,
        var(--amber) 75%,
        transparent
      );
      box-shadow:
        0 0 6px rgba(var(--amber-rgb), 0.9),
        0 0 18px rgba(var(--amber-rgb), 0.62);
      content: "";
      opacity: 0;
      transform: scaleX(0.45);
      transition:
        opacity 150ms ease,
        transform 220ms var(--ease-out);
    }

    .slant-nav__item:hover {
      color: #d9dee4;
    }

    .slant-nav__item:hover .slant-nav__surface::before {
      background: rgba(255, 255, 255, 0.08);
    }

    .slant-nav__item:hover .slant-nav__surface::after {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 62%),
        rgba(17, 22, 28, 0.88);
    }

    .slant-nav__item:hover .slant-nav__label {
      transform: translateY(0);
    }

    .slant-nav__item.is-active,
    .slant-nav__item[aria-current="page"] {
      color: #fff;
    }

    .slant-nav__item.is-active .slant-nav__surface,
    .slant-nav__item[aria-current="page"] .slant-nav__surface {
      filter:
        drop-shadow(0 0 8px rgba(var(--amber-rgb), 0.16))
        drop-shadow(0 5px 10px rgba(0, 0, 0, 0.55));
    }

    .slant-nav__item.is-active .slant-nav__surface::before,
    .slant-nav__item[aria-current="page"] .slant-nav__surface::before {
      background: linear-gradient(
        180deg,
        rgba(var(--amber-rgb), 0.68),
        rgba(var(--amber-rgb), 0.18) 42%,
        rgba(var(--amber-rgb), 0.54)
      );
    }

    .slant-nav__item.is-active .slant-nav__surface::after,
    .slant-nav__item[aria-current="page"] .slant-nav__surface::after {
      background:
        linear-gradient(115deg, rgba(var(--amber-rgb), 0.11), transparent 34%),
        linear-gradient(180deg, #15181b 0%, #0a0c0f 100%);
    }

    .slant-nav__item.is-active::after,
    .slant-nav__item[aria-current="page"]::after {
      opacity: 1;
      transform: scaleX(1);
    }

    .slant-nav__item.is-active .slant-nav__label,
    .slant-nav__item[aria-current="page"] .slant-nav__label {
      text-shadow:
        0 1px 2px #000,
        0 0 12px rgba(255, 255, 255, 0.12);
    }

    .slant-nav__item:active .slant-nav__surface {
      transform: translateY(1px);
    }

    .slant-nav__item:active .slant-nav__label {
      transform: translateY(2px);
    }

    .slant-nav__item:focus-visible .slant-nav__surface {
      filter:
        drop-shadow(0 0 2px #fff)
        drop-shadow(0 0 9px rgba(var(--amber-rgb), 0.62));
    }

    .slant-nav__item:focus-visible .slant-nav__surface::before {
      background: rgba(255, 225, 176, 0.9);
    }

    .slant-nav__badge {
      min-width: 27px;
      padding: 2px 5px 1px;
      border: 1px solid rgba(255, 199, 85, 0.56);
      border-radius: 2px;
      background: rgba(var(--amber-rgb), 0.12);
      color: #ffc75a;
      font-size: 9px;
      letter-spacing: 0.05em;
      line-height: 1;
    }

    /* ═══════════════════════════════════════
       PLAYER RAIL — exact from top-bar-player-tools.html
       (base surface language, then compact 38px scale)
       ═══════════════════════════════════════ */
    .player-rail {
      position: relative;
      display: flex;
      align-items: center;
      align-self: stretch;
      gap: 9px;
      min-width: 0;
      /* Design space — this element is zoomed by --flex-tb-scale. */
      height: var(--tb-row-h, 76px);
      padding-left: 20px;
    }

    .wallet {
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .resource {
      --resource: var(--amber);
      --resource-rgb: var(--amber-rgb);
      position: relative;
      isolation: isolate;
      display: grid;
      grid-template-columns: auto 38px;
      height: 46px;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.012) 42%, transparent),
        var(--panel-deep);
      box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.025),
        0 6px 16px rgba(0, 0, 0, 0.24);
      transition:
        border-color 160ms ease,
        box-shadow 180ms ease,
        transform 180ms var(--ease-out);
    }

    .resource--tags {
      --resource: var(--cyan);
      --resource-rgb: var(--cyan-rgb);
    }

    .resource::before {
      position: absolute;
      z-index: 2;
      top: -1px;
      right: 42px;
      left: 9px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(var(--resource-rgb), 0.72), transparent);
      content: "";
      opacity: 0;
      transform: scaleX(0.45);
      transition:
        opacity 160ms ease,
        transform 200ms var(--ease-out);
    }

    .resource:hover,
    .resource:focus-within {
      border-color: rgba(var(--resource-rgb), 0.38);
      box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.04),
        0 0 0 1px rgba(var(--resource-rgb), 0.06),
        0 8px 22px rgba(0, 0, 0, 0.32);
      transform: translateY(-1px);
    }

    .resource:hover::before,
    .resource:focus-within::before {
      opacity: 1;
      transform: scaleX(1);
    }

    .resource__balance,
    .resource__add {
      appearance: none;
      border: 0;
      outline: 0;
      cursor: pointer;
    }

    .resource__balance {
      display: flex;
      align-items: center;
      gap: 9px;
      min-width: 92px;
      padding: 0 11px;
      background: transparent;
      color: var(--ink);
      text-align: left;
    }

    .resource__mark {
      display: grid;
      place-items: center;
      width: 20px;
      height: 20px;
      color: var(--resource);
      font-size: 17px;
      filter: drop-shadow(0 0 7px rgba(var(--resource-rgb), 0.23));
      transition:
        filter 160ms ease,
        transform 180ms var(--ease-out);
    }

    .resource--tags .resource__mark {
      font-size: 16px;
    }

    .resource:hover .resource__mark,
    .resource:focus-within .resource__mark {
      filter: drop-shadow(0 0 8px rgba(var(--resource-rgb), 0.44));
      transform: translateY(-1px);
    }

    .resource__value {
      min-width: 4ch;
      color: #f5f7f9;
      font-family: Rajdhani, "Arial Narrow", sans-serif;
      font-size: 18px;
      font-variant-numeric: tabular-nums;
      font-weight: 700;
      letter-spacing: 0.015em;
      line-height: 1;
    }

    .resource__add {
      position: relative;
      display: grid;
      place-items: center;
      width: 38px;
      height: 100%;
      background:
        linear-gradient(180deg, rgba(var(--resource-rgb), 0.1), rgba(var(--resource-rgb), 0.025)),
        rgba(0, 0, 0, 0.12);
      border-left: 1px solid var(--line);
      color: #a7afb8;
      font-size: 11px;
      transition:
        background-color 150ms ease,
        color 150ms ease;
    }

    .resource__add::after {
      position: absolute;
      inset: 8px 0;
      width: 1px;
      background: linear-gradient(transparent, rgba(var(--resource-rgb), 0.28), transparent);
      content: "";
    }

    .resource__add:hover {
      background:
        linear-gradient(180deg, rgba(var(--resource-rgb), 0.22), rgba(var(--resource-rgb), 0.08)),
        rgba(0, 0, 0, 0.12);
      color: var(--resource);
    }

    .resource__add:active i {
      transform: scale(0.82);
    }

    .resource__add i {
      transition: transform 120ms var(--ease-out);
    }

    .utility-button {
      position: relative;
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      padding: 0;
      border: 1px solid var(--line);
      border-radius: 8px;
      outline: 0;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.038), transparent),
        var(--panel-deep);
      box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.025),
        0 6px 16px rgba(0, 0, 0, 0.24);
      color: #bac1c9;
      cursor: pointer;
      font-size: 16px;
      transition:
        background-color 150ms ease,
        border-color 150ms ease,
        color 150ms ease,
        transform 180ms var(--ease-out);
    }


    .utility-button:hover:not(:disabled),
    .utility-button[aria-expanded="true"] {
      border-color: rgba(var(--amber-rgb), 0.34);
      background:
        linear-gradient(180deg, rgba(var(--amber-rgb), 0.1), transparent),
        #0b0e12;
      color: #f0f2f4;
      transform: translateY(-1px);
    }

    .utility-button:active:not(:disabled) {
      transform: translateY(0);
    }

    /* Inert while a Quick Play search is in flight — there is no client cancel,
       so the control states that plainly instead of offering a fake exit. */
    .utility-button:disabled {
      cursor: default;
      opacity: 0.42;
    }

    .utility-button__pip {
      position: absolute;
      top: 9px;
      right: 9px;
      width: 6px;
      height: 6px;
      border: 1px solid #2b1c05;
      border-radius: 50%;
      background: var(--amber);
      box-shadow:
        0 0 0 2px var(--panel-deep),
        0 0 8px rgba(var(--amber-rgb), 0.8);
    }

    /* Anchors popovers to the trigger footprint (not the full-height rail). */
    .popover-host,
    .profile {
      position: relative;
    }

    .profile__trigger {
      position: relative;
      display: grid;
      grid-template-columns: 42px minmax(116px, 1fr) 14px;
      align-items: center;
      gap: 10px;
      width: 226px;
      height: 56px;
      padding: 0 12px 0 6px;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 10px;
      outline: 0;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012) 46%, transparent),
        var(--panel-deep);
      box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.025),
        var(--shadow-raised);
      color: inherit;
      cursor: pointer;
      text-align: left;
      transition:
        border-color 160ms ease,
        box-shadow 180ms ease,
        transform 180ms var(--ease-out);
    }

    .profile__trigger::before {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 2px;
      background: linear-gradient(transparent, rgba(var(--amber-rgb), 0.58), transparent);
      content: "";
      opacity: 0.72;
    }

    .profile__trigger:hover,
    .profile__trigger[aria-expanded="true"] {
      border-color: rgba(var(--amber-rgb), 0.34);
      box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.035),
        0 0 0 1px rgba(var(--amber-rgb), 0.05),
        0 12px 28px rgba(0, 0, 0, 0.38);
      transform: translateY(-1px);
    }

    /* Rank insignia slot — same grid footprint as the old FA user avatar.
       Edgeless like identity .rank-badge (enclosure lives on the chip surface). */
    .profile__avatar {
      position: relative;
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      overflow: visible;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .profile__avatar img {
      display: block;
      width: 38px;
      height: 38px;
      object-fit: contain;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
    }

    .profile__meta {
      display: grid;
      min-width: 0;
      gap: 4px;
    }

    .profile__name {
      overflow: hidden;
      color: #f4f5f7;
      font-family: Rajdhani, "Arial Narrow", sans-serif;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.065em;
      line-height: 1;
      text-overflow: ellipsis;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .profile__progress-row {
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .profile__level {
      flex: 0 0 auto;
      color: var(--amber);
      font-family: Rajdhani, "Arial Narrow", sans-serif;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.09em;
      line-height: 1;
      text-transform: uppercase;
    }

    .profile__xp {
      position: relative;
      flex: 1;
      height: 3px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.075);
    }

    .profile__xp::after {
      position: absolute;
      inset: 0 32% 0 0;
      border-radius: inherit;
      background: linear-gradient(90deg, #d77900, var(--amber));
      box-shadow: 0 0 8px rgba(var(--amber-rgb), 0.42);
      content: "";
    }

    .profile__chevron {
      color: #707985;
      font-size: 11px;
      transition: transform 180ms var(--ease-out);
    }

    .profile__trigger[aria-expanded="true"] .profile__chevron {
      transform: rotate(180deg);
    }

    :where(.resource__balance, .resource__add, .utility-button, .profile__trigger):focus-visible {
      box-shadow:
        0 0 0 2px var(--page),
        0 0 0 4px rgba(var(--amber-rgb), 0.78);
    }

    .resource--tags :where(.resource__balance, .resource__add):focus-visible {
      box-shadow:
        0 0 0 2px var(--page),
        0 0 0 4px rgba(var(--cyan-rgb), 0.72);
    }

    .popover {
      position: absolute;
      z-index: 30;
      top: calc(100% + 6px);
      right: 0;
      width: 308px;
      overflow: hidden;
      border: 1px solid var(--line-strong);
      border-radius: 10px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 72px),
        #0c1015;
      box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.62),
        inset 0 1px rgba(255, 255, 255, 0.035);
      opacity: 0;
      pointer-events: none;
      transform: translateY(-5px);
      transition:
        opacity 150ms ease,
        transform 180ms var(--ease-out);
    }

    .popover.is-open {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    /* Account slim menu hugs two short rows; guest convert panel sets its own width. */
    .popover--profile {
      width: max-content;
    }

    .popover__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 45px;
      padding: 0 14px;
      border-bottom: 1px solid var(--line);
    }

    .popover__title {
      color: #eef0f2;
      font-family: Rajdhani, "Arial Narrow", sans-serif;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .popover__status {
      color: var(--amber);
      font-family: Rajdhani, "Arial Narrow", sans-serif;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.11em;
      text-transform: uppercase;
    }

    .message-list {
      margin: 0;
      padding: 5px;
      list-style: none;
    }

    .message {
      display: grid;
      grid-template-columns: 31px minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      min-height: 54px;
      padding: 7px 9px;
      border-radius: 6px;
    }

    .message + .message {
      border-top: 1px solid rgba(255, 255, 255, 0.045);
      border-radius: 0;
    }

    .message--unread {
      background: rgba(var(--amber-rgb), 0.045);
    }

    .message__mark {
      display: grid;
      place-items: center;
      width: 31px;
      height: 31px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.025);
      color: #9ea6af;
      font-size: 12px;
    }

    .message--unread .message__mark {
      border-color: rgba(var(--amber-rgb), 0.22);
      color: var(--amber);
    }

    .message__copy {
      min-width: 0;
    }

    .message__title,
    .message__preview,
    .message__time {
      display: block;
    }

    .message__title {
      overflow: hidden;
      color: #e4e7ea;
      font-size: 11px;
      font-weight: 700;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .message__preview {
      margin-top: 3px;
      overflow: hidden;
      color: #6f7883;
      font-size: 9px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .message__time {
      align-self: start;
      padding-top: 4px;
      color: #535c67;
      font-family: Rajdhani, sans-serif;
      font-size: 9px;
      font-weight: 700;
    }

    .profile-menu {
      margin: 0;
      padding: 4px;
      list-style: none;
    }

    .profile-menu__item {
      display: grid;
      grid-template-columns: 16px max-content;
      align-items: center;
      justify-content: start;
      column-gap: 8px;
      width: 100%;
      height: 36px;
      padding: 0 12px 0 10px;
      border: 0;
      border-radius: 6px;
      background: transparent;
      color: #c2c8cf;
      cursor: pointer;
      font-family: Rajdhani, "Arial Narrow", sans-serif;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .profile-menu__item i {
      width: 16px;
      color: #727c87;
      text-align: center;
      font-size: 12px;
      line-height: 1;
    }

    .profile-menu__item span {
      justify-self: start;
      text-align: left;
      line-height: 1;
      white-space: nowrap;
    }

    .profile-menu__item:hover,
    .profile-menu__item:focus-visible {
      outline: 0;
      background: rgba(var(--amber-rgb), 0.08);
      color: #fff;
    }

    .profile-menu__item:hover i,
    .profile-menu__item:focus-visible i {
      color: var(--amber);
    }

    .profile-menu__item--danger {
      color: #d88982;
    }

    .profile-menu__item--danger:hover,
    .profile-menu__item--danger:focus-visible {
      background: rgba(255, 102, 91, 0.08);
      color: #ff8d85;
    }

    .profile-menu__item--danger:hover i,
    .profile-menu__item--danger:focus-visible i {
      color: var(--danger);
    }

    /* Compact utility scale — flexed up with --tb-h 92 (was 38px @ 76) */
    .resource {
      grid-template-columns: auto 46px;
      height: 46px;
      overflow: visible;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .resource::before,
    .resource::after {
      position: absolute;
      width: auto;
      height: auto;
      clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
      content: "";
      pointer-events: none;
    }

    .resource::before {
      z-index: -2;
      inset: 0;
      background: linear-gradient(180deg, rgba(var(--resource-rgb), 0.2), rgba(255, 255, 255, 0.065) 48%, rgba(var(--resource-rgb), 0.13));
      opacity: 1;
      transform: none;
    }

    .resource::after {
      z-index: -1;
      inset: 1px;
      background:
        linear-gradient(115deg, rgba(var(--resource-rgb), 0.055), transparent 40%),
        linear-gradient(180deg, #12171d, #080b0f);
    }

    .resource:hover,
    .resource:focus-within {
      border-color: transparent;
      box-shadow: none;
      filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.46));
    }

    .resource:hover::before,
    .resource:focus-within::before {
      background: linear-gradient(180deg, rgba(var(--resource-rgb), 0.6), rgba(var(--resource-rgb), 0.16) 48%, rgba(var(--resource-rgb), 0.4));
      opacity: 1;
      transform: none;
    }

    .resource__balance {
      z-index: 1;
      min-width: 104px;
      height: 46px;
      gap: 8px;
      padding: 0 10px 0 16px;
    }

    .resource--tags .resource__balance {
      min-width: 90px;
    }

    .resource__mark {
      width: 19px;
      height: 19px;
      font-size: 16px;
    }

    .resource--tags .resource__mark {
      font-size: 15px;
    }

    .resource__value {
      font-size: 17px;
    }

    .resource__add {
      z-index: 1;
      isolation: isolate;
      width: 46px;
      height: 46px;
      margin: 0;
      padding-right: 6px;
      background: transparent;
      border-left: 0;
      font-size: 10px;
      clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
    }

    /* Face + hover live on the clipped well so they cannot square off the slant. */
    .resource__add::before {
      position: absolute;
      z-index: -1;
      inset: 0;
      background: linear-gradient(180deg, rgba(var(--resource-rgb), 0.08), rgba(var(--resource-rgb), 0.015));
      content: "";
      pointer-events: none;
    }

    .resource__add::after {
      inset: 0 auto 0 0;
      width: calc(var(--slant) + 1px);
      background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.12), transparent);
      clip-path: polygon(var(--slant) 0, calc(var(--slant) + 1px) 0, 1px 100%, 0 100%);
    }

    .resource__add:hover {
      background: transparent;
    }

    .resource__add:hover::before {
      background: linear-gradient(180deg, rgba(var(--resource-rgb), 0.22), rgba(var(--resource-rgb), 0.06));
    }

    .utility-button {
      isolation: isolate;
      width: 46px;
      height: 46px;
      overflow: visible;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      font-size: 16px;
    }

    .utility-button::before,
    .utility-button::after {
      position: absolute;
      z-index: -2;
      inset: 0;
      clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
      content: "";
      pointer-events: none;
    }

    .utility-button::before {
      background: rgba(255, 255, 255, 0.075);
    }

    .utility-button::after {
      z-index: -1;
      inset: 1px;
      background: linear-gradient(180deg, #12171d, #080b0f);
    }

    .utility-button:hover:not(:disabled),
    .utility-button[aria-expanded="true"] {
      border-color: transparent;
      background: transparent;
      filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.46));
    }

    .utility-button:hover:not(:disabled)::before,
    .utility-button[aria-expanded="true"]::before {
      background: linear-gradient(180deg, rgba(var(--amber-rgb), 0.55), rgba(var(--amber-rgb), 0.15) 48%, rgba(var(--amber-rgb), 0.36));
    }

    .utility-button__pip {
      top: 8px;
      right: 8px;
      width: 6px;
      height: 6px;
    }

    .profile__trigger {
      isolation: isolate;
      grid-template-columns: 34px minmax(120px, 1fr) 12px;
      gap: 9px;
      width: 210px;
      height: 46px;
      overflow: visible;
      padding: 0 14px 0 10px;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .profile__trigger::before,
    .profile__trigger::after {
      position: absolute;
      z-index: -2;
      inset: 0;
      width: auto;
      clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
      content: "";
      pointer-events: none;
    }

    .profile__trigger::before {
      background: linear-gradient(180deg, rgba(var(--amber-rgb), 0.24), rgba(255, 255, 255, 0.065) 48%, rgba(var(--amber-rgb), 0.16));
      opacity: 1;
    }

    .profile__trigger::after {
      z-index: -1;
      inset: 1px;
      background:
        linear-gradient(115deg, rgba(var(--amber-rgb), 0.06), transparent 36%),
        linear-gradient(180deg, #12171d, #080b0f);
    }

    .profile__trigger:hover,
    .profile__trigger[aria-expanded="true"] {
      border-color: transparent;
      background: transparent;
      box-shadow: none;
      filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5));
      /* Keep popover gap at calc(100% + 6px) — don't lift the chip under an open menu. */
      transform: none;
    }

    .profile__trigger:hover::before,
    .profile__trigger[aria-expanded="true"]::before {
      background: linear-gradient(180deg, rgba(var(--amber-rgb), 0.62), rgba(var(--amber-rgb), 0.17) 48%, rgba(var(--amber-rgb), 0.42));
    }

    .profile__avatar {
      width: 34px;
      height: 34px;
    }

    .profile__avatar img {
      width: 32px;
      height: 32px;
      filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
    }

    .profile__meta {
      gap: 3px;
    }

    .profile__name {
      font-size: 13px;
      letter-spacing: 0.07em;
    }

    .profile__progress-row {
      gap: 6px;
    }

    .profile__level {
      font-size: 9px;
    }

    .profile__xp {
      height: 3px;
    }

    .profile__chevron {
      font-size: 10px;
    }

    :where(.resource__balance, .resource__add, .utility-button, .profile__trigger):focus-visible,
    .resource--tags :where(.resource__balance, .resource__add):focus-visible {
      box-shadow: none;
      filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 7px rgba(var(--amber-rgb), 0.72));
    }

    .resource--tags :where(.resource__balance, .resource__add):focus-visible {
      filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 7px rgba(var(--cyan-rgb), 0.72));
    }

    .popover {
      border-radius: 4px;
    }

    .action-toast {
      position: fixed;
      z-index: 50;
      right: 22px;
      bottom: 22px;
      display: flex;
      align-items: center;
      gap: 9px;
      min-height: 40px;
      padding: 0 13px;
      border: 1px solid rgba(var(--amber-rgb), 0.24);
      border-radius: 7px;
      background: rgba(12, 16, 21, 0.96);
      box-shadow: 0 12px 34px rgba(0, 0, 0, 0.48);
      color: #cfd4da;
      font-family: Rajdhani, "Arial Narrow", sans-serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      opacity: 0;
      pointer-events: none;
      transform: translateY(7px);
      transition:
        opacity 160ms ease,
        transform 180ms var(--ease-out);
      text-transform: uppercase;
    }

    .action-toast::before {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--amber);
      box-shadow: 0 0 7px rgba(var(--amber-rgb), 0.8);
      content: "";
    }

    .action-toast.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Fit: tighten nav before the bar wraps */
    @media (max-width: 1280px) {
      .slant-nav__item {
        min-width: 88px;
        padding-inline: 16px;
      }
    }

    /* Fit: wrap nav under brand + rail — rows must match the frame's --tb-h. */
    @media (max-width: 1180px) {
      .lobby-topbar {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: 68px 66px;
        min-height: 134px;
        padding: 0 14px 8px;
      }

      .brand {
        grid-column: 1;
        grid-row: 1;
        justify-content: start;
        width: 128px;
        padding-right: 12px;
      }

      .brand img {
        width: 110px;
      }

      .player-rail {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        height: 68px;
        max-width: 100%;
        overflow: visible;
        padding-left: 8px;
      }

      .slant-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        height: 66px;
        margin-inline: -14px;
        padding-inline: 14px;
        border-top: 1px solid rgba(255, 255, 255, 0.045);
      }

      .slant-nav__item {
        min-width: 96px;
        min-height: 54px;
        padding-inline: 18px;
      }

      .slant-nav__surface {
        inset-block: 10px;
      }

      .slant-nav__item::after {
        bottom: 10px;
      }
    }

    @media (max-width: 760px) {
      .profile__trigger {
        grid-template-columns: 28px;
        width: 38px;
        padding: 0 5px;
      }

      .profile__meta,
      .profile__chevron {
        display: none;
      }
    }

    @media (max-width: 520px) {
      .lobby-topbar {
        grid-template-columns: minmax(0, 1fr);
      }

      .brand {
        display: none;
      }

      .player-rail {
        grid-column: 1;
        justify-self: stretch;
        justify-content: flex-start;
        gap: 6px;
        overflow: visible;
        padding-inline: 0;
      }

      .wallet {
        gap: 5px;
      }

      .resource {
        grid-template-columns: auto 32px;
      }

      .resource__balance {
        min-width: 76px;
        padding: 0 6px 0 10px;
      }

      .resource--tags .resource__balance {
        min-width: 64px;
      }

      .resource__value {
        font-size: 14px;
      }

      .resource__add {
        width: 32px;
      }

      .popover {
        position: fixed;
        top: 121px;
        right: 10px;
        width: min(308px, calc(100vw - 20px));
      }

      .popover--profile {
        width: max-content;
      }

      [data-lobby-account="guest"] .popover--profile {
        width: min(268px, calc(100vw - 20px));
      }
    }

    /* Guest convert panel + CTA primitives (profile menu only — not full guest-layer). */
    [data-lobby-account="guest"] .popover--profile {
      width: 268px;
    }

    .gv-convert {
      display: block;
    }

    .gv-convert__lead {
      margin: 0;
      padding: 13px 14px 6px;
      color: #eef0f2;
      font-family: Rajdhani, "Arial Narrow", sans-serif;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.1em;
      line-height: 1.15;
      text-transform: uppercase;
    }

    .gv-convert__benefits {
      margin: 0;
      padding: 2px 10px 10px;
      list-style: none;
    }

    .gv-convert__benefits li {
      display: grid;
      grid-template-columns: 16px minmax(0, 1fr);
      align-items: center;
      column-gap: 9px;
      min-height: 28px;
      padding: 0 4px;
      color: #a4adb7;
      font-size: 11.5px;
      font-weight: 600;
      letter-spacing: 0.01em;
      line-height: 1.2;
    }

    .gv-convert__benefits li + li {
      border-top: 1px solid rgba(255, 255, 255, 0.04);
    }

    .gv-convert__benefits i {
      color: rgba(var(--amber-rgb), 0.72);
      font-size: 11px;
      text-align: center;
      line-height: 1;
    }

    .gv-convert__actions {
      display: grid;
      gap: 7px;
      padding: 0 11px 11px;
    }

    .gv-slab {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      min-height: 42px;
      padding: 0 14px;
      border: 0;
      outline: 0;
      background: linear-gradient(180deg, var(--amber-hot, #ffc252), var(--amber, #ff9d0a) 52%, #d87800);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.44),
        inset 0 -1px 0 rgba(0, 0, 0, 0.22);
      clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
      color: #1c1305;
      cursor: pointer;
      font-family: Rajdhani, "Arial Narrow", sans-serif;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 0.07em;
      line-height: 1;
      text-transform: uppercase;
      transition:
        background 150ms ease,
        transform 170ms var(--ease-out);
    }

    .gv-slab > i { font-size: 12px; opacity: 0.72; }

    .gv-slab:hover {
      background: linear-gradient(180deg, #ffdc86, var(--amber-hot, #ffc252) 52%, var(--amber, #ff9d0a));
      transform: translateY(-1px);
    }

    .gv-slab:active { transform: none; }

    .gv-slab:focus-visible {
      outline: 2px solid var(--amber-hot, #ffc252);
      outline-offset: 2px;
    }

    .gv-ghost {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 34px;
      padding: 0 12px;
      border: 0;
      outline: 0;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02));
      box-shadow: inset 0 0 0 1px rgba(159, 181, 201, 0.26);
      clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
      color: #c8d0d8;
      cursor: pointer;
      font-family: Rajdhani, "Arial Narrow", sans-serif;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      transition: background 150ms ease, box-shadow 150ms ease, color 150ms ease;
    }

    .gv-ghost:hover,
    .gv-ghost:focus-visible {
      outline: 0;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.115), rgba(255, 255, 255, 0.035));
      box-shadow: inset 0 0 0 1px rgba(159, 181, 201, 0.55);
      color: #fff;
    }

    .gv-convert__actions .gv-slab {
      min-height: 38px;
      font-size: 12px;
    }

    .gv-convert__actions .gv-ghost {
      min-height: 30px;
      font-size: 10px;
    }

    .gv-convert__settings {
      border-top: 1px solid rgba(255, 255, 255, 0.055);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.014), transparent);
    }