/* ---------------------------------------------------------------------------
   Shared board styling. Paired with board.js — both pages import both, so the
   chips cannot drift in size, shape or colour the way they did when each page
   carried its own copy.

   Expects these tokens on :root, defined by the host page:
     --g1..--g7  green ramp, dark to bright
     --neutral   the centre lanes, which are NOT a prize
     --hair --peg --ball --muted --surface
--------------------------------------------------------------------------- */

.stage { position: relative; }
.stage canvas { display: block; width: 100%; height: auto; }

.lanes { display: flex; gap: 2px; padding: 0 10px 10px; }

.ln {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  padding: 7px 1px 8px;
  border-radius: 6px;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
.ln:first-child { border-radius: 9px 6px 6px 9px; }
.ln:last-child  { border-radius: 6px 9px 9px 6px; }

/* Sized off the CHIP, not the viewport. board.js measures the real lane width
   in fit() and publishes it as --chip.

   Viewport units were wrong: two pages can give the board different widths at
   the same viewport, so both got the same 13px font while the app's chips were
   13% narrower -- and "$223.52" was silently clipped to "$223.5" by the
   overflow rule below. Deriving from --chip means the text cannot outgrow the
   box that holds it, whatever the container does. */
.ln .a {
  display: block;
  font-size: clamp(8px, calc(var(--chip, 52px) * 0.235), 13.5px);
  font-weight: 600;
  line-height: 1.3;
  color: #0A0F12;
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: hidden;
}
.ln .t {
  display: block;
  font-size: clamp(6px, calc(var(--chip, 52px) * 0.155), 9.5px);
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: .62;
  color: #0A0F12;
  font-weight: 500;
}

.ln.hit { transform: translateY(-9px); }

/* The centre lanes return a fraction of a ball rather than paying a prize, so
   their labels sit on a neutral chip and take a lighter ink — dark text on the
   grey reads as a disabled prize rather than a different kind of outcome. */
.ln.centre .a, .ln.centre .t { color: var(--muted); }

/* Below this the ticker line is the first thing to go: the amount is what the
   lane is for, and the colour already says how rare it is. */
.lanes.tight .ln .t { display: none; }
.lanes.tight .ln { padding: 6px 0 7px; }

/* Measured, not guessed: at 375px a 17-lane strip gives each chip 19.6px, and
   even a four-character ticker at 7.7px clips there. Nothing horizontal fits.
   So the chip carries the ticker ALONE, turned on its side -- four characters
   read fine sideways where "NVDA $43" did not -- and every price moves to the
   horizontal .ladder underneath. Name on the lane, price in a line you can
   actually read. */
.lanes.micro { gap: 1px; padding: 0 4px 6px; }
.lanes.micro .ln {
  padding: 6px 0 7px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.lanes.micro .ln .a { display: none; }
.lanes.micro .ln .t {
  display: block;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  opacity: 1;
}

   Getting a 4-character ticker to fit took reclaiming the strip's own padding
   and gaps -- 375px across 17 lanes is 22px per chip, but padding and gaps were
   eating it down to 17.7px, which is where "NVDA" clipped. The reference casino
   boards fit labels because they run 14 lanes at 29px with 4-character
   multipliers; this is the same trick applied to a tighter budget. */
.lanes.micro { gap: 0; padding: 0 2px 8px; }
.lanes.micro .ln {
  padding: 7px 0 8px;
  height: auto;
  border-radius: 4px;
}
.lanes.micro .ln .a { display: none; }
.lanes.micro .ln .t {
  display: block;
  font-size: clamp(7px, 2.05vw, 10px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  opacity: 1;
}

@media (max-width: 560px) {
  .ln { padding: 5px 1px 6px; }
}


/* The prize ladder, shown under the board on phones where the chips can only
   carry a ticker. Scrolls sideways rather than wrapping into a block. */
.ladder { display: none; }
.lanes.micro ~ .ladder,
.ladder.on {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 12px 12px;
  font-size: 12px;
  scrollbar-width: none;
}
.ladder::-webkit-scrollbar { display: none; }
/* A ticker tape, because this is a board about stocks. The strip no longer
   scrolls by hand -- it runs on its own, and the duplicated copy makes the wrap
   seamless rather than a visible jump back to the start. */
/* Matches the specificity of the rule that sets overflow-x:auto above
   (.lanes.micro ~ .ladder is 0,3,0); .ladder.on alone is 0,2,0 and loses on
   specificity, not order -- so the tape would have been a scrollbox showing
   both copies at once. */
.lanes.micro ~ .ladder.on, .ladder.on.on { overflow: hidden; }
.ladder .tape { display: flex; width: max-content; animation: tape 26s linear infinite; }
.ladder .run { display: flex; gap: 22px; padding-right: 22px; }
.ladder:hover .tape, .ladder:active .tape { animation-play-state: paused; }
@keyframes tape { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ladder .tape { animation: none; }
  .lanes.micro ~ .ladder.on, .ladder.on.on { overflow-x: auto; }
}

.ladder .lad { display: flex; gap: 5px; align-items: baseline; white-space: nowrap; }
.ladder .lad .k { color: var(--muted); font-weight: 600; }
.ladder .lad .v { color: var(--ink); font-variant-numeric: tabular-nums; }