/* AI Final Boss. The page is one circuit board: two inks on pure black, every frame and every trace
   drawn on a canvas by js/board.js, every object a line drawing from img/. Nothing here is a card.

   Palette and type are measured, not chosen by eye:
     field  #030303   his reference's ground, 90.5% of its frame
     paper  #F6E6F4   17.2:1 on the field   values
     ink    #C98FC4    8.1:1                labels, body, the line art
     dim    #A873A4    5.6:1                secondary text, separators, disabled controls
     trace  #6B456B                         idle copper. GRAPHICS ONLY, never text
     phos   #2BFF13   15.1:1                live, gain, the belt
     phdim  #3FBF33    8.6:1                terminal second rows
   A loss is NOT a third hue: his picture has exactly two inks, so a loss is printed in paper with a
   minus and only a gain is green. */

@font-face {
  font-family: "Martian Mono";
  src: url("../fonts/MartianMono-latin.woff2") format("woff2");
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-display: swap;
}

:root {
  --field: #030303;
  --paper: #f6e6f4;
  --ink: #c98fc4;
  --dim: #a873a4;
  --trace: #6b456b;
  --phos: #2bff13;
  --phdim: #3fbf33;

  --page: 1120px;
  --gut: 24px;
  --rail: 272px;
  --arena-w: 562px;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --t-label: 14px;   /* caps labels, 0.08em tracking. The floor on a dark neon sheet. */
  --t-body: 15px;
  --t-val: 17px;
  --t-big: 20px;
  --t-head: 24px;
  --t-display: 56px;

  --pad: 20px;       /* every frame keeps its text this far from its line */
  --radius: 14px;    /* his corner radius: 1.6% of the frame width */
}

* { box-sizing: border-box; }

/* the ground rule bleeds past the column with 100vw, which is wider than the content box whenever a
   scrollbar is there: clip on the root, never hidden (hidden turns the body into a scroll container) */
html { background: var(--field); overflow-x: clip; }

body {
  margin: 0;
  background: var(--field);
  color: var(--ink);
  font-family: "Martian Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--t-body);
  font-weight: 400;
  font-stretch: 87.5%;
  font-synthesis: none;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, p, dl, dd, ul, figure { margin: 0; }
ul { list-style: none; padding: 0; }

.page {
  width: 100%;
  max-width: calc(var(--page) + var(--gut) * 2);
  margin: 0 auto;
  padding: 0 var(--gut);
}

/* ── the masthead: one line, the page's own face, carrying no decoration ─────────────── */
.mast {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  height: 56px;
  padding-top: var(--s5);
}
.mast-name {
  font-size: var(--t-body);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--paper);
}
.mast-meta { font-size: var(--t-body); color: var(--dim); }
.mast-meta .tick { color: var(--ink); font-weight: 600; }
.sep { font-style: normal; padding: 0 0.55em; color: var(--dim); }

/* ── sections. Each carries its own canvas, which draws its frames and its traces ────── */
.sec { position: relative; padding: 56px 0 0; }
.sec-arena { padding-top: var(--s4); padding-bottom: var(--s5); }
.sec-arena .board { left: calc(50% - 50vw); width: 100vw; }
.sec-last { padding-bottom: var(--s8); }
.board { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sec-in { position: relative; }

.sec-head { margin-bottom: var(--s5); max-width: 720px; }
.sec-head h2 {
  font-size: var(--t-head);
  font-weight: 600;
  font-stretch: 100%;
  letter-spacing: 0.02em;
  color: var(--paper);
  line-height: 1.1;
}
.sec-note { margin-top: var(--s2); font-size: var(--t-body); color: var(--dim); line-height: 1.65; }

/* ── a module: no border, no fill, no shadow. The canvas draws its outline ───────────── */
.mod { position: relative; padding: var(--pad); min-width: 0; }
.mod-t {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: var(--s3);
}
.mod-note { font-size: var(--t-body); color: var(--dim); margin-top: var(--s2); }
.big { font-size: 28px; font-weight: 500; font-stretch: 100%; color: var(--paper); line-height: 1.15; }
.big.phos { color: var(--phos); }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: stretch; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); align-items: stretch; }
.two > *, .three > * { min-width: 0; }

