.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.race-banner {
  position: relative;
  display: flex;
  justify-content: space-between;
  min-height: 172px;
  background: linear-gradient(105deg, #1c181c 0%, #1b1518 52%, #30171e 100%);
  border: 1px solid #503039;
  border-left: 3px solid var(--red);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 16px 36px -20px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}
.banner-copy {
  position: relative;
  z-index: 2;
  padding: 24px 28px;
}
.banner-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 1.8px;
  color: #c3adb3;
}
.banner-kicker .red-dot {
  width: 5px;
  height: 5px;
}
.banner-copy h2 {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: 0.8px;
  line-height: 1.1;
  margin: 10px 0 8px;
}
.banner-copy h2 em {
  font-style: normal;
  color: #ff505b;
}
.banner-copy p {
  font-size: 11px;
  color: #a9959c;
}
.banner-copy > a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #eed8df;
  font-size: 10px;
  font-weight: 500;
  margin-top: 17px;
  margin-right: 22px;
}
.banner-copy > a .icon {
  width: 14px;
  height: 14px;
}
.banner-copy > a:hover {
  color: #ff6f79;
}
.banner-art {
  position: absolute;
  right: 0;
  inset-block: 0;
  width: 47%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 17%);
}
.banner-logo {
  position: absolute;
  right: 150px;
  top: 50%;
  width: min(330px, 62%);
  aspect-ratio: 2.952;
  margin-top: -6px;
  transform: translateY(-50%);
  overflow: hidden;
}
/* The 2000px square file keeps wide margins: frame the mark only. */
.banner-logo img {
  position: absolute;
  left: -3.5%;
  top: -108.7%;
  width: 107.5%;
  max-width: none;
  height: auto;
  opacity: 0.92;
}
.finish-pattern {
  position: absolute;
  right: -30px;
  top: -52px;
  transform: rotate(25deg);
  width: 115px;
  height: 310px;
  opacity: 0.13;
  background: repeating-conic-gradient(#ea8390 0% 25%, transparent 0% 50%) 50% /
    28px 28px;
}
.speed-line {
  position: absolute;
  display: block;
  width: 470px;
  height: 2px;
  right: -40px;
  transform: rotate(-28deg);
  background: linear-gradient(90deg, transparent, #dc3c4b);
  opacity: 0.65;
}
.line-one {
  top: 46px;
}
.line-two {
  top: 66px;
  height: 7px;
  opacity: 0.25;
}
.line-three {
  top: 105px;
  right: -70px;
  opacity: 0.4;
}
.banner-art-label {
  position: absolute;
  right: 28px;
  bottom: 19px;
  font-size: 8px;
  letter-spacing: 2.7px;
  color: #b07483;
}
.mfa-period-stats {
  margin-bottom: 20px;
}
.mfa-leaderboard-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 20px;
}
.mfa-rank-list {
  padding: 8px 12px 12px;
  display: grid;
  gap: 2px;
}
.mfa-rank-row {
  --tone: #6f7f95;
  display: grid;
  grid-template-columns: 22px 36px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 10px;
  transition: background-color 0.2s, transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mfa-rank-row:hover {
  background: rgba(255, 255, 255, 0.04);
  transform: translateX(3px);
}
.mfa-rank-row.rank-1 { --tone: #f4c96a; background: linear-gradient(90deg, rgba(244, 201, 106, 0.08), transparent 70%); }
.mfa-rank-row.rank-2 { --tone: #cfd3db; }
.mfa-rank-row.rank-3 { --tone: #d69a67; }
.mfa-rank-position {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: #7d808a;
}
.mfa-rank-row:is(.rank-1, .rank-2, .rank-3) .mfa-rank-position {
  color: var(--tone);
}
.mfa-rank-avatar {
  background: #1d2026;
  border-color: rgba(255, 255, 255, 0.1);
  font-size: 11px;
  color: #b5b8c0;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.25s;
}
.mfa-rank-row:is(.rank-1, .rank-2, .rank-3) .mfa-rank-avatar {
  border-color: var(--tone);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tone) 18%, transparent);
}
.mfa-rank-row:hover .mfa-rank-avatar {
  transform: scale(1.1);
}
.mfa-rank-body {
  min-width: 0;
}
.mfa-rank-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 7px;
}
.mfa-rank-label span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  color: #e6e7ea;
}
.mfa-rank-label strong {
  flex: none;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: #c9ccd3;
  font-variant-numeric: tabular-nums;
}
.mfa-rank-row:is(.rank-1, .rank-2, .rank-3) .mfa-rank-label strong {
  color: var(--tone);
}
.mfa-rank-row .activity-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
}
.mfa-rank-row .activity-bar > i {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 35%, transparent), var(--tone));
}
.bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(270px, 1fr);
  gap: 20px;
}


