/* ============================================================
   Korevra SureDesk — Rewards, Achievements & Performance
   ------------------------------------------------------------
   The one screen in the console that is allowed to celebrate.
   It still obeys the house rules:

     · every colour comes from a design token in app.css —
       there is not one literal colour value in this file
     · only transform and opacity are animated
     · every reveal is a `from`-only keyframe, so an element
       always rests at its own natural value; if an animation
       never runs, nothing is hidden and no bar reads zero
     · nothing runs longer than 700ms, delays excluded
     · no infinite animation anywhere — the streak flame is
       capped at four breaths
     · prefers-reduced-motion collapses the whole file to a
       still frame: opacity only, no transforms, no particles
   ============================================================ */

:root {
  --ar-spring: cubic-bezier(.18, .89, .28, 1.02);
  --ar-ease: cubic-bezier(.2, .8, .25, 1);
}

/* medal + tier palettes, all token-derived */
.ar-med-gold, .ar-t-gold { --ar-metal: var(--gold); --ar-metal-soft: var(--gold-soft); }
.ar-med-silver, .ar-t-silver { --ar-metal: var(--ink2); --ar-metal-soft: var(--surface2); }
.ar-med-bronze, .ar-t-bronze { --ar-metal: var(--warn); --ar-metal-soft: var(--warn-soft); }
.ar-t-platinum { --ar-metal: var(--accent); --ar-metal-soft: var(--accent-soft); }

/* tabs used inside a page-actions strip should not carry the page rule */
.page-actions .tabs { border-bottom: 0; margin: 0; }

/* ============================================================
   1 · PODIUM — the hero moment
   ============================================================ */
.ar-podium-card { overflow: hidden; }
.ar-podium-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 6px;
}
.ar-podium-head h3 { margin-bottom: 0; }

.ar-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 14px;
  padding: 14px 4px 0;
}
@media (max-width: 720px) {
  .ar-podium { grid-template-columns: 1fr; align-items: stretch; }
  .ar-pod-base { display: none; }
}

.ar-plinth { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
html.mo-on .ar-plinth {
  animation: ar-rise 620ms var(--ar-spring) both;
  animation-delay: calc(var(--ar-i, 0) * 120ms);
}
@keyframes ar-rise { from { opacity: 0; transform: translate3d(0, 46px, 0); } }

.ar-pod-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 14px 16px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--ar-metal, var(--accent));
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--ar-metal, var(--accent)) 12%, transparent),
      color-mix(in srgb, var(--surface) 92%, transparent) 62%),
    var(--surface);
  text-align: center;
  min-width: 0;
}
.ar-p1 .ar-pod-card { padding-top: 24px; box-shadow: var(--shadow); }

.ar-medal {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  font-family: var(--display); font-size: 14px; font-weight: 750;
  color: var(--ar-metal, var(--accent));
  background: var(--ar-metal-soft, var(--accent-soft));
  border: 1.5px solid color-mix(in srgb, var(--ar-metal, var(--accent)) 55%, transparent);
  position: relative; overflow: hidden;
}
.ar-medal::after {
  content: ""; position: absolute; inset: -40%;
  background: linear-gradient(72deg, transparent 38%,
    color-mix(in srgb, var(--paper) 85%, transparent) 50%, transparent 62%);
  transform: translate3d(-130%, 0, 0);
  opacity: .9;
}
/* one shimmer, once — never a loop */
html.mo-on .ar-medal::after {
  animation: ar-shine 620ms var(--ar-ease) 1 both;
  animation-delay: calc(320ms + var(--ar-i, 0) * 120ms);
}
@keyframes ar-shine { from { transform: translate3d(-130%, 0, 0); } to { transform: translate3d(130%, 0, 0); } }

.ar-p1 .ar-medal { width: 36px; height: 36px; font-size: 16px; }
.ar-pod-av .avatar { width: 46px; height: 46px; font-size: 16px; }
.ar-p1 .ar-pod-av .avatar { width: 58px; height: 58px; font-size: 19px; }

.ar-pod-name {
  font-family: var(--display); font-size: 15.5px; font-weight: 650; line-height: 1.2;
  overflow-wrap: anywhere;
}
.ar-p1 .ar-pod-name { font-size: 18px; }
.ar-pod-role { font-style: normal; font-size: 11.5px; color: var(--ink3); }

