/* ============================================================
   MODERN THEME — victory / defeat
   The stock end screen is a rounded card with a coloured word in it.
   The reference does something different: the battlefield stays on
   screen, blurred and dimmed, and a heavy plaque drops onto it inside a
   burst of light with tendrils spreading behind. The result is a moment,
   not a dialog.

   Structure is the page's own (.end-screen > .end-screen-card > title /
   sub / stats / actions) — nothing is re-templated, so the engine keeps
   writing the same nodes it always has.
   ============================================================ */

/* ---------- the field behind ----------
   Deeper blur and a warm vignette instead of the flat black wash, so the
   board reads as "behind glass" rather than "covered up". */
html[data-wr="on"] .end-screen {
  background:
    radial-gradient(ellipse 60% 50% at 50% 42%, rgba(30, 22, 8, .34), transparent 70%),
    radial-gradient(circle at center, rgba(4, 8, 14, .62), rgba(0, 0, 0, .88));
  backdrop-filter: blur(7px) saturate(.75);
  -webkit-backdrop-filter: blur(7px) saturate(.75);
}

/* the card stops being a card */
html[data-wr="on"] .end-screen-card {
  position: relative;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  max-width: 720px;
  overflow: visible;
}

/* ---------- light burst ----------
   Two layers on one element: a hot core that blooms and collapses, and a
   slow aqua wash that outlives it. Sits behind the plaque. */
html[data-wr="on"] .end-screen-card::before {
  content: '';
  position: absolute;
  left: 50%; top: 46px;
  width: 620px; height: 620px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(200, 240, 255, .8) 8%,
      rgba(90, 200, 245, .48) 17%, rgba(24, 130, 195, .2) 30%, transparent 58%);
  animation: wr-vic-burst 1500ms cubic-bezier(.12, .7, .2, 1) both;
}
@keyframes wr-vic-burst {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.18); }
  14%  { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  40%  { opacity: .55; transform: translate(-50%, -50%) scale(.82); }
  100% { opacity: .34; transform: translate(-50%, -50%) scale(.9); }
}

/* ---------- tendrils ----------
   The wings that spread either side of the plaque. Drawn as two skewed
   conic slivers rather than art, so they scale and cost nothing. */
html[data-wr="on"] .end-screen-card::after {
  content: '';
  position: absolute;
  left: 50%; top: 40px;
  width: 780px; height: 260px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 42% 60% at 22% 50%, rgba(10, 210, 230, .5), transparent 68%),
    radial-gradient(ellipse 42% 60% at 78% 50%, rgba(10, 210, 230, .5), transparent 68%),
    radial-gradient(ellipse 16% 90% at 50% 50%, rgba(160, 240, 255, .58), transparent 72%);
  filter: blur(7px);
  animation: wr-vic-wings 1900ms var(--wr-ease-out) both;
}
@keyframes wr-vic-wings {
  0%   { opacity: 0; transform: translate(-50%, -50%) scaleX(.25); }
  55%  { opacity: 1; transform: translate(-50%, -50%) scaleX(1.06); }
  100% { opacity: .8; transform: translate(-50%, -50%) scaleX(1); }
}

/* ---------- the plaque ----------
   Notched ends and a peaked top, cut with clip-path; the gold is a
   gradient with a lit top edge and a dark underside so it reads as a
   cast object rather than a coloured box. */
html[data-wr="on"] .end-screen-title {
  position: relative;
  z-index: 2;
  display: block;
  margin: 0 auto 18px;
  padding: 20px 76px 22px;
  width: max-content;
  min-width: 380px;
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  font-size: 52px;
  letter-spacing: .16em;
  line-height: 1;
  clip-path: polygon(
    0% 34%, 8% 12%, 34% 12%, 50% 0%, 66% 12%, 92% 12%, 100% 34%,
    100% 74%, 92% 100%, 66% 88%, 50% 100%, 34% 88%, 8% 100%, 0% 74%);
  animation: wr-vic-plaque 900ms var(--wr-ease-slam) both;
}
@keyframes wr-vic-plaque {
  0%   { opacity: 0; transform: translateY(-38px) scale(1.22); filter: brightness(2.4); }
  55%  { opacity: 1; transform: translateY(4px)   scale(.98);  filter: brightness(1.15); }
  100% { opacity: 1; transform: translateY(0)     scale(1);    filter: brightness(1); }
}

