/* ───────────────────────────────────────────────────────────────────────
   Monsters. A console shell: HUD, tab rail, one screen at a time.

   Two colour rules, enforced everywhere:
     --lime  (#D5FD51) is the interface. Selection, focus, the active tab.
     --up    (#5AC53A) is a price going up. It appears nowhere else, so the
             two greens never get read as the same signal.
   ─────────────────────────────────────────────────────────────────────── */

@font-face { font-family: 'Geist'; src: url('../fonts/Geist-Variable.woff2') format('woff2-variations'), url('../fonts/Geist-Variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'GeistMono'; src: url('../fonts/GeistMono-Variable.woff2') format('woff2-variations'), url('../fonts/GeistMono-Variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  /* Neutral greys on true black. The old palette was tinted green, which read
     as a theme; this lets the lime and the market colours be the only hues. */
  --ink:    #000000;
  --field:  #0A0A0A;
  --raise:  #141414;
  --edge:   #1F1F1F;
  --edge2:  #2E2E2E;
  --bone:   #EDEDED;
  --mute:   #8A8A8A;

  --lime:   #D5FD51;
  --accent: #D5FD51;          /* the docs and shared parts read this name */
  --up:     #5AC53A;
  --down:   #F4553D;
  --warn:   #C9A23A;

  /* Two variable faces, 100 to 900. Weight is a real tool again, so hierarchy
     uses it rather than leaning entirely on scale and colour. */
  --display: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --body: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --mono: 'GeistMono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --gut: clamp(14px, 2.6vw, 26px);
  --hud: 52px;
  --rail: 178px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font: 400 15px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 550; letter-spacing: -0.03em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

canvas.pixel { display: block; width: 100%; height: auto; image-rendering: pixelated; }

/* A canvas has no height until JS writes its width and height attributes, so
   every one of these painted flat and then grew, shoving whatever sat below it
   down the page. Reserving the ratio up front costs nothing and removes the
   shift. These must match the sizes js/site.js constructs them at, which
   contracts/test_canvas_ratios.py checks. */
#heroField  { aspect-ratio: 620 / 200; }
#miniBest,
#miniParty,
#miniGrave  { aspect-ratio: 132 / 76; }
#bookField  { aspect-ratio: 420 / 122; }
#liveField  { aspect-ratio: 560 / 160; }
#folioField { aspect-ratio: 132 / 80; }
#folioHerd,
#perpField  { aspect-ratio: 560 / 150; }
#feMonster,
#feStock,
#feDead     { aspect-ratio: 132 / 76; }
.logo { object-fit: contain; }

::selection { background: var(--lime); color: var(--ink); }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: 2px; }

html { scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--edge2) var(--ink); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--edge2); border: 3px solid var(--ink); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #46543C; }

/* ══ HUD ═══════════════════════════════════════════════════════════════ */

.hud > .chainchip { margin-left: auto; }
.hud-connect { flex: none; padding: 7px 13px; font-size: 12.5px; }
.hud-connect.is-on { color: var(--bone); border-color: var(--edge2); }
.hud-connect.is-wrong { color: var(--warn); border-color: var(--warn); }

.hud {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--hud);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 var(--gut);
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--edge);
}

.hudmark {
  height: 26px;
  width: auto;
  image-rendering: pixelated;
  margin-right: 10px;
}
.footlogo {
  height: 44px;
  width: auto;
  image-rendering: pixelated;
  display: block;
  margin-bottom: 10px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  flex: none;
  color: var(--bone);
  text-decoration: none;
  border-radius: 6px;
  padding: 4px 8px;
  margin-left: -8px;
  transition: background 0.15s, opacity 0.15s;
}
.wordmark:hover { background: var(--field); }
.wordmark:active { opacity: 0.75; }
.wordmark-img {
  display: block;
  height: 27px;
  width: auto;
}
/* the full lockup is 216px wide; on a phone that plus the chip plus the
   connect button does not fit, so the mark carries it alone */
.wordmark-mark { display: none; height: 26px; width: auto; image-rendering: pixelated; }
@media (max-width: 720px) {
  .wordmark-img { display: none; }
  .wordmark-mark { display: block; }
}
.topnav { display: flex; gap: 16px; margin-right: auto; }
.topnav a { font-size: 13px; color: var(--mute); text-decoration: none; }
.topnav a:hover { color: var(--bone); }

.chainchip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  font: 300 11px/1 var(--mono);
  letter-spacing: 0.03em;
  color: var(--mute);
  text-decoration: none;
  padding: 6px 10px;
  border: 1px solid var(--edge);
  border-radius: 3px;
  white-space: nowrap;
}
.chainchip:hover { border-color: var(--edge2); color: var(--bone); }
.chainchip b { color: var(--bone); font-weight: 400; font-variant-numeric: tabular-nums; }

.pip { width: 6px; height: 6px; border-radius: 50%; background: var(--mute); flex: none; }
.pip.is-live { background: var(--up); animation: pulse 2.4s ease-in-out infinite; }
.pip.is-error { background: var(--down); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .pip.is-live { animation: none; } }


/* ══ console shell ═════════════════════════════════════════════════════ */

