/* ============================================================
   MODERN THEME — Stage (background depth + the gate)
   The backdrop is what separates a themed page from a AAA one:
   the reference screens are almost entirely atmosphere, and the
   UI just floats on top of it. This file builds that atmosphere
   as a stack of fixed layers behind everything else.

   Back to front:
     .wr-plate   painted environment, darkened to a stage flat
     .wr-fog     two fractal-noise sheets drifting at odd speeds
     .wr-horizon wide elliptical bloom where the eye should land
     .wr-gate    the portal (SVG, reacts to every pick)
     .wr-motes   slow rising dust
     .wr-vig     radial vignette that reseats the whole stack

   Scoped under html[data-wr="on"] like the rest of the overlay:
   with the toggle off #wr-stage is display:none and the classic
   page is byte-identical.
   ============================================================ */

#wr-stage { display: none; }

html[data-wr="on"] #wr-stage {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* the layers below animate transforms only — promote once, here */
  contain: strict;
}

/* Every layer rule below is written as `#wr-stage .x` rather than just
   `.x`. That is not decoration: this blanket rule carries an id, so a
   bare `html[data-wr="on"] .wr-plate` loses to it on specificity and its
   `inset` override is dropped — which silently clips the oversized fog
   sheets to the viewport and pins the gate to the left edge. Keep the
   id on both sides of the conflict. */
html[data-wr="on"] #wr-stage > * {
  position: absolute;
  inset: 0;
}

/* ---------------- painted plate ----------------
   Oversized so the parallax drift never exposes an edge. The
   reference backdrops are desaturated almost to grey-blue — the
   colour in the frame comes from the UI, not the art. */
html[data-wr="on"] #wr-stage .wr-plate {
  inset: -4%;
  background-position: center 42%;
  background-size: cover;
  background-repeat: no-repeat;
  filter: saturate(0.42) brightness(0.34) contrast(1.16) blur(1px);
  transform: scale(1.06);
  will-change: transform;
}

/* A second copy at higher saturation, masked to the middle, keeps
   the centre from going muddy while the edges stay dead. */
html[data-wr="on"] #wr-stage .wr-plate--warm {
  filter: saturate(0.8) brightness(0.52) contrast(1.1) blur(2px);
  -webkit-mask-image: radial-gradient(ellipse 52% 46% at 50% 52%, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 52% 46% at 50% 52%, #000 0%, transparent 78%);
  opacity: 0.85;
}

/* ---------------- drifting fog ----------------
   Baked fractal noise (feTurbulence in a data URI) rather than a
   live filter: an animated feTurbulence re-rasterises every frame
   and tanks the framerate on integrated GPUs. Two sheets at
   different scales and speeds read as volume. */
html[data-wr="on"] #wr-stage .wr-fog {
  background-repeat: repeat;
  mix-blend-mode: screen;
  will-change: transform;
}

html[data-wr="on"] #wr-stage .wr-fog--far {
  inset: -30%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0022' numOctaves='5' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.31 0 0 0 0 0.44 0 0 0 -1.05 0.62'/%3E%3C/filter%3E%3Crect width='700' height='700' filter='url(%23f)'/%3E%3C/svg%3E");
  background-size: 1400px 1400px;
  opacity: 0.55;
  animation: wr-fog-far 190s linear infinite;
}

html[data-wr="on"] #wr-stage .wr-fog--near {
  inset: -40%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0009' numOctaves='4' seed='23'/%3E%3CfeColorMatrix values='0 0 0 0 0.09 0 0 0 0 0.42 0 0 0 0 0.48 0 0 0 -1.35 0.72'/%3E%3C/filter%3E%3Crect width='700' height='700' filter='url(%23f)'/%3E%3C/svg%3E");
  background-size: 2200px 2200px;
  opacity: 0.34;
  animation: wr-fog-near 118s linear infinite;
}