.recent-panel td:first-child {
  color: #858793;
}
.recent-panel .time-cell {
  color: #d2bae9;
  font-size: 12px;
}
.recent-panel .driver-name {
  font-size: 11px;
}
.recent-panel .driver-name small {
  margin-left: 11px;
}
.compact-empty {
  padding: 38px 20px;
}
.compact-empty h2 {
  font-size: 13px;
  margin-top: 10px;
}
.compact-empty p {
  font-size: 10px;
}
.compact-empty .icon {
  height: 25px;
  width: 25px;
}
.panel-subtitle {
  font-size: 9px;
  color: #8f919a;
  padding: 18px 20px 0;
}
.circuit-activity {
  padding: 16px 20px;
  min-height: 193px;
}
.circuit-activity-row {
  margin-bottom: 17px;
}
.circuit-activity-row:last-child {
  margin-bottom: 0;
}
.circuit-activity-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  gap: 12px;
  margin-bottom: 8px;
}
.circuit-activity-label > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.circuit-activity-label strong {
  font-weight: 400;
  color: #9698a3;
  font-size: 10px;
  white-space: nowrap;
}
.activity-bar {
  height: 5px;
  background: #292b32;
  border-radius: 2px;
  overflow: hidden;
}
.activity-bar > i {
  display: block;
  height: 100%;
  background: var(--red);
  border-radius: 2px;
}
.circuit-activity-row:nth-child(2) .activity-bar > i {
  background: #b05d75;
}
.circuit-activity-row:nth-child(3) .activity-bar > i {
  background: #8668ae;
}
.circuit-activity-row:nth-child(4) .activity-bar > i {
  background: #647b93;
}
.panel-bottom-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  font-size: 10px;
  color: #b8b9c2;
  background: #17181c;
}
.panel-bottom-link > .icon {
  width: 14px;
  height: 14px;
}
.panel-bottom-link > .icon:last-child {
  margin-left: auto;
}
.panel-bottom-link:hover {
  background: #212228;
  color: white;
}
.circuit-panel {
  display: flex;
  flex-direction: column;
}
.circuit-panel .panel-bottom-link {
  margin-top: auto;
}
@media (min-width: 1500px) {
  .race-banner {
    min-height: 184px;
  }
  .banner-copy {
    padding-top: 28px;
  }
  .banner-copy h2 {
    font-size: 38px;
  }
}
@media (max-width: 1150px) {
  .mfa-leaderboard-grid,
  .bottom-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(245px, 1fr);
  }
  .banner-copy {
    padding-left: 22px;
  }
  .banner-art {
    opacity: 0.7;
  }
  .banner-art-label {
    font-size: 6px;
  }

}
@media (max-width: 1000px) {
  .mfa-leaderboard-grid,
  .bottom-grid {
    grid-template-columns: 1fr;
  }
  .banner-art {
    width: 40%;
  }
  .banner-art-label {
    display: none;
  }
  .banner-logo {
    right: 40px;
  }
  .circuit-activity {
    min-height: auto;
    padding-bottom: 22px;
  }
}
@media (max-width: 520px) {
  .race-banner {
    min-height: 180px;
  }
  .banner-copy {
    padding: 22px 19px;
  }
  .banner-copy h2 {
    font-size: 29px;
    max-width: 240px;
  }
  .banner-copy p {
    font-size: 10px;
    max-width: 215px;
    line-height: 1.7;
  }
  .banner-kicker {
    font-size: 7px;
    letter-spacing: 1.4px;
  }
  .banner-art {
    width: 35%;
    opacity: 0.35;
  }
  .banner-logo {
    display: none;
  }
  .banner-copy > a {
    font-size: 10px;
    margin-top: 15px;
  }
  .section-label > span {
    font-size: 8px;
  }
  .section-label h2 {
    font-size: 9px;
  }
}
.recent-panel .time-cell.invalid {
  color: #ff838e;
}

