/* ==========================================================================
   ASSET — Stonk Brain · the floor
   ==========================================================================

   Loaded by index.html after style.css: the floor on top of the page and
   the live panels under it (the desk, the calls, the receipts).

   One house rule is deliberately bent HERE and nowhere else: the
   five-infinite-animation budget. The floor is a trading floor; the motion
   IS the point. Everything that moves animates transform or opacity only,
   the whole stage pauses through .is-offscreen the moment it leaves the
   viewport, and prefers-reduced-motion switches every loop off at the
   bottom of this file. The floor declares its own ink and line colours
   locally so it reads as a wall of screens rather than a panel.

   Everything else holds: 1px borders, no box-shadow on a card, tabular
   figures on every number, --mint for anything interactive.
   ========================================================================== */

/* ==================== THE FLOOR ==================== */

.floor {
  --f-ink: #EAF1F5;
  --f-mid: #B7C6CE;
  --f-dim: #8095A0;
  --f-line: rgba(164, 197, 207, .16);
  --f-line-strong: rgba(164, 197, 207, .3);
  --f-panel: rgba(9, 17, 22, .72);
  --f-mint: #86EFAC;
  --f-up: #22C55E;
  --f-down: #F87171;
  --f-blue: #A4C5CF;
  --f-amber: #FACC15;
  --f-ember: #F7A76C;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  contain: paint;
  background: var(--stonk-bg);
  color: var(--f-mid);
  padding-block: 40px 56px;
  border-bottom: 1px solid var(--line);
}

/* The scrim. The scenery is busy by design, so the middle of the stage gets
   a vignette to sit in — the same job the home hero's radial does for its
   copy column. It sits under .floor-in, so it dims the wall and never the
   head or the figures. */
.floor::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(ellipse 72% 64% at 50% 46%,
    rgba(11, 17, 22, .95) 10%,
    rgba(11, 17, 22, .66) 44%,
    rgba(11, 17, 22, 0) 78%);
}

/* the quote-board grid, same trick the home hero uses */
.floor-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(164, 197, 207, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(164, 197, 207, .07) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ---------- the wall of screens ---------- */

.floor-wall {
  position: absolute;
  inset: -10px;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  grid-auto-rows: 74px;
  gap: 8px;
  padding: 8px;
  pointer-events: none;
  opacity: .4;
  -webkit-mask-image: radial-gradient(ellipse 42% 58% at 50% 50%, transparent 30%, #000 78%);
          mask-image: radial-gradient(ellipse 42% 58% at 50% 50%, transparent 30%, #000 78%);
}
.screen {
  position: relative;
  border: 1px solid var(--f-line);
  border-radius: 6px;
  background: rgba(255, 255, 255, .012);
  overflow: hidden;
}
.screen svg { width: 100%; height: 100%; display: block; }
.screen-k {
  position: absolute;
  top: 4px; left: 6px;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .1em;
  color: var(--f-dim);
  opacity: .7;
}
.screen .s-line { fill: none; stroke: var(--f-blue); stroke-width: 1.4; stroke-linejoin: round; opacity: .75; }
.screen .s-fill { fill: rgba(164, 197, 207, .09); }
.screen .s-bar { fill: var(--f-blue); opacity: .45; }
.screen.is-hot .s-line { stroke: var(--f-mint); }
.screen.is-hot .s-bar { fill: var(--f-mint); }
.screen.is-cold .s-line { stroke: var(--f-down); opacity: .6; }
.screen.is-cold .s-bar { fill: var(--f-down); opacity: .38; }
.screen.is-flash { animation: screen-flash 6.5s ease-in-out infinite; }
.screen.is-flash-2 { animation-duration: 8.5s; animation-delay: -3s; }
.screen.is-flash-3 { animation-duration: 5.5s; animation-delay: -1.6s; }
@keyframes screen-flash {
  0%, 92%, 100% { opacity: 1; }
  94% { opacity: .35; }
  96% { opacity: 1; }
}

/* ---------- the data galaxy ----------
   Solana and Hyperliquid, two spiral arms of particles winding into the
   head (stonk-brain.js draws it). It sits over the scrim so the streams
   visibly reach him, and under the copy, the HUD and the head. */

.floor-galaxy {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------- the vertical quote columns ---------- */

.floor-cols {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  opacity: .78;
}
.qcol {
  position: absolute;
  top: 0;
  width: 104px;
  list-style: none;
  animation: qcol-run 26s linear infinite;
}
/* the left rail runs up, the right rail runs down */
.qcol.is-down { animation-direction: reverse; }
#qcolA { left: 10px; }
#qcolD { right: 10px; }
@keyframes qcol-run {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
.qrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 8px;
  border-bottom: 1px solid var(--f-line);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--f-dim);
  white-space: nowrap;
}
.qrow b { color: var(--f-mid); font-weight: 600; }
.qrow i { font-style: normal; opacity: .8; }
.qrow.is-up i { color: var(--f-up); }
.qrow.is-down i { color: var(--f-down); }

/* none at phone width */
@media (max-width: 860px) { .floor-cols { display: none; } }

/* ---------- the copy ---------- */

.floor-in { position: relative; z-index: 6; }

.floor-head { max-width: 760px; margin: 0 auto 30px; text-align: center; }

/* the lockup: this page is Stonk Brain's own, and Stonk Brain is ASSET's —
   the same two-mark pairing the home page draws with STONK and $ASS */
.floor-brand {
  margin-bottom: 16px;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1;
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  color: var(--f-ink);
}
.floor-brand em { font-style: normal; color: var(--cheeks); }

.floor-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--f-mint);
  border: 1px solid var(--f-line-strong);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  background: var(--f-panel);
}
.live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--f-mint);
  animation: dot-blink 2s ease-in-out infinite;
}
@keyframes dot-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.floor-h1 {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .94;
  font-size: clamp(2.2rem, 6vw, 4rem);
  color: var(--f-ink);
}
.floor-h1 em { font-style: normal; color: var(--cheeks); }
.floor-sub {
  margin: 14px auto 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--f-mid);
}

