/* ============================================================
   MODERN THEME — post-match reward + quest screens
   Two beats shown over the arena's end screen once a match is
   counted: what you RECEIVED, then where your daily arena quests
   now stand. Data comes from the duel payload's `progression`
   (logic/arenaProgression.js) — the same summary the bot DMs, so
   the web client stops being the one place that doesn't tell you.

   Every rule is scoped under html[data-wr="on"]. With the theme
   off the layer is never built (wr-rewards.js bails), and this
   sheet has nothing left to match.
   ============================================================ */

/* Sits above the arena's own #end-screen (z 9000, absolute inside
   .battle-viewer) but below the FX canvas (2147482000) so bursts
   and rings read on top of the tiles, and below the toggle. */
html[data-wr="on"] #wr-rewards {
  position: fixed; inset: 0; z-index: 2147481000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--wr-font-ui);
  color: var(--wr-gold-1);
  /* Visible is the resting state; the fade is only on the way out. Starting
     at 0 and adding a class to reveal leaves the layer built and permanently
     invisible whenever the transition never advances — a background tab does
     exactly that, and the result is a full-screen click swallower over the
     end screen. The head/foot/tile animations carry the entrance. */
  opacity: 1;
  transition: opacity var(--wr-med) var(--wr-ease);
  cursor: pointer; user-select: none;
  overflow: hidden;
}
html[data-wr="on"] #wr-rewards.wr-rw-out { opacity: 0; }
html:not([data-wr="on"]) #wr-rewards { display: none; }

/* ---------- backdrop ---------- */
/* Near-opaque on purpose: this is a takeover screen, and the board behind
   it competing for the eye is exactly what the arena's own end screen
   already does. blur() is a bonus where it composites, never the plan. */
html[data-wr="on"] #wr-rewards .wr-rw-veil {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(8, 38, 48, .965) 0%, rgba(1, 10, 19, .988) 55%, rgba(1, 8, 15, .995) 100%);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}

/* The dashed arcs behind the tiles — Wild Rift's "an award is being
   handed over" motif. Slow rotation, opposite directions, low alpha:
   ambience, not a spinner. */
html[data-wr="on"] #wr-rewards .wr-rw-arcs {
  position: absolute; left: 50%; top: 50%; z-index: 0;
  width: min(150vh, 92vw); height: min(150vh, 92vw);
  transform: translate(-50%, -50%); pointer-events: none;
}
html[data-wr="on"] #wr-rewards .wr-rw-arcs circle {
  fill: none; stroke: rgba(200, 170, 110, .45); stroke-width: 1.4;
  transform-origin: 50% 50%;
}
html[data-wr="on"] #wr-rewards .wr-rw-arcs .wr-rw-arc-1 { animation: wr-rw-spin 90s linear infinite; }
html[data-wr="on"] #wr-rewards .wr-rw-arcs .wr-rw-arc-2 { animation: wr-rw-spin 140s linear infinite reverse; stroke: rgba(10, 200, 185, .22); }
html[data-wr="on"] #wr-rewards .wr-rw-arcs .wr-rw-arc-3 { animation: wr-rw-spin 200s linear infinite; }
@keyframes wr-rw-spin { to { transform: rotate(360deg); } }

/* A single slow horizontal light sweep behind the title, the only
   moving light in the scene. */
html[data-wr="on"] #wr-rewards .wr-rw-glow {
  position: absolute; left: 0; right: 0; top: 50%; height: 340px; transform: translateY(-50%);
  z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(10, 200, 185, .10) 35%, rgba(205, 250, 250, .13) 50%, rgba(10, 200, 185, .10) 65%, transparent);
  animation: wr-rw-sweep 9s var(--wr-ease) infinite;
}
@keyframes wr-rw-sweep {
  0%, 100% { opacity: .35; transform: translate(-3%, -50%); }
  50%      { opacity: .75; transform: translate(3%, -50%); }
}

/* ---------- header / footer rules ----------
   The three content bands carry an explicit z-index because the veil, glow
   and arcs above are absolutely positioned siblings that would otherwise
   paint last and bury them. */
html[data-wr="on"] #wr-rewards .wr-rw-head {
  position: relative; z-index: 1; width: 100%; text-align: center; padding: 26px 0 18px;
  border-bottom: 1px solid rgba(200, 170, 110, .38);
  background: linear-gradient(180deg, rgba(1, 10, 19, .75), transparent);
  animation: wr-rw-drop var(--wr-slow) var(--wr-ease-out) both;
}
html[data-wr="on"] #wr-rewards .wr-rw-title {
  font-family: var(--wr-font-display); font-size: clamp(24px, 3.4vw, 44px);
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--wr-gold-1);
  text-shadow: 0 0 26px rgba(200, 170, 110, .45), 0 2px 14px rgba(0, 0, 0, .8);
}
html[data-wr="on"] #wr-rewards .wr-rw-sub {
  margin-top: 6px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--wr-grey-1);
}
html[data-wr="on"] #wr-rewards .wr-rw-foot {
  position: relative; z-index: 1; width: 100%; text-align: center; padding: 16px 0 22px;
  border-top: 1px solid rgba(200, 170, 110, .38);
  background: linear-gradient(0deg, rgba(1, 10, 19, .75), transparent);
  font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--wr-grey-1);
  animation: wr-rw-rise var(--wr-slow) var(--wr-ease-out) both;
}
html[data-wr="on"] #wr-rewards .wr-rw-foot b { color: var(--wr-gold-2); font-weight: 700; }
@keyframes wr-rw-drop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes wr-rw-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- stage ---------- */
html[data-wr="on"] #wr-rewards .wr-rw-body {
  position: relative; z-index: 1; flex: 1; width: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 18px 20px;
}
html[data-wr="on"] #wr-rewards .wr-rw-stage { display: none; width: 100%; }
html[data-wr="on"] #wr-rewards .wr-rw-stage.on { display: block; }

