/* ================================================================
   NO PERRY — pve-ladder-50c.css
   PvE competitive ladder: cinematic visual parity with PvP (50C).

   Scope contract: every rule below is gated on a PvE hook
   (`[data-ladder="pve"]`, `[data-ladder-panel="pve"]`, `--pve` modifiers)
   so the human-approved PvP ladder is untouched by this layer.

   Geometry is NOT redefined here. The podium stage, card frame, medallion
   and Top 15 grid stay owned by war-podium-42a.css /
   war-podium-vector-frame-42f.css / war-ladder.css and are shared by both
   ladders. This file only carries the PvE identity: moss/emerald ambience,
   cold forged steel, rune accents and metric colour.

   The Gold / Silver / Bronze hierarchy is deliberately NOT recolored —
   medal corners, finials and emblems remain the shared metal art.
   ================================================================ */

/* ----------------------------------------------------------------
   1. PvE podium ambience
   Only the inner rail, the ambient glow and the body wash shift green;
   the medal rail core keeps its gold/silver/bronze reading.
   ---------------------------------------------------------------- */

#war-ladder .war-podium[data-ladder="pve"],
.np-war-ladder .war-podium[data-ladder="pve"] {
  --pve-moss-deep: #16311f;
  --pve-emerald: #4f9a72;
  --pve-emerald-soft: rgba(79, 154, 114, 0.32);
  --pve-crystal: rgba(158, 214, 184, 0.55);
  --pve-steel: #6f7d84;
  --wpf-rail-inner: rgba(96, 158, 120, 0.5);
}

#war-ladder .war-podium[data-ladder="pve"] .war-podium__rail--left,
#war-ladder .war-podium[data-ladder="pve"] .war-podium__rail--right,
.np-war-ladder .war-podium[data-ladder="pve"] .war-podium__rail--left,
.np-war-ladder .war-podium[data-ladder="pve"] .war-podium__rail--right {
  box-shadow: inset 0 0 0 1px rgba(70, 130, 100, 0.4);
}

/* Body wash: deep moss instead of the neutral PvP recess. */
#war-ladder .war-podium[data-ladder="pve"] .war-podium__body,
.np-war-ladder .war-podium[data-ladder="pve"] .war-podium__body {
  background: radial-gradient(
    ellipse 88% 72% at 50% 42%,
    rgba(11, 30, 21, 0.42) 0%,
    rgba(8, 20, 15, 0.16) 55%,
    rgba(6, 5, 10, 0) 100%
  );
}

/* ----------------------------------------------------------------
   2. Ambient aura (decorative only — carries no data)
   ---------------------------------------------------------------- */

#war-ladder .war-podium__pve-aura,
.np-war-ladder .war-podium__pve-aura {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Emerald / crystal halo sitting behind the AvatarRing. */
#war-ladder .war-podium__pve-halo,
.np-war-ladder .war-podium__pve-halo {
  position: absolute;
  top: 8%;
  left: 50%;
  width: 74%;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 45%,
    rgba(120, 200, 155, 0.2) 0%,
    rgba(60, 130, 98, 0.12) 42%,
    rgba(20, 46, 34, 0) 72%
  );
  filter: blur(2px);
}

/* Faint rune veil + film grain across the card interior. */
#war-ladder .war-podium__pve-runes,
.np-war-ladder .war-podium__pve-runes {
  position: absolute;
  inset: 12% 10% 8%;
  opacity: 0.3;
  background-image:
    repeating-linear-gradient(
      115deg,
      rgba(140, 200, 168, 0.07) 0px,
      rgba(140, 200, 168, 0.07) 1px,
      transparent 1px,
      transparent 9px
    ),
    radial-gradient(circle at 18% 78%, rgba(120, 190, 150, 0.1) 0%, transparent 34%),
    radial-gradient(circle at 82% 22%, rgba(120, 190, 150, 0.08) 0%, transparent 30%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 20%, transparent 88%);
}