/* the Frontier Traders line under the intro (2026-09-25) */
.floor-news {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 10px;
  margin-top: 16px;
  padding: 7px 14px 7px 7px;
  border: 1px solid var(--f-line-strong);
  border-radius: 999px;
  background: var(--f-panel);
  color: var(--f-ink);
  font-size: 13px;
  line-height: 1.4;
  text-decoration: none;
}
.floor-news:hover, .floor-news:focus-visible { border-color: var(--f-mint); }
.floor-news b { color: var(--f-mint); font-weight: 700; }
.floor-news-k {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--f-mint);
  color: #052E16;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
@media (max-width: 560px) {
  .floor-news { border-radius: 14px; padding: 8px 12px; }
}

/* ---------- the stage: HUD · head · HUD ---------- */

.floor-stage {
  margin-top: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 372px) minmax(0, 1fr);
  gap: 26px;
  align-items: center;
}
.hud-col { display: flex; flex-direction: column; gap: 12px; }

.hud {
  border: 1px solid var(--f-line-strong);
  border-radius: var(--r);
  background: var(--f-panel);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  padding: 14px 16px;
}
.hud-k {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--f-dim);
}
.hud-v {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  line-height: 1;
  color: var(--f-ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.hud-v.is-up { color: var(--f-up); }
.hud-v.is-down { color: var(--f-down); }
.hud-sub { margin-top: 6px; font-size: 11px; line-height: 1.45; color: var(--f-dim); }
.hud-spark { width: 100%; height: 34px; margin-top: 8px; display: block; }
.hud-spark .k-line { fill: none; stroke: var(--f-mint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hud-spark .k-fill { fill: rgba(134, 239, 172, .14); }

/* ---------- the head ---------- */

.man {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.man-aura {
  position: absolute;
  left: 50%; top: 46%;
  width: 118%; height: 84%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(134, 239, 172, .22), rgba(63, 115, 133, .16) 42%, transparent 70%);
  animation: aura-pulse 5.5s ease-in-out infinite;
}
@keyframes aura-pulse {
  0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.07); }
}

.man-frame {
  position: relative;
  width: min(340px, 74vw);
  z-index: 2;
}
.man-img {
  width: 100%;
  height: auto;
  display: block;
  /* the render ships a light key light; on the dark floor it needs a touch
     more contrast or the jaw disappears into the background */
  filter: contrast(1.04) saturate(.96);
  /* the render ends on a flat neck cut; fade it into the floor */
  -webkit-mask-image: linear-gradient(180deg, #000 84%, transparent 99%);
          mask-image: linear-gradient(180deg, #000 84%, transparent 99%);
}

/* a coin's own logo, and its initials in a disc when the logo will not load */
.coin {
  display: inline-block;
  width: 1.45em;
  height: 1.45em;
  margin-right: .3em;
  vertical-align: -.35em;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}
.coin.is-mono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0B1116;
  color: #86EFAC;
  font-family: var(--font-mono);
  font-size: .62em;
  font-weight: 700;
  letter-spacing: 0;
  vertical-align: -.2em;
}

/* Eye overlays. The two coordinates below are measured off the artwork
   itself — the blue pixels sit at 67.3%/29.6% and 93.1%/30.5%. */
.eyeflare, .laser { position: absolute; pointer-events: none; }

.eyeflare {
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 255, 226, .95), rgba(134, 239, 172, .45) 40%, transparent 70%);
  opacity: .5;
  animation: eye-think 3.1s ease-in-out infinite;
  z-index: 3;
}
.eyeflare.is-a { left: 67.3%; top: 29.6%; }
.eyeflare.is-b { left: 93.1%; top: 30.5%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; animation-delay: -.5s; }
@keyframes eye-think {
  0%, 100% { opacity: .35; transform: scale(.9); }
  50%      { opacity: .85; transform: scale(1.15); }
}

/* The lasers. Off at rest, a single burst on a winning close. The beam is
   drawn from the eye outward along the gaze, so it reads as fired rather
   than pasted on. */
.laser {
  height: 7px;
  width: 150vw;
  margin-top: -3.5px;
  transform-origin: 0 50%;
  transform: rotate(6deg) scaleX(0);
  opacity: 0;
  z-index: 4;
  background: linear-gradient(90deg,
    rgba(255, 244, 214, 1) 0%,
    rgba(247, 167, 108, .95) 8%,
    rgba(247, 167, 108, .5) 45%,
    rgba(247, 167, 108, 0) 100%);
  filter: blur(1.5px);
}
.laser.is-a { left: 67.3%; top: 29.6%; }
.laser.is-b { left: 93.1%; top: 30.5%; transform: rotate(4deg) scaleX(0); }

.man.is-firing .laser.is-a { animation: laser-a 2.8s ease-out 1; }
.man.is-firing .laser.is-b { animation: laser-b 2.8s ease-out 1; }
.man.is-firing .eyeflare {
  animation: none;
  opacity: 1;
  background: radial-gradient(circle, #FFF6E5, var(--f-ember) 45%, transparent 72%);
  transform: scale(1.8);
}
.man.is-firing .man-aura {
  background: radial-gradient(circle at 50% 50%, rgba(247, 167, 108, .34), rgba(194, 65, 12, .18) 45%, transparent 72%);
}
@keyframes laser-a {
  0%   { opacity: 0; transform: rotate(6deg) scaleX(0); }
  10%  { opacity: 1; transform: rotate(6deg) scaleX(1); }
  78%  { opacity: 1; transform: rotate(6deg) scaleX(1); }
  100% { opacity: 0; transform: rotate(6deg) scaleX(1); }
}
@keyframes laser-b {
  0%   { opacity: 0; transform: rotate(4deg) scaleX(0); }
  10%  { opacity: 1; transform: rotate(4deg) scaleX(1); }
  78%  { opacity: 1; transform: rotate(4deg) scaleX(1); }
  100% { opacity: 0; transform: rotate(4deg) scaleX(1); }
}

/* The think ticker, under the neck: what it just did, one line at a time,
   each led by its coin's logo. */
.man-think {
  position: relative;
  z-index: 3;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-height: 3.2em;
  max-width: min(340px, 90vw);
  text-align: center;
  transition: opacity .35s ease;
}
.man-think.is-out { opacity: 0; }
.think-line {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--f-ink);
  overflow-wrap: anywhere;
}
.think-line .up { color: var(--f-up); }
.think-line .down { color: var(--f-down); }
.think-when {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--f-dim);
}