@keyframes wr-fog-far  { from { transform: translate3d(0,0,0); }      to { transform: translate3d(-1400px, 90px, 0); } }
@keyframes wr-fog-near { from { transform: translate3d(0,0,0); }      to { transform: translate3d(2200px, -140px, 0); } }

/* ---------------- horizon bloom ----------------
   One wide low-lying glow. Everything above it falls away into
   navy, which is what gives the reference its sense of a room. */
html[data-wr="on"] #wr-stage .wr-horizon {
  background:
    radial-gradient(ellipse 62% 26% at 50% 62%,
      rgba(10, 200, 185, 0.16) 0%, rgba(3, 151, 171, 0.07) 38%, transparent 72%),
    radial-gradient(ellipse 90% 42% at 50% 100%,
      rgba(9, 20, 40, 0.9) 0%, transparent 70%),
    linear-gradient(180deg, rgba(1, 10, 19, 0.88) 0%, transparent 34%);
  /* no idle loop here either — see the note on .wr-core */
  opacity: 0.92;
}

/* ---------------- the gate ----------------
   Sized off viewport height so it stays a circle and stays behind
   the grid at any aspect. Sits slightly low: the reference rings
   are centred on the champion's chest, not the screen. */
html[data-wr="on"] #wr-stage .wr-gate {
  inset: auto;
  /* wr-stage.js measures the board and publishes its centre; falls back to
     the viewport when there is no board to measure */
  left: var(--wr-gate-x, 50%);
  top: 52%;
  /* Big enough that the core frames the champion grid rather than
     sitting under it, small enough that the outer rail still closes
     on screen. Past ~110vh the plates get cut mid-bevel and the whole
     thing stops reading as a ring at all. */
  width: min(98vh, 1180px);
  height: min(98vh, 1180px);
  /* Centring and tilt are split across two elements on purpose: a
     perspective() *function* is resolved about the transform-origin
     after the preceding translate(-50%,-50%) has already moved it,
     which throws the vanishing point off-centre and shears the ring
     into an egg. The perspective *property* on the parent is always
     resolved about that parent's own centre, so the circle stays a
     circle and only tips. */
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  perspective: 1600px;
}
html[data-wr="on"] #wr-stage .wr-gate svg {
  width: 100%; height: 100%; display: block; overflow: visible;
  transform: rotateX(6deg);
}

/* Every moving group shares one origin: the SVG's own centre. */
html[data-wr="on"] #wr-stage .wr-gate .wr-ring,
html[data-wr="on"] #wr-stage .wr-gate .wr-leaf,
html[data-wr="on"] #wr-stage .wr-gate .wr-core {
  transform-origin: 500px 500px;
  transform-box: view-box;
}

/* idle: two rails counter-rotate, slowly enough to be subliminal */
html[data-wr="on"] #wr-stage .wr-gate .wr-rail-out { animation: wr-spin-cw 220s linear infinite; }
html[data-wr="on"] #wr-stage .wr-gate .wr-rail-in  { animation: wr-spin-ccw 150s linear infinite; }
@keyframes wr-spin-cw  { to { transform: rotate(360deg); } }
@keyframes wr-spin-ccw { to { transform: rotate(-360deg); } }

/* the four shutter leaves — closed by default, splayed when open */
html[data-wr="on"] #wr-stage .wr-gate .wr-leaf {
  transition:
    transform 900ms var(--wr-ease-out),
    opacity   900ms var(--wr-ease);
}

/* The core sits still and flares only on a pick.
   It used to breathe on a 9s loop, which stacked with the board's own
   bg-breathe into a constant throb dead centre — exactly where you are
   trying to read HP bars. The gate should react to events, not idle. */
html[data-wr="on"] #wr-stage .wr-gate .wr-core {
  transition: transform 900ms var(--wr-ease-out), opacity 900ms var(--wr-ease);
  opacity: 0.78;
}

