/* ==========================================================
   District 5 — Crispy Fight Night
   Art direction: docs/aaa-experience/03-ART-DIRECTION.md §5

   An underground New Snack City venue dressed as a live broadcast.
   Chain-link and canvas at the edges, broadcast graphics over the top.
   Blood orange with broadcast red; the ring light is the only soft source.

   Scope note: the Arena's match, wager and tournament logic is live and
   server-authoritative (js/arena-page.js). This sheet re-dresses the venue —
   the room, the type, the broadcast furniture and the state language — over
   the existing structure. It changes no economy path.
   ========================================================== */

/* ── The venue ──────────────────────────────────────────────────────── */

.arn-venue {
  position: absolute;
  inset: 0;
  background:
    /* the ring light, hanging over the middle */
    radial-gradient(46% 30% at 50% -4%, color-mix(in srgb, var(--aaa-light) 20%, transparent), transparent 66%),
    /* the crowd, in shadow */
    radial-gradient(120% 60% at 50% 118%, hsla(14,60%,20%,0.5), transparent 64%),
    linear-gradient(0deg, hsl(258 30% 4%), transparent 76%);
}
/* Chain-link at the edges of the room. Static geometry, no images. */
.arn-venue::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, transparent 0 21px, color-mix(in srgb, var(--aaa-light) 9%, transparent) 21px 22px),
    repeating-linear-gradient(-45deg, transparent 0 21px, color-mix(in srgb, var(--aaa-light) 9%, transparent) 21px 22px);
  -webkit-mask-image: radial-gradient(90% 70% at 50% 50%, transparent 42%, #000 100%);
          mask-image: radial-gradient(90% 70% at 50% 50%, transparent 42%, #000 100%);
  opacity: 0.5;
}
.aaa-q-lite .arn-venue::after { display: none; }

/* ── Broadcast header ───────────────────────────────────────────────── */

.arn-head { padding: clamp(0.5rem, 2vw, 1rem) 0 0; text-align: center; }
.arn-head .aaa-plate { margin-inline: auto; }
.arn-head .aaa-marquee { margin-inline: auto; }
.arn-head .aaa-lede { margin-inline: auto; text-align: center; max-width: 56ch; }

/* The lower-third: the strip a broadcast puts its facts on. */
.arn-lower3 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  align-items: stretch;
  margin-top: var(--aaa-gap);
  min-height: 52px;
}
.arn-fact {
  display: grid;
  gap: 0.1rem;
  padding: 0.45rem 0.9rem;
  border-left: 3px solid var(--aaa-light);
  background: linear-gradient(90deg, color-mix(in srgb, var(--aaa-light) 15%, transparent), transparent);
  text-align: left;
}
.arn-fact .k {
  font-family: var(--font-display);
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--aaa-ink-3);
}
.arn-fact .v {
  font-family: var(--aaa-mono);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--aaa-ink-1);
  font-variant-numeric: tabular-nums;
}

/* ── Fight-night actions ────────────────────────────────────────────── */

.arena-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-top: var(--aaa-gap);
}
.arena-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid var(--aaa-hairline);
  background: var(--aaa-night-2);
  color: var(--aaa-ink-1);
  padding: 0.85rem 1.4rem;
  min-height: 48px;
  cursor: pointer;
  transition: box-shadow var(--aaa-t-quick) var(--aaa-e-settle),
              border-color var(--aaa-t-quick) var(--aaa-e-settle);
}
.arena-btn:focus-visible { outline: 2px solid var(--aaa-light); outline-offset: 3px; }
.arena-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.arena-btn-primary {
  background: var(--aaa-light);
  color: var(--aaa-light-on);
  border-color: transparent;
}
.arena-btn-primary:hover:not(:disabled) { box-shadow: 0 0 24px color-mix(in srgb, var(--aaa-light) 55%, transparent); }
.arena-btn-secondary:hover:not(:disabled),
.arena-btn-ghost:hover:not(:disabled) { border-color: color-mix(in srgb, var(--aaa-light) 55%, transparent); }
/* The old sheet hung a decorative glow slab behind the primary action; it
   sat offset behind the new pill. Neutralised here rather than edited out of
   the page's 700-line inline block. */
.arena-btn-primary-wrap { display: inline-flex; background: none; box-shadow: none; border: 0; padding: 0; animation: none; }
.arena-btn-primary-wrap::before,
.arena-btn-primary-wrap::after { display: none; }

/* ── Cards as broadcast panels ──────────────────────────────────────── */

.arena-card {
  position: relative;
  background: linear-gradient(180deg, var(--aaa-night-3), var(--aaa-night-2));
  border: 1px solid var(--aaa-hairline);
  border-radius: var(--aaa-radius);
  padding: clamp(0.9rem, 3vw, 1.4rem);
  box-shadow: 0 4px 26px rgba(0,0,0,0.42);
}
.arena-card + .arena-card { margin-top: var(--aaa-gap); }
/* Every panel wears a broadcast tab. */
.arena-card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aaa-ink-1);
  margin: 0 0 0.8rem;
  padding-left: 0.65rem;
  border-left: 3px solid var(--aaa-light);
  line-height: 1.4;
}

.arena-layout { margin-top: clamp(1.4rem, 4vw, 2.2rem); }
.arena-inner { width: 100%; max-width: var(--aaa-shell); margin: 0 auto; padding: 0 var(--aaa-gutter); position: relative; z-index: 2; }
.arena-inner * { min-width: 0; }

/* ── Verified / unverified: a broadcast credential, never fine print ─── */

.arn-cred {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  border-radius: 3px;
  border: 1px solid var(--aaa-hairline);
  font-family: var(--font-display);
  font-size: 0.54rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.24rem 0.55rem;
  color: var(--aaa-ink-2);
}
.arn-cred.is-verified { color: var(--aaa-good); border-color: color-mix(in srgb, var(--aaa-good) 45%, transparent); }

@media (max-height: 480px) and (orientation: landscape) {
  .arn-head { padding-top: 0.4rem; }
  .arn-lower3 { margin-top: 0.6rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE LADDER
   ══════════════════════════════════════════════════════════════════════════
   The centrepiece, so it is built like one: full width, its own frame, and rows
   that read left-to-right as GAME → WHO HOLDS IT → HOW FAR OFF YOU ARE. That
   last column is the one a competitive player is actually here for, so it gets
   the weight and the colour.

   The four row states are visually distinct because they are four different
   situations: a throne you hold, one nobody has claimed, one you are chasing,
   and one you are not on at all. A single neutral row for all four would waste
   the only page on the site that can tell a player something about themselves.
   ────────────────────────────────────────────────────────────────────────── */

.arena-ladder {
  margin: 0 0 var(--space-6, 1.5rem);
  border: 1px solid hsl(0 60% 50% / .26);
  border-radius: 18px;
  background:
    linear-gradient(180deg, hsl(0 70% 55% / .07), transparent 34%),
    hsl(240 30% 6% / .78);
  box-shadow: 0 24px 60px hsl(0 0% 0% / .5), inset 0 1px 0 hsl(0 0% 100% / .06);
  overflow: hidden;
}

.lad-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid hsl(0 60% 50% / .2);
  background: hsl(0 60% 50% / .06);
}
.lad-head h2 {
  margin: 0;
  font: 900 1.05rem/1.1 var(--font-display, Inter), sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: hsl(0 0% 98%);
}
.lad-summary {
  margin: .35rem 0 0;
  font-size: .74rem;
  line-height: 1.35;
  color: hsl(0 0% 62%);
}
.lad-summary b { color: hsl(38 100% 66%); }

.lad-all {
  flex: none;
  padding: .55rem .85rem;
  border: 1px solid hsl(0 60% 55% / .4);
  border-radius: 999px;
  font: 800 .66rem/1 var(--font-display, Inter), sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: hsl(0 0% 92%);
  text-decoration: none;
  white-space: nowrap;
}
.lad-all:hover { background: hsl(0 60% 55% / .18); }

.lad-rows { display: flex; flex-direction: column; }

.lad-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: .85rem;
  padding: .7rem 1.25rem;
  border-top: 1px solid hsl(0 0% 100% / .05);
  text-decoration: none;
  color: inherit;
  /* Left edge carries the state, so the list is scannable without reading it. */
  border-left: 3px solid transparent;
  transition: background .16s ease, border-left-color .16s ease, transform .16s ease;
}
.lad-row:first-child { border-top: none; }
.lad-row:hover { background: hsl(0 0% 100% / .04); transform: translateX(2px); }

.lad-icon { font-size: 1.15rem; text-align: center; }