.console {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  min-height: calc(100vh - var(--hud));
  border-bottom: 1px solid var(--edge);
}

.rail {
  border-right: 1px solid var(--edge);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: sticky;
  top: var(--hud);
  height: calc(100vh - var(--hud));
}

.tab {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  font: 400 13.5px/1 var(--body);
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--mute);
  background: none;
  border: 0;
  border-radius: 5px;
  padding: 9px 10px;
  cursor: pointer;
}
.tab::before {
  content: '';
  width: 5px;
  height: 8px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background: transparent;
  flex: none;
}
.tab:hover { color: var(--bone); background: var(--field); }
.tab.is-on { color: var(--bone); background: var(--raise); font-weight: 500; }
.tab.is-on::before { background: var(--lime); }
.tab u { text-decoration: none; margin-left: auto; font: 400 11.5px/1 var(--mono); color: var(--mute); font-variant-numeric: tabular-nums; }
.tab.is-on u { color: var(--lime); }

.rail-rule { height: 1px; background: var(--edge); margin: 12px 2px; }
.rail-stats { display: grid; gap: 7px; padding: 0 10px; }
.rail-stat { display: flex; justify-content: space-between; gap: 8px; font: 300 11px/1.3 var(--mono); color: var(--mute); }
.rail-stat b { color: var(--bone); font-weight: 500; font-variant-numeric: tabular-nums; }
.rail-foot { margin-top: auto; padding: 0 10px; display: grid; gap: 8px; }
.rail-foot a { font: 300 11.5px/1.3 var(--mono); color: var(--mute); text-decoration: none; letter-spacing: 0.04em; }
.rail-foot a:hover { color: var(--lime); }

.screen { padding: var(--gut); min-width: 0; }

/* The title and its description used to share a baseline-aligned flex row, so
   a description of any length wrapped into a ragged block beside the heading
   and the two never lined up. Title on its own line; anything that belongs
   beside it (the sorter) sits at the far end of that line; description under
   both, on a readable measure. */
.screen-head { margin-bottom: 20px; }
.screen-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.screen-head h2 {
  font-size: clamp(26px, 3.2vw, 32px);
  font-weight: 550;
  letter-spacing: -0.035em;
  line-height: 1.05;
}
.screen-head p {
  font-size: 13.6px;
  line-height: 1.6;
  color: var(--mute);
  margin: 8px 0 0;
  max-width: 68ch;
}

/* ── panels ───────────────────────────────────────────────────────────── */

.panel { border: 1px solid var(--edge); border-radius: 4px; background: var(--field); }
.panel + .panel { margin-top: 12px; }
.panel-cap {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 400 11.5px/1 var(--body);
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--mute);
  padding: 12px 14px;
  border-bottom: 1px solid var(--edge);
}
.panel-cap b { color: var(--bone); font-weight: 450; }
.panel-cap .right { margin-left: auto; }

/* These were style attributes in the markup until the content policy stopped
   allowing them. Keeping style-src at 'self' is worth a utility class. */
.gap-above { margin-top: 12px; }
.ruled { border-top: 1px solid var(--edge); }
.foot-chip { margin-top: 14px; }
.panel-body { padding: 13px; }
.panel-body.flush { padding: 0; line-height: 0; }

