/* ══════════════════════════════════════════════════════════
   TICKERWAR · $ELON vs $CZ
   Direction: fight-night poster for a twitter spat.
   Two faces, one ground, one ink, two corners (red / gold), greentext green.
   Every rule below is used by index.html; anything unused was deleted.
   ══════════════════════════════════════════════════════════ */

:root{
  --ground:#0a0a0c;
  --tone-1:#121216;
  --tone-2:#1a1a20;
  --ink:#f3f3f6;
  --ink-dim:#a4a4ae;
  --ink-faint:#6d6d78;

  --elon:#2a7fff;          /* SpaceX blue */
  --elon-deep:#0b3d91;     /* SpaceX deep blue, white on top */
  --cz:#f0b90b;
  --cz-ink:#1a1400;
  --green:#789922;
  --void:#5eead4;

  --font-display:"Impact","Haettenschweiler","Arial Narrow Bold","Arial Black","PingFang SC","Heiti SC",sans-serif;
  --font-body:ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  /* five sizes, no more */
  --fs-display:clamp(54px,11vw,158px);
  --fs-h2:clamp(28px,4.2vw,52px);
  --fs-lead:clamp(18px,1.9vw,24px);
  --fs-body:17px;
  --fs-small:13px;

  --gap:clamp(48px,5.5vw,88px);      /* between sections */
  --pad:clamp(16px,3vw,40px);
  --maxw:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--font-body);font-size:var(--fs-body);line-height:1.55;
  overflow-x:hidden;padding-top:34px;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
