/*
 * The post-battle reinforcement screen.
 *
 * Rarity is expressed as a small set of custom properties set per road / per reveal, so every
 * effect below reads from `--rr` (the rarity colour) rather than hard-coding six variants of
 * each rule. Secret is the one rarity that genuinely differs in kind, not degree: it drains the
 * scene rather than adding to it.
 */

.reinforce {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: radial-gradient(1200px 800px at 50% 20%, #171423 0%, #0a0910 70%, #06050a 100%);
  --rr: #777b7f;
}

.rf-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(70% 60% at 50% 45%, transparent 40%, rgba(4,3,8,.82) 100%);
  transition: opacity var(--t-slow) var(--ease-out);
}

/* ---- Rarity palette ---- */
.reinforce [data-rarity="common"]    { --rr: #8b9096; --rr-soft: rgba(139,144,150,.30); }
.reinforce [data-rarity="uncommon"]  { --rr: #5797d3; --rr-soft: rgba(87,151,211,.32); }
.reinforce [data-rarity="rare"]      { --rr: #a56be0; --rr-soft: rgba(165,107,224,.34); }
.reinforce [data-rarity="epic"]      { --rr: #e0625a; --rr-soft: rgba(224,98,90,.34); }
.reinforce [data-rarity="legendary"] { --rr: #e8bd63; --rr-soft: rgba(232,189,99,.36); }
.reinforce [data-rarity="secret"]    { --rr: #f2f7ff; --rr-soft: rgba(210,226,255,.22); }

/* ------------------------------------------------------------------ *
 * Stage
 * ------------------------------------------------------------------ */

.rf-stage {
  position: relative;
  z-index: 3;
  width: min(1100px, 94vw);
  text-align: center;
  transition: filter var(--t-med) var(--ease-out), opacity var(--t-med) var(--ease-out);
}
.rf-stage[hidden] { display: none; }
.rf-stage.dimmed { filter: brightness(.35) saturate(.5); opacity: .5; }

.rf-head { margin-bottom: var(--sp-5); }

.rf-title {
  font-size: clamp(30px, 5vw, 52px);
  letter-spacing: .16em;
  color: var(--brass-0);
  text-shadow: 0 0 40px rgba(212,166,86,.35);
  animation: rf-title-in var(--t-slow) var(--ease-out);
}
@keyframes rf-title-in {
  from { opacity: 0; transform: translateY(10px) scale(.97); letter-spacing: .32em; }
  to   { opacity: 1; transform: none; letter-spacing: .16em; }
}

.rf-sub { color: var(--ink-2); font-size: 14px; margin-top: 6px; }

/* A slow push toward the command position as the victory settles. */
.reinforce.rf-push .rf-stage { animation: rf-push 2.2s var(--ease-out) both; }
@keyframes rf-push {
  from { transform: scale(.985); }
  to   { transform: scale(1); }
}

/* ------------------------------------------------------------------ *
 * Roads
 * ------------------------------------------------------------------ */

.rf-field {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--sp-4), 6vw, 90px);
  align-items: end;
  min-height: clamp(240px, 34vh, 360px);
  padding-bottom: 74px;
  perspective: 1000px;
}
.rf-field.solo {
  grid-template-columns: minmax(320px, 560px);
  justify-content: center;
  gap: 0;
}

.rf-road {
  position: relative;
  height: 100%;
  min-height: inherit;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px 18px 4px 4px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 28%),
    rgba(7,7,12,.34);
  box-shadow: inset 0 1px rgba(255,255,255,.04), 0 18px 60px rgba(0,0,0,.22);
  opacity: 0;
  transform: translateY(14px) rotateX(1.5deg);
  transition:
    opacity var(--t-slow) var(--ease-out),
    transform var(--t-slow) var(--ease-out),
    border-color var(--t-med) var(--ease-out),
    box-shadow var(--t-med) var(--ease-out);
  cursor: default;
  outline: none;
  isolation: isolate;
}
.rf-road::before,
.rf-road::after {
  content: '';
  position: absolute;
  z-index: 4;
  width: 26px;
  height: 26px;
  pointer-events: none;
  border-color: var(--route-source, rgba(255,255,255,.28));
  opacity: .42;
}
.rf-road::before {
  top: 8px;
  left: 8px;
  border-top: 1px solid var(--route-source);
  border-left: 1px solid var(--route-source);
}
.rf-road::after {
  right: 8px;
  bottom: 8px;
  border-right: 1px solid var(--route-source);
  border-bottom: 1px solid var(--route-source);
}
.rf-field.lit .rf-road { opacity: 1; transform: none; }

.rf-road[data-source="branch"]  { --route-source: #b6a47a; }
.rf-road[data-source="capital"] { --route-source: #d4a656; }
.rf-road[data-source="academy"] { --route-source: #8f82da; }

/* Command-route dossier pinned above each perspective road. */
.rf-route-head {
  position: absolute;
  z-index: 5;
  top: 10px;
  left: 14px;
  right: 14px;
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 5px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--route-source) 38%, transparent);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--route-source) 11%, rgba(7,7,12,.86)),
    rgba(7,7,12,.42));
  text-align: left;
}
.rf-source-seal {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--route-source) 58%, transparent);
  color: var(--route-source);
  background: rgba(4,4,8,.72);
  transform: rotate(45deg);
  box-shadow: 0 0 16px color-mix(in srgb, var(--route-source) 20%, transparent);
}
.rf-source-copy { display: grid; gap: 1px; min-width: 0; }
.rf-source-copy b {
  overflow: hidden;
  color: var(--ink-1);
  font-size: 10px;
  letter-spacing: .13em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.rf-source-copy small {
  color: color-mix(in srgb, var(--route-source) 72%, var(--ink-3));
  font-size: 8px;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.rf-route-index {
  color: color-mix(in srgb, var(--route-source) 64%, var(--ink-3));
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 10px;
  letter-spacing: .08em;
}

/* The road surface: a trapezoid receding toward the horizon. */
.rf-road-surface {
  position: absolute;
  inset: 46px 10px 8px;
  clip-path: polygon(42% 0%, 58% 0%, 98% 100%, 2% 100%);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--route-source) 8%, transparent) 0%,
      rgba(255,255,255,.025) 35%,
      color-mix(in srgb, var(--rr) 13%, rgba(255,255,255,.05)) 100%),
    linear-gradient(180deg, #0b0a10, #191620);
  border-bottom: 1px solid color-mix(in srgb, var(--rr) 55%, transparent);
  box-shadow: inset 0 -34px 56px color-mix(in srgb, var(--rr) 12%, transparent);
}
.rf-road-surface::after {
  /* Marching-distance marks, fading out toward the horizon. */
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg,
    transparent 0 29px, rgba(255,255,255,.07) 29px 30px);
  mask-image: linear-gradient(180deg, transparent 8%, #000 80%);
}
.rf-road-edge,
.rf-road-centerline {
  position: absolute;
  top: 0;
  bottom: 0;
  opacity: .38;
}
.rf-road-edge {
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--route-source));
}
.rf-road-edge.edge-left { left: 1px; transform: rotate(-9deg); transform-origin: bottom; }
.rf-road-edge.edge-right { right: 1px; transform: rotate(9deg); transform-origin: bottom; }
.rf-road-centerline {
  left: 50%;
  width: 1px;
  background: repeating-linear-gradient(180deg,
    transparent 0 22px, color-mix(in srgb, var(--route-source) 50%, transparent) 22px 30px);
}

