/* ============================================================================
   Victory and defeat
   ----------------------------------------------------------------------------
   The player did not steer the fight, so this screen is where the result is
   actually delivered. It arrives in sequence — banner, stars, the hero who
   carried it, then the spoils — rather than all at once as a report.

   Depends on tokens.css and kit.css.
   ========================================================================== */

.rs {
  position: relative;
  isolation: isolate;
  min-height: 100%;
  padding-bottom: var(--s6);
  background:
    radial-gradient(130% 60% at 50% 0%, rgba(90, 70, 24, 0.5), transparent 62%),
    linear-gradient(180deg, #151a28, #0a0d14);
}
/* The painted sky, laid over the gradient and under everything else. Held at
   half strength and faded out before the spoils list: it is weather, and the
   banner has to stay the brightest thing on the screen.
   An element rather than a pseudo, because the screen sets its image inline —
   a url() handed to CSS through a custom property resolves against this
   stylesheet and goes looking for it under styles/. */
.rs-sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0.5;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.35) 48%, transparent 76%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.35) 48%, transparent 76%);
}
.rs.lost {
  background:
    radial-gradient(130% 60% at 50% 0%, rgba(70, 24, 24, 0.44), transparent 62%),
    linear-gradient(180deg, #171318, #0a0d14);
}

/* --- banner ---------------------------------------------------------------- */

/* The cloth is the container's own backdrop rather than a child, so the
   verdict can simply sit in the middle of it instead of being positioned
   against it by hand. The art's blank panel runs from about 12% to 62% of
   its height, which is what the padding is aiming at. */
.rs-banner {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  min-height: 250px;
  padding: 92px var(--s4) var(--s3);
  animation: rs-drop 620ms var(--ease-back) backwards;
}

/* Only a win hangs a banner, so only a win reserves the height for one. */
.rs.lost .rs-banner { min-height: 0; padding-top: var(--s8); }

.rs.won .rs-banner {
  background-repeat: no-repeat;
  background-position: top center;
  background-size: auto 250px;
}
@keyframes rs-drop {
  0% { opacity: 0; transform: translateY(-80px); }
  70% { opacity: 1; transform: translateY(6px); }
  100% { transform: none; }
}



.rs-verdict {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 7.4vw, 2.3rem);
  letter-spacing: 0.03em;
  color: var(--gold-100);
  text-shadow:
    0 3px 0 rgba(72, 34, 6, 0.9),
    0 0 30px rgba(255, 196, 92, 0.5),
    0 10px 24px rgba(0, 0, 0, 0.7);
  /* Lands with a shake rather than simply stopping. */
  animation: rs-land 420ms var(--ease-out) 480ms backwards;
}
.rs.lost .rs-verdict {
  color: #ffd9d4;
  text-shadow: 0 3px 0 rgba(70, 14, 10, 0.9), 0 0 26px rgba(230, 80, 70, 0.4);
}
@keyframes rs-land {
  0%, 100% { transform: translateX(0); }
  22% { transform: translateX(-5px); }
  44% { transform: translateX(4px); }
  70% { transform: translateX(-2px); }
}

.rs-sub {
  margin: calc(var(--s2) * -1) auto 0;
  padding: 0 var(--s4);
  max-width: 88%;
  text-align: center;
  font-size: var(--fz-small);
  line-height: 1.35;
  color: var(--text-dim);
}

/* --- stars ------------------------------------------------------------------
   Each one stamps in from above its slot, 220ms apart, so three stars read as
   three events rather than one row appearing. */

.rs-stars {
  display: flex;
  justify-content: center;
  gap: var(--s3);
  padding: var(--s3) 0 var(--s2);
}

.rs-star {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  /* An empty socket, so three slots are always visible and the player can
     see what is still on the table. */
  background: rgba(8, 11, 18, 0.55);
  box-shadow: var(--carve), inset 0 0 0 2px rgba(255, 255, 255, 0.08);
}
.rs-star .gi { filter: grayscale(1) brightness(0.42); opacity: 0.5; }

.rs-star.got {
  background: radial-gradient(60% 60% at 50% 35%, rgba(255, 206, 120, 0.3), transparent 70%);
  box-shadow: 0 0 18px rgba(255, 190, 90, 0.35);
  animation: rs-stamp 520ms var(--ease-back) backwards;
  animation-delay: calc(760ms + var(--i) * 220ms);
}
.rs-star.got .gi { filter: none; opacity: 1; }
@keyframes rs-stamp {
  0% { opacity: 0; transform: scale(2.4) translateY(-26px) rotate(-18deg); filter: blur(5px); }
  60% { opacity: 1; transform: scale(0.88) translateY(0) rotate(3deg); filter: none; }
  100% { transform: none; }
}

/* The burst each star throws as it lands. */
.rs-star.got::after {
  content: '';
  position: absolute;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2px solid var(--gold-200);
  opacity: 0;
  animation: rs-star-ring 520ms var(--ease-out) backwards;
  animation-delay: calc(900ms + var(--i) * 220ms);
}
@keyframes rs-star-ring {
  0% { opacity: 0.9; transform: scale(0.3); }
  100% { opacity: 0; transform: scale(1.9); }
}

.rs-star-hint {
  margin: 0;
  text-align: center;
  font-size: var(--fz-small);
  color: var(--text-dim);
}

.rs-body { display: grid; gap: var(--s3); padding: var(--s3) var(--s4) 0; }