/* ── screen one: the board ──────────────────────────────────────────────────────────── */
.board-grid {
  position: relative;
  display: grid;
  grid-template-columns: var(--rail) 1fr var(--rail);
  gap: var(--s4);
  align-items: end;
}
/* the rails stop just above the ground rule; the monitor is the one object standing ON it */
.rail { display: grid; grid-template-rows: repeat(3, 1fr); gap: var(--s4); min-width: 0; align-self: stretch; padding-bottom: 22px; }

.seat {
  display: grid;
  grid-template-columns: 1fr 100px;
  grid-template-rows: auto auto;
  gap: 10px var(--s3);
  align-content: center;
  padding: 18px;
}
.seat-txt { grid-column: 1; grid-row: 1; min-width: 0; }

.seat-id { display: flex; align-items: center; gap: var(--s2); min-height: 26px; }
.seat-id span {
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}
.seat-model {
  font-size: var(--t-val);
  font-weight: 500;
  color: var(--paper);
  line-height: 1.2;
  margin-top: 2px;
  overflow-wrap: anywhere;
}
.seat-lab { font-size: var(--t-label); color: var(--dim); margin-top: 2px; }
.seat-figures { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s4); }
.seat-figures b { display: block; font-size: var(--t-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); font-weight: 600; }
.seat-figures span { font-size: var(--t-val); font-weight: 500; color: var(--paper); }
.seat-figures .up { color: var(--phos); }
.seat-mark { grid-column: 2; grid-row: 1; align-self: center; justify-self: center; width: 100px; height: 100px; object-fit: contain; opacity: 0.92; }
.seat[data-has-belt="1"] .seat-model { color: var(--phos); }
.seat-belt { height: 26px; width: auto; display: none; }
.seat[data-has-belt="1"] .seat-belt { display: block; }
.seat[data-status="out"] { opacity: 0.55; }

/* ── the arena: the one big object, with a live terminal on its glass ───────────────── */
.arena { display: flex; align-items: flex-end; justify-content: center; align-self: end; }
.arena-wrap { position: relative; width: 100%; max-width: var(--arena-w); container-type: inline-size; }
.arena-img { display: block; width: 100%; height: auto; }