.ar-pod-pts {
  display: flex; flex-direction: column; align-items: center; line-height: 1;
  font-family: var(--display); font-size: 27px; font-weight: 750;
  color: var(--ar-metal, var(--accent));
  font-variant-numeric: tabular-nums; margin-top: 4px;
}
.ar-p1 .ar-pod-pts { font-size: 34px; }
.ar-pod-pts i {
  font-style: normal; font-family: var(--font); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; color: var(--ink3); margin-top: 5px;
}
.ar-pod-meta { font-size: 11.5px; color: var(--ink2); }
.ar-pod-btn { margin-top: 4px; }

.ar-pod-base {
  display: grid; place-items: center;
  border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--ar-metal, var(--accent)) 22%, var(--surface2)),
    var(--surface2));
}
.ar-p1 .ar-pod-base { height: 84px; }
.ar-p2 .ar-pod-base { height: 56px; }
.ar-p3 .ar-pod-base { height: 38px; }
.ar-pod-rank {
  font-family: var(--display); font-weight: 750; font-size: 26px;
  color: color-mix(in srgb, var(--ar-metal, var(--accent)) 70%, var(--ink3));
}
.ar-p1 .ar-pod-rank { font-size: 34px; }

/* ============================================================
   2 · LEVELS, MOVEMENT, STREAKS
   ============================================================ */
.ar-lvl {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; padding: 2.5px 9px; border-radius: 20px;
  background: var(--accent-soft); color: var(--accent-ink); white-space: nowrap;
}
.ar-lvl b { font-weight: 750; }

.ar-mv {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  vertical-align: 1px;
}
.ar-mv-up { color: var(--good); }
.ar-mv-down { color: var(--bad); }
.ar-mv-flat { color: var(--ink3); opacity: .55; }
.ar-mv-flat .ic { transform: rotate(90deg); }
html.mo-on .ar-mv-up, html.mo-on .ar-mv-down {
  animation: ar-mv 420ms var(--ar-ease) both;
  animation-delay: calc(160ms + var(--ar-i, 0) * 26ms);
}
@keyframes ar-mv { from { opacity: 0; transform: translate3d(0, 6px, 0); } }

.ar-streak {
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink);
}
.ar-flame {
  width: 9px; height: 12px; flex: none; display: block;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: linear-gradient(to top, var(--warn), var(--gold));
  transform-origin: 50% 100%;
}
.ar-hot .ar-flame { background: linear-gradient(to top, var(--bad), var(--gold)); }
/* four breaths, then still — never infinite on a long list */
html.mo-on .ar-hot .ar-flame { animation: ar-flame 1600ms ease-in-out 4; }
@keyframes ar-flame {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.16, 1.24); opacity: .82; }
}

/* ============================================================
   3 · PROGRESS BARS — fill from zero, rest at the true value
   ============================================================ */
.ar-bar {
  display: block; height: 7px; border-radius: 6px;
  background: var(--surface2); overflow: hidden; width: 100%;
}
.ar-bar-fill {
  display: block; height: 100%; width: 100%; border-radius: 6px;
  transform-origin: 0 50%;
  transform: scaleX(var(--ar-p, 1));
  background: var(--accent-fill, var(--accent));
}
.ar-bar-fill.tone-gold { background: var(--gold); }
.ar-bar-fill.tone-good { background: var(--good); }
.ar-bar-fill.tone-warn { background: var(--warn); }
.ar-bar-fill.tone-bad { background: var(--bad); }
.ar-bar-fill.tone-base { background: var(--ink3); }
/* `from`-only: the resting state is the element's own scaleX(var(--ar-p)),
   so a bar can never be stranded at zero by a frame that never arrived. */
html.mo-on .ar-bar-fill {
  animation: ar-fill 560ms var(--ar-ease) both;
  animation-delay: calc(var(--ar-i, 0) * 30ms);
}
@keyframes ar-fill { from { transform: scaleX(0); } }

/* ============================================================
   4 · TIER BADGES
   ============================================================ */
.ar-tier {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  padding: 2px 8px; border-radius: 20px;
  color: var(--ar-metal, var(--accent));
  background: var(--ar-metal-soft, var(--accent-soft));
  border: 1px solid color-mix(in srgb, var(--ar-metal, var(--accent)) 32%, transparent);
}
.ar-rare {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  color: var(--gold); margin-left: 6px;
}

/* ============================================================
   5 · THE FULL BOARD
   ============================================================ */
