/* fonts are served locally (SIL OFL, see LICENSE-*.txt). Archivo is a fixed instance: 900, width 125 */
@font-face { font-family: "Archivo X"; src: url(/assets/archivo-900x.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/assets/inter-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/assets/inter-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/assets/inter-latin-600-normal.woff2) format("woff2"); font-weight: 600 900; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(/assets/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
/* ZEROLINE, THE TOWER system: cold pit black, one Volt accent for the leader, the live mark and
   the main action. Up is sky, down is coral. Token names are kept from v0.10 so pages do not
   change: --pan = background, --yolk = Volt, --long/--short = up/down. */
:root {
  --pan: #090b10;      /* pit: page */
  --pan-2: #12151c;    /* surface: panels */
  --pan-3: #1a1e27;    /* surface 2: inputs, chips */
  --line: #262b36;
  --line-2: #353b48;
  --plate: #eef1f6;    /* text */
  --smoke: #9aa3b2;    /* text muted */
  --ash: #6c7484;      /* tertiary */
  --yolk: #d7ff3f;     /* Volt: leader, live, main action */
  --yolk-ink: #090b10; /* text on Volt */
  --signal: #7c6cff;   /* system notices, promotion and relegation */
  --heat-1: #ff5e57;   /* time running out */
  --long: #74bbff;     /* up */
  --short: #ff5e57;    /* down */
  --rise: #74bbff;
  --fall: #ff5e57;
  --long-bg: rgba(116, 187, 255, .12);
  --short-bg: rgba(255, 94, 87, .12);
  --yolk-bg: rgba(215, 255, 63, .10);
  --display: "Archivo X", "Arial Black", sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --r-s: 6px;
  --r-m: 10px;
  --r-l: 16px;
}
* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
html, body { margin: 0; background: var(--pan); color: var(--plate); font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--yolk); outline-offset: 2px; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.smoke { color: var(--smoke); }
.ash { color: var(--ash); }
.up { color: var(--long); }
.down { color: var(--short); }
[hidden] { display: none !important; }

/* wordmark: the zero rising off the line (top half in text colour, lower half and line in Volt) + ZEROLINE */
.mark { display: inline-flex; align-items: center; gap: .42em; font: 900 20px/1 var(--display); letter-spacing: -.03em; text-decoration: none; color: var(--plate); }
.mark svg { height: 1.2em; width: auto; flex: 0 0 auto; fill: var(--yolk); }
.mark svg .mt { fill: currentColor; }
.mark.big { font-size: clamp(40px, 8vw, 92px); }

/* top nav */
.nav { display: flex; align-items: center; gap: 22px; padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--pan); position: sticky; top: 0; z-index: 20; }
.nav .links { display: flex; gap: 18px; color: var(--smoke); }
.nav .links a { text-decoration: none; }
.nav .links a:hover, .nav .links a.on { color: var(--plate); }
.nav .right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.tag-testnet { font-size: 12px; color: var(--smoke); border: 1px dashed var(--line-2); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }

.btn { text-decoration: none; border: 1px solid var(--line-2); background: var(--pan-3); border-radius: var(--r-s); padding: 8px 14px; font-weight: 600; }
.btn:hover:not(:disabled) { border-color: var(--smoke); }
.btn.yolk { background: var(--yolk); border-color: var(--yolk); color: var(--yolk-ink); }
.btn.yolk:hover:not(:disabled) { filter: brightness(1.06); }
.btn.ghost { background: transparent; }
.btn.small { padding: 5px 10px; font-size: 13px; }
.who { display: inline-flex; align-items: center; gap: 8px; }
.who .nick { font-weight: 600; }
.who .addr { color: var(--smoke); font-size: 12px; }

/* status pills */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.pill.live { background: rgba(215, 255, 63, .12); color: var(--yolk); }
.pill.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--yolk); box-shadow: 0 0 0 3px rgba(215, 255, 63, .22); animation: sizzle 1.6s ease-in-out infinite; }
.pill.upcoming { background: var(--yolk-bg); color: var(--yolk); }
.pill.revealing, .pill.results { background: var(--pan-3); color: var(--smoke); }
@keyframes sizzle { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .pill.live::before { animation: none; } }

/* heat gauge: elapsed share of the contest, the one hot element */
.heat { position: relative; height: 8px; border-radius: 999px; background: var(--pan-3); overflow: hidden; }
.heat i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, var(--yolk) 55%, var(--heat-1)); }
.heat.cold i { background: var(--line-2); }