.lad-game { min-width: 0; }
.lad-game b {
  display: block;
  font: 800 .84rem/1.2 var(--font-body, Inter), sans-serif;
  color: hsl(0 0% 96%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lad-game small {
  display: block;
  margin-top: .15rem;
  font: 600 .66rem/1.2 ui-monospace, Menlo, monospace;
  color: hsl(0 0% 52%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lad-standing {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  justify-content: flex-end;
  text-align: right;
  white-space: nowrap;
}
.lad-go { color: hsl(0 0% 40%); font-size: .8rem; }
.lad-row:hover .lad-go { color: hsl(38 100% 66%); }

/* THE FOUR STATES. */

/* Yours. The loudest row on the page, because holding one is the point. */
.lad-held { border-left-color: hsl(38 100% 62%); }
.lad-row.lad-held { background: linear-gradient(90deg, hsl(38 100% 60% / .12), transparent 60%); }
.lad-row.lad-held .lad-game b { color: hsl(38 100% 78%); }
span.lad-held {
  font: 900 .74rem/1 var(--font-display, Inter), sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: hsl(38 100% 68%);
}

/* Unclaimed. An invitation, and the cheapest rank on the floor. */
.lad-row.lad-open { border-left-color: hsl(150 70% 50%); }
span.lad-open {
  font: 800 .72rem/1.3 var(--font-body, Inter), sans-serif;
  color: hsl(150 70% 62%);
}

/* Chasing. The gap is the hook, so the gap is the biggest thing in the row. */
.lad-row.lad-chasing { border-left-color: hsl(0 75% 55%); }
.lad-rank {
  font: 900 1rem/1 ui-monospace, Menlo, monospace;
  color: hsl(0 0% 88%);
}
.lad-gap {
  font: 800 .72rem/1 ui-monospace, Menlo, monospace;
  color: hsl(0 80% 68%);
}
.lad-row.lad-held .lad-gap { color: hsl(38 60% 62%); }

/* Not on the board. Stated plainly rather than dressed up. */
.lad-row.lad-absent { border-left-color: hsl(0 0% 26%); }
span.lad-absent {
  font: 700 .7rem/1 var(--font-body, Inter), sans-serif;
  color: hsl(0 0% 46%);
}

.lad-loading, .lad-quiet {
  margin: 0;
  padding: 1.25rem;
  text-align: center;
  font-size: .74rem;
  line-height: 1.5;
  color: hsl(0 0% 50%);
}

@media (max-width: 640px) {
  .lad-head { flex-direction: column; align-items: flex-start; }
  .lad-row { grid-template-columns: 26px minmax(0, 1fr) auto; padding: .65rem .9rem; gap: .6rem; }
  .lad-go { display: none; }
  .lad-standing { flex-direction: column; align-items: flex-end; gap: .1rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LIVE CLOCKS AND AUTHORED EMPTY STATES
   ══════════════════════════════════════════════════════════════════════════
   A deadline earns its colour by actually approaching. Amber under an hour, red
   and pulsing under ten minutes, and the row dims once it is gone. None of these
   thresholds are decorative — the server refuses the challenge at zero.
   ────────────────────────────────────────────────────────────────────────── */

.arena-clock-wrap { font-size: .6rem; }

.arena-clock {
  display: inline-block;
  padding: .1rem .4rem;
  border-radius: 4px;
  font: 700 .6rem/1.4 ui-monospace, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  color: hsl(0 0% 52%);
  background: hsl(0 0% 100% / .05);
}
.arena-clock::before { content: '⏱ '; opacity: .7; }

.arena-clock.is-soon {
  color: hsl(38 100% 68%);
  background: hsl(38 100% 60% / .14);
}
.arena-clock.is-urgent {
  color: hsl(0 0% 100%);
  background: hsl(0 80% 48%);
  animation: arenaClockPulse 1s ease-in-out infinite;
}
.arena-clock.is-gone { color: hsl(0 0% 38%); background: hsl(0 0% 100% / .04); }

@keyframes arenaClockPulse {
  0%, 100% { box-shadow: 0 0 0 hsl(0 80% 55% / 0); }
  50%      { box-shadow: 0 0 14px hsl(0 80% 55% / .8); }
}

/* An expired row stays put and dims, rather than disappearing under a cursor
   that was already on its way to the button. */
.arena-row.is-expired { opacity: .42; filter: saturate(.4); }
.arena-row.is-expired .arena-play-btn { pointer-events: none; opacity: .5; }

@media (prefers-reduced-motion: reduce) {
  .arena-clock.is-urgent { animation: none; }
}

/* The tournaments panel with nothing in it still has a job. */
.arena-empty-tourney { padding: 1.1rem .9rem 1.25rem; text-align: center; }
.aet-head {
  margin: 0 0 .5rem;
  font: 900 .78rem/1.2 var(--font-display, Inter), sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: hsl(0 0% 82%);
}
.aet-body {
  margin: 0 auto 1rem;
  max-width: 34ch;
  font-size: .72rem;
  line-height: 1.55;
  color: hsl(0 0% 56%);
}
.aet-cta { width: 100%; max-width: 220px; }
.aet-alt {
  display: block;
  margin-top: .7rem;
  font-size: .66rem;
  color: hsl(0 0% 48%);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.aet-alt:hover { color: hsl(38 100% 66%); }

/* THE COLUMNS STOP STRETCHING. They took their height from the tallest of the
   three, which left the challenge board as a tall empty box and put a screen of
   nothing under the fold. */
.arena-layout { align-items: start; }

/* ══════════════════════════════════════════════════════════════════════════
   HALL OF FAME — the flex surface
   ══════════════════════════════════════════════════════════════════════════
   Deliberately a different shape from the Ladder above it. The Ladder is inward
   facing and per-game, so it is a list of rows; this is outward facing and
   singular, so it is a podium — first place gets real estate the rest do not.
   Two identical tables stacked would read as one long table.
   ────────────────────────────────────────────────────────────────────────── */

.arena-glory {
  margin: var(--space-6, 1.5rem) 0 0;
  border: 1px solid hsl(38 80% 55% / .26);
  border-radius: 18px;
  background:
    linear-gradient(180deg, hsl(38 100% 60% / .07), transparent 34%),
    hsl(250 30% 6% / .8);
  box-shadow: 0 24px 60px hsl(0 0% 0% / .5), inset 0 1px 0 hsl(0 0% 100% / .06);
  overflow: hidden;
}

.glory-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid hsl(38 80% 55% / .2);
  background: hsl(38 80% 55% / .06);
}
.glory-head h2 {
  margin: 0;
  font: 900 1.05rem/1.1 var(--font-display, Inter), sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: hsl(0 0% 98%);
}
.glory-summary { margin: .35rem 0 0; font-size: .74rem; color: hsl(0 0% 62%); }
.glory-summary b { color: hsl(38 100% 68%); }

.glory-rows {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: .5rem;
  padding: .9rem;
}

.glory-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: .7rem;
  padding: .7rem .8rem;
  border: 1px solid hsl(0 0% 100% / .07);
  border-radius: 12px;
  background: hsl(0 0% 100% / .03);
}

/* First place spans the row and is built like a trophy case. */
.glory-row.is-first {
  grid-column: 1 / -1;
  padding: 1rem 1.1rem;
  border-color: hsl(38 100% 60% / .45);
  background:
    linear-gradient(100deg, hsl(38 100% 58% / .18), hsl(38 100% 58% / .03) 55%, transparent),
    hsl(0 0% 100% / .03);
  box-shadow: inset 0 0 40px hsl(38 100% 55% / .1);
}
.glory-row.is-first .glory-pos { font-size: 1.9rem; }
.glory-row.is-first .glory-who b { font-size: 1.15rem; color: hsl(38 100% 82%); }
.glory-row.is-first .glory-xp { font-size: 1.25rem; color: hsl(38 100% 74%); }

/* The viewer's own row, wherever it sits. */
.glory-row.is-me {
  border-color: hsl(190 90% 55% / .55);
  box-shadow: 0 0 0 1px hsl(190 90% 55% / .3), inset 0 0 26px hsl(190 90% 55% / .1);
}
.glory-row.is-me .glory-who b::after {
  content: "you";
  margin-left: .45rem;
  padding: .1rem .32rem;
  border-radius: 4px;
  background: hsl(190 90% 55% / .22);
  color: hsl(190 90% 78%);
  font: 800 .54rem/1.4 var(--font-display, Inter), sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  vertical-align: middle;
}

.glory-pos { font-size: 1.1rem; text-align: center; color: hsl(0 0% 62%); font-weight: 900; }
.glory-who { min-width: 0; }
.glory-who b {
  display: block;
  font: 800 .86rem/1.2 var(--font-body, Inter), sans-serif;
  color: hsl(0 0% 96%);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.glory-who small {
  display: block; margin-top: .1rem;
  font: 600 .62rem/1.2 var(--font-body, Inter), sans-serif;
  color: hsl(280 60% 74%);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.glory-xp {
  font: 900 .96rem/1 ui-monospace, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  color: hsl(0 0% 90%);
  white-space: nowrap;
}
.glory-xp small { margin-left: .25rem; font-size: .56rem; opacity: .6; }

.glory-quiet {
  grid-column: 1 / -1;
  margin: 0; padding: 1.25rem; text-align: center;
  font-size: .74rem; line-height: 1.5; color: hsl(0 0% 50%);
}

/* ══════════════════════════════════════════════════════════════════════════
   THE FLEX CARD — the thing a player screenshots
   ══════════════════════════════════════════════════════════════════════════
   Deliberately DOM and not a canvas export. The viewer sandbox blocks
   script-initiated downloads, so a "save as PNG" button would be a control that
   silently does nothing. A card built to be screenshotted works everywhere,
   including on the phone most players are holding.

   Its intensity is set by the WIN MARGIN, which the server confirmed — the tiers
   are earned, not decorative.
   ────────────────────────────────────────────────────────────────────────── */

.arena-flex {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: hsl(250 40% 3% / .86);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .24s ease;
}
.arena-flex.is-in { opacity: 1; }

.aflex-card {
  width: min(380px, 100%);
  padding: 1.75rem 1.5rem 1.4rem;
  text-align: center;
  border-radius: 20px;
  border: 1px solid hsl(38 100% 62% / .5);
  background:
    radial-gradient(120% 80% at 50% 0%, hsl(38 100% 55% / .22), transparent 62%),
    linear-gradient(180deg, hsl(250 40% 12%), hsl(250 45% 5%));
  box-shadow: 0 30px 80px hsl(0 0% 0% / .7), inset 0 1px 0 hsl(0 0% 100% / .12);
  transform: translateY(14px) scale(.97);
  transition: transform .3s cubic-bezier(.2, .9, .25, 1.05);
}
.arena-flex.is-in .aflex-card { transform: none; }

.aflex-tag {
  margin: 0 0 .6rem;
  font: 900 .64rem/1 var(--font-display, Inter), sans-serif;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: hsl(38 100% 70%);
}
.aflex-pot {
  margin: 0;
  font: 900 3rem/1 ui-monospace, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  color: hsl(0 0% 100%);
  text-shadow: 0 0 34px hsl(38 100% 60% / .6);
}
.aflex-pot small { margin-left: .35rem; font-size: .9rem; opacity: .7; }
.aflex-game {
  margin: .5rem 0 1.1rem;
  font: 800 .8rem/1.2 var(--font-body, Inter), sans-serif;
  color: hsl(0 0% 76%);
}

.aflex-scores {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .6rem;
  padding: .8rem 0;
  border-block: 1px solid hsl(0 0% 100% / .1);
}
.aflex-scores span {
  display: block;
  font: 800 .56rem/1 var(--font-display, Inter), sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: hsl(0 0% 52%);
}
.aflex-scores b {
  display: block; margin-top: .2rem;
  font: 900 1.15rem/1 ui-monospace, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  color: hsl(0 0% 96%);
}
.aflex-vs {
  font: 800 .6rem/1 var(--font-display, Inter), sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: hsl(38 100% 66%);
}
.aflex-margin {
  margin: .7rem 0 0;
  font: 900 .78rem/1 ui-monospace, Menlo, monospace;
  color: hsl(150 70% 62%);
}
.aflex-mark {
  margin: 1rem 0 1.1rem;
  font: 700 .58rem/1 var(--font-display, Inter), sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: hsl(0 0% 40%);
}
.aflex-close {
  width: 100%;
  padding: .8rem;
  border: none;
  border-radius: 999px;
  background: linear-gradient(100deg, hsl(38 100% 60%), hsl(18 90% 52%));
  color: hsl(250 40% 8%);
  font: 900 .76rem/1 var(--font-display, Inter), sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
}
.aflex-close:hover { filter: brightness(1.1); }

/* The bigger the confirmed margin, the more the card carries. */
.arena-flex-epic .aflex-card,
.arena-flex-legendary .aflex-card { border-color: hsl(38 100% 70% / .8); }
.arena-flex-legendary .aflex-card {
  box-shadow: 0 30px 90px hsl(0 0% 0% / .75), 0 0 70px hsl(38 100% 55% / .34),
    inset 0 1px 0 hsl(0 0% 100% / .16);
  animation: aflexBreathe 2.4s ease-in-out infinite;
}
@keyframes aflexBreathe {
  0%, 100% { box-shadow: 0 30px 90px hsl(0 0% 0% / .75), 0 0 60px hsl(38 100% 55% / .28), inset 0 1px 0 hsl(0 0% 100% / .16); }
  50%      { box-shadow: 0 30px 90px hsl(0 0% 0% / .75), 0 0 110px hsl(38 100% 55% / .5), inset 0 1px 0 hsl(0 0% 100% / .16); }
}
@media (prefers-reduced-motion: reduce) {
  .arena-flex-legendary .aflex-card { animation: none; }
  .aflex-card { transition: none; }
}

@media (max-width: 640px) {
  .glory-head { flex-direction: column; align-items: flex-start; }
  .glory-rows { grid-template-columns: 1fr; }
  .aflex-pot { font-size: 2.4rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE ARENA FLOOR — the live standings, drawn as a place
   ══════════════════════════════════════════════════════════════════════════
   Fixed and full-bleed, under everything, the same slot the old dead canvas
   held. The hero copy sits on it; the cards below scroll over it. It is bright
   at the horizon and dark at the edges, so the page's own panels still read.
   ────────────────────────────────────────────────────────────────────────── */

.arena-floor {
  /* ABSOLUTE within .arena-page (which is position:relative, z-index:1 — a
     stacking context), and z-index:-1 so it paints under the hero copy but over
     the page background. Sized to the hero band: 100vh on a normal screen, capped
     so a very tall viewport does not push the skyline down under the cards, and
     floored so a short one still has room for it. */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(720px, 100vh, 1000px);
  width: 100%;
  z-index: -1;
  pointer-events: none;
  display: block;
}

/* The old red radial and grid overlay now sit ON the floor rather than being
   the whole background, so they thin out and let it through. */
.arena-hero-bg { opacity: .35; }
.arena-grid-overlay { opacity: .35; }

/* The hero gets the height a floor needs to be seen: it is a horizon shot, and
   a horizon needs a horizon's worth of vertical room. */
.arn-head {
  min-height: min(78vh, 720px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* The hero copy sits in the SKY, the CTAs on the horizon line, and the ladder
   stands on the floor beneath the pillars — one composition, top to bottom. */
.arn-head { min-height: min(62vh, 600px); justify-content: flex-start; padding-top: 6vh; }

/* The ladder is a slab standing on the floor: heavier top edge, floor-coloured
   base, and it lets a little of the scene through so it belongs to it. */
.arena-ladder {
  /* Clear of the pillars: they stand in the band below the CTAs, and the ladder
     starts under their base plates and labels. */
  margin-top: clamp(300px, 42vh, 460px);
  background:
    linear-gradient(180deg, hsl(0 70% 55% / .09), transparent 30%),
    hsl(250 30% 6% / .86);
  backdrop-filter: blur(6px);
  border-top: 2px solid hsl(0 70% 60% / .5);
}

/* ══════════════════════════════════════════════════════════════════════════
   THE FLOOR AND THE LADDER TALK
   ══════════════════════════════════════════════════════════════════════════ */

/* Over a pillar, the cursor says so. */
html.arena-floor-hot, html.arena-floor-hot body { cursor: pointer; }

/* A row lit from the floor — same treatment as a hover, so the two are one. */
.lad-row.is-lit,
.lad-row:hover {
  background: hsl(0 0% 100% / .05);
  transform: translateX(3px);
  box-shadow: inset 0 0 0 1px hsl(0 0% 100% / .06);
}
.lad-row.is-lit .lad-go,
.lad-row:hover .lad-go { color: hsl(38 100% 66%); transform: translateX(2px); }
.lad-go { transition: color .16s, transform .16s; }

/* Rows come in one after another rather than appearing as a block. */
@keyframes ladRowIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: none; }
}
.lad-row { animation: ladRowIn .38s cubic-bezier(.2,.8,.2,1) both; }
.lad-row:nth-child(1)  { animation-delay: .00s; }
.lad-row:nth-child(2)  { animation-delay: .04s; }
.lad-row:nth-child(3)  { animation-delay: .08s; }
.lad-row:nth-child(4)  { animation-delay: .12s; }
.lad-row:nth-child(5)  { animation-delay: .16s; }
.lad-row:nth-child(6)  { animation-delay: .20s; }
.lad-row:nth-child(7)  { animation-delay: .24s; }
.lad-row:nth-child(8)  { animation-delay: .28s; }
.lad-row:nth-child(9)  { animation-delay: .32s; }
.lad-row:nth-child(10) { animation-delay: .36s; }

/* The unclaimed rows breathe, quietly, in time with their pillars. */
@keyframes ladOpenBreathe {
  0%, 100% { border-left-color: hsl(150 70% 50%); }
  50%      { border-left-color: hsl(150 90% 70%); box-shadow: inset 3px 0 12px -6px hsl(150 80% 60% / .6); }
}
.lad-row.lad-open { animation: ladRowIn .38s cubic-bezier(.2,.8,.2,1) both, ladOpenBreathe 2.6s ease-in-out infinite; }

/* The one you hold does not breathe — it BURNS, steadily. */
.lad-row.lad-held { box-shadow: inset 4px 0 18px -8px hsl(38 100% 60% / .8); }

@media (prefers-reduced-motion: reduce) {
  .lad-row, .lad-row.lad-open { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CONTROLS — arena hardware, not web buttons
   ══════════════════════════════════════════════════════════════════════════
   The three CTAs were rounded pills that grew 5% on hover, which is every
   website. On this district they are plates: chamfered, lit from within, a
   light SWEEPS across on hover instead of the whole thing inflating, and they
   pull very slightly toward the cursor (magnetism is done in JS, see
   arena-motion.js). The primary one is a fight bell — it does not pulse a
   ring, it strikes.
   ────────────────────────────────────────────────────────────────────────── */

.arena-btn {
  border-radius: 0 !important;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  padding: .95rem 2.2rem !important;
  letter-spacing: .16em !important;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), filter .18s, box-shadow .18s !important;
  will-change: transform;
  isolation: isolate;
}

/* The light sweep. A bright bar crosses the plate once on hover — motion that
   reads as energy, where inflating reads as a tooltip. */
.arena-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(105deg,
    transparent 0%, transparent 38%,
    hsl(0 0% 100% / .38) 48%, hsl(0 0% 100% / .55) 50%, hsl(0 0% 100% / .38) 52%,
    transparent 62%, transparent 100%);
  transform: translateX(-130%);
  transition: none;
  pointer-events: none;
}
.arena-btn:hover::before {
  transform: translateX(130%);
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
.arena-btn > * { position: relative; z-index: 2; }

/* No more inflation. */
.arena-btn:hover { transform: none !important; filter: brightness(1.12); }
.arena-btn:active { transform: scale(.985) !important; filter: brightness(.95); }

/* The primary: a fight bell. It STRIKES rather than pulses — one hard hit on
   load, then it sits there being the brightest thing on the row. */
.arena-btn-primary-wrap::before,
.arena-btn-primary-wrap::after { animation: none !important; display: none; }

.arena-btn-primary {
  background: linear-gradient(100deg, hsl(0 90% 58%), hsl(0 85% 44%) 60%, hsl(348 80% 34%)) !important;
  box-shadow:
    0 0 0 1px hsl(0 90% 60% / .6),
    0 8px 30px hsl(0 90% 50% / .45),
    inset 0 1px 0 hsl(0 0% 100% / .25),
    inset 0 -2px 0 hsl(0 0% 0% / .3) !important;
  animation: bellStrike 1.1s cubic-bezier(.2,.9,.2,1) .35s both;
}
@keyframes bellStrike {
  0%   { transform: scale(.94); box-shadow: 0 0 0 1px hsl(0 90% 60% / .6), 0 0 0 hsl(0 90% 50% / 0); }
  30%  { transform: scale(1.06); box-shadow: 0 0 0 1px hsl(0 90% 60% / .9), 0 0 60px 8px hsl(0 90% 55% / .7); }
  100% { transform: none; }
}
.arena-btn-primary:hover {
  box-shadow:
    0 0 0 1px hsl(0 90% 65% / .9),
    0 12px 44px hsl(0 90% 50% / .6),
    inset 0 1px 0 hsl(0 0% 100% / .3),
    inset 0 -2px 0 hsl(0 0% 0% / .3) !important;
}

.arena-btn-secondary,
.arena-btn-ghost {
  background: linear-gradient(180deg, hsl(0 0% 100% / .06), hsl(0 0% 100% / .015)) !important;
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / .12), inset 0 -1px 0 hsl(0 0% 0% / .4) !important;
}
.arena-btn-secondary { border: 1px solid hsl(280 80% 60% / .55) !important; }
.arena-btn-ghost { border: 1px solid hsl(45 100% 60% / .5) !important; }
.arena-btn-secondary:hover { box-shadow: inset 0 1px 0 hsl(0 0% 100% / .12), 0 0 26px hsl(280 80% 55% / .35) !important; }
.arena-btn-ghost:hover { box-shadow: inset 0 1px 0 hsl(0 0% 100% / .12), 0 0 26px hsl(45 100% 55% / .3) !important; }

@media (prefers-reduced-motion: reduce) {
  .arena-btn::before { display: none; }
  .arena-btn-primary { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE HEADLINE — it is the fight card
   ══════════════════════════════════════════════════════════════════════════
   "CRISPY FIGHT NIGHT" was static type. A fight card is announced: the two
   words come in from opposite sides and MEET, and the second one lands with a
   flare — the same construction as a title card before a bout.
   ────────────────────────────────────────────────────────────────────────── */

/* Block, centred, and the position context for the flare. inline-block here
   collapsed the hero onto one line with the eyebrow. */
.arn-head .aaa-marquee {
  position: relative;
  display: block;
  width: fit-content;
  margin-inline: auto;
}
.aaa-marquee > span:first-child,
.aaa-marquee > span:last-child { display: inline-block; }

/* Two halves, opposite sides, meet in the middle. */
@keyframes cardLeft  { from { opacity: 0; transform: translateX(-46px) skewX(-8deg); } to { opacity: 1; transform: none; } }
@keyframes cardRight { from { opacity: 0; transform: translateX(46px) skewX(8deg); }  to { opacity: 1; transform: none; } }
.arn-head .aaa-marquee > span:first-child { animation: cardLeft .7s cubic-bezier(.2,.9,.2,1) .1s both; }
.arn-head .aaa-marquee > span:last-child  { animation: cardRight .7s cubic-bezier(.2,.9,.2,1) .1s both; }

/* The flare when they meet: a horizontal light that fires once. */
.arn-head .aaa-marquee::after {
  content: '';
  position: absolute;
  left: -6%;
  right: -6%;
  top: 50%;
  height: 2px;
  transform: translateY(-50%) scaleX(0);
  background: linear-gradient(90deg, transparent, hsl(18 100% 70%), hsl(0 0% 100%), hsl(18 100% 70%), transparent);
  filter: blur(.5px);
  box-shadow: 0 0 22px hsl(18 100% 60%);
  animation: cardFlare .5s cubic-bezier(.2,.9,.2,1) .78s both;
  pointer-events: none;
}
@keyframes cardFlare {
  0%   { transform: translateY(-50%) scaleX(0); opacity: 1; }
  60%  { transform: translateY(-50%) scaleX(1); opacity: 1; }
  100% { transform: translateY(-50%) scaleX(1.05); opacity: 0; }
}

/* And after that, the accent word keeps a slow ember in it. */
@keyframes emberText {
  0%, 100% { text-shadow: 0 0 18px hsl(18 100% 55% / .55), 0 0 2px hsl(18 100% 70%); }
  50%      { text-shadow: 0 0 34px hsl(18 100% 60% / .85), 0 0 4px hsl(18 100% 80%); }
}
.arn-head .aaa-marquee > span:last-child { animation: cardRight .7s cubic-bezier(.2,.9,.2,1) .1s both, emberText 3.2s ease-in-out 1.2s infinite; }

@media (prefers-reduced-motion: reduce) {
  .arn-head .aaa-marquee > span, .arn-head .aaa-marquee::after { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE THREE CARDS — panels that belong to the floor
   ══════════════════════════════════════════════════════════════════════════ */

.arena-card {
  border-radius: 0 !important;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  background:
    linear-gradient(180deg, hsl(0 0% 100% / .05), transparent 30%),
    hsl(250 30% 6% / .82) !important;
  backdrop-filter: blur(6px);
  border: 1px solid hsl(0 60% 55% / .22) !important;
  border-top: 2px solid hsl(0 70% 60% / .45) !important;
  transition: border-color .2s, box-shadow .2s;
}
.arena-card:hover { border-color: hsl(0 60% 55% / .42) !important; box-shadow: 0 0 40px hsl(0 70% 50% / .1); }

/* A challenge row is a bout on a card. */
.arena-row {
  border-radius: 0 !important;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  border-left: 3px solid hsl(280 80% 60%) !important;
  transition: background .16s, transform .16s;
}
.arena-row:hover { background: hsl(0 0% 100% / .05); transform: translateX(3px); }

.arena-play-btn {
  border-radius: 0 !important;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 900;
}

/* The sheen a tilted card carries — a soft light that follows the pointer.
   Driven by custom properties from arena-motion.js; no extra element. */
.has-tilt { position: relative; }
.has-tilt::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  border-radius: inherit;
  background: radial-gradient(
    380px 260px at var(--sheen-x, 50%) var(--sheen-y, 50%),
    hsl(0 0% 100% / .09), transparent 70%);
  opacity: var(--sheen-a, 0);
  transition: opacity .25s ease;
}

/* ══════════════════════════════════════════════════════════════════════════
   BROADCAST — the wire and the bulletin
   ══════════════════════════════════════════════════════════════════════════ */

/* THE WIRE: a ribbon on the horizon. Items enter from the right and push left. */
.arena-wire {
  display: flex;
  gap: .5rem;
  justify-content: center;
  flex-wrap: nowrap;
  overflow: hidden;
  margin: 1.4rem auto 0;
  max-width: 1100px;
  padding: .45rem .8rem;
  border-block: 1px solid hsl(0 70% 60% / .3);
  background: linear-gradient(90deg, transparent, hsl(0 0% 0% / .5) 12%, hsl(0 0% 0% / .5) 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  font: 700 .66rem/1 ui-monospace, Menlo, monospace;
  letter-spacing: .04em;
  color: hsl(0 0% 70%);
  white-space: nowrap;
}
.wire-item {
  flex: none;
  padding: .3rem .7rem;
  border-left: 2px solid hsl(0 70% 60% / .55);
  opacity: 0;
  transform: translateX(18px);
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
.wire-item.is-in { opacity: 1; transform: none; }
.wire-item b { color: hsl(0 0% 96%); font-weight: 900; }
.wire-item i { font-style: normal; color: hsl(38 100% 68%); margin-left: .35rem; }
.wire-quiet { border-left-color: hsl(0 0% 100% / .18); color: hsl(0 0% 50%); opacity: 1; transform: none; }

/* THE BULLETIN: a band across the hero for a moment that matters. */
.arena-bulletin {
  position: fixed;
  left: 0;
  right: 0;
  top: 22vh;
  z-index: 90;
  pointer-events: none;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.arena-bulletin.is-in { opacity: 1; transform: none; }
.bulletin-inner {
  display: grid;
  gap: .25rem;
  justify-items: center;
  padding: .9rem 2.4rem;
  clip-path: polygon(18px 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
  background: linear-gradient(100deg, hsl(0 85% 45% / .96), hsl(348 80% 32% / .96));
  box-shadow: 0 20px 60px hsl(0 0% 0% / .6), 0 0 60px hsl(0 90% 55% / .5);
  color: #fff;
  text-align: center;
}
.arena-bulletin-throne .bulletin-inner {
  background: linear-gradient(100deg, hsl(38 100% 52% / .97), hsl(18 90% 42% / .97));
  box-shadow: 0 20px 60px hsl(0 0% 0% / .6), 0 0 80px hsl(38 100% 55% / .6);
  color: hsl(20 40% 8%);
}
.bulletin-k {
  font: 900 .6rem/1 var(--font-display, Inter), sans-serif;
  letter-spacing: .3em;
  text-transform: uppercase;
  opacity: .8;
}
.bulletin-n {
  font: 900 1.5rem/1.1 var(--font-display, Inter), sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.bulletin-s { font: 700 .72rem/1.3 ui-monospace, Menlo, monospace; opacity: .85; }

/* The whole band sweeps in with the bulletin. */
.arena-bulletin::before {
  content: '';
  position: absolute;
  inset: 40% 0;
  background: linear-gradient(90deg, transparent, hsl(0 0% 100% / .12), transparent);
  transform: scaleX(0);
  transition: transform .5s cubic-bezier(.2,.9,.2,1);
}
.arena-bulletin.is-in::before { transform: scaleX(1); }

/* A challenge row that just appeared arrives lit. */
@keyframes rowArrive {
  0%   { box-shadow: 0 0 0 0 hsl(280 90% 65% / .8); background: hsl(280 80% 60% / .25); }
  100% { box-shadow: 0 0 0 14px hsl(280 90% 65% / 0); background: transparent; }
}
.arena-row.is-new { animation: rowArrive 1.6s ease-out 1; }

@media (prefers-reduced-motion: reduce) {
  .wire-item, .arena-bulletin, .arena-bulletin::before { transition: none; }
  .arena-row.is-new { animation: none; }
}
@media (max-width: 640px) {
  .arena-wire { margin-top: 1rem; font-size: .6rem; }
  .bulletin-n { font-size: 1.1rem; }
  .bulletin-inner { padding: .7rem 1.4rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PHONES — the Arena has to hold in one hand
   ══════════════════════════════════════════════════════════════════════════
   At 390px the eyebrow, the stat strip, the CTA row and the wire all ran off
   the right edge; the ladder's standing text clipped; ten pillar labels
   collided. Every one of those is a stacked or shrunk version of itself here,
   and nothing on the page may be wider than the page.
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .arena-page, .arn-head, .arena-layout { max-width: 100vw; overflow-x: hidden; }

  /* The eyebrow wraps and shrinks rather than running off. */
  .arn-head .aaa-plate { max-width: calc(100vw - 2rem); white-space: normal; font-size: .58rem; letter-spacing: .12em; }

  /* The three stats become a tight three-across strip. */
  .arn-head .arn-lower3 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: .4rem;
    max-width: calc(100vw - 2rem);
    margin-inline: auto;
  }
  .arn-head .arn-fact > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

  /* CTAs stack, full width, primary on top. */
  .arn-head .arena-btn-primary-wrap,
  .arn-head .arena-btn { width: calc(100vw - 2rem); max-width: 100%; margin-inline: auto; }
  .arn-head .arena-btn { justify-content: center; padding: .9rem 1rem !important; }

  /* The wire becomes a single scrolling line, clipped to the page. */
  .arena-wire {
    max-width: calc(100vw - 2rem);
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .arena-wire::-webkit-scrollbar { display: none; }

  /* The ladder's right column becomes a second line under the name, so the
     standing is never clipped. */
  .lad-row {
    grid-template-columns: 26px minmax(0, 1fr);
    grid-template-areas: "icon game" "icon standing";
    row-gap: .25rem;
  }
  .lad-icon { grid-area: icon; align-self: start; }
  .lad-game { grid-area: game; }
  .lad-standing { grid-area: standing; justify-content: flex-start; text-align: left; flex-direction: row; flex-wrap: wrap; gap: .4rem; }
  .lad-go { display: none; }
  span.lad-open, span.lad-absent { white-space: normal; }

  .lad-head { padding: .9rem 1rem; }
  .lad-all { align-self: flex-start; }
}
@media (max-width: 640px) {
  .arena-ctas { flex-direction: column; align-items: stretch; gap: .5rem; padding-inline: 1rem; }
  .arn-lower3 { padding-inline: 1rem; }
  .arn-fact .v { font-size: .9rem; }
  .arn-fact .k { font-size: .5rem; }
}
@media (max-width: 640px) {
  /* Everything sat ~30px right of centre: an inner wrapper with a desktop
     min-width, and a headline that does not wrap. Box it to the viewport. */
  .arena-inner { max-width: 100vw; min-width: 0; padding-inline: 1rem; box-sizing: border-box; overflow-x: hidden; }
  .arn-head { padding-inline: 0; }
  .arn-head .aaa-marquee { font-size: clamp(1.7rem, 9vw, 2.4rem); line-height: 1.05; white-space: normal; }
  .arn-head .aaa-marquee > span { display: inline; }
  .arn-head .aaa-plate { display: inline-block; max-width: 100%; }
  .aaa-lede { padding-inline: 0; max-width: 100%; }
  .arn-lower3 { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-inline: 0; }
  .arn-fact { min-width: 0; padding: .5rem .4rem; }
  .arn-fact .k { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .arena-ctas, .arena-wire { padding-inline: 0; max-width: 100%; }
  .arn-head .arena-btn-primary-wrap, .arn-head .arena-btn { width: 100%; }

  /* The stacked CTA row is taller than the desktop one, so the ladder starts
     lower and the floor's front row lands under the wire, not under the buttons. */
  .arena-ladder { margin-top: clamp(220px, 34vh, 340px); }
}
@media (max-width: 640px) {
  /* The headline overflowed because fit-content + inline-block halves refuse to
     break. On a phone the fight card stacks: CRISPY over FIGHT NIGHT. */
  .arn-head .aaa-marquee { width: auto; max-width: 100%; font-size: clamp(2rem, 11vw, 2.6rem); }
  .arn-head .aaa-marquee > span { display: block; }
  .arn-head .aaa-marquee > span:first-child { font-size: .62em; letter-spacing: .3em; opacity: .9; }

  /* The inner wrapper's own padding rule outranked mine by specificity. */
  main.arena-page .arena-inner { padding-left: .9rem; padding-right: .9rem; }
  .arn-lower3 { gap: .35rem; }
  .arn-fact { padding: .45rem .35rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE THREE CARDS — fight cards, not panels
   ══════════════════════════════════════════════════════════════════════════
   The columns still read as generic dashboard panels next to everything else.
   Each one is a card at a bout now: a hot top edge in its own colour (violet for
   challenges, gold for tournaments, red for the live feed), a title that reads
   like a section of a fight card, and a stage light that sweeps the card once
   when it enters.
   ────────────────────────────────────────────────────────────────────────── */

.arena-layout > .arena-card,
.arena-layout > div > .arena-card {
  position: relative;
  padding: 1.35rem 1.35rem 1.5rem !important;
  overflow: hidden;
}

/* The three colours, by column. */
#arena-challenges-col { border-top-color: hsl(280 85% 62% / .8) !important; }
#arena-challenges-col:hover { box-shadow: 0 0 44px hsl(280 85% 60% / .16); }
.arena-layout > div:nth-child(2) .arena-card { border-top-color: hsl(45 100% 58% / .8) !important; }
.arena-layout > div:nth-child(2) .arena-card:hover { box-shadow: 0 0 44px hsl(45 100% 55% / .14); }
.arena-layout > div:nth-child(3) .arena-card:first-child { border-top-color: hsl(0 85% 58% / .8) !important; }
.arena-layout > div:nth-child(3) .arena-card:first-child:hover { box-shadow: 0 0 44px hsl(0 85% 55% / .16); }

/* Card titles: fight-card sections. A hairline runs out from the title. */
.arena-card-title {
  position: relative;
  font-size: .62rem !important;
  letter-spacing: .26em !important;
  color: hsl(0 0% 88%) !important;
  padding-bottom: .7rem;
  margin-bottom: 1rem !important;
}
.arena-card-title::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, hsl(0 0% 100% / .35), hsl(0 0% 100% / .06) 50%, transparent);
}

/* The stage light: one sweep across the card as it enters. */
.arena-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, hsl(0 0% 100% / .07) 48%, hsl(0 0% 100% / .12) 50%, hsl(0 0% 100% / .07) 52%, transparent 70%);
  transform: translateX(-120%);
  animation: cardSweep 1.1s cubic-bezier(.2,.8,.2,1) .5s 1 both;
}
@keyframes cardSweep { to { transform: translateX(120%); } }
.arena-layout > div:nth-child(2) .arena-card::after { animation-delay: .65s; }
.arena-layout > div:nth-child(3) .arena-card::after { animation-delay: .8s; }

/* A challenge row is a bout: the pot is the headline figure. */
.arena-row { padding: .8rem .9rem !important; gap: .8rem !important; }
.arena-row-name { font-size: .84rem !important; letter-spacing: .02em; }
.arena-row-sub { font-family: ui-monospace, Menlo, monospace; font-size: .62rem !important; }
.arena-row-cc {
  font-size: .9rem !important;
  text-shadow: 0 0 14px hsl(45 100% 60% / .5);
}
.arena-play-btn {
  padding: .55rem .9rem !important;
  background: linear-gradient(100deg, hsl(280 85% 62%), hsl(262 80% 48%)) !important;
  box-shadow: 0 0 0 1px hsl(280 85% 65% / .5), 0 6px 18px hsl(280 85% 55% / .35);
  transition: filter .15s, transform .12s;
}
.arena-play-btn:hover { filter: brightness(1.15); transform: translateY(-1px); }
.arena-play-btn:active { transform: translateY(0) scale(.98); }

/* Live feed rows: a wire, not a list. */
#arena-live-feed .arena-row,
#arena-live-feed > div {
  border-left-color: hsl(0 85% 58%) !important;
  font-family: ui-monospace, Menlo, monospace;
}

/* Your Arena Stats: a scoreboard. */
.arena-balance-card {
  background: hsl(0 0% 0% / .35) !important;
  border: 1px solid hsl(0 0% 100% / .08) !important;
  border-radius: 0 !important;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  box-shadow: inset 0 2px 10px hsl(0 0% 0% / .6);
}
.abc-val {
  font-family: ui-monospace, Menlo, monospace !important;
  font-variant-numeric: tabular-nums;
  font-size: 1.25rem !important;
}
.abc-label { color: hsl(0 0% 50%) !important; letter-spacing: .18em !important; }

/* Signed-out stats card: say so, and offer the door. */
#arena-user-stats:empty::before {
  content: 'Sign in and your record — matches, wins, thrones held — is kept here.';
  display: block;
  padding: .9rem .4rem 0;
  font-size: .72rem;
  line-height: 1.55;
  color: hsl(0 0% 52%);
}

@media (prefers-reduced-motion: reduce) {
  .arena-card::after { animation: none; display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LADDER ROWS ARE DOORS — hover previews the fight
   ══════════════════════════════════════════════════════════════════════════
   The one number a competitive player wants is the score to beat. It is already
   in the row's small print; on hover it becomes the row's headline, and the
   arrow becomes a verb.
   ────────────────────────────────────────────────────────────────────────── */

.lad-row { position: relative; }
.lad-row::after {
  content: 'PLAY';
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translate(10px, -50%);
  padding: .3rem .6rem;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  background: linear-gradient(100deg, hsl(0 85% 58%), hsl(348 80% 40%));
  color: #fff;
  font: 900 .58rem/1 var(--font-display, Inter), sans-serif;
  letter-spacing: .2em;
  opacity: 0;
  transition: opacity .16s, transform .16s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
.lad-row:hover::after, .lad-row.is-lit::after { opacity: 1; transform: translate(0, -50%); }
.lad-row:hover .lad-standing, .lad-row.is-lit .lad-standing { transform: translateX(-56px); }
.lad-row:hover .lad-go, .lad-row.is-lit .lad-go { opacity: 0; }
.lad-standing { transition: transform .16s cubic-bezier(.2,.8,.2,1); }
.lad-row.lad-open::after { background: linear-gradient(100deg, hsl(150 70% 45%), hsl(160 70% 30%)); content: 'TAKE IT'; }
.lad-row.lad-held::after { background: linear-gradient(100deg, hsl(38 100% 55%), hsl(28 90% 42%)); color: hsl(20 40% 8%); content: 'DEFEND'; }

@media (max-width: 640px) {
  .lad-row::after { display: none; }
  .lad-row:hover .lad-standing, .lad-row.is-lit .lad-standing { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE HERO BAND IS A FIXED-PIXEL COMPOSITION
   ══════════════════════════════════════════════════════════════════════════
   Three things were scaling with the viewport height at three different rates:
   the canvas (clamped vh), the hero's padding (6vh), the ladder's margin (42vh).
   They agreed at ~950px tall and drifted apart at extremes — a 2100px capture
   put the wire across the pillar tops. So the band is pixels now: the values
   that composed correctly at 950, frozen. Identical on every desktop viewport;
   a short one simply scrolls. Phones have their own rules below.
   ────────────────────────────────────────────────────────────────────────── */
@media (min-width: 641px) {
  .arena-floor { height: 950px; }
  .arn-head { min-height: 590px; padding-top: 57px; }
  .arena-ladder { margin-top: 400px; }
}

/* Measured at 1400x950 and set from the numbers, not by eye:
     .arn-head content ends at the wire (588); the ladder sat at 1118. The wire
   pulls up under the CTAs, the head sizes to its content, and the ladder margin
   leaves a ~290px band for the pillars — front row above the fold on a 950px
   screen. The floor's height is set from JS to reach the ladder exactly. */
@media (min-width: 641px) {
  .arn-head { min-height: 0; padding-top: 57px; padding-bottom: 0; }
  .arena-wire { margin-top: 1rem; }
  /* Room for a crown, a medal, a plinth and a name: the thrones need a taller
     band than the bars did. */
  .arena-ladder { margin-top: 380px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE LADDER, 10x — a fight card, not a list
   ══════════════════════════════════════════════════════════════════════════
   Spotlight on your next throne. Every row: icon plate → game and holder →
   the podium → THE FIGURE → the verb, with a gap bar under rows that have a
   gap. Filters with counts. All of it redefines the earlier .lad-* rules,
   which stay for the pieces that did not change (head, summary, states).
   ────────────────────────────────────────────────────────────────────────── */

/* The old pseudo verb is retired: the verb is a real element now. */
.lad-row::after { display: none !important; content: none; }
.lad-row:hover .lad-standing, .lad-row.is-lit .lad-standing { transform: none; }

/* ── the head grows a tab strip ───────────────────────────────────────────── */

.lad-head { flex-wrap: wrap; row-gap: .8rem; }
.lad-tabs { display: flex; gap: .35rem; flex-wrap: wrap; order: 3; width: 100%; }
@media (min-width: 900px) { .lad-tabs { order: 0; width: auto; margin-left: auto; margin-right: .75rem; } }

.lad-tab {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .8rem;
  border: 1px solid hsl(0 0% 100% / .12);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  background: hsl(0 0% 100% / .04);
  color: hsl(0 0% 74%);
  font: 800 .62rem/1 var(--font-display, Inter), sans-serif;
  letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.lad-tab span {
  padding: .1rem .38rem; border-radius: 999px;
  background: hsl(0 0% 100% / .1); color: hsl(0 0% 92%);
  font: 900 .6rem/1.3 ui-monospace, Menlo, monospace;
}
.lad-tab:hover { background: hsl(0 0% 100% / .08); color: hsl(0 0% 96%); }
.lad-tab.is-on { background: hsl(0 80% 55% / .22); border-color: hsl(0 80% 60% / .6); color: #fff; }
.lad-tab.is-on span { background: hsl(0 80% 55%); }
.lad-tab[data-filter="open"].is-on { background: hsl(150 70% 45% / .2); border-color: hsl(150 70% 55% / .6); }
.lad-tab[data-filter="open"].is-on span { background: hsl(150 70% 42%); }
.lad-tab[data-filter="held"].is-on { background: hsl(38 100% 55% / .22); border-color: hsl(38 100% 60% / .6); }
.lad-tab[data-filter="held"].is-on span { background: hsl(38 100% 50%); color: hsl(20 40% 8%); }

/* ── the spotlight ────────────────────────────────────────────────────────── */

.lad-spot {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1.5rem;
  margin: 1rem 1rem 0;
  padding: 1.25rem 1.4rem;
  clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  background:
    linear-gradient(100deg, hsl(0 0% 100% / .06), transparent 60%),
    hsl(0 0% 0% / .45);
  border: 1px solid hsl(0 0% 100% / .1);
  overflow: hidden;
  animation: ladRowIn .5s cubic-bezier(.2,.8,.2,1) both;
}
/* Its colour is its state, at full volume — this is the one you should take. */
.lad-spot-open { border-color: hsl(150 70% 50% / .5); box-shadow: inset 0 0 60px hsl(150 70% 45% / .12), 0 0 40px hsl(150 70% 45% / .12); }
.lad-spot-chasing { border-color: hsl(0 80% 58% / .5); box-shadow: inset 0 0 60px hsl(0 80% 50% / .12), 0 0 40px hsl(0 80% 50% / .12); }
.lad-spot-absent { border-color: hsl(38 100% 60% / .4); box-shadow: inset 0 0 60px hsl(38 100% 55% / .1); }
/* A sweep across it once. */
.lad-spot::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, hsl(0 0% 100% / .09) 49%, hsl(0 0% 100% / .14) 50%, hsl(0 0% 100% / .09) 51%, transparent 65%);
  transform: translateX(-120%);
  animation: cardSweep 1.2s cubic-bezier(.2,.8,.2,1) .7s 1 both;
}

.lad-spot-k {
  position: absolute; top: 0; left: 16px;
  padding: .32rem .7rem;
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  font: 900 .56rem/1 var(--font-display, Inter), sans-serif;
  letter-spacing: .3em; text-transform: uppercase;
  color: hsl(20 40% 8%);
  background: hsl(38 100% 62%);
}
.lad-spot-open .lad-spot-k { background: hsl(150 80% 60%); }
.lad-spot-chasing .lad-spot-k { background: hsl(0 85% 62%); color: #fff; }

.lad-spot-main { display: flex; align-items: center; gap: 1.1rem; min-width: 0; padding-top: .8rem; }
.lad-spot-icon {
  flex: none;
  display: grid; place-items: center;
  width: 62px; height: 62px;
  font-size: 1.9rem;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  background: hsl(0 0% 100% / .06);
  border: 1px solid hsl(0 0% 100% / .12);
}
.lad-spot-main > div { min-width: 0; }
.lad-spot-main b {
  display: block;
  font: 900 1.25rem/1.1 var(--font-display, Inter), sans-serif;
  letter-spacing: .04em; text-transform: uppercase;
  color: hsl(0 0% 98%);
}
.lad-spot-main p { margin: .3rem 0 .55rem; max-width: 52ch; font-size: .78rem; line-height: 1.5; color: hsl(0 0% 66%); }

.lad-spot-figure { text-align: right; }
.lad-spot-figure small {
  display: block;
  font: 800 .56rem/1 var(--font-display, Inter), sans-serif;
  letter-spacing: .2em; text-transform: uppercase; color: hsl(0 0% 52%);
  margin-bottom: .35rem;
}
.lad-spot-figure b {
  font: 900 2.2rem/1 ui-monospace, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  color: hsl(0 0% 100%);
  text-shadow: 0 0 26px hsl(38 100% 60% / .35);
}
.lad-spot-open .lad-spot-figure b { color: hsl(150 80% 66%); text-shadow: 0 0 26px hsl(150 80% 55% / .45); font-size: 1.6rem; letter-spacing: .12em; }
.lad-spot-chasing .lad-spot-figure b { color: hsl(0 85% 70%); text-shadow: 0 0 26px hsl(0 85% 55% / .45); }

.lad-spot-cta {
  flex: none;
  padding: .95rem 1.5rem;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  background: linear-gradient(100deg, hsl(38 100% 60%), hsl(18 90% 48%));
  color: hsl(20 40% 8%);
  font: 900 .74rem/1 var(--font-display, Inter), sans-serif;
  letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  white-space: nowrap;
  transition: filter .15s, transform .12s;
}
.lad-spot-open .lad-spot-cta { background: linear-gradient(100deg, hsl(150 80% 55%), hsl(160 70% 38%)); }
.lad-spot-chasing .lad-spot-cta { background: linear-gradient(100deg, hsl(0 85% 62%), hsl(348 80% 42%)); color: #fff; }
.lad-spot-cta:hover { filter: brightness(1.12); transform: translateY(-1px); }

/* ── the rows ─────────────────────────────────────────────────────────────── */

.lad-rows { padding: .75rem 1rem 1rem; gap: .4rem; }

.lad-row {
  position: relative;
  grid-template-columns: 46px minmax(140px, 1.1fr) minmax(0, 1.4fr) auto auto;
  grid-template-areas: "plate game podium figure verb" "bar bar bar bar bar";
  align-items: center;
  gap: 0 1rem;
  padding: .7rem .9rem .7rem .7rem;
  border: 1px solid hsl(0 0% 100% / .06);
  border-left: 3px solid transparent;
  border-top: 1px solid hsl(0 0% 100% / .06);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  background: linear-gradient(90deg, hsl(0 0% 100% / .03), hsl(0 0% 100% / .015) 50%, transparent);
  overflow: hidden;
}
.lad-row:first-child { border-top: 1px solid hsl(0 0% 100% / .06); }
.lad-row.is-hidden { display: none; }

.lad-plate {
  grid-area: plate;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
  background: hsl(0 0% 100% / .05);
  border: 1px solid hsl(0 0% 100% / .1);
  transition: background .16s, box-shadow .16s;
}
.lad-icon { font-size: 1.35rem; }
.lad-row.lad-open .lad-plate { background: hsl(150 70% 45% / .16); border-color: hsl(150 70% 55% / .35); }
.lad-row.lad-held .lad-plate { background: hsl(38 100% 55% / .2); border-color: hsl(38 100% 60% / .45); box-shadow: 0 0 20px hsl(38 100% 55% / .3); }
.lad-row.lad-chasing .lad-plate { background: hsl(0 80% 55% / .16); border-color: hsl(0 80% 60% / .4); }

.lad-game { grid-area: game; }
.lad-game b { font-size: .92rem !important; letter-spacing: .01em; }
.lad-game small { font-family: var(--font-body, Inter), sans-serif !important; font-size: .68rem !important; color: hsl(0 0% 58%) !important; margin-top: .2rem !important; }
.lad-row.lad-held .lad-game small { color: hsl(38 100% 70%) !important; }
.lad-row.lad-open .lad-game small { color: hsl(150 70% 62%) !important; }

/* THE PODIUM: three chips, medal → name → score. */
.lad-podium { grid-area: podium; display: flex; gap: .35rem; flex-wrap: wrap; min-width: 0; }
.lad-podium-empty { font: 700 .66rem/1.2 var(--font-body, Inter), sans-serif; color: hsl(0 0% 40%); }
.lad-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  max-width: 100%;
  padding: .28rem .55rem .28rem .4rem;
  border: 1px solid hsl(0 0% 100% / .08);
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
  background: hsl(0 0% 100% / .04);
  font-size: .64rem;
  white-space: nowrap;
}
.lad-chip em { font-style: normal; font-size: .8rem; }
.lad-chip b { color: hsl(0 0% 88%); font-weight: 800; overflow: hidden; text-overflow: ellipsis; max-width: 11ch; }
.lad-chip i { font-style: normal; font-family: ui-monospace, Menlo, monospace; color: hsl(38 100% 68%); font-weight: 700; }
.lad-chip-0 { border-color: hsl(38 100% 60% / .45); background: hsl(38 100% 55% / .1); }
.lad-chip.is-me { border-color: hsl(190 90% 55% / .6); box-shadow: 0 0 0 1px hsl(190 90% 55% / .3); }
.lad-chip.is-me b { color: hsl(190 90% 80%); }

/* THE FIGURE: the row's headline number. */
.lad-figure { grid-area: figure; text-align: right; min-width: 8.5rem; }
.lad-figure small {
  display: block;
  font: 800 .52rem/1 var(--font-display, Inter), sans-serif;
  letter-spacing: .18em; text-transform: uppercase; color: hsl(0 0% 50%);
  margin-bottom: .28rem;
  white-space: nowrap;
}
.lad-figure b {
  font: 900 1.35rem/1 ui-monospace, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  color: hsl(0 0% 96%);
}
.lad-row.lad-open .lad-figure b { color: hsl(150 80% 66%); font-size: 1rem; letter-spacing: .14em; }
.lad-row.lad-held .lad-figure b { color: hsl(38 100% 70%); text-shadow: 0 0 18px hsl(38 100% 55% / .4); }
.lad-row.lad-chasing .lad-figure b { color: hsl(0 85% 70%); }

/* THE VERB: a real button in the row. */
.lad-verb {
  grid-area: verb;
  padding: .6rem 1rem;
  clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
  background: linear-gradient(100deg, hsl(0 85% 58%), hsl(348 80% 40%));
  color: #fff;
  font: 900 .6rem/1 var(--font-display, Inter), sans-serif;
  letter-spacing: .2em; text-transform: uppercase;
  white-space: nowrap;
  opacity: .85;
  transition: opacity .15s, transform .15s cubic-bezier(.2,.8,.2,1), filter .15s;
}
.lad-row.lad-open .lad-verb { background: linear-gradient(100deg, hsl(150 70% 45%), hsl(160 70% 30%)); }
.lad-row.lad-held .lad-verb { background: linear-gradient(100deg, hsl(38 100% 55%), hsl(28 90% 42%)); color: hsl(20 40% 8%); }
.lad-row:hover .lad-verb, .lad-row.is-lit .lad-verb { opacity: 1; transform: translateX(3px); filter: brightness(1.1); }

/* THE GAP BAR: your score as a fraction of the champion's. Distance you can
   see is distance you close. */
.lad-bar {
  grid-area: bar;
  display: block;
  height: 3px;
  margin: .55rem 0 0;
  background: hsl(0 0% 100% / .07);
  overflow: hidden;
}
.lad-bar i {
  display: block; height: 100%; width: var(--p, 0%);
  background: linear-gradient(90deg, hsl(0 85% 55%), hsl(38 100% 60%));
  transform-origin: left;
  animation: barFill .9s cubic-bezier(.2,.8,.2,1) .25s both;
}
.lad-row.lad-held .lad-bar i { background: linear-gradient(90deg, hsl(38 100% 55%), hsl(0 0% 100% / .5)); }
@keyframes barFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── phones ───────────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .lad-spot { grid-template-columns: 1fr; gap: .9rem; margin: .8rem .6rem 0; padding: 1.4rem 1rem 1rem; }
  .lad-spot-figure { text-align: left; }
  .lad-spot-figure b { font-size: 1.7rem; }
  .lad-spot-cta { text-align: center; }
  .lad-spot-main p { max-width: none; }

  .lad-rows { padding: .6rem .6rem .8rem; }
  .lad-row {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    grid-template-areas: "plate game figure" "plate podium podium" "bar bar bar" "verb verb verb";
    gap: .35rem .7rem;
    padding: .7rem .7rem .6rem .6rem;
  }
  .lad-plate { width: 40px; height: 40px; align-self: start; }
  .lad-figure { min-width: 0; }
  .lad-figure b { font-size: 1.05rem; }
  .lad-verb { justify-self: stretch; text-align: center; margin-top: .3rem; opacity: 1; }
  .lad-podium { gap: .3rem; }
  .lad-chip b { max-width: 8ch; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE THRONES — real podiums, real names, real crowns
   ══════════════════════════════════════════════════════════════════════════
   The coloured bars are gone. Each board is a podium standing on the floor:
   a lit medal with the game's icon, a crown when it is held, THE CHAMPION'S
   NAME on the plinth face, the score under it, the game's name at the foot,
   and a verb that appears on hover. Unclaimed ones carry a ghost crown and say
   TAKE IT. Yours is gold and marked YOU.
   ────────────────────────────────────────────────────────────────────────── */

.thrones {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 0 .5rem;
  pointer-events: none;            /* the container never blocks; thrones do */
}

/* The title plate on the band, so nobody has to ask what this is. */
.thrones-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 .75rem .55rem;
  pointer-events: auto;
}
.thrones-title {
  font: 900 .78rem/1 var(--font-display, Inter), sans-serif;
  letter-spacing: .3em; text-transform: uppercase;
  color: hsl(0 0% 96%);
  text-shadow: 0 0 18px hsl(0 80% 55% / .6);
}
.thrones-title::before {
  content: '♛'; margin-right: .5rem; color: hsl(38 100% 62%);
  text-shadow: 0 0 14px hsl(38 100% 55% / .8);
}
.thrones-sub { font-size: .7rem; color: hsl(0 0% 60%); }
.thrones-legend {
  margin-left: auto;
  display: flex; align-items: center; gap: .55rem;
  font: 800 .58rem/1 var(--font-display, Inter), sans-serif;
  letter-spacing: .14em; text-transform: uppercase;
  color: hsl(0 0% 62%);
}
.thrones-legend b { color: hsl(0 0% 96%); margin-right: .5rem; font-family: ui-monospace, Menlo, monospace; }
.lg { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: .3rem; }
.lg-open { background: hsl(150 80% 55%); box-shadow: 0 0 8px hsl(150 80% 55% / .8); }
.lg-held { background: hsl(14 100% 58%); box-shadow: 0 0 8px hsl(14 100% 58% / .8); }
.lg-mine { background: hsl(38 100% 60%); box-shadow: 0 0 8px hsl(38 100% 60% / .8); }

/* The stage: thrones stand on one floor line. */
.thrones-row {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .4rem;
  padding: 0 .25rem;
  min-height: 0;
}

/* ── one throne ───────────────────────────────────────────────────────────── */

.throne {
  --c: 14 100% 58%;                 /* held: ember */
  --plinth: calc(var(--plinth-max, 160px) * var(--h, .5));
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 1.6rem;           /* room for the game name below the plinth */
  text-decoration: none;
  color: inherit;
  pointer-events: auto;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), filter .2s;
  will-change: transform;
}
.throne-open { --c: 150 80% 52%; }
.throne-mine { --c: 38 100% 60%; }

/* Everything else steps back when one is lit. */
.thrones.has-lit .throne:not(.is-lit) { filter: brightness(.55) saturate(.6); }
.throne.is-lit, .throne:hover { transform: translateY(-6px); z-index: 2; }

/* The spotlight beam from above a held throne. */
.throne-beam {
  position: absolute;
  left: 50%; bottom: 1.6rem;
  width: 160%; height: calc(var(--plinth) + 150px);
  transform: translateX(-50%);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, hsl(var(--c) / .28), hsl(var(--c) / .06) 60%, transparent);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.throne-held .throne-beam, .throne-mine .throne-beam { opacity: .55; }
.throne.is-lit .throne-beam, .throne:hover .throne-beam { opacity: 1; }
.throne-open.is-lit .throne-beam, .throne-open:hover .throne-beam { opacity: .7; }

/* YOU. */
.throne-you {
  position: absolute; top: -.2rem; left: 50%; transform: translate(-50%, -100%);
  padding: .22rem .5rem;
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
  background: hsl(38 100% 60%); color: hsl(20 40% 8%);
  font: 900 .5rem/1 var(--font-display, Inter), sans-serif;
  letter-spacing: .3em; text-transform: uppercase;
}

/* The crown. */
.throne-crown {
  font-size: 1.5rem;
  line-height: 1;
  margin-bottom: -.35rem;
  filter: drop-shadow(0 0 10px hsl(38 100% 60% / .9)) drop-shadow(0 4px 6px hsl(0 0% 0% / .6));
  animation: crownBob 3.2s ease-in-out infinite;
  z-index: 2;
}
.throne-crown-ghost {
  font-size: 1.35rem;
  color: hsl(150 80% 60% / .55);
  filter: drop-shadow(0 0 8px hsl(150 80% 55% / .6));
  animation: ghostPulse 2.2s ease-in-out infinite;
}
@keyframes crownBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes ghostPulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }

/* The medal: the game's icon on a lit disc. This is what says "Pac-Man's throne". */
.throne-medal {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  font-size: 1.35rem;
  background:
    radial-gradient(circle at 35% 30%, hsl(0 0% 100% / .22), transparent 45%),
    linear-gradient(180deg, hsl(var(--c) / .55), hsl(var(--c) / .18));
  border: 2px solid hsl(var(--c) / .8);
  box-shadow: 0 0 22px hsl(var(--c) / .55), inset 0 -3px 8px hsl(0 0% 0% / .45);
  z-index: 2;
  margin-bottom: -10px;             /* the medal sits INTO the top of the plinth */
  transition: transform .2s cubic-bezier(.2,.8,.2,1);
}
.throne.is-lit .throne-medal, .throne:hover .throne-medal { transform: scale(1.12); }

/* THE PLINTH: height is the champion's score. */
.throne-plinth {
  position: relative;
  width: 100%;
  max-width: 128px;
  height: var(--plinth);
  min-height: 46px;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 100%, 0 100%);
  background:
    linear-gradient(180deg, hsl(var(--c) / .95) 0, hsl(var(--c) / .55) 6px, hsl(var(--c) / .22) 40%, hsl(var(--c) / .06) 100%),
    hsl(250 30% 6% / .8);
  border-top: 2px solid hsl(var(--c));
  box-shadow: 0 0 30px hsl(var(--c) / .28), inset 0 1px 0 hsl(0 0% 100% / .35);
  transition: height .7s cubic-bezier(.2,.9,.2,1), box-shadow .2s;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}
/* A faint scanline texture — it is a screen, not paint. */
.throne-plinth::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 3px, hsl(0 0% 0% / .12) 3px 4px);
}
.throne.is-lit .throne-plinth, .throne:hover .throne-plinth { box-shadow: 0 0 44px hsl(var(--c) / .55), inset 0 1px 0 hsl(0 0% 100% / .45); }

/* THE NAMEPLATE — the flex. */
.throne-face {
  display: flex; flex-direction: column; align-items: center;
  gap: .18rem;
  padding: 16px .4rem .5rem;         /* under the sunken medal */
  width: 100%;
  text-align: center;
  z-index: 1;
}
.throne-champ {
  display: block; max-width: 100%;
  font: 900 .78rem/1.1 var(--font-display, Inter), sans-serif;
  letter-spacing: .04em; text-transform: uppercase;
  color: hsl(0 0% 100%);
  text-shadow: 0 1px 2px hsl(0 0% 0% / .8), 0 0 14px hsl(var(--c) / .8);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.throne-champ-open {
  font-size: .62rem; letter-spacing: .2em;
  color: hsl(150 80% 78%);
}
.throne-score {
  font: 800 .72rem/1 ui-monospace, Menlo, monospace;
  font-variant-numeric: tabular-nums; font-style: normal;
  color: hsl(0 0% 100% / .88);
}
.throne-open .throne-score { font-size: .52rem; letter-spacing: .06em; color: hsl(150 80% 78% / .8); font-family: var(--font-body, Inter), sans-serif; text-transform: uppercase; }

/* The game's name at the foot. */
.throne-name {
  position: absolute; bottom: 0; left: 0; right: 0;
  text-align: center;
  font: 800 .66rem/1.2 var(--font-display, Inter), sans-serif;
  letter-spacing: .06em; text-transform: uppercase;
  color: hsl(0 0% 78%);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 0 .2rem;
}
.throne.is-lit .throne-name, .throne:hover .throne-name { color: hsl(0 0% 100%); }

/* The verb, on hover: TAKE IT / CHALLENGE · BEAT 86,345 / DEFEND. */
.throne-cta {
  position: absolute; bottom: 1.5rem; left: 50%;
  transform: translate(-50%, 8px);
  padding: .4rem .7rem;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  background: hsl(var(--c));
  color: hsl(20 40% 8%);
  font: 900 .56rem/1 var(--font-display, Inter), sans-serif;
  letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .18s, transform .18s cubic-bezier(.2,.8,.2,1);
  z-index: 3;
  box-shadow: 0 8px 22px hsl(0 0% 0% / .5);
}
.throne-held .throne-cta { color: #fff; }
.throne.is-lit .throne-cta, .throne:hover .throne-cta { opacity: 1; transform: translate(-50%, 0); }

/* The pool of light at the foot — the reflection on the floor. */
.throne-pool {
  position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);
  width: 150%; height: 34px;
  background: radial-gradient(50% 100% at 50% 0%, hsl(var(--c) / .4), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* Entrance: rise from the floor, staggered. Reborn: one throne rises alone. */
.thrones-row.is-entering .throne { animation: throneRise .8s cubic-bezier(.2,.9,.2,1) both; }
.thrones-row.is-entering .throne:nth-child(1)  { animation-delay: .00s; }
.thrones-row.is-entering .throne:nth-child(2)  { animation-delay: .06s; }
.thrones-row.is-entering .throne:nth-child(3)  { animation-delay: .12s; }
.thrones-row.is-entering .throne:nth-child(4)  { animation-delay: .18s; }
.thrones-row.is-entering .throne:nth-child(5)  { animation-delay: .24s; }
.thrones-row.is-entering .throne:nth-child(6)  { animation-delay: .30s; }
.thrones-row.is-entering .throne:nth-child(7)  { animation-delay: .36s; }
.thrones-row.is-entering .throne:nth-child(8)  { animation-delay: .42s; }
.thrones-row.is-entering .throne:nth-child(9)  { animation-delay: .48s; }
.thrones-row.is-entering .throne:nth-child(10) { animation-delay: .54s; }
.throne.is-reborn { animation: throneReborn 1.1s cubic-bezier(.2,.9,.2,1) both; }
@keyframes throneRise {
  from { opacity: 0; transform: translateY(40px) scaleY(.6); transform-origin: bottom; }
  to   { opacity: 1; transform: none; }
}
@keyframes throneReborn {
  0%   { transform: translateY(0) scaleY(1); filter: brightness(1); }
  30%  { transform: translateY(30px) scaleY(.5); filter: brightness(2.2); transform-origin: bottom; }
  100% { transform: none; filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
  .throne, .throne-crown, .throne-crown-ghost, .thrones-row.is-entering .throne, .throne.is-reborn { animation: none !important; transition: none !important; }
}

/* ── the currency rail ────────────────────────────────────────────────────── */

.arena-currencies {
  display: flex; justify-content: center; align-items: center; gap: .45rem; flex-wrap: wrap;
  margin: 1rem auto 0;
}
.cur {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .8rem;
  clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
  border: 1px solid hsl(0 0% 100% / .12);
  background: hsl(0 0% 100% / .04);
  font: 900 .66rem/1 var(--font-display, Inter), sans-serif;
  letter-spacing: .16em; text-transform: uppercase;
  color: hsl(0 0% 88%);
}
.cur i { font-style: normal; font-size: .85rem; }
.cur small {
  margin-left: .2rem; padding: .12rem .38rem; border-radius: 999px;
  font: 800 .5rem/1.2 var(--font-display, Inter), sans-serif; letter-spacing: .14em;
  background: hsl(0 0% 100% / .1); color: hsl(0 0% 70%);
}
.cur-live { border-color: hsl(150 70% 50% / .5); background: hsl(150 70% 45% / .1); }
.cur-live small { background: hsl(150 70% 45%); color: hsl(160 60% 8%); }
.cur-cc { border-color: hsl(45 100% 55% / .55); background: hsl(45 90% 40% / .12); }
.cur-cc small { background: hsl(45 100% 55%); color: hsl(40 60% 8%); }
.cur-ac { border-color: hsl(280 80% 65% / .55); background: hsl(280 70% 40% / .14); }
.cur-ac small { background: hsl(280 80% 65%); color: hsl(280 60% 8%); }
.cur-locked { opacity: .55; filter: saturate(.5); border-style: dashed; cursor: not-allowed; }
.cur-locked small { background: transparent; padding: 0; font-size: .7rem; }

/* ── phones: the stage scrolls sideways ───────────────────────────────────── */

@media (max-width: 760px) {
  .thrones { padding: 0 .25rem; }
  .thrones-head { flex-wrap: wrap; gap: .4rem .8rem; padding: 0 .5rem .4rem; }
  .thrones-legend { margin-left: 0; width: 100%; }
  .thrones-row {
    justify-content: flex-start;
    gap: .5rem;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 .4rem;
    pointer-events: auto;
  }
  .thrones-row::-webkit-scrollbar { display: none; }
  .throne { flex: 0 0 118px; scroll-snap-align: center; }
  .throne-cta { opacity: 1; transform: translate(-50%, 0); font-size: .5rem; padding: .32rem .5rem; }
  .throne-champ { font-size: .7rem; }
}
/* Names truncated at "FIXTUREPLAY…": the plinth is a column, so the name may
   wrap to two lines rather than lose its ending — a champion's name is the
   whole point of the plate. */
.throne-champ { white-space: normal; overflow-wrap: anywhere; line-height: 1.05; font-size: .72rem; }
.throne-plinth { max-width: 132px; }
/* And more band: the ladder margin gives the stage its height. */
@media (min-width: 641px) { .arena-ladder { margin-top: 430px; } }
/* The lede's first three words are the pitch. */
.arn-head .aaa-lede b { color: hsl(0 0% 100%); font-weight: 900; letter-spacing: .02em; }

/* ══════════════════════════════════════════════════════════════════════════
   CROWN BOUNTIES — money on the throne
   ══════════════════════════════════════════════════════════════════════════ */

/* The ribbon across a staked plinth. */
.throne-bounty {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  padding: .28rem .55rem;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  background: linear-gradient(100deg, hsl(45 100% 58%), hsl(38 100% 48%));
  color: hsl(40 60% 8%);
  font: 900 .58rem/1 ui-monospace, Menlo, monospace;
  letter-spacing: .06em; white-space: nowrap;
  box-shadow: 0 0 18px hsl(45 100% 55% / .7), 0 4px 10px hsl(0 0% 0% / .5);
  animation: bountyPulse 2s ease-in-out infinite;
  z-index: 2;
}
@keyframes bountyPulse {
  0%, 100% { box-shadow: 0 0 14px hsl(45 100% 55% / .5), 0 4px 10px hsl(0 0% 0% / .5); }
  50%      { box-shadow: 0 0 28px hsl(45 100% 55% / .95), 0 4px 10px hsl(0 0% 0% / .5); }
}
/* A staked throne's whole plinth carries the gold. */
.throne.has-bounty .throne-plinth { border-top-color: hsl(45 100% 60%); box-shadow: 0 0 40px hsl(45 100% 55% / .35), inset 0 1px 0 hsl(0 0% 100% / .45); }
.throne.has-bounty .throne-crown { filter: drop-shadow(0 0 14px hsl(45 100% 60%)) drop-shadow(0 4px 6px hsl(0 0% 0% / .6)); }

/* An unstaked throne of YOURS invites you to stake it. */
.throne-mine:not(.has-bounty) .throne-cta { animation: ghostPulse 1.8s ease-in-out infinite; opacity: 1; transform: translate(-50%, 0); }

/* A crown bounty on the challenge board. */
.arena-row-throne { border-left-color: hsl(45 100% 58%) !important; background: linear-gradient(90deg, hsl(45 100% 55% / .1), transparent 60%) !important; }
.arena-row-throne-tag {
  padding: .1rem .38rem; border-radius: 3px;
  background: hsl(45 100% 55%); color: hsl(40 60% 8%);
  font: 900 .54rem/1.4 var(--font-display, Inter), sans-serif; letter-spacing: .14em; text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) { .throne-bounty, .throne-mine:not(.has-bounty) .throne-cta { animation: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   THE GAMES SHOW THEIR OWN ART
   ══════════════════════════════════════════════════════════════════════════ */

/* Throne medal: the game's thumbnail, cropped to the disc. */
.throne-medal { overflow: hidden; padding: 0; }
.throne-medal img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* Ladder plate and spotlight: the same, squared to the plate. */
.lad-plate { overflow: hidden; }
img.lad-icon { width: 100%; height: 100%; object-fit: cover; display: block; }
img.lad-spot-art { width: 100%; height: 100%; object-fit: cover; display: block; }
.lad-spot-icon { overflow: hidden; }

/* Stake modal header. */
.arena-mode-game-art {
  width: 84px; height: 84px; object-fit: cover; display: block; margin: 0 auto;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  border: 1px solid hsl(0 0% 100% / .14);
  box-shadow: 0 10px 30px hsl(0 0% 0% / .6);
}
.arena-mode-game-icon:has(> .arena-mode-game-art) { font-size: 0; line-height: 0; }

/* The stake modal's backdrop was too thin — the hero bled through the plate. */
.arena-modal-backdrop { background: hsl(250 40% 3% / .93) !important; backdrop-filter: blur(8px); }

/* ══════════════════════════════════════════════════════════════════════════
   THE CHAMPION'S FACE
   ══════════════════════════════════════════════════════════════════════════
   The medal on a held throne is the champion's PFP — bigger than the game
   medal was, in the state colour's ring, crowned. The game's own art moves
   down to back the plinth face, so the throne reads "this face holds this
   game" in one look. An open throne keeps the game art on the medal: nobody's
   face yet.
   ────────────────────────────────────────────────────────────────────────── */

.throne-medal-pfp {
  width: 64px; height: 64px;
  font: 900 1.5rem/1 var(--font-display, Inter), sans-serif;
  color: hsl(0 0% 100%);
  text-shadow: 0 1px 2px hsl(0 0% 0% / .8);
  background:
    radial-gradient(circle at 35% 30%, hsl(0 0% 100% / .18), transparent 45%),
    linear-gradient(180deg, hsl(var(--c) / .7), hsl(var(--c) / .25));
  border-width: 3px;
  margin-bottom: -14px;
}
.throne-medal-pfp img.av-img { border-radius: 50%; }
.throne.is-lit .throne-medal-pfp, .throne:hover .throne-medal-pfp { transform: scale(1.1); }

/* The face plate sits lower under the bigger medal, and the game art backs it. */
.throne-plinth[style*="--game-art"]::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--game-art) center / cover no-repeat;
  opacity: .22;
  filter: saturate(1.2);
  mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent);
  pointer-events: none;
}
.throne-held .throne-face, .throne-mine .throne-face { padding-top: 22px; }
.throne-held .throne-champ, .throne-mine .throne-champ { font-size: .66rem; letter-spacing: .06em; opacity: .95; }

/* Podium chips on the ladder carry a small face before the name. */
.lad-chip-pfp {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  font: 900 .55rem/1 var(--font-display, Inter), sans-serif;
  color: hsl(0 0% 100%);
  background: linear-gradient(180deg, hsl(0 0% 100% / .22), hsl(0 0% 100% / .06));
  border: 1px solid hsl(0 0% 100% / .18);
  overflow: hidden;
}
.lad-chip-pfp img.av-img { border-radius: 50%; }
.lad-chip-0 .lad-chip-pfp { border-color: hsl(38 100% 60% / .8); box-shadow: 0 0 8px hsl(38 100% 55% / .5); }

@media (max-width: 760px) { .throne-medal-pfp { width: 54px; height: 54px; font-size: 1.2rem; } }

/* ══════════════════════════════════════════════════════════════════════════
   THE POT ON THE TOURNAMENT CARD
   ══════════════════════════════════════════════════════════════════════════ */
.tourn-pot {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .6rem;
  margin: .45rem 0 .35rem;
  padding: .45rem .7rem;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  background: linear-gradient(90deg, hsl(45 100% 55% / .14), transparent 70%);
  border-left: 3px solid hsl(45 100% 58%);
}
.tourn-pot-k { font: 900 .54rem/1 var(--font-display, Inter), sans-serif; letter-spacing: .2em; text-transform: uppercase; color: hsl(45 100% 70%); }
.tourn-pot-v { font: 900 1.15rem/1 ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 0 14px hsl(45 100% 55% / .5); }
.tourn-pot-v small { font-size: .6rem; opacity: .75; margin-left: .15rem; }
.tourn-pot-full { font: 700 .62rem/1 ui-monospace, Menlo, monospace; color: hsl(150 70% 62%); }
.tourn-pot-need { font: 700 .6rem/1 var(--font-body, Inter), sans-serif; color: hsl(0 80% 68%); }
.tourn-seats { color: hsl(38 100% 68%); font-weight: 800; }
.tourn-join-btn.tourn-locked { background: hsl(280 30% 22%) !important; color: hsl(280 60% 78%) !important; opacity: 1 !important; cursor: not-allowed !important; box-shadow: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   THE RING — the district's hero art
   ══════════════════════════════════════════════════════════════════════════
   Replaces the drawn canvas floor. Absolute in the page, sized to the hero
   band, art anchored right so the copy owns the dark left third. A veil keeps
   the headline legible over the lit ring and fades the art into the page
   before the ladder.
   ────────────────────────────────────────────────────────────────────────── */
.arena-floor { display: none !important; }

.arena-ring {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 950px;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.arena-ring-art {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 40%;
  display: block;
  filter: saturate(1.05) contrast(1.04);
}
.arena-ring-veil {
  position: absolute; inset: 0;
  background:
    /* copy legibility: dark from the left */
    linear-gradient(90deg, hsl(250 40% 3% / .92) 0%, hsl(250 40% 3% / .7) 34%, hsl(250 40% 3% / .25) 60%, hsl(250 40% 3% / .1) 100%),
    /* the top under the nav, and the fade into the page at the bottom */
    linear-gradient(180deg, hsl(250 40% 3% / .55) 0%, transparent 18%, transparent 55%, hsl(250 40% 3% / .85) 86%, hsl(250 40% 3%) 100%);
}

/* NO MOVING LADDER. The thrones stand still: no entrance rise, no bob, no
   breathe. They are the standings, and standings do not fidget. Rebirth on a
   real throne change is kept — that is information, not decoration. */
.thrones-row.is-entering .throne { animation: none !important; opacity: 1 !important; transform: none !important; }
.throne-crown, .throne-crown-ghost { animation: none !important; }
.throne-mine:not(.has-bounty) .throne-cta { animation: none !important; }
.throne-bounty { animation: none !important; }

/* Copy sits on the dark left third now, not centred over the ring. */
@media (min-width: 900px) {
  .arn-head { text-align: left; align-items: flex-start; }
  .arn-head .aaa-marquee { margin-inline: 0; }
  .arn-head .aaa-lede { margin-inline: 0; max-width: 46ch; }
  .arn-lower3, .arena-ctas, .arena-currencies, .arena-wire { justify-content: flex-start; margin-inline: 0; }
  .arena-wire { max-width: 720px; mask-image: linear-gradient(90deg, #000 85%, transparent); }
}
@media (min-width: 900px) { .arn-head .aaa-plate { margin-inline: 0; align-self: flex-start; } }

/* THE HALL OF LEGENDS lives in aaa-legends.css — the section is shared with
   the leaderboards page, which should not pay for the whole Arena sheet. */

/* --- Game Cards (copied from home.css) ---
   The games modal reuses the home grid card; the copy here means the Arena no
   longer loads all of home.css for it. Keep in sync with home.css. */
.game-card {
  position: relative;
  background: hsl(250, 20%, 9%);
  border: 1px solid hsl(250, 20%, 18%);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.game-card:hover {
  border-color: hsl(160,100%,50%,0.55);
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 0 30px hsl(160,100%,50%,0.18), 0 12px 40px rgba(0,0,0,0.5);
}

/* Thumbnail area */
.game-card-thumb {
  height: 130px;
  background: hsl(250, 20%, 14%);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.game-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  display: block;
}

.game-card:hover .game-card-thumb img {
  transform: scale(1.1);
}

.game-card-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  background: linear-gradient(135deg, hsl(250,20%,16%), hsl(250,20%,10%));
}

/* Gradient fade at bottom of image */
.game-card-thumb-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, hsl(250,20%,9%) 0%, transparent 60%);
  pointer-events: none;
}

/* Play button overlay — visible on hover */
.game-card-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.28);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.game-card:hover .game-card-play-overlay { opacity: 1; }

.game-card-play-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--clr-neon-green);
  color: #000;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 24px hsl(160,100%,50%,0.7);
  animation: play-circle-pulse 2s ease-in-out infinite;
}

@keyframes play-circle-pulse {
  0%, 100% { box-shadow: 0 0 18px hsl(160,100%,50%,0.6); }
  50%       { box-shadow: 0 0 32px hsl(160,100%,50%,0.9); }
}

/* Badges */
.game-card-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
  border: 1px solid hsl(160,100%,50%,0.35);
  border-radius: 20px;
  padding: 3px 8px;
  font-family: var(--font-display);
  font-size: 0.5rem;
  font-weight: 800;
  color: hsl(45,100%,62%);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.game-card-badge-hot   { color: hsl(0,85%,65%);   border-color: hsl(0,85%,55%,0.35); }
.game-card-badge-new   { color: hsl(160,100%,65%); border-color: hsl(160,100%,50%,0.35); }
.game-card-badge-top   { color: hsl(45,100%,62%);  border-color: hsl(45,100%,55%,0.35); }

.game-card-featured-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--clr-neon-green);
  color: #000;
  font-family: var(--font-display);
  font-size: 0.4rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  box-shadow: var(--glow-green);
}

/* Card body */
.game-card-body {
  padding: var(--space-3) var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-2);
}

.game-card-title {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--clr-text-primary);
  line-height: 1.2;
  margin: 0;
}

.game-card-reward-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.game-card-reward-xp {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  color: hsl(160,100%,65%);
}

.game-card-reward-cc {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  color: hsl(45,100%,65%);
}

.game-card-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.68rem;
  color: var(--clr-text-muted);
}

.game-card-cta {
  margin-top: auto;
  width: 100%;
  padding: var(--space-2) 0;
  background: hsl(160,100%,50%,0.1);
  color: var(--clr-neon-green);
  border: 1px solid hsl(160,100%,50%,0.25);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 900;
  text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.game-card:hover .game-card-cta {
  background: var(--clr-neon-green);
  color: #000;
  box-shadow: var(--glow-green);
}

.game-card.locked-card {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
}

/* Skeleton Loader */
.game-card-skeleton {
  background: hsl(250,20%,10%);
  border: 1px solid var(--clr-border);
  border-radius: 16px;
  overflow: hidden;
  min-height: 260px;
}
.game-card-skeleton::after {
  content: '';
  display: block;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.03) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* CLS: the three columns fill after an API round trip. Reserve roughly their
   settled heights so the data landing does not push the Hall below it;
   min-height, not height, so long lists still grow. */
#arena-challenges-list,
#arena-tournaments-list { min-height: 280px; }
#arena-live-feed { min-height: 220px; }
#arena-user-stats { min-height: 150px; }