.viewport { position: relative; background: #0c110c; line-height: 0; }
/* the panel takes the hit when something crosses its line: one hard beat,
   then a vignette that bleeds away over the length of the fall */
.viewport.is-dying::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(244,85,61,0.10) 20%, rgba(244,85,61,0.55) 100%);
  box-shadow: inset 0 0 0 2px rgba(244,85,61,0.85);
  animation: deathflash 1.2s cubic-bezier(0.2, 0, 0.3, 1) forwards;
}
@keyframes deathflash {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  18%  { opacity: 0.55; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .viewport.is-dying::after { animation: none; opacity: 0.4; }
}
.fieldtags { position: absolute; inset: 0; pointer-events: none; }
.fieldtag { position: absolute; transform: translate(-50%, 0); text-align: center; white-space: nowrap; line-height: 1.15; }
.fieldtag b {
  display: block;
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.06em;
  color: #F2F7EE;
  text-shadow: 0 1px 0 rgba(0,0,0,0.9), 0 0 4px rgba(0,0,0,0.7);
}
.fieldtag i { display: block; font: 300 10px/1.4 var(--mono); font-style: normal; text-shadow: 0 1px 0 rgba(0,0,0,0.9); }
.fieldtag.is-up i { color: var(--up); }
.fieldtag.is-down i { color: var(--down); }
.fieldtag.is-dead b { color: #96A192; }

/* ── stat bars ────────────────────────────────────────────────────────── */

.stats { display: grid; gap: 8px; }
.stat { display: grid; grid-template-columns: 38px 1fr 28px; gap: 10px; align-items: center; }
.stat-k { font: 400 11px/1 var(--body); letter-spacing: -0.005em; color: var(--mute); }
.stat-v { font-weight: 500; font: 400 11.5px/1 var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.segs { display: flex; gap: 2px; }
.segs i { flex: 1; height: 9px; border-radius: 1px; background: var(--edge); }
.segs i.on { background: var(--lime); }

/* ── HP ───────────────────────────────────────────────────────────────── */

.hp { height: 7px; border-radius: 4px; background: var(--edge); overflow: hidden; }
.hp i { display: block; height: 100%; background: var(--up); transition: width 0.18s, background 0.18s; }
.hp i.warn { background: var(--warn); }
.hp i.crit { background: var(--down); }
.bar { height: 5px; border-radius: 3px; background: var(--edge); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--up); }
.bar i.warn { background: var(--warn); }
.bar i.crit { background: var(--down); }

/* ── dex ──────────────────────────────────────────────────────────────── */

.dexwrap { display: grid; grid-template-columns: 1fr 302px; gap: 12px; align-items: start; }
.dexgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 8px; }

.entry {
  position: relative;
  border: 1px solid var(--edge);
  border-radius: 4px;
  background: var(--field);
  padding: 0;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
}
.entry:hover { border-color: var(--edge2); }
.entry.is-on { border-color: var(--lime); background: var(--raise); }
.entry-art { background: #0c110c; line-height: 0; }
.entry-no {
  position: absolute;
  top: 6px;
  left: 7px;
  font: 300 9.5px/1 var(--mono);
  letter-spacing: 0.08em;
  color: rgba(232,237,228,0.55);
  text-shadow: 0 1px 2px rgba(0,0,0,0.85);
}
.entry-body { padding: 8px 9px 9px; display: flex; align-items: center; gap: 7px; }
.entry-body .logo { width: 17px; height: 17px; border-radius: 4px; flex: none; }
.entry-sym { font: 400 12px/1 var(--mono); letter-spacing: 0.04em; margin-right: auto; }
.entry-chg { font: 400 10.5px/1 var(--mono); }
.entry-chg.up { color: var(--up); }
.entry-chg.down { color: var(--down); }

.sorter { display: flex; flex-wrap: wrap; gap: 5px; }
.sorter button {
  font: 400 12.5px/1 var(--body);
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--mute);
  background: transparent;
  border: 1px solid var(--edge);
  border-radius: 6px;
  padding: 7px 11px;
  cursor: pointer;
}
.sorter button:hover { color: var(--bone); border-color: var(--edge2); }
.sorter button.is-on { color: var(--bone); background: var(--raise); border-color: var(--edge2); font-weight: 500; }

.detail { position: sticky; top: calc(var(--hud) + var(--gut)); }
.detail-art { background: #0c110c; line-height: 0; }
.detail-id { display: flex; align-items: center; gap: 10px; padding: 12px 13px 0; }
.detail-id .logo { width: 26px; height: 26px; border-radius: 6px; flex: none; }
.detail-id b { font: 400 15px/1 var(--mono); letter-spacing: 0.04em; display: block; }
.detail-id span { font-size: 11.5px; color: var(--mute); display: block; margin-top: 3px; }
.detail-px { display: flex; align-items: baseline; gap: 9px; padding: 11px 13px 12px; }
.detail-px b { font: 400 21px/1 var(--mono); font-variant-numeric: tabular-nums; }
.detail-px u { text-decoration: none; font: 400 12.5px/1 var(--mono); }
.detail-px u.up { color: var(--up); }
.detail-px u.down { color: var(--down); }

.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--edge); border-top: 1px solid var(--edge); }
.kv > div { background: var(--field); padding: 9px 12px; }
.kv dt { font: 400 11.5px/1 var(--body); letter-spacing: -0.005em; color: var(--mute); }
.kv dd { font-weight: 500; margin: 5px 0 0; font: 400 12.5px/1 var(--mono); font-variant-numeric: tabular-nums; }

/* ── party ────────────────────────────────────────────────────────────── */