/* modal + toast */
.scrim { position: fixed; inset: 0; background: rgba(7, 8, 12, .72); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal { width: min(420px, 100%); background: var(--pan-2); border: 1px solid var(--line-2); border-radius: var(--r-l); padding: 22px; }
.modal h2 { font: 800 24px/1.15 var(--display); margin: 0 0 6px; }
.modal p { color: var(--smoke); margin: 0 0 16px; }
.modal .row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.field { display: flex; align-items: center; background: var(--pan-3); border: 1px solid var(--line-2); border-radius: var(--r-s); padding: 0 10px; }
.field:focus-within { border-color: var(--yolk); }
.field input { flex: 1; min-width: 0; background: none; border: 0; outline: none; padding: 9px 0; font-variant-numeric: tabular-nums; }
.field span { color: var(--ash); font-size: 12px; }
.err { color: var(--short); font-size: 13px; min-height: 18px; margin-top: 6px; }
.toasts { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 60; }
.toast { background: var(--pan-3); border: 1px solid var(--line-2); border-left: 3px solid var(--yolk); border-radius: var(--r-s); padding: 10px 14px; min-width: 240px; max-width: 360px; }
.toast.ok { border-left-color: var(--long); }
.toast.bad { border-left-color: var(--short); }
.toast b { display: block; }
.toast small { color: var(--smoke); }

/* players */
a.plink { text-decoration: none; color: inherit; }
a.plink:hover { color: var(--yolk); text-decoration: underline; text-underline-offset: 3px; }
.soc { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line-2); border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 600; color: var(--smoke); text-decoration: none; margin-right: 4px; }
.soc:hover { color: var(--plate); border-color: var(--smoke); }
.soc small { color: var(--ash); font-weight: 500; }
label.l { display: block; color: var(--smoke); font-size: 13px; margin: 0 0 6px; }

