:root {
  color-scheme: light;
  --ink: #111318;
  --muted: #626b78;
  --line: #d9dee6;
  --panel: #ffffff;
  --green: #16a06d;
  --red: #c44c4c;
  --gold: #d99b25;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  /* The race is a night scene; the page it sits on keeps the same lights out,
     and every panel below stays white so the data reads as printed on it. */
  background: #080b12;
  color: #e7ecf3;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button {
  font: inherit;
}

/* ------------------------------------------------------------- page theme */

/* Lights out is the default. The toggle restores the original white sheet the
   panels used to sit on; the race itself stays a night scene either way. */
:root[data-theme="light"] body {
  background: #eef2f7;
  color: var(--ink);
}

:root[data-theme="light"] /* What just happened, said once and out of the way — the buttons themselves
   never change, so the hint carries the news. */
.share-hint {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 20;
  max-width: min(420px, calc(100vw - 32px));
  margin: 0;
  padding: 11px 16px;
  border: 1px solid rgba(247, 195, 90, 0.4);
  border-radius: 9px;
  background: rgba(12, 17, 26, 0.95);
  color: #f7c35a;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  transform: translateX(-50%);
}

.share-hint[hidden] {
  display: none;
}

.credit {
  color: var(--muted);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.shell {
  width: min(1220px, calc(100vw - 28px));
  margin: 0 auto;
  padding: 0 0 32px;
}

/* ---------------------------------------------------------------- toolbar */

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.segments {
  display: grid;
  grid-template-columns: repeat(5, minmax(96px, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #e8edf3;
}

.segments.compact {
  grid-template-columns: repeat(3, minmax(88px, 1fr));
}

.segments button {
  min-height: 36px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}

.segments button.active {
  background: var(--panel);
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(24, 28, 35, 0.12);
}

.status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse 2s ease-in-out infinite;
}

.live-dot.syncing {
  background: var(--gold);
}

.live-dot.offline {
  background: var(--red);
  animation: none;
}

@keyframes pulse {
  50% {
    opacity: 0.35;
  }
}

.share-button {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: #14171a;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.share-button:hover {
  background: #2b3236;
}


.share-button[data-state="working"] {
  background: #2b3236;
  pointer-events: none;
}

.share-button[data-state="working"] span {
  display: none;
}

.share-button span {
  font-size: 15px;
}

.share-button.compact {
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
}

.share-button.compact span {
  font-size: 13px;
}

.icon-button {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}

.icon-button:hover {
  border-color: #9aa5b5;
}

/* ------------------------------------------------------------- dj + arena */

.stage-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(6, 9, 15, 0.92), rgba(6, 9, 15, 0));
}

.stage-bar .segments,
.race-bar .segments {
  grid-template-columns: repeat(5, minmax(64px, auto));
  gap: 2px;
  padding: 3px;
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(10, 14, 22, 0.72);
}

.stage-bar .segments button,
.race-bar .segments button {
  min-height: 28px;
  padding: 0 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
}

.stage-bar .segments button.active,
.race-bar .segments button.active {
  background: rgba(247, 147, 26, 0.9);
  color: #14100a;
  box-shadow: none;
}

.stage-bar .status {
  color: rgba(255, 255, 255, 0.55);
}

