/* ============================================================================
   SGC — FORGED ATLANTE CONSOLE  ·  additive desktop-only premium layer
   Loads LAST so it overrides earlier rules. CSS-ONLY. Desktop ≥1024px.

   Aesthetic: machined Ancient/Atlantis command console — brushed-obsidian
   panels, engraved top-light bevels, a thin gold→accent inlay seam on the
   current selection, and a deep "pressed-into-the-plate" active state so the
   live tab/nav is unmistakable on every faction.

   SAFETY (verified against real upstream CSS):
   - NO clip-path (would crop the lnav active dot, header badges, focus rings).
   - NO border-WIDTH changes. .lnav-item upstream compensates padding-left for
     its hover/active border-left growth (18→14+4 / 13+5), so we touch only
     border-left-COLOR, background, box-shadow → zero reflow.
   - .bld-tab-main has position:relative;top:2px;border-bottom:none → painted
     with box-shadow only; its ::after underline is upstream → enriched, never
     recreated. .lnav-item.active::after (pulsing dot) and .bld-tab::before
     (left bar) are upstream → enriched only. We use the FREE pseudo on each
     element (::before on lnav-item / bld-tab-main; ::before cap on CTAs).
   - All CTAs are position:relative;overflow:hidden and already own ::after
     (sheen). We add a top-light cap via the FREE ::before (z-index:0, under the
     sheen + content) and lift children to z-index:2. We do NOT override their
     ::after, and we leave the existing :active press (sgc-ui-polish.css) intact.
   - Every accent routes through var(--accent-rgb)/--accent/--accent2 → faction
     safe (Wraith purple, Goa'uld gold, Ancient cyan, Tauri blue all reskin).
     Gold literals only on the reward-identity quest CTA.
   - PERF: brushed texture is ONE static gradient (no blur, no animation). Only
     ONE looping motion total — a transform/opacity seam-glimmer on the single
     visible active primary-tab underline. No continuous box-shadow/filter anim.
   - GUARDS: prefers-reduced-motion + body.lowfx kill motion, drop the texture
     and heavy shadows. No !important on backgrounds (override surface minimal).
   ========================================================================== */