/* The Gold #1 card gets a stronger halo, matching the PvP champion's weight. */
#war-ladder .war-podium--gold[data-ladder="pve"] .war-podium__pve-halo,
.np-war-ladder .war-podium--gold[data-ladder="pve"] .war-podium__pve-halo {
  width: 84%;
  background: radial-gradient(
    circle at 50% 45%,
    rgba(150, 225, 180, 0.28) 0%,
    rgba(70, 150, 112, 0.16) 40%,
    rgba(20, 46, 34, 0) 72%
  );
}

#war-ladder .war-podium--gold[data-ladder="pve"] .war-podium__pve-runes,
.np-war-ladder .war-podium--gold[data-ladder="pve"] .war-podium__pve-runes {
  opacity: 0.42;
}

/* Vacant PvE cards keep the structure but drop to a dormant ambience. */
#war-ladder .war-podium--vacant[data-ladder="pve"] .war-podium__pve-aura,
.np-war-ladder .war-podium--vacant[data-ladder="pve"] .war-podium__pve-aura {
  opacity: 0.4;
}

/* ----------------------------------------------------------------
   3. PvE metric accents
   ---------------------------------------------------------------- */

#war-ladder .war-podium[data-ladder="pve"] .war-podium__eyebrow,
.np-war-ladder .war-podium[data-ladder="pve"] .war-podium__eyebrow {
  color: rgba(158, 214, 184, 0.82);
}

#war-ladder .war-podium[data-ladder="pve"] .np-war-stat--fame strong,
.np-war-ladder .war-podium[data-ladder="pve"] .np-war-stat--fame strong {
  color: #a9e3c2;
  text-shadow: 0 0 10px rgba(70, 150, 110, 0.35);
}

#war-ladder .war-podium[data-ladder="pve"] .np-war-stat--fame-total strong,
.np-war-ladder .war-podium[data-ladder="pve"] .np-war-stat--fame-total strong {
  color: #c3ced4;
}

#war-ladder .war-podium[data-ladder="pve"] .np-war-stat span,
.np-war-ladder .war-podium[data-ladder="pve"] .np-war-stat span {
  color: rgba(150, 176, 162, 0.82);
}

/* ----------------------------------------------------------------
   4. PvE leader-share rail
   Fills the vertical slot the PvP card gives its XP rail. The value is a
   ratio between two already-displayed weekly PvE figures.
   ---------------------------------------------------------------- */

#war-ladder .np-war-pve-rail,
.np-war-ladder .np-war-pve-rail {
  width: 100%;
  margin: 0.18rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
}

#war-ladder .np-war-pve-rail__track,
.np-war-ladder .np-war-pve-rail__track {
  position: relative;
  width: 100%;
  height: 7px;
  border: 1px solid rgba(70, 130, 100, 0.4);
  background: linear-gradient(180deg, rgba(8, 18, 13, 0.9), rgba(14, 28, 21, 0.9));
  overflow: hidden;
}