.partywrap { display: grid; grid-template-columns: 1fr 286px; gap: 12px; align-items: start; }
.slots { display: grid; gap: 8px; }
.slot {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--edge);
  border-left: 2px solid var(--edge2);
  border-radius: 4px;
  background: var(--field);
  padding: 11px 13px;
}
.slot.is-warn { border-left-color: var(--warn); }
.slot.is-dead { border-left-color: var(--down); background: color-mix(in srgb, var(--down) 6%, var(--field)); }
.slot .logo { width: 26px; height: 26px; border-radius: 6px; }
.slot-main { min-width: 0; }
.slot-top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.slot-top b { font: 500 13.5px/1 var(--mono); letter-spacing: -0.01em; color: var(--bone); }
.slot-tag {
  font: 400 11px/1 var(--body);
  letter-spacing: -0.005em;
  color: var(--mute);
  border: 1px solid var(--edge2);
  border-radius: 2px;
  padding: 3px 5px;
}
.slot-tag.ko { color: var(--down); border-color: color-mix(in srgb, var(--down) 45%, transparent); }
/* the mint action for a held stock, under its numbers */
.slot-mint {
  margin-top: 9px;
  font: 300 11px/1.5 var(--mono);
  color: var(--mute);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.slot-mint a { color: var(--bone); text-decoration: none; border-bottom: 1px solid var(--edge2); }
.slot-mint a:hover { color: var(--lime); border-bottom-color: var(--lime); }

.slot-hp { display: flex; align-items: center; gap: 9px; margin-top: 8px; }
.slot-hp .hp { flex: 1; }
.slot-hp span { font: 300 10.5px/1 var(--mono); color: var(--mute); min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; }
.slot-nums { display: flex; flex-wrap: wrap; gap: 3px 14px; margin-top: 7px; font: 300 11px/1.5 var(--mono); color: var(--mute); }
.slot-nums b { color: var(--bone); font-weight: 400; }
.slot-nums .up { color: var(--up); }
.slot-nums .down { color: var(--down); }

.iconbtn { background: none; border: 1px solid var(--edge2); color: var(--mute); border-radius: 3px; width: 26px; height: 26px; cursor: pointer; font: 400 15px/1 var(--body); }
.iconbtn:hover { color: var(--bone); border-color: var(--mute); }

.totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(106px, 1fr)); gap: 1px; background: var(--edge); border: 1px solid var(--edge); border-radius: 4px; overflow: hidden; margin-bottom: 12px; }
.totals > div { background: var(--field); padding: 10px 12px; }
.totals dt { font: 400 10.5px/1 var(--body); letter-spacing: 0; text-transform: none; color: var(--mute); }
.totals dd { margin: 6px 0 0; font: 400 14px/1 var(--mono); font-variant-numeric: tabular-nums; }
.totals dd.up { color: var(--up); }
.totals dd.down { color: var(--down); }

/* ── forms ────────────────────────────────────────────────────────────── */

.f { display: block; margin-bottom: 12px; }
.f-label, .seg legend { display: block; font: 400 11.5px/1 var(--body); letter-spacing: -0.005em; color: var(--mute); padding: 0; }
.f input[type=number] {
  display: block;
  width: 100%;
  margin-top: 6px;
  font: 400 13px/1 var(--mono);
  color: var(--bone);
  background: var(--raise);
  border: 1px solid var(--edge2);
  border-radius: 3px;
  padding: 9px 10px;
}
.f input[type=range] { display: block; width: 100%; margin-top: 8px; accent-color: var(--lime); }
.f .combo { margin-top: 6px; }
.f output { float: right; font: 400 11px/1 var(--mono); color: var(--lime); }
.f .unit { float: right; font: 300 9.5px/1 var(--mono); letter-spacing: 0.08em; color: var(--mute); }

.seg { border: 0; padding: 0; margin: 0 0 12px; }
.seg-opts { display: flex; gap: 4px; margin-top: 6px; }
.seg-opts label {
  flex: 1;
  position: relative;
  text-align: center;
  font: 400 11.5px/1 var(--body);
  color: var(--mute);
  border: 1px solid var(--edge2);
  border-radius: 3px;
  padding: 8px 4px;
  cursor: pointer;
}
.seg-opts input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.seg-opts label:has(input:checked) { color: var(--ink); background: var(--lime); border-color: var(--lime); font-weight: 400; }
.seg-opts label:has(input:focus-visible) { outline: 2px solid var(--lime); outline-offset: 2px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 400 13px/1 var(--body);
  color: var(--bone);
  text-decoration: none;
  padding: 11px 15px;
  border: 1px solid var(--edge2);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
}
.btn:hover { background: var(--raise); border-color: var(--mute); }
.btn-primary { background: var(--lime); border-color: var(--lime); color: #10160A; font-weight: 400; }
.btn-primary:hover { background: #E2FF74; border-color: #E2FF74; }
.btn.wide { width: 100%; }

.formnote { margin: 10px 0 0; font: 300 11px/1.5 var(--mono); color: var(--mute); }
.formnote b { color: var(--bone); font-weight: 400; }
.formnote a { color: var(--bone); text-decoration: none; border-bottom: 1px solid var(--edge2); }
.formnote a:hover { color: var(--lime); border-bottom-color: var(--lime); }

.shockrow { display: flex; align-items: center; gap: 12px; }
.shockrow input[type=range] { flex: 1; accent-color: var(--lime); }
.shockval { font: 400 14px/1 var(--mono); min-width: 58px; text-align: right; font-variant-numeric: tabular-nums; }
.shockval.up { color: var(--up); }
.shockval.down { color: var(--down); }

.linkbtn {
  background: none;
  border: 0;
  padding: 0;
  font: 450 12.5px/1 var(--body);
  letter-spacing: -0.01em;
  color: var(--lime);
  cursor: pointer;
}
.linkbtn:hover { text-decoration: underline; }

.empty { display: grid; place-items: center; padding: 38px 24px; text-align: center; font-size: 13.3px; color: var(--mute); line-height: 1.55; }

/* ── grave ────────────────────────────────────────────────────────────── */

.graves { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 8px; }
.grave { border: 1px solid var(--edge); border-radius: 4px; background: var(--field); overflow: hidden; filter: saturate(0.15); }
.grave canvas { background: #0b0f0b; }
.grave-body { padding: 9px 11px 11px; }
.grave-body b { font: 400 12px/1 var(--mono); letter-spacing: 0.04em; }
.grave-body p { margin: 6px 0 0; font: 300 10.5px/1.5 var(--mono); color: var(--mute); }
.grave-body .down { color: var(--down); }

/* ── codex ────────────────────────────────────────────────────────────── */

.codexgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 10px; }
.codex-item { border: 1px solid var(--edge); border-radius: 4px; background: var(--field); padding: 13px; }
.codex-item .drv { font: 400 11.5px/1 var(--body); letter-spacing: -0.005em; color: var(--mute); }
.codex-item h4 { font-family: var(--body); font-size: 14px; font-weight: 400; margin: 6px 0 5px; letter-spacing: 0; }
.codex-item p { font-size: 12.5px; line-height: 1.5; color: var(--mute); margin: 0; }

.chainstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)); gap: 1px; background: var(--edge); border: 1px solid var(--edge); border-radius: 4px; overflow: hidden; }
.chainstrip > div { background: var(--field); padding: 11px 13px; }
.chainstrip dt { font: 400 11.5px/1 var(--body); letter-spacing: -0.005em; color: var(--mute); }
.chainstrip dd { margin: 6px 0 0; font: 400 13px/1.2 var(--mono); word-break: break-all; font-variant-numeric: tabular-nums; }
.chainstrip dd a { color: var(--lime); text-decoration: none; }
.chainstrip dd.ok { color: var(--up); }
.chainstrip dd.bad { color: var(--down); }