/* --- OPEN state: set for ~1.1s on every pick, then released ---
   Units are viewBox units (transform-box: view-box), not screen px, so
   the splay scales with the gate instead of shrinking on small screens. */
html[data-wr="on"] #wr-stage .wr-gate.wr-open .wr-leaf-n { transform: translateY(-92px) rotate(5deg); }
html[data-wr="on"] #wr-stage .wr-gate.wr-open .wr-leaf-s { transform: translateY(92px)  rotate(5deg); }
html[data-wr="on"] #wr-stage .wr-gate.wr-open .wr-leaf-e { transform: translateX(92px)  rotate(-5deg); }
html[data-wr="on"] #wr-stage .wr-gate.wr-open .wr-leaf-w { transform: translateX(-92px) rotate(-5deg); }
html[data-wr="on"] #wr-stage .wr-gate.wr-open .wr-leaf { opacity: 0.92; }
html[data-wr="on"] #wr-stage .wr-gate.wr-open .wr-core { transform: scale(1.14); opacity: 1; }
html[data-wr="on"] #wr-stage .wr-gate.wr-open .wr-flare { opacity: 1; }

/* the flare is a one-shot bloom behind the core */
html[data-wr="on"] #wr-stage .wr-gate .wr-flare {
  opacity: 0;
  transition: opacity 260ms var(--wr-ease-out);
}

/* --- SEAL state: the harder slam used for lock-in --- */
html[data-wr="on"] #wr-stage .wr-gate.wr-seal .wr-core { animation: wr-core-slam 780ms var(--wr-ease-slam); }
@keyframes wr-core-slam {
  0%   { transform: scale(1.3); opacity: 1; }
  45%  { transform: scale(0.9); opacity: 1; }
  100% { transform: scale(1);   opacity: 0.7; }
}

/* ---------------- side pillars ----------------
   The reference fills its frame edge to edge — full-body champions
   stand where our left and right thirds are empty. On the real page
   the team rails cover most of that, but the outer margins still read
   as void, so this puts a suggestion of architecture behind them:
   a lit vertical shaft and a gold edge line, mirrored. */
html[data-wr="on"] #wr-stage .wr-pillars {
  background:
    /* left shaft */
    linear-gradient(90deg,
      rgba(10, 200, 185, 0.07) 0%, rgba(10, 200, 185, 0.03) 4%, transparent 13%),
    /* right shaft */
    linear-gradient(270deg,
      rgba(10, 200, 185, 0.07) 0%, rgba(10, 200, 185, 0.03) 4%, transparent 13%),
    /* the pillar faces themselves — slabs catching a little rim light */
    linear-gradient(90deg,
      rgba(24, 38, 58, 0.85) 0%, rgba(14, 24, 40, 0.7) 6%,
      transparent 17%, transparent 83%,
      rgba(14, 24, 40, 0.7) 94%, rgba(24, 38, 58, 0.85) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 76%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 76%, transparent 100%);
}
/* hairline gold edge where each pillar meets the open middle */
html[data-wr="on"] #wr-stage .wr-pillars::before,
html[data-wr="on"] #wr-stage .wr-pillars::after {
  content: '';
  position: absolute; top: 14%; bottom: 22%; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(200, 170, 110, 0.5) 30%,
              rgba(200, 170, 110, 0.5) 70%, transparent);
}
html[data-wr="on"] #wr-stage .wr-pillars::before { left: 15.5%; }
html[data-wr="on"] #wr-stage .wr-pillars::after  { right: 15.5%; }

/* ---------------- podium banners ----------------
   The reference stands its already-picked champions either side of the
   centre as tall pennants with a lit frame and a gem at the point. Ours
   mirror the ally rail: first pick left, second right, third slams into
   the middle once the grid's job is done.

   These are stage furniture, not page structure — the real rails on the
   left and right are untouched, so nothing here can break a pick. */