.ar-table-card { position: relative; padding-bottom: 0; }
.ar-scroll { max-height: 560px; overflow-y: auto; }
.ar-tbl th { position: sticky; top: 0; z-index: 2; }
.ar-tbl td { vertical-align: top; }
.ar-rank {
  display: inline-grid; place-items: center;
  min-width: 24px; height: 24px; padding: 0 5px; border-radius: 8px;
  background: var(--surface2); font-weight: 750; font-variant-numeric: tabular-nums; font-size: 12.5px;
}
.ar-nm { font-weight: 650; }
.ar-nm em {
  font-style: normal; font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--accent-ink);
  background: var(--accent-soft); padding: 1px 6px; border-radius: 20px; margin-left: 4px;
}
.ar-me-row > td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.ar-me-row > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
html.mo-on .ar-tbl tbody tr {
  animation: ar-row 320ms var(--ar-ease) both;
  animation-delay: calc(var(--ar-i, 0) * 24ms);
}
@keyframes ar-row { from { opacity: 0; transform: translate3d(0, 8px, 0); } }

/* the signed-in row, always visible without hunting for it */
.ar-you {
  position: sticky; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 -18px; padding: 11px 18px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 94%, var(--accent));
  backdrop-filter: blur(6px);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.ar-you-rank {
  font-family: var(--display); font-weight: 750; font-size: 17px; color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.ar-you-n { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.ar-you-n b { font-size: 13px; }
.ar-you-n i { font-style: normal; font-size: 11px; color: var(--ink2); }
.ar-you-pts {
  margin-left: auto; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--ink);
}

/* ============================================================
   6 · TEAM STANDINGS
   ============================================================ */
.ar-team-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1.5fr) minmax(60px, 1fr) auto;
  align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 8px; border-radius: 10px; border: 1px solid transparent;
}
.ar-team-row:hover { border-color: var(--accent); background: var(--surface2); }
.ar-team-rank {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px;
  background: var(--surface2); font-weight: 750; font-size: 12px;
}
.ar-team-row:first-of-type .ar-team-rank { background: var(--gold-soft); color: var(--gold); }
.ar-team-n { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ar-team-n b { font-size: 13px; }
.ar-team-n i { font-style: normal; font-size: 11px; color: var(--ink2); }
.ar-team-avg { font-weight: 750; font-variant-numeric: tabular-nums; font-size: 14px; }
html.mo-on .ar-team-row {
  animation: ar-row 320ms var(--ar-ease) both;
  animation-delay: calc(var(--ar-i, 0) * 34ms);
}

.ar-principles { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 9px; }
.ar-principles li { font-size: 12.5px; color: var(--ink2); }
.ar-principles b { color: var(--ink); }

/* ============================================================
   7 · PERSONAL BANNER
   ============================================================ */
.ar-banner {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  box-shadow: var(--shadow); min-height: 190px;
}
.ar-banner > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: grayscale(1) contrast(1.05);
  z-index: -2;
}
.ar-banner-duo {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(118deg,
      color-mix(in srgb, var(--surface) 96%, transparent) 0%,
      color-mix(in srgb, var(--surface) 84%, transparent) 46%,
      color-mix(in srgb, var(--accent) 34%, transparent) 100%);
}
.ar-banner-in {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 20px 22px;
}
html.mo-on .ar-ring { animation: ar-ring-in 640ms var(--ar-spring) both; }
@keyframes ar-ring-in { from { opacity: 0; transform: rotate(-26deg) scale(.9); } }
.ar-banner-txt { display: flex; flex-direction: column; gap: 8px; min-width: 240px; flex: 1; }
.ar-banner-pts {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--display); font-size: 40px; font-weight: 750; line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.ar-banner-pts i {
  font-style: normal; font-family: var(--font); font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--ink2);
}
.ar-banner-sub { font-size: 13px; color: var(--ink2); max-width: 60ch; }
.ar-banner-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.ar-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 650; padding: 4px 10px; border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid var(--line); color: var(--ink2);
}
.ar-chip .ic { color: var(--accent); }
html.mo-on .ar-banner-chips .ar-chip {
  animation: ar-mv 380ms var(--ar-ease) both;
  animation-delay: calc(220ms + var(--ar-i, 0) * 40ms);
}

/* ============================================================
   8 · ACHIEVEMENTS
   ============================================================ */