/* ---------- live wire: broadcast band ---------- */
.wire { display: flex; align-items: stretch; height: 38px; background: #07080c; border-bottom: 1px solid var(--line); overflow: hidden; font-size: 13px; position: relative; z-index: 21; }
.wire-tag { display: flex; align-items: center; gap: 8px; padding: 0 14px; background: var(--yolk); color: var(--yolk-ink); font: 800 12px/1 var(--display); letter-spacing: .08em; flex: 0 0 auto; white-space: nowrap; }
.wire-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--yolk-ink); animation: sizzle 1.4s ease-in-out infinite; }
.wire.off .wire-tag { background: var(--pan-3); color: var(--smoke); }
.wire-view { flex: 1; overflow: hidden; display: flex; align-items: center; min-width: 0; }
.wire-track { display: flex; width: max-content; animation: wire 60s linear infinite; }
.wire:hover .wire-track, .wire:focus-within .wire-track { animation-play-state: paused; }
.wire-dup { display: flex; }
@keyframes wire { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.wi { display: flex; align-items: center; gap: 9px; padding: 0 20px; border-right: 1px solid var(--line); white-space: nowrap; text-decoration: none; color: var(--plate); height: 38px; }
a.wi:hover span { text-decoration: underline; text-underline-offset: 3px; }
.wi small { color: var(--ash); font-size: 12px; }
.wt { font: 600 10.5px/1 var(--sans); letter-spacing: .07em; padding: 4px 7px; border-radius: 4px; background: var(--pan-3); color: var(--plate); }
.wt.k-lead { background: var(--yolk); color: var(--yolk-ink); }
.wt.k-pass, .wt.k-climb { background: #173f50; color: #bfe8f9; }
.wt.k-prize { background: #2c3a10; color: #e6ff8a; }
.wt.k-open, .wt.k-close { background: #23384a; color: #cfe6f5; }
.wt.k-bell, .wt.k-soon { background: #4f1d1a; color: #ffb3af; }
.wt.k-final, .wt.k-tier { background: #2c3a1d; color: #d6ebb4; }
.wire-quiet { color: var(--ash); padding: 0 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: center; }
.wire-btn { flex: 0 0 auto; min-width: 44px; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--smoke); padding: 0 12px; font-size: 12px; }
.wire-btn:hover { color: var(--plate); }
@media (prefers-reduced-motion: reduce) { .wire-track { animation: none; } .wire-view { overflow-x: auto; } .wire-tag i { animation: none; } }

/* tiers, rank moves, trend lines */
.tier { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--tc, var(--line-2)); color: #090b10; font: 800 11px/1 var(--display); flex: 0 0 auto; }
.mv { display: inline-flex; align-items: center; gap: 3px; font: 600 12px/1 var(--sans); font-variant-numeric: tabular-nums; }
.mv.rise { color: var(--rise); } .mv.fall { color: var(--fall); } .mv.flat { color: var(--ash); } .mv.new { color: var(--yolk); font-size: 10.5px; letter-spacing: .05em; }
.spark.rise { color: var(--rise); } .spark.fall { color: var(--fall); } .spark.flat { color: var(--ash); }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; border-radius: 4px; padding: 1px 6px; border: 1px solid var(--line-2); color: var(--smoke); white-space: nowrap; }
.chip.ver { color: var(--yolk); border-color: rgba(215, 255, 63, .4); }
.chip.pub { color: #9cd8f2; border-color: rgba(116, 187, 255, .35); }
.chip.riv { color: #ff9a95; border-color: rgba(255, 94, 87, .4); }
.chip.you { background: var(--yolk); border-color: var(--yolk); color: var(--yolk-ink); font-weight: 700; }
.kicker { font: 600 11px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ash); }
@keyframes flashRise { from { background: rgba(116, 187, 255, .26); } to { background: transparent; } }
@keyframes flashFall { from { background: rgba(255, 94, 87, .2); } to { background: transparent; } }
.flash-rise { animation: flashRise 2.4s ease-out 1; }
.flash-fall { animation: flashFall 2.4s ease-out 1; }
@media (prefers-reduced-motion: reduce) { .flash-rise, .flash-fall { animation: none; } }

/* ---------- account menu, alerts, mobile drawer, footer links ---------- */
.acct { position: relative; }
.who .dot { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--yolk); color: var(--yolk-ink); font: 700 11px/18px var(--sans); text-align: center; }
.acct-menu { position: fixed; z-index: 90; width: min(360px, calc(100vw - 16px)); max-height: calc(100vh - 90px); overflow-y: auto; background: var(--pan-2); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
.am-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.am-head b { font: 700 17px/1.2 var(--display); }
.am-copy { background: none; border: 1px solid var(--line-2); border-radius: 6px; color: var(--smoke); font-size: 12px; padding: 4px 8px; }
.am-sec { padding: 10px 8px; border-bottom: 1px solid var(--line); }
.am-t { display: flex; justify-content: space-between; align-items: center; padding: 0 8px 6px; }
.am-t a { color: var(--yolk); font-size: 12px; }
.am-empty { color: var(--ash); font-size: 13px; padding: 4px 8px 8px; margin: 0; }
.al { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding: 8px; border-radius: 8px; text-decoration: none; color: var(--smoke); font-size: 13px; line-height: 1.4; }
.al:hover { background: var(--pan-3); color: var(--plate); }
.al i { font-style: normal; color: var(--ash); text-align: center; }
.al small { display: block; color: var(--ash); font-size: 11.5px; }
.al.new { color: var(--plate); }
.al.new i { color: var(--yolk); }
.al.k-claim i { color: var(--yolk); }
.al.urgent { box-shadow: inset 3px 0 0 var(--fall); }
.am-links { display: grid; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.am-links a { padding: 10px 8px; border-radius: 8px; text-decoration: none; color: var(--plate); display: flex; align-items: center; gap: 8px; min-height: 40px; }
.am-links a:hover { background: var(--pan-3); }
.am-foot { display: flex; gap: 8px; padding: 12px 16px; }
.am-foot .btn { flex: 1; min-height: 40px; }
.menu-btn { display: none; background: none; border: 1px solid var(--line-2); border-radius: 8px; color: var(--plate); width: 44px; height: 44px; align-items: center; justify-content: center; flex: 0 0 auto; }
.drawer { position: fixed; z-index: 85; top: 0; right: 0; bottom: 0; width: min(300px, 86vw); background: var(--pan-2); border-left: 1px solid var(--line-2); padding: 70px 16px 20px; box-shadow: -18px 0 40px rgba(0, 0, 0, .5); }
.drawer nav { display: grid; }
.drawer a { padding: 14px 10px; border-bottom: 1px solid var(--line); text-decoration: none; font: 600 16px/1.2 var(--sans); color: var(--plate); }
.drawer a[aria-current="page"] { color: var(--yolk); }
.drawer p { color: var(--ash); font-size: 12px; margin-top: 16px; }
.flinks { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; }
.flinks a { color: var(--smoke); }
@media (max-width: 860px) { .menu-btn { display: inline-flex; } .nav .links { display: none; } .nav .who .addr { display: none; } }
.dclose { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--line-2); background: none; color: var(--plate); font-size: 22px; }

/* share */
.shimg { border-radius: 10px; overflow: hidden; border: 1px solid var(--line-2); aspect-ratio: 1200 / 630; background: var(--pan-3); }
.shimg img { width: 100%; height: auto; display: block; }
.sharebtn { min-height: 34px; }
.alw { display: flex; align-items: center; gap: 6px; }
.alw .al { flex: 1; }

/* v0.13 start chooser: guest (no wallet) or a browser wallet */
.pick { display: flex; flex-direction: column; gap: 10px; }
.pickopt { text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: var(--r-m); border: 1px solid var(--line-2); background: var(--pan-3); }
.pickopt b { font: 700 16px/1.2 var(--sans); }
.pickopt small { color: var(--smoke); font-size: 13px; line-height: 1.4; }
.pickopt.main { background: var(--yolk); border-color: var(--yolk); color: var(--yolk-ink); }
.pickopt.main small { color: rgba(9, 11, 16, .72); }
.pickopt:hover { border-color: var(--smoke); }
.am-guest { display: block; margin-top: 6px; font-size: 12px; color: var(--yolk); }