@font-face {
  font-display: swap;
  font-family: "A4 Speed";
  font-style: normal;
  font-weight: 700 950;
  src: url("./assets/A4SPEED-Bold.ttf") format("truetype");
}

.driver-profile-link {
  color: inherit;
  background: none;
  border: 0;
  box-shadow: none;
  clip-path: none;
  cursor: pointer;
  font: inherit;
  font-weight: inherit;
  letter-spacing: 0;
  padding: 0;
  text-align: inherit;
  text-transform: none;
}

.driver-profile-link:hover,
.driver-profile-link:focus-visible {
  color: var(--cyan);
  filter: none;
  text-decoration: underline;
  text-decoration-color: var(--gold-hot);
  text-underline-offset: 4px;
  transform: none;
}

.driver-portal-link { background: #04111de8; border: 1px solid #4fd6ff73; color: #eaf9ff; font: 950 .76rem/1 var(--display-font, sans-serif); padding: 12px 15px; position: absolute; right: clamp(14px, 3vw, 42px); text-decoration: none; text-transform: uppercase; top: clamp(14px, 3vw, 32px); z-index: 8; }
.driver-portal-link:hover,.driver-portal-link:focus-visible { border-color: var(--gold-hot); color: var(--gold-bright); box-shadow: 0 0 26px #4fd6ff2c; }

.driver-number-lockup {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  vertical-align: middle;
}

.driver-number-lockup img {
  display: block;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  width: 100%;
}

.driver-number-lockup.has-text { overflow: visible; }
.driver-number-lockup.is-table { height: 32px; width: 54px; }
.driver-number-lockup.is-inline { height: 34px; width: 58px; }
.driver-number-lockup.is-micro { height: 24px; margin-right: 5px; width: 42px; }
.driver-number-lockup.is-card { height: 145px; width: clamp(120px, 48%, 210px); }
.driver-number-lockup.is-hero { height: clamp(100px, 12vw, 178px); width: clamp(130px, 17vw, 245px); }
.driver-number-lockup.is-admin-preview { height: 170px; width: min(92%, 390px); }
.driver-number-lockup.is-tower { height: 34px; width: 52px; }
.driver-number-lockup.is-live-winner { height: clamp(125px, 18vw, 240px); width: clamp(180px, 30vw, 430px); }
.live-driver i .driver-number-lockup { display: flex; }
.live-driver-focus header small,
.live-podium small,
.live-restart-grid article strong,
.live-points-row strong,
.live-bonus-driver small { align-items: center; display: flex; gap: 7px; min-width: 0; }
.live-winner-number .driver-number-lockup.has-image { opacity: .22; }

.driver-directory-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.driver-directory-card {
  background: linear-gradient(145deg, color-mix(in srgb, var(--profile-secondary) 82%, #020712), #020712 78%);
  border: 1px solid color-mix(in srgb, var(--profile-primary) 55%, transparent);
  min-height: 430px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 24px 62px #0009, inset 0 1px #ffffff14;
}

.driver-directory-card::before {
  background: linear-gradient(90deg, var(--profile-primary), var(--profile-accent), transparent 82%);
  content: "";
  height: 4px;
  inset: 0 0 auto;
  position: absolute;
  z-index: 3;
}

.driver-card-hitarea {
  background: transparent;
  border: 0;
  clip-path: none;
  cursor: pointer;
  inset: 0;
  padding: 0;
  position: absolute;
  z-index: 4;
}

.driver-card-hitarea:focus-visible {
  outline: 3px solid var(--profile-accent);
  outline-offset: -6px;
}

.driver-card-portrait {
  background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--profile-primary) 32%, transparent), transparent 48%), linear-gradient(145deg, #061627, #020712);
  height: 245px;
  overflow: hidden;
  position: relative;
}

.driver-card-portrait::after {
  background: linear-gradient(transparent, #020712 96%);
  content: "";
  inset: 45% 0 0;
  position: absolute;
}

.driver-card-portrait img {
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  position: relative;
  width: 100%;
  z-index: 1;
}

.driver-card-number {
  color: #ffffff0d;
  font: 950 11rem/.8 var(--display-font, Impact, sans-serif);
  position: absolute;
  right: -8px;
  top: 38px;
  align-items: center;
  display: flex;
  height: 150px;
  justify-content: flex-end;
  max-width: 68%;
  overflow: hidden;
  width: 220px;
}

.driver-card-number .has-image { opacity: .26; }
.driver-card-number .has-text { height: auto; width: auto; }

.driver-portrait-fallback {
  align-content: center;
  height: 100%;
  justify-items: center;
  min-height: 180px;
  position: relative;
  display: grid;
}

.driver-portrait-fallback strong {
  color: #edfaff;
  font: 950 5rem/.9 var(--display-font, Impact, sans-serif);
  text-shadow: 0 0 30px var(--profile-primary, #4fd6ff);
}

.driver-portrait-fallback span {
  color: var(--profile-accent, var(--gold-hot));
  font-weight: 900;
}

.driver-card-copy {
  padding: 18px 20px 20px;
  position: relative;
}

.driver-card-kicker,
.driver-profile-series,
.driver-profile-about header span,
.driver-profile-performance header span,
.driver-profile-career header span,
.driver-profile-form header span,
.driver-profile-trophies header span,
.driver-profile-milestones header span,
.driver-profile-garage header span,
.driver-profile-media-center header span,
.driver-profile-honors header span,
.driver-profile-results header span {
  color: var(--profile-accent, var(--gold-hot));
  font: 900 .68rem/1 var(--display-font, sans-serif);
  text-transform: uppercase;
}

.driver-card-copy h3 {
  font: 900 clamp(1.45rem, 2.2vw, 2.25rem)/.92 "A4 Speed", var(--display-font, Impact, sans-serif);
  margin: 6px 0;
  text-transform: uppercase;
}

.driver-card-copy p { margin: 0 0 14px; }
.driver-card-stats { border-block: 1px solid #ffffff17; display: grid; grid-template-columns: repeat(3, 1fr); padding: 10px 0; }
.driver-card-stats span { color: #91a8b8; display: grid; font-size: .68rem; text-transform: uppercase; }
.driver-card-stats strong { color: #fff; font-size: 1rem; }
.driver-directory-card .form-strip { margin-top: 12px; }

.driver-profile-page { display: block; min-width: 0; }
.driver-profile-shell { min-width: 0; }
.driver-profile-back { margin-bottom: 14px; }

.driver-profile-hero {
  background: radial-gradient(circle at 78% 22%, color-mix(in srgb, var(--profile-primary) 28%, transparent), transparent 32rem), linear-gradient(112deg, color-mix(in srgb, var(--profile-secondary) 82%, #030814), #020712 72%);
  border: 1px solid color-mix(in srgb, var(--profile-primary) 48%, transparent);
  border-top: 5px solid var(--profile-primary);
  display: grid;
  grid-template-columns: minmax(280px, 38%) minmax(0, 1fr);
  min-height: 500px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 30px 80px #000a, inset 0 1px #ffffff15;
}

.driver-profile-hero::after {
  color: #ffffff08;
  content: attr(data-number);
  font: 950 25rem/.8 var(--display-font, Impact, sans-serif);
  pointer-events: none;
  position: absolute;
  right: -2rem;
  top: 3rem;
}

.driver-profile-portrait {
  align-self: end;
  height: 100%;
  min-height: 480px;
  position: relative;
  z-index: 1;
}

.driver-profile-portrait::after { background: linear-gradient(90deg, transparent 75%, #020712); content: ""; inset: 0; position: absolute; }
.driver-profile-portrait img { height: 100%; object-fit: contain; object-position: center bottom; width: 100%; }
.driver-profile-portrait .driver-portrait-fallback { background: radial-gradient(circle, color-mix(in srgb, var(--profile-primary) 30%, transparent), transparent 58%); }
.driver-profile-portrait .driver-portrait-fallback strong { font-size: 9rem; }

.driver-profile-identity { align-content: center; box-sizing: border-box; min-width: 0; overflow: hidden; padding: 44px clamp(24px, 5vw, 72px); position: relative; width: 100%; z-index: 2; }
.driver-profile-hero.has-collectibles { min-height: 720px; }
.driver-profile-identity.has-collectibles { align-content: stretch; display: grid; gap: 14px; grid-template-rows: auto minmax(250px, 1fr) auto; padding-block: 18px; }
.driver-profile-identity-core { align-content: center; display: grid; min-width: 0; }
.driver-collectible-shelf { background: linear-gradient(180deg, #020812dd, #071a29e8); border: 1px solid #d6ad4b66; box-shadow: inset 0 0 28px #000c, 0 10px 28px #0008; min-width: 0; padding: 14px 14px 10px; position: relative; }
.driver-collectible-shelf::after { background: linear-gradient(90deg, transparent, #fff0a8 20%, #28d7f2 50%, #fff0a8 80%, transparent); bottom: -2px; content: ""; height: 2px; left: 5%; position: absolute; width: 90%; }
.driver-collectible-shelf-label { color: #d6ad4b; display: block; font: 900 .62rem/1 var(--display-font, sans-serif); margin-bottom: 8px; text-transform: uppercase; }
.driver-collectible-shelf > div { align-items: end; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(78px, 104px)); justify-content: center; }
.driver-collectible-shelf figure { align-items: center; background: radial-gradient(circle at 50% 44%, #28d7f223, #020712 75%); border: 1px solid #4fd6ff3d; display: grid; grid-template-rows: 100px auto; margin: 0; min-width: 0; overflow: hidden; padding: 6px; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.driver-collectible-shelf figure:hover { border-color: #fff0a8; box-shadow: 0 0 22px #d6ad4b38; transform: translateY(-4px) scale(1.04); z-index: 2; }
.driver-collectible-shelf figure.rarity-epic,.driver-collectible-shelf figure.rarity-legendary { background: radial-gradient(circle at 50% 44%, #d6ad4b32, #020712 76%); border-color: #d6ad4b75; }
.driver-collectible-shelf img { filter: drop-shadow(0 7px 8px #000c); height: 100px; object-fit: contain; width: 100%; }
.driver-collectible-shelf figcaption { color: #d6e6ef; font-size: .56rem; font-weight: 900; line-height: 1.1; min-height: 2.2em; overflow: hidden; text-align: center; text-transform: uppercase; }
.driver-profile-title { align-items: center; display: flex; gap: clamp(18px, 3vw, 42px); margin: 20px 0 26px; min-width: 0; overflow: hidden; width: 100%; }
.driver-profile-title > div { flex: 1 1 auto; min-width: 0; overflow: hidden; width: 100%; }
.driver-profile-number { align-items: center; color: var(--profile-accent); display: flex; flex: 0 1 auto; font: 950 clamp(5rem, 10vw, 10rem)/.7 var(--display-font, Impact, sans-serif); justify-content: center; max-width: 38%; min-width: 110px; overflow: hidden; text-shadow: 5px 5px 0 #0008, 0 0 35px color-mix(in srgb, var(--profile-accent) 35%, transparent); }
.driver-profile-number .has-text { height: auto; width: auto; }
.driver-profile-title small { color: #91a7b6; font: 800 1rem/1 var(--display-font, sans-serif); text-transform: uppercase; }
.driver-profile-title h2 { box-sizing: border-box; display: block; font: 900 clamp(3rem, 6.2vw, 7.4rem)/.82 "A4 Speed", var(--display-font, Impact, sans-serif); margin: 6px 0 0; max-width: 100%; overflow: hidden; overflow-wrap: normal; padding-inline: .09em .04em; text-overflow: clip; text-transform: uppercase; white-space: nowrap; width: 100%; }
.driver-profile-status { border-block: 1px solid #ffffff21; display: flex; flex-wrap: wrap; gap: 12px 24px; padding: 16px 0; }
.driver-profile-status strong { color: var(--profile-primary); text-transform: uppercase; }
.driver-profile-status span { color: #d3e0e8; }
.driver-social-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.driver-social-links a { color: #fff; background: #071a2c; border: 1px solid color-mix(in srgb, var(--profile-primary) 45%, transparent); font-weight: 900; padding: 10px 13px; text-decoration: none; text-transform: uppercase; }
.driver-profile-soundtrack { align-items: center; background: linear-gradient(100deg, color-mix(in srgb, var(--profile-primary) 18%, #061321), #030a15 72%); border: 1px solid color-mix(in srgb, var(--profile-primary) 42%, transparent); display: flex; gap: 24px; justify-content: space-between; margin-top: 16px; padding: 18px clamp(18px, 3vw, 30px); }
.driver-profile-soundtrack > div { min-width: 0; }
.driver-profile-soundtrack span { color: var(--profile-accent); display: block; font: 900 .68rem/1 var(--display-font, sans-serif); text-transform: uppercase; }
.driver-profile-soundtrack h3 { font: 950 clamp(1.35rem, 3vw, 2.4rem)/.95 var(--display-font, sans-serif); margin: 6px 0 0; text-transform: uppercase; }
.driver-profile-soundtrack p { color: #a9bdc9; font-size: .82rem; margin: 8px 0 0; }
.driver-profile-soundtrack audio { flex: 0 1 380px; min-width: min(300px, 100%); width: 100%; }

.driver-profile-facts { background: #030a15; border: 1px solid #4fd6ff32; border-top: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.driver-profile-facts div { border-right: 1px solid #ffffff12; min-width: 0; padding: 18px; text-align: center; }
.driver-profile-facts div:last-child { border-right: 0; }
.driver-profile-facts span { color: #7f95a5; display: block; font-size: .66rem; font-weight: 900; text-transform: uppercase; }
.driver-profile-facts strong { display: block; margin-top: 7px; overflow-wrap: anywhere; }

.driver-profile-statline { background: linear-gradient(90deg, color-mix(in srgb, var(--profile-primary) 22%, #061321), #061321 38%, color-mix(in srgb, var(--profile-accent) 16%, #061321)); border-block: 1px solid #ffffff1a; display: grid; grid-template-columns: repeat(8, 1fr); margin: 20px 0; }
.driver-profile-statline div { padding: 18px 8px; text-align: center; }
.driver-profile-statline strong { color: #fff; display: block; font: 950 1.65rem/1 var(--display-font, sans-serif); }
.driver-profile-statline span { color: #91a5b3; font-size: .65rem; font-weight: 900; text-transform: uppercase; }

.driver-profile-content { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr); }
.driver-profile-about,.driver-profile-performance,.driver-profile-career,.driver-profile-form,.driver-profile-trophies,.driver-profile-milestones,.driver-profile-garage,.driver-profile-media-center,.driver-profile-honors,.driver-profile-results { background: linear-gradient(145deg, #071727f2, #020712f7); border: 1px solid #4fd6ff32; padding: clamp(20px, 3vw, 34px); }
.driver-profile-about h3,.driver-profile-performance h3,.driver-profile-career h3,.driver-profile-form h3,.driver-profile-trophies h3,.driver-profile-milestones h3,.driver-profile-garage h3,.driver-profile-media-center h3,.driver-profile-honors h3,.driver-profile-results h3 { font: 950 clamp(1.65rem, 3vw, 3rem)/.95 var(--display-font, sans-serif); margin: 6px 0 20px; text-transform: uppercase; }
.driver-profile-about p { color: #c0d0da; font-size: 1rem; line-height: 1.75; margin: 0; white-space: pre-line; }
.driver-profile-performance dl { display: grid; gap: 0; grid-template-columns: 1fr 1fr; margin: 0; }
.driver-profile-performance dl div { border-bottom: 1px solid #ffffff13; padding: 12px 4px; }
.driver-profile-performance dt { color: #8096a6; font-size: .66rem; font-weight: 900; text-transform: uppercase; }
.driver-profile-performance dd { color: #fff; font-size: 1.15rem; font-weight: 900; margin: 5px 0 0; }

.driver-profile-career,.driver-profile-form,.driver-profile-trophies,.driver-profile-milestones,.driver-profile-garage,.driver-profile-media-center,.driver-profile-honors,.driver-profile-results { margin-top: 16px; }
.driver-career-grid { display: grid; gap: 1px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.driver-career-grid article { background: #030c18; border-top: 3px solid color-mix(in srgb, var(--profile-primary) 65%, #0d4565); display: grid; gap: 6px; min-height: 130px; padding: 18px 14px; }
.driver-career-grid article:nth-child(3n) { border-top-color: var(--profile-accent); }
.driver-career-grid span { color: #859cab; font-size: .65rem; font-weight: 900; text-transform: uppercase; }
.driver-career-grid strong { color: #fff; font: 950 clamp(1.65rem, 3vw, 2.6rem)/1 var(--display-font, sans-serif); }
.driver-career-grid small { color: #7f95a4; line-height: 1.25; }
.driver-form-legend { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; margin-top: -44px; padding-bottom: 20px; }
.driver-form-legend span { align-items: center; color: #879dab; display: flex; font-size: .64rem; font-weight: 900; gap: 5px; text-transform: uppercase; }
.driver-form-legend span::before { background: #2d4e62; content: ""; height: 8px; width: 18px; }
.driver-form-legend .is-win::before { background: var(--profile-accent); }
.driver-form-legend .is-top-five::before { background: var(--profile-primary); }
.driver-form-legend .is-top-ten::before { background: #1683a8; }
.driver-form-chart { align-items: end; border-bottom: 1px solid #4fd6ff45; display: grid; gap: clamp(5px, 1vw, 12px); grid-template-columns: repeat(10, minmax(28px, 1fr)); height: 270px; overflow-x: auto; padding: 20px 8px 0; }
.driver-form-column { align-items: center; align-self: stretch; display: grid; grid-template-rows: 28px minmax(0, 1fr) 28px; min-width: 28px; }
.driver-form-column strong { font: 950 .78rem/1 var(--display-font, sans-serif); text-align: center; }
.driver-form-column > span { align-self: end; background: linear-gradient(#37657d, #102a3c); border-top: 3px solid #6d91a4; display: block; height: var(--form-height); min-height: 12px; transition: filter .2s ease, height .5s ease; }
.driver-form-column:hover > span { filter: brightness(1.35); }
.driver-form-column.is-win > span { background: linear-gradient(#f0d27f, #9b6714); border-color: #fff1b3; }
.driver-form-column.is-top-five > span { background: linear-gradient(var(--profile-primary), #07516d); border-color: #b8f4ff; }
.driver-form-column.is-top-ten > span { background: linear-gradient(#1683a8, #0b3d57); border-color: #4fd6ff; }
.driver-form-column small { color: #8197a5; font-size: .62rem; font-weight: 900; padding-top: 8px; text-align: center; }
.driver-trophy-room-header { align-items: end; border-bottom: 1px solid #4fd6ff29; display: flex; justify-content: space-between; margin-bottom: 24px; padding-bottom: 20px; }
.driver-trophy-room-header h3 { margin-bottom: 0; }
.driver-trophy-totals { align-items: end; display: grid; grid-template-columns: auto auto; text-align: right; }
.driver-trophy-totals strong { color: var(--profile-accent); font: 950 3rem/.8 var(--display-font, sans-serif); grid-row: 1 / span 2; margin-right: 10px; }
.driver-trophy-totals span { color: #fff; font-size: .7rem; font-weight: 950; text-transform: uppercase; }
.driver-trophy-totals b { color: #8ca7b7; font-size: .58rem; text-transform: uppercase; }
.driver-trophy-shelves { display: grid; gap: 30px; }
.driver-trophy-shelf { border-bottom: 1px solid #4fd6ff1f; padding-bottom: 28px; }
.driver-trophy-shelf:last-child { border-bottom: 0; padding-bottom: 0; }
.driver-trophy-shelf > header { align-items: center; display: grid; gap: 4px 12px; grid-template-columns: auto 1fr auto; margin-bottom: 14px; }
.driver-trophy-shelf > header span { background: var(--profile-primary); color: #03101b; font-size: .64rem; font-weight: 950; grid-row: 1 / span 2; padding: 9px 11px; text-transform: uppercase; }
.driver-trophy-shelf > header strong { color: #fff; font: 900 1.05rem/1 var(--display-font, sans-serif); text-transform: uppercase; }
.driver-trophy-shelf > header small { color: var(--profile-accent); font-size: .62rem; font-weight: 900; grid-column: 2; text-transform: uppercase; }
.driver-trophy-shelf > header > small:last-child { align-self: center; grid-column: 3; grid-row: 1 / span 2; }
.driver-trophy-grid { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.driver-trophy { background: linear-gradient(155deg, #0a2033, #020712 70%); border: 1px solid #d9ad4550; color: #fff; cursor: pointer; display: grid; grid-template-rows: 250px auto auto; justify-items: center; min-width: 0; overflow: hidden; padding: 12px 10px 15px; position: relative; text-align: center; }
.driver-trophy::before { background: linear-gradient(110deg, transparent 15%, #ffffff10 38%, #ffffff4a 48%, #ffffff0b 58%, transparent 82%); content: ""; inset: 0; pointer-events: none; transform: translateX(-130%); transition: transform .7s ease; z-index: 2; }
.driver-trophy:hover::before,.driver-trophy:focus-visible::before { transform: translateX(130%); }
.driver-trophy::after { background: radial-gradient(circle at 50% 55%, #d9ad4528, transparent 62%); content: ""; inset: 0; pointer-events: none; }
.driver-trophy-art { align-items: center; display: flex; height: 250px; justify-content: center; min-width: 0; position: relative; width: 100%; z-index: 1; }
.driver-trophy-art img { filter: drop-shadow(0 14px 14px #000b) drop-shadow(0 0 11px #d9ad453d); height: 100%; max-width: 100%; object-fit: contain; transform: translateY(-28px); transition: filter .25s ease, transform .25s ease; width: 100%; }
.driver-trophy.is-award .driver-trophy-art img { height: 82%; }
.driver-trophy:hover .driver-trophy-art img,.driver-trophy:focus-visible .driver-trophy-art img { filter: drop-shadow(0 16px 15px #000d) drop-shadow(0 0 17px #d9ad4566); transform: translateY(-31px) scale(1.025); }
.driver-trophy small { color: #fff; font: 950 .78rem/1 var(--display-font, sans-serif); margin-top: 8px; overflow-wrap: anywhere; position: relative; text-transform: uppercase; z-index: 3; }
.driver-trophy em { color: var(--profile-primary); font-size: .57rem; font-style: normal; font-weight: 900; margin-top: 8px; position: relative; text-transform: uppercase; z-index: 3; }
.driver-trophy-empty { align-items: center; background: #030d18; border: 1px dashed #4fd6ff45; display: grid; justify-items: center; min-height: 260px; padding: 32px; text-align: center; }
.driver-trophy-empty span { color: var(--profile-accent); font-size: 3rem; }
.driver-trophy-empty strong { font: 950 1.8rem/1 var(--display-font, sans-serif); margin-top: 10px; text-transform: uppercase; }
.driver-trophy-empty p { color: #91a8b7; margin: 8px 0 0; }
.driver-milestone-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.driver-milestone { background: #030c18; border: 1px solid #304859; display: grid; gap: 14px; min-height: 150px; padding: 17px; }
.driver-milestone.is-unlocked { border-color: #d9ad456e; box-shadow: inset 4px 0 #d9ad45; }
.driver-milestone > div:first-child { display: grid; gap: 4px; grid-template-columns: 32px 1fr; }
.driver-milestone > div:first-child > span { color: #77909f; font-size: 1.3rem; grid-row: 1 / span 2; }
.driver-milestone.is-unlocked > div:first-child > span { color: var(--profile-accent); }
.driver-milestone strong { font-size: .86rem; text-transform: uppercase; }
.driver-milestone small { color: #8298a7; line-height: 1.3; }
.driver-milestone-progress { background: #0d2232; height: 6px; overflow: hidden; }
.driver-milestone-progress span { background: linear-gradient(90deg, var(--profile-primary), var(--profile-accent)); display: block; height: 100%; width: var(--achievement-progress); }
.driver-milestone p { color: #8198a7; font-size: .61rem; font-weight: 900; margin: 0; text-transform: uppercase; }
.driver-milestone.is-unlocked p { color: var(--profile-accent); }
.driver-garage-layout { display: grid; gap: 12px; grid-template-columns: minmax(0, 1.7fr) minmax(320px, .8fr); }
.driver-garage-feature,.driver-garage-grid button { background: #020812; border: 1px solid #4fd6ff30; color: #fff; cursor: pointer; overflow: hidden; padding: 0; position: relative; text-align: left; }
.driver-garage-feature { aspect-ratio: 16 / 9; min-height: 340px; }
.driver-garage-feature img,.driver-garage-grid img { height: 100%; object-fit: cover; transition: filter .25s ease, transform .35s ease; width: 100%; }
.driver-garage-feature:hover img,.driver-garage-grid button:hover img { filter: brightness(1.08); transform: scale(1.018); }
.driver-garage-feature > span { background: linear-gradient(transparent, #020712e8); bottom: 0; display: grid; gap: 5px; left: 0; padding: 50px 22px 18px; position: absolute; right: 0; }
.driver-garage-feature small { color: var(--profile-accent); font-size: .68rem; font-weight: 950; text-transform: uppercase; }
.driver-garage-feature strong { font: 950 clamp(1.2rem, 2.3vw, 2rem)/1 var(--display-font, sans-serif); text-transform: uppercase; }
.driver-garage-grid { align-content: start; display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.driver-garage-grid button { aspect-ratio: 16 / 9; }
.driver-garage-grid button span { background: #020712d9; bottom: 0; font-size: .68rem; font-weight: 900; left: 0; overflow: hidden; padding: 8px 10px; position: absolute; right: 0; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.garage-lightbox-open { overflow: hidden; }
.driver-garage-lightbox { align-items: center; background: #01040af2; display: flex; inset: 0; justify-content: center; padding: clamp(14px, 4vw, 60px); position: fixed; z-index: 10000; }
.driver-garage-lightbox > button { align-items: center; background: #071a2c; border: 1px solid #4fd6ff70; color: #fff; display: flex; font-size: 2rem; height: 48px; justify-content: center; padding: 0; position: absolute; right: 18px; top: 18px; width: 48px; }
.driver-garage-lightbox figure { margin: 0; max-height: 90vh; max-width: 1400px; position: relative; width: 100%; }
.driver-garage-lightbox img { display: block; max-height: 84vh; object-fit: contain; width: 100%; }
.driver-garage-lightbox figcaption { background: #020712e8; bottom: 0; color: #fff; font-weight: 900; left: 0; padding: 13px 16px; position: absolute; right: 0; text-transform: uppercase; }
.driver-media-layout { display: grid; gap: 12px; grid-template-columns: minmax(0, 1.25fr) minmax(380px, .75fr); }
.driver-media-feature,.driver-media-grid a { background: #020812; border: 1px solid #4fd6ff31; color: #fff; display: grid; overflow: hidden; text-decoration: none; }
.driver-media-feature > div { aspect-ratio: 16 / 9; overflow: hidden; position: relative; }
.driver-media-feature img,.driver-media-grid img { height: 100%; object-fit: cover; transition: transform .3s ease; width: 100%; }
.driver-media-feature:hover img,.driver-media-grid a:hover img { transform: scale(1.025); }
.driver-media-feature > span { display: grid; gap: 7px; padding: 18px 20px; }
.driver-media-feature small,.driver-media-grid small { color: var(--profile-accent); font-size: .62rem; font-weight: 900; text-transform: uppercase; }
.driver-media-feature strong { font: 950 clamp(1.35rem, 2.5vw, 2.4rem)/.95 var(--display-font, sans-serif); text-transform: uppercase; }
.driver-media-feature p,.driver-media-grid p { color: #91a5b3; line-height: 1.45; margin: 0; }
.driver-media-grid { align-content: start; display: grid; gap: 9px; grid-template-columns: 1fr 1fr; }
.driver-media-grid a > div { aspect-ratio: 16 / 9; overflow: hidden; position: relative; }
.driver-media-grid a > span { display: grid; gap: 4px; padding: 12px; }
.driver-media-grid strong { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.driver-media-grid p { font-size: .7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.driver-media-play { align-items: center; background: #020712d9; border: 1px solid #4fd6ff80; color: #fff; display: flex; font-size: 1.5rem; height: 54px; justify-content: center; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 54px; }
.driver-media-fallback { align-content: center; background: linear-gradient(135deg, #0b334b, #03101d 60%, #5f4819); display: grid; height: 100%; justify-items: center; text-transform: uppercase; }
.driver-media-fallback span { color: #8fa8b7; font-size: .65rem; font-weight: 900; }
.driver-media-fallback strong { color: #fff; font: 950 1.8rem/1 var(--display-font, sans-serif); }
.driver-media-fallback.is-large strong { font-size: 3.5rem; }
.profile-dialog-open { overflow: hidden; }
.driver-trophy-dialog { align-items: center; background: #01040af2; display: flex; inset: 0; justify-content: center; padding: 18px; position: fixed; z-index: 10001; }
.driver-trophy-dialog > section { background: radial-gradient(circle at 50% 28%, #d9ad4527, transparent 42%), linear-gradient(145deg, #0a1c2b, #020712); border: 1px solid #d9ad457a; max-height: calc(100dvh - 32px); max-width: 720px; overflow: auto; padding: 30px 34px 34px; position: relative; text-align: center; width: 100%; }
.driver-trophy-dialog > section > button { align-items: center; background: #071a2c; border: 1px solid #4fd6ff70; color: #fff; display: flex; font-size: 1.8rem; height: 42px; justify-content: center; padding: 0; position: absolute; right: 12px; top: 12px; width: 42px; }
.driver-trophy-stage { align-items: center; display: flex; height: min(58vh, 580px); justify-content: center; margin: 4px 0 18px; position: relative; }
.driver-trophy-stage img { filter: drop-shadow(0 22px 18px #000c) drop-shadow(0 0 22px #d9ad4555); height: 100%; max-width: 100%; object-fit: contain; width: 100%; }
.driver-trophy-dialog small { color: var(--gold-hot); font-weight: 900; text-transform: uppercase; }
.driver-trophy-dialog h3 { font: 950 clamp(2rem, 7vw, 3.4rem)/.9 var(--display-font, sans-serif); margin: 8px 0 14px; text-transform: uppercase; }
.driver-trophy-dialog p { color: #adc0cb; line-height: 1.6; margin: 0; }
.driver-profile-honors > div { display: grid; gap: 10px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.driver-profile-honors article { background: #040d19; border: 1px solid #d9ad453d; display: grid; justify-items: center; min-height: 140px; padding: 16px 8px; text-align: center; }
.honor-medallion { color: var(--profile-accent); font-size: 1.8rem; }
.driver-profile-honors article strong { font-size: 1.5rem; }
.driver-profile-honors article small { color: #8ba0ae; font-size: .65rem; text-transform: uppercase; }
.driver-profile-empty { grid-column: 1 / -1; }
.driver-profile-results-table { overflow-x: auto; }
.driver-profile-results table { min-width: 680px; width: 100%; }

.driver-profile-studio { grid-column: span 6 !important; }
.profile-portrait-preview { background: radial-gradient(circle, #4fd6ff22, transparent 60%), #020712; border: 1px solid #4fd6ff3b; height: 230px; margin-bottom: 12px; overflow: hidden; }
.profile-portrait-preview img { height: 100%; object-fit: contain; object-position: center bottom; width: 100%; }
.profile-number-preview { align-items: center; background: radial-gradient(circle, #d9ad4526, transparent 62%), #020712; border: 1px solid #d9ad4552; display: flex; height: 190px; justify-content: center; margin: 14px 0 12px; overflow: hidden; padding: 10px; }
.profile-number-preview > span:not(.driver-number-lockup) { color: #8197a6; font-weight: 800; }
.profile-access-admin { background: linear-gradient(145deg, #061827, #020712); border: 1px solid #4fd6ff3d; border-left: 5px solid var(--cyan); margin: 18px 0; padding: 16px; }
.profile-access-heading { align-items: center; border-bottom: 1px solid #ffffff17; display: flex; gap: 12px; justify-content: space-between; margin-bottom: 14px; padding-bottom: 12px; }
.profile-access-heading span { color: var(--gold-hot); font: 950 .72rem/1 var(--display-font, sans-serif); text-transform: uppercase; }
.profile-access-heading strong { color: var(--cyan); font-size: .75rem; text-transform: uppercase; }
.profile-access-admin .button-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.profile-access-admin .button-row button { min-width: 0; }
.profile-access-audit { display: grid; gap: 1px; margin-top: 12px; }
.profile-access-audit article { align-items: center; background: #081827; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) auto; padding: 10px 12px; }
.profile-access-audit article div { display: grid; gap: 3px; }
.profile-access-audit strong { color: #edf9ff; font-size: .78rem; text-transform: capitalize; }
.profile-access-audit small { color: #849aa8; font-size: .66rem; }
.profile-access-audit button { min-height: 34px; padding: 8px 10px; }
.profile-color-controls { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); }
.profile-color-controls label { align-items: center; background: #020812; border: 1px solid #4fd6ff2c; display: flex; justify-content: space-between; margin: 0; padding: 9px; }
.profile-color-controls input[type="color"] { height: 36px; padding: 2px; width: 50px; }

@media (max-width: 1180px) {
  .driver-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .driver-profile-facts { grid-template-columns: repeat(3, 1fr); }
  .driver-profile-facts div:nth-child(3) { border-right: 0; }
  .driver-profile-statline { grid-template-columns: repeat(4, 1fr); }
  .driver-career-grid { grid-template-columns: repeat(3, 1fr); }
  .driver-trophy-grid { grid-template-columns: repeat(3, 1fr); }
  .driver-milestone-grid { grid-template-columns: repeat(2, 1fr); }
  .driver-media-layout { grid-template-columns: 1fr; }
  .driver-profile-honors > div { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  .driver-directory-grid { grid-template-columns: 1fr; }
  .driver-directory-card { min-height: 390px; }
  .driver-card-portrait { height: 220px; }
  .driver-profile-hero { grid-template-columns: 1fr; min-height: 0; }
  .driver-profile-portrait { height: 360px; min-height: 0; }
  .driver-profile-portrait::after { background: linear-gradient(transparent 70%, #020712); }
  .driver-profile-identity { padding: 24px 18px 30px; }
  .driver-profile-hero.has-collectibles { min-height: 0; }
  .driver-profile-identity.has-collectibles { gap: 12px; grid-template-rows: auto auto auto; padding-block: 14px 24px; }
  .driver-collectible-shelf { padding: 12px 9px 9px; }
  .driver-collectible-shelf > div { gap: 6px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .driver-collectible-shelf figure { grid-template-rows: 78px auto; }
  .driver-collectible-shelf img { height: 78px; }
  .driver-profile-title { align-items: flex-end; gap: 15px; }
  .driver-profile-number { font-size: 4.8rem; }
  .driver-profile-number { max-width: 34%; min-width: 88px; }
  .driver-profile-number .has-text { font-size: clamp(2.7rem, 11vw, 4.6rem); }
  .driver-number-lockup.is-hero { height: 92px; width: 125px; }
  .driver-number-lockup.is-live-winner { height: 130px; width: 210px; }
  .driver-profile-title h2 { font-size: clamp(2.4rem, 14vw, 4.6rem); }
  .driver-profile-facts { grid-template-columns: 1fr 1fr; }
  .driver-profile-facts div,.driver-profile-facts div:nth-child(3) { border-bottom: 1px solid #ffffff12; border-right: 1px solid #ffffff12; padding: 14px 8px; }
  .driver-profile-facts div:nth-child(even) { border-right: 0; }
  .driver-profile-statline { grid-template-columns: repeat(2, 1fr); }
  .driver-profile-content { grid-template-columns: 1fr; }
  .driver-profile-soundtrack { align-items: stretch; flex-direction: column; gap: 14px; }
  .driver-profile-soundtrack audio { flex-basis: auto; min-width: 0; }
  .driver-career-grid { grid-template-columns: 1fr 1fr; }
  .driver-form-legend { justify-content: flex-start; margin-top: 0; }
  .driver-form-chart { grid-template-columns: repeat(10, minmax(34px, 1fr)); height: 230px; }
  .driver-trophy-room-header { align-items: start; gap: 18px; }
  .driver-trophy-totals { min-width: 112px; }
  .driver-trophy-grid { grid-template-columns: 1fr 1fr; }
  .driver-trophy { grid-template-rows: 190px auto auto; min-height: 250px; }
  .driver-trophy-art { height: 190px; }
  .driver-trophy-art img { transform: translateY(-20px); }
  .driver-trophy:hover .driver-trophy-art img,.driver-trophy:focus-visible .driver-trophy-art img { transform: translateY(-23px) scale(1.025); }
  .driver-trophy-shelf > header { grid-template-columns: auto 1fr; }
  .driver-trophy-shelf > header > small:last-child { display: none; }
  .driver-trophy-dialog { padding: 8px; }
  .driver-trophy-dialog > section { max-height: calc(100dvh - 16px); padding: 20px 18px 28px; }
  .driver-trophy-stage { height: min(55vh, 480px); }
  .driver-milestone-grid { grid-template-columns: 1fr; }
  .driver-media-grid { grid-template-columns: 1fr 1fr; }
  .driver-garage-layout { grid-template-columns: 1fr; }
  .driver-garage-feature { min-height: 0; }
  .driver-garage-grid { grid-template-columns: 1fr 1fr; }
  .driver-profile-honors > div { grid-template-columns: repeat(2, 1fr); }
  .driver-profile-studio { grid-column: 1 !important; }
  .profile-color-controls { grid-template-columns: 1fr; }
  .driver-portal-link { font-size: .65rem; padding: 9px 10px; right: 8px; top: 8px; }
  .profile-access-admin .button-row { grid-template-columns: 1fr 1fr; }
  .profile-access-audit article { grid-template-columns: 1fr; }
}

/* Admin profile roster and permanent identity controls */
.profile-roster-admin,.profile-identity-admin{display:grid;gap:12px;margin:0 0 18px;padding:16px;border:1px solid #24758a;background:linear-gradient(145deg,#071d2b,#020b14 72%);box-shadow:inset 0 0 30px #20dff40b}
.profile-identity-admin{border-color:#9f7a2c;background:linear-gradient(145deg,#161205,#06131d 58%,#020a12)}
.profile-roster-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid #245568}
.profile-roster-heading span{color:#2ce7ff;font:10px Race;text-transform:uppercase;letter-spacing:1px}
.profile-roster-heading strong{color:#f3d16a;font:12px Race;text-align:right;text-transform:uppercase}
.profile-roster-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.profile-roster-grid label{min-width:0}
.profile-roster-grid input,.profile-roster-grid select{width:100%;min-width:0}
.profile-roster-admin>button,.profile-identity-admin>button{min-height:46px;border-color:#41e9ff;background:linear-gradient(180deg,#149bb1,#075063);color:#020a12;font:11px Race}
.profile-identity-admin>button{border-color:#f3d16a;background:linear-gradient(180deg,#f3d16a,#9a6c18)}
.profile-identity-admin.is-private{border-color:#54717c;background:linear-gradient(145deg,#101922,#050b11)}
.profile-identity-admin.is-private .profile-roster-heading strong{color:#a9c0ca}
.profile-identity-admin.is-private #profileCarNumber{opacity:.55}
@media(max-width:680px){.profile-roster-grid{grid-template-columns:1fr}.profile-roster-heading{align-items:flex-start;flex-direction:column}.profile-roster-heading strong{text-align:left}}