.ar-ach-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px;
}
.ar-ach {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 14px 10px 12px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--surface);
  transition: transform 180ms var(--ar-ease), border-color 180ms ease;
}
.ar-ach:hover { border-color: var(--ar-metal, var(--accent)); transform: translate3d(0, -3px, 0); }
.ar-ach-ic {
  position: relative; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--surface2); color: var(--ink3);
}
.ar-earned .ar-ach-ic {
  background: var(--ar-metal-soft, var(--accent-soft));
  color: var(--ar-metal, var(--accent));
  border: 1.5px solid color-mix(in srgb, var(--ar-metal, var(--accent)) 45%, transparent);
}
.ar-locked { opacity: .72; }
.ar-locked .ar-ach-n, .ar-locked .ar-tier { filter: saturate(.35); }
.ar-ach-n { font-size: 12.5px; font-weight: 700; line-height: 1.25; }
.ar-ach-state {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700;
}
.ar-ach-prog { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.ar-ach-prog i { font-style: normal; font-size: 10.5px; color: var(--ink3); }

/* unlock: a scale-and-glow burst with one ring sweep */
.ar-ach-sweep {
  position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--ar-metal, var(--accent)) 60%, transparent);
  opacity: 0; pointer-events: none;
}
html.mo-on .ar-earned .ar-ach-ic {
  animation: ar-pop 560ms var(--ar-spring) both;
  animation-delay: calc(120ms + var(--ar-i, 0) * 44ms);
}
@keyframes ar-pop { 0% { opacity: 0; transform: scale(.6); } 62% { transform: scale(1.12); } 100% { transform: scale(1); } }
html.mo-on .ar-ach-sweep {
  animation: ar-sweep 620ms var(--ar-ease) both;
  animation-delay: calc(240ms + var(--ar-i, 0) * 44ms);
}
@keyframes ar-sweep {
  from { opacity: .9; transform: scale(.72); }
  to { opacity: 0; transform: scale(1.5); }
}

/* catalogue */
.ar-cat { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 14px; }
.ar-cat-card { display: flex; flex-direction: column; gap: 8px; border-top: 3px solid var(--ar-metal, var(--accent)); }
.ar-cat-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ar-cat-n { font-family: var(--display); font-size: 16px; margin: 0; }
.ar-cat-hold {
  font-size: 12px; color: var(--ink2);
  padding: 8px 10px; border-radius: 10px; background: var(--surface2);
}
.ar-cat-hold b { color: var(--ink); }
.ar-cat-mine { display: flex; flex-direction: column; gap: 5px; }
.ar-cat-mine i { font-style: normal; }
html.mo-on .ar-cat-card {
  animation: ar-row 340ms var(--ar-ease) both;
  animation-delay: calc(var(--ar-i, 0) * 30ms);
}

/* ============================================================
   9 · POINTS LEDGER
   ============================================================ */
.ar-tl .ar-ev::before { background: var(--good); }
.ar-tl .ar-ev.ar-neg::before { background: var(--bad); }
.ar-ev-pts { font-variant-numeric: tabular-nums; font-weight: 800; white-space: nowrap; }
html.mo-on .ar-tl .tl-item {
  animation: ar-row 320ms var(--ar-ease) both;
  animation-delay: calc(var(--ar-i, 0) * 26ms);
}
.ar-ledger .timeline { max-height: 460px; overflow-y: auto; padding-right: 4px; }
.ar-empty-ledger { display: flex; flex-direction: column; gap: 6px; }
.ar-empty-ledger .empty { padding-bottom: 8px; }

/* ============================================================
   10 · REWARDS
   ============================================================ */
.ar-demo-note {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: var(--r);
  background: var(--gold-soft); border: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
  font-size: 12.5px; color: var(--ink2);
}
.ar-demo-note b { color: var(--ink); }
.ar-demo-note .ic { color: var(--gold); flex: none; margin-top: 1px; }

