/* Fantasy Gambling pitch — four scenes: the price, the season, the loop, the board. */

body.pitch {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.pitch .shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 900px;
  margin: 0 auto;
  padding: 1.1rem 0.9rem 6.4rem;
  width: 100%;
}

.pitch .shell.is-wide {
  max-width: 1180px;
}

.pitch .scene {
  display: none;
}

.pitch .scene.is-on {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: auto;
  animation: pgIn 0.34s ease both;
}

/* Board scenes stay pinned to the top so they never jump mid-season. */
.pitch .scene[data-scene="season"].is-on,
.pitch .scene[data-scene="loop"].is-on,
.pitch .scene[data-scene="demo"].is-on {
  justify-content: flex-start;
}

.pitch .scene[data-scene="coin"].is-on,
.pitch .scene[data-scene="deal"].is-on {
  justify-content: safe center;
}

@keyframes pgIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.pitch .scene h1,
.pitch .scene h2 {
  margin: 0 0 0.5rem;
  text-wrap: balance;
}

.pitch .scene .lede {
  font-size: 0.98rem;
  line-height: 1.5;
  margin: 0 0 0.95rem;
  max-width: 46rem;
}

.pitch .scene .lede strong {
  color: var(--ink);
}

.pitch .scene .lede em {
  font-style: normal;
  color: var(--accent);
  font-weight: 600;
}

.is-bad {
  color: var(--danger);
}

.is-good {
  color: var(--accent);
}

.caption {
  font-size: 0.75rem;
  color: #6f6f6f;
  margin: 0.7rem 0 0;
  line-height: 1.5;
  max-width: 48rem;
}

.caption strong {
  color: #a8a8a8;
}

.caption em {
  font-style: italic;
  color: #8a8a8a;
}

.beat {
  margin: 0.7rem 0 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink);
  border-left: 2px solid var(--accent);
  padding-left: 0.75rem;
  min-height: 2.6rem;
}

.beat strong {
  color: var(--accent);
}

/* ---------- readout strip ---------- */

.readout {
  display: grid;
  gap: 0.4rem;
  margin: 0 0 0.65rem;
  grid-template-columns: repeat(2, 1fr);
}

.readout.three {
  grid-template-columns: repeat(3, 1fr);
}

@media (min-width: 560px) {
  .readout.four {
    grid-template-columns: repeat(4, 1fr);
  }
}

.readout > div {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
  min-width: 0;
}