@media (max-width: 980px) {
  .floor-stage { grid-template-columns: minmax(0, 1fr); }
  .hud-col { flex-direction: row; flex-wrap: wrap; }
  .hud-col .hud { flex: 1 1 180px; }
  .man { order: -1; }
}

/* ==================== THE DECK ====================
   The live panels under the floor. A dashboard is read, not scrolled
   through, so its sections sit tighter than the marketing ones below. */

.deck .sec { padding-block: 44px; }
.deck .sec + .sec,
.deck + .sec { border-top: 1px solid var(--line); }
.deck .sec-head { margin-bottom: 20px; }

/* ==================== THE TAPES ==================== */

.tape {
  position: relative;
  overflow: hidden;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding-block: 9px;
}
.tape::before, .tape::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 72px;
  z-index: 2;
  pointer-events: none;
}
.tape::before { left: 0; background: linear-gradient(90deg, var(--panel), transparent); }
.tape::after { right: 0; background: linear-gradient(270deg, var(--panel), transparent); }

.tape-track {
  display: flex;
  width: max-content;
  list-style: none;
  animation: tape-run calc(var(--n, 12) * 2.6s) linear infinite;
}
@keyframes tape-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tape:hover .tape-track,
.tape:focus-within .tape-track,
.tape.is-offscreen .tape-track { animation-play-state: paused; }