.ar-rewards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 14px;
  perspective: 1200px;
}
.ar-reward { position: relative; display: flex; flex-direction: column; gap: 8px; transform-style: preserve-3d; }
.ar-reward.ar-short { opacity: .9; }
.ar-rw-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ar-rw-kind {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink3);
}
.ar-rw-cost {
  display: inline-flex; align-items: baseline; gap: 3px;
  font-family: var(--display); font-size: 22px; font-weight: 750; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.ar-rw-cost i { font-style: normal; font-family: var(--font); font-size: 10px; font-weight: 700; color: var(--ink3); }
.ar-rw-n { font-family: var(--display); font-size: 16px; margin: 0; }
.ar-rw-val { font-size: 11.5px; color: var(--ink2); display: flex; align-items: flex-start; gap: 6px; }
.ar-rw-val .ic { color: var(--accent); flex: none; margin-top: 2px; }
.ar-rw-prog { display: flex; flex-direction: column; gap: 5px; margin-top: auto; }
.ar-rw-prog i { font-style: normal; }
html.mo-on .ar-reward {
  animation: ar-row 340ms var(--ar-ease) both;
  animation-delay: calc(var(--ar-i, 0) * 30ms);
}
html.mo-on .ar-reward.ar-flip { animation: ar-flip 640ms var(--ar-spring) both; }
@keyframes ar-flip {
  from { transform: rotateY(-88deg); opacity: .2; }
  62% { transform: rotateY(10deg); opacity: 1; }
  to { transform: none; opacity: 1; }
}

/* confetti — 24 spans, transform and opacity only, removed after the burst */
.ar-burst {
  position: absolute; left: 50%; top: 44%; width: 0; height: 0;
  pointer-events: none; z-index: 4;
}
.ar-bit {
  position: absolute; left: 0; top: 0;
  width: 7px; height: 10px; border-radius: 2px;
  transform: translate3d(0, 0, 0) rotate(0);
  opacity: 0;
  animation: ar-bit 700ms var(--ar-ease) both;
  animation-delay: var(--ar-d, 0ms);
}
.ar-c-gold { background: var(--gold); }
.ar-c-accent { background: var(--accent); }
.ar-c-good { background: var(--good); }
.ar-c-info { background: var(--info); }
@keyframes ar-bit {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.4) rotate(0); }
  16% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate3d(var(--ar-x, 0), var(--ar-y, 0), 0) scale(1) rotate(var(--ar-r, 180deg));
  }
}