html[data-wr="on"] #wr-stage .wr-podium { pointer-events: none; }

/* A pennant that is up is a control: clicking it re-selects that
   champion, the same as clicking its rail slot. Only .is-on takes
   the pointer, so the invisible ones never eat a click meant for
   the grid behind them. */
html[data-wr="on"] #wr-stage .wr-pod.is-on { pointer-events: auto; cursor: pointer; }
html[data-wr="on"] #wr-stage .wr-pod.is-on:hover { transform: translate(-50%, -52%) scale(1.03); }
html[data-wr="on"] #wr-stage .wr-pod.is-on:hover .wr-pod-frame { filter: brightness(1.25); }

/* which champion the loadout row below is currently editing */
html[data-wr="on"] #wr-stage .wr-pod.is-focus .wr-pod-frame {
  box-shadow: 0 0 0 2px var(--wr-ice), var(--wr-glow-aqua);
}
html[data-wr="on"] #wr-stage .wr-pod.is-focus .wr-pod-name { color: var(--wr-ice); }

html[data-wr="on"] #wr-stage .wr-pod {
  position: absolute;
  top: 50%;
  /* Tall enough to hold a whole champion card. These are full-length
     portraits, not headshots — cropping to the face throws away most
     of what the art is doing.
     Sized against the art, which is not uniform: 39 champions ship
     312x600 and 13 only 194x380. 208x408 downscales the common case
     (sharp) and asks only 1.07x of the small one. Going wider would
     upscale most of the roster. */
  width: clamp(150px, 21vh, 208px);
  height: clamp(294px, 41vh, 408px);
  opacity: 0;
  transform: translate(-50%, -46%) scale(0.94);
  transition:
    opacity 520ms var(--wr-ease),
    left 700ms var(--wr-ease-out),
    transform 620ms var(--wr-ease-slam);
}
html[data-wr="on"] #wr-stage .wr-pod--l { left: 25%; }
html[data-wr="on"] #wr-stage .wr-pod--r { left: 75%; }
html[data-wr="on"] #wr-stage .wr-pod--c { left: 50%; }

/* Once the third lands they stop being scattered markers and become a
   line-up, so pull the wings in to read as one group. */
html[data-wr="on"] body.wr-podium-full #wr-stage .wr-pod--l { left: 29%; }
html[data-wr="on"] body.wr-podium-full #wr-stage .wr-pod--r { left: 71%; }

html[data-wr="on"] #wr-stage .wr-pod.is-on {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* frame and art share one clip so the border is an even hairline all
   the way round the pennant, including down the point */
html[data-wr="on"] #wr-stage .wr-pod-frame,
html[data-wr="on"] #wr-stage .wr-pod-art {
  position: absolute;
  inset: 0;
  /* shallower point than before — a deep V ate the bottom of the card */
  clip-path: polygon(0% 4%, 4% 0%, 96% 0%, 100% 4%, 100% 90%, 50% 100%, 0% 90%);
}
html[data-wr="on"] #wr-stage .wr-pod-frame {
  background: linear-gradient(180deg, var(--wr-aqua) 0%, #0397ab 46%, #005a82 100%);
  box-shadow: var(--wr-glow-aqua-soft);
}
html[data-wr="on"] #wr-stage .wr-pod-art {
  inset: 2px;
  /* contain, not cover: the whole card from head to feet. cover crops
     to a headshot and loses the pose, which is most of the artwork. */
  background: #04101c center top / contain no-repeat;
  filter: saturate(0.95) contrast(1.05);
}
/* darken the lower half so the name plate always has something to sit on */
html[data-wr="on"] #wr-stage .wr-pod-art::after {
  content: '';
  position: absolute; inset: 0;
  /* Only as much scrim as the name plate needs. Starting this at 38%
     buried the whole lower half of the card in black, which read as the
     art being cropped when it was actually just unlit. */
  background: linear-gradient(180deg, transparent 68%, rgba(1, 10, 19, 0.78) 92%);
}