.prose { max-width: 66ch; }
.prose p { font-size: 13.6px; line-height: 1.65; color: var(--mute); }
.prose strong { color: var(--bone); font-weight: 400; }
.prose a { color: var(--lime); }
.prose ul { padding-left: 18px; margin: 0 0 14px; }
.prose li { font-size: 13.4px; line-height: 1.6; color: var(--mute); margin-bottom: 5px; }
.prose li::marker { color: var(--edge2); }

/* ── tape ─────────────────────────────────────────────────────────────── */

.tape {
  overflow: hidden;
  border-top: 1px solid var(--edge);
  background: var(--field);
  padding: 8px 0;
  white-space: nowrap;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.tape-run { display: inline-block; animation: run 92s linear infinite; font: 400 11.5px/1 var(--mono); }
.tape-run span { padding: 0 13px; color: var(--mute); }
.tape-run b { color: var(--bone); font-weight: 400; }
.tape-run u { text-decoration: none; }
.tape-run u.up { color: var(--up); }
.tape-run u.down { color: var(--down); }
@keyframes run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tape-run { animation: none; } }

/* ── combobox ─────────────────────────────────────────────────────────── */

.combo { position: relative; display: block; text-transform: none; }
.combo-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  font: 400 13px/1.2 var(--body);
  color: var(--bone);
  background: var(--raise);
  border: 1px solid var(--edge2);
  border-radius: 3px;
  padding: 8px 10px;
  cursor: pointer;
  text-transform: none;
}
.combo-btn:hover { border-color: #3F4B37; }
.combo.is-open .combo-btn { border-color: var(--lime); }
.combo-cur { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-right: auto; }
.combo-cur b { font: 400 12.5px/1 var(--mono); letter-spacing: 0.04em; }
.combo-cur i { font: 400 11px/1.2 var(--body); font-style: normal; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: normal; }
.combo-chev { color: var(--mute); flex: none; transition: transform 0.15s; }
.combo.is-open .combo-chev { transform: rotate(180deg); }
.combo-logo { width: 19px; height: 19px; border-radius: 4px; flex: none; object-fit: contain; }
.combo-logo.is-blank { background: var(--edge); }
.combo-panel {
  position: absolute;
  z-index: 60;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  background: var(--raise);
  border: 1px solid var(--edge2);
  border-radius: 4px;
  box-shadow: 0 18px 44px rgba(0,0,0,0.6);
  overflow: hidden;
  text-transform: none;
}
.combo.drops-up .combo-panel { top: auto; bottom: calc(100% + 5px); }
.combo-search { padding: 7px; border-bottom: 1px solid var(--edge); }
.combo-search input {
  width: 100%;
  font: 400 12.5px/1 var(--body);
  color: var(--bone);
  background: var(--field);
  border: 1px solid var(--edge);
  border-radius: 3px;
  padding: 7px 9px;
  text-transform: none;
}
.combo-search input:focus { outline: none; border-color: var(--lime); }
.combo-list {
  max-height: 254px;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 4px;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: var(--edge2) transparent;
}
.combo-list::-webkit-scrollbar { width: 9px; }
.combo-list::-webkit-scrollbar-track { background: transparent; }
.combo-list::-webkit-scrollbar-thumb { background: var(--edge2); border: 3px solid var(--raise); border-radius: 8px; }
.combo-opt { display: flex; align-items: center; gap: 9px; padding: 6px 7px; border-radius: 3px; cursor: pointer; text-transform: none; }
.combo-opt.is-active { background: var(--field); }
.combo-opt.is-on .combo-txt b { color: var(--lime); }
.combo-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin-right: auto; }
.combo-txt b { font: 400 12px/1.2 var(--mono); letter-spacing: 0.04em; }
.combo-txt i { font: 400 11px/1.25 var(--body); font-style: normal; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: normal; }
.combo-tick { color: var(--lime); font-size: 11px; flex: none; }
.combo-empty { margin: 0; padding: 13px 11px; font-size: 12.5px; color: var(--mute); }