.rf-road-haze {
  position: absolute;
  inset: 46px 8px 8px;
  clip-path: polygon(42% 0%, 58% 0%, 98% 100%, 2% 100%);
  background:
    radial-gradient(58% 42% at 50% 15%, var(--rr-soft, transparent), transparent 72%),
    linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--rr) 8%, transparent));
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease-out);
}
.rf-field.hinting .rf-road-haze { opacity: 1; }

.rf-horizon-gate {
  position: absolute;
  z-index: 2;
  top: 49px;
  left: 50%;
  display: grid;
  grid-template-columns: 1fr 12px 1fr;
  align-items: center;
  width: 24%;
  min-width: 72px;
  transform: translateX(-50%);
  opacity: .58;
}
.rf-horizon-gate span { height: 1px; background: var(--route-source); }
.rf-horizon-gate i {
  width: 9px;
  height: 9px;
  border: 1px solid var(--route-source);
  transform: rotate(45deg);
  box-shadow: 0 0 10px color-mix(in srgb, var(--route-source) 52%, transparent);
}

.rf-banner {
  position: absolute;
  z-index: 5;
  top: 58px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: rgba(7,6,11,.88);
  border: 1px solid color-mix(in srgb, var(--route-source) 48%, var(--bg-3));
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .17em;
  color: var(--ink-2);
  white-space: nowrap;
}