.readout span {
  display: block;
  color: var(--muted);
  font-size: 0.63rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.readout b {
  display: block;
  font-family: Oswald, Impact, sans-serif;
  font-size: clamp(1rem, 3.4vw, 1.35rem);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.readout b small {
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-left: 0.3rem;
  white-space: nowrap;
}

/* Conservation strip. Week is a clock, not a P/L. Theirs is always the
   table's money (green). The house is always the take (red) — up is not a
   win for the people watching. */
.pot {
  margin: 0 0 0.65rem;
}

.pot-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.4rem 0.55rem;
  margin-bottom: 0.35rem;
}

.pot-week {
  margin: 0;
  padding: 0.18rem 0.65rem 0.14rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  font-family: Oswald, Impact, sans-serif;
  font-size: clamp(1rem, 3.2vw, 1.25rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.15;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pot-week b {
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
}

.pot-side {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  min-width: 0;
}

.pot-side span {
  color: var(--muted);
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pot-side b {
  font-family: Oswald, Impact, sans-serif;
  font-size: clamp(1rem, 3.2vw, 1.35rem);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.pot-side b small {
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-left: 0.25rem;
  white-space: nowrap;
}

.pot-side.is-table {
  justify-content: flex-start;
}

.pot-side.is-table b {
  color: var(--accent);
}

.pot-side.is-house {
  justify-content: flex-end;
}

.pot-side.is-house b {
  color: var(--danger);
}

.pot.is-watch .pot-side.is-house span {
  color: var(--ink);
}

.pot-bar {
  display: flex;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  background: #141414;
  border: 1px solid var(--line);
}

.pot-bar i {
  display: block;
  height: 100%;
  min-width: 0;
  transition: width 0.35s ease;
}

.pot-bar .is-table {
  width: 100%;
  background: var(--accent);
}

.pot-bar .is-house {
  width: 0;
  background: var(--danger);
}

.pot.is-watch .pot-bar {
  box-shadow: 0 0 0 1px rgba(255, 77, 109, 0.35);
}

.pot-ticks {
  display: flex;
  gap: 3px;
  margin-top: 0.5rem;
}

.pot-ticks[hidden] {
  display: none;
}

.pot-ticks i {
  flex: 1 1 0;
  height: 3px;
  border-radius: 1px;
  background: #2a2a2a;
}

.pot-ticks i.is-on {
  background: #5a5a5a;
}

.pot-ticks i.is-now {
  background: var(--ink);
}

@media (max-width: 560px) {
  .pot-side b small {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pot-bar i {
    transition: none;
  }
}

/* ---------- button rows ---------- */

.speeds {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.65rem;
  align-items: center;
  flex-wrap: wrap;
}

.speeds button {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.45rem 0.75rem;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}

.speeds button:hover:not(:disabled) {
  border-color: #4a4a4a;
}

.speeds button.is-on {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.speeds button.ghost {
  background: none;
  color: var(--muted);
  font-weight: 500;
}

.speeds button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.speeds .hint {
  color: var(--muted);
  font-size: 0.78rem;
  margin-left: auto;
  text-align: right;
}

/* ---------- season setup ---------- */

/* Two kinds of decision, so two kinds of control. Format is one-or-the-other
   and gets a segmented slider; the calendar and the bracket are independently
   on or off and get switches. Making all four look alike was the bug. */
.setup {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin: 0.6rem 0 0.35rem;
}

.seg {
  position: relative;
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.seg button {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 7.3rem;
  padding: 0.38rem 0.7rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.82rem;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: color 0.18s ease;
}

.seg button.is-on {
  color: var(--accent-ink);
}

.seg-thumb {
  position: absolute;
  z-index: 0;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 8px;
  background: var(--accent);
  transition: transform 0.2s ease;
}

.seg.is-b .seg-thumb {
  transform: translateX(100%);
}

.sw {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.34rem 0.75rem 0.34rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.82rem;
  line-height: 1;
  cursor: pointer;
}

.sw-track {
  position: relative;
  flex: none;
  width: 1.85rem;
  height: 1.05rem;
  border-radius: 999px;
  background: #2c2c2c;
  transition: background 0.18s ease;
}

.sw-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(1.05rem - 4px);
  height: calc(1.05rem - 4px);
  border-radius: 50%;
  background: #7a7a7a;
  transition: transform 0.18s ease, background 0.18s ease;
}

.sw.is-on {
  color: var(--ink);
  border-color: #3f4a24;
}

.sw.is-on .sw-track {
  background: rgba(198, 245, 66, 0.26);
}

.sw.is-on .sw-knob {
  transform: translateX(0.8rem);
  background: var(--accent);
}

.sw:hover:not(:disabled) {
  border-color: #4a4a4a;
}

.seg button:disabled,
.sw:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .seg-thumb,
  .sw-knob,
  .sw-track {
    transition: none;
  }
}

@media (max-width: 560px) {
  .speeds .hint {
    margin-left: 0;
    width: 100%;
    text-align: left;
  }
}

/* ---------- scene 1: the coin ---------- */

.coin-wrap {
  display: grid;
  gap: 0.9rem;
  align-items: start;
}

@media (min-width: 720px) {
  .coin-wrap {
    grid-template-columns: 20rem 1fr;
    gap: 1.2rem;
    align-items: center;
  }
}

.coin-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

/* Multipliers stacked left, start-over on the right. The coin in the
   middle is the x1 without needing its own label. */
.coin-ring {
  display: grid;
  grid-template-columns: 5.1rem 8rem 5.1rem;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  flex: none;
}

.coin-batches {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.38rem;
}

.coin-batches .coin-hint {
  white-space: normal;
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
}

.coin-core {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.coin {
  position: relative;
  width: 8rem;
  height: 8rem;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  overflow: visible;
  perspective: 700px;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.coin-hint {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  pointer-events: none;
}

.coin-batch {
  width: 100%;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.42rem 0.35rem;
  font-family: Oswald, Impact, sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.14s, color 0.14s, transform 0.14s;
}

.coin-batch:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: scale(1.06);
}

/* After a few single flips, the whole column lights up. Only ×10 pulses —
   ×100 and ×1,000 are the punchline, not the next tap. */
.coin-batches.is-nudge .coin-hint {
  color: var(--accent);
}

.coin-batches.is-nudge .coin-batch {
  border-color: var(--accent);
}

.coin-batches.is-nudge .coin-batch[data-coin="10"] {
  color: var(--accent);
  animation: pgPulse 1.1s ease infinite;
}

.coin-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.3, 0.9, 0.35, 1);
}

.coin-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  border: 3px solid;
}

.coin-face b {
  font-family: Oswald, Impact, sans-serif;
  font-size: 2.5rem;
  line-height: 1;
}

.coin-face i {
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.coin-face.is-h {
  background: #1b2410;
  border-color: var(--accent);
  color: var(--accent);
}

.coin-face.is-t {
  background: #241014;
  border-color: var(--danger);
  color: var(--danger);
  opacity: 0;
}

.coin-inner.is-tails .coin-face.is-h {
  opacity: 0;
}

.coin-inner.is-tails .coin-face.is-t {
  opacity: 1;
}

.coin.is-spin .coin-inner {
  transition: transform 0.42s cubic-bezier(0.3, 0.8, 0.3, 1);
}

.coin-call {
  margin: 0;
  font-family: Oswald, Impact, sans-serif;
  font-size: 1rem;
  letter-spacing: 0.03em;
  min-height: 1.2rem;
  text-align: center;
  pointer-events: none;
}

.coin-call.is-idle {
  color: var(--accent);
  animation: pgPulse 1.1s ease infinite;
}

.coin.is-nudge::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  pointer-events: none;
  animation: coinRing 1.1s ease infinite;
}

@keyframes coinRing {
  50% {
    opacity: 0.3;
  }
}

.coin-call.is-h {
  color: var(--accent);
}

.coin-call.is-t {
  color: var(--danger);
}

.coin-tally {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.coin-reset {
  justify-self: center;
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  padding: 0.42rem 0.45rem;
  cursor: pointer;
  white-space: normal;
  text-align: center;
}

.coin-reset:hover {
  color: var(--ink);
  border-color: var(--ink);
}

.coin-tally b {
  font-family: Oswald, Impact, sans-serif;
  font-size: 0.95rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.coin-tally .is-h b {
  color: var(--accent);
}

.coin-tally .is-t b {
  color: var(--danger);
}

.coin-right {
  min-width: 0;
}

/* "Expected P/L" is long enough that it should wrap, not clip. */
.coin-right .readout span {
  white-space: normal;
  overflow: visible;
}

@media (min-width: 720px) {
  .coin-right .plot {
    height: clamp(190px, 30vh, 290px);
  }
}

/* The fair-price switch only appears once there is a tilt worth erasing, but
   it holds its place in the layout from the start so arriving cannot jog the
   chart mid-flip. */
.coin-price {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  margin-top: 0.55rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.coin-price.is-live {
  opacity: 1;
  visibility: visible;
}

.coin-price > span {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.coin-price em {
  flex: 1 1 100%;
  font-style: normal;
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--muted);
}

.pricebar {
  display: flex;
  gap: 0.3rem;
}

.pricebar button {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.34rem 0.7rem;
  font-family: Oswald, Impact, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.14s, color 0.14s, background 0.14s;
}

.pricebar button:hover:not(.is-on) {
  border-color: #4a4a4a;
}

.pricebar button.is-on {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

/* ---------- the plot ---------- */

.plot {
  position: relative;
  flex: none;
  background: #101010;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  height: clamp(160px, 28vh, 245px);
  overflow: hidden;
}

.plot svg {
  display: block;
  width: 100%;
  height: 100%;
}

.p-zero {
  stroke: #3a3a3a;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.p-ev {
  fill: none;
  stroke: var(--danger);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke;
}

/* Same element, carrying the -110 run of the same flips instead of a forecast,
   so it reads as a second history rather than a prediction. */
.p-ev.is-ghost {
  stroke-dasharray: none;
  opacity: 0.6;
}

.p-act {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.p-tag {
  position: absolute;
  z-index: 2;
  right: 0.45rem;
  transform: translateY(-50%);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.12rem 0.35rem;
  border-radius: 4px;
  background: #131313;
  white-space: nowrap;
  pointer-events: none;
  transition: top 0.25s ease;
}

.p-tag[hidden] {
  display: none;
}

.p-tag.is-zero {
  color: #7a7a7a;
  left: 0.45rem;
  right: auto;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.p-tag.is-ev {
  color: var(--danger);
}

.p-tag.is-act {
  color: var(--accent-ink);
  background: var(--accent);
}

/* ---------- scene 2 knobs ---------- */

.knobs {
  display: grid;
  gap: 0.55rem 1.1rem;
  margin-bottom: 0.4rem;
}

.knobs[hidden],
.knob-sum[hidden] {
  display: none;
}

@media (min-width: 620px) {
  .knobs {
    grid-template-columns: 1fr 1fr;
  }
}

.knobs label {
  display: grid;
  gap: 0.25rem;
}

.knobs label > span {
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.knobs label > span b {
  font-family: Oswald, Impact, sans-serif;
  color: var(--accent);
  font-size: 0.92rem;
  margin-left: 0.2rem;
  font-variant-numeric: tabular-nums;
}

.knobs input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: none;
  cursor: pointer;
  margin: 0;
}

.knobs input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: #2c2c2c;
}

.knobs input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: #2c2c2c;
}

.knobs input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 17px;
  height: 17px;
  margin-top: -6.5px;
  border-radius: 50%;
  background: var(--accent);
  border: 0;
}

.knobs input[type="range"]::-moz-range-thumb {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--accent);
  border: 0;
}

.knobs input[type="range"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.knob-sum {
  margin: 0 0 0.7rem;
  font-size: 0.82rem;
  color: var(--muted);
}

.knob-sum b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ---------- the shared stage (scenes 2 and 3) ---------- */

.stage {
  position: relative;
  flex: none;
  background: #101010;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  height: clamp(336px, 44vh, 412px);
  overflow: hidden;
}

.stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.nodes {
  position: absolute;
  inset: 0;
}

.node {
  position: absolute;
  left: 0;
  top: 0;
  width: 4.4rem;
  margin-left: -2.2rem;
  margin-top: -1.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.14rem;
  pointer-events: none;
  will-change: transform;
}

.node .av {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: Oswald, Impact, sans-serif;
  font-size: 0.82rem;
  line-height: 1;
  border: 1.5px solid #4a4a4a;
  background: #191919;
  color: #c9c9c9;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.node .nm {
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #7a7a7a;
  line-height: 1;
}

.node .cash {
  font-family: Oswald, Impact, sans-serif;
  font-size: 0.76rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #c9c9c9;
  white-space: nowrap;
}

/* The record is scored against 50% while the money above it is scored against
   break-even, so it stays deliberately quieter than the cash: two full-strength
   colour scales stacked on one node read as a glitch rather than a point. */
.node .rec {
  display: flex;
  align-items: baseline;
  gap: 0.24rem;
  font-family: Oswald, Impact, sans-serif;
  font-size: 0.56rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.node .rec i,
.node .rec em {
  font-style: normal;
}

.node .rec i {
  color: #6a6a6a;
}

.node .rec em {
  color: #7f7f7f;
}

.node .rec em.up {
  color: #93b356;
}

.node .rec em.dn {
  color: #b0737e;
}

.node.is-up .av {
  border-color: var(--accent);
  color: var(--accent);
}

.node.is-up .cash {
  color: var(--accent);
}

.node.is-down .av {
  border-color: #6b2b39;
  color: #d98a99;
}

.node.is-down .cash {
  color: #d98a99;
}

.node.is-dead {
  opacity: 0.4;
}

.node.is-dead .av {
  border-color: #3a3a3a;
  color: #6f6f6f;
  background: #131313;
}

.node.is-dead .cash {
  color: var(--danger);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

.node.is-alex .av {
  border-width: 2.5px;
  box-shadow: 0 0 0 3px #101010, 0 0 0 4.5px #6a6a6a;
}

.node.is-alex .nm {
  color: #c9c9c9;
}

/* the house sits on the same stage */

.node.is-house {
  width: 5.6rem;
  margin-left: -2.8rem;
  transition: opacity 0.5s ease;
}

.node.is-house .av {
  width: 2.5rem;
  height: 2.5rem;
  border-color: var(--danger);
  background: #1a1012;
}

.node.is-house .av svg {
  width: 1.35rem;
  height: 1.35rem;
}

.node.is-house .nm {
  color: var(--danger);
  font-weight: 700;
}

.node.is-house .cash {
  color: var(--danger);
  font-size: 0.95rem;
}

/* The house stays the take, even when it is up. Green here reads as our
   profit, which is the wrong story. */

.node.is-house.is-gone {
  opacity: 0;
}

.node.is-house.is-watch .av {
  box-shadow: 0 0 0 3px #101010, 0 0 0 5px var(--danger);
}

/* ---------- bracket states (scene 4) ---------- */

.node .pill {
  position: absolute;
  top: -0.3rem;
  left: 50%;
  transform: translateX(-1.55rem);
  min-width: 0.95rem;
  padding: 0.05rem 0.22rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: Oswald, Impact, sans-serif;
  font-size: 0.56rem;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-align: center;
}

.node .pill:empty {
  display: none;
}

/* A halo rather than a colour, because the avatar's colour already means
   up or down and a seed can be either. */
.node.is-seed .av {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(198, 245, 66, 0.13);
}

/* Eliminated and non-qualifying names stay legible on purpose: in the product
   they are still betting these weeks, so hiding them would be the wrong claim. */
.node.is-out {
  opacity: 0.42;
}

/* On a phone the six who missed need to fit in two rows, and the first thing
   they can spare is a matchup record for weeks they have no matchup in. Their
   money keeps moving, which is the only thing this row is arguing. */
@media (max-width: 480px) {
  .node.is-out .rec {
    display: none;
  }
}

.node.is-champ .av {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 0 0 4px rgba(198, 245, 66, 0.16);
}

.node.is-champ .nm {
  color: var(--accent);
}

/* ---------- medals (free-for-all) ---------- */

/* Medal metal, not the accent lime — the avatar colour already means up or
   down, and a gold pip has to survive sitting next to either one. */
.node .rec b {
  font-family: Oswald, Impact, sans-serif;
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.02em;
}

.node .rec b + b {
  margin-left: 0.22rem;
}

.node .rec .g {
  color: #e8c15a;
}

.node .rec .s {
  color: #c3c7cf;
}

.node .rec .b3 {
  color: #c48a5c;
}

.node .rec .z {
  color: #4a4a4a;
}

/* The week's podium, for one week only. */
.node.is-gold .av {
  border-color: #e8c15a;
  box-shadow: 0 0 0 3px rgba(232, 193, 90, 0.18);
}

.node.is-silver .av {
  border-color: #c3c7cf;
  box-shadow: 0 0 0 3px rgba(195, 199, 207, 0.16);
}

.node.is-bronze .av {
  border-color: #c48a5c;
  box-shadow: 0 0 0 3px rgba(196, 138, 92, 0.16);
}

/* ---------- run / replay cover ---------- */

.sim-cover {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border: 0;
  margin: 0;
  padding: 1rem;
  width: 100%;
  background: rgba(11, 11, 11, 0.72);
  cursor: pointer;
  font: inherit;
  color: inherit;
  backdrop-filter: blur(1.5px);
}

.sim-cover[hidden] {
  display: none;
}

/* Week-3 watchpoint. Lighter than the run cover so the board still reads,
   and it lives on the stage so the conservation strip stays in view. */
.sim-beat {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem;
  background: rgba(11, 11, 11, 0.42);
}

.sim-beat[hidden] {
  display: none;
}

.sim-beat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  max-width: 22rem;
  padding: 0.95rem 1.05rem 1.05rem;
  background: rgba(16, 16, 16, 0.94);
  border: 1px solid #5a2230;
  border-radius: var(--radius);
}

.sim-beat.is-up .sim-beat-card {
  border-color: #2e3a14;
  background: rgba(20, 24, 12, 0.95);
}

.sim-beat-copy {
  margin: 0;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink);
  text-wrap: balance;
}

.sim-beat-copy strong {
  color: var(--danger);
  font-variant-numeric: tabular-nums;
}

.sim-beat.is-up .sim-beat-copy strong {
  color: var(--accent);
}

.sim-beat-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: 12px;
  padding: 0.7rem 1.35rem;
  font-family: Oswald, Impact, sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  line-height: 1;
  cursor: pointer;
}

.sim-beat-go:hover {
  filter: brightness(1.06);
}

.sim-play {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 12px;
  padding: 0.85rem 1.5rem;
  font-family: Oswald, Impact, sans-serif;
  font-weight: 600;
  font-size: clamp(1.05rem, 3.6vw, 1.4rem);
  letter-spacing: 0.02em;
  line-height: 1;
  animation: pgPulse 1.15s ease infinite;
}

.sim-cover:hover .sim-play {
  filter: brightness(1.06);
}

.sim-sub {
  color: #c9c9c9;
  font-size: 0.82rem;
  text-align: center;
  max-width: 26rem;
}

@keyframes pgPulse {
  50% {
    transform: scale(1.035);
  }
}

/* ---------- on-stage actions ---------- */

/* Both corners above the top row of nodes are empty at every stage size, so a
   finished run can offer its two next moves without covering a number. */
.stage-acts {
  position: absolute;
  z-index: 7;
  top: 0.55rem;
  left: 0.55rem;
  right: 0.55rem;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  pointer-events: none;
  animation: pgIn 0.35s ease both;
}

.stage-acts[hidden] {
  display: none;
}

.stage-act {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  background: rgba(16, 16, 16, 0.9);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 0.4rem 0.62rem;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.78rem;
  line-height: 1;
  cursor: pointer;
}

.stage-act[hidden] {
  display: none;
}

.stage-act svg {
  width: 0.95rem;
  height: 0.95rem;
  flex: none;
}

.stage-act:hover {
  border-color: #4a4a4a;
}

/* Always the right-hand corner, whether or not it has a sibling. */
.stage-act.is-go {
  margin-left: auto;
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.stage-act.is-go:hover {
  filter: brightness(1.06);
}

/* Marks the one control that is waiting on the visitor, which is also the
   signal that the switches above are unlocked. */
.stage-act.pulse {
  border-color: var(--accent);
  color: var(--accent);
  animation: pgPulse 1.15s ease infinite;
}

.stage-act.is-go.pulse {
  color: var(--accent-ink);
}

/* A bare fast-forward glyph does not say "keep betting past January", so the
   word only goes when the stage is too narrow to hold it. */
@media (max-width: 430px) {
  .stage-act {
    padding: 0.42rem;
  }

  .stage-act span {
    display: none;
  }
}

/* ---------- the settle panel ---------- */

.slam {
  margin-top: 0.7rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  background: #1a1012;
  border: 1px solid #5a2230;
  animation: pgIn 0.4s ease both;
}

.slam[hidden] {
  display: none;
}

.slam.is-good {
  background: #14180c;
  border-color: #2e3a14;
}

.slam-big {
  margin: 0 0 0.35rem;
  font-family: Oswald, Impact, sans-serif;
  font-size: clamp(1.15rem, 4vw, 1.6rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

.slam-big .n {
  color: var(--danger);
}

.slam.is-good .slam-big .n {
  color: var(--accent);
}

.slam p {
  margin: 0.3rem 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #c2c2c2;
}

.slam p strong {
  color: var(--ink);
}

.slam .odds-note {
  color: #9a9a9a;
  font-size: 0.85rem;
}

.sidequest {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.82rem;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px dashed #4a4a4a;
  padding-bottom: 1px;
}

.sidequest:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.sidequest.lg {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.65rem;
  padding: 0.55rem 2.1rem 0.55rem 0.8rem;
  border: 1px dashed #4a4a4a;
  border-radius: 9px;
  color: var(--muted);
}

.sidequest.lg b {
  font-family: Oswald, Impact, sans-serif;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.sidequest.lg::after {
  content: "\2192";
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
}

.sidequest.lg:hover {
  border-style: solid;
  border-color: var(--accent);
  color: var(--accent);
}

.sidequest.lg:hover b {
  color: var(--accent);
}

/* ---------- scene 4 ---------- */

/* In the deck the theater sizes to its contents. Its own caption grows to
   fill on the standalone demo page, which here would push the slide's caption
   under the dock. */
.scene[data-scene="demo"] .fgd-theater {
  flex: none;
  min-height: 0;
}

.scene[data-scene="demo"] .fgd-caption {
  flex: none;
}

.scene[data-scene="demo"] .caption {
  margin-top: 0.55rem;
}

/* ---------- scene 5: the deal ----------

   The closing slide is one action with the explaining stacked under it. The
   ask sits directly beneath the lede so it is on screen before anybody has
   scrolled, and the two explanations are deliberately weighted apart: what
   you get is a panel, how money works is fine print, and the last line of
   the deck is a beat rather than a box. */

.deal-ask {
  display: grid;
  gap: 0.5rem 1.2rem;
  align-items: center;
  margin: 0.15rem 0 0.85rem;
  padding: 0.85rem 1rem 0.95rem;
  background: #14180c;
  border: 1px solid #3f4a24;
  border-radius: 12px;
}

.deal-ask-line {
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink);
}

.deal-ask-fine {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--muted);
}

/* Inside the ask this column is Join, then Share. */
.cta-row {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
}

/* site.css pushes .site-cta right for the header; here it leads. */
.cta-row .site-cta {
  margin-left: 0;
}

.deal-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.62rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 650;
  cursor: pointer;
}

.deal-share:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* The one loud thing on the slide, and the same lime Oswald slab the two sims
   used to start a season, so the last button reads as the third of three. */
.deal-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.85rem 1.5rem;
  border-radius: 12px;
  font-family: Oswald, Impact, sans-serif;
  font-weight: 600;
  font-size: clamp(1.05rem, 4.2vw, 1.45rem);
  letter-spacing: 0.02em;
  line-height: 1.15;
}

@media (min-width: 620px) {
  .deal-ask {
    grid-template-columns: 1fr auto;
  }

  .deal-ask-line {
    grid-column: 1;
    grid-row: 1;
  }

  .deal-ask-fine {
    grid-column: 1;
    grid-row: 2;
  }

  .deal-ask .cta-row {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .deal-go,
  .deal-share {
    width: 100%;
    min-width: 12.5rem;
  }
}

.deal-get {
  margin: 0 0 0.75rem;
  padding: 0.8rem 1rem 0.9rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.deal-get h3 {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.deal-get ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

@media (min-width: 720px) {
  .deal-get ul {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.9rem;
  }
}

.deal-get li {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--muted);
}

.deal-get li b {
  font-family: Oswald, Impact, sans-serif;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--accent);
  margin-right: 0.2rem;
}

@media (min-width: 720px) {
  .deal-get li b {
    display: block;
    margin: 0 0 0.15rem;
  }
}

/* The money answer has to be here and has to not lead, so it is the quietest
   prose on the slide with the label carrying the question. */
.deal-money {
  margin: 0 0 0.85rem;
  font-size: 0.8rem;
  line-height: 1.55;
  color: #7f7f7f;
  max-width: 52rem;
}

.deal-money .tag {
  margin: 0 0.4rem 0 0;
  font-size: 0.62rem;
}

.deal-last {
  margin: 0;
  border-left: 2px solid var(--accent);
  padding-left: 0.8rem;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--ink);
  max-width: 44rem;
}

.pitch .note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 1.1rem;
  margin: 0.85rem 0 0;
}

.pitch .note .text-btn {
  font-size: 0.8rem;
}

@media (max-width: 620px) {
  .deal-ask {
    padding: 0.8rem 0.9rem 0.85rem;
  }

  .deal-ask-line {
    font-size: 0.94rem;
  }

  .deal-get {
    padding: 0.75rem 0.9rem 0.8rem;
  }

  .deal-get li {
    font-size: 0.86rem;
  }

  .deal-last {
    font-size: 0.92rem;
  }
}

/* ---------- dock ---------- */

.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  background: #0b0b0bee;
  border-top: 1px solid var(--line);
  backdrop-filter: blur(10px);
  padding: 0.55rem 0.9rem calc(0.55rem + env(safe-area-inset-bottom));
}

.dock-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  overflow: hidden;
}

.nav-btn {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  min-width: 5rem;
  font-family: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}

.nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.nav-btn.primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  font-weight: 700;
  margin-left: auto;
}

.nav-btn.pulse {
  animation: pgPulse 1.1s ease infinite;
}

.count {
  font-size: 0.75rem;
  color: var(--muted);
  min-width: 2.6rem;
  font-variant-numeric: tabular-nums;
}

.dots {
  display: flex;
  gap: 0.3rem;
}

.dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3a3a3a;
  display: block;
}

.dots i.is-on {
  background: var(--accent);
}

/* ---------- narrow screens ---------- */

@media (max-width: 620px) {
  .pitch .shell {
    padding: 0.85rem 0.75rem 6rem;
  }

  /* The coin scene has to fit a phone without hiding the flip buttons. */
  .pitch .scene h1 {
    font-size: clamp(1.6rem, 7.4vw, 2.1rem);
  }

  .pitch .scene .lede {
    font-size: 0.9rem;
    line-height: 1.45;
    margin-bottom: 0.7rem;
  }

  .coin-wrap {
    gap: 0.6rem;
  }

  .coin-left {
    gap: 0.35rem;
  }

  /* Not enough room to centre it, so pin the top and let it scroll. */
  .pitch .scene[data-scene="coin"].is-on {
    justify-content: flex-start;
  }

  .coin-ring {
    grid-template-columns: 4.4rem 5.8rem 4.4rem;
    gap: 0.35rem;
  }

  .coin {
    width: 5.8rem;
    height: 5.8rem;
  }

  .coin-face b {
    font-size: 1.8rem;
  }

  .coin-face i {
    font-size: 0.62rem;
  }

  .coin-call {
    font-size: 0.88rem;
  }

  .coin-batch {
    padding: 0.42rem 0.2rem;
    font-size: 0.82rem;
  }

  .coin-hint {
    font-size: 0.56rem;
  }

  .plot {
    height: clamp(140px, 22vh, 190px);
  }

  .beat {
    font-size: 0.88rem;
  }

  .node {
    width: 3.9rem;
    margin-left: -1.95rem;
  }

  .node .av {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.74rem;
  }

  .node .cash {
    font-size: 0.68rem;
  }

  .node .nm {
    font-size: 0.55rem;
  }

  .node .rec {
    font-size: 0.5rem;
    gap: 0.18rem;
  }
}

/* ---------- the side-quest page ---------- */

.backbar {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.9rem;
  padding: 0.42rem 0.85rem 0.42rem 0.7rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.14s, color 0.14s;
}

.backbar span {
  font-size: 1rem;
  line-height: 1;
  color: var(--muted);
}

.backbar:hover,
.backbar:hover span {
  border-color: var(--accent);
  color: var(--accent);
}

.backbar.solid {
  margin-bottom: 0;
}

/* ---------- the legacy chooser ---------- */

.vlist {
  display: grid;
  gap: 0.7rem;
  margin: 1.1rem 0 1.3rem;
}

@media (min-width: 780px) {
  .vlist {
    grid-template-columns: repeat(3, 1fr);
  }
}

.vcard {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.95rem 1rem 1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s;
}

.vcard:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.vcard h2 {
  margin: 0;
  font-size: 1.18rem;
  line-height: 1.15;
}

.vcard p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--muted);
}

