/* ══════════════════════════════════════════════════════════
   arena / styles-arena.css — THE DUEL ARENA, inside the poster.
   ────────────────────────────────────────────────────────────
   Arena-only. Nothing here invents a palette or a type scale:
   the ground, the tones, the two corner colours and the five
   font sizes all come from `styles.css`. The rule borrowed from
   the page's art direction — flat colour fields, hard black
   edges, no gradients, mono only for figures — is kept, so the
   dApp reads as part of the fight poster and not as a widget
   dropped on top of it.
   ══════════════════════════════════════════════════════════ */

.arena,
.arena__main,
.arena__head{min-width:0}
.arena__head{overflow-wrap:anywhere}
.arena__sub{overflow-wrap:anywhere}

.arena{
  /* Up is the site's own ticker colour. Down has no token — the palette has no red left — so
     it is one local value, used only for a falling number and a closed trade. */
  --arena-up:var(--void);
  --arena-down:#ff6b5e;
  position:relative;
  max-width:var(--maxw);
  margin:0 auto;
  padding:var(--gap) var(--pad);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(18px,2.4vw,30px);
}

/* Every grid here is a single-column stack, and every stack has to be told it may be
   narrower than its content. An `auto` track sizes to the widest thing inside it — one
   20-character `<input>` at display size is ~850 px, which is how the quote rows ended up
   with their values pushed out from under the card. `minmax(0,1fr)` plus `min-width:0`
   is the fix, applied once, here. */
.arena-card,
.arena-chart,
.arena-board,
.arena-side,
.arena-rows{grid-template-columns:minmax(0,1fr)}
.arena-card > *,
.arena-chart > *,
.arena-board > *,
.arena-side > *,
.arena-rows > *,
.arena-row > *{min-width:0}

/* An element with `display:grid` in a rule of its own ignores the `hidden` attribute, which
   sets `display:none` only through the UA stylesheet — so the arena states that are toggled
   with `hidden` (the demo empty state, the settled banner, the rage warning) need this. */
.arena [hidden]{display:none !important}

.arena-visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ── head ────────────────────────────────────────────────── */

.arena__head{
  display:flex;flex-wrap:wrap;gap:18px 28px;
  align-items:flex-start;justify-content:space-between;
  padding-bottom:clamp(12px,1.8vw,20px);
  border-bottom:2px solid #000;
}
.arena__intro{max-width:62ch}
.arena__kicker{
  margin:0 0 8px;font-family:var(--font-mono);font-size:var(--fs-small);
  letter-spacing:.22em;color:var(--ink-dim);text-transform:uppercase;
}
.arena__sub{
  margin:0;font-size:var(--fs-h2);font-family:var(--font-display);
  letter-spacing:-.02em;line-height:.98;max-width:24ch;
}
.arena__status{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}