code{font-family:var(--font-mono);font-size:.88em;word-break:break-word}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;letter-spacing:-.02em;line-height:.94;margin:0 0 .4em}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-lead)}
p{margin:0 0 .9em;max-width:64ch}
blockquote{max-width:62ch}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--cz);outline-offset:3px}
::selection{background:var(--elon);color:#fff}

/* ── ambient ──────────────────────────────────────────────── */
.fx-noise,.fx-grid{position:fixed;inset:0;pointer-events:none;z-index:0}
.fx-noise{
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.fx-grid::before,.fx-grid::after{content:"";position:absolute;top:0;width:min(5.5vw,72px);height:100svh;opacity:.12}
.fx-grid::before{left:0;background:var(--elon)}
.fx-grid::after{right:0;background:var(--cz)}

/* ── tape ─────────────────────────────────────────────────── */
.tickerbar{position:fixed;top:0;left:0;right:0;height:34px;z-index:50;background:#0d0d11;display:flex;align-items:center;overflow:hidden;border-bottom:2px solid #000}
.tickerbar__track{display:flex;align-items:center;width:max-content;animation:marquee 52s linear infinite;font-family:var(--font-mono);font-size:var(--fs-small);color:var(--ink-dim)}
.tickerbar__half{display:flex;align-items:center;gap:30px;white-space:nowrap;padding-right:30px}
.tickerbar:hover .tickerbar__track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tk{color:var(--ink-dim)}
.tk--up{color:var(--void)}
.tk--down{color:var(--elon)}
.tk--warn{color:var(--cz)}
.tk-dot{color:#3a3a44}

/* ── nav ──────────────────────────────────────────────────── */
.nav{
  position:sticky;top:34px;z-index:40;display:flex;align-items:center;gap:14px;
  padding:12px max(var(--pad),calc((100vw - var(--maxw)) / 2));
  background:var(--ground);border-bottom:2px solid #000;flex-wrap:wrap;
}
.nav__logo{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.nav__logo-txt{font-family:var(--font-display);font-size:var(--fs-body);letter-spacing:.02em}
.nav__logo-txt b{color:var(--cz)}
.nav__menu{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.nav__menu a{text-decoration:none;font-size:var(--fs-small);color:var(--ink-dim);padding:7px 9px}
.nav__menu a:hover{color:var(--ground);background:var(--ink)}
.nav__burger{display:none;margin-left:auto;background:none;border:2px solid var(--ink);color:var(--ink);font-size:var(--fs-body);line-height:1;padding:4px 10px;cursor:pointer}

/* ── buttons ──────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-weight:800;font-size:18px;
  padding:16px 30px;border:2px solid #000;border-radius:0;min-height:52px;min-width:150px;
  background:var(--ink);color:var(--ground);cursor:pointer;text-decoration:none;
  transition:background .15s ease,transform .12s ease,color .15s ease;
}
.btn:hover{transform:translateY(-2px);background:var(--cz);color:var(--cz-ink)}
.btn:active{transform:translateY(1px)}
.btn--elon{background:var(--elon-deep);color:#fff}
.btn--elon:hover{background:var(--elon);color:#fff}
.btn--cz{background:var(--cz);color:var(--cz-ink)}
.btn--cz:hover{background:var(--elon-deep);color:#fff}
.btn--plain{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--sm{padding:12px 20px;font-size:var(--fs-small);min-height:44px;min-width:0}

/* ── sections ─────────────────────────────────────────────── */
.section{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:var(--gap) var(--pad)}
.section__head{margin-bottom:clamp(20px,2.6vw,36px)}
.section__head h2{margin-bottom:.15em}
.section__head p{color:var(--ink-dim);font-size:var(--fs-body);margin:0}
#tokens,#launch,#recap,#faq{background:var(--tone-1)}
.section--arena{background:transparent;padding-bottom:calc(var(--gap) * 1.5)}
#tokens{border-top:8px solid var(--tone-2)}
#tokens .section__head{margin-top:clamp(40px,5.5vw,72px)}

/* ── hero ─────────────────────────────────────────────────── */
.hero{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:clamp(22px,3vw,44px) var(--pad) 0}
.hero__grid{
  display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr) minmax(0,320px);
  gap:clamp(16px,2.4vw,36px);align-items:start;
}
.hero__fighter{margin:0;background:var(--tone-1)}
.hero__fighter img{width:100%;height:auto}
.hero__fighter figcaption{display:flex;flex-direction:column;gap:3px;padding:10px 12px}
.hero__fighter b{font-family:var(--font-display);font-size:var(--fs-body);font-weight:400}
.hero__fighter span{font-size:var(--fs-small);color:var(--ink-dim)}
.hero__fighter--elon{border-top:5px solid var(--elon)}
.hero__fighter--cz{border-top:5px solid var(--cz)}
.hero__fighter--elon figcaption b{color:var(--elon)}
.hero__fighter--cz figcaption b{color:var(--cz)}

.hero__title{font-size:var(--fs-display);margin:0;line-height:.8;letter-spacing:-.035em;display:flex;flex-direction:column;gap:.02em}
.hero__name{display:inline-block;padding:0 .06em;width:max-content;max-width:100%}
.hero__name--elon{background:var(--elon);color:#fff}
.hero__name--cz{background:var(--cz);color:var(--cz-ink);margin-left:clamp(18px,12vw,190px)}
.hero__versus{font-family:var(--font-display);font-size:var(--fs-h2);margin:.45em 0 .35em;max-width:none}
.hero__sub{font-size:var(--fs-lead);max-width:42ch;margin:0 0 clamp(16px,2vw,26px)}
.hero__cta{display:flex;gap:10px;flex-wrap:wrap}
.hero__stats-title{font-size:var(--fs-lead);margin:clamp(26px,3.4vw,48px) 0 .5em}
.hero__stats{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding:0;margin:clamp(30px,4vw,56px) 0 0}
.hero__stats li{background:var(--tone-1);padding:clamp(14px,2vw,22px)}
.hero__stats b{display:block;font-family:var(--font-display);font-weight:400;font-size:var(--fs-h2);line-height:1;letter-spacing:-.02em}
.hero__stats span{display:block;margin-top:6px;font-size:var(--fs-small);color:var(--ink-dim)}

/* ── the two tokens ───────────────────────────────────────── */
.compare{font-size:var(--fs-body)}
.compare__head,.compare__row{display:grid;grid-template-columns:170px minmax(0,1fr) minmax(0,1fr)}
.compare__head span{padding:14px 16px;background:var(--tone-2);font-family:var(--font-display);font-size:var(--fs-lead)}
.compare__row+.compare__row{margin-top:2px}
.compare__row{background:var(--ground)}
.compare__row span{padding:12px 16px}
.compare__row span+span{box-shadow:inset 2px 0 0 var(--ground)}
.compare__row span:first-child{background:var(--tone-1);color:var(--ink-dim);font-weight:700}
.compare__elon{color:var(--elon)}
.compare__cz{color:var(--cz)}
.tokens__note{margin-top:clamp(16px,2vw,26px);font-size:var(--fs-body);color:var(--ink-dim)}

/* ── winning / losing ─────────────────────────────────────── */
.rules{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.rules__col{background:var(--tone-1);padding:clamp(18px,2.4vw,30px)}
.rules__col--win{background:var(--tone-2)}
.rules__col h3{margin-bottom:.5em}
.rules__col--win h3{color:var(--void)}
.rules__col--lose h3{color:var(--elon)}
.rules__col ul{margin:0;padding-left:1.1em;color:var(--ink-dim)}
.rules__col li{padding:4px 0;font-size:var(--fs-body)}
.rules__foot{color:var(--ink-dim);font-size:var(--fs-body);margin-top:clamp(16px,2vw,26px);max-width:64ch}

/* ── fair launch ──────────────────────────────────────────── */
.launch{margin:0}
.launch>div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:clamp(12px,2vw,28px);padding:14px 0}
.launch>div+div{border-top:2px solid var(--tone-2)}
.launch dt{color:var(--ink-dim);font-size:var(--fs-body)}
.launch dd{margin:0;font-size:var(--fs-body);max-width:64ch}

/* ── timeline ─────────────────────────────────────────────── */
.tl{list-style:none;padding:0;margin:0}
.tl__item{display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:clamp(14px,2vw,30px);padding:clamp(20px,2.6vw,34px) 0;align-items:start}
.tl__item+.tl__item{border-top:2px solid var(--tone-1)}
.tl__time{font-size:var(--fs-small);color:var(--ink-dim);padding-top:6px}
.tl__body{display:flex;gap:clamp(14px,2vw,28px);align-items:flex-start}
.tl__text{flex:1;min-width:0}
.tl__shot{flex:0 0 300px;max-width:300px}
.tl__shot--left{order:-1}
.tl__shot--right{order:2}
.tl__item--elon .tl__body h3,.tl__item--elon blockquote{border-color:var(--elon)}
.tl__item--cz .tl__body h3{color:var(--cz)}
.tl__item--elon .tl__body h3{color:var(--elon)}
.tl__item--fan .tl__body h3{color:var(--void)}
blockquote{
  margin:0 0 14px;padding:clamp(14px,1.7vw,20px);
  background:var(--tone-1);font-size:var(--fs-lead);max-width:56ch;
}
.tl__item--elon blockquote{border-left:5px solid var(--elon)}
.tl__item--cz blockquote{border-left:5px solid var(--cz)}
.tl__item--fan blockquote{border-left:5px solid var(--void)}
.tl__body p{color:var(--ink-dim);font-size:var(--fs-body)}
.tl__shot{margin:0 0 14px;max-width:300px;background:var(--tone-1);padding:8px}
.tl__shot img{width:100%;height:auto}
.tl__shot figcaption{font-size:var(--fs-small);color:var(--ink-dim);padding-top:6px}
.tl__full{font-size:var(--fs-body);color:var(--ink-dim);max-width:64ch;margin-top:clamp(20px,2.6vw,34px)}
.tl__full a{color:var(--cz)}

/* ── greentext ────────────────────────────────────────────── */
.green{
  font-family:var(--font-mono);white-space:pre-wrap;overflow-x:auto;
  color:var(--green);background:#0f0f13;margin:0;
  padding:clamp(18px,2.6vw,34px);font-size:16px;line-height:1.55;
}

/* ── memorial ─────────────────────────────────────────────── */
#memorial{padding-top:0}
#memorial .void__inner{background:var(--tone-1);padding:clamp(24px,3.4vw,52px);max-width:none}
.void__inner h2{color:var(--void)}
.void__quote{margin:20px 0;font-size:var(--fs-lead);max-width:52ch}
.strike{text-decoration:line-through;text-decoration-color:var(--elon);text-decoration-thickness:3px}
.void__quote cite{display:block;margin-top:10px;font-size:var(--fs-small);color:var(--ink-dim);font-style:normal}
.void__inner>p{color:var(--ink-dim);font-size:var(--fs-body)}

/* ── anons ────────────────────────────────────────────────── */
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(14px,2vw,26px);margin-bottom:clamp(28px,4vw,48px)}
.rev{background:var(--tone-1);padding:clamp(14px,1.8vw,22px)}
.rev__head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.rev__avatar{width:36px;height:36px;display:grid;place-items:center;font-size:var(--fs-body);background:#000;flex:0 0 auto}
.rev__who{font-weight:800;font-size:var(--fs-body);display:block}
.rev__handle{font-size:var(--fs-small);color:var(--ink-dim)}
.rev__text{font-size:var(--fs-body);margin:0 0 8px}
.rev__meta{font-size:var(--fs-small);color:var(--ink-faint);margin:0}
.rev--elon{border-top:4px solid var(--elon)}
.rev--cz{border-top:4px solid var(--cz)}
.rev--fan{border-top:4px solid var(--void)}
.rev--elon .rev__who{color:var(--elon)}
.rev--cz .rev__who{color:var(--cz)}
.rev--fan .rev__who{color:var(--void)}

.tape__title{margin-bottom:.5em}
.tape{width:100%;border-collapse:collapse;font-size:var(--fs-body)}
.tape th,.tape td{text-align:left;padding:12px 14px;border:1px solid var(--tone-2)}
.tape thead th{background:var(--tone-1);font-size:var(--fs-small);color:var(--ink-dim)}
.tape td:nth-child(3),.tape td:nth-child(4){white-space:nowrap}
.pill{font-size:var(--fs-small);padding:3px 8px;color:#000}
.pill--elon{background:var(--elon);color:#fff}
.pill--cz{background:var(--cz)}
.pill--fan{background:var(--void)}

/* ── faq ──────────────────────────────────────────────────── */
.faq{display:grid;gap:2px}
.faq__item{background:var(--tone-2);overflow:hidden}
.faq__item summary{cursor:pointer;padding:16px clamp(14px,1.8vw,24px);font-weight:800;font-size:var(--fs-lead);list-style:none;display:flex;justify-content:space-between;gap:14px}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";color:var(--cz);font-family:var(--font-display);font-size:var(--fs-lead);line-height:1}
.faq__item[open] summary::after{content:"–"}
.faq__item p{margin:0;padding:0 clamp(14px,1.8vw,24px) 18px;color:var(--ink-dim);font-size:var(--fs-body)}

/* ── footer ───────────────────────────────────────────────── */
.foot{position:relative;z-index:2;margin-top:var(--gap);background:#000}
.foot__grid{max-width:var(--maxw);margin:0 auto;padding:clamp(32px,4.5vw,64px) var(--pad);display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(18px,2.6vw,40px)}
.foot__grid h3{color:var(--cz);font-size:var(--fs-h2);letter-spacing:-.03em}
.foot__grid h4{font-family:var(--font-body);font-weight:800;font-size:var(--fs-small);color:var(--ink-dim);margin-bottom:.7em}
.foot__grid p,.foot__grid li{font-size:var(--fs-body);color:var(--ink-dim)}
.foot__grid ul{list-style:none;padding:0;margin:0}
.foot__grid li{padding:3px 0}
.foot__grid a{text-decoration:none;color:var(--ink)}
.foot__grid a:hover{color:var(--cz)}
.foot__legal{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) clamp(32px,4.5vw,56px);font-size:var(--fs-small);color:var(--ink-faint);line-height:1.8}

/* ── toast ────────────────────────────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,160%);
  background:var(--ink);color:var(--ground);padding:12px 22px;font-weight:700;font-size:var(--fs-body);
  z-index:90;pointer-events:none;transition:transform .28s cubic-bezier(.2,.8,.2,1);
  max-width:min(92vw,520px);text-align:center;
}
.toast--show{transform:translate(-50%,0)}

/* ═══════════ ARENA INTEGRATION LAYER ═══════════
   js/arena ships its own stylesheet; these are the page-level corrections only. */
#arenaMount .arena__intro{display:none}
#arenaMount .arena__kicker,
#arenaMount .arena-side__corner,
#arenaMount .arena-card__title,
#arenaMount .arena-slip__label,
#arenaMount .arena-row__k,
#arenaMount .arena-board__subtitle,
#arenaMount dt,
#arenaMount th,
#arenaMount .arena-cell__label,
#arenaMount .arena-table th,
#arenaMount .arena-chart__meta,
#arenaMount .arena-board__source{letter-spacing:0;color:#c9c9d3}
#arenaMount *{letter-spacing:0}
#arenaMount .arena-rows{border:0}
#arenaMount .arena-row{border:0;box-shadow:inset 0 1px 0 var(--tone-1)}
#arenaMount .arena-cell{border:0;box-shadow:inset 0 0 0 2px var(--tone-2)}
#arenaMount .arena-amount__max,
#arenaMount .arena-slip__opt{border:0;box-shadow:inset 0 0 0 1px var(--tone-2)}
#arenaMount .arena-chart__table,
#arenaMount .arena-board__subhead{border:0}
#arenaMount .arena-visually-hidden{overflow:hidden}
#arenaMount .arena-board__scroll{max-height:330px;overflow:auto}
/* the chart is the point of this panel: give it the width, kill the padding noise */
#arenaMount .arena-chart__caption{margin-top:10px;max-width:70ch}
#arenaMount .arena-side__stats{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px}
#arenaMount p,
#arenaMount small,
#arenaMount .arena-chart__meta,
#arenaMount .arena-chart__foot,
#arenaMount .arena-board__source,
#arenaMount .arena-cell__label{color:#c9c9d3}
.arena__loading{color:var(--ink-dim);margin:0}

/* ── responsive ───────────────────────────────────────────── */
@media (max-width:1160px){
  .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hero__say{grid-column:1 / -1;order:-1}
}
@media (max-width:980px){
  .nav__burger{display:block}
  .nav__menu{display:none;order:9;width:100%;flex-direction:column;gap:0;margin-top:10px}
  .nav__menu.is-open{display:flex}
  .nav__menu a{padding:12px 8px;background:var(--tone-1);margin-bottom:2px}
  .nav__cta{display:none}
  .hero__grid{grid-template-columns:1fr}
  .hero__stats{grid-template-columns:1fr 1fr}
  .compare__head{display:none}
  .compare__row{grid-template-columns:1fr}
  .compare__row span+span{box-shadow:none}
  .compare__row span:first-child{background:var(--tone-2)}
  .rules{grid-template-columns:1fr}
  .launch>div{grid-template-columns:1fr;gap:4px}
  .tl__item{display:flex;flex-direction:column}
  .tl__body{order:1}
  .tl__time{order:2;padding-top:12px}
  .tl__body{flex-direction:column}
  .tl__shot{flex:1 1 auto;max-width:100%;order:0}
  .tl__text{width:100%}
  .foot__grid{grid-template-columns:1fr}
  #arenaMount .arena__sides{display:flex;overflow-x:auto;gap:8px;scroll-snap-type:x mandatory}
  #arenaMount .arena-side{flex:0 0 82%;scroll-snap-align:start}
}
@media (max-width:620px){
  :root{--fs-display:clamp(50px,16vw,88px);--fs-h2:clamp(26px,7.5vw,38px);--fs-lead:18px;--gap:clamp(44px,11vw,72px)}
  body{padding-top:32px;font-size:16px}
  .nav{top:32px}
  .hero__cta .btn{flex:1 1 46%}
  .tape th:nth-child(4),.tape td:nth-child(4){display:none}
  .green{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .fx-noise{display:none}
  .btn,.btn:hover,.btn:active{transition:none;transform:none}
}
@media print{
  .fx-noise,.fx-grid,.tickerbar,.nav,.toast{display:none!important}
  body{background:#fff;color:#000;padding-top:0}
}

/* ═══════════ PUMP.FUN-STYLE PRESSURE ═══════════
   Everything here is transform/opacity only, and every animation dies under
   prefers-reduced-motion. Nothing here changes a number: the numbers on this
   page come from the chain or from a screenshot. */
@keyframes jitter{
  0%,90%,100%{transform:translate(0,0)}
  92%{transform:translate(-2px,1px)}
  94%{transform:translate(2px,-1px)}
  96%{transform:translate(-1px,-1px)}
}
.hero__name{animation:jitter 5s steps(1,end) infinite}
.hero__name--cz{animation-delay:.7s}

@keyframes livePulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.35;transform:scale(.7)}
}
.live-dot{
  display:inline-block;width:11px;height:11px;border-radius:50%;
  background:var(--elon);margin-right:10px;vertical-align:middle;
  animation:livePulse 1.05s ease-in-out infinite;
}
#arenaTitle{display:flex;align-items:center}

@keyframes statBreathe{0%,100%{background:var(--tone-1)}50%{background:#1c1c24}}
.hero__stats li{animation:statBreathe 2.6s ease-in-out infinite}
.hero__stats li:nth-child(2){animation-delay:.55s}
.hero__stats li:nth-child(3){animation-delay:1.1s}
.hero__stats li:nth-child(4){animation-delay:1.65s}

@keyframes shake{
  0%,100%{transform:translate(0,0)}
  30%{transform:translate(-2px,1px) rotate(-.5deg)}
  70%{transform:translate(2px,-1px) rotate(.5deg)}
}
.btn:hover{animation:shake .3s ease-in-out}

.tickerbar__track{animation-duration:30s}
@keyframes flash{0%,86%,100%{opacity:1}90%{opacity:.3}}
.tk--warn{animation:flash 2.2s steps(2) infinite}

.tl__whole{transition:transform .5s ease;transform-origin:top center}
.tl__whole:hover{transform:scale(1.006)}
.tl__fulltitle{margin:clamp(28px,3.6vw,52px) 0 .4em}
.tl__whole{margin-top:14px;width:100%;max-width:1000px;height:auto}
.rules__sub{margin-top:clamp(26px,3.2vw,48px)}
.rules__sub:first-of-type{margin-top:0}
#rules .compare{margin-bottom:clamp(10px,1.6vw,20px)}

@media (prefers-reduced-motion:reduce){
  /* decoration stops; the two information marquees are kept but crawl, because the owner
     asked for the tape to stay alive (and QA flagged the earlier half-stop as inconsistent). */
  .hero__name,.hero__stats li,.live-dot,.tk--warn,.btn:hover,.fx-noise{animation:none}
  .tickerbar__track,.foot__track{animation-duration:120s}
}

/* arena's newer live components (tape / curve meter) inherit the same corrections */
#arenaMount .arena-tape,
#arenaMount .arena-tape__row,
#arenaMount .arena-tape__head{border:0;box-shadow:inset 0 1px 0 var(--tone-2)}
#arenaMount .arena-tape__row span:not([class*="elon"]):not([class*="cz"]),
#arenaMount [class*="curve"] span:not([class*="elon"]):not([class*="cz"]),
#arenaMount .arena-tape__meta{color:#c9c9d3}
#arenaMount .arena-tape__row span{letter-spacing:0}

/* the price panel gets the wider column; the trade panel stays compact */

/* QA round 3: the live-fills tape must be reachable, and the arena head needed min-width:0
   (2px of horizontal overflow at 375px traced back to header.arena__head). */
#arenaMount .arena-tape__rows{max-height:none;overflow-y:auto}
#arenaMount .arena,
#arenaMount .arena__main,
#arenaMount .arena__head,
#arenaMount .arena__sides,
#arenaMount .arena-chart{min-width:0}
#arenaMount .arena__head{flex-wrap:wrap;overflow-wrap:anywhere}
@media (max-width:420px){#arenaMount .arena__head{flex-direction:column}}

/* owner: one CONNECT button is enough — it lives in the top bar. The panel's own wallet
   controls stay in the DOM (the module wires them) but are not shown twice. */
#arenaMount .arena-btn--wallet,
#arenaMount .arena-btn--ghost{display:none!important}
/* keep the network switch, but only when the wallet is on the wrong chain */
#arenaMount .arena-btn--warn:not([hidden]){display:inline-flex}

/* owner read that caption out loud and it was a log line, not a sentence. Hidden until the
   front-end replaces it with one short line. */
#arenaMount .arena-chart__caption{display:none!important}

.arena__offline{
  background:var(--tone-1);padding:clamp(18px,2.4vw,30px);
  font-size:var(--fs-lead);color:var(--ink-dim);max-width:64ch;
}

/* [hidden] loses to any display:grid/flex rule — make the attribute win, always. */
#arenaMount [hidden]{display:none!important}

/* QA round 4, P2: giving the container min-width:0 was not enough — flex children default to
   min-width:auto, so the head could still push 2px past a 375px viewport in ?arena-demo mode.
   Fixed on both levels, plus a clip guard that creates no scroll container. */
#arenaMount .arena__head{flex-wrap:wrap}
#arenaMount .arena__head>*{min-width:0}
#arenaMount .arena__head b,
#arenaMount .arena__head span{overflow-wrap:anywhere;white-space:normal}
.section--arena,
#arenaMount,
#arenaMount .arena{overflow-x:clip}