/*
 * Environmental backdrop for the ladder page.
 *
 * Layer order, bottom to top:
 *   1. base dark page (style.css --bg)
 *   2. .scene-map  — a cold radial glow, centre, low contrast
 *   3. .scene-shade— navy wash + vignette over it
 *   4. .ladder-table panel (below) — frosted observer panel
 *
 * There is deliberately no artwork layer. Full-bleed key art was tried and
 * removed: behind a translucent frosted board it fought the standings for
 * attention, and every row had to survive whatever happened to be painted
 * under it. The stage glow gives depth without competing.
 *
 * Everything here is decorative: fixed, pointer-events none, and it never
 * affects layout. The leaderboard always paints above it.
 */

.ladder-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* The root scrollbar's width and colour are site chrome now, stated once in
   style.css beside scrollbar-gutter: a per-page `scrollbar-width` reserved a
   thinner gutter on this page than on the others, which shifted the header by
   a couple of pixels all the same. The ::-webkit-scrollbar rules below remain
   for older engines. */

body::-webkit-scrollbar,
html::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #232b3a;
}

body::-webkit-scrollbar-thumb:hover,
html::-webkit-scrollbar-thumb:hover {
  background: #313c50;
}

body::-webkit-scrollbar-track,
html::-webkit-scrollbar-track {
  background: transparent;
}

/* The page content — masthead, board, everything — lives above the scene. */
body:has(#ladderShell) main {
  position: relative;
  z-index: 1;
}

/* The LP pills hang into the gutter by design; never let them open a
 * horizontal scrollbar. */
body:has(#ladderShell) {
  overflow-x: clip;
}

/* Centre atmosphere --------------------------------------------------------
 * No map image — just a deep navy field with a faint cold glow behind the
 * board, so the middle reads as stage lighting rather than empty black. */

.scene-map {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(58% 46% at 50% 38%, rgba(38, 52, 74, 0.55), transparent 72%),
    radial-gradient(40% 34% at 50% 60%, rgba(30, 38, 54, 0.4), transparent 75%);
}

/* Shade --------------------------------------------------------------------
 * A navy wash, not black: keeps the esports darkness, unifies the two art
 * sources, and the vignette pulls the eye to the centre column. */

.scene-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(
      115% 92% at 50% 42%,
      transparent 40%,
      rgba(8, 11, 18, 0.24) 72%,
      rgba(4, 6, 10, 0.66) 100%
    ),
    linear-gradient(180deg, rgba(9, 12, 19, 0.36), rgba(9, 12, 19, 0.3));
}

/* The observer panel -------------------------------------------------------
 * The board sits on a dark frosted panel: translucent enough that the rift
 * glows through, opaque enough that no row competes with the art. */

.ladder-table {
  background: rgba(13, 17, 26, 0.66);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
          backdrop-filter: blur(16px) saturate(115%);
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 16px;
  box-shadow:
    0 30px 70px rgba(2, 4, 8, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: 6px 10px 10px;
}