.stage-bar .share-button,
.race-bar .share-button {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.stage-bar .share-button:hover,
.race-bar .share-button:hover {
  background: rgba(255, 255, 255, 0.2);
}

.stage-bar .icon-button {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  box-shadow: none;
}

.stage-bar .icon-button:hover {
  border-color: rgba(247, 195, 90, 0.6);
}

.race-experience {
  /* Full bleed: the race runs to the edges of the window, with no frame. */
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

.stage {
  /* A little headroom above the booth. It is added to the height as well as
     taken as padding, so the scene below keeps exactly the size it had and the
     figure simply stops brushing the top edge. */
  --headroom: 10px;
  position: relative;
  height: calc(clamp(176px, 20vh, 212px) + var(--headroom));
  padding-top: var(--headroom);
  overflow: hidden;
  border: 0;
  /* The same tone the backdrop starts on, so the joint does not show. */
  background: #0a0f18;
}

.stage + .nowplaying {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

#djCanvas {
  display: block;
  width: 100%;
  height: 100%;
}

.nowplaying {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: #0a0f18;
  color: #fff;
}

.nowplaying .play {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border: 0;
  border-radius: 50%;
  background: #f7931a;
  color: #14100a;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(247, 147, 26, 0.55);
}

.nowplaying .play span {
  transform: translateX(1px);
}

.nowplaying.playing .play span {
  transform: none;
}

.nowplaying .play:hover {
  background: #ffa733;
}

/* Between the press and the first note the rig is warming up, and the button
   says so rather than sitting there looking pressed. */
.nowplaying.starting .play {
  animation: warming 1.1s ease-in-out infinite;
}

@keyframes warming {
  50% {
    box-shadow: 0 4px 26px rgba(247, 147, 26, 0.95);
    background: #ffb04d;
  }
}

/* Armed and waiting for the first gesture anywhere on the page: an expanding
   ring is hard to miss without adding a line of instructions. */
.nowplaying.armed .play::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid rgba(247, 147, 26, 0.75);
  border-radius: 50%;
  animation: attention 1.6s ease-out infinite;
}

@keyframes attention {
  0% {
    opacity: 0.9;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.75);
  }
}

.nowplaying .skip {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  margin-left: -2px;
  border: 1px solid rgba(247, 195, 90, 0.45);
  border-radius: 50%;
  background: rgba(247, 147, 26, 0.14);
  color: #f7c35a;
  font-size: 14px;
  cursor: pointer;
}

.nowplaying .skip:hover {
  background: rgba(247, 147, 26, 0.34);
  border-color: rgba(247, 195, 90, 0.9);
  color: #fff;
}

.nowplaying .track {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  font-size: 12px;
}

.nowplaying .track b {
  color: #f7c35a;
  font-size: 13px;
}

.nowplaying .track span {
  color: rgba(255, 255, 255, 0.45);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nowplaying .source {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  text-decoration: none;
}

.nowplaying .source:hover {
  color: #f7c35a;
}

/* The player is built before it is needed, so it is already here — parked out
   of the layout and invisible until there is something to show. */
.nowplaying .frame {
  position: absolute;
  right: 16px;
  bottom: 6px;
  opacity: 0;
  pointer-events: none;
}

.nowplaying.playing .frame {
  position: static;
  flex: 0 0 auto;
  opacity: 1;
  pointer-events: auto;
}

.nowplaying .frame iframe {
  display: block;
  width: 214px;
  height: 40px;
  border: 0;
  border-radius: 5px;
}

/* The name of the race and the window being raced over, sitting between the
   booth and the starting line: the banner over the track, with the choice that
   changes what the track shows directly under it rather than up in the lights
   with the DJ. */
.race-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  /* The band is the height it was when it held the banner alone. */
  min-height: 38px;
  padding: 4px 12px;
  background: #0a0f18;
}

.race-bar .segments {
  grid-template-columns: repeat(5, minmax(54px, auto));
}

.race-bar .segments button {
  min-height: 26px;
  font-size: 11.5px;
}

.race-bar .share-button {
  margin-left: auto;
  height: 28px;
  padding: 0 12px;
  font-size: 12px;
}

/* Centred on the page rather than in the space left over, so it lines up with
   the booth above it and the bitcoin flag below. */
.race-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0;
  padding: 0;
  color: #f7c35a;
  font-size: clamp(13px, 2vw, 18px);
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
}

.race-title::before,
.race-title::after {
  content: "";
  width: clamp(18px, 6vw, 74px);
  height: 1px;
  background: linear-gradient(90deg, rgba(247, 147, 26, 0), rgba(247, 147, 26, 0.75));
}

.race-title::after {
  background: linear-gradient(90deg, rgba(247, 147, 26, 0.75), rgba(247, 147, 26, 0));
}