/* ---------- beat 1: the tiles ---------- */
html[data-wr="on"] #wr-rewards .wr-rw-tiles {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center;
  gap: clamp(10px, 1.6vw, 22px);
}
html[data-wr="on"] #wr-rewards .wr-rw-tile {
  position: relative; width: clamp(120px, 13vw, 186px);
  display: flex; flex-direction: column; align-items: center;
  opacity: 0;
}
html[data-wr="on"] #wr-rewards .wr-rw-tile.show { animation: wr-rw-tile-in 620ms var(--wr-ease-slam) both; }
@keyframes wr-rw-tile-in {
  from { opacity: 0; transform: translateY(18px) scale(.88); filter: brightness(1.9); }
  to   { opacity: 1; transform: none; filter: none; }
}
html[data-wr="on"] #wr-rewards .wr-rw-frame {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(10, 40, 52, .92), rgba(1, 10, 19, .95));
  border: 1px solid var(--wr-gold-3);
  box-shadow: inset 0 1px 0 rgba(240, 230, 210, .10), 0 14px 34px rgba(0, 0, 0, .6);
}
/* clipped gold corners — the same bevel the toggle uses */
html[data-wr="on"] #wr-rewards .wr-rw-frame::before,
html[data-wr="on"] #wr-rewards .wr-rw-frame::after {
  content: ''; position: absolute; width: 14px; height: 14px;
  border: 1px solid var(--wr-gold-2); pointer-events: none;
}
html[data-wr="on"] #wr-rewards .wr-rw-frame::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
html[data-wr="on"] #wr-rewards .wr-rw-frame::after  { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
html[data-wr="on"] #wr-rewards .wr-rw-glyph {
  font-size: clamp(44px, 5.6vw, 80px); line-height: 1;
  filter: drop-shadow(0 0 16px rgba(10, 200, 185, .45));
}
html[data-wr="on"] #wr-rewards .wr-rw-count {
  width: 100%; text-align: center; padding: 5px 0 4px;
  font-family: var(--wr-font-display); font-size: clamp(15px, 1.5vw, 21px); font-weight: 700;
  color: var(--wr-gold-1);
  background: linear-gradient(180deg, rgba(1, 10, 19, .95), rgba(1, 10, 19, .70));
  border: 1px solid var(--wr-gold-3); border-top: 0;
}
html[data-wr="on"] #wr-rewards .wr-rw-name {
  margin-top: 7px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--wr-grey-1); text-align: center;
}
/* first-time / milestone tiles wear the aqua rim */
html[data-wr="on"] #wr-rewards .wr-rw-tile.rare .wr-rw-frame {
  border-color: var(--wr-blue-3); box-shadow: var(--wr-glow-aqua-soft), 0 14px 34px rgba(0, 0, 0, .6);
}
html[data-wr="on"] #wr-rewards .wr-rw-tile.rare .wr-rw-count { border-color: var(--wr-blue-3); color: var(--wr-ice); }

/* footnotes under the tiles (long-game bonus, starter quest, no-credit) */
html[data-wr="on"] #wr-rewards .wr-rw-notes {
  margin-top: clamp(14px, 2vw, 26px); text-align: center;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; color: var(--wr-grey-1);
  animation: wr-rw-rise var(--wr-slow) var(--wr-ease-out) both; animation-delay: 300ms;
}
html[data-wr="on"] #wr-rewards .wr-rw-notes .good { color: var(--wr-gold-2); }
html[data-wr="on"] #wr-rewards .wr-rw-notes b { color: var(--wr-gold-1); font-weight: 700; }