.tape-track > li { padding-right: 24px; }
.tape-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-mid);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tape-item b { color: var(--ink); font-weight: 600; }
.tape-item .up { color: var(--up-text); }
.tape-item .down { color: var(--down); }
.tape-item.is-idle { color: var(--ink-dim); }
.tape-item .is-head,
.tape-item.is-head {
  color: var(--ink-dim);
  letter-spacing: .12em;
}
.tape-item.is-brand { color: var(--mint); font-weight: 700; letter-spacing: .12em; }
.tape-item::after {
  content: '';
  width: 1px;
  height: 12px;
  margin-left: 17px;
  background: var(--line);
}


/* ==================== THE DESK ====================
   The headline figures, the open positions under them, and one small line
   for what is parked. */

.desk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}
.desk-card { padding: 14px 16px; }
.desk-card .hud-k { color: var(--ink-dim); }
.desk-card .hud-sub { color: var(--ink-dim); }
.desk-v {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.desk-v.is-up { color: var(--up-text); }
.desk-v.is-down { color: var(--down); }

.pos-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.pos-card {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
}
.pos-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pos-sym { font-family: var(--font-display); font-size: 18px; color: var(--ink); }
.pos-tag {
  display: inline-block;
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 2px 8px;
}
.pos-pnl { font-family: var(--font-mono); font-size: 14px; font-variant-numeric: tabular-nums; }
.pos-pnl.is-up { color: var(--up-text); }
.pos-pnl.is-down { color: var(--down); }
.pos-nums { margin-top: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }

/* lent out and held for rewards */
.parked { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.parked-k { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); margin-right: 4px; }
.parked-chip {
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}
.parked-chip b { color: var(--ink-mid); font-weight: 600; }

/* ==================== RECENT CALLS ==================== */

.brain-feed { display: grid; }
.call-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--line);
}
.call-row:last-child { border-bottom: 0; }
.call-when { font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.call-text { font-size: 14px; line-height: 1.45; color: var(--ink-mid); overflow-wrap: anywhere; }
.call-text b { color: var(--ink); font-weight: 700; }
.call-row.is-long .call-text b,
.call-row.is-win .call-text b { color: var(--up-text); }
.call-row.is-short .call-text b,
.call-row.is-loss .call-text b { color: var(--down); }
/* the book's one-sentence reason under a call */
.call-why { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--ink-dim); }

/* ==================== THE RECEIPTS ====================
   Equity, the week, the calendar and the closed trades in one box, one
   pane at a time. Compact until Expand. */

.rx { padding: 16px 18px 18px; }
.rx-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.rx-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.rx-tab,
.rx-expand {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line-ui);
  border-radius: var(--r-sm);
  background: var(--raised);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-dim);
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.rx-tab:hover, .rx-expand:hover { color: var(--ink); }
.rx-tab[aria-selected="true"] { background: var(--mint); border-color: var(--mint); color: var(--on-mint); }
.rx-expand { border-style: dashed; }

@media (max-width: 520px) {
  .rx { padding: 12px; }
  .rx-tab, .rx-expand { min-height: 32px; padding: 0 9px; font-size: 11px; }
}

.rx-scroll { max-height: 250px; overflow: auto; }
.rx.is-expanded .rx-scroll { max-height: none; }

/* ==================== CHARTS ==================== */