.arena {
  position: relative;
  height: clamp(420px, 48vh, 540px);
  overflow: hidden;
  border-radius: 0 0 10px 10px;
  border: 1px solid rgba(247, 195, 90, 0.18);
  border-top: 0;
  background: linear-gradient(180deg, #0d1420, #1a2231);
}

#arenaCanvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.arena-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.arena-legend {
  position: absolute;
  top: 4px;
  left: 50%;
  z-index: 3;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 900;
  pointer-events: none;
}

.arena-legend .left {
  color: rgba(255, 158, 158, 0.7);
}

.arena-legend .right {
  color: rgba(150, 235, 195, 0.75);
}

.arena-legend .flag {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 11px;
  border: 1px solid rgba(247, 195, 90, 0.55);
  border-radius: 999px;
  background: rgba(14, 11, 6, 0.86);
  color: #f7c35a;
}

.arena-legend .flag i {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.1em;
}

.arena-legend .flag b {
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.arena-legend .flag.up b {
  color: #5fd6a0;
}

.arena-legend .flag.down b {
  color: #ff8f8f;
}

.arena-legend .flag em {
  display: none;
}

.lane-hud {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 3px 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 3px solid var(--accent, #3b8fd4);
  border-radius: 8px;
  background: rgba(12, 17, 26, 0.72);
  backdrop-filter: blur(6px);
  color: #fff;
  will-change: transform;
}

.lane-hud.leading {
  border-color: rgba(247, 195, 90, 0.5);
  box-shadow: 0 0 0 1px rgba(247, 195, 90, 0.22);
}

.lane-hud .rank {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent, #3b8fd4);
  font-size: 11px;
  font-weight: 1000;
}

.lane-hud .rank[hidden] {
  display: none;
}

.lane-hud.leading .rank {
  background: var(--gold);
  color: #1a1204;
}

.lane-hud .identity {
  display: grid;
  min-width: 0;
  line-height: 1.2;
}

.lane-hud .identity strong {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lane-hud .identity small {
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lane-hud .metrics {
  display: none;
}

.lane-hud .market {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(95, 214, 160, 0.16);
  color: #7fe0b4;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.lane-hud.closed .market {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
}

.runner-tag {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  justify-items: center;
  padding: 4px 11px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  will-change: transform;
}

.runner-tag::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 8px;
  height: 8px;
  background: inherit;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  transform: translateX(-50%) rotate(45deg);
}

.runner-tag strong {
  font-size: 19px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.runner-tag strong.up {
  color: var(--green);
}

.runner-tag strong.down {
  color: var(--red);
}

.runner-tag b {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--muted);
}

.runner-tag span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.runner-tag.leader {
  border-color: rgba(217, 155, 37, 0.7);
  box-shadow: 0 0 0 2px rgba(247, 195, 90, 0.35), 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* ---------------------------------------------------------------- history */

.history {
  margin-top: 16px;
}

/* The toggle sits with the panels it repaints, not over the night race. */
.history-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

/* The mobile toolbar rules reorder .segments and .icon-button; this row keeps
   its own layout at every width. */
.history-bar .segments.compact {
  order: 0;
}

.history-bar #themeButton {
  order: 1;
  margin-left: auto;
}

.history .segments.compact {
  width: fit-content;
  margin-bottom: 0;
}

.standings {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.standing {
  color: var(--ink);
  position: relative;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 4px 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.standing.champion {
  border-color: rgba(217, 155, 37, 0.5);
  background: linear-gradient(180deg, #fffdf6, #ffffff);
}

.standing img {
  grid-row: 1 / 3;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  object-fit: cover;
  background: #eef1f5;
}

.standing .medal {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 20px;
}

.standing b {
  font-size: 32px;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.standing .of {
  align-self: end;
  padding-bottom: 3px;
  color: var(--muted);
  font-size: 12px;
}

.standing .who {
  grid-column: 2 / 4;
  font-size: 13px;
  font-weight: 800;
}

.standing .share {
  grid-column: 1 / 4;
  height: 6px;
  margin-top: 8px;
  border-radius: 999px;
  background: #eaeef3;
  overflow: hidden;
}

.standing .share i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

.race-chart {
  color: var(--ink);
  position: relative;
  margin: 0 0 12px;
  padding: 8px 6px 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  overflow-x: auto;
}

.chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px 8px;
}

.segments.chart-modes {
  grid-template-columns: repeat(2, minmax(96px, 1fr));
  padding: 3px;
}

.segments.chart-modes button {
  min-height: 28px;
  font-size: 12px;
}

.chart-title {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.chart-tip {
  color: var(--ink);
  position: absolute;
  z-index: 5;
  min-width: 150px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent, #888);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 10px 26px rgba(17, 19, 24, 0.16);
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 14px));
}

.chart-tip[hidden] {
  display: none;
}

.chart-tip b {
  display: block;
  font-size: 13px;
}

.chart-tip time {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 11px;
}

.chart-tip dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 12px;
  margin: 0;
  font-size: 12px;
}

.chart-tip dt {
  color: var(--muted);
}

.chart-tip dd {
  margin: 0;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.insight-lead {
  margin: 0;
  padding: 0 8px 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.chart-insight {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 8px 8px;
}

/* Each figure is also a switch: pressing one pushes that company into the
   background of the plot, so two can be compared without the third in the way. */
.chart-insight .pill {
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 7px;
  background: var(--panel);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

/* The filled dot is the switch: solid while the company is in the plot, hollow
   once it has been pushed back. A ring on hover says the whole thing is live
   before anything is pressed. */
.chart-insight .pill .swatch {
  align-self: center;
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  box-sizing: border-box;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--accent);
}

.chart-insight .pill.dimmed .swatch {
  border-color: #b9c2cf;
  background: transparent;
}

.chart-insight .pill:hover {
  border-color: #9aa5b5;
  box-shadow: 0 0 0 3px rgba(122, 134, 152, 0.18);
}

.chart-insight .pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.chart-insight .pill.dimmed {
  border-left-color: #b9c2cf;
  background: #f4f6f9;
  opacity: 0.55;
}

.chart-insight b {
  font-weight: 800;
}

/* The whole-window figure leads, so it carries the weight and the two halves
   read as the split beneath it. */
.chart-insight .all-cap {
  padding-right: 2px;
  font-weight: 800;
}

.chart-insight .up-cap {
  color: var(--green);
}

.chart-insight .down-cap {
  color: var(--red);
}

.chart-insight em {
  color: var(--muted);
  font-style: normal;
  font-size: 11px;
}

.chart-insight .pill.champion {
  border-color: rgba(217, 155, 37, 0.65);
  background: linear-gradient(180deg, #fffdf6, #ffffff);
  box-shadow: 0 0 0 1px rgba(217, 155, 37, 0.3);
}

.chart-insight em.warn {
  color: #b07d12;
  font-weight: 700;
}

.chart-note {
  padding: 6px 8px 8px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.race-chart svg {
  display: block;
  width: 100%;
  min-width: 560px;
  height: auto;
}

.race-chart .zone-beat {
  fill: rgba(22, 160, 109, 0.07);
}

.race-chart .zone-lag {
  fill: rgba(196, 76, 76, 0.07);
}

.race-chart .zone-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
}

.race-chart .zone-label.beat {
  fill: rgba(22, 160, 109, 0.62);
}

.race-chart .zone-label.lag {
  fill: rgba(196, 76, 76, 0.6);
}

.race-chart .grid {
  stroke: #eaeef3;
  stroke-width: 1;
}

.race-chart .diagonal {
  stroke: #b6bfcc;
  stroke-width: 1.4;
  stroke-dasharray: 6 5;
}

.race-chart .zero {
  stroke: #8d97a6;
  stroke-width: 1.6;
}

.race-chart .zero-label {
  fill: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.race-chart .axis-title {
  fill: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.race-chart .diagonal-label {
  fill: #9aa5b5;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.race-chart .axis-label {
  fill: var(--muted);
  font-size: 10px;
}

.race-chart .ray-note {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.race-chart .end-label {
  font-size: 11px;
  font-weight: 800;
}

.race-chart circle {
  cursor: default;
}

.table-wrap {
  color: var(--ink);
  max-height: 420px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.history-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  background: #f4f7fa;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
}

.history-table thead th:not(.period-col):not(.btc-col)::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--accent, transparent);
  vertical-align: middle;
}

.history-table thead th.period-col,
.history-table thead th:last-child {
  text-align: left;
}

.history-table tbody tr:nth-child(even) {
  background: #fafbfd;
}

.history-table td,
.history-table tbody th {
  padding: 7px 12px;
  border-bottom: 1px solid #eef1f5;
  text-align: right;
  white-space: nowrap;
}

.history-table .period-col {
  position: sticky;
  left: 0;
  z-index: 1;
  color: var(--ink);
  font-weight: 700;
  text-align: left;
}

.history-table tbody tr:nth-child(odd) .period-col {
  background: var(--panel);
}

.history-table tbody tr:nth-child(even) .period-col {
  background: #fafbfd;
}

.history-table .num {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.history-table .num.muted {
  color: var(--muted);
}

.history-table .num.winner {
  border-radius: 5px;
  background: rgba(217, 155, 37, 0.14);
  box-shadow: inset 0 0 0 1px rgba(217, 155, 37, 0.35);
}

.history-table thead th em {
  color: #a4aebd;
  font-style: normal;
  font-weight: 700;
}

.up {
  color: var(--green);
}

.down {
  color: var(--red);
}

.winner-col {
  text-align: left !important;
}

.winner-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 3px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, white);
  font-size: 12px;
  font-weight: 800;
}

.winner-pill img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}

.winner-col em {
  display: none;
}

.table-empty {
  padding: 20px;
  color: var(--muted);
  text-align: center !important;
}

/* ----------------------------------------------------------------- mobile */

@media (max-width: 760px) {
  .shell {
    width: calc(100vw - 18px);
  }

  .toolbar {
    flex-wrap: wrap;
  }

  .segments {
    order: 2;
    width: 100%;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .segments button {
    min-height: 34px;
    padding: 0 4px;
    font-size: 12px;
  }

  .status {
    order: 1;
  }

  .share-button {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: #14171a;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.share-button:hover {
  background: #2b3236;
}


.share-button[data-state="working"] {
  background: #2b3236;
  pointer-events: none;
}

.share-button[data-state="working"] span {
  display: none;
}

.share-button span {
  font-size: 15px;
}

.icon-button {
    order: 1;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
  }

  .stage {
    height: calc(108px + var(--headroom));
  }

  .race-bar {
    flex-wrap: wrap;
  }

  .race-bar .segments {
    order: 0;
    flex: 1;
    width: auto;
    /* Let the five shrink so the share button keeps them company on the row
       instead of being pushed onto one of its own. */
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .race-bar .segments button {
    padding: 0 2px;
  }

  .race-title {
    position: static;
    order: -1;
    width: 100%;
    transform: none;
  }

  .nowplaying .track span {
    display: none;
  }

  .nowplaying.playing .frame iframe {
    width: 150px;
  }

  .arena {
    height: clamp(390px, 55vh, 500px);
  }

  .lane-hud {
    gap: 6px;
    padding: 4px 9px 4px 4px;
  }

  .lane-hud .rank {
    width: 20px;
    height: 20px;
    font-size: 11px;
  }

  .lane-hud .identity strong {
    font-size: 12px;
  }

  .lane-hud .identity small {
    display: none;
  }

  .lane-hud .metrics[hidden] {
  display: none;
}

.lane-hud .metrics {
    font-size: 15px;
  }

  .runner-tag {
    padding: 3px 8px;
  }

  .runner-tag b {
    font-size: 12px;
  }

  .standings {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .standing {
    padding: 10px 12px;
  }

  .standing img {
    width: 38px;
    height: 38px;
  }

  .standing b {
    font-size: 26px;
  }

  .history-table {
    font-size: 12px;
  }

  .history-table td,
  .history-table tbody th {
    padding: 6px 9px;
  }
}

.credit {
  margin: 14px 2px 0;
  color: rgba(255, 255, 255, 0.38);
  font-size: 10px;
}

.credit a {
  color: inherit;
}