/* ───────────────────────────────────────────────────────────────
   TWIN Agents

   Subject: autonomous trading agents on pump.fun. Two worlds meet —
   the trading terminal (tape, fills, signed numbers, countdowns) and
   the lab creature (an agent has a name, a colour, a wallet, a life).

   Colour: a cool paper ground so the one dark panel reads as a window
   into the machine. Cobalt is the only accent and is spent on the
   promise line, the live beat and the winning bars. Green and red are
   reserved for signed money, never for decoration.

   Type: Bricolage Grotesque set tight and large for anything that is a
   claim; Geist for everything that is read; Geist Mono only for figures
   and addresses. No tracked-out capitals anywhere — labels are written
   the way a person would say them.

   Layout: one centred column. The hero splits into claim | live tape,
   the builder into form | the card you are making. Everything else is
   full width and quiet.
   ─────────────────────────────────────────────────────────────── */

:root {
  --paper: #eceef3;
  --surface: rgba(252, 253, 255, .78);
  --solid: #f7f8fb;
  --sunken: rgba(11, 13, 19, .035);
  --ink: #0b0d13;
  --ink-2: #383c4a;
  --ink-3: #6c7183;
  --line: rgba(11, 13, 19, .10);
  --line-2: rgba(11, 13, 19, .18);
  --cobalt: #2a35e8;
  --cobalt-lit: #6d78ff;
  --wash: rgba(42, 53, 232, .09);
  --gain: #0a7a52;
  --loss: #c23a20;
  --amber: #96610a;
  --night: #0b0d13;
  --night-2: #171b27;
  --night-ink: #e8eaf2;
  --night-mute: #878ea6;
  --display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { overflow-x: clip; }
body {
  background: var(--paper); color: var(--ink);
  font: 15px/1.55 var(--body); -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
#fluid { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: none; }
.page { position: relative; z-index: 1; padding-inline: max(16px, env(safe-area-inset-left, 0px)); padding-block: 0 48px; }
.wrap { max-width: 1200px; margin: 0 auto; }
a { color: var(--cobalt); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.mono { font-family: var(--mono); }
.num, .mono { font-variant-numeric: tabular-nums; }
.pos { color: var(--gain); }
.neg { color: var(--loss); }
.note { font-size: 13px; color: var(--ink-3); margin: 0; }
.note.neg { color: var(--loss); }

/* ── nav ─────────────────────────────────────────────── */
.nav {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: calc(14px + env(safe-area-inset-top, 0px)) 14px;
}
.nav::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw;
  background: rgba(236, 238, 243, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line); z-index: -1;
}
.mark { display: flex; align-items: center; gap: 10px; font: 800 20px/1 var(--display); letter-spacing: -.02em; color: var(--ink); }
.mark:hover { text-decoration: none; }
.mark span { font-weight: 400; color: var(--ink-3); }
.mark i { position: relative; width: 25px; height: 15px; flex: none; }
.mark i::before, .mark i::after { content: ""; position: absolute; top: 0; width: 15px; height: 15px; border-radius: 50%; }
.mark i::before { left: 0; background: var(--ink); }
.mark i::after { left: 10px; border: 2px solid var(--cobalt); }
.nav nav { display: flex; gap: 20px; align-items: center; }
.nav nav a { color: var(--ink-2); font-size: 14px; }
@media (max-width: 860px) { .nav nav a.opt { display: none; } }

/* ── buttons ─────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 20px; border: 1px solid transparent; border-radius: 11px;
  font: 600 15px var(--body); cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background .18s, border-color .18s, color .18s, transform .12s var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.solid { background: var(--ink); color: #fff; }
.btn.solid:hover { background: var(--cobalt); }
.btn.ghost { background: rgba(255, 255, 255, .6); color: var(--ink); border-color: var(--line-2); }
.btn.ghost:hover { border-color: var(--cobalt); color: var(--cobalt); }
.btn.danger { background: transparent; color: var(--loss); border-color: rgba(194, 58, 32, .35); }
.btn.danger:hover { background: rgba(194, 58, 32, .08); }
.btn.sm { height: 36px; padding: 0 13px; font-size: 13.5px; border-radius: 9px; }
.btn.wide { width: 100%; }
.nav .btn { height: 38px; padding: 0 14px; font-size: 14px; border-radius: 9px; }

/* ── hero ────────────────────────────────────────────── */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(24px, 4vw, 56px); align-items: center;
  padding-block: clamp(36px, 6vw, 84px) clamp(28px, 4vw, 44px);
}
.hero h1 {
  margin: 0; font-family: var(--display); font-weight: 800;
  font-size: clamp(42px, 6.6vw, 86px); line-height: .94; letter-spacing: -.042em;
  font-variation-settings: "opsz" 96; text-wrap: balance;
}
.hero h1 span { color: var(--cobalt); }
.deck { max-width: 54ch; margin: 20px 0 0; color: var(--ink-2); font-size: clamp(15px, 1.4vw, 17px); text-wrap: pretty; }
.deck b { color: var(--ink); font-weight: 600; }
.cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } }

