/* ============================================================
   MODERN+ — the champion-select backdrop, in the arena
   A third look, not a rewrite of the second: every rule here is
   scoped `html[data-wr="on"][data-wr-plus="on"]`, so with the
   plus attribute off both Classic and Modern are byte-identical
   to what they were before this file existed.

   What it adds, back to front (all inside #wr-plus, which sits
   between #wr-stage and the board):

     .wp-wash    the acting champion's art, full-bleed and blurred
                 — champion select's #bg-art, same numbers
     .wp-vig     champion select's radial scrim over it
     .wp-figure  the same art again, CRISP, in a masked column on
                 the acting team's side of the board

   The two art layers are pairs of <img>: one fades in while the
   other fades out, which is the only way to cross-dissolve a
   src swap without a blank frame in the middle.
   ============================================================ */

#wr-plus { display: none; }

html[data-wr="on"][data-wr-plus="on"] #wr-plus {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ---------- full-bleed wash ----------
   Champion select's #bg-art verbatim: opacity .16 under a
   blur(16px) saturate(.55) brightness(.6), scaled past the edge so
   the blur never shows a seam. That is the "same transparency as
   the background elements" the look is being matched to. */
html[data-wr="on"][data-wr-plus="on"] #wr-plus .wp-wash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  filter: blur(16px) saturate(0.55) brightness(0.6);
  transform: scale(1.08);
  transition: opacity 900ms var(--wr-ease, ease);
}
html[data-wr="on"][data-wr-plus="on"] #wr-plus .wp-wash.wp-live { opacity: 0.16; }

/* ---------- the scrim ----------
   Champion select darkens its own background art with a radial
   ramp before any UI lands on it; without this the wash competes
   with the HP bars instead of sitting behind them. */
html[data-wr="on"][data-wr-plus="on"] #wr-plus .wp-vig {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 70% at 50% 38%,
    rgba(1, 10, 19, 0.30) 0%, rgba(1, 10, 19, 0.92) 100%);
}

/* ---------- the crisp figure ----------
   Champion select's #wr-splash: a 46%-wide column, masked to
   nothing before it reaches the middle, at opacity .34. Here it
   is mirrored onto whichever side just took its turn — the
   player's champion enters from the left, the enemy's from the
   right — so the backdrop also says WHOSE turn it is. */
html[data-wr="on"][data-wr-plus="on"] #wr-plus .wp-figure {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 46%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  filter: saturate(1.05) contrast(1.05) brightness(0.9);
  transition: opacity 900ms var(--wr-ease, ease);
}

/* Anchored to the BOARD, not the viewport, and PINNED to a side. The arena
   is not a symmetric page — the log panel eats the left quarter and the rail
   the right fifth — so a column measured off the window edge spends its solid
   half behind an opaque panel and shows only the fade. wr-plus.js publishes
   the board's edges.

   .wp-l is your half and .wp-r is theirs, always, whoever is acting. The
   single figure that used to slide between the two is what made choosing a
   target flicker; a stand that never moves cannot. Each dissolves toward the
   medallion, so when both are up they meet and blend in the middle instead of
   meeting at an edge. */
html[data-wr="on"][data-wr-plus="on"] #wr-plus .wp-figure.wp-l {
  /* The art is drawn with the champion centred in its own frame, so a column
     that crops from the centre puts every figure at the board's middle. Crop
     from the OUTER edge instead and each one stands on its own side. */
  object-position: left top;
  left: var(--wp-l, 0px);
  right: auto;
  width: var(--wp-w, 46%);
  /* soft on BOTH edges: the near one lands on the log panel's border, and a
     hard vertical cut there reads as a broken image rather than a backdrop */
  -webkit-mask-image: linear-gradient(95deg, transparent 0%, black 9%, black 40%, transparent 92%);
  mask-image: linear-gradient(95deg, transparent 0%, black 9%, black 40%, transparent 92%);
}
html[data-wr="on"][data-wr-plus="on"] #wr-plus .wp-figure.wp-r {
  object-position: right top;
  right: var(--wp-r, 0px);
  left: auto;
  width: var(--wp-w, 46%);
  /* the drift comes FROM the champion's own side, so the two mirror */
  --wp-from: 3%;
  -webkit-mask-image: linear-gradient(265deg, transparent 0%, black 9%, black 40%, transparent 92%);
  mask-image: linear-gradient(265deg, transparent 0%, black 9%, black 40%, transparent 92%);
}

