body.embedded-race {
  margin: 0;
  background: #102e25;
  color: #e8efd9;
}

html:has(body.embedded-race) {
  scrollbar-width: thin;
  scrollbar-color: #59795f #102e25;
}

.embedded-race > header,
.embedded-race main > :not(.race-layout) {
  display: none;
}

.embedded-race main {
  max-width: none;
  margin: 0;
  padding: 0;
}

.embedded-race .race-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "scene" "profile" "field" "returns";
  margin: 0;
  border: 0;
  border-radius: 0;
  gap: 0;
}

.embedded-race .race-layout .scene-card {
  grid-area: scene;
  height: clamp(188px, 58vw, 380px);
  min-height: 0;
}

.embedded-race .race-layout #viewport {
  height: 100%;
  bottom: 0;
}

.embedded-race .race-layout .scene-bottom {
  left: 10px;
  right: 10px;
  bottom: 58px;
}

.embedded-race .race-layout[data-phase="presentation"] .scene-bottom,
.embedded-race .race-layout[data-phase="ready"] .scene-bottom {
  bottom: 9px;
}

.embedded-race .scene-note:first-child {
  display: none;
}

.embedded-race .glass-button {
  margin-left: auto;
}

.embedded-race .pre-race-clock {
  top: 8px;
  right: 8px;
  min-width: 0;
  padding: 7px 12px;
}

.embedded-race .pre-race-clock > small,
.embedded-race .pre-race-clock > span {
  font-size: 8px;
}

.embedded-race .pre-race-clock > strong {
  font-size: clamp(24px, 5vw, 38px);
}

.embedded-race .countdown {
  font-size: clamp(22px, 5vw, 42px);
}

.embedded-race .runner-intro {
  grid-area: profile;
  position: static;
  height: auto;
  min-width: 0;
  padding: 9px 12px;
  gap: 6px 10px;
}

.embedded-race .field-review {
  grid-area: profile;
  position: static;
  height: auto;
  padding: 8px 12px;
}

.embedded-race .runner-intro > b {
  min-width: 32px;
  font-size: 24px;
}

.embedded-race .runner-intro > div:nth-child(2) {
  flex: 1;
}

.embedded-race .runner-intro strong {
  font-size: clamp(12px, 2.2vw, 17px);
}

.embedded-race .runner-intro #introDetails,
.embedded-race .runner-intro #introVenue {
  font-size: 8px;
}

.embedded-race .runner-intro .intro-odds {
  margin-left: auto;
}

.embedded-race .intro-odds > span {
  min-width: 54px;
  padding: 4px 6px;
}

.embedded-race .intro-odds small {
  display: block;
  margin: 0;
  font-size: 7px;
}

.embedded-race .intro-odds b {
  font-size: clamp(12px, 2vw, 17px);
}

.embedded-race .runner-intro #introRecord {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 9px;
}

.embedded-race .intro-record > b {
  font-size: 13px;
}

.embedded-race .intro-record > em {
  display: none;
}

.embedded-race .broadcast-field {
  grid-area: field;
  min-width: 0;
}

.embedded-race .broadcast-returns {
  grid-area: returns;
  min-width: 0;
}

.embedded-race .race-layout .standings-card {
  display: flex;
  height: 100%;
  border-right: 0;
  padding: 10px;
}

.embedded-race .standings {
  display: block;
}

.embedded-race .race-layout .runner-row {
  height: 31px;
}

.embedded-race .race-layout .runner-row .runner-name {
  font-size: 10px;
}

.embedded-race .race-layout .runner-row .runner-subtitle {
  font-size: 7px !important;
}

.embedded-race .odds-pair {
  grid-template-columns: 50px 50px;
}

.embedded-race details > summary {
  cursor: pointer;
  border-top: 1px solid #6b895b77;
  padding: 9px 12px;
  color: #f1dc91;
  font-size: 11px;
  font-weight: 700;
  background: #153d2e;
}

.embedded-race .race-layout .broadcast-returns .last-result {
  display: block;
  position: static;
  height: auto;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  border-top: 1px solid #6b895b77;
  border-radius: 0;
  background: linear-gradient(105deg, #123c30, #23513a);
}

.embedded-race .previous-result-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.embedded-race .previous-exotics {
  border-left: 0;
  padding-left: 0;
}

.embedded-race .previous-payout-row > em,
.embedded-race .previous-exotics em {
  font-size: 11px;
  white-space: nowrap;
}

.embedded-race .result-screen {
  overflow: auto;
}

.embedded-race .race-layout:fullscreen {
  overflow: auto;
}

.embedded-race .race-layout:fullscreen .scene-card {
  height: 100dvh;
}

@media (min-width: 700px) {
  .embedded-race .race-layout {
    grid-template-columns: minmax(208px, 25%) minmax(0, 1fr);
    grid-template-areas: "field scene" "field profile" "field returns";
  }

  .embedded-race .race-layout .scene-card {
    height: clamp(320px, 43vw, 500px);
  }

  .embedded-race details > summary {
    display: none;
  }

  .embedded-race .broadcast-field {
    border-right: 1px solid #6b895b77;
  }
}

@media (max-width: 600px) {
  .embedded-race .pre-race-clock {
    padding: 5px 8px;
  }

  .embedded-race .pre-race-clock > span {
    font-size: 6px;
    letter-spacing: .25px;
  }
}

@media (min-width: 800px) {
  .embedded-race .previous-result-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .embedded-race .previous-column-head,
  .embedded-race .previous-payout-row {
    grid-template-columns: minmax(0, 1fr) 64px 64px;
  }

  .embedded-race .previous-exotics > div {
    grid-template-columns: 66px minmax(0, 1fr) 86px;
  }
}