/* ---------- beat 2: quest progress ---------- */
html[data-wr="on"] #wr-rewards .wr-rw-quests {
  width: min(760px, 92vw); margin: 0 auto;
  display: flex; flex-direction: column; gap: 10px;
}
html[data-wr="on"] #wr-rewards .wr-rw-q {
  position: relative;
  display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 14px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(10, 40, 52, .55), rgba(1, 10, 19, .80));
  border: 1px solid rgba(200, 170, 110, .28);
  opacity: 0;
}
html[data-wr="on"] #wr-rewards .wr-rw-q.show { animation: wr-rw-q-in 520ms var(--wr-ease-out) both; }
@keyframes wr-rw-q-in { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
html[data-wr="on"] #wr-rewards .wr-rw-q-icon {
  width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  background: rgba(1, 10, 19, .8); border: 1px solid var(--wr-gold-3);
}
html[data-wr="on"] #wr-rewards .wr-rw-q.done .wr-rw-q-icon { border-color: rgba(10, 200, 185, .55); }
html[data-wr="on"] #wr-rewards .wr-rw-q-name {
  font-size: 14px; font-weight: 700; letter-spacing: .06em; color: var(--wr-gold-1);
}
html[data-wr="on"] #wr-rewards .wr-rw-q-reward {
  margin-top: 2px; font-size: 11.5px; letter-spacing: .04em; color: var(--wr-grey-1);
}
html[data-wr="on"] #wr-rewards .wr-rw-q-bar {
  position: relative; height: 7px; margin-top: 7px;
  background: rgba(1, 10, 19, .9); border: 1px solid rgba(200, 170, 110, .22); overflow: hidden;
}
html[data-wr="on"] #wr-rewards .wr-rw-q-fill {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: linear-gradient(90deg, var(--wr-gold-3), var(--wr-gold-2));
  box-shadow: 0 0 10px rgba(200, 170, 110, .5);
  /* the step from `was` to `have`: slow enough to read as movement */
  transition: width 900ms var(--wr-ease-out);
}
html[data-wr="on"] #wr-rewards .wr-rw-q.done .wr-rw-q-fill {
  background: linear-gradient(90deg, var(--wr-blue-4), var(--wr-aqua));
  box-shadow: var(--wr-glow-aqua-soft);
}
html[data-wr="on"] #wr-rewards .wr-rw-q-val {
  font-family: var(--wr-font-display); font-size: 17px; font-weight: 700;
  color: var(--wr-gold-1); min-width: 62px; text-align: right;
}
html[data-wr="on"] #wr-rewards .wr-rw-q.done { border-color: rgba(10, 200, 185, .55); }
html[data-wr="on"] #wr-rewards .wr-rw-q.done .wr-rw-q-val { color: var(--wr-ice); }
/* The row that crossed its target THIS match gets the one flare. It rides an
   overlay child, not the row: the row's own `animation` is already spoken for
   by .show's slide-in, and a second rule setting `animation` on the same
   element replaces it rather than adding to it — which left the cleared row
   stuck at opacity 0, the state .show's fill-mode was supposed to leave. */
html[data-wr="on"] #wr-rewards .wr-rw-q.cleared::after {
  content: ''; position: absolute; inset: -1px; pointer-events: none;
  animation: wr-rw-clear 1100ms var(--wr-ease) 1 both;
}
@keyframes wr-rw-clear {
  0%   { box-shadow: none; }
  30%  { box-shadow: 0 0 0 1px var(--wr-aqua), var(--wr-glow-aqua); }
  100% { box-shadow: none; }
}
html[data-wr="on"] #wr-rewards .wr-rw-q-pill {
  display: inline-block; margin-top: 6px; padding: 2px 8px;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
  color: var(--wr-black); background: var(--wr-aqua);
}
html[data-wr="on"] #wr-rewards .wr-rw-q-pill.claimed { background: var(--wr-grey-2); color: var(--wr-gold-1); }

/* ---------- calm-motion guard ---------- */
@media (prefers-reduced-motion: reduce) {
  html[data-wr="on"] #wr-rewards .wr-rw-arcs .wr-rw-arc-1,
  html[data-wr="on"] #wr-rewards .wr-rw-arcs .wr-rw-arc-2,
  html[data-wr="on"] #wr-rewards .wr-rw-arcs .wr-rw-arc-3,
  html[data-wr="on"] #wr-rewards .wr-rw-glow,
  html[data-wr="on"] #wr-rewards .wr-rw-head,
  html[data-wr="on"] #wr-rewards .wr-rw-foot,
  html[data-wr="on"] #wr-rewards .wr-rw-notes,
  html[data-wr="on"] #wr-rewards .wr-rw-tile.show,
  html[data-wr="on"] #wr-rewards .wr-rw-q.show,
  html[data-wr="on"] #wr-rewards .wr-rw-q.cleared::after { animation: none; }
  html[data-wr="on"] #wr-rewards .wr-rw-tile { opacity: 1; }
  html[data-wr="on"] #wr-rewards .wr-rw-q { opacity: 1; }
  html[data-wr="on"] #wr-rewards .wr-rw-q-fill { transition: none; }
}

/* ---------- narrow screens ---------- */
@media (max-width: 720px) {
  html[data-wr="on"] #wr-rewards .wr-rw-tile { width: clamp(84px, 26vw, 120px); }
  html[data-wr="on"] #wr-rewards .wr-rw-q { grid-template-columns: 38px 1fr auto; gap: 10px; padding: 10px; }
  html[data-wr="on"] #wr-rewards .wr-rw-q-icon { width: 38px; height: 38px; font-size: 19px; }
  html[data-wr="on"] #wr-rewards .wr-rw-q-reward { display: none; }
}