.chart-wrap { position: relative; }
.chart-svg { width: 100%; display: block; overflow: visible; touch-action: pan-y; }
#brainEquityChart, #weekChart { height: 170px; }
.rx.is-expanded #brainEquityChart { height: clamp(240px, 34vw, 340px); }
.rx.is-expanded #weekChart { height: clamp(220px, 30vw, 300px); }
.chart-svg .e-line { fill: none; stroke: var(--up); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart-svg .e-line.is-down { stroke: var(--down); }
.chart-svg .e-fill { opacity: .9; }
.chart-svg .e-grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-svg .e-base { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.chart-svg .e-axis {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}
.chart-svg .mk-buy { fill: var(--up-text); }
.chart-svg .mk-sell { fill: var(--down); }
.chart-svg .mk-flow { stroke: var(--amber); stroke-width: 1.5; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.chart-svg .mk-flow-dot { fill: var(--amber); }
.chart-svg .x-hair { stroke: var(--ink-dim); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.chart-svg .x-dot { fill: var(--bg); stroke: var(--mint); stroke-width: 2; }
.chart-svg .w-bar.is-up { fill: rgba(34, 197, 94, .55); }
.chart-svg .w-bar.is-down { fill: rgba(248, 113, 113, .55); }
.chart-svg .w-bar.is-today { stroke: var(--ink-dim); stroke-width: 1; stroke-dasharray: 3 3; }
.chart-svg .w-val { font-family: var(--font-mono); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--panel); stroke-width: 4px; stroke-linejoin: round; }
.chart-svg .w-val.is-up { fill: var(--up-text); }
.chart-svg .w-val.is-down { fill: var(--down); }
.chart-svg .w-val.is-flat { fill: var(--ink-dim); }
.chart-svg .w-eq { fill: none; stroke: var(--mint); stroke-width: 1.5; stroke-dasharray: 5 4; stroke-linejoin: round; opacity: .7; vector-effect: non-scaling-stroke; }
.chart-svg .w-eq-dot { fill: var(--mint); opacity: .8; }

.chart-tip {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 12px));
  padding: 6px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--raised);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.chart-tip[hidden] { display: none; }
.chart-tip .up { color: var(--up-text); }
.chart-tip .down { color: var(--down); }
.chart-tip small { display: block; color: var(--ink-dim); font-size: 10px; }

.chart-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); }
.chart-legend i { font-style: normal; }
.chart-legend .lg-buy { color: var(--up-text); }
.chart-legend .lg-sell { color: var(--down); }
.chart-legend .lg-flow { color: var(--amber); }

.week-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.week-total { font-family: var(--font-display); font-size: clamp(1.3rem, 3vw, 1.7rem); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.week-total.is-up { color: var(--up-text); }
.week-total.is-down { color: var(--down); }


/* ==================== P&L CALENDAR ==================== */

.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cal-month { font-family: var(--font-display); font-size: clamp(1.1rem, 3vw, 1.4rem); color: var(--ink); line-height: 1; }
.cal-month small { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim); }
.cal-month small.is-up { color: var(--up-text); }
.cal-month small.is-down { color: var(--down); }
.cal-nav { display: flex; gap: 6px; }
.cal-btn {
  min-width: 40px;
  min-height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--panel);
  color: var(--ink);
  font-size: 18px;
  cursor: pointer;
}
.cal-btn:hover:not(:disabled) { border-color: var(--mint); }
.cal-btn:disabled { opacity: .35; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-dow { text-align: center; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); padding-bottom: 4px; }
.cal-day {
  position: relative;
  min-height: 64px;
  padding: 6px 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink-dim);
  text-align: left;
  font: inherit;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cal-day.is-blank { visibility: hidden; }