@media (min-width: 1024px) {

  /* ── Scoped tokens (no global override) ─────────────────────────────── */
  :root {
    --fa-light:        var(--tint-8);     /* engraved top light line */
    --fa-light-strong: rgba(255,255,255,0.20);
    --fa-floor:        rgba(0,0,0,0.50);           /* machined bottom shade   */
    --fa-cast:         0 6px 18px -8px rgba(0,0,0,0.60);
    --fa-gold:         255,192,64;                  /* inlay-seam gold (rgb)   */
    /* Brushed-obsidian micro striations — cheap static gradient, no blur. */
    --fa-brush: repeating-linear-gradient(
      116deg,
      rgba(255,255,255,0.020) 0px,
      rgba(255,255,255,0.020) 1px,
      rgba(0,0,0,0.030) 2px,
      rgba(0,0,0,0.030) 3px);
    --fa-ease: var(--ease-out-premium, cubic-bezier(.22,.68,.32,1));
  }

  /* ════════════════════════════════════════════════════════════════════
     1 · LEFT NAV RAIL  —  machined console slats
     (border-left WIDTH untouched — only color/bg/shadow → no reflow)
     ════════════════════════════════════════════════════════════════════ */

  .lnav-item {
    background-image:
      var(--fa-brush),
      linear-gradient(180deg, rgba(255,255,255,0.022) 0%, rgba(255,255,255,0) 46%),
      linear-gradient(90deg, rgba(var(--accent-rgb),0.04) 0%, rgba(var(--accent-rgb),0) 60%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.035),
      inset 0 -1px 0 rgba(var(--accent-rgb),0.06);
    transition:
      background-color .2s var(--fa-ease),
      box-shadow .22s var(--fa-ease),
      border-color .2s var(--fa-ease),
      transform .18s var(--fa-ease);
  }

  /* Engraved accent filament along the left gutter (FREE ::before;
     upstream ::after = pulsing dot). Dim at rest, ignites on hover/active. */
  .lnav-item::before {
    content: '';
    position: absolute;
    left: 0; top: 7px; bottom: 7px;
    width: 2px;
    pointer-events: none;
    border-radius: 0 2px 2px 0;
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(var(--accent-rgb),0.0) 10%,
      rgba(var(--accent-rgb),0.55) 50%,
      rgba(var(--accent-rgb),0.0) 90%,
      transparent 100%);
    opacity: 0;
    transition: opacity .2s var(--fa-ease);
    z-index: 0;
  }

  .lnav-item:hover {
    background-image:
      var(--fa-brush),
      linear-gradient(180deg, var(--tint-4) 0%, rgba(255,255,255,0) 52%),
      linear-gradient(90deg, rgba(var(--accent-rgb),0.18) 0%, rgba(var(--accent-rgb),0.04) 70%);
    box-shadow:
      inset 0 1px 0 var(--fa-light-strong),
      inset 0 -1px 0 var(--fa-floor),
      inset 12px 0 20px -14px rgba(var(--accent-rgb),0.55),
      0 0 16px -4px rgba(var(--accent-rgb),0.20);
  }
  .lnav-item:hover::before { opacity: 0.7; }

  /* ACTIVE — pressed INTO the plate: recessed top shadow, milled accent recess,
     gold→accent inlay filament. Unmistakable on every faction. */
  .lnav-item.active {
    background-image:
      var(--fa-brush),
      linear-gradient(90deg, rgba(var(--accent-rgb),0.34) 0%, rgba(var(--accent-rgb),0.10) 58%, rgba(var(--accent-rgb),0.03) 100%),
      linear-gradient(180deg, var(--tint-2) 0%, rgba(0,0,0,0.22) 100%);
    box-shadow:
      inset 0 2px 5px rgba(0,0,0,0.55),
      inset 0 -1px 0 rgba(var(--accent-rgb),0.35),
      inset 9px 0 26px -6px rgba(var(--accent-rgb),0.34),
      0 0 18px -2px rgba(var(--accent-rgb),0.26);
  }
  .lnav-item.active::before {
    opacity: 1;
    width: 3px;
    background: linear-gradient(180deg,
      rgba(var(--fa-gold),0.0) 0%,
      rgba(var(--fa-gold),0.85) 16%,
      var(--accent) 50%,
      rgba(var(--fa-gold),0.85) 84%,
      rgba(var(--fa-gold),0.0) 100%);
    box-shadow:
      0 0 9px rgba(var(--accent-rgb),0.75),
      0 0 18px -2px rgba(var(--accent-rgb),0.40);
  }
  .lnav-item.active .lnav-lbl {
    text-shadow: 0 0 10px rgba(var(--accent-rgb),0.45), 0 1px 0 rgba(0,0,0,0.45);
  }
  /* Enrich the existing pulsing dot into a milled rivet (animation untouched) */
  .lnav-item.active::after {
    box-shadow:
      0 0 10px var(--accent),
      0 0 18px -2px rgba(var(--accent-rgb),0.55),
      inset 0 0 2px var(--shade-3);
  }

  /* Icon tile — machined keycap: raised at rest/hover, depressed when active */
  .lnav-ico {
    background-image:
      linear-gradient(160deg, var(--tint-6) 0%, rgba(255,255,255,0.015) 42%, rgba(0,0,0,0.30) 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.14),
      inset 0 -2px 4px rgba(0,0,0,0.45),
      0 2px 4px -2px rgba(0,0,0,0.45);
    transition:
      background-color .2s var(--fa-ease),
      box-shadow .22s var(--fa-ease),
      border-color .2s var(--fa-ease);
  }
  .lnav-item:hover .lnav-ico {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.20),
      inset 0 -2px 5px rgba(0,0,0,0.45),
      0 0 12px -3px rgba(var(--accent-rgb),0.30);
  }
  .lnav-item.active .lnav-ico {
    border-color: rgba(var(--accent-rgb),0.75);
    /* depressed: inner shadow at TOP, accent light-edge at BOTTOM */
    box-shadow:
      inset 0 2px 6px rgba(0,0,0,0.55),
      inset 0 -1px 0 rgba(var(--accent-rgb),0.50),
      0 0 14px -2px rgba(var(--accent-rgb),0.38);
  }
  .lnav-item.active .lnav-ico svg {
    filter: drop-shadow(0 0 5px rgba(var(--accent-rgb),0.55));
  }

  /* Segment headers — engraved junction plates (no border-width touched) */
  .lnav-header {
    box-shadow: inset 0 1px 0 var(--tint-4), inset 0 -1px 0 rgba(0,0,0,0.28);
    text-shadow: 0 1px 1px rgba(0,0,0,0.55);
    transition:
      background .2s var(--fa-ease),
      color .18s var(--fa-ease),
      box-shadow .2s var(--fa-ease),
      border-color .18s var(--fa-ease);
  }
  .lnav-header:hover {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.09),
      inset 0 -1px 0 rgba(0,0,0,0.28),
      inset 10px 0 16px -14px rgba(var(--accent-rgb),0.55);
    text-shadow: 0 0 9px rgba(var(--accent-rgb),0.30), 0 1px 1px rgba(0,0,0,0.55);
  }
  .lnav-segment:not(.lnav-collapsed) > .lnav-header {
    box-shadow:
      inset 0 1px 0 var(--tint-6),
      inset 0 -1px 0 rgba(var(--accent-rgb),0.22),
      0 2px 10px -7px rgba(var(--accent-rgb),0.30);
  }

  /* ════════════════════════════════════════════════════════════════════
     2 · PRIMARY TAB STRIP  —  .bld-tab-main  (machined header keys)
     ════════════════════════════════════════════════════════════════════ */

  .bld-tab-main {
    background-image:
      var(--fa-brush),
      linear-gradient(180deg, var(--tint-4) 0%, rgba(255,255,255,0) 34%),
      linear-gradient(180deg, rgba(20,36,68,0.84), rgba(10,20,42,0.92));
    box-shadow:
      inset 0 1px 0 var(--fa-light),
      inset 0 -8px 14px -8px rgba(0,0,0,0.45),
      0 -2px 10px -8px var(--shade-5);
    transition:
      background .22s var(--fa-ease),
      box-shadow .24s var(--fa-ease),
      border-color .2s var(--fa-ease),
      color .18s var(--fa-ease),
      transform .16s var(--fa-ease);
  }
  /* Top specular cap (FREE ::before; upstream ::after = underline) */
  .bld-tab-main::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 40%);
    opacity: 0.6;
    transition: opacity .2s var(--fa-ease);
    z-index: 0;
  }
  .bld-tab-main:hover {
    background-image:
      var(--fa-brush),
      linear-gradient(180deg, var(--tint-6) 0%, rgba(255,255,255,0) 40%),
      linear-gradient(180deg, rgba(30,56,108,0.9), rgba(15,30,60,0.92));
    box-shadow:
      inset 0 1px 0 var(--fa-light-strong),
      inset 0 -8px 14px -8px rgba(0,0,0,0.40),
      0 -3px 14px -8px rgba(var(--accent-rgb),0.28);
  }
  .bld-tab-main:hover::before { opacity: 1; }

  .bld-tab-main.active {
    background-image:
      var(--fa-brush),
      linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 38%),
      linear-gradient(180deg, rgba(var(--accent-rgb),0.24), rgba(var(--accent-rgb),0.08));
    box-shadow:
      inset 0 1px 0 var(--fa-light-strong),
      inset 0 0 0 1px rgba(var(--accent-rgb),0.18),
      inset 0 -10px 18px -10px rgba(var(--accent-rgb),0.22),
      0 -4px 18px -6px rgba(var(--accent-rgb),0.28);
  }
  /* Upgrade the upstream active underline into a gold→accent inlay seam +
     the ONE looping seam-glimmer (transform/opacity only). */
  .bld-tab-main.active::after {
    left: 10%; right: 10%;
    height: 2px;
    background: linear-gradient(90deg,
      rgba(var(--fa-gold),0.0) 0%,
      rgba(var(--fa-gold),0.75) 22%,
      var(--accent) 50%,
      rgba(var(--fa-gold),0.75) 78%,
      rgba(var(--fa-gold),0.0) 100%);
    box-shadow: 0 0 12px rgba(var(--accent-rgb),0.50), 0 0 4px rgba(var(--fa-gold),0.40);
    overflow: hidden;
  }
  .bld-tab-main.active::after { will-change: background-position; }

  /* ════════════════════════════════════════════════════════════════════
     3 · SECONDARY TAB STRIP  —  .bld-tab  (upstream ::before = left bar)
     ════════════════════════════════════════════════════════════════════ */

  .bld-tab {
    background-image:
      var(--fa-brush),
      linear-gradient(160deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0) 50%),
      linear-gradient(135deg, rgba(24,42,78,0.72), rgba(16,28,56,0.84));
    box-shadow:
      inset 0 1px 0 var(--tint-4),
      inset 0 -2px 6px -2px rgba(0,0,0,0.35),
      0 2px 6px -4px rgba(0,0,0,0.45);
    transition:
      background .22s var(--fa-ease),
      box-shadow .22s var(--fa-ease),
      border-color .2s var(--fa-ease),
      color .18s var(--fa-ease),
      transform .16s var(--fa-ease);
  }
  .bld-tab:hover {
    background-image:
      var(--fa-brush),
      linear-gradient(160deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 55%),
      linear-gradient(135deg, rgba(30,54,98,0.85), rgba(20,36,70,0.9));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.09),
      inset 0 -2px 6px -2px rgba(0,0,0,0.35),
      0 0 12px -4px rgba(var(--accent-rgb),0.20);
    transform: translateY(-1px);
  }
  /* ACTIVE — pressed-in chip: inset top shadow + accent under-edge */
  .bld-tab.active {
    background-image:
      var(--fa-brush),
      linear-gradient(160deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 50%),
      linear-gradient(135deg, rgba(var(--accent-rgb),0.22), rgba(var(--accent-rgb),0.07));
    box-shadow:
      inset 0 2px 6px rgba(0,0,0,0.50),
      inset 0 -2px 0 rgba(var(--accent-rgb),0.50),
      inset 0 0 0 1px rgba(var(--accent-rgb),0.16),
      0 0 16px -3px rgba(var(--accent-rgb),0.22);
  }
  /* Enrich the upstream left ::before bar into a milled gold-accent rivet */
  .bld-tab.active::before {
    background: linear-gradient(180deg, var(--gold2, #ffe890), var(--accent), rgba(var(--fa-gold),0.85));
    box-shadow: 0 0 9px rgba(var(--accent-rgb),0.55), 0 0 3px rgba(var(--fa-gold),0.50);
  }

  /* ════════════════════════════════════════════════════════════════════
     4 · OTHER SECTION TAB STRIPS  —  one cohesive machined treatment
     .mkt-tab .rep-tab .msg-tab .cdx-tab .cmd-tab .rnk-tab-btn
     .quest-tab .chat-tab-pill .city-tab .sim-mode-tab
     (these carry varied upstream backgrounds; we add depth via box-shadow +
      a light brushed wash, and route the active edge through the accent)
     ════════════════════════════════════════════════════════════════════ */

  .mkt-tab, .rep-tab, .msg-tab, .cdx-tab, .cmd-tab, .rnk-tab-btn,
  .quest-tab, .chat-tab-pill, .city-tab, .sim-mode-tab {
    background-image:
      var(--fa-brush),
      linear-gradient(160deg, var(--tint-3) 0%, rgba(255,255,255,0) 52%);
    box-shadow:
      inset 0 1px 0 var(--tint-4),
      inset 0 -2px 6px -3px rgba(0,0,0,0.32),
      0 2px 6px -4px rgba(0,0,0,0.40);
    transition:
      background .2s var(--fa-ease),
      box-shadow .22s var(--fa-ease),
      border-color .18s var(--fa-ease),
      color .18s var(--fa-ease),
      transform .16s var(--fa-ease);
  }
  .mkt-tab:hover, .rep-tab:hover, .msg-tab:hover, .cdx-tab:hover, .cmd-tab:hover,
  .rnk-tab-btn:hover, .quest-tab:hover, .chat-tab-pill:hover, .city-tab:hover,
  .sim-mode-tab:hover {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.09),
      inset 0 -2px 6px -3px rgba(0,0,0,0.32),
      0 0 12px -4px rgba(var(--accent-rgb),0.20);
    transform: translateY(-1px);
  }
  /* ACTIVE — pressed-in machined chip (accent under-edge latches it down) */
  .mkt-tab.active, .rep-tab.active, .msg-tab.active, .cdx-tab.active,
  .cmd-tab.active, .rnk-tab-btn.active, .quest-tab.active, .chat-tab-pill.active,
  .city-tab.active, .sim-mode-tab.active {
    box-shadow:
      inset 0 2px 6px rgba(0,0,0,0.48),
      inset 0 -2px 0 rgba(var(--accent-rgb),0.48),
      inset 0 0 0 1px rgba(var(--accent-rgb),0.16),
      0 0 16px -3px rgba(var(--accent-rgb),0.22);
  }
  /* Reinforce the active fill where upstream provides a flat/low base, so the
     selection is unmistakable. Routed through accent (faction safe). */
  .mkt-tab.active, .msg-tab.active, .cmd-tab.active, .rnk-tab-btn.active,
  .city-tab.active, .sim-mode-tab.active, .rep-tab.active {
    background-image:
      var(--fa-brush),
      linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 42%),
      linear-gradient(180deg, rgba(var(--accent-rgb),0.22), rgba(var(--accent-rgb),0.07));
  }
  /* Quest/Codex tabs keep their own identity; add a subtle active glow only */
  .quest-tab.active, .cdx-tab.active {
    text-shadow: 0 0 12px rgba(var(--accent-rgb),0.45), 0 1px 0 var(--shade-3);
  }

  /* ════════════════════════════════════════════════════════════════════
     5 · PRIMARY ACTION BUTTONS  —  deep machined tactile slabs
     All own ::after (sheen) + overflow:hidden + position:relative upstream.
     We add a top light-catch CAP via the FREE ::before (z-index:0, under the
     sheen and content) + layered box-shadow depth. Children lifted to z:2.
     The :active press is owned by sgc-ui-polish.css — we only enrich base/hover.
     ════════════════════════════════════════════════════════════════════ */

  .bld-upgrade-btn, .tc-btn, .uc-train, .sc-build,
  .city-btn, .mkt-submit-btn {
    background-image:
      linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 30%),
      linear-gradient(180deg, rgba(var(--accent-rgb),0.18), rgba(var(--accent-rgb),0.05));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.22),
      inset 0 -2px 6px -2px rgba(0,0,0,0.45),
      inset 0 0 0 1px rgba(var(--accent-rgb),0.10),
      0 3px 10px -6px rgba(0,0,0,0.55);
    transition:
      background .2s var(--fa-ease),
      box-shadow .22s var(--fa-ease),
      border-color .2s var(--fa-ease),
      transform .16s var(--ease-spring, var(--fa-ease)),
      filter .18s var(--fa-ease);
  }
  /* Top glass light-catch cap — FREE ::before, sits under the existing sheen */
  .bld-upgrade-btn::before, .tc-btn::before, .uc-train::before, .sc-build::before,
  .city-btn::before, .mkt-submit-btn::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 46%;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 100%);
    opacity: 0.9;
    z-index: 0;
    transition: opacity .18s var(--fa-ease);
  }
  /* Keep label/content above the light-catch cap */
  .bld-upgrade-btn > *, .tc-btn > *, .uc-train > *, .sc-build > *,
  .city-btn > *, .mkt-submit-btn > * {
    position: relative;
    z-index: 2;
  }

  .bld-upgrade-btn:hover:not(:disabled),
  .tc-btn:hover:not(:disabled),
  .uc-train:hover:not(:disabled),
  .sc-build:hover:not(:disabled),
  .city-btn:hover:not(:disabled),
  .mkt-submit-btn:hover:not(:disabled) {
    background-image:
      linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 34%),
      linear-gradient(180deg, rgba(var(--accent-rgb),0.30), rgba(var(--accent-rgb),0.10));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.30),
      inset 0 -2px 7px -2px rgba(0,0,0,0.42),
      inset 0 0 0 1px rgba(var(--accent-rgb),0.22),
      0 8px 22px -8px rgba(0,0,0,0.55),
      0 0 20px -4px rgba(var(--accent-rgb),0.36);
    filter: brightness(1.05);
  }
  .bld-upgrade-btn:hover:not(:disabled)::before,
  .tc-btn:hover:not(:disabled)::before,
  .uc-train:hover:not(:disabled)::before,
  .sc-build:hover:not(:disabled)::before,
  .city-btn:hover:not(:disabled)::before,
  .mkt-submit-btn:hover:not(:disabled)::before { opacity: 1; }

  /* Disabled: strip the machined energy so "off" is unmistakable */
  .bld-upgrade-btn:disabled::before, .tc-btn:disabled::before,
  .uc-train:disabled::before, .sc-build:disabled::before,
  .city-btn:disabled::before, .mkt-submit-btn:disabled::before { opacity: 0; }
  .bld-upgrade-btn:disabled, .tc-btn:disabled, .uc-train:disabled,
  .sc-build:disabled, .city-btn:disabled, .mkt-submit-btn:disabled {
    background-image: none;
    box-shadow: inset 0 1px 0 var(--tint-4);
  }

  /* GOLD reward CTA — keeps gold identity, gains the machined cap + depth */
  .quest-claim-btn:not(:disabled) {
    background-image:
      linear-gradient(180deg, var(--tint-8) 0%, rgba(255,255,255,0) 32%),
      linear-gradient(180deg, rgba(var(--fa-gold),0.22), rgba(var(--fa-gold),0.07));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.26),
      inset 0 -2px 6px -2px rgba(0,0,0,0.42),
      inset 0 0 0 1px rgba(var(--fa-gold),0.20),
      0 3px 10px -6px var(--shade-4);
    transition:
      background .2s var(--fa-ease),
      box-shadow .22s var(--fa-ease),
      transform .16s var(--ease-spring, var(--fa-ease)),
      filter .18s var(--fa-ease);
  }
  .quest-claim-btn:not(:disabled):hover {
    background-image:
      linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 34%),
      linear-gradient(180deg, rgba(var(--fa-gold),0.34), rgba(var(--fa-gold),0.12));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.34),
      inset 0 -2px 7px -2px rgba(0,0,0,0.40),
      inset 0 0 0 1px rgba(var(--fa-gold),0.40),
      0 8px 20px -8px var(--shade-4),
      0 0 18px -4px var(--goldglow, rgba(255,192,64,0.6));
    border-color: var(--gold2, #ffe890);
    filter: brightness(1.05);
  }

  /* ════════════════════════════════════════════════════════════════════
     6 · EXTENDED COVERAGE — machined treatment for the remaining strips
     Gate top tabs (.gmt, accent; .pvp-tab red preserved) + mission filter
     (.gmf) + right-panel (.gprt-tab); Apotheose (.ap-tab) + Battle (.brd-tab),
     accent; Ascension (.asc-tab) gold-preserving; Alliance pills (clip-path
     octagonal + cyan/per-tab identity → inset-only light-catch, glow re-
     included, NO faction recolor, variant glows untouched).
     ════════════════════════════════════════════════════════════════════ */

  /* — Gate top tabs + right-panel tabs (faction-accent themed) — */
  .gmt, .gprt-tab { transition-timing-function: var(--fa-ease); }
  .gmt:hover:not(.active), .gprt-tab:hover:not(.active) {
    box-shadow: inset 0 1px 0 var(--tint-6), 0 0 12px -4px rgba(var(--accent-rgb),0.28);
    transform: translateY(-1px);
  }
  .gmt.active, .gprt-tab.active {
    background-image:
      var(--fa-brush),
      linear-gradient(180deg, var(--tint-6) 0%, rgba(255,255,255,0) 42%),
      linear-gradient(180deg, rgba(var(--accent-rgb),0.20), rgba(var(--accent-rgb),0.06));
    box-shadow:
      inset 0 2px 6px rgba(0,0,0,0.45),
      inset 0 -2px 0 rgba(var(--accent-rgb),0.50),
      inset 0 0 0 1px rgba(var(--accent-rgb),0.16),
      0 0 16px -3px rgba(var(--accent-rgb),0.24);
  }
  /* enrich the active underline into a gold→accent inlay seam (skip PvP red) */
  .gmt.active:not(.pvp-tab)::after, .gprt-tab.active::after {
    background: linear-gradient(90deg,
      rgba(var(--fa-gold),0.0) 0%, rgba(var(--fa-gold),0.70) 22%,
      var(--accent) 50%, rgba(var(--fa-gold),0.70) 78%, rgba(var(--fa-gold),0.0) 100%);
    box-shadow: 0 0 10px rgba(var(--accent-rgb),0.5);
  }
  /* preserve the PvP/danger gate tab — pressed-in but RED under-edge */
  .gmt.pvp-tab.active {
    background-image:
      var(--fa-brush),
      linear-gradient(180deg, var(--tint-5) 0%, rgba(255,255,255,0) 42%),
      linear-gradient(180deg, rgba(255,70,70,0.20), rgba(255,70,70,0.06));
    box-shadow:
      inset 0 2px 6px rgba(0,0,0,0.45),
      inset 0 -2px 0 rgba(255,85,85,0.55),
      inset 0 0 0 1px rgba(255,85,85,0.18),
      0 0 16px -3px rgba(255,70,70,0.26);
  }

  /* — Gate mission filter pills (.gmf) — light pressed-in chip — */
  .gmf { transition-timing-function: var(--fa-ease); }
  .gmf.active {
    background-image:
      var(--fa-brush),
      linear-gradient(180deg, rgba(var(--accent-rgb),0.16), rgba(var(--accent-rgb),0.05));
    box-shadow:
      inset 0 1px 3px rgba(0,0,0,0.35),
      inset 0 -1px 0 rgba(var(--accent-rgb),0.45);
  }

  /* — Apotheose + Battle tabs (faction-accent) — pressed-in machined chip — */
  .ap-tab, .brd-tab { transition-timing-function: var(--fa-ease); }
  .ap-tab:hover:not(.active), .brd-tab:hover:not(.active) { transform: translateY(-1px); }
  .ap-tab.active, .brd-tab.active {
    background-image:
      var(--fa-brush),
      linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 42%),
      linear-gradient(180deg, rgba(var(--accent-rgb),0.20), rgba(var(--accent-rgb),0.06));
    box-shadow:
      inset 0 2px 6px rgba(0,0,0,0.42),
      inset 0 -2px 0 rgba(var(--accent-rgb),0.45),
      inset 0 0 0 1px rgba(var(--accent-rgb),0.15);
  }

  /* — Ascension tabs (.asc-tab) — gold identity preserved, add depth only — */
  .asc-tab { transition-timing-function: var(--fa-ease); }
  .asc-tab.active {
    background-image:
      var(--fa-brush),
      linear-gradient(180deg, var(--tint-5) 0%, rgba(255,255,255,0) 42%),
      linear-gradient(180deg, rgba(255,192,64,0.16), rgba(255,192,64,0.05));
    box-shadow:
      inset 0 2px 6px rgba(0,0,0,0.42),
      inset 0 -2px 0 var(--goldglow, rgba(255,192,64,0.55));
  }

  /* — Alliance pills intentionally LEFT ALONE — the .al-layout section is
       already a premium clip-path octagonal cyan/gold holographic system with
       per-tab themed glows (wars-red / diplo-green / rankings-gold) locked via
       attribute-specificity. Homogenizing it would break those themed glows
       and reduce quality. It is the reference the other strips were brought up
       to, not a gap. — */

  /* guards for the extended set */
  @media (prefers-reduced-motion: reduce) {
    .gmt, .gmf, .gprt-tab, .ap-tab, .brd-tab, .asc-tab { transition: none; }
    .gmt:hover:not(.active), .gprt-tab:hover:not(.active),
    .ap-tab:hover:not(.active), .brd-tab:hover:not(.active) { transform: none; }
  }
  body.lowfx .gmt.active, body.lowfx .gprt-tab.active, body.lowfx .gmf.active,
  body.lowfx .ap-tab.active, body.lowfx .brd-tab.active {
    background-image: linear-gradient(180deg, rgba(var(--accent-rgb),0.20), rgba(var(--accent-rgb),0.06));
  }

  /* ════════════════════════════════════════════════════════════════════
     ONE looping motion — slow gold seam-glimmer on the single visible
     active primary-tab underline. transform/opacity-grade (background-position)
     only; no box-shadow/filter animation. GPU-cheap.
     ════════════════════════════════════════════════════════════════════ */
  @keyframes faSeamGlimmer {
    0%   { background-position: -140% 0; }
    100% { background-position:  240% 0; }
  }
  .bld-tab-main.active::after {
    background-size: 220% 100%;
    background-repeat: no-repeat;
    animation: faSeamGlimmer 4.5s var(--fa-ease) infinite;
  }

  /* ════════════════════════════════════════════════════════════════════
     ACCESSIBILITY  ·  prefers-reduced-motion
     ════════════════════════════════════════════════════════════════════ */
  @media (prefers-reduced-motion: reduce) {
    .bld-tab-main.active::after { animation: none; background-position: 50% 0; }
    .lnav-item, .lnav-ico, .lnav-header,
    .bld-tab-main, .bld-tab-main::before, .bld-tab,
    .mkt-tab, .rep-tab, .msg-tab, .cdx-tab, .cmd-tab, .rnk-tab-btn,
    .quest-tab, .chat-tab-pill, .city-tab, .sim-mode-tab,
    .bld-upgrade-btn, .tc-btn, .uc-train, .sc-build,
    .city-btn, .mkt-submit-btn, .gbtn, .quest-claim-btn,
    .lnav-item::before, .bld-upgrade-btn::before, .tc-btn::before,
    .uc-train::before, .sc-build::before, .city-btn::before,
    .mkt-submit-btn::before, .gbtn::before {
      transition: none;
    }
    .bld-tab:hover, .lnav-item:hover,
    .mkt-tab:hover, .rep-tab:hover, .msg-tab:hover, .cdx-tab:hover,
    .cmd-tab:hover, .rnk-tab-btn:hover, .quest-tab:hover, .chat-tab-pill:hover,
    .city-tab:hover, .sim-mode-tab:hover,
    .bld-upgrade-btn:hover:not(:disabled),
    .uc-train:hover:not(:disabled),
    .sc-build:hover:not(:disabled),
    .city-btn:hover:not(:disabled),
    .mkt-submit-btn:hover:not(:disabled),
    .gbtn:hover:not(:disabled) { transform: none; }
  }

  /* ════════════════════════════════════════════════════════════════════
     PERFORMANCE  ·  body.lowfx — drop the brushed texture, kill the loop,
     flatten heavy shadows. Stays on-theme, just cheaper for integrated GPUs.
     ════════════════════════════════════════════════════════════════════ */
  body.lowfx .bld-tab-main.active::after { animation: none; background-position: 50% 0; }

  body.lowfx .lnav-item,
  body.lowfx .lnav-item:hover,
  body.lowfx .lnav-item.active,
  body.lowfx .bld-tab-main,
  body.lowfx .bld-tab-main:hover,
  body.lowfx .bld-tab-main.active,
  body.lowfx .bld-tab,
  body.lowfx .bld-tab:hover,
  body.lowfx .bld-tab.active,
  body.lowfx .mkt-tab, body.lowfx .rep-tab, body.lowfx .msg-tab,
  body.lowfx .cdx-tab, body.lowfx .cmd-tab, body.lowfx .rnk-tab-btn,
  body.lowfx .quest-tab, body.lowfx .chat-tab-pill, body.lowfx .city-tab,
  body.lowfx .sim-mode-tab {
    /* drop the repeating brushed-metal striations (first bg layer) */
    background-image: none;
  }
  /* Re-apply just the flat accent fill for active states under lowfx so the
     selection stays unmistakable without the texture layer. */
  body.lowfx .lnav-item.active {
    background-image: linear-gradient(90deg, rgba(var(--accent-rgb),0.30), rgba(var(--accent-rgb),0.07));
  }
  body.lowfx .bld-tab-main.active,
  body.lowfx .bld-tab.active,
  body.lowfx .mkt-tab.active, body.lowfx .rep-tab.active, body.lowfx .msg-tab.active,
  body.lowfx .cmd-tab.active, body.lowfx .rnk-tab-btn.active,
  body.lowfx .city-tab.active, body.lowfx .sim-mode-tab.active {
    background-image: linear-gradient(180deg, rgba(var(--accent-rgb),0.22), rgba(var(--accent-rgb),0.07));
  }
  /* lowfx: lighten shadow stacks + drop hover lift/brightness to cut paint */
  body.lowfx .lnav-item.active {
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),0.20), 0 0 10px -3px rgba(var(--accent-rgb),0.18);
  }
  body.lowfx .bld-tab:hover, body.lowfx .lnav-item:hover,
  body.lowfx .mkt-tab:hover, body.lowfx .rep-tab:hover, body.lowfx .msg-tab:hover,
  body.lowfx .cdx-tab:hover, body.lowfx .cmd-tab:hover, body.lowfx .rnk-tab-btn:hover,
  body.lowfx .quest-tab:hover, body.lowfx .chat-tab-pill:hover,
  body.lowfx .city-tab:hover, body.lowfx .sim-mode-tab:hover {
    transform: none;
  }
  body.lowfx .bld-upgrade-btn:hover:not(:disabled),
  body.lowfx .tc-btn:hover:not(:disabled),
  body.lowfx .uc-train:hover:not(:disabled),
  body.lowfx .sc-build:hover:not(:disabled),
  body.lowfx .city-btn:hover:not(:disabled),
  body.lowfx .mkt-submit-btn:hover:not(:disabled),
  body.lowfx .gbtn:hover:not(:disabled),
  body.lowfx .quest-claim-btn:not(:disabled):hover {
    filter: none;
  }

} /* end @media (min-width: 1024px) */