.vgo {
  margin-top: auto;
  padding-top: 0.5rem;
  font-family: Oswald, Impact, sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--accent);
}

.legbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.9rem;
}

.legbar button {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.45rem 0.8rem;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}

.legbar button:hover {
  border-color: #4a4a4a;
}

.legbar button.is-on {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.meter {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
}

.meter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.meter-head span {
  color: var(--muted);
  font-size: 0.82rem;
}

.meter-head b {
  font-family: Oswald, Impact, sans-serif;
  font-size: clamp(1.4rem, 5vw, 2rem);
  line-height: 1;
  color: var(--danger);
  font-variant-numeric: tabular-nums;
}

.meter-bar {
  display: flex;
  height: 16px;
  border-radius: 5px;
  overflow: hidden;
  background: #141414;
}

.meter-bar i {
  display: block;
  transition: width 0.3s ease;
}

.m-back {
  background: #3a4a1e;
}

.m-cut {
  background: var(--danger);
}

.meter-legs {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.45rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.meter-legs b {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  margin-left: 0.2rem;
}

.meter-legs .is-bad b {
  color: var(--danger);
}

.odds-row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  margin-top: 0.6rem;
  flex-wrap: wrap;
}

.odds-box {
  flex: 1 1 8rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.6rem 0.75rem;
}

.odds-box span {
  display: block;
  color: var(--muted);
  font-size: 0.66rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 0.15rem;
}

.odds-box b {
  font-family: Oswald, Impact, sans-serif;
  font-size: clamp(1.2rem, 4.4vw, 1.6rem);
  line-height: 1;
  color: var(--danger);
  font-variant-numeric: tabular-nums;
}

.odds-box.is-fair b {
  color: var(--accent);
}

.odds-box.is-hit b {
  color: var(--ink);
}

.odds-vs {
  align-self: center;
  color: #5a5a5a;
  font-size: 0.8rem;
}

.chase-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

table.chase {
  min-width: 30rem;
  margin: 0;
}

table.chase th,
table.chase td {
  padding: 0.55rem 0.85rem;
}

table.chase tbody tr:last-child td {
  border-bottom: 0;
}

table.chase .num {
  font-family: Oswald, Impact, sans-serif;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

table.chase tr.is-last td {
  background: #1a1012;
}

.doc .page section:first-of-type {
  border-top: 1px solid var(--line);
  padding-top: 1.55rem;
  margin-top: 1.2rem;
}

@media (prefers-reduced-motion: reduce) {
  .sim-play,
  .stage-acts,
  .stage-act.pulse,
  .nav-btn.pulse,
  .coin-call.is-idle,
  .coin.is-nudge::after,
  .coin-batches.is-nudge .coin-batch[data-coin="10"] {
    animation: none;
  }

  .pitch .scene.is-on,
  .slam {
    animation: none;
  }

  .coin-inner {
    transition: none;
  }
}