/* the gem at the point */
html[data-wr="on"] #wr-stage .wr-pod-gem {
  position: absolute;
  left: 50%; bottom: -9px;
  width: 20px; height: 20px;
  transform: translateX(-50%) rotate(45deg);
  background: linear-gradient(135deg, #cdfafa, var(--wr-aqua) 45%, #005a82);
  border: 1px solid rgba(205, 250, 250, 0.7);
  box-shadow: 0 0 14px rgba(10, 200, 185, 0.7);
}

html[data-wr="on"] #wr-stage .wr-pod-name {
  position: absolute;
  left: 0; right: 0; bottom: 11%;
  text-align: center;
  font-family: var(--wr-font-display);
  font-size: clamp(13px, 1.9vh, 21px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wr-gold-1);
  text-shadow: 0 2px 10px #010a13, 0 0 18px rgba(200, 170, 110, 0.45);
}

/* --- still choosing: dimmed, breathing --- */
html[data-wr="on"] #wr-stage .wr-pod.is-picking .wr-pod-art { filter: grayscale(0.75) brightness(0.5); }
html[data-wr="on"] #wr-stage .wr-pod.is-picking .wr-pod-name { color: var(--wr-grey-1); }
html[data-wr="on"] #wr-stage .wr-pod.is-picking .wr-pod-frame {
  animation: wr-pod-wait 2.4s ease-in-out infinite;
}
@keyframes wr-pod-wait {
  0%, 100% { opacity: 0.5; box-shadow: 0 0 10px rgba(10, 200, 185, 0.2); }
  50%      { opacity: 1;   box-shadow: 0 0 26px rgba(10, 200, 185, 0.5); }
}

/* --- locked: gold frame, one-shot seal --- */
html[data-wr="on"] #wr-stage .wr-pod.is-locked .wr-pod-frame {
  background: linear-gradient(180deg, var(--wr-gold-1) 0%, var(--wr-gold-2) 45%, var(--wr-gold-3) 100%);
  box-shadow: var(--wr-glow-gold);
  animation: wr-pod-seal 700ms var(--wr-ease-slam);
}
html[data-wr="on"] #wr-stage .wr-pod.is-locked .wr-pod-gem {
  background: linear-gradient(135deg, #f0e6d2, var(--wr-gold-2) 45%, var(--wr-gold-3));
  border-color: rgba(240, 230, 210, 0.8);
  box-shadow: 0 0 14px rgba(200, 170, 110, 0.75);
}
@keyframes wr-pod-seal {
  0%   { box-shadow: 0 0 44px rgba(240, 230, 210, 0.9); }
  100% { box-shadow: var(--wr-glow-gold); }
}

/* The centre pennant lands on top of the champion grid, so once it is
   up the grid steps back rather than fighting it. Opacity only — the
   page owns the grid's display and contents. */
html[data-wr="on"] body.wr-podium-full .champ-scroll {
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms var(--wr-ease);
}
/* The panel that held the grid is now an empty box behind the line-up,
   so drop its walls too and let the stage read straight through. */
html[data-wr="on"] body.wr-podium-full .center {
  background: none;
  border-color: transparent;
  box-shadow: none;
  transition: background 600ms var(--wr-ease), border-color 600ms var(--wr-ease);
}

/* ---------------- dust motes ---------------- */
html[data-wr="on"] #wr-stage .wr-motes { mix-blend-mode: screen; opacity: 0.5; }

/* ---------------- vignette ----------------
   Last layer in the stack, so it darkens the gate too and keeps
   the whole thing sitting behind the UI rather than competing. */
html[data-wr="on"] #wr-stage .wr-vig {
  background:
    radial-gradient(ellipse 74% 66% at 50% 48%, transparent 38%, rgba(1, 10, 19, 0.72) 100%),
    linear-gradient(90deg, rgba(1, 10, 19, 0.55) 0%, transparent 18%, transparent 82%, rgba(1, 10, 19, 0.55) 100%);
}