.ar-q-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--line2);
}
.ar-q-row:last-child { border-bottom: 0; }
.ar-q-n { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ar-q-n b { font-size: 13px; display: block; }
.ar-q-n i { font-style: normal; font-size: 11.5px; color: var(--ink2); }
html.mo-on .ar-q-row {
  animation: ar-row 320ms var(--ar-ease) both;
  animation-delay: calc(var(--ar-i, 0) * 30ms);
}

/* ============================================================
   11 · RULES
   ============================================================ */
.ar-creed-col ul { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; }
.ar-creed-col li { font-size: 12.5px; color: var(--ink2); }
.ar-creed-col b { color: var(--ink); }

.ar-rules { display: flex; flex-direction: column; gap: 4px; }
.ar-rule {
  display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: start;
  padding: 10px 8px; border-radius: 10px;
}
.ar-rule:hover { background: var(--surface2); }
.ar-rule-pts {
  display: grid; place-items: center;
  min-width: 46px; padding: 4px 6px; border-radius: 9px;
  font-family: var(--display); font-weight: 750; font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.ar-rule-pts.ar-pos { background: var(--good-soft); color: var(--good); }
.ar-rule-pts.ar-neg { background: var(--bad-soft); color: var(--bad); }
.ar-rule-n { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ar-rule-n b { font-size: 13.5px; }
.ar-rule-n i { font-style: normal; font-size: 12.5px; color: var(--ink2); }
.ar-neg-card { border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }
html.mo-on .ar-rule {
  animation: ar-row 300ms var(--ar-ease) both;
  animation-delay: calc(var(--ar-i, 0) * 22ms);
}

.ar-ladder { display: flex; flex-direction: column; gap: 6px; }
.ar-rung {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(80px, 2fr);
  align-items: center; gap: 12px;
  padding: 9px 8px; border-radius: 10px; border: 1px solid var(--line2);
}
.ar-rung-l {
  display: grid; place-items: center; height: 26px; border-radius: 8px;
  background: var(--accent-soft); color: var(--accent-ink); font-weight: 800; font-size: 12px;
}
.ar-rung-n { display: flex; flex-direction: column; line-height: 1.25; }
.ar-rung-n b { font-size: 13.5px; }
.ar-rung-n i { font-style: normal; font-size: 11.5px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.ar-rung-bar {
  display: block; height: 8px; border-radius: 6px;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  transform-origin: 0 50%; transform: scaleX(var(--ar-p, 1));
}
html.mo-on .ar-rung-bar {
  animation: ar-fill 560ms var(--ar-ease) both;
  animation-delay: calc(var(--ar-i, 0) * 44ms);
}
html.mo-on .ar-rung {
  animation: ar-row 320ms var(--ar-ease) both;
  animation-delay: calc(var(--ar-i, 0) * 34ms);
}

.ar-season-card {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface2);
}
.ar-season-card b { font-size: 13px; }
.ar-season-card i { font-style: normal; font-size: 12px; color: var(--accent-ink); font-weight: 650; }

.ar-anti ul { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 9px; }
.ar-anti li { font-size: 12.5px; color: var(--ink2); }
.ar-anti li b { color: var(--ink); }
.ar-anti > p { font-size: 13px; color: var(--ink2); }

.ar-modal-head { display: flex; align-items: center; gap: 10px; }
.ar-modal-list { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; color: var(--ink2); }
.ar-modal-list .ar-rule-pts { display: inline-grid; min-width: 38px; font-size: 12px; padding: 1px 5px; vertical-align: -3px; }

/* ============================================================
   12 · STALLED DOCUMENT
   Every reveal above is a `from`-only keyframe, so switching the
   animation off leaves each element at its own natural value —
   a podium at full opacity, a bar at its true width. arena.js
   sets this class when the document timeline has never advanced,
   which is the one case where a fill-mode animation would park
   on its first frame and hide content for good.
   ============================================================ */
html.ar-still .ar-plinth,
html.ar-still .ar-medal::after,
html.ar-still .ar-mv-up,
html.ar-still .ar-mv-down,
html.ar-still .ar-hot .ar-flame,
html.ar-still .ar-bar-fill,
html.ar-still .ar-tbl tbody tr,
html.ar-still .ar-team-row,
html.ar-still .ar-ring,
html.ar-still .ar-banner-chips .ar-chip,
html.ar-still .ar-earned .ar-ach-ic,
html.ar-still .ar-ach-sweep,
html.ar-still .ar-cat-card,
html.ar-still .ar-tl .tl-item,
html.ar-still .ar-reward,
html.ar-still .ar-reward.ar-flip,
html.ar-still .ar-q-row,
html.ar-still .ar-rule,
html.ar-still .ar-rung,
html.ar-still .ar-rung-bar,
html.ar-still .ar-bit { animation: none !important; }

/* ============================================================
   13 · REDUCED MOTION — the whole file collapses to a still frame
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html.mo-on .ar-plinth,
  html.mo-on .ar-medal::after,
  html.mo-on .ar-mv-up,
  html.mo-on .ar-mv-down,
  html.mo-on .ar-hot .ar-flame,
  html.mo-on .ar-bar-fill,
  html.mo-on .ar-tbl tbody tr,
  html.mo-on .ar-team-row,
  html.mo-on .ar-ring,
  html.mo-on .ar-banner-chips .ar-chip,
  html.mo-on .ar-earned .ar-ach-ic,
  html.mo-on .ar-ach-sweep,
  html.mo-on .ar-cat-card,
  html.mo-on .ar-tl .tl-item,
  html.mo-on .ar-reward,
  html.mo-on .ar-reward.ar-flip,
  html.mo-on .ar-q-row,
  html.mo-on .ar-rule,
  html.mo-on .ar-rung,
  html.mo-on .ar-rung-bar,
  .ar-bit {
    animation: none !important;
  }
  /* nothing may be left hidden or displaced by an animation that no longer runs */
  html.mo-on .ar-plinth,
  html.mo-on .ar-mv-up,
  html.mo-on .ar-mv-down,
  html.mo-on .ar-tbl tbody tr,
  html.mo-on .ar-team-row,
  html.mo-on .ar-ring,
  html.mo-on .ar-banner-chips .ar-chip,
  html.mo-on .ar-earned .ar-ach-ic,
  html.mo-on .ar-cat-card,
  html.mo-on .ar-tl .tl-item,
  html.mo-on .ar-reward,
  html.mo-on .ar-q-row,
  html.mo-on .ar-rule,
  html.mo-on .ar-rung { opacity: 1 !important; transform: none !important; }

  .ar-bar-fill { transform: scaleX(var(--ar-p, 1)) !important; }
  .ar-rung-bar { transform: scaleX(var(--ar-p, 1)) !important; }
  .ar-medal::after, .ar-ach-sweep { opacity: 0 !important; }
  .ar-burst, .ar-bit { display: none !important; }
  .ar-ach { transition: none !important; }
  .ar-ach:hover { transform: none !important; }
  .ar-rewards { perspective: none; }
}