/* ================================================================
   NO PERRY — war-podium-ornamental-42g.css
   Decorative enrichment layer on frozen 42F structure.
   Rails, contrast, double-line depth, subtle hover only.
   ================================================================ */

#war-ladder .war-podium,
.np-war-ladder .war-podium {
  --wpf-rail: 4px;
  --wpf-rail-inner: 1px;
  --wpf-rail-highlight: rgba(232, 200, 106, 0.42);
  --wpf-rail-shadow: rgba(20, 14, 6, 0.55);
  --wpf-rail-notch: rgba(168, 184, 106, 0.38);
}

#war-ladder .war-podium--gold,
.np-war-ladder .war-podium--gold {
  --wpf-rail-glow: rgba(201, 162, 74, 0.48);
  --wpf-rail-core: #9a7834;
  --wpf-rail-inner-line: rgba(232, 200, 106, 0.55);
  --wpf-rail-highlight: rgba(232, 200, 106, 0.5);
  --wpf-rail-notch: rgba(168, 184, 106, 0.42);
}

#war-ladder .war-podium--silver,
.np-war-ladder .war-podium--silver {
  --wpf-rail-glow: rgba(184, 196, 212, 0.42);
  --wpf-rail-core: #788898;
  --wpf-rail-inner-line: rgba(208, 220, 232, 0.48);
  --wpf-rail-highlight: rgba(208, 220, 232, 0.45);
  --wpf-rail-notch: rgba(138, 154, 170, 0.38);
}

#war-ladder .war-podium--bronze,
.np-war-ladder .war-podium--bronze {
  --wpf-rail-glow: rgba(196, 134, 74, 0.42);
  --wpf-rail-core: #8a5428;
  --wpf-rail-inner-line: rgba(196, 134, 74, 0.5);
  --wpf-rail-highlight: rgba(196, 134, 74, 0.46);
  --wpf-rail-notch: rgba(154, 106, 64, 0.38);
}

#war-ladder .war-podium__rail,
.np-war-ladder .war-podium__rail {
  transition: filter 200ms ease, opacity 200ms ease;
}

#war-ladder .war-podium:hover .war-podium__rail,
.np-war-ladder .war-podium:hover .war-podium__rail {
  filter: brightness(1.1);
}

#war-ladder .war-podium__rail--top,
#war-ladder .war-podium__rail--bottom,
.np-war-ladder .war-podium__rail--top,
.np-war-ladder .war-podium__rail--bottom {
  height: var(--wpf-rail);
}

#war-ladder .war-podium__rail--top,
.np-war-ladder .war-podium__rail--top {
  background:
    linear-gradient(90deg, transparent 0%, var(--wpf-rail-shadow) 4%, var(--wpf-rail-glow) 10%, var(--wpf-rail-core) 50%, var(--wpf-rail-glow) 90%, var(--wpf-rail-shadow) 96%, transparent 100%),
    linear-gradient(90deg, transparent 10%, var(--wpf-rail-inner-line) 50%, transparent 90%);
  background-size: 100% 100%, 100% var(--wpf-rail-inner);
  background-position: center, center calc(50% + 1px);
  background-repeat: no-repeat;
  box-shadow: 0 -1px 0 var(--wpf-rail-highlight);
}

#war-ladder .war-podium__rail--top::after,
.np-war-ladder .war-podium__rail--top::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: var(--wpf-rail-inner);
  transform: translate(-50%, -50%);
  background: var(--wpf-rail-shadow);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  opacity: 0.65;
}

#war-ladder .war-podium__rail--bottom,
.np-war-ladder .war-podium__rail--bottom {
  background:
    linear-gradient(90deg, transparent 0%, var(--wpf-rail-shadow) 4%, var(--wpf-rail-glow) 10%, var(--wpf-rail-core) 50%, var(--wpf-rail-glow) 90%, var(--wpf-rail-shadow) 96%, transparent 100%),
    linear-gradient(90deg, transparent 10%, var(--wpf-rail-inner-line) 50%, transparent 90%);
  background-size: 100% 100%, 100% var(--wpf-rail-inner);
  background-position: center, center calc(50% - 1px);
  background-repeat: no-repeat;
  box-shadow: 0 1px 0 var(--wpf-rail-highlight);
}

#war-ladder .war-podium__rail--left,
#war-ladder .war-podium__rail--right,
.np-war-ladder .war-podium__rail--left,
.np-war-ladder .war-podium__rail--right {
  width: var(--wpf-rail);
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent 13px,
      var(--wpf-rail-notch) 13px,
      var(--wpf-rail-notch) 14px,
      transparent 14px,
      transparent 26px
    ),
    linear-gradient(180deg, var(--wpf-rail-shadow) 0%, var(--wpf-rail-core) 18%, var(--wpf-rail-inner) 50%, var(--wpf-rail-core) 82%, var(--wpf-rail-shadow) 100%);
  box-shadow: inset 1px 0 0 var(--wpf-rail-highlight);
}

#war-ladder .war-podium__rail--right,
.np-war-ladder .war-podium__rail--right {
  box-shadow: inset -1px 0 0 var(--wpf-rail-highlight);
}

#war-ladder .war-podium__rail--left::after,
#war-ladder .war-podium__rail--right::after,
.np-war-ladder .war-podium__rail--left::after,
.np-war-ladder .war-podium__rail--right::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--wpf-rail-inner);
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--wpf-rail-inner-line) 12%,
    var(--wpf-rail-inner-line) 88%,
    transparent 100%
  );
  opacity: 0.75;
}

#war-ladder .war-podium__rail--left::after,
.np-war-ladder .war-podium__rail--left::after {
  right: 1px;
}

#war-ladder .war-podium__rail--right::after,
.np-war-ladder .war-podium__rail--right::after {
  left: 1px;
}

#war-ladder .war-podium__corner,
.np-war-ladder .war-podium__corner {
  filter: drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.45));
}

#war-ladder .war-podium__top-ornament,
#war-ladder .war-podium__bottom-ornament,
.np-war-ladder .war-podium__top-ornament,
.np-war-ladder .war-podium__bottom-ornament {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
  transition: filter 200ms ease;
}

#war-ladder .war-podium:hover .war-podium__top-ornament,
#war-ladder .war-podium:hover .war-podium__bottom-ornament,
.np-war-ladder .war-podium:hover .war-podium__top-ornament,
.np-war-ladder .war-podium:hover .war-podium__bottom-ornament {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)) brightness(1.06);
}

@media (max-width: 430px) {
  #war-ladder .war-podium,
  .np-war-ladder .war-podium {
    --wpf-rail: 3.5px;
  }
}

@media (max-width: 390px) {
  #war-ladder .war-podium,
  .np-war-ladder .war-podium {
    --wpf-rail: 3px;
  }

  #war-ladder .war-podium__rail--left,
  #war-ladder .war-podium__rail--right,
  .np-war-ladder .war-podium__rail--left,
  .np-war-ladder .war-podium__rail--right {
    background:
      linear-gradient(180deg, var(--wpf-rail-shadow) 0%, var(--wpf-rail-core) 18%, var(--wpf-rail-inner) 50%, var(--wpf-rail-core) 82%, var(--wpf-rail-shadow) 100%);
  }
}