/* Source decoration is cosmetic — it never encodes rarity. */
.rf-road[data-source="capital"]  .rf-banner { color: var(--brass-0); }
.rf-road[data-source="academy"]  .rf-banner { color: #b9aefb; }
.rf-road[data-source="branch"]   .rf-banner { color: #c8b992; }

/* ---- The figure ---- */
.rf-figure {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 76%;
  width: clamp(58px, 7vw, 92px);
  transform: translate(-50%, 0) scale(.42);
  opacity: .55;
  transition: transform var(--t-slow) var(--ease-out), opacity var(--t-slow) var(--ease-out);
}
.rf-road.marching .rf-figure {
  animation: rf-march 1.1s var(--ease-out) forwards;
  animation-delay: var(--march-delay, 0ms);
}
@keyframes rf-march {
  from { bottom: 76%; transform: translate(-50%, 0) scale(.42); opacity: .5; }
  to   { bottom: 12%; transform: translate(-50%, 0) scale(1); opacity: 1; }
}

.rf-silhouette {
  position: relative;
  z-index: 3;
  width: 100%;
  height: auto;
  display: block;
  fill: #05040a;
  filter: drop-shadow(0 0 12px rgba(0,0,0,.9));
}

.rf-contact-ring {
  position: absolute;
  z-index: 1;
  inset: -28% -36%;
  border: 1px solid color-mix(in srgb, var(--route-source) 35%, transparent);
  border-radius: 50%;
  opacity: .45;
  transform: rotate(-8deg);
}
.rf-contact-ring i {
  position: absolute;
  background: var(--route-source);
  opacity: .7;
}
.rf-contact-ring i:nth-child(1) { top: -2px; left: 50%; width: 1px; height: 9px; }
.rf-contact-ring i:nth-child(2) { right: -2px; top: 50%; width: 9px; height: 1px; }
.rf-contact-ring i:nth-child(3) { bottom: -2px; left: 26%; width: 13px; height: 1px; }
.rf-figure-shadow {
  position: absolute;
  z-index: 2;
  left: 10%;
  right: 10%;
  bottom: -5px;
  height: 12px;
  border-radius: 50%;
  background: rgba(0,0,0,.88);
  filter: blur(3px);
  transform: scaleX(1.3);
}

.rf-figure-glow {
  position: absolute;
  inset: -30% -60%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 60%, var(--rr-soft, transparent), transparent 72%);
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease-out);
}
.rf-field.hinting .rf-figure-glow { opacity: 1; }

/* Rarity edge light on the silhouette itself. */
.rf-field.hinting .rf-silhouette {
  filter: drop-shadow(0 0 10px rgba(0,0,0,.9))
          drop-shadow(0 0 6px var(--rr));
}