.glass {
  position: absolute;
  left: var(--arena-screen-l);
  top: var(--arena-screen-t);
  width: var(--arena-screen-w);
  height: var(--arena-screen-h);
  overflow: hidden;
  color: var(--phdim);
}
.glass-in {
  position: absolute;
  inset: 0;
  /* one fixed inset so the terminal selection bar can bleed to the glass edge by exactly this
     much and land its type back on the same left line as the rows above it */
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 1.4%, 10px);
}
.glass-top { display: flex; align-items: center; gap: var(--s3); }
.dots { display: inline-flex; gap: 5px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--phdim); display: block; }
.win-bar .dots i { background: var(--phdim); }
.glass-title {
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--phdim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clock {
  font-size: clamp(26px, 10.4cqw, var(--t-display));
  font-weight: 500;
  font-stretch: 87.5%;
  line-height: 1.08;
  color: var(--phos);
  font-variant-numeric: tabular-nums;
  margin-top: auto;
}
.clock-note { font-size: var(--t-label); color: var(--phdim); line-height: 1.3; }
/* two lines, each one line of type that never wraps: the glass is a fixed rectangle painted on a
   drawn monitor and a third line of holder would push the feed out of it */
.holder { margin-top: auto; display: grid; gap: 2px; min-width: 0; }
.h-line { display: flex; align-items: baseline; gap: var(--s2); min-width: 0; white-space: nowrap; overflow: hidden; }
.h-two { gap: var(--s2); }
.h-two dt:nth-of-type(2) { margin-left: var(--s4); }
.holder dt { font-size: var(--t-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--phdim); flex: 0 0 auto; }
.holder dd { font-size: var(--t-val); color: var(--phos); margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.glass dd, .glass dt { min-width: 0; }
.glass-feed { margin-top: auto; display: grid; gap: 2px; flex: 0 0 auto; }
.glass-feed li {
  font-size: var(--t-label);
  font-stretch: 75%;
  color: var(--phdim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1px var(--s1);
}
.glass-feed li.new { background: var(--phdim); color: var(--field); }

/* ── tables, all of them one grammar ────────────────────────────────────────────────── */
.tbl-head, .feed-list li, .belt-list li, .mir-list li, .out-list li, .lb-list li {
  display: grid;
  gap: var(--s4);
  align-items: baseline;
}
.feed-row { grid-template-columns: 82px 92px 56px 136px minmax(0, 1fr) 92px 44px; }
.belt-row { grid-template-columns: 56px 1fr 96px 86px; }
.mir-row { grid-template-columns: 82px minmax(0, 1fr) 92px 92px 68px 82px 44px; }
.out-row { grid-template-columns: 64px 64px 1fr 108px 1fr; }
.lb-row { grid-template-columns: 40px 1fr 72px 72px; }

.tbl-head {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  padding-bottom: var(--s2);
  margin-bottom: var(--s2);
}
.num { text-align: right; }

.feed-list li, .belt-list li, .mir-list li, .out-list li, .lb-list li {
  font-size: var(--t-body);
  color: var(--paper);
  padding: var(--s2) 0;
}

.feed-list .why { color: var(--dim); font-size: var(--t-body); text-align: left; line-height: 1.5; }
.feed-list .shared { color: var(--phos); }
.t-dim { color: var(--dim); }
.t-up { color: var(--phos); }
.coin { overflow-wrap: anywhere; }
.empty { font-size: var(--t-body); color: var(--dim); padding: var(--s3) 0; }
.rows div { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s2) 0; }
.rows dt { font-size: var(--t-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.rows dd { font-size: var(--t-val); color: var(--paper); margin: 0; }
.bullets li { font-size: var(--t-body); color: var(--ink); padding: var(--s2) 0; line-height: 1.6; }
.belt-img { display: block; margin-top: var(--s4); height: 77px; width: auto; }

.risk { margin-top: var(--s5); font-size: var(--t-label); color: var(--dim); max-width: 760px; }

/* ── the bet keys: six generated keycaps, one per seat ──────────────────────────────── */
.keys { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s5); margin-bottom: var(--s4); }
.key-cap {
  position: relative;
  display: block;
  width: 100%;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: transform 0.08s ease;
}
.key-cap img { display: block; width: 100%; height: auto; }
.key-cap .cap-face {
  position: absolute;
  left: 12%; top: 14%; width: 76%; height: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  padding: 0 var(--s1);
  text-align: center;
}
.key-cap .cap-seat { font-size: var(--t-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.key-cap .cap-n { font-size: var(--t-big); font-weight: 600; color: var(--paper); line-height: 1; }
.key-cap .cap-votes { font-size: var(--t-label); color: var(--dim); }
.key-cap:hover:not(:disabled) { transform: translateY(-2px); }
.key-cap:active:not(:disabled) { transform: translateY(1px); }
.key-cap[aria-pressed="true"] .cap-n { color: var(--phos); }
.key-cap:disabled { cursor: not-allowed; }
.key-cap:disabled img { opacity: 0.74; }
.key-cap:disabled .cap-n { color: var(--dim); }
.bet-state { font-size: var(--t-body); color: var(--dim); margin-bottom: var(--s5); }

/* ── the contract window, the last object on the board ──────────────────────────────── */
.win { position: relative; max-width: 880px; margin: 0 auto; }
.win-bar { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 28px; }
.win-title { font-size: var(--t-label); letter-spacing: 0.08em; color: var(--phdim); }
.win-body { padding: var(--s5) 32px 32px; }
.win-h { font-size: var(--t-head); font-weight: 600; font-stretch: 100%; color: var(--paper); line-height: 1.1; }
.win-line { font-size: var(--t-body); color: var(--dim); margin-top: var(--s2); }
.ca-label { font-size: var(--t-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); margin-top: var(--s5); }
.ca {
  font-size: var(--t-val);
  color: var(--paper);
  overflow-wrap: anywhere;
  margin-top: var(--s2);
  user-select: all;
  min-height: 1.6em;
}
.ca.unset { color: var(--dim); user-select: auto; }
.win-acts { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s4); flex-wrap: wrap; }
.key-btn {
  min-height: 48px;
  padding: 13px 1.3em;
  font: inherit;
  font-size: var(--t-body);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--paper);
  background: none;
  border: 1px solid var(--ink);
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.08s ease, border-color 0.18s ease;
}
.key-btn:hover:not(:disabled) { border-color: var(--paper); }
.key-btn:active:not(:disabled) { transform: translateY(1px); }
.key-btn:disabled { color: var(--dim); border-color: var(--trace); cursor: not-allowed; opacity: 0.74; }
.copy-say { font-size: var(--t-label); color: var(--phos); }

/* complete rows at every width: four across when there is room for four, two and two when there
   is not, and never a track narrower than the longest mark name */
.marks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s6); }
.mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  padding: 13px 16px;
  border: 1px solid var(--trace);
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink);
  font-size: var(--t-label);
  letter-spacing: 0.04em;
  transition: transform 0.08s ease, border-color 0.18s ease;
}
.mark span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mark img { display: block; flex: 0 0 auto; width: 22px; height: 22px; object-fit: contain; }
.mark[data-mark="dexscreener"] img { width: 24px; height: 24px; }
.mark:hover { border-color: var(--ink); color: var(--paper); }
.mark:active { transform: translateY(1px); }
.mark[aria-disabled="true"] { opacity: 0.74; cursor: not-allowed; color: var(--dim); }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--phos);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── widths ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  :root { --rail: 248px; }
}
@media (max-width: 1040px) {
  :root { --rail: 220px; --pad: 18px; }
  .feed-row { grid-template-columns: 74px 84px 52px 112px minmax(0, 1fr) 84px 40px; }
  .mir-row { grid-template-columns: 74px minmax(0, 1fr) 84px 84px 60px 74px 40px; }
}
@media (max-width: 920px) {
  .marks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  /* the two rails pour into one grid so the six seats make complete rows, never a half-empty one */
  .board-grid { grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s4); }
  .rail { display: contents; }
  .arena { grid-column: 1 / -1; order: -1; align-self: center; }
  .arena-wrap { max-width: 560px; margin: 0 auto; }
  .three { grid-template-columns: 1fr 1fr; }
  .keys { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  :root { --t-head: 22px; }
  .two, .three { grid-template-columns: 1fr; gap: var(--s4); }
  .feed-row, .mir-row, .out-row { grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s4); }
  .tbl-head.feed-row, .tbl-head.mir-row, .tbl-head.out-row { display: none; }
  .feed-list li, .mir-list li, .out-list li { padding: var(--s3) 0; }
  .feed-list .why { grid-column: 1 / -1; }
  .feed-list li > *, .mir-list li > *, .out-list li > * { text-align: left; }
  .belt-row { grid-template-columns: 40px 1fr 72px 56px; }
}
@media (max-width: 520px) {
  /* the mark and its name no longer sit side by side in half a narrow window: one per row keeps
     the rows complete and the name whole */
  .marks { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  :root { --gut: 16px; --pad: 16px; }
  .board-grid { grid-template-columns: 1fr; }
  .lb-row { grid-template-columns: 26px 1fr 52px 52px; gap: var(--s2); }
  .belt-row { grid-template-columns: 30px 1fr 62px 44px; gap: var(--s2); }
  .tbl-head, .feed-list li, .belt-list li, .mir-list li, .out-list li, .lb-list li { gap: var(--s2); }
  .keys { grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
  .seat { grid-template-columns: 1fr 84px; }
  .seat-mark { width: 84px; height: 84px; }
  .mast { height: auto; flex-direction: column; align-items: flex-start; gap: 2px; padding-bottom: var(--s2); }
  .arena-wrap { max-width: 100%; }

  .win-body { padding: var(--s5) 20px 24px; }
  .win-bar { padding: var(--s3) 20px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ── the glass is a fixed rectangle on a drawn object, so what it carries is decided by how much
   room that rectangle really has. Measured with tools/audit.mjs at every width, never by eye. ── */
@container (max-width: 470px) {
  .glass-feed { display: none; }
  .glass-in { gap: 4px; padding: 10px; }
  .holder-model { display: none; }
}
@container (max-width: 332px) {
  .h-two { display: none; }
}

/* a link inside a reading is the reading's own colour with a rule under it, never the browser blue */
.feed-list a, .mir-list a, .belt-list a, .out-list a, .win-body a:not(.mark) {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--dim);
  text-underline-offset: 3px;
}
.feed-list a:hover, .mir-list a:hover { text-decoration-color: var(--paper); }

/* the terminal's selected row. His picture inverts the whole row edge to edge, so the lead-in is
   small on purpose and the type stays on the same left line as the rows above it. */
.glass-feed li { padding: 8px 16px; margin: 0 -16px; }

/* the record module: the trophy is the point of it, so it carries the belt at a readable size and
   the module's own content is spread over its full height instead of hanging at the top */
#belt .two > :first-child { display: flex; flex-direction: column; }
#belt .belt-img { height: auto; width: min(240px, 100%); margin: auto auto 0; }