#war-ladder .np-war-pve-rail__fill,
.np-war-ladder .np-war-pve-rail__fill {
  height: 100%;
  background: linear-gradient(90deg, #2f6b52 0%, #4f9a72 62%, #8fd0ac 100%);
  box-shadow: 0 0 8px rgba(79, 154, 114, 0.45);
}

#war-ladder .np-war-pve-rail__label,
.np-war-ladder .np-war-pve-rail__label {
  font-family: var(--font-mono, monospace);
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(150, 190, 170, 0.72);
}

#war-ladder .np-war-pve-rail--compact,
.np-war-ladder .np-war-pve-rail--compact {
  margin-top: 0.3rem;
  max-width: 15rem;
}

#war-ladder .np-war-pve-rail--compact .np-war-pve-rail__track,
.np-war-ladder .np-war-pve-rail--compact .np-war-pve-rail__track {
  height: 5px;
}

/* ----------------------------------------------------------------
   5. PvE Top 15 rows
   Same grid as PvP; every column carries PvE-owned content.
   ---------------------------------------------------------------- */

#war-ladder .np-war-row--pve,
.np-war-ladder .np-war-row--pve {
  border-color: rgba(70, 130, 100, 0.2);
  background:
    linear-gradient(90deg, rgba(24, 54, 39, 0.34) 0%, rgba(10, 10, 16, 0.72) 32%),
    rgba(10, 10, 16, 0.72);
}

#war-ladder .np-war-row--pve:hover,
#war-ladder .np-war-row--pve:focus-within,
.np-war-ladder .np-war-row--pve:hover,
.np-war-ladder .np-war-row--pve:focus-within {
  border-color: rgba(100, 180, 140, 0.55);
  background:
    linear-gradient(90deg, rgba(30, 68, 49, 0.44) 0%, rgba(16, 14, 20, 0.88) 32%),
    rgba(16, 14, 20, 0.88);
}

#war-ladder .np-war-row--pve .np-war-row-rank,
.np-war-ladder .np-war-row--pve .np-war-row-rank {
  color: rgba(146, 198, 170, 0.92);
}

#war-ladder .np-war-board .np-war-row--pve[data-slot-occupied="1"]:first-of-type .np-war-row-rank,
.np-war-ladder .np-war-board .np-war-row--pve[data-slot-occupied="1"]:first-of-type .np-war-row-rank {
  color: var(--rank-gold-bright);
}

#war-ladder .np-war-row--pve .np-war-row-score,
.np-war-ladder .np-war-row--pve .np-war-row-score {
  color: #a9e3c2;
}

/* Lifetime PvE total reads as cold forged steel next to the weekly gain. */
#war-ladder .np-war-row-pve-total,
.np-war-ladder .np-war-row-pve-total {
  font-family: var(--font-mono, monospace);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9aa7ad;
  white-space: nowrap;
}

#war-ladder .np-war-row-kd--pve,
.np-war-ladder .np-war-row-kd--pve {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  justify-content: flex-end;
}

/* ----------------------------------------------------------------
   6. PvE zero-activity notice
   Sits above a full 15-slot board rather than replacing it.
   ---------------------------------------------------------------- */

#war-ladder .np-war-board-degraded--pve,
.np-war-ladder .np-war-board-degraded--pve {
  border-color: rgba(70, 130, 100, 0.3);
  background: linear-gradient(180deg, rgba(16, 38, 27, 0.5), rgba(10, 10, 16, 0.7));
}

#war-ladder .np-war-board-degraded--pve .np-war-board-degraded__kicker,
.np-war-ladder .np-war-board-degraded--pve .np-war-board-degraded__kicker {
  color: rgba(150, 200, 175, 0.85);
}

#war-ladder [data-ladder-panel="pve"] .np-war-health__block[data-health-state="fresh"] .np-war-health__title,
.np-war-ladder [data-ladder-panel="pve"] .np-war-health__block[data-health-state="fresh"] .np-war-health__title {
  color: rgba(150, 205, 175, 0.92);
}

/* 59B — LifetimeStatistics watermark (not Worker fetch time) */
#war-ladder [data-ladder-panel="pve"] .np-war-pve-source-stamp,
.np-war-ladder [data-ladder-panel="pve"] .np-war-pve-source-stamp {
  margin: 0.35rem 0 0.15rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(170, 210, 185, 0.88);
}

#war-ladder [data-ladder-panel="pve"] .np-war-health__block[data-health-state="provisional"],
.np-war-ladder [data-ladder-panel="pve"] .np-war-health__block[data-health-state="provisional"] {
  border-color: rgba(180, 150, 70, 0.35);
}

#war-ladder [data-ladder-panel="pve"] .np-war-health__block[data-health-state="provisional"] .np-war-health__title,
.np-war-ladder [data-ladder-panel="pve"] .np-war-health__block[data-health-state="provisional"] .np-war-health__title {
  color: rgba(220, 190, 110, 0.95);
}

#war-ladder [data-ladder-panel="pve"] .np-war-pve-delay-disclosure[data-delay-kind="temporal-skew"],
.np-war-ladder [data-ladder-panel="pve"] .np-war-pve-delay-disclosure[data-delay-kind="temporal-skew"],
#war-ladder [data-ladder-panel="pve"] .np-war-pve-delay-disclosure[data-delay-kind="upstream-delayed"],
.np-war-ladder [data-ladder-panel="pve"] .np-war-pve-delay-disclosure[data-delay-kind="upstream-delayed"] {
  color: rgba(200, 185, 140, 0.9);
}

/* ----------------------------------------------------------------
   7. Arena crossfade + layout stability
   ---------------------------------------------------------------- */

/* Reserve podium and board height so switching arenas does not jump the
   page. Values track the shared card and 15-slot geometry. */
#war-ladder .np-war-podium,
.np-war-ladder .np-war-podium {
  min-height: 30rem;
}

#war-ladder .np-war-board,
.np-war-ladder .np-war-board {
  min-height: 24rem;
}

@media (max-width: 900px) {
  #war-ladder .np-war-podium,
  .np-war-ladder .np-war-podium {
    min-height: 0;
  }
}

/* ~200ms restrained crossfade on the incoming panel only, so the page
   height itself is never animated. */
@keyframes np-war-arena-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes np-war-arena-ornament {
  from {
    opacity: 0;
    transform: scaleX(0.82);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

#war-ladder .np-war-panel.is-arena-entering,
.np-war-ladder .np-war-panel.is-arena-entering {
  animation: np-war-arena-enter 200ms ease-out both;
}

#war-ladder .np-war-panel.is-arena-entering .war-podium__top-ornament,
#war-ladder .np-war-panel.is-arena-entering .war-podium__bottom-ornament,
.np-war-ladder .np-war-panel.is-arena-entering .war-podium__top-ornament,
.np-war-ladder .np-war-panel.is-arena-entering .war-podium__bottom-ornament {
  animation: np-war-arena-ornament 240ms ease-out both;
  animation-delay: 60ms;
}

@media (prefers-reduced-motion: reduce) {
  #war-ladder .np-war-panel.is-arena-entering,
  #war-ladder .np-war-panel.is-arena-entering .war-podium__top-ornament,
  #war-ladder .np-war-panel.is-arena-entering .war-podium__bottom-ornament,
  .np-war-ladder .np-war-panel.is-arena-entering,
  .np-war-ladder .np-war-panel.is-arena-entering .war-podium__top-ornament,
  .np-war-ladder .np-war-panel.is-arena-entering .war-podium__bottom-ornament {
    animation: none;
  }
}

/* ----------------------------------------------------------------
   8. Mobile (390px) — stacked Gold / Silver / Bronze, compact but premium
   The Gold-first order is already owned by war-podium-42a.css; this only
   keeps the PvE row content readable without horizontal overflow.
   ---------------------------------------------------------------- */

@media (max-width: 700px) {
  #war-ladder .np-war-row-kd--pve,
  .np-war-ladder .np-war-row-kd--pve {
    justify-content: flex-start;
  }

  #war-ladder .np-war-pve-rail--compact,
  .np-war-ladder .np-war-pve-rail--compact {
    max-width: 100%;
  }

  #war-ladder .np-war-row-pve-total,
  .np-war-ladder .np-war-row-pve-total {
    font-size: 0.6rem;
  }
}

@media (max-width: 430px) {
  #war-ladder .war-podium[data-ladder="pve"] .np-war-pve-rail__label,
  .np-war-ladder .war-podium[data-ladder="pve"] .np-war-pve-rail__label {
    font-size: 0.46rem;
  }
}