/* Each tier has its own anticipation language, rather than only increasing particle volume. */
.rf-figure::after {
  content: '';
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}
.rf-field.hinting .rf-road[data-rarity="uncommon"] .rf-figure::after {
  opacity: .72;
  border: 1px solid rgba(87,151,211,.62);
  animation: rf-signal-ping 1.8s var(--ease-out) infinite;
}
@keyframes rf-signal-ping {
  from { transform: scale(.72); opacity: .8; }
  to { transform: scale(1.25); opacity: 0; }
}
.rf-field.hinting .rf-road[data-rarity="rare"] .rf-figure::after {
  opacity: .82;
  border: 1px dashed rgba(165,107,224,.72);
  box-shadow: inset 0 0 18px rgba(165,107,224,.18);
  animation: rf-tactical-turn 4s linear infinite;
}
@keyframes rf-tactical-turn { to { transform: rotate(360deg); } }
.rf-field.hinting .rf-road[data-rarity="legendary"] .rf-figure::after {
  opacity: .72;
  inset: -48% -90%;
  border-radius: 0;
  background: repeating-conic-gradient(
    from 12deg, rgba(232,189,99,.2) 0 5deg, transparent 5deg 20deg);
  mask-image: radial-gradient(circle, transparent 0 22%, #000 38%, transparent 74%);
  animation: rf-ceremonial-turn 12s linear infinite;
}
@keyframes rf-ceremonial-turn { to { transform: rotate(360deg); } }

.rf-figure-mark {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 15px;
  font-weight: 700;
  color: var(--rr);
  opacity: .8;
  text-shadow: 0 0 12px var(--rr);
}

/* Epic pulses with the footfalls; legendary dims everything around it. */
.rf-field.hinting .rf-road[data-rarity="epic"] .rf-figure-glow {
  animation: rf-pulse 620ms var(--ease-in-out) infinite;
}
@keyframes rf-pulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

.rf-field.hinting:has(.rf-road[data-rarity="legendary"]) .rf-road:not([data-rarity="legendary"]) {
  filter: brightness(.72);
}
.rf-field.hinting .rf-road[data-rarity="legendary"] .rf-road-surface {
  box-shadow: inset 0 -60px 90px -40px rgba(232,189,99,.55);
}

/* ---- Dust ---- */
.rf-dust {
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  pointer-events: none;
  background:
    radial-gradient(40% 60% at 30% 100%, rgba(255,255,255,.05), transparent 70%),
    radial-gradient(35% 55% at 70% 100%, rgba(255,255,255,.04), transparent 70%);
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease-out);
}
.rf-road.marching .rf-dust { opacity: 1; animation: rf-drift 3.4s linear infinite; }
@keyframes rf-drift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 12px -20px, -14px -24px; }
}

.rf-route-status {
  position: absolute;
  z-index: 5;
  right: 14px;
  bottom: 12px;
  display: grid;
  justify-items: end;
  gap: 1px;
  padding-left: 22px;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out);
}
.rf-route-status::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 16px;
  height: 1px;
  background: var(--route-source);
}
.rf-route-status span {
  color: var(--ink-3);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 7px;
  letter-spacing: .15em;
}
.rf-route-status b {
  color: color-mix(in srgb, var(--route-source) 72%, var(--ink-2));
  font-size: 8px;
  letter-spacing: .12em;
}
.rf-field.awaiting .rf-route-status,
.rf-field.solo.hinting .rf-route-status { opacity: .78; transform: none; }

/* ---- Choice ---- */
.rf-field.awaiting .rf-road { cursor: pointer; }
.rf-field.awaiting .rf-road:hover .rf-road-surface,
.rf-field.awaiting .rf-road.focused .rf-road-surface {
  filter: brightness(1.28);
  box-shadow:
    inset 0 -42px 68px color-mix(in srgb, var(--rr) 22%, transparent),
    0 0 28px color-mix(in srgb, var(--rr) 16%, transparent);
}
.rf-field.awaiting .rf-road:hover,
.rf-field.awaiting .rf-road.focused {
  border-color: color-mix(in srgb, var(--rr) 55%, transparent);
  box-shadow:
    inset 0 1px rgba(255,255,255,.06),
    0 18px 60px rgba(0,0,0,.28),
    0 0 26px color-mix(in srgb, var(--rr) 12%, transparent);
}
.rf-field.awaiting .rf-road.focused { outline: none; }
.rf-field.awaiting .rf-road.focused .rf-banner {
  background: var(--rr);
  color: #08060d;
  border-color: var(--rr);
  box-shadow: 0 0 20px var(--rr-soft);
}
.rf-field.awaiting .rf-road:hover .rf-figure,
.rf-field.awaiting .rf-road.focused .rf-figure { transform: translate(-50%, -5px) scale(1.04); }

.rf-road.chosen .rf-figure-mark { animation: rf-ack .5s var(--ease-snap); }
@keyframes rf-ack {
  0% { transform: translateX(-50%) scale(1); }
  45% { transform: translateX(-50%) translateY(-8px) scale(1.3); }
  100% { transform: translateX(-50%) scale(1); }
}

.rf-road.reporting { z-index: 2; }
.rf-road.reported { opacity: .32; filter: grayscale(.5); }

/* ---- Command position ---- */
.rf-command {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 2px;
}
.rf-command-mark { font-size: 26px; color: var(--brass-1); text-shadow: 0 0 24px rgba(212,166,86,.6); }
.rf-command-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--ink-3);
}