/* Giving it thickness.
   box-shadow is clipped away by clip-path, but drop-shadow follows the
   clipped silhouette — so stacking a few hard, offset ones extrudes the
   plaque into a slab with a dark under-edge, and one soft wide shadow
   sits it on the scene instead of floating over it. */
html[data-wr="on"] .end-screen-title.victory {
  color: #fff6dd;
  background:
    /* hard specular band across the upper third, the way cast gold catches */
    linear-gradient(180deg,
      #fdf3d6 0%, #f0d79a 13%, #e0b869 22%,
      #b98d3f 40%, #8d6528 63%, #6b4c1d 82%, #4a3413 100%),
    radial-gradient(ellipse 70% 40% at 50% 6%, rgba(255, 255, 255, .55), transparent 70%);
  text-shadow:
    0 1px 0 rgba(255, 244, 214, .55),        /* lit top of the letterform */
    0 -1px 0 rgba(60, 38, 8, .5),
    0 3px 5px rgba(40, 25, 4, .75),
    0 0 28px rgba(255, 226, 150, .6);
  filter:
    /* lit upper rim first, then the dark thickness below it */
    drop-shadow(0 -2px 0 #f7e7bd)
    drop-shadow(0 2px 0 #6b4c1d)
    drop-shadow(0 4px 0 #46300f)
    drop-shadow(0 6px 0 #2b1d09)
    drop-shadow(0 18px 26px rgba(0, 0, 0, .72))
    drop-shadow(0 0 34px rgba(255, 205, 120, .45));
}
html[data-wr="on"] .end-screen-title.defeat {
  color: #ffe2de;
  background:
    linear-gradient(180deg,
      #c08e8b 0%, #a86a68 13%, #8e4747 22%,
      #6c2e2e 40%, #4e1e1e 63%, #391414 82%, #240c0c 100%),
    radial-gradient(ellipse 70% 40% at 50% 6%, rgba(255, 255, 255, .3), transparent 70%);
  text-shadow:
    0 1px 0 rgba(255, 220, 214, .35),
    0 -1px 0 rgba(30, 6, 6, .55),
    0 3px 5px rgba(20, 4, 4, .8),
    0 0 22px rgba(220, 90, 80, .45);
  filter:
    drop-shadow(0 -2px 0 #b98583)
    drop-shadow(0 2px 0 #3d1717)
    drop-shadow(0 4px 0 #290f0f)
    drop-shadow(0 6px 0 #170707)
    drop-shadow(0 16px 22px rgba(0, 0, 0, .7));
}
/* defeat gets no fanfare */
html[data-wr="on"] .end-screen-card:has(.end-screen-title.defeat)::before,
html[data-wr="on"] .end-screen-card:has(.end-screen-title.defeat)::after { display: none; }

html[data-wr="on"] .end-screen-sub {
  position: relative; z-index: 2;
  font-family: var(--wr-font-display, serif);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--wr-gold-2);
  animation: wr-vic-fade 700ms 500ms var(--wr-ease) both;
}

/* ---------- the post-match report ----------
   #end-screen-stats is NOT a list of reward chips. showEndScreen fills it
   with a recount panel: Damage Done / Healing Done tabs, a ranked bar
   meter per champion, then quests and ELO. An earlier version of this file
   forced the container to `display:flex; flex-direction:row`, which laid
   the tab bar, both meters, the quests and the ELO block out side by side.
   It stays a block. Only the surface is themed. */
html[data-wr="on"] .end-screen-stats {
  position: relative; z-index: 2;
  display: block;
  width: min(78vw, 700px);
  margin: 18px auto 4px;
  text-align: left;
  animation: wr-vic-fade 700ms 650ms var(--wr-ease) both;
}

/* tabs read as a segmented control */
html[data-wr="on"] .end-screen-stats .rc-tab {
  font-family: var(--wr-font-display, serif);
  letter-spacing: .16em;
  text-transform: uppercase;
  clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}
html[data-wr="on"] .end-screen-stats .rc-tab.active {
  color: var(--wr-ice);
  box-shadow: inset 0 -2px 0 var(--wr-aqua);
}
/* the bars keep the engine's per-champion colour — it writes that inline */
html[data-wr="on"] .end-screen-stats .rc-row { align-items: center; }
html[data-wr="on"] .end-screen-stats .rc-bar-wrap {
  box-shadow: inset 0 0 0 1px rgba(200, 170, 110, .18);
}
html[data-wr="on"] .end-screen-stats .rc-val,
html[data-wr="on"] .end-screen-stats .rc-total {
  font-variant-numeric: tabular-nums;
}

html[data-wr="on"] .end-screen-actions {
  position: relative; z-index: 2;
  margin-top: 22px;
  animation: wr-vic-fade 700ms 800ms var(--wr-ease) both;
}
html[data-wr="on"] .end-screen-btn {
  font-family: var(--wr-font-display, serif);
  letter-spacing: .18em;
  text-transform: uppercase;
  clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(200, 170, 110, .45), inset 0 1px 0 rgba(240, 230, 210, .16);
}

@keyframes wr-vic-fade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- two stages ----------
   Stage 1 is the moment: plaque, subtitle, one button. Stage 2 is the
   report. wr-endscreen.js sets data-wr-stage and moves the stock stats and
   actions into the stage-2 wrapper, so both keep their own handlers. */
html[data-wr="on"] .end-screen-card[data-wr-stage="1"] .wr-es-stage2 { display: none; }
html[data-wr="on"] .end-screen-card[data-wr-stage="2"] .wr-es-continue { display: none; }

html[data-wr="on"] .wr-es-continue {
  position: relative; z-index: 2;
  display: block;
  margin: 26px auto 0;
  padding: 12px 46px;
  cursor: pointer;
  font-family: var(--wr-font-display, serif);
  font-size: 13px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #1e1503;
  background: linear-gradient(180deg, #f7e7bd 0%, #d8ae5e 48%, #9d7430 100%);
  border: 0;
  clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .55);
  animation: wr-vic-fade 700ms 620ms var(--wr-ease) both;
}
html[data-wr="on"] .wr-es-continue:hover { filter: brightness(1.1); }
/* on a loss the button should not look like a prize */
html[data-wr="on"] .end-screen-card:has(.end-screen-title.defeat) .wr-es-continue {
  color: #f0e6d2;
  background: linear-gradient(180deg, #3a2222 0%, #2a1616 48%, #1a0d0d 100%);
  box-shadow: inset 0 0 0 1px rgba(200, 170, 110, .35), 0 6px 18px rgba(0, 0, 0, .55);
}

/* ---------- stage 2: the report ---------- */
html[data-wr="on"] .wr-es-stage2 {
  position: relative; z-index: 2;
  width: min(78vw, 700px);
  margin: 20px auto 0;
  animation: wr-vic-fade 480ms var(--wr-ease) both;
}
/* the plaque steps back once the report is up — it has had its moment */
html[data-wr="on"] .end-screen-card[data-wr-stage="2"] .end-screen-title {
  font-size: 34px;
  padding: 13px 52px 14px;
  min-width: 260px;
  margin-bottom: 10px;
  transition: font-size 320ms var(--wr-ease);
}

/* ---------- the battle log, opened from the report ----------
   The log is the other half of stage 2 — the report says what the match
   PAID, the log says what happened — but it opened at min(560px, 94vw)
   while the report sits at min(78vw, 700px). Two panels about the same
   match, one visibly narrower than the other, and the log is the one full
   of long lines that most needed the room. Same width now, so opening it
   reads as the report turning over rather than a smaller thing on top.

   The surface follows the rest of the modern theme: navy panel over the
   hextech blur, aqua rule and heading, gold kept for the frame. The stock
   card is warm brown-on-gold and looked borrowed from the classic skin. */
html[data-wr="on"] #bn-log-peek {
  background:
    radial-gradient(circle at center, rgba(4, 8, 14, .58), rgba(0, 0, 0, .86));
  backdrop-filter: blur(7px) saturate(.75);
  -webkit-backdrop-filter: blur(7px) saturate(.75);
}
html[data-wr="on"] #bn-log-peek .bn-log-peek-card {
  position: relative;
  overflow: hidden;          /* keeps the aqua rule inside the rounded corners */
  width: min(78vw, 700px);
  max-height: 78vh;
  background: linear-gradient(180deg, var(--wr-panel, rgba(9, 20, 40, .86)), var(--wr-panel-2, rgba(1, 10, 19, .92)));
  border: 1px solid rgba(200, 170, 110, .34);
  border-radius: 4px;
  box-shadow: 0 22px 64px rgba(0, 0, 0, .66), inset 0 1px 0 rgba(205, 250, 250, .06);
  animation: wr-vic-fade 320ms var(--wr-ease) both;
}
/* A hairline of aqua along the top edge — the same tell the stage-2 panels
   carry, so the log is recognisably part of the same screen. */
html[data-wr="on"] #bn-log-peek .bn-log-peek-card::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--wr-aqua, #0ac8b9), transparent);
  opacity: .55;
}
html[data-wr="on"] #bn-log-peek .bn-log-peek-head {
  font-family: var(--wr-font-display, serif);
  letter-spacing: .2em;
  color: var(--wr-gold-1, #f0e6d2);
  border-bottom: 1px solid rgba(10, 200, 185, .22);
  background: linear-gradient(180deg, rgba(10, 200, 185, .07), transparent);
  padding: 13px 16px;
}
html[data-wr="on"] #bn-log-peek .bn-log-peek-x { color: var(--wr-grey-1, #a09b8c); }
html[data-wr="on"] #bn-log-peek .bn-log-peek-x:hover {
  color: var(--wr-ice, #cdfafa);
  background: rgba(10, 200, 185, .14);
}
html[data-wr="on"] #bn-log-peek .bn-log-peek-body { padding: 12px 16px 14px; }
html[data-wr="on"] #bn-log-peek .bn-log-peek-body::-webkit-scrollbar-thumb {
  background: rgba(10, 200, 185, .3);
}

@media (max-width: 620px) {
  html[data-wr="on"] #bn-log-peek .bn-log-peek-card { width: 94vw; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-wr="on"] .end-screen-card::before,
  html[data-wr="on"] .end-screen-card::after,
  html[data-wr="on"] .end-screen-title,
  html[data-wr="on"] .end-screen-sub,
  html[data-wr="on"] .end-screen-stats,
  html[data-wr="on"] .end-screen-actions,
  html[data-wr="on"] #bn-log-peek .bn-log-peek-card { animation: none; }
}

/* ---------- stage 2: the two people who played ----------
   The report's own stylesheet (engine.js, #recount-styles) builds the cards;
   this only re-skins them in the modern language — navy glass instead of the
   flat black wash, aqua on the loser's card, gold kept for the winner's, and
   the display face on the names so they read like the plaque above them. */
html[data-wr="on"] .rc-pl {
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(10, 200, 185, .05), rgba(1, 10, 19, .55));
  border-color: rgba(10, 200, 185, .18);
}
html[data-wr="on"] .rc-pl::before { background: rgba(10, 200, 185, .3); }
html[data-wr="on"] .rc-pl.win {
  background: linear-gradient(180deg, rgba(200, 170, 110, .13), rgba(1, 10, 19, .5));
  border-color: rgba(200, 170, 110, .5);
}
html[data-wr="on"] .rc-pl.win::before { background: linear-gradient(180deg, #f0d890, #c8aa6e); }
html[data-wr="on"] .rc-pav { border-color: rgba(10, 200, 185, .32); }
html[data-wr="on"] .rc-pl.win .rc-pav { border-color: rgba(240, 216, 144, .85); }
html[data-wr="on"] .rc-pname {
  font-family: var(--wr-font-display, serif);
  letter-spacing: .04em;
}
html[data-wr="on"] .rc-vs { color: var(--wr-grey-2, #5b5a56); }

/* ---------- stage 2: the log, in the report's slot and expanded ----------
   Same rules serve both: the panel that the actions-row button swaps in, and
   the full-size overlay behind Expand. Round bands take the aqua the rest of
   the modern theme uses for structure; gold stays on the ability casts, which
   are the lines a player is actually hunting for. */
html[data-wr="on"] .rc-loghead { border-bottom-color: rgba(10, 200, 185, .22); }
html[data-wr="on"] .rc-logtitle {
  font-family: var(--wr-font-display, serif);
  letter-spacing: .2em;
  color: var(--wr-gold-1, #f0e6d2);
}
html[data-wr="on"] .rc-logexpand { border-color: rgba(10, 200, 185, .28); }
html[data-wr="on"] .rc-logexpand:hover {
  color: var(--wr-ice, #cdfafa);
  border-color: rgba(10, 200, 185, .55);
  background: rgba(10, 200, 185, .13);
}
html[data-wr="on"] .bn-log-modern .log-turn-separator .turn-line {
  background: linear-gradient(90deg, transparent, rgba(10, 200, 185, .3), transparent);
}
html[data-wr="on"] .bn-log-modern .log-turn-separator .turn-label {
  color: var(--wr-ice, #cdfafa);
  border-color: rgba(10, 200, 185, .34);
  background: rgba(10, 200, 185, .09);
}
html[data-wr="on"] .bn-log-modern .log-entry:hover { background: rgba(10, 200, 185, .06); }