/* ══ footer ════════════════════════════════════════════════════════════ */

.sitefoot { background: #060806; }
.foot-main {
  max-width: 1220px;
  margin: 0 auto;
  padding: 40px var(--gut) 26px;
  display: grid;
  grid-template-columns: minmax(210px, 1.4fr) repeat(3, minmax(124px, 1fr));
  gap: 30px;
}
.foot-brand .footmark { font-family: var(--display); font-weight: 400; font-size: 20px; margin-bottom: 9px; }
.foot-brand p { font-size: 12.8px; line-height: 1.6; color: var(--mute); max-width: 34ch; }
.foot-col h4 { margin: 0 0 11px; font: 500 12px/1 var(--body); letter-spacing: -0.01em; color: var(--bone); }
.foot-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.foot-col a, .foot-col span { font-size: 12.8px; color: var(--bone); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.foot-col a:hover { color: var(--lime); }
.foot-col .ext::after { content: '↗'; font-size: 10px; color: var(--mute); }
.foot-legal { border-top: 1px solid var(--edge); padding: 16px var(--gut) 34px; max-width: 1220px; margin: 0 auto; }
.foot-legal p { font-size: 11.8px; line-height: 1.6; color: var(--mute); max-width: 92ch; margin-bottom: 9px; }
.foot-meta { display: flex; flex-wrap: wrap; gap: 5px 16px; font: 300 10.5px/1.5 var(--mono); color: #5A6657; }

/* ── live book ────────────────────────────────────────────────────────── */

.loadrow { display: flex; gap: 8px; flex-wrap: wrap; }
.loadrow input[type=text] {
  flex: 1;
  min-width: 240px;
  font: 400 13px/1 var(--mono);
  color: var(--bone);
  background: var(--raise);
  border: 1px solid var(--edge2);
  border-radius: 3px;
  padding: 9px 10px;
}
.loadrow input[type=text]::placeholder { color: var(--mute); }
.loadrow .btn { flex: none; }
.loadrow .btn[disabled] { opacity: 0.5; cursor: default; }

/* the mint row sits under the creature, so it reads as an action on the
   animal above it rather than as its own section */
.mintrow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--edge);
}
.mintrow .formnote { margin: 0; flex: 1; min-width: 180px; }

.slot .logo.ph {
  display: inline-block;
  background: var(--raise);
  border: 1px solid var(--edge2);
}

.cascade { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.cascade li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--edge);
  font: 400 12px/1 var(--mono);
}
.cascade li:last-child { border-bottom: 0; }
.cascade li .logo { width: 20px; height: 20px; border-radius: 5px; }
.cascade li b { letter-spacing: 0.04em; }
.cascade .casc-side { color: var(--mute); font: 400 11.5px/1 var(--body); letter-spacing: -0.005em; }
.cascade .casc-at { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 400; }
.cascade .casc-at.up { color: var(--up); }
.cascade .casc-at.down { color: var(--down); }
.cascade li.is-gone { opacity: 0.42; }
.cascade li.is-gone b { text-decoration: line-through; }

/* ── the desk ticket ──────────────────────────────────────────────────── */

#liveSource { margin-bottom: 12px; }

.ticket {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 0 14px;
  align-items: start;
}
.ticket .f, .ticket .seg { margin-bottom: 12px; }
.ticket .f input[type=number] { margin-top: 6px; }

.btn.tiny {
  flex: none;
  align-self: center;
  padding: 5px 11px;
  font-size: 12px;
  letter-spacing: -0.01em;
}
.btn[disabled] { opacity: 0.5; cursor: default; }

/* ══ responsive ════════════════════════════════════════════════════════ */

@media (max-width: 1180px) {
  .dexwrap, .partywrap { grid-template-columns: 1fr; }
  .detail { position: static; }
}