/* Whoever the moment belongs to stands a step brighter; the other stays in
   the room rather than vanishing, which is how a target and the champion
   aiming at it share one screen. */
html[data-wr="on"][data-wr-plus="on"] #wr-plus[data-side="enemy"] .wp-figure.wp-l,
html[data-wr="on"][data-wr-plus="on"] #wr-plus[data-side="player"] .wp-figure.wp-r {
  /* A plain `opacity` here would be inert: wp-enter fills forwards and writes
     opacity every frame, and a running keyframe always beats a declaration.
     The keyframe reads this variable instead, so the dim state survives it. */
  --wp-op: 0.26;
}

html[data-wr="on"][data-wr-plus="on"] #wr-plus .wp-figure.wp-live {
  opacity: var(--wp-op, 0.34);
  animation: wp-enter 1100ms var(--wr-ease-out, ease-out) both,
             wp-breathe 9s ease-in-out 1100ms infinite;
}

/* The arrival: one slow drift in from the champion's own side, then
   the breath takes over. Calm — the theme allows one slam per
   screen and the fight already owns it. */
@keyframes wp-enter {
  from { opacity: 0; transform: translateX(var(--wp-from, -3%)) scale(1.05); }
  to   { opacity: var(--wp-op, 0.34); transform: translateX(0) scale(1); }
}
@keyframes wp-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035) translateY(-6px); }
}

/* ---------- let the art be the backdrop ----------
   The painted plate, the fog and the horizon were carrying the
   room on their own under Modern. With a champion standing in it
   they are competition, not depth — so they step back rather than
   go away. Modern is untouched: this needs both attributes. */
html[data-wr="on"][data-wr-plus="on"] #wr-stage .wr-plate { opacity: 0.38; }
html[data-wr="on"][data-wr-plus="on"] #wr-stage .wr-plate--warm { opacity: 0.30; }
html[data-wr="on"][data-wr-plus="on"] #wr-stage .wr-fog { opacity: 0.5; }
html[data-wr="on"][data-wr-plus="on"] #wr-stage .wr-horizon { opacity: 0.55; }

/* The board's own wash is what the figure has to read through. Champion
   select thins its centre panel for exactly this reason; the arena floor
   gets the same treatment, one step lighter than Modern's. */
html[data-wr="on"][data-wr-plus="on"] .arena-wrapper {
  background:
    radial-gradient(ellipse at center, transparent 34%, rgba(1, 10, 19, 0.46) 100%),
    radial-gradient(ellipse at 50% 45%, rgba(10, 200, 185, 0.04) 0%, transparent 52%),
    linear-gradient(180deg, rgba(8, 21, 32, 0.38), rgba(10, 26, 42, 0.24) 50%, rgba(7, 18, 24, 0.46));
}

/* ---------- calm ----------
   Reduced motion keeps the picture and drops the movement: the
   champion still appears, it simply does not drift or breathe. */
@media (prefers-reduced-motion: reduce) {
  html[data-wr="on"][data-wr-plus="on"] #wr-plus .wp-figure.wp-live { animation: none; }
}

/* ---------- phones ----------
   A 46% column on a 390px screen is a smear across half the board.
   The wash and the scrim stay — those are the backdrop — and the
   crisp figure stands down. */
@media (max-width: 820px) {
  html[data-wr="on"][data-wr-plus="on"] #wr-plus .wp-figure { display: none; }
}
/* PSP / portrait used to hide the figure at desktop width too — but the
   vertical layout is a narrow centre column with the widest empty flanks the
   room ever has, and hiding the figure there meant a player in VERTICAL saw
   no champion in the background for the whole match (the opening draft
   included, which is how it was caught). The phone gate above is the real
   guard; a desktop window in a column layout is where the figure has the
   most room to stand, not the least. */

/* ============================================================
   MODERN+2 — the side panels stop being walls
   Everything above still applies: +2 sets data-wr-plus="on" as
   well, so this file's Modern+ rules are shared by both tiers
   and the block below is only what the second tier ADDS.

   The complaint it answers: the middle of the board lets the
   backdrop through, and then the log on the left and the rail on
   the right sit on it at full opacity — two solid slabs framing a
   lit room. The stock log plate is an opaque gradient
   (#081820 -> #051018) and the rail's cards are rgba(...,.4) over
   it, so the champion behind them is simply not there.

   Thinned rather than removed: a blurred backing keeps the log
   text and the damage numbers readable over whatever art happens
   to be behind them, which is the same trade champion select
   makes for its own docks.
   ============================================================ */