.rf-prompt {
  margin-top: var(--sp-4);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass-0);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease-out);
}
.rf-prompt.show { opacity: 1; animation: rf-breathe 2.4s var(--ease-in-out) infinite; }
@keyframes rf-breathe { 0%,100% { opacity: .72; } 50% { opacity: 1; } }

/* ------------------------------------------------------------------ *
 * Secret: the scene fails rather than escalating
 * ------------------------------------------------------------------ */

.rf-drain {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  backdrop-filter: saturate(1);
  transition: opacity 420ms var(--ease-out), backdrop-filter 420ms var(--ease-out);
}
.reinforce.rf-secret-cut .rf-drain {
  opacity: 1;
  backdrop-filter: saturate(0) contrast(1.15);
  background:
    radial-gradient(60% 60% at 50% 42%, transparent 30%, rgba(0,0,0,.82) 100%);
}
/* Footsteps stop, the march freezes, dust runs backward. */
.reinforce.rf-secret-cut .rf-figure { animation-play-state: paused; }
.reinforce.rf-secret-cut .rf-dust { animation-direction: reverse; animation-duration: 1.6s; }
.reinforce.rf-secret-cut .rf-road[data-rarity="secret"] .rf-silhouette {
  fill: #000;
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 14px rgba(220,235,255,.75));
}
.reinforce.rf-secret-cut .rf-road[data-rarity="secret"] .rf-figure-mark { color: #fff; }
/* An eclipse behind the figure — black disc, thin corona. */
.reinforce.rf-secret-cut .rf-road[data-rarity="secret"] .rf-figure-glow {
  opacity: 1;
  background: radial-gradient(circle at 50% 45%,
    #000 0 34%, rgba(255,255,255,.9) 34% 35.5%, rgba(190,215,255,.35) 36% 46%, transparent 60%);
  animation: rf-eclipse 900ms var(--ease-out) both;
}
@keyframes rf-eclipse {
  from { transform: scale(.5); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ------------------------------------------------------------------ *
 * Card reveal
 * ------------------------------------------------------------------ */

.rf-reveal {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  gap: var(--sp-4);
  grid-auto-flow: row;
  align-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-med) var(--ease-out);
}
.rf-reveal[hidden] { display: none; }
.rf-reveal.in { opacity: 1; }

.rf-card-wrap {
  position: relative;
  width: clamp(210px, 26vh, 320px);
  aspect-ratio: var(--card-ratio);
  transform: rotateY(78deg) scale(.82);
  opacity: 0;
  transition:
    transform 620ms var(--ease-snap),
    opacity 380ms var(--ease-out);
}
.rf-reveal.in .rf-card-wrap { transform: none; opacity: 1; }
.rf-reveal.in .rf-card-wrap.reforming { transform: rotateY(90deg) scale(.9); opacity: .4; }

.rf-card {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgba(0,0,0,.7), 0 0 0 1px var(--rr-soft);
}
.rf-card svg { width: 100%; height: 100%; border-radius: var(--r-lg); display: block; }

.rf-card-aura {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, var(--rr-soft), transparent 68%);
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease-out);
}
.rf-reveal.in .rf-card-aura { opacity: 1; }

/* Reveal signatures: clean signal, tactical ring, forceful impact, ceremonial rays. */
.rf-card-wrap::before {
  content: '';
  position: absolute;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
}
.rf-reveal[data-rarity="common"] .rf-card-aura { opacity: .42; }
.rf-reveal[data-rarity="uncommon"] .rf-card-wrap::before {
  inset: -8%;
  border: 1px solid rgba(87,151,211,.7);
  border-radius: var(--r-lg);
  opacity: .8;
  animation: rf-uncommon-lock 780ms var(--ease-out) both;
}
@keyframes rf-uncommon-lock {
  from { transform: scale(1.2); opacity: 0; }
  to { transform: none; opacity: .8; }
}
.rf-reveal[data-rarity="uncommon"] .rf-card::after {
  content: '';
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0 42%, rgba(155,215,255,.24) 49%,
    rgba(255,255,255,.5) 50%, transparent 56%);
  transform: translateY(-70%);
  animation: rf-signal-scan 900ms var(--ease-out) 120ms both;
}
@keyframes rf-signal-scan { to { transform: translateY(70%); opacity: 0; } }
.rf-reveal[data-rarity="rare"] .rf-card-wrap::before {
  inset: -13%;
  border: 1px dashed rgba(165,107,224,.82);
  border-radius: 50%;
  opacity: .88;
  box-shadow: 0 0 30px rgba(165,107,224,.22);
  animation: rf-tactical-turn 5s linear infinite;
}
.rf-reveal[data-rarity="legendary"] .rf-card-wrap::before {
  inset: -42%;
  border-radius: 50%;
  opacity: .72;
  background: repeating-conic-gradient(
    from 0deg, rgba(232,189,99,.2) 0 4deg, transparent 4deg 17deg);
  mask-image: radial-gradient(circle, transparent 0 26%, #000 42%, transparent 72%);
  animation: rf-ceremonial-turn 16s linear infinite;
}

/* Higher tiers get more presence, not just more colour. */
.rf-reveal[data-rarity="rare"]      .rf-card { box-shadow: 0 24px 60px rgba(0,0,0,.7), 0 0 0 2px var(--rr), 0 0 44px var(--rr-soft); }
.rf-reveal[data-rarity="epic"]      .rf-card { box-shadow: 0 24px 60px rgba(0,0,0,.7), 0 0 0 2px var(--rr), 0 0 60px var(--rr-soft); }
.rf-reveal[data-rarity="legendary"] .rf-card { box-shadow: 0 30px 70px rgba(0,0,0,.75), 0 0 0 2px var(--rr), 0 0 90px var(--rr-soft); }
.rf-reveal[data-rarity="secret"]    .rf-card {
  box-shadow: 0 30px 80px rgba(0,0,0,.9), 0 0 0 1px #fff, 0 0 70px rgba(200,220,255,.35);
}
.rf-reveal[data-rarity="secret"] .rf-card-aura {
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,.14), transparent 62%);
}

