/* Futbol Ranks — World Cup banner + decorative side rails (shared by all pages) */

/* ===== top banner ===== */
.wc-banner{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:14px;margin-bottom:18px;
  padding:16px 20px 18px;text-align:center;
  background:radial-gradient(130% 150% at 50% -25%, #1d3a26 0%, #14202a 55%, #0f1419 100%)}
.wc-banner::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg, transparent 0 39px, rgba(255,255,255,.022) 39px 40px)}
.wc-banner .stripe{position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,#3fb950 0%,#3fb950 33%,#e6edf3 33%,#e6edf3 66%,#f85149 66%,#f85149 100%)}
.wc-banner .balls{font-size:17px;letter-spacing:6px;position:relative}
.wc-banner h2{margin:4px 0 3px;font-size:clamp(20px,5vw,28px);letter-spacing:4px;font-weight:800;position:relative}
.wc-banner .hosts{color:var(--muted);font-size:14px;letter-spacing:.5px;position:relative}

/* ===== side rails — top-down soccer pitch motif ===== */
.rail{position:fixed;top:50%;transform:translateY(-50%);width:150px;display:none;z-index:10}
.rail-left{right:calc(50% + 440px + 16px)} .rail-right{left:calc(50% + 440px + 16px)}
@media(min-width:1240px){.rail{display:block}}

.pitch{position:relative;height:580px;border-radius:16px;overflow:hidden;border:1px solid #21422c;
  background:
    radial-gradient(120% 55% at 50% 50%, rgba(63,185,80,.14), transparent 62%),
    repeating-linear-gradient(180deg, #14301c 0 36px, #163b22 36px 72px);
  box-shadow:inset 0 0 70px rgba(0,0,0,.5), 0 8px 30px rgba(0,0,0,.35)}
.pitch .ln{position:absolute;box-sizing:border-box;border:2px solid rgba(230,237,243,.22)}
.pitch .bound{inset:12px;border-radius:6px}
.pitch .half{left:12px;right:12px;top:50%;border:0;border-top:2px solid rgba(230,237,243,.22)}
.pitch .circle{width:78px;height:78px;left:50%;top:50%;margin:-39px 0 0 -39px;border-radius:50%}
.pitch .box{left:50%;width:84px;height:44px;transform:translateX(-50%)}
.pitch .box.t{top:12px;border-top:0} .pitch .box.b{bottom:12px;border-bottom:0}
.pitch .spot{position:absolute;width:6px;height:6px;left:50%;top:50%;margin:-3px 0 0 -3px;border-radius:50%;
  background:rgba(230,237,243,.55)}
.pitch .ball{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:30px;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.6))}
.pitch .cap{position:absolute;left:0;right:0;text-align:center;font-weight:800;
  color:rgba(230,237,243,.95);text-shadow:0 1px 8px rgba(0,0,0,.75)}
.pitch .cap.t{top:74px;font-size:13px;letter-spacing:3px}
.pitch .cap.b{bottom:78px;font-size:30px;letter-spacing:5px}
.pitch .trophy{position:absolute;left:0;right:0;bottom:34px;text-align:center;font-size:22px;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}