:root {
  --derby-bg: #202622;
  --derby-ink: #fff8e8;
  --derby-muted: #cabfae;
  --derby-gold: #f4c95d;
}

html.source-page,
html.source-page body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--derby-bg) !important;
}

.source-page body {
  display: grid;
  place-items: center;
  color: var(--derby-ink);
}

.source-page .game-wrap {
  width: min(100vw, 56.25vh);
  height: min(100vh, 177.7778vw);
  display: grid;
  place-items: stretch;
}

.race-card {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(5px, 1.9cqw, 8px);
  padding: clamp(9px, 2.85cqw, 12px);
  overflow: hidden;
  border: clamp(2px, .95cqw, 4px) solid #b78648;
  border-radius: clamp(6px, 1.9cqw, 8px);
  background: #202622;
  color: var(--derby-ink);
  container-type: inline-size;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  box-sizing: border-box;
}

.race-head,
.leader-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.race-title { font-size: clamp(17px, 5.5cqw, 24px); font-weight: 900; line-height: 1.05; }
.race-sub { color: var(--derby-muted); font-size: clamp(10px, 2.85cqw, 18px); line-height: 1.3; }
.race-clock { font-size: clamp(19px, 5.5cqw, 24px); font-weight: 900; font-variant-numeric: tabular-nums; }
.leader-line { font-size: clamp(10px, 3cqw, 18px); font-weight: 800; }
#leadName { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#distanceText { flex: none; color: #ffe59a; white-space: nowrap; }
.progress-track { height: clamp(5px, 1.45cqw, 7px); margin-top: 5px; background: #111713; }
#progressFill { width: 0; height: 100%; background: var(--derby-gold); }

.race-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #5e704f;
  background: #17221d;
}

#raceCanvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.stage-label { position: absolute; top: 7px; left: 7px; right: 7px; text-align: center; font-size: clamp(9px, 2.6cqw, 15px); color: #fff1d8; }
.result { position: absolute; left: 8px; right: 8px; bottom: 15px; padding: 12px; border: 1px solid #9bad8e; background: #192822f5; text-align: center; }
.result[hidden] { display: none; }
.result strong { display: block; font-size: clamp(17px, 4.8cqw, 21px); overflow-wrap: anywhere; }
.result span { color: var(--derby-muted); font-size: clamp(9px, 2.7cqw, 17px); line-height: 1.35; }

.winners { font-size: clamp(9px, 2.7cqw, 15px); line-height: 1.3; overflow-wrap: anywhere; }
.play-instruction { margin: 0; font-size: clamp(10px, 3.05cqw, 18px); font-weight: 800; line-height: 1.25; }
.gift-legend { display: grid; gap: 3px; }
.gift-lane {
  min-width: 0;
  display: grid;
  grid-template-columns: clamp(54px, 15cqw, 64px) minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  padding: 3px 6px;
  border-left: 3px solid var(--lane);
  background: #171d19;
  font-size: clamp(8px, 2.45cqw, 14px);
  line-height: 1.15;
}
.gift-lane > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gift-list { min-width: 0; display: flex; align-items: center; gap: 4px; overflow: hidden; color: #d6c4ae; }
.gift-item { min-width: 0; display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.gift-item:not(:last-child)::after { content: "·"; margin-left: 2px; color: #756f62; }
.gift-item > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.gift-item .tt-core-gift-icon { width: 15px; height: 15px; flex-basis: 15px; }

.gift-feed { min-height: clamp(30px, 8cqw, 36px); display: flex; align-items: center; gap: 7px; color: var(--derby-muted); }
.gift-feed p { margin: 0; min-width: 0; font-size: clamp(9px, 2.65cqw, 15px); line-height: 1.25; overflow-wrap: anywhere; }
.gift-feed .tt-core-avatar { width: 28px !important; height: 28px !important; font-size: 12px; }
#supporterAvatar:empty { display: none; }
.mode-label { position: absolute; z-index: 3; top: 9px; left: 50%; transform: translateX(-50%); padding: 4px 9px; border-radius: 999px; background: #f4c95d; color: #211810; font-size: 14px; font-weight: 900; text-transform: uppercase; }

html.tt-shell .settings-error { min-height: 1.4em; margin: 12px 0 0; color: #ffaaa0; font-weight: 700; }
html.tt-shell .lane-divider { margin: 18px 0 4px; color: var(--accent-text); font-size: 14px; font-weight: 800; }
html.tt-shell .lane-divider:first-child { margin-top: 0; }
html.tt-shell .gifts-panel .gift-legend-row { padding-block: 11px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}