/* Epic lands with an impact line across the screen. */
.rf-reveal[data-rarity="epic"].in::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--rr), transparent);
  animation: rf-impact 520ms var(--ease-out) both;
}
@keyframes rf-impact {
  0% { opacity: 0; transform: scaleX(.2); }
  35% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1.1); }
}

/* ---- Name plate: held back so the artwork is the climax ---- */
.rf-card-meta {
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out);
}
.rf-reveal.named .rf-card-meta { opacity: 1; transform: none; }

.rf-card-name {
  font-size: clamp(20px, 3vw, 30px);
  color: var(--ink-0);
  letter-spacing: .04em;
}
.rf-card-line { font-size: 12px; margin-top: 4px; }
.rf-dot { color: var(--ink-3); margin: 0 6px; }

.rf-rarity {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 700;
  color: var(--rr);
}
.rf-rarity[data-r="common"]    { color: #8b9096; }
.rf-rarity[data-r="uncommon"]  { color: #5797d3; }
.rf-rarity[data-r="rare"]      { color: #a56be0; }
.rf-rarity[data-r="epic"]      { color: #e0625a; }
.rf-rarity[data-r="legendary"] { color: #e8bd63; text-shadow: 0 0 18px rgba(232,189,99,.6); }
.rf-rarity[data-r="secret"]    { color: #fff; text-shadow: 0 0 20px rgba(200,220,255,.85); }

.rf-status { margin-top: var(--sp-3); min-height: 56px; display: grid; place-items: center; }

.rf-new {
  display: inline-block;
  padding: 5px 16px;
  border-radius: var(--r-pill);
  background: var(--brass-1);
  color: #1a1208;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  box-shadow: 0 0 26px rgba(212,166,86,.6);
  animation: rf-stamp 420ms var(--ease-snap);
}
@keyframes rf-stamp {
  0% { opacity: 0; transform: scale(1.5) rotate(-4deg); }
  100% { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ *
 * Duplicate progress — rank marks, not a currency bar
 * ------------------------------------------------------------------ */

.rf-progress { display: grid; justify-items: center; gap: 6px; }
.rf-progress-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--ink-3);
}
.rf-pips { display: flex; gap: 7px; }

/* A chevron, not a dot: this is a promotion track. */
.rf-pip {
  width: 13px;
  height: 13px;
  clip-path: polygon(50% 0%, 100% 55%, 100% 100%, 50% 45%, 0% 100%, 0% 55%);
  background: rgba(255,255,255,.14);
  transition: background var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.rf-pip.on { background: var(--brass-1); box-shadow: 0 0 10px rgba(212,166,86,.6); }
.rf-pip.just-lit { animation: rf-pip-in 380ms var(--ease-snap); }
@keyframes rf-pip-in {
  0% { transform: scale(2.2); background: #fff; }
  100% { transform: none; }
}

.rf-progress-n {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-1);
  letter-spacing: .06em;
}

.rf-max-rarity {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 6px 14px;
  border: 1px solid rgba(225,235,255,.28);
  border-radius: var(--r-pill);
  background: rgba(0,0,0,.58);
}
.rf-max-title {
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-shadow: 0 0 16px rgba(200,220,255,.65);
}
.rf-max-copy { color: var(--ink-2); font-size: 11px; }

/* The seventh mark: everything locks into formation, then collapses inward. */
.rf-pips.locked .rf-pip { animation: rf-lock 520ms var(--ease-snap) both; }
.rf-pips.locked .rf-pip:nth-child(1) { animation-delay: 0ms; }
.rf-pips.locked .rf-pip:nth-child(2) { animation-delay: 30ms; }
.rf-pips.locked .rf-pip:nth-child(3) { animation-delay: 60ms; }
.rf-pips.locked .rf-pip:nth-child(4) { animation-delay: 90ms; }
.rf-pips.locked .rf-pip:nth-child(5) { animation-delay: 120ms; }
.rf-pips.locked .rf-pip:nth-child(6) { animation-delay: 150ms; }
.rf-pips.locked .rf-pip:nth-child(7) { animation-delay: 180ms; }
@keyframes rf-lock {
  0% { transform: none; }
  40% { transform: translateY(-8px) scale(1.25); background: #fff; }
  100% { transform: translateY(6px) scale(0); opacity: 0; }
}

.rf-reveal.promoting .rf-card-aura {
  animation: rf-promote-burst 900ms var(--ease-out);
}
@keyframes rf-promote-burst {
  0% { transform: scale(.7); opacity: .3; }
  45% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.rf-promotion {
  display: grid;
  justify-items: center;
  gap: 4px;
  animation: rf-promote-in 460ms var(--ease-snap);
}
@keyframes rf-promote-in {
  from { opacity: 0; transform: translateY(10px) scale(.94); }
  to { opacity: 1; transform: none; }
}
.rf-promotion-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--brass-0);
  text-shadow: 0 0 22px rgba(212,166,86,.55);
}
.rf-promotion[data-to="secret"] .rf-promotion-title { color: #fff; text-shadow: 0 0 24px rgba(200,220,255,.9); }
.rf-promotion-card { font-size: 15px; color: var(--ink-0); }
.rf-promotion-path { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.rf-promotion-path [data-r="common"]    { color: #8b9096; }
.rf-promotion-path [data-r="uncommon"]  { color: #5797d3; }
.rf-promotion-path [data-r="rare"]      { color: #a56be0; }
.rf-promotion-path [data-r="epic"]      { color: #e0625a; }
.rf-promotion-path [data-r="legendary"] { color: #e8bd63; }
.rf-promotion-path [data-r="secret"]    { color: #fff; }
.rf-arrow { color: var(--ink-3); margin: 0 6px; }
.rf-promotion-note { font-size: 11px; color: var(--ink-2); max-width: 40ch; }
.rf-art-unlock {
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass-0);
}

/* ------------------------------------------------------------------ *
 * Summary
 * ------------------------------------------------------------------ */

.rf-summary {
  position: relative;
  z-index: 6;
  width: min(920px, 94vw);
  animation: rf-summary-in var(--t-slow) var(--ease-out);
}
.rf-summary[hidden] { display: none; }
@keyframes rf-summary-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.rf-summary-inner { text-align: center; padding: var(--sp-5) var(--sp-4); }

.rf-summary-title {
  font-size: clamp(20px, 3.2vw, 30px);
  letter-spacing: .18em;
  color: var(--brass-0);
  margin-bottom: var(--sp-5);
}

.rf-summary-cards {
  display: flex;
  gap: clamp(var(--sp-4), 4vw, 56px);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}

.rf-summary-card {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: clamp(150px, 20vh, 220px);
}
.rf-summary-face {
  width: 100%;
  aspect-ratio: var(--card-ratio);
  border-radius: var(--r-lg);
  box-shadow: 0 14px 34px rgba(0,0,0,.6), 0 0 0 1px var(--rr-soft);
}
.rf-summary-face svg { width: 100%; height: 100%; border-radius: var(--r-lg); display: block; }
.rf-summary-name { font-size: 13px; color: var(--ink-0); }

.rf-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  text-transform: uppercase;
}
.rf-tag.new { background: var(--brass-1); color: #1a1208; }
.rf-tag.dup { background: rgba(0,0,0,.6); border: 1px solid var(--bg-3); color: var(--ink-2); }
.rf-tag.promoted { background: var(--rr); color: #08060d; box-shadow: 0 0 20px var(--rr-soft); }
.rf-tag.art { background: transparent; border: 1px solid var(--brass-2); color: var(--brass-0); }
.rf-tag.max {
  background: #050609;
  border: 1px solid rgba(225,235,255,.5);
  color: #fff;
  box-shadow: 0 0 18px rgba(200,220,255,.18);
}

.rf-collection {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin-bottom: var(--sp-5);
}
.rf-collection-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--ink-3);
}
.rf-collection-n { font-size: 15px; color: var(--ink-1); font-variant-numeric: tabular-nums; }
.rf-collection-n b { color: var(--brass-0); font-size: 20px; }
.rf-collection-bar {
  width: min(320px, 60vw);
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--bg-inset);
  overflow: hidden;
}
.rf-collection-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--brass-2), var(--brass-0));
  transition: width 340ms var(--ease-out);
}

.rf-summary-actions { display: flex; gap: var(--sp-3); justify-content: center; }

/* ------------------------------------------------------------------ *
 * Controls
 * ------------------------------------------------------------------ */

.rf-controls { position: absolute; top: var(--sp-4); right: var(--sp-4); z-index: 8; }
.rf-controls [hidden] { display: none; }

.rf-hint {
  position: absolute;
  bottom: var(--sp-3);
  left: 0;
  right: 0;
  z-index: 8;
  text-align: center;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  pointer-events: none;
}
.reinforce[data-state="complete"] .rf-hint { opacity: 0; }

/* ------------------------------------------------------------------ *
 * Reduced motion
 *
 * Rarity still has to be legible, so colour, border weight, text and audio all stay. What goes
 * is travel, shake, pulsing and anything that flashes — including the Secret cut, which becomes
 * a steady desaturation rather than a strobe.
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .reinforce:not(.motion-ok) * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}

.reinforce.reduced-motion * {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
}
.reinforce.reduced-motion .rf-figure,
.reinforce.reduced-motion .rf-card-wrap,
.reinforce.reduced-motion .rf-card-meta {
  transition-duration: 200ms;
}
/* No fly-in rotation, no travel — a fade and a small scale. */
.reinforce.reduced-motion .rf-card-wrap { transform: scale(.96); }
.reinforce.reduced-motion .rf-reveal.in .rf-card-wrap { transform: none; }
.reinforce.reduced-motion .rf-figure { bottom: 12%; transform: translate(-50%, 0) scale(1); opacity: 1; }
.reinforce.reduced-motion .rf-dust { display: none; }
.reinforce.reduced-motion.rf-secret-cut .rf-drain { transition-duration: 320ms; }
.reinforce.reduced-motion .rf-prompt.show { animation: none; opacity: 1; }

/* ------------------------------------------------------------------ *
 * Tighter screens
 * ------------------------------------------------------------------ */

@media (max-width: 720px) {
  .rf-field { gap: var(--sp-3); min-height: 220px; padding-bottom: 62px; }
  .rf-field.solo { grid-template-columns: minmax(0, 520px); }
  .rf-route-head { left: 8px; right: 8px; grid-template-columns: 25px 1fr auto; gap: 6px; padding: 4px 5px; }
  .rf-source-seal { width: 23px; height: 23px; }
  .rf-source-copy small { display: none; }
  .rf-route-status { display: none; }
  .rf-card-wrap { width: min(60vw, 220px); }
  .rf-summary-cards { gap: var(--sp-3); }
  .rf-summary-card { width: 42vw; }
}

@media (max-height: 720px) {
  .rf-field { min-height: 190px; }
  .rf-card-wrap { width: clamp(160px, 22vh, 240px); }
  .rf-head { margin-bottom: var(--sp-3); }
}