/* burn.css: the cigarette that is also the scroll meter.
   A cigarette lies along the bottom edge of the header. The ember travels from the
   tip toward the filter as you scroll, so how far down the page you are is how much
   of the cigarette is left. --p is 0..1 and is the only thing burn.js writes.
   Decorative only (aria-hidden, pointer-events none). */

.top > * { z-index: 1; }              /* nav paints above the smoke, smoke above the bar */

.burn {
  --p: 0;
  --f: clamp(54px, 7vw, 108px);       /* the filter */
  position: absolute; left: 0; right: 0; bottom: -5px; height: 11px;
  z-index: 0; pointer-events: none;
}

/* everything that moves with the burn lives in the track (tip → filter) */
.burn-track { position: absolute; inset: 0 var(--f) 0 0; }

.burn-ash {
  position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p) * 100%);
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.34) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #a9aaa2 0%, #74766f 55%, #4a4c47 100%);
  border-radius: 5px 0 0 5px;
  opacity: .92;
}
.burn-paper {
  position: absolute; left: calc(var(--p) * 100%); right: 0; top: 0; bottom: 0;
  background: linear-gradient(180deg, #f6eed8 0%, #e2d8bd 52%, #b7ac91 100%);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.28);
}
/* the char line where paper turns to ash */
.burn-paper::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(90deg, #1a0f08, rgba(120,52,14,.9) 55%, transparent);
}

.burn-filter {
  position: absolute; right: 0; top: 0; bottom: 0; width: var(--f);
  background:
    radial-gradient(circle at 30% 45%, rgba(90,52,14,.5) 0 1px, transparent 1.5px) 0 0 / 6px 5px,
    linear-gradient(180deg, #e0a552 0%, #c48a3a 52%, #8a5c22 100%);
  border-radius: 0 5px 5px 0;
  border-left: 2px solid #f0d9a2;      /* the gold band where paper meets filter */
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.35);
}

.burn-ember {
  position: absolute; left: calc(var(--p) * 100%); top: 50%;
  width: 11px; height: 17px; margin: -8.5px 0 0 -6px; border-radius: 50%;
  background: radial-gradient(circle, #fff1c2 0 16%, #ffab35 36%, #e4501c 62%, rgba(228,80,28,0) 74%);
  box-shadow: 0 0 9px 3px rgba(255,138,44,.72), 0 0 26px 9px rgba(255,92,24,.30);
  animation: burn-glow 1.15s steps(1) infinite;
}
@keyframes burn-glow {
  0%   { opacity: 1;   transform: scale(1); }
  30%  { opacity: .86; transform: scale(.94); }
  55%  { opacity: 1;   transform: scale(1.06); }
  80%  { opacity: .92; transform: scale(.98); }
}

/* smoke: three slow wisps that rise from the ember, behind the nav */
.burn-smoke {
  position: absolute; left: calc(var(--p) * 100%); bottom: 5px;
  width: 20px; height: 20px; margin-left: -10px; border-radius: 50%;
  background: radial-gradient(circle, rgba(214,222,204,.30) 0%, rgba(214,222,204,0) 68%);
  opacity: 0; animation: burn-wisp 5.2s ease-out infinite;
}
.burn-smoke.b { animation-delay: 1.75s; width: 26px; height: 26px; margin-left: -13px; }
.burn-smoke.c { animation-delay: 3.4s;  width: 16px; height: 16px; margin-left: -8px; }
@keyframes burn-wisp {
  0%   { opacity: 0;   transform: translate(0, 0) scale(.5); }
  14%  { opacity: 1; }
  100% { opacity: 0;   transform: translate(16px, -58px) scale(2.3); }
}

/* the end of the page is the end of the cigarette: the ember goes out, the smoke stops */
.burn.is-out .burn-ember { animation: none; opacity: .5; box-shadow: 0 0 6px 2px rgba(120,40,16,.55); }
.burn.is-out .burn-smoke { animation: none; opacity: 0; }

@media (max-width: 720px) {
  .burn { height: 8px; bottom: -3px; --f: 46px; }
  .burn-smoke { bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .burn-ember { animation: none; }
  .burn-smoke { animation: none; opacity: 0; }
}

/* ── the attract-mode marquee above every footer ──────────────────────────
   A dot-matrix LED strip like the one over an arcade cabinet. Decorative
   (aria-hidden). Pixelify is allowed here because this is sign texture, not
   reading text: short phrases at 22px. Reduced motion: it stops and centres. */
.attract {
  position: relative; overflow: hidden; margin: 72px 0 0; padding: 14px 0;
  background: #050605; border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(240,232,208,.16), inset 0 0 26px rgba(0,0,0,.95), 0 14px 30px -18px rgba(0,0,0,.9);
}
.attract::after {                                   /* the LED matrix gaps */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgba(0,0,0,.55) 1px, transparent 1px) 0 0 / 100% 4px,
    linear-gradient(90deg, rgba(0,0,0,.55) 1px, transparent 1px) 0 0 / 4px 100%;
}
.attract-track { display: flex; width: max-content; animation: attract 80s linear infinite; }
.attract-track span {
  font: 600 22px/1 var(--pix, "Pixelify Sans", monospace); color: var(--amber, #f2a93b);
  text-transform: uppercase; letter-spacing: .08em; white-space: nowrap;
  padding: 0 26px; text-shadow: 0 0 9px rgba(242,169,59,.5);
}
.attract-track span::after {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 52px;
  background: var(--bill-text, #78a355); vertical-align: middle; transform: rotate(45deg);
}
@keyframes attract { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .attract-track { animation: none; width: auto; justify-content: center; flex-wrap: wrap; row-gap: 8px; }
  .attract-track span:nth-child(n+8) { display: none; }
  .attract-track span:nth-child(7)::after { display: none; }
}

/* ── phone header: the wordmark stays on one line ─────────────────────────
   At 360px "the last $20" wrapped to two lines beside the MENU key. It fits
   on one line with slightly tighter type and gaps, down to 320px. */
@media (max-width: 720px) {
  .brand-name { white-space: nowrap; }
  .brand { flex-shrink: 0; }
}
@media (max-width: 400px) {
  .top { gap: 8px; padding-inline: 12px; }
  .brand { gap: 9px; }
  .brand-name { font-size: 17px; }
  .menu-btn { padding: 0 12px; letter-spacing: .04em; }
}

/* ── step panels: the steps become a row of instruction cards ────────────────
   Measured at 1440: a ~520px column of steps sat in a 1180px panel, so 55% of it was empty, and the
   same striped-header panel repeated on all five pages. Capping the panel at 860px (round 7, first try)
   fixed the emptiness but left a hole beside it and a 1180/860/1180 width jog. Now the panel stays full
   width and the steps sit side by side, like the printed steps on an arcade cabinet: four steps as 2x2,
   three steps as one row. Phones and tablets keep the single column. Browsers without :has() keep it too. */
@media (min-width: 1000px) {
  .cab > ol.steps:has(> li:nth-child(4)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 64px); }
  .cab > ol.steps:has(> li:nth-child(3):last-child) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); }
  .cab > ol.steps > li { min-width: 0; }
  .cab > ol.steps p { max-width: none; }
}

/* ── the live board's trades cell ─────────────────────────────────────────
   "32 (6 buy / 26 sell)" wrapped mid-phrase into three ragged lines in a
   114px phone cell, and MARKET CAP / 24H VOLUME wrapped their labels. The count
   now sits on its own line with "6 buy" and "26 sell" under it, each short
   enough to fit down to 320px, and the labels are tracked a little tighter on phones. */
.board-grid dd .tx-split { display: block; font-size: 15px; line-height: 1.35; color: var(--smoke, #c3cdbb); font-weight: 700; }
@media (max-width: 520px) {
  .board-grid > div { padding: 13px 10px; }
  .board-grid dt { font-size: 14px; letter-spacing: .04em; }
}

/* -- desktop board: the trades cell is two lines -----------------------------
   The count on its own line, then the split kept together as one unit. On phones (the cell is only 114px
   wide) the two halves stack, because that unit does not fit. */
.board-grid dd .tx-count { display: block; }
@media (min-width: 620px) {
  .board-grid dd .tx-split { display: inline; white-space: nowrap; }
  .board-grid dd .tx-split + .tx-split::before { content: "  \00b7  "; white-space: pre; }
}