@media (max-width: 780px) {
  :root { --rail: 100%; }
  /* The console keeps a full-viewport minimum, and a single-column grid splits
     any leftover height between its rows. On a short screen that stretched the
     tab strip to 243px with the active tab's background filling all of it. The
     rail takes what it needs; the screen takes the rest. */
  .console { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .rail {
    position: sticky;
    top: var(--hud);
    height: auto;
    align-items: center;
    z-index: 30;
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--edge);
    padding: 8px var(--gut);
    background: var(--ink);
    gap: 4px;
  }
  /* the rail scrolls horizontally here; fade the trailing edge so it is
     visible that there is more than the first few tabs */
  .rail {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
    scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  .tab { width: auto; white-space: nowrap; padding: 9px 11px; }
  .tab::before { display: none; }
  .rail-rule, .rail-stats, .rail-foot { display: none; }
  .foot-main { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 460px) {
  /* the block number stays. A chip reading just "Chain" next to a green dot
     says nothing, and the live height is the whole point of it */
  .kv { grid-template-columns: 1fr; }
}

/* ══ landing (the Field screen) ════════════════════════════════════════ */

.screen.landing { padding: 0; }

.hero { position: relative; border-bottom: 1px solid var(--edge); background: #0c110c; }
.hero-stage { position: relative; line-height: 0; cursor: default; }
.hero-stage.is-hot { cursor: pointer; }

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(9,10,9,0.93) 0%, rgba(9,10,9,0.66) 30%, rgba(9,10,9,0) 58%),
    linear-gradient(0deg, rgba(9,10,9,0.5) 0%, rgba(9,10,9,0) 22%),
    linear-gradient(180deg, rgba(9,10,9,0.4) 0%, rgba(9,10,9,0) 16%);
}

.hero-copy {
  position: absolute;
  z-index: 2;
  left: clamp(18px, 4vw, 60px);
  top: 50%;
  transform: translateY(-50%);
  max-width: 560px;
  pointer-events: none;
}
.hero-copy .btn, .hero-copy .linkbtn { pointer-events: auto; }

.hero-copy h1 {
  font-size: clamp(40px, 5.6vw, 78px);
  line-height: 0.94;
  margin: 0 0 16px;
}
.hero-copy h1 em {
  font-style: normal;
  font-weight: 400;
  color: var(--lime);
}
.hero-sub {
  font-size: 15px;
  line-height: 1.62;
  color: #C9D4C4;
  max-width: 46ch;
  margin: 0 0 18px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}
.hero-cta { display: flex; gap: 9px; flex-wrap: wrap; }
.hero-hint {
  margin: 16px 0 0;
  font: 400 12.5px/1.7 var(--body);
  letter-spacing: -0.005em;
  color: var(--mute);
}


@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero-copy > * { animation: rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero-copy > *:nth-child(2) { animation-delay: 0.05s; }
.hero-copy > *:nth-child(3) { animation-delay: 0.1s; }
.hero-copy > *:nth-child(4) { animation-delay: 0.15s; }
.hero-copy > *:nth-child(5) { animation-delay: 0.2s; }
@media (prefers-reduced-motion: reduce) { .hero-copy > * { animation: none; } }

/* focus brackets around the hovered creature */
.hero-bracket { position: absolute; z-index: 3; pointer-events: none; }
.hero-bracket i { position: absolute; width: 11px; height: 11px; border: 2px solid var(--lime); }
.hero-bracket i:nth-child(1) { top: -4px; left: -4px; border-right: 0; border-bottom: 0; }
.hero-bracket i:nth-child(2) { top: -4px; right: -4px; border-left: 0; border-bottom: 0; }
.hero-bracket i:nth-child(3) { bottom: -4px; left: -4px; border-right: 0; border-top: 0; }
.hero-bracket i:nth-child(4) { bottom: -4px; right: -4px; border-left: 0; border-top: 0; }

/* the inspect card that follows the hovered creature */
.hero-card {
  position: absolute;
  z-index: 4;
  transform: translate(-50%, -114%);
  display: flex;
  align-items: center;
  gap: 10px;
  background: color-mix(in srgb, var(--ink) 86%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--edge2);
  border-radius: 4px;
  padding: 8px 11px;
  pointer-events: none;
  white-space: nowrap;
  line-height: 1.2;
}
.hero-card .logo { width: 20px; height: 20px; border-radius: 5px; flex: none; }
.hc-id b { display: block; font: 400 12.5px/1 var(--mono); letter-spacing: 0.04em; }
.hc-id i {
  display: block;
  margin-top: 3px;
  font: 400 10.5px/1.2 var(--body);
  font-style: normal;
  color: var(--mute);
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hc-px b { display: block; font: 400 13px/1 var(--mono); font-variant-numeric: tabular-nums; }
.hc-px u { display: block; margin-top: 3px; text-decoration: none; font: 400 10.5px/1 var(--mono); }
.hc-px u.up { color: var(--up); }
.hc-px u.down { color: var(--down); }
.hc-go {
  font: 450 11.5px/1 var(--body);
  letter-spacing: -0.005em;
  color: var(--lime);
  border-left: 1px solid var(--edge2);
  padding-left: 10px;
}

/* below the fold */
.land { max-width: 1220px; margin: 0 auto; padding: 0 var(--gut) clamp(28px, 4vw, 54px); }

.land-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 1px;
  background: var(--edge);
  border: 1px solid var(--edge);
  border-radius: 4px;
  overflow: hidden;
  margin: clamp(18px, 3vw, 32px) 0;
}
.lstat { background: var(--field); padding: 18px 18px 16px; }
.lstat b {
  display: block;
  /* "#20,812,005" is eleven characters; at a fixed 29px it was clipped mid
     number in a phone-width cell, so let it scale with the viewport */
  font: 400 clamp(19px, 5vw, 29px)/1 var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.lstat span {
  display: block;
  margin-top: 8px;
  font: 400 12px/1.45 var(--body);
  letter-spacing: -0.005em;
  color: var(--mute);
}

.land-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); gap: 12px; }
.land-card {
  /* a button centres its own content block vertically, so cards with shorter
     copy floated down against their neighbours; flex-start pins them level */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  padding: 0;
  color: inherit;
  font: inherit;
  background: var(--field);
  border: 1px solid var(--edge);
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  will-change: transform;
}
.land-card:hover { border-color: var(--lime); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45); }
.land-art { background: #0c110c; line-height: 0; border-bottom: 1px solid var(--edge); }
.land-art.is-dead { filter: saturate(0.15); }
.land-body { padding: 13px 15px 15px; }
.land-body h3 { font-family: var(--body); font-size: 15.5px; font-weight: 400; letter-spacing: 0; margin: 0 0 6px; }
.land-body p { font-size: 12.8px; line-height: 1.55; color: var(--mute); margin: 0; }


@media (max-width: 900px) {
  .hero { display: flex; flex-direction: column; }
  .hero-copy {
    position: static;
    transform: none;
    order: -1;
    max-width: none;
    padding: 22px var(--gut) 16px;
  }
  .hero-scrim { display: none; }
  .hero-sub { text-shadow: none; }
}

/* ── portfolio ────────────────────────────────────────────────────────── */

.foliowrap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; margin-bottom: 12px; }
/* the canvas is 132x80, so at full column width it blew up to a very tall
   frame with the animal marooned in the middle of it */