/* Motion: staggered entrance, live accents and first-render reveals. */
body[data-page="dashboard"] {
  --ov-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes ov-rise {
  from { opacity: 0; transform: translateY(14px); }
}
@keyframes ov-fade {
  from { opacity: 0; }
}
@keyframes ov-grow {
  from { transform: scaleX(0); }
}
@keyframes ov-streak {
  from { opacity: 0; translate: -265px 141px; }
}
@keyframes ov-comet {
  from { left: -15%; }
  to { left: 115%; }
}
@keyframes ov-flag {
  to { background-position: 50% 56px; }
}
@keyframes ov-sheen {
  from { background-position: 130% 0; }
  45%, to { background-position: -30% 0; }
}
@keyframes ov-pulse {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); }
  70%, to { box-shadow: 0 0 0 7px transparent; }
}
body[data-page="dashboard"] main > * {
  animation: ov-rise 0.6s var(--ov-ease) backwards;
  animation-delay: calc(var(--ov-i, 0) * 60ms);
}
body[data-page="dashboard"] main > :nth-child(2) { --ov-i: 1; }
body[data-page="dashboard"] main > :nth-child(3),
body[data-page="dashboard"] main > :nth-child(4),
body[data-page="dashboard"] main > :nth-child(5) { --ov-i: 2; }
body[data-page="dashboard"] main > :nth-child(6),
body[data-page="dashboard"] main > :nth-child(7) { --ov-i: 4; }
body[data-page="dashboard"] main > :nth-child(8) { --ov-i: 6; }
body[data-page="dashboard"] main > :nth-child(n + 9) { --ov-i: 7; }
.summary > .stat-card {
  animation: ov-rise 0.55s var(--ov-ease) backwards;
  animation-delay: calc(var(--ov-i, 0) * 60ms + var(--ov-j, 0) * 70ms);
  transition: transform 0.25s var(--ov-ease), border-color 0.25s, box-shadow 0.25s;
}
.summary > .stat-card:nth-child(2) { --ov-j: 1; }
.summary > .stat-card:nth-child(3) { --ov-j: 2; }
.summary > .stat-card:nth-child(4) { --ov-j: 3; }
.summary > .stat-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--red) 45%, var(--border));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 22px 40px -22px rgba(0, 0, 0, 0.9);
}
.summary > .stat-card .stat-label > .icon {
  transition: color 0.25s, transform 0.25s var(--ov-ease);
}
.summary > .stat-card:hover .stat-label > .icon {
  color: #f06871;
  transform: scale(1.12);
}
.banner-copy > * {
  animation: ov-rise 0.6s var(--ov-ease) backwards;
  animation-delay: calc(140ms + var(--ov-j, 0) * 80ms);
}
.banner-copy > h2 { --ov-j: 1; }
.banner-copy > p { --ov-j: 2; }
.banner-copy > a { --ov-j: 3; }
.banner-copy > a .icon {
  transition: transform 0.2s var(--ov-ease);
}
.banner-copy > a:hover .icon {
  transform: translateX(4px);
}
.banner-kicker .red-dot {
  color: var(--red);
  animation: ov-pulse 2s ease-out infinite;
}
.stat-foot i {
  color: var(--green);
  animation: ov-pulse 2s ease-out infinite;
}
.banner-logo {
  animation: ov-fade 0.9s ease-out 0.25s backwards;
}
@supports (mask-image: url("")) or (-webkit-mask-image: url("")) {
  .banner-logo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 42%, #ff5b66 50%, transparent 58%) 130% 0 / 300% 100% no-repeat;
    -webkit-mask: url("/assets/mfalogo.png") 46.7% 50% / 107.5% auto no-repeat;
    mask: url("/assets/mfalogo.png") 46.7% 50% / 107.5% auto no-repeat;
    animation: ov-sheen 6s ease-in-out 1.2s infinite;
  }
}
.speed-line {
  animation: ov-streak 0.9s var(--ov-ease) 0.2s backwards;
}
.line-two { animation-delay: 0.32s; }
.line-three { animation-delay: 0.44s; }
.line-one::after,
.line-three::after {
  content: "";
  position: absolute;
  top: 0;
  left: -15%;
  width: 70px;
  height: 100%;
  background: linear-gradient(90deg, transparent, #ffd5d9);
  animation: ov-comet 3.6s linear 1.4s infinite;
}
.line-three::after {
  animation-duration: 4.8s;
  animation-delay: 2.6s;
}
.finish-pattern {
  animation: ov-flag 9s linear infinite;
}
[data-animate] .mfa-rank-row,
[data-animate] .circuit-activity-row,
[data-animate] > tr {
  animation: ov-rise 0.45s var(--ov-ease) backwards;
  animation-delay: calc(var(--row, 0) * 55ms);
}
[data-animate] .activity-bar > i {
  transform-origin: left;
  animation: ov-grow 0.9s var(--ov-ease) backwards;
  animation-delay: calc(var(--row, 0) * 55ms + 160ms);
}
@keyframes ov-pop {
  from { opacity: 0; transform: scale(0.6); }
}
@keyframes ov-shine {
  from { transform: translateX(-120%); }
  35%, to { transform: translateX(520%); }
}
[data-animate] .mfa-rank-avatar {
  animation: ov-pop 0.5s var(--ov-ease) backwards;
  animation-delay: calc(var(--row, 0) * 55ms + 80ms);
}
.mfa-rank-row.rank-1 .activity-bar > i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 22%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  animation: ov-shine 4.5s ease-in-out 1.6s infinite;
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="dashboard"] main *,
  body[data-page="dashboard"] main *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Arrival: a thin welcome banner, the laps of all the drivers across its width. */
.race-banner { display: block; min-height: 0; margin-bottom: 24px; }
.banner-main { position: relative; display: flex; align-items: center; min-height: 112px; }
.banner-copy { max-width: 64%; padding: 22px 30px; }
.banner-copy h2 { margin: 0 0 6px; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.1; letter-spacing: 0.5px; }
.banner-copy p { max-width: none; margin: 0; font-size: 13px; line-height: 1.5; }
.banner-main .banner-logo { width: min(240px, 62%); right: 130px; margin-top: 0; }
.banner-stats { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid #503039; background: rgba(0, 0, 0, 0.18); }
.banner-stats > div { display: flex; flex-direction: column; gap: 4px; padding: 14px 30px 16px; }
.banner-stats > div + div { border-left: 1px solid #503039; }
.banner-stats dt { color: #b9a3aa; font-size: 10px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; }
.banner-stats dd { margin: 0; font: 600 28px/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .banner-copy { max-width: 100%; padding: 20px 22px; }
  .banner-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .banner-stats > div { padding: 12px 22px; }
  .banner-stats > div:nth-child(3) { border-left: 0; }
  .banner-stats > div:nth-child(n + 3) { border-top: 1px solid #503039; }
}