/* --- MVP --------------------------------------------------------------------
   The hero who carried it, at full height with a halo behind. A thumbnail in
   a row says "line item"; this says "this one". */

.rs-mvp {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: var(--s3);
  min-height: 186px;
  padding: var(--s3);
  border-radius: var(--rad-lg);
  background: var(--panel-face);
  box-shadow: var(--bevel), var(--shelf-md) var(--ink-800), var(--cast-md);
  overflow: hidden;
  animation: kit-rise var(--t-base) var(--ease-out) 420ms backwards;
}

.rs-mvp-halo {
  position: absolute;
  left: 14%;
  bottom: -30%;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 206, 120, 0.55), transparent 68%);
  animation: rs-halo 3.4s ease-in-out infinite;
}
@keyframes rs-halo {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.1); opacity: 1; }
}

.rs-mvp-art {
  position: relative;
  height: 178px;
  width: auto;
  flex: none;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.65));
  transform-origin: 50% 100%;
}

.rs-mvp-text { position: relative; display: grid; gap: 2px; padding-bottom: var(--s2); }
.rs-mvp-tag {
  font-size: var(--fz-tiny);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-300);
}
.rs-mvp-name {
  font-family: var(--font-display);
  font-size: var(--fz-title);
  line-height: 1.15;
  color: var(--text-cream);
}
.rs-mvp-line { font-size: var(--fz-small); color: var(--text-muted); }

/* --- rewards ----------------------------------------------------------------
   Each card flips face-up in turn, its number counts, then a copy of the icon
   flies to the balance it belongs to. */

.rs-rewards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
  gap: var(--s2);
}

.rs-reward {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: var(--s2) var(--s1);
  border-radius: var(--rad-md);
  background: var(--panel-sunken);
  box-shadow: var(--carve);
  animation: rs-flip 420ms var(--ease-back) backwards;
  animation-delay: calc(320ms + var(--i) * 110ms);
}
@keyframes rs-flip {
  0% { opacity: 0; transform: rotateY(90deg) scale(0.8); }
  100% { opacity: 1; transform: none; }
}

.rs-reward-icon { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6)); }
.rs-reward-amt {
  font-size: var(--fz-small);
  color: var(--gold-200);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
}

/* The flying copy. Fixed, so it can cross from the card to the top bar. */
.rs-fly {
  position: fixed;
  z-index: var(--z-toast);
  pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
}

.cur-chip.is-credited { animation: kit-credit 420ms var(--ease-spring); }

.rs-arena { margin: 0; text-align: center; color: var(--text-muted); font-size: var(--fz-body); }

/* --- advice ------------------------------------------------------------------ */

.rs-advice { display: grid; gap: var(--s2); }

.rs-advice-row {
  display: flex;
  align-items: center;
  gap: var(--s2);
  width: 100%;
  min-height: var(--tap);
  padding: var(--s2) var(--s3);
  text-align: left;
  color: var(--text-cream);
  border: 0;
  border-radius: var(--rad-md);
  background: var(--panel-face-raised);
  box-shadow: var(--bevel), var(--shelf-sm) var(--ink-800);
  cursor: pointer;
}
.rs-advice-row:active { transform: translateY(2px); box-shadow: var(--bevel); }
.rs-advice-text { flex: 1; display: grid; gap: 1px; }
.rs-advice-text b { font-family: var(--font-display); font-weight: 400; font-size: var(--fz-body); }
.rs-advice-hint { font-size: var(--fz-small); color: var(--text-dim); }

/* --- contribution chart ------------------------------------------------------ */

.rs-report-wrap { display: grid; gap: var(--s2); }
.rs-report { display: grid; gap: var(--s2); }

.rs-chart { display: grid; gap: var(--s2); }

.rs-chart-row { display: flex; align-items: center; gap: var(--s2); }
.rs-chart-row.fell { opacity: 0.55; }
.rs-chart-face { width: 34px; flex: none; }
.rs-chart-face .portrait { width: 34px; }
.rs-chart-body { flex: 1; display: grid; gap: 3px; min-width: 0; }

.rs-chart-name {
  display: flex;
  gap: var(--s2);
  font-size: var(--fz-small);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rs-chart-fell { color: var(--alert); font-size: var(--fz-tiny); }

.rs-chart-track {
  position: relative;
  display: flex;
  height: 9px;
  border-radius: var(--rad-pill);
  background: rgba(4, 6, 11, 0.75);
  box-shadow: var(--carve);
  overflow: hidden;
}
.rs-chart-track i { display: block; height: 100%; }
.rs-chart-dmg { background: linear-gradient(180deg, #ffb469, #c35a16); }
.rs-chart-sup { background: linear-gradient(180deg, #7df09a, #27923f); }

.rs-chart-num {
  width: 56px;
  text-align: right;
  font-size: var(--fz-small);
  color: var(--text-muted);
}

.rs-chart-key {
  display: flex;
  gap: var(--s3);
  font-size: var(--fz-tiny);
  color: var(--text-dim);
}
.rs-chart-key span { display: inline-flex; align-items: center; gap: 4px; }
.rs-chart-key i { width: 12px; height: 8px; border-radius: 2px; }

.rs-actions { display: flex; gap: var(--s2); }

@media (prefers-reduced-motion: reduce) {
  .rs-banner, .rs-verdict, .rs-star.got, .rs-star.got::after,
  .rs-reward, .rs-mvp, .rs-mvp-halo { animation: none; }
  .rs-star.got { opacity: 1; filter: none; }
}