html[data-wr="on"][data-wr-plus2="on"] .log-area {
  background: linear-gradient(180deg, rgba(8, 24, 32, 0.40), rgba(5, 16, 24, 0.50));
  backdrop-filter: blur(5px) saturate(0.9);
  -webkit-backdrop-filter: blur(5px) saturate(0.9);
}

/* The tab strip is its own black wash on top of the plate — left alone it
   reads as a solid bar across an otherwise translucent panel. */
html[data-wr="on"][data-wr-plus2="on"] .log-tabs {
  background: rgba(0, 0, 0, 0.14);
}

html[data-wr="on"][data-wr-plus2="on"] .arena-chat {
  background: rgba(4, 12, 20, 0.26);
}

html[data-wr="on"][data-wr-plus2="on"] .arr-quests,
html[data-wr="on"][data-wr-plus2="on"] .arr-board {
  background: rgba(7, 26, 40, 0.20);
  backdrop-filter: blur(5px) saturate(0.9);
  -webkit-backdrop-filter: blur(5px) saturate(0.9);
}

/* With the panels see-through, the champion should reach under them rather
   than stop at the board's edge — otherwise +2 opens two windows onto an
   empty room. The column widens past the near edge and the wash carries the
   rest. */
html[data-wr="on"][data-wr-plus2="on"] #wr-plus .wp-figure.wp-l {
  /* Keyed on the STAND, not on whose moment it is. This used to key on the
     host's data-side and apply to every figure — so with two stands, both
     were dragged to left:0 and the target sat squarely on top of the champion
     aiming at it, whatever the placement rules above said. */
  left: 0;
  width: calc(var(--wp-l, 0px) + var(--wp-w, 46%));
}
html[data-wr="on"][data-wr-plus2="on"] #wr-plus .wp-figure.wp-r {
  right: 0;
  width: calc(var(--wp-r, 0px) + var(--wp-w, 46%));
}

/* ---------- +2: lift the bars off the art ----------
   With the panels thinned and a champion standing behind the board, the HP
   and mana bars are reading against a picture instead of a flat floor. A
   cast shadow puts them back in front of it.

   box-shadow does not accumulate — it replaces — so wr-bars.css's whole
   inset stack (the chamfered well and its specular lip) is restated here
   before the drop is appended. Two attributes on <html> out-specify both
   wr-bars.css and wr-arena.css, whichever of them the cascade lands on. */
html[data-wr="on"][data-wr-plus2="on"] .hp-bar,
html[data-wr="on"][data-wr-plus2="on"] .mana-bar {
  box-shadow:
    inset 0 0 0 1px rgba(200, 170, 110, 0.30),
    inset 0 1px 0 rgba(240, 230, 210, 0.16),
    inset 0 -2px 4px rgba(0, 0, 0, 0.75),
    0 2px 5px rgba(0, 0, 0, 0.75),
    0 0 14px rgba(1, 10, 19, 0.55);
}

/* The numbers printed over the fills need the same separation — a shadow on
   the bar does nothing for text sitting inside it. */
html[data-wr="on"][data-wr-plus2="on"] .hp-text,
html[data-wr="on"][data-wr-plus2="on"] .mana-bar-text {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.7);
}

/* ---------- +2: the ability row, selected and not ----------
   Same problem as the bars, one row down: with the floor thinned and a
   champion behind it, the Q/W/E cards and the potion sit ON the picture.
   Both states get the cast shadow — unselected so the row reads as cards
   lying over the art, selected so the aqua ring is a lift rather than a
   sticker.

   The selected states are ANIMATED in the stock and Modern sheets
   (wr-btn-selected, extra-selected-pulse), and a running keyframe writes
   box-shadow every frame — a plain declaration underneath it is inert. So
   the pulse is re-authored here with the drop folded into both ends
   instead of being fought with. The static value above each animation is
   what reduced motion falls back to. */
html[data-wr="on"][data-wr-plus2="on"] .ability-btn,
html[data-wr="on"][data-wr-plus2="on"] .extra-btn {
  box-shadow:
    inset 0 1px 0 rgba(200, 170, 110, 0.02),
    0 3px 8px rgba(0, 0, 0, 0.70),
    0 0 18px rgba(1, 10, 19, 0.50);
}

html[data-wr="on"][data-wr-plus2="on"] .ability-btn:not(.disabled):hover {
  box-shadow:
    var(--wr-glow-aqua-soft),
    0 3px 8px rgba(0, 0, 0, 0.70),
    0 0 18px rgba(1, 10, 19, 0.50);
}