.folio-stage { background: #0c110c; display: flex; justify-content: center; }
.folio-stage canvas { max-width: 440px; }
#folioStats .stat-v { font-weight: 500; white-space: nowrap; }
#folioSlots .slot { margin-bottom: 8px; }
#folioSlots .slot:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .foliowrap { grid-template-columns: 1fr; }
}

/* ── markets ──────────────────────────────────────────────────────────── */

.mkwrap { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.head-note { font: 400 12px/1 var(--body); color: var(--mute); }

.mk-head, .mk-row {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) 96px 74px 116px 52px 62px;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
}
.mk-head {
  height: 34px;
  font: 400 11px/1 var(--body);
  color: var(--mute);
  border-bottom: 1px solid var(--edge);
}
.mk-head .num, .mk-row .num { text-align: right; font-variant-numeric: tabular-nums; }
.mk-head .chartcol { text-align: center; }

.mk-row {
  width: 100%;
  height: 58px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--edge);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.mk-row:last-child { border-bottom: 0; }
.mk-row:hover { background: var(--raise); }
.mk-row.is-on { background: var(--raise); }
.mk-row .logo { width: 22px; height: 22px; border-radius: 5px; flex: none; }

.mk-id { display: flex; align-items: center; gap: 9px; min-width: 0; }
.mk-id b { font: 500 13px/1 var(--mono); letter-spacing: -0.01em; }
.mk-id i {
  font: 400 12px/1 var(--body);
  font-style: normal;
  color: var(--mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mk-px { font: 500 13px/1 var(--mono); }
.mk-lev { font: 400 12px/1 var(--mono); color: var(--mute); }
.mk-go {
  font: 400 11.5px/1 var(--body);
  color: var(--mute);
  text-align: right;
  opacity: 0;
  transition: opacity 0.12s;
}
.mk-row:hover .mk-go, .mk-row.is-on .mk-go { opacity: 1; color: var(--bone); }
.chartcol { display: flex; justify-content: center; }
.spark { display: block; overflow: visible; }

.mk-quote { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.mk-quote b { font: 500 27px/1 var(--mono); letter-spacing: -0.03em; }
.mk-quote u { text-decoration: none; font: 400 13px/1 var(--mono); }
.mk-quote u.up { color: var(--up); }
.mk-quote u.down { color: var(--down); }

.chart { display: block; overflow: visible; }
.chart-tick { fill: var(--mute); font: 400 10px var(--mono); }
.chart-marker { fill: var(--down); font: 400 9.5px var(--mono); }
.chart-empty { color: var(--mute); font-size: 12.5px; padding: 26px 0; text-align: center; }

@media (max-width: 1180px) { .mkwrap { grid-template-columns: 1fr; } }
@media (max-width: 780px) {
  .mk-head, .mk-row { grid-template-columns: minmax(0, 1.6fr) 88px 68px; }
  .mk-head .chartcol, .mk-row .chartcol, .mk-lev, .mk-go { display: none; }
}
.mk-none { font: 400 11px/1 var(--body); color: #4A4A4A; }

/* ── portfolio, before a wallet is read ─────────────────────────────────
   The screen used to be a single input on an otherwise empty page, which is
   a poor first impression of the part of the site that does the most. */

.folio-empty { margin-top: 16px; }
.fe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}
.fe-card {
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: var(--field);
  overflow: hidden;
}
.fe-art { background: #0C110C; line-height: 0; border-bottom: 1px solid var(--edge); }
.fe-card h3 {
  font-family: var(--body);
  font-size: 15px;
  font-weight: 450;
  letter-spacing: -0.01em;
  margin: 14px 15px 6px;
}
.fe-card p {
  font-size: 12.8px;
  line-height: 1.55;
  color: var(--mute);
  margin: 0 15px 15px;
}
.fe-go { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 14px; }

/* the field the open perps walk in, same treatment as the held herd */
.perp-stage { background: var(--ink); }