/* the one dark surface on the page: a terminal cut into the paper */
.tape {
  background: var(--night); color: var(--night-ink); border-radius: 16px;
  padding: 14px 4px 10px 16px; min-width: 0;
  box-shadow: 0 30px 60px -34px rgba(11, 13, 19, .7);
  display: grid; grid-template-rows: auto 1fr; gap: 10px;
}
.tape-head { display: flex; align-items: center; gap: 9px; padding-right: 14px; font-size: 13.5px; }
.tape-head b { font-weight: 600; }
.tape-meta { margin-left: auto; font: 12px var(--mono); color: var(--night-mute); }
.beat { width: 7px; height: 7px; border-radius: 50%; background: #34d399; flex: none; box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); animation: beat 2.2s infinite; }
.beat.idle { background: var(--night-mute); animation: none; }
@keyframes beat { 60% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }
.tape-feed {
  list-style: none; margin: 0; padding: 0 12px 2px 0; display: grid; gap: 0;
  height: clamp(240px, 34vh, 320px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: #4b5270 rgba(255, 255, 255, .04);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
}
/* the scrollbar is the cue that there is more below: it has to be visible on the dark surface */
.tape-feed::-webkit-scrollbar { width: 8px; }
.tape-feed::-webkit-scrollbar-track { background: rgba(255, 255, 255, .04); border-radius: 4px; }
.tape-feed::-webkit-scrollbar-thumb { background: #4b5270; border-radius: 4px; }
.tape-feed::-webkit-scrollbar-thumb:hover { background: #6a7396; }
.tape-feed li {
  display: grid; grid-template-columns: 44px 22px minmax(0, 1fr); gap: 10px; align-items: start;
  padding: 7px 0; border-top: 1px solid rgba(232, 234, 242, .07); font-size: 13px;
}
@media (max-width: 520px) { .tape-feed li { grid-template-columns: 38px 19px minmax(0, 1fr); gap: 8px; font-size: 12.5px; } }
.tape-feed li:first-child { border-top: 0; }
.tape-feed time { font: 11.5px var(--mono); color: var(--night-mute); font-variant-numeric: tabular-nums; }
/* the agents' faces: one capsule shape, a different character per agent (web/bean.js) */
.bean { display: block; flex: none; overflow: visible; }
.tape-feed .bean { width: 22px; height: 36px; margin-top: -3px; }
@media (max-width: 520px) { .tape-feed .bean { width: 19px; height: 31px; } }
.tape-new .bean { animation: bean-hop .55s var(--ease) both; transform-origin: 50% 100%; }
@keyframes bean-hop { 0% { transform: translateY(-6px) scale(.9, 1.08); } 55% { transform: translateY(0) scale(1.08, .92); } 100% { transform: none; } }
.tape-feed .who { color: var(--night-ink); font-weight: 500; }
.tape-feed .what { color: #a9b0c6; }
.tape-feed .what b { color: var(--night-ink); font-weight: 500; }
.tape-feed .up b { color: #4ade80; }
.tape-feed .down b { color: #fb7a63; }
.tape-feed .mark-ev .what b { color: var(--cobalt-lit); }
.tape-feed.empty { height: auto; -webkit-mask-image: none; mask-image: none; }
.tape-wait { color: var(--night-mute); grid-template-columns: 1fr !important; padding-bottom: 12px; max-width: 34ch; line-height: 1.5; }
.tape-new { animation: tape-in .4s var(--ease) both; }
@keyframes tape-in { from { opacity: 0; transform: translateY(-5px); } }

/* ── ribbon ──────────────────────────────────────────── */
.ribbon { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line-2); }
.ribbon div { padding: 15px 18px 15px 0; display: grid; gap: 1px; }
.ribbon div + div { border-left: 1px solid var(--line); padding-left: 18px; }
.ribbon b { font: 800 clamp(24px, 3vw, 34px)/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ribbon span { font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 620px) {
  .ribbon { grid-template-columns: 1fr 1fr; }
  .ribbon div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .ribbon div:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ── the path: a real sequence, so it is numbered ────── */
.path { padding-block: clamp(40px, 5vw, 64px) 0; }
.path ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.path li { position: relative; padding: 0 20px 0 0; }
.path li + li { padding-left: 20px; border-left: 1px solid var(--line); }
.path em {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  font: 500 12px var(--mono); font-style: normal; color: var(--ink-3);
  border: 1px solid var(--line-2);
}
.path li.lit em { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.path h3 { margin: 12px 0 5px; font: 800 21px/1.1 var(--display); letter-spacing: -.025em; }
.path p { margin: 0; color: var(--ink-3); font-size: 13.5px; }
@media (max-width: 880px) {
  .path ol { grid-template-columns: 1fr 1fr; gap: 24px 0; }
  .path li:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 460px) {
  .path ol { grid-template-columns: 1fr; }
  .path li { border-left: 0 !important; padding-left: 0 !important; }
}

/* ── sections ────────────────────────────────────────── */
.block { padding-block: clamp(56px, 7vw, 92px) 0; scroll-margin-top: 72px; }
.head { max-width: 62ch; }
.head h2 { margin: 0; font: 800 clamp(32px, 4.4vw, 54px)/.98 var(--display); letter-spacing: -.038em; text-wrap: balance; }
.head p { margin: 12px 0 0; color: var(--ink-2); }
.card {
  border: 1px solid var(--line-2); border-radius: 15px; background: var(--surface);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: clamp(16px, 2vw, 22px); min-width: 0;
}
.empty { color: var(--ink-3); text-align: center; padding: 26px; }

/* ── builder ─────────────────────────────────────────── */
.presets { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 22px; }
.presets span { font-size: 13px; color: var(--ink-3); margin-right: 2px; }
.presets button {
  height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, .62); font: 500 13.5px var(--body); color: var(--ink); cursor: pointer;
  transition: border-color .15s, color .15s;
}
.presets button:hover { border-color: var(--cobalt); color: var(--cobalt); }

.builder { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; margin-top: 18px; align-items: start; }
.builder .col { display: grid; gap: 14px; min-width: 0; }
@media (max-width: 1000px) { .builder { grid-template-columns: 1fr; } }
.panel { display: grid; gap: 15px; }
.panel h3 { margin: 0; font: 800 20px/1.15 var(--display); letter-spacing: -.025em; }
.panel h3 + .note { margin-top: -9px; }

.field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.field > span { font-size: 12.5px; color: var(--ink-3); display: flex; justify-content: space-between; gap: 8px; }
.field output { color: var(--cobalt); font-family: var(--mono); }
input[type=text], input:not([type]), input[type=number], select, textarea {
  width: 100%; min-width: 0; height: 40px; padding: 0 11px;
  border: 1px solid var(--line-2); border-radius: 10px; background: #fff; color: var(--ink);
  font: 14px var(--body);
}
input[type=number] { font-family: var(--mono); font-size: 13.5px; }
textarea { height: auto; padding: 10px 11px; resize: vertical; line-height: 1.5; font: 13px var(--mono); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px var(--wash); }
input[type=range] { height: 40px; padding: 0; border: 0; background: none; accent-color: var(--cobalt); }
.grid2, .grid3, .grid4 { display: grid; gap: 13px; }
.grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .grid3, .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .grid2, .grid3, .grid4 { grid-template-columns: 1fr; } }
.pair { display: flex; gap: 7px; align-items: center; }
.pair span { color: var(--ink-3); font-size: 13px; }
.check { display: inline-flex; gap: 8px; align-items: center; min-height: 40px; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--cobalt); }

.name-face { display: grid; gap: 16px; }
/* the cast: every agent's face is picked here (web/bean.js) */
.cast { display: flex; flex-wrap: wrap; gap: 4px; }
.cast button {
  width: 42px; height: 56px; padding: 5px 0 3px; border: 0; border-radius: 11px; cursor: pointer;
  background: transparent; display: grid; place-items: center;
  transition: background-color .15s, transform .2s var(--ease);
}
.cast button .bean { width: 28px; height: 46px; transition: transform .25s var(--ease); }
.cast button:hover { background: rgba(11, 13, 19, .05); }
.cast button:hover .bean { transform: translateY(-2px) rotate(-4deg); }
.cast button.on { background: rgba(47, 61, 245, .1); box-shadow: inset 0 0 0 2px var(--cobalt); }
.cast button:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button {
  height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2);
  background: #fff; color: var(--ink-2); font: 13.5px var(--body); cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.chips button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.seg { display: flex; height: 40px; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; background: #fff; }
.seg button { flex: 1; border: 0; background: transparent; font: 13.5px var(--body); color: var(--ink-2); cursor: pointer; padding: 0 8px; white-space: nowrap; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--ink); color: #fff; }

.signals { display: grid; gap: 9px; }
.signal {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 11px; align-items: start;
  padding: 13px; border: 1px solid var(--line); border-radius: 12px;
  background: rgba(255, 255, 255, .5); cursor: pointer; transition: border-color .15s, background .15s;
}
.signal:has(input:checked) { border-color: rgba(42, 53, 232, .45); background: var(--wash); }
.signal input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--cobalt); }
.sig-body b { display: block; font-weight: 600; }
.sig-body small { color: var(--ink-3); font-size: 13px; }
.sub { display: grid; gap: 10px; padding: 0 0 4px 31px; }

.preview { position: sticky; top: 76px; display: grid; gap: 10px; }
.pv { display: grid; gap: 13px; }
.pv-top { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 11px; align-items: start; }
.pv-dot { width: 28px; height: 46px; }
.pv-dot .bean { width: 100%; height: 100%; }
.pv-top b { display: block; font: 800 21px/1.15 var(--display); letter-spacing: -.025em; overflow-wrap: anywhere; }
.pv-top small { display: block; color: var(--ink-3); font-size: 13px; margin-top: 3px; }
.pv-list { margin: 0; display: grid; gap: 0; font-size: 13px; }
.pv-list div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); }
.pv-list dt { color: var(--ink-3); flex: none; }
.pv-list dd { margin: 0; text-align: right; font-family: var(--mono); font-size: 12.5px; }
.pv-trial { margin: 0; padding: 9px 12px; border-radius: 10px; background: var(--wash); color: #1c25a8; font-size: 13px; }

/* ── my agents ───────────────────────────────────────── */
.mine { display: grid; gap: 15px; margin-top: 24px; }
.who-bar { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: center; }
.who-bar .addr { font: 13px var(--mono); overflow-wrap: anywhere; }
.who-bar .meta { font-size: 13px; color: var(--ink-3); }
.agent { display: grid; gap: 16px; }
.ag-top { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: center; }
.ag-id { display: flex; gap: 12px; align-items: center; min-width: 0; }
.ag-id > .bean { width: 30px; height: 49px; }
.ag-id b { display: block; font: 800 24px/1.1 var(--display); letter-spacing: -.028em; }
.ag-id small { color: var(--ink-3); font-size: 13px; }
.pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; white-space: nowrap; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.trial { color: var(--amber); } .pill.live { color: var(--gain); }
.pill.trial_failed, .pill.stopped { color: var(--loss); } .pill.paused { color: var(--ink-3); }
.trialbar { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.trialbar i { display: block; height: 100%; background: var(--amber); transition: width .6s var(--ease); }
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.kpis div { padding: 13px 14px 13px 0; display: grid; gap: 2px; }
.kpis div + div { border-left: 1px solid var(--line); padding-left: 14px; }
.kpis span { font-size: 12px; color: var(--ink-3); }
.kpis b { font: 800 23px/1.15 var(--display); letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
@media (max-width: 800px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .kpis div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
.wallet {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 13px 15px; border-radius: 12px; background: rgba(10, 122, 82, .07); border: 1px solid rgba(10, 122, 82, .25);
}
.wallet code { font: 13px var(--mono); overflow-wrap: anywhere; }
.wallet small { display: block; color: var(--ink-2); font-size: 12.5px; margin-top: 3px; }
.ag-cols { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 880px) { .ag-cols { grid-template-columns: 1fr; } }
.sub-h { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); margin-bottom: 8px; }
.sub-h .shimmer {
  background: linear-gradient(90deg, var(--ink-3) 20%, var(--ink) 45%, var(--ink-3) 70%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shim 2.4s linear infinite;
}
@keyframes shim { from { background-position: 140% 0; } to { background-position: -40% 0; } }

/* the journal: a recessed feed, newest first, new lines arrive from above */
.feed {
  list-style: none; margin: 0; padding: 4px 12px; border-radius: 12px;
  background: var(--sunken); border: 1px solid var(--line);
  max-height: 252px; overflow-y: auto; overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
}
.feed li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.feed li:first-child { border-top: 0; }
.feed time { font: 11.5px var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums; padding-top: 2px; }
.feed .win { color: var(--gain); }
.feed .loss, .feed .error, .feed .fail { color: var(--loss); }
.feed .warn { color: var(--loss); opacity: .75; }
.feed .graduated, .feed .payout { color: var(--cobalt); font-weight: 500; }
.feed .fresh { animation: tape-in .45s var(--ease) both; }

.mini { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.mini th { text-align: left; font-weight: 500; font-size: 12px; color: var(--ink-3); padding: 0 8px 7px 0; border-bottom: 1px solid var(--line-2); }
.mini td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mini .r { text-align: right; padding-right: 0; }
.mini th.r { padding-right: 0; }
.acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── leaderboard ─────────────────────────────────────── */
.board-tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 22px 0 14px; }
.board-tools .seg { width: auto; }
.board-tools .seg button { padding: 0 15px; }
.board { padding: 6px 0 4px; }
.board-scroll { overflow-x: auto; }
.board-inner { min-width: 720px; padding: 0 16px; }
.board-head, .brow {
  display: grid; align-items: center; gap: 12px;
  grid-template-columns: 26px minmax(130px, 1.25fr) minmax(130px, 2fr) 72px 78px 56px 50px 74px;
}
.board-head { padding: 8px 0 9px; border-bottom: 1px solid var(--line-2); font-size: 12px; color: var(--ink-3); }
.board-head .c-val, .board-head .c-num { text-align: right; }
.board-head .c-bar { text-align: center; }
.board-rows { position: relative; transition: height .5s var(--ease); }
.brow {
  position: absolute; left: 0; right: 0; height: 52px; padding: 0 2px; cursor: pointer;
  border-bottom: 1px solid var(--line); border-radius: 7px;
  transition: transform .5s var(--ease), opacity .22s, background .15s;
}
.board-rows:hover .brow:not(:hover) { opacity: .4; }
.brow:hover { background: rgba(255, 255, 255, .72); }
.brow .c-rank { font: 12px var(--mono); color: var(--ink-3); }
.bname { display: flex; align-items: center; gap: 9px; min-width: 0; }
.bname .bean { width: 19px; height: 31px; }
.bname b { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bname small { color: var(--ink-3); font: 11.5px var(--mono); flex: none; }
.btrack { position: relative; height: 13px; transition: height .16s; }
.brow:hover .btrack { height: 17px; }
.btrack .zero { position: absolute; top: -6px; bottom: -6px; width: 1px; background: var(--line-2); }
.btrack .fill { position: absolute; top: 0; bottom: 0; border-radius: 3px; transform-origin: left center; }
.btrack .fill.up { background: var(--cobalt); }
.btrack .fill.down { background: var(--loss); }
.brow .c-val, .brow .c-num { text-align: right; font-variant-numeric: tabular-nums; }
.brow .c-val { font-weight: 600; font-size: 14.5px; }
.brow .c-num { font-size: 13px; color: var(--ink-2); font-family: var(--mono); }
.board-axis { display: grid; grid-template-columns: 26px minmax(130px, 1.25fr) minmax(130px, 2fr) 72px 78px 56px 50px 74px; gap: 12px; padding: 6px 2px 2px; }
.board-axis .c-bar { position: relative; height: 15px; }
.board-axis .c-bar span { position: absolute; top: 0; transform: translateX(-50%); font: 11px var(--mono); color: var(--ink-3); }
.board-enter .fill { animation: grow .75s var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes grow { from { transform: scaleX(0); } }
.board-enter .late { animation: fade .5s ease both; animation-delay: calc(var(--d, 0ms) + 200ms); }
@keyframes fade { from { opacity: 0; } }

/* ── rules ───────────────────────────────────────────── */
.faq { margin-top: 22px; max-width: 860px; }
.faq details { border-top: 1px solid var(--line-2); padding: 16px 0; }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--cobalt); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq p { margin: 10px 0 0; color: var(--ink-2); max-width: 72ch; }

footer { margin-top: 84px; border-top: 1px solid var(--line-2); padding-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: var(--ink-3); font-size: 12.5px; }

/* ── overlays ────────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 40; background: rgba(11, 13, 19, .42); display: grid; place-items: center; padding: 16px; }
.sheet { width: min(880px, 100%); max-height: 88vh; overflow: auto; background: var(--solid); position: relative; }
.x { position: absolute; top: 12px; right: 13px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); background: #fff; font-size: 19px; line-height: 1; cursor: pointer; }
.toast {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  z-index: 50; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 11px; font-size: 14px;
  max-width: min(560px, calc(100% - 32px)); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .55);
}
.toast.err { background: var(--loss); }

@media (prefers-reduced-motion: reduce) {
  .tape-new .bean { animation: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .board-rows:hover .brow:not(:hover) { opacity: 1; }
}