html[data-wr="on"][data-wr-plus2="on"] .ability-btn.selected {
  box-shadow: 0 0 0 1px var(--wr-aqua), var(--wr-glow-aqua),
              0 3px 8px rgba(0, 0, 0, 0.70);
  animation: wp-btn-selected 2.6s ease-in-out infinite;
}
@keyframes wp-btn-selected {
  0%, 100% { box-shadow: 0 0 0 1px var(--wr-aqua), var(--wr-glow-aqua-soft),
                         0 3px 8px rgba(0, 0, 0, 0.70); }
  50%      { box-shadow: 0 0 0 1px var(--wr-ice), var(--wr-glow-aqua),
                         0 3px 8px rgba(0, 0, 0, 0.70); }
}

html[data-wr="on"][data-wr-plus2="on"] .extra-btn.selected {
  box-shadow: 0 0 10px rgba(10, 200, 185, 0.5), 0 0 20px rgba(10, 200, 185, 0.2),
              0 3px 8px rgba(0, 0, 0, 0.70);
  animation: wp-extra-selected 1.5s ease-in-out infinite;
}
@keyframes wp-extra-selected {
  0%, 100% { box-shadow: 0 0 10px rgba(10, 200, 185, 0.4),
                         0 3px 8px rgba(0, 0, 0, 0.70); }
  50%      { box-shadow: 0 0 16px rgba(10, 200, 185, 0.65),
                         0 0 24px rgba(10, 200, 185, 0.25),
                         0 3px 8px rgba(0, 0, 0, 0.70); }
}

/* wr-arena.css stops the stock pulses under reduced motion at a lower
   specificity than the rules above, so they would out-rank it and keep
   animating. Stop the re-authored ones here too — the drop stays, only the
   breathing goes. */
@media (prefers-reduced-motion: reduce) {
  html[data-wr="on"][data-wr-plus2="on"] .ability-btn.selected,
  html[data-wr="on"][data-wr-plus2="on"] .extra-btn.selected { animation: none; }
}


/* ---------- the champion attends the draft ----------
   wr-plus.js mirrors the live figure into #vortex-overlay while a draft is
   up (see syncDraftFigure): the overlay's own background dims the whole
   page, so the copy rides INSIDE it — above that veil, before .vx-shell so
   the relic cards stay on top. A touch brighter than the room's figure,
   because it is standing in the draft's dusk rather than the arena's light. */
#vortex-overlay .wp-vx-figure { display: none; }
html[data-wr="on"][data-wr-plus="on"] #vortex-overlay .wp-vx-figure {
  display: block;
  position: absolute;
  top: 0; bottom: 0;
  width: 44%;
  object-fit: cover;
  object-position: top center;
  opacity: 0.5;
  filter: saturate(1.05) brightness(0.95);
  pointer-events: none;
  animation: wp-vx-in 700ms var(--wr-ease-out, ease-out) both;
}
html[data-wr="on"][data-wr-plus="on"] #vortex-overlay .wp-vx-figure[data-side="player"] {
  left: 0;
  -webkit-mask-image: linear-gradient(95deg, transparent 0%, black 8%, black 46%, transparent 90%);
  mask-image: linear-gradient(95deg, transparent 0%, black 8%, black 46%, transparent 90%);
}
html[data-wr="on"][data-wr-plus="on"] #vortex-overlay .wp-vx-figure[data-side="enemy"] {
  right: 0;
  -webkit-mask-image: linear-gradient(265deg, transparent 0%, black 8%, black 46%, transparent 90%);
  mask-image: linear-gradient(265deg, transparent 0%, black 8%, black 46%, transparent 90%);
}
@keyframes wp-vx-in {
  from { opacity: 0; transform: translateX(var(--wp-from, -2%)); }
  to   { opacity: 0.5; transform: translateX(0); }
}
/* The figure leaving — the crossfade's other half (see seatDraftFigure in
   wr-plus.js). Its entrance animation is cut so the fill-mode cannot pin the
   opacity it is fading down from. */
html[data-wr="on"][data-wr-plus="on"] #vortex-overlay .wp-vx-figure.wp-out {
  animation: none;
  opacity: 0;
  transition: opacity .55s ease;
}
@media (prefers-reduced-motion: reduce) {
  html[data-wr="on"][data-wr-plus="on"] #vortex-overlay .wp-vx-figure { animation: none; transition: none; }
}
@media (max-width: 820px) {
  html[data-wr="on"][data-wr-plus="on"] #vortex-overlay .wp-vx-figure { display: none; }
}