/* ---------------- integration with the existing overlay ----------------
   wr-champselect.css paints its own floor dais on body::before and a
   splash on #wr-splash. Both predate the stage and now sit inside the
   same depth budget, so pull them back rather than stacking glows. */
html[data-wr="on"] body::before { opacity: 0.55; }
html[data-wr="on"] #wr-splash img.wr-live { opacity: 0.26; }

/* The page vignette is now redundant with .wr-vig — retire it so the
   two don't multiply into mud at the corners. */
html[data-wr="on"] body::after { background: none; }

/* ---------------- mobile ----------------
   Phones get the plate and the vignette only. The fog sheets are
   2200px composited layers and the gate is a live SVG; neither is
   worth the battery on a screen where they'd be mostly cropped.
   The class covers champ select, which sets it explicitly; the width
   query covers the arena, whose mobile flag lives on a descendant
   (.battle-viewer.mobile-mode) and so can't be selected from here. */
html[data-wr="on"] body.cs-mobile #wr-stage .wr-fog,
html[data-wr="on"] body.cs-mobile #wr-stage .wr-gate,
html[data-wr="on"] body.cs-mobile #wr-stage .wr-pillars,
html[data-wr="on"] body.cs-mobile #wr-stage .wr-motes { display: none; }

@media (max-width: 820px) {
  html[data-wr="on"] #wr-stage .wr-fog,
  html[data-wr="on"] #wr-stage .wr-gate,
  html[data-wr="on"] #wr-stage .wr-pillars,
  html[data-wr="on"] #wr-stage .wr-motes { display: none; }
}

/* ---------------- calm-motion guard ---------------- */
@media (prefers-reduced-motion: reduce) {
  html[data-wr="on"] #wr-stage .wr-fog--far,
  html[data-wr="on"] #wr-stage .wr-fog--near,
  html[data-wr="on"] #wr-stage .wr-gate .wr-rail-out,
  html[data-wr="on"] #wr-stage .wr-gate .wr-rail-in,
  html[data-wr="on"] #wr-stage .wr-gate.wr-seal .wr-core { animation: none; }
  html[data-wr="on"] #wr-stage .wr-motes { display: none; }
  /* the gate still acknowledges a pick, it just fades instead of moving */
  html[data-wr="on"] #wr-stage .wr-gate .wr-leaf { transition: opacity 400ms linear; }
  html[data-wr="on"] #wr-stage .wr-gate.wr-open .wr-leaf-n,
  html[data-wr="on"] #wr-stage .wr-gate.wr-open .wr-leaf-s,
  html[data-wr="on"] #wr-stage .wr-gate.wr-open .wr-leaf-e,
  html[data-wr="on"] #wr-stage .wr-gate.wr-open .wr-leaf-w { transform: none; }
  html[data-wr="on"] #wr-stage .wr-gate.wr-open .wr-core { transform: none; }
}

/* ---------- the gate, in two halves ----------
   Driven from the cogwheel (Screen & look). The gate is not one object: the
   four shutter plates and the backing ring they slide over sit in the middle
   of the board, right where Modern+ now stands a champion, while the outer
   gold rail and its tick marks — the clock — frame the stage from the edge and
   never cross the fight. So they switch separately.

   Written as `="off"` only. The attribute is absent until someone touches a
   switch, and absent must mean ON, or every page that predates these keys
   would come up with half its backdrop missing. */
html[data-wr="on"][data-wr-shutters="off"] #wr-stage .wr-gate .wr-leaf,
html[data-wr="on"][data-wr-shutters="off"] #wr-stage .wr-gate .wr-backing {
  display: none;
}
html[data-wr="on"][data-wr-ring="off"] #wr-stage .wr-gate .wr-ring {
  display: none;
}