.cal-day.is-future { opacity: .4; }
.cal-day.is-today { border-color: var(--line-ui); }
button.cal-day { cursor: pointer; }
button.cal-day:hover { border-color: var(--mint); }
.cal-d { font-family: var(--font-mono); font-size: 11px; }
.cal-v { font-family: var(--font-mono); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cal-day.is-up { background: rgba(34, 197, 94, calc(.08 + var(--i, 0) * .32)); border-color: rgba(34, 197, 94, .45); }
.cal-day.is-down { background: rgba(248, 113, 113, calc(.08 + var(--i, 0) * .32)); border-color: rgba(248, 113, 113, .45); }
.cal-day.is-up .cal-v { color: var(--up-text); }
.cal-day.is-down .cal-v { color: var(--down); }
.cal-day.is-up .cal-d, .cal-day.is-down .cal-d { color: var(--ink-mid); }
.cal-v .is-short { display: none; }
.cal-cap { margin-top: 12px; }
@media (max-width: 560px) {
  .cal-grid { gap: 4px; }
  .cal-day { min-height: 48px; padding: 4px 5px; }
  .cal-v { font-size: 10px; white-space: nowrap; }
  .cal-v .is-full { display: none; }
  .cal-v .is-short { display: inline; }
}

/* compact until the receipts box is expanded: short figures, short days */
.rx:not(.is-expanded) .cal-grid { gap: 4px; max-width: 620px; }
.rx:not(.is-expanded) .cal-day { min-height: 40px; padding: 4px 6px; }
.rx:not(.is-expanded) .cal-v { font-size: 10px; white-space: nowrap; }
.rx:not(.is-expanded) .cal-v .is-full { display: none; }
.rx:not(.is-expanded) .cal-v .is-short { display: inline; }

.cal-dialog {
  width: min(420px, calc(100vw - 32px));
  /* the reset zeroes every margin, and a modal dialog centres on auto */
  margin: auto;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--raised);
  color: var(--ink-mid);
}
.cal-dialog::backdrop { background: rgba(5, 9, 12, .72); }
.cal-dialog-in { padding: 20px; }
.cal-dialog-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cal-dialog h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; color: var(--ink); line-height: 1.1; }
.cal-verdict { margin-top: 4px; font-size: 13px; color: var(--ink-dim); }
.cal-close { min-width: 36px; min-height: 36px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); cursor: pointer; font-size: 16px; }
.cal-pnl { margin-top: 14px; font-family: var(--font-display); font-size: 2.2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.cal-pnl.is-up { color: var(--up-text); }
.cal-pnl.is-down { color: var(--down); }
.cal-stats { margin: 16px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.cal-stats div { border-top: 1px solid var(--line); padding-top: 8px; }
.cal-stats dt { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }
.cal-stats dd { margin: 4px 0 0; font-family: var(--font-mono); font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cal-stats dd .up { color: var(--up-text); }
.cal-stats dd .down { color: var(--down); }


/* ==================== THE DEGEN REPORT ==================== */

.degen-line { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.degen-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.degen-chip {
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
  padding: 3px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--panel);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mid);
  font-variant-numeric: tabular-nums;
}
.degen-chip b { color: var(--ink); font-weight: 700; }
.degen-chip.is-vibe { border-style: dashed; }

/* ==================== THE CORN CUBE ====================
   A new fill or close arrives on Meme Man's favourite vegetal: a cube of
   corn, three faces drawn in CSS, tumbling in beside a card. */

.corn-stack {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}
.corn-pop {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(340px, calc(100vw - 32px));
  padding: 10px 14px 10px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--raised);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
  pointer-events: auto;
  cursor: pointer;
  animation: corn-in .6s cubic-bezier(.2, 1.4, .4, 1) both;
}
.corn-pop.is-out { animation: corn-out .35s ease-in both; }
@keyframes corn-in { from { opacity: 0; transform: translateY(24px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes corn-out { to { opacity: 0; transform: translateX(40px); } }
.corn-text { min-width: 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.4; color: var(--ink); }
.corn-text b { font-weight: 700; }
.corn-text .up { color: var(--up-text); }
.corn-text .down { color: var(--down); }
.corn-text small { display: block; color: var(--ink-dim); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }

.corn-scene { flex: 0 0 auto; width: 46px; height: 46px; perspective: 260px; }
.corn-cube {
  position: relative;
  width: 30px;
  height: 30px;
  margin: 8px;
  transform-style: preserve-3d;
  transform: rotateX(-24deg) rotateY(38deg);
  animation: corn-tumble .9s cubic-bezier(.3, 1.3, .5, 1) both, corn-spin 9s linear .9s infinite;
}
@keyframes corn-tumble {
  from { transform: rotateX(-200deg) rotateY(-160deg) scale(.4); }
  to   { transform: rotateX(-24deg) rotateY(38deg) scale(1); }
}
@keyframes corn-spin {
  from { transform: rotateX(-24deg) rotateY(38deg); }
  to   { transform: rotateX(-24deg) rotateY(398deg); }
}
.corn-face {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  /* rows of kernels: a highlight on each, dark seams between them */
  background:
    radial-gradient(ellipse 34% 30% at 38% 34%, rgba(255, 250, 214, .95), rgba(255, 250, 214, 0) 70%) 0 0 / 7.5px 6px,
    radial-gradient(ellipse 48% 44% at 50% 50%, #F9D649 55%, #E8B423 78%, #B9820F 100%) 0 0 / 7.5px 6px,
    #B9820F;
  box-shadow: inset 0 0 6px rgba(120, 72, 0, .45);
}
.corn-face.is-front { transform: translateZ(15px); }
.corn-face.is-back { transform: rotateY(180deg) translateZ(15px); }
.corn-face.is-right { transform: rotateY(90deg) translateZ(15px); filter: brightness(.86); }
.corn-face.is-left { transform: rotateY(-90deg) translateZ(15px); filter: brightness(.86); }
.corn-face.is-top {
  transform: rotateX(90deg) translateZ(15px);
  /* the cut end of the cob: pale centre, kernels radiating out */
  background:
    radial-gradient(circle at 50% 50%, #FFF8DC 0 16%, rgba(255, 248, 220, 0) 30%),
    repeating-conic-gradient(from 0deg at 50% 50%, #F4C430 0 10deg, #D99A12 10deg 20deg),
    #F4C430;
  filter: brightness(1.08);
}
.corn-face.is-bottom { transform: rotateX(-90deg) translateZ(15px); filter: brightness(.7); }


/* ==================== CLOSED ==================== */

.brain-trades-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.brain-trades-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 10px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.brain-trades-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-mid);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.brain-trades-table tr:last-child td { border-bottom: 0; }
.brain-trades-table td.is-up { color: var(--up-text); }
.brain-trades-table td.is-down { color: var(--down); }
.brain-trades-table td.sym { color: var(--ink); font-weight: 600; }
.brain-trades-empty { text-align: center; color: var(--ink-dim); padding: 24px 10px; }


/* ==================== PAUSE OFFSCREEN ==================== */

.is-offscreen .screen.is-flash,
.is-offscreen .qcol,
.is-offscreen .man-aura,
.is-offscreen .eyeflare,
.is-offscreen .live-dot { animation-play-state: paused; }

/* ==================== REDUCED MOTION ====================
   The floor stops dead. Everything stays readable: nothing here depends on
   an animation to reach its finished state. */

@media (prefers-reduced-motion: reduce) {
  .screen.is-flash,
  .qcol,
  .man-aura,
  .eyeflare,
  .live-dot,
  .tape-track,
  .man.is-firing .laser { animation: none !important; }
  .laser { display: none; }
  .tape-track { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .qcol { display: none; }
  .man-think { transition: none; }
  .corn-pop, .corn-pop.is-out, .corn-cube { animation: none; }
}

/* ---------- the wallets, under the numbers (2026-09-25) ---------- */
.rx-wallet {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin: 14px 0 0; font-size: 13px; color: var(--ink-dim);
}
.rx-wallet[hidden] { display: none; }
.rx-wallet .w-k { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
.rx-wallet a {
  color: var(--ink); text-decoration: none; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--panel);
}
.rx-wallet a:hover, .rx-wallet a:focus-visible { border-color: var(--mint); }
.rx-wallet a b { color: var(--mint); font-weight: 700; }
.rx-wallet code { font-family: var(--font-mono); font-size: 12px; color: var(--ink-mid); }
.rx-wallet + .rx-ref { margin-top: 10px; }

.test-tag {
  display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--amber); border: 1px solid rgba(250, 204, 21, .45);
  vertical-align: 1px;
}
tr.is-testing td { opacity: .55; }
tr.is-testing td.sym .test-tag { opacity: 1; }
tr.is-testing-head td {
  padding: 14px 10px 6px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--amber);
}
.cal-day.is-testing { background: repeating-linear-gradient(135deg, rgba(250, 204, 21, .06) 0 6px, transparent 6px 12px); border-color: rgba(250, 204, 21, .3); }
.cal-day.is-testing .cal-d { color: var(--ink-dim); }
.chart-svg .e-testing { fill: rgba(250, 204, 21, .06); }
.chart-svg .e-live { stroke: var(--amber); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.chart-svg .e-testing-k, .chart-svg .e-live-k { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; fill: var(--amber); }
.chart-svg .e-live-k { fill: var(--mint); }