.arena-badge{
  font-family:var(--font-mono);font-size:var(--fs-small);
  padding:6px 10px;background:var(--tone-2);color:var(--ink-dim);
  border:2px solid #000;white-space:nowrap;
}
.arena-badge--demo{background:var(--void);color:#04211d;font-weight:700}
/* On a chain the badge says so instead of saying "demo" — the two states are exclusive, and a
   live panel that still wears the demo label is a panel nobody can trust. */
.arena-badge--live{background:var(--green);color:#101400;font-weight:700}
.arena-badge--account{background:var(--tone-1);color:var(--ink)}

/* ── buttons ─────────────────────────────────────────────── */

/* The owner asked for bigger targets. Size and hit area only — the fills, borders and
   hard-shadow language are the page's and stay as they are. */
.arena-btn{
  font-family:var(--font-display);font-size:17px;letter-spacing:.03em;line-height:1.1;
  min-height:52px;min-width:160px;padding:14px 24px;
  border:2px solid #000;background:var(--ink);color:var(--ground);
  cursor:pointer;box-shadow:4px 4px 0 #000;transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.arena-btn:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:6px 6px 0 #000}
.arena-btn:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 #000}
.arena-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
.arena-btn--wallet{background:var(--cz);color:var(--cz-ink)}
.arena-btn--ghost{background:transparent;color:var(--ink);box-shadow:none;border-color:var(--ink-dim)}
.arena-btn--warn{background:var(--elon);color:#fff}
.arena-btn--action{
  width:100%;margin-top:6px;font-size:var(--fs-lead);min-height:58px;padding:18px 28px;
  background:var(--elon);color:#fff;
}
.arena[data-side="cz"] .arena-btn--action,
.arena-btn--action[data-side="cz"]{background:var(--cz);color:var(--cz-ink)}

/* Figures are mono — the site's rule — and every number that can change next to another
   number is tabular, so a countdown does not shuffle sideways as the digits change. */
.arena .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ── clock strip ─────────────────────────────────────────── */

.arena__clock{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  background:var(--tone-2);border:2px solid #000;
}
.arena-cell{padding:14px clamp(10px,1.4vw,18px);border-right:1px solid rgba(0,0,0,.55)}
.arena-cell:last-child{border-right:0}
.arena-cell__label{
  display:block;font-family:var(--font-mono);font-size:var(--fs-small);
  letter-spacing:.14em;color:var(--ink-faint);margin-bottom:6px;
}
.arena-cell__value{
  font-family:var(--font-mono);font-size:var(--fs-lead);font-variant-numeric:tabular-nums;
  color:var(--ink);white-space:nowrap;
}
/* The last ten minutes: the countdown turns and blinks. */
.arena-cell__value[data-final="true"]{color:var(--arena-down);animation:arenaBlink 1s steps(2,end) infinite}
@keyframes arenaBlink{50%{opacity:.28}}

/* The expensive tier is the one the wallet pays for holding both corners: gold, never the
   colour of a corner it is trading. */
.arena-cell__value[data-tier="both"]{color:var(--cz)}

.arena__fee-line{
  margin:0;font-family:var(--font-mono);font-size:var(--fs-small);color:var(--ink-dim);
}
.arena__banner{
  margin:0;padding:14px 18px;background:var(--cz);color:var(--cz-ink);
  font-family:var(--font-display);font-size:var(--fs-lead);letter-spacing:.03em;
  border:2px solid #000;font-variant-numeric:tabular-nums;
}
.arena__notices{display:grid;gap:8px}
.arena-notice{
  margin:0;padding:10px 14px;font-family:var(--font-mono);font-size:var(--fs-small);
  border:2px solid #000;background:var(--tone-1);color:var(--ink-dim);
}
.arena-notice--good{background:#0f2a22;color:var(--void)}
.arena-notice--warn{background:#2a2205;color:var(--cz)}
/* The one local value left that is not a site token: an error wash. It is deliberately red so
   it can never be mistaken for either corner, and it is text-on-dark, measured 8.6:1. */
.arena-notice--bad{background:#2a0d08;color:#ff8a7a}
.arena-notice--info{background:var(--tone-1);color:var(--ink-dim)}

/* ── graduation ──────────────────────────────────────────── */

.arena-side__grad{
  margin:0;padding:8px 12px;background:var(--cz);color:var(--cz-ink);
  font-family:var(--font-display);font-size:var(--fs-body);letter-spacing:.04em;
  border:2px solid #000;
}
.arena-side__grad-note{margin:0;font-family:var(--font-mono);font-size:var(--fs-small);color:var(--ink-dim)}
.arena-side[data-graduated="true"] .arena-side__ticker{color:var(--cz)}
.arena-btn--dex{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--cz);color:var(--cz-ink);text-decoration:none;
}
/* A graduated curve is finished: the bar goes gold and stays gold. */
.arena-curve[data-graduated="true"] .arena-curve__fill{background:var(--cz);animation:arenaGlow 2.4s ease-in-out infinite}
.arena-curve[data-graduated="true"] .arena-curve__value{color:var(--cz);font-weight:700}
@keyframes arenaGlow{0%,100%{opacity:1}50%{opacity:.72}}
.arena-btn--graduate{background:var(--cz);color:var(--cz-ink)}
.arena-cell__value[data-move="up"],.arena-box__entry[data-move="up"]{animation:arenaTick .45s ease-out}

/* ── the two corners ─────────────────────────────────────── */

.arena__sides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.arena-side{
  background:var(--tone-2);padding:clamp(16px,2vw,26px);
  border-top:6px solid var(--ink);display:grid;gap:12px;align-content:start;
}
.arena-side--elon{border-top-color:var(--elon)}
.arena-side--cz{border-top-color:var(--cz)}
.arena-side[data-leading="true"]{background:var(--tone-1);box-shadow:inset 0 0 0 2px rgba(255,255,255,.06)}
.arena-side[data-loser="true"]{opacity:.82}
.arena-side__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.arena-side__ticker{
  margin:0;font-family:var(--font-display);font-size:var(--fs-h2);letter-spacing:-.02em;line-height:.9;
}
.arena-side--elon .arena-side__ticker{color:var(--elon)}
.arena-side--cz .arena-side__ticker{color:var(--cz)}
.arena-side[data-loser="true"] .arena-side__ticker{color:var(--ink-dim)}
.arena-side__corner{
  font-family:var(--font-mono);font-size:var(--fs-small);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);
}
.arena-side__motto{
  margin:0;font-size:var(--fs-lead);color:var(--ink-dim);font-style:italic;
  border-left:3px solid var(--ink-faint);padding-left:12px;
}
.arena-side__stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;margin:0}
.arena-side__stat{display:grid;gap:2px;min-width:0}
.arena-side__stat dt{
  font-family:var(--font-mono);font-size:var(--fs-small);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);
}
.arena-side__stat dd{
  margin:0;font-family:var(--font-mono);font-size:var(--fs-body);
  font-variant-numeric:tabular-nums;color:var(--ink);overflow-wrap:anywhere;
}
.arena-side__price{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.arena-side__delta{
  font-size:var(--fs-small);color:var(--ink-dim);transition:opacity .3s ease;
}
/* A price that moved flashes for a moment in the direction it went. */
.arena-side[data-move="up"] .arena-side__price,
.arena-side[data-move="up"] .arena-side__delta{color:var(--arena-up);animation:arenaTick .45s ease-out}
.arena-side[data-move="down"] .arena-side__price,
.arena-side[data-move="down"] .arena-side__delta{color:var(--arena-down);animation:arenaTick .45s ease-out}
@keyframes arenaTick{
  0%{transform:translateY(3px);opacity:.35}
  60%{transform:translateY(0);opacity:1}
  100%{transform:none}
}

/* ── curve meter ─────────────────────────────────────────── */

.arena-curve{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 10px;align-items:center}
.arena-curve__label{
  font-family:var(--font-mono);font-size:var(--fs-small);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint);
}
.arena-curve__value{
  justify-self:end;font-size:var(--fs-small);color:var(--ink);font-variant-numeric:tabular-nums;
}
.arena-curve__bar{
  grid-column:1 / -1;position:relative;display:block;height:8px;
  background:var(--tone-1);border:1px solid rgba(255,255,255,.12);overflow:hidden;
}
.arena-curve__fill{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--elon),var(--cz));
  transition:width .8s cubic-bezier(.22,.7,.28,1);
}
/* The bar breathes, so a 12 s poll still reads as a live curve rather than a screenshot. */
.arena-curve__bar::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  transform:translateX(-100%);animation:arenaPulse 2.8s linear infinite;
}
@keyframes arenaPulse{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.arena-curve__cap{
  grid-column:1 / -1;font-family:var(--font-mono);font-size:var(--fs-small);color:var(--arena-chart-text);
}
.arena-curve[data-graduated="true"] .arena-curve__value{color:var(--cz);font-weight:700}
.arena-curve--compact{grid-template-columns:auto auto minmax(80px,1fr);padding-bottom:2px}
.arena-curve--compact .arena-curve__cap{grid-column:auto;color:var(--ink-faint)}
.arena-side--cz .arena-curve__fill{background:linear-gradient(90deg,var(--elon),var(--cz))}

/* ── the live tape ───────────────────────────────────────── */

.arena-tape{display:grid;gap:6px}
.arena-card--tape .arena-tape__rows{max-height:196px}
.arena-card--tape .arena-tape__row{grid-template-columns:54px minmax(0,1fr) 16px minmax(0,1fr) 90px 86px}
.arena-tape__head{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.arena-tape__title{
  font-family:var(--font-mono);font-size:var(--fs-small);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-dim);
}
.arena-tape__count{font-size:var(--fs-small);color:var(--ink-faint)}
/* Scrollable, never clipped: every fill the indexer has is reachable with the wheel or a
   finger, and new rows are scrolled to (see `renderTape`). */
.arena-tape__rows{
  display:grid;gap:2px;max-height:216px;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--ink-faint) transparent;
}
.arena-tape__rows::-webkit-scrollbar{width:8px}
.arena-tape__rows::-webkit-scrollbar-thumb{background:var(--ink-faint)}
.arena-tape__row{
  display:grid;grid-template-columns:44px minmax(0,1fr) 12px minmax(0,1.1fr) 58px 52px;
  gap:8px;align-items:baseline;padding:3px 0;
  font-size:var(--fs-small);color:var(--ink-dim);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.arena-tape__kind{font-family:var(--font-mono);letter-spacing:.1em}
.arena-tape__row[data-kind="buy"] .arena-tape__kind{color:var(--arena-up)}
.arena-tape__row[data-kind="sell"] .arena-tape__kind{color:var(--arena-down)}
.arena-tape__amount,.arena-tape__tokens{color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.arena-tape__arrow{color:var(--ink-faint);text-align:center}
.arena-tape__who{color:var(--ink-faint)}
.arena-tape__age{text-align:right;color:var(--ink-faint)}
/* A row that was not on screen a moment ago slides in; the ones below just shift. */
.arena-tape__row[data-fresh="true"]{animation:arenaSlide .45s cubic-bezier(.2,.8,.3,1)}
@keyframes arenaSlide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.arena-tape__empty{margin:0;font-size:var(--fs-small);color:var(--ink-faint)}

.arena-tug{display:flex;height:14px;background:var(--tone-1);border:2px solid #000;gap:0;overflow:hidden}
.arena-tug i{display:block;height:100%}
.arena-tug__elon{background:var(--elon)}
.arena-tug__cz{background:var(--cz)}
.arena-tug i{transition:width .5s cubic-bezier(.2,.7,.3,1)}

/* ── layout of the working parts ─────────────────────────── */

/* The price panel is a fixed column and the chart takes the rest of the width, which is what
   the chart wants: it is the thing that scales with the viewport. */
.arena__main{display:grid;grid-template-columns:340px minmax(0,1fr);gap:clamp(12px,1.6vw,20px)}
.arena-card{
  background:var(--tone-2);padding:clamp(16px,2vw,26px);
  display:grid;gap:14px;align-content:start;min-width:0;
}
.arena-card--chart,.arena-card--board{grid-column:1 / -1}
.arena-card__title{
  margin:0;font-family:var(--font-mono);font-size:var(--fs-small);
  letter-spacing:.2em;color:var(--ink-dim);text-transform:uppercase;
}
.arena-card__note{margin:0;font-size:var(--fs-small);color:var(--ink-faint);max-width:70ch}
.arena__main .arena-card--trade{grid-column:1}
.arena__main .arena-card--chart{grid-column:2}
@media (max-width:1000px){
  .arena__main{grid-template-columns:minmax(0,1fr)}
  .arena__main .arena-card--trade,.arena__main .arena-card--chart{grid-column:1 / -1}
}

/* ── segmented controls ──────────────────────────────────── */

.arena-seg{display:flex;flex-wrap:wrap;gap:0;border:2px solid #000;width:fit-content;max-width:100%}
.arena-seg__opt{
  font-family:var(--font-mono);font-size:var(--fs-small);letter-spacing:.1em;
  min-height:40px;padding:10px 16px;background:transparent;color:var(--ink-dim);
  border:0;border-right:1px solid rgba(255,255,255,.08);cursor:pointer;
}
.arena-seg__opt:disabled{opacity:.4;cursor:not-allowed}
.arena-seg__opt:last-child{border-right:0}
.arena-seg__opt[aria-pressed="true"]{background:var(--ink);color:var(--ground)}
.arena-seg__opt--elon[aria-pressed="true"]{background:var(--elon);color:#fff}
.arena-seg__opt--cz[aria-pressed="true"]{background:var(--cz);color:var(--cz-ink)}

/* ── trade form ──────────────────────────────────────────── */

.arena-amount{
  display:flex;align-items:center;gap:12px;
  background:var(--tone-1);border:2px solid #000;padding:6px 12px;
}
.arena-amount__input{
  flex:1 1 0;width:100%;min-width:0;background:transparent;border:0;outline:none;
  font-family:var(--font-mono);font-size:var(--fs-h2);color:var(--ink);
  font-variant-numeric:tabular-nums;padding:6px 0;
}
.arena-amount__input::placeholder{color:var(--ink-faint)}
.arena-amount__unit{font-family:var(--font-mono);font-size:var(--fs-body);color:var(--ink-dim)}
.arena-amount__max{
  font-family:var(--font-mono);font-size:var(--fs-small);letter-spacing:.1em;
  background:var(--tone-2);color:var(--ink-dim);border:1px solid var(--ink-faint);
  min-height:34px;padding:6px 14px;cursor:pointer;
}
.arena-amount__max:hover{color:var(--ink);border-color:var(--ink)}

.arena-slip{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.arena-slip__label{
  font-family:var(--font-mono);font-size:var(--fs-small);letter-spacing:.12em;
  color:var(--ink-faint);text-transform:uppercase;
}
.arena-slip__opt{
  font-family:var(--font-mono);font-size:var(--fs-small);padding:8px 14px;min-height:36px;
  background:transparent;color:var(--ink-dim);border:1px solid var(--ink-faint);cursor:pointer;
}
.arena-slip__opt[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}

.arena-rows{display:grid;gap:0;border-top:1px solid rgba(255,255,255,.08)}
.arena-row{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:12px;align-items:baseline;padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.arena-row__k{
  font-family:var(--font-mono);font-size:var(--fs-small);letter-spacing:.08em;
  color:var(--ink-faint);text-transform:uppercase;
}
.arena-row__v{text-align:right;font-size:var(--fs-body);color:var(--ink);overflow-wrap:anywhere}
.arena-row__v--small{font-size:var(--fs-small);color:var(--ink-dim)}
.arena-row__v[data-tone="warn"]{color:var(--cz)}
.arena-row__v[data-tone="bad"]{color:var(--elon)}
.arena-trade__notice{
  margin:0;font-family:var(--font-mono);font-size:var(--fs-small);color:var(--ink-dim);max-width:52ch;
}

/* ── the two-tier tax, where the trade is priced ─────────── */

.arena-trade__tax{
  margin:0;font-size:var(--fs-small);color:var(--ink-dim);max-width:46ch;
}
.arena-trade__tax[data-tier="both"]{color:var(--cz)}

/* ── dev share, claim / settle ───────────────────────────── */

.arena-dev{
  display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;justify-content:space-between;
  padding:10px 12px;background:var(--tone-1);border-left:3px solid var(--void);
}
.arena-dev__label{
  font-family:var(--font-mono);font-size:var(--fs-small);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-dim);
}
.arena-dev__value{font-size:var(--fs-small);color:var(--ink);overflow-wrap:anywhere}
.arena-dev__note{font-size:var(--fs-small);color:var(--ink-faint);flex:1 1 auto;text-align:right}
.arena-dev--pool{border-left-color:var(--cz)}
.arena-table__traitor{
  margin-left:8px;padding:2px 6px;background:var(--tone-1);color:var(--cz);
  border:1px solid var(--cz);font-family:var(--font-mono);font-size:var(--fs-small);
}


.arena-claim{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.arena-settle__input{
  background:var(--tone-1);border:2px solid #000;color:var(--ink);
  font-family:var(--font-body);font-size:var(--fs-body);padding:12px 14px;width:100%;
}
.arena-settle__input::placeholder{color:var(--ink-faint)}

/* ── the box ─────────────────────────────────────────────── */

.arena-box__guide{
  margin:0;font-family:var(--font-mono);font-size:var(--fs-small);color:var(--cz);max-width:64ch;
}
.arena-box__stats{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0;
}
.arena-box__stat{display:grid;gap:2px;min-width:0}
.arena-box__stat dt{
  font-family:var(--font-mono);font-size:var(--fs-small);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);
}
.arena-box__stat dd{
  margin:0;font-family:var(--font-mono);font-size:var(--fs-body);
  font-variant-numeric:tabular-nums;color:var(--ink);overflow-wrap:anywhere;
}
.arena-box__stat dd[data-tier="high"]{color:var(--arena-up)}
.arena-box__stat dd[data-tier="mid"]{color:var(--cz)}
.arena-box__entry{margin:0;font-family:var(--font-mono);font-size:var(--fs-body);color:var(--ink)}
.arena-box__entry-note{margin-left:8px;font-size:var(--fs-small);color:var(--ink-faint)}
/* The gate climbing is the thing worth noticing, so it ticks like a price. */
.arena-box__entry[data-move="up"]{color:var(--cz);animation:arenaTick .45s ease-out}
.arena-box__min{margin:0;font-family:var(--font-mono);font-size:var(--fs-small);color:var(--ink-faint)}
.arena-amount__min{color:var(--cz);border-color:var(--cz)}
.arena-amount__min:disabled{color:var(--ink-faint);border-color:var(--ink-faint)}
.arena-card--box[data-open="true"]{box-shadow:inset 0 0 0 2px rgba(240,185,11,.28)}

/* The result has to be impossible to miss: a hit bursts, a miss just sits there and eats it. */
.arena-box__result{border:2px solid #000;padding:14px 16px;background:var(--tone-1)}
.arena-box__result[data-outcome="win"]{background:#08231c;border-color:var(--arena-up);animation:arenaHit .5s cubic-bezier(.2,.9,.3,1)}
.arena-box__result[data-outcome="lose"]{background:#2a0d08;border-color:var(--arena-down)}
.arena-box__verdict{
  margin:0 0 6px;font-family:var(--font-display);font-size:var(--fs-lead);letter-spacing:.02em;
}
.arena-box__result[data-outcome="win"] .arena-box__verdict{color:var(--arena-up)}
.arena-box__result[data-outcome="lose"] .arena-box__verdict{color:var(--arena-down)}
.arena-box__detail,.arena-box__hash{margin:0;font-size:var(--fs-small);color:var(--ink-dim)}
.arena-box__hash{color:var(--ink-faint);margin-top:4px}
@keyframes arenaHit{
  0%{transform:scale(.94);box-shadow:0 0 0 0 rgba(94,234,212,.55)}
  60%{transform:scale(1.01);box-shadow:0 0 0 14px rgba(94,234,212,0)}
  100%{transform:none;box-shadow:0 0 0 0 rgba(94,234,212,0)}
}

/* ── chart ───────────────────────────────────────────────── */

/* The chart's own small text. `--ink-faint` is the right weight for a hairline label but only
   measures 3.4:1 on the chart ground — under the 4.5:1 floor for 9.5-13 px text — so the axis
   labels, the readout captions and the chart's caption use this one local value instead.
   #c9c9d3 measures 11.3:1 on `--tone-1` and 11.6:1 on `--ground`. */
.arena-chart{--arena-chart-text:#c9c9d3;display:grid;gap:12px;user-select:none}
.arena-chart__bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.arena-chart__group{display:flex;border:2px solid #000}
/* Ten frames on a phone: one scrollable row, every button still a real target. */
@media (max-width:860px){
  .arena-chart__group--tf{max-width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .arena-chart__group--tf::-webkit-scrollbar{display:none}
  .arena-chart__bar{flex-wrap:nowrap;overflow-x:auto}
  .arena-chart__meta{display:none}
}
.arena-chip{
  font-family:var(--font-mono);font-size:var(--fs-small);letter-spacing:.1em;
  padding:7px 12px;background:transparent;color:var(--ink-dim);border:0;
  border-right:1px solid rgba(255,255,255,.08);cursor:pointer;
}
.arena-chip:last-child{border-right:0}
.arena-chip--elon[aria-pressed="true"]{background:var(--elon);color:#fff}
.arena-chip--cz[aria-pressed="true"]{background:var(--cz);color:var(--cz-ink)}
.arena-tf{
  font-family:var(--font-mono);font-size:var(--fs-small);letter-spacing:.1em;
  padding:7px 12px;background:transparent;color:var(--ink-dim);border:0;
  border-right:1px solid rgba(255,255,255,.08);cursor:pointer;
}
.arena-tf:last-child{border-right:0}
.arena-tf[aria-pressed="true"]{background:var(--ink);color:var(--ground)}
.arena-tf--reset{color:var(--ink-dim);border-left:1px solid rgba(255,255,255,.12)}
.arena-chart[data-zoomed="true"] .arena-tf--reset{color:var(--cz)}
.arena-chart__meta{
  margin-left:auto;font-family:var(--font-mono);font-size:var(--fs-small);color:var(--arena-chart-text);
}
.arena-chart__box{
  position:relative;height:380px;
  background:var(--tone-1);border:2px solid #000;
  /* A drag inside the chart pans the chart, never the page and never a text selection. */
  user-select:none;touch-action:none;overscroll-behavior:contain;
}
/* Panning has to be visible: the frame picks up a hint of lift while the pointer is down. */
.arena-chart__box:has(.arena-chart__canvas[data-panning="true"]){box-shadow:inset 0 0 0 2px rgba(255,255,255,.10)}
.arena-chart__canvas{position:absolute;inset:0;display:block;cursor:grab;touch-action:none}
.arena-chart__canvas[data-panning="true"]{cursor:grabbing}
.arena-chart__hint{
  position:absolute;right:8px;bottom:6px;pointer-events:none;
  font-family:var(--font-mono);font-size:11px;color:var(--ink-faint);opacity:.45;
  transition:opacity .2s ease;
}
.arena-chart__box:hover .arena-chart__hint{opacity:0}
.arena-chart__empty{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--font-mono);font-size:var(--fs-small);color:var(--arena-chart-text);
  text-align:center;padding:20px;
}
.arena-chart__readout{
  position:absolute;top:10px;z-index:2;min-width:186px;
  background:var(--ground);border:2px solid #000;padding:8px 10px;
  box-shadow:4px 4px 0 rgba(0,0,0,.6);pointer-events:none;
}
.arena-chart__ro-head{
  font-family:var(--font-mono);font-size:var(--fs-small);color:var(--arena-chart-text);
  padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:6px;
}
.arena-chart__ro-row{
  display:flex;justify-content:space-between;gap:14px;
  font-family:var(--font-mono);font-size:var(--fs-small);color:var(--arena-chart-text);
}
.arena-chart__ro-row .mono{color:var(--ink);font-variant-numeric:tabular-nums}
.arena-chart__caption{margin:0;font-size:var(--fs-small);color:var(--arena-chart-text);max-width:80ch}
.arena-chart__sparse{
  position:absolute;left:10px;top:8px;pointer-events:none;
  font-family:var(--font-mono);font-size:11px;color:var(--arena-chart-text);
  background:var(--ground);padding:3px 7px;border:1px solid rgba(255,255,255,.12);
}
.arena-chart__edge{
  position:absolute;left:0;top:50%;transform:translateY(-50%);pointer-events:none;
  font-family:var(--font-mono);font-size:11px;color:var(--ink-faint);
  background:var(--ground);padding:3px 6px;border-left:2px solid var(--ink-faint);
}

.arena-chart__table{border-top:1px solid rgba(255,255,255,.08);padding-top:10px}
.arena-chart__table summary{
  font-family:var(--font-mono);font-size:var(--fs-small);color:var(--arena-chart-text);cursor:pointer;
}
.arena-chart__table table{width:100%;border-collapse:collapse;margin-top:10px}
.arena-chart__table th,.arena-chart__table td{
  font-family:var(--font-mono);font-size:var(--fs-small);text-align:right;
  padding:5px 8px;border-bottom:1px solid rgba(255,255,255,.06);color:var(--arena-chart-text);
}
.arena-chart__table th{color:var(--ink-faint);letter-spacing:.08em;text-transform:uppercase}
.arena-chart__table th:first-child,.arena-chart__table td:first-child{text-align:left}
.arena-chart__table td{color:var(--ink);font-variant-numeric:tabular-nums}
.arena-chart__table tr[data-dir="up"] td:first-child{border-left:2px solid var(--void)}
.arena-chart__table tr[data-dir="down"] td:first-child{border-left:2px solid var(--ink-faint)}
.arena-chart__table tr[data-dir="gap"] td{color:var(--arena-chart-text);opacity:.75}

/* ── leaderboard ─────────────────────────────────────────── */

.arena-board{display:grid;gap:16px}
.arena-board__head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;min-width:0}
.arena-board__tabs{display:flex;border:2px solid #000;width:fit-content}
.arena-board__source{
  font-family:var(--font-mono);font-size:var(--fs-small);color:var(--ink-faint);
}
.arena-board__source[data-mode="chained"]{color:var(--void)}
.arena-board__scroll{overflow-x:auto;min-width:0}
.arena-table{width:100%;border-collapse:collapse;min-width:min(560px,100%)}
.arena-table th,.arena-table td{
  padding:8px 10px;text-align:left;border-bottom:1px solid rgba(255,255,255,.07);
  font-size:var(--fs-small);color:var(--ink-dim);white-space:nowrap;
}
.arena-table th{
  font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);
}
.arena-table td{font-family:var(--font-body)}
.arena-table__num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.arena-table__rank{color:var(--ink-faint);font-family:var(--font-mono)}
.arena-table__wallet{font-family:var(--font-mono);color:var(--ink)}
.arena-table__label{
  margin-left:8px;padding:2px 6px;background:var(--void);color:#04211d;
  font-family:var(--font-mono);font-size:var(--fs-small);letter-spacing:.06em;
}
.arena-table__stale{
  margin-left:8px;padding:2px 6px;background:var(--tone-1);color:var(--ink-faint);
  font-family:var(--font-mono);font-size:var(--fs-small);border:1px solid var(--ink-faint);
}
.arena-table__empty{color:var(--ink-faint);font-family:var(--font-mono);padding:16px 10px}
.arena-board__note{margin:0;font-size:var(--fs-small);color:var(--ink-faint);max-width:80ch}

/* ── narrow screens ──────────────────────────────────────── */

/* The narrowest phone the page supports: the identity block stacks instead of squeezing the
   long subtitle into a flex row that cannot shrink below its content. */
@media (max-width:460px){
  /* On a phone the six-column tape row wraps into a tall stack, so it becomes two lines and
     the list gets a viewport-relative cap — still scrollable, never a wall of text. */
  .arena-tape__row{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:'kind amount age' 'who tokens tokens';row-gap:2px}
  .arena-tape__kind{grid-area:kind}
  .arena-tape__amount{grid-area:amount}
  .arena-tape__tokens{grid-area:tokens;text-align:right}
  .arena-tape__who{grid-area:who}
  .arena-tape__age{grid-area:age}
  .arena-tape__arrow{display:none}
  .arena-tape__rows{max-height:40vh}
  .arena__head{flex-direction:column;align-items:flex-start}
  .arena__status{justify-content:flex-start}
  .arena__sub{max-width:100%}
}

@media (max-width:860px){
  /* On a phone the primary actions take the whole row. */
  .arena-btn,.arena-btn--action{width:100%;min-width:0}
  .arena-box__stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .arena__clock{grid-template-columns:repeat(2,minmax(0,1fr))}
  .arena-cell:nth-child(2n){border-right:0}
  .arena-cell{border-bottom:1px solid rgba(0,0,0,.55)}
  .arena__sides{grid-template-columns:minmax(0,1fr)}
  .arena-claim{grid-template-columns:minmax(0,1fr)}
  .arena-side__stats{grid-template-columns:minmax(0,1fr)}
  .arena-chart__meta{width:100%;margin-left:0}
}

/* Motion is a preference, not a feature: with `reduce` the numbers still update, they just
   stop sliding, blinking and pulsing. The page's own MOTION switch is gone, so this follows
   the system setting. */
@media (prefers-reduced-motion:reduce){
  .arena-btn,.arena-tug i{transition:none}
  .arena-btn:hover,.arena-btn:active{transform:none;box-shadow:4px 4px 0 #000}
  .arena-curve[data-graduated="true"] .arena-curve__fill,
  .arena-side[data-move] .arena-side__price,
  .arena-side[data-move] .arena-side__delta,
  .arena-tape__row[data-fresh="true"],
  .arena-box__result[data-outcome="win"],
  .arena-cell__value[data-final="true"]{animation:none}
  .arena-curve__bar::after{animation:none;opacity:.18;transform:none}
  .arena-curve__fill{transition:width .2s linear}
  .arena-cell__value[data-final="true"]{color:var(--arena-down)}
}

/* file:// or a browser that blocks ES modules: the Lead's fallback notice lands here. */
.arena-fallback{
  padding:14px 18px;background:var(--tone-2);border:2px solid #000;
  font-family:var(--font-mono);font-size:var(--fs-small);color:var(--ink-dim);
}