.multijoueur-page {
  background: var(--color-carbon-950);
}

.multijoueur-page .section {
  position: relative;
}

.multijoueur-page .section::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / 2%) 0 1px, transparent 1px 18px);
  content: "";
  opacity: .3;
}

.multijoueur-page .section > .container {
  position: relative;
}

.multijoueur-page h2 {
  max-width: 14ch;
}

.multijoueur-hero {
  overflow: hidden;
}

.multijoueur-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "content media" "notice media";
  column-gap: var(--gutter);
  row-gap: var(--space-5);
  align-items: center;
}

.multijoueur-hero__content {
  grid-area: content;
  min-width: 0;
}

.multijoueur-hero__content > :last-child,
.multijoueur-hero__media > :last-child,
.multijoueur-hero__routes > :last-child {
  margin-block-end: 0;
}

.multijoueur-hero__intro {
  max-width: 38rem;
}

.multijoueur-hero__routes {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-2);
  margin-block: 0 var(--space-5);
}

.multijoueur-hero__routes a {
  display: flex;
  width: fit-content;
  min-width: 0;
  align-items: baseline;
  gap: var(--space-3);
  color: var(--color-ice-white);
  font-family: var(--font-heading);
  font-size: var(--text-intro);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-heading);
  text-decoration: none;
  text-transform: uppercase;
}

.multijoueur-hero__routes a::after {
  width: 2rem;
  height: 1px;
  background: var(--color-electric-cyan);
  content: "";
  transform-origin: left;
  transition: transform var(--transition-base);
}

.multijoueur-hero__routes a:hover::after,
.multijoueur-hero__routes a:focus-visible::after {
  transform: scaleX(1.8);
}

.multijoueur-hero__routes span {
  color: var(--color-electric-cyan);
  font-family: var(--font-mono);
  font-size: var(--text-telemetry);
}

.multijoueur-hero__actions {
  margin-block-end: 0;
}

.multijoueur-hero__media {
  grid-area: media;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-carbon-900);
}

.multijoueur-hero__media img {
  width: 100%;
  height: 31rem;
  object-fit: cover;
  object-position: 70% center;
}

.multijoueur-page figcaption {
  color: var(--color-titanium-500);
  font-size: var(--text-meta);
  line-height: var(--leading-meta);
}

.multijoueur-hero__media figcaption {
  padding: var(--space-3) var(--space-4);
}

.multijoueur-hero__notice {
  grid-area: notice;
  width: min(100%, 28.75rem);
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  color: var(--color-titanium-300);
  font-size: var(--text-meta);
  line-height: var(--leading-meta);
}

.multijoueur-overview {
  background: var(--color-carbon-900);
}

.multijoueur-overview__header {
  width: min(100%, 42.5rem);
  min-width: 0;
  margin-block-end: var(--space-6);
}

.multijoueur-overview__header > :last-child,
.multijoueur-course__header > :last-child,
.multijoueur-cross__header > :last-child,
.multijoueur-friends__header > :last-child,
.multijoueur-clubs__header > :last-child,
.multijoueur-drift__header > :last-child,
.multijoueur-controls__header > :last-child,
.multijoueur-next__conclusion > :last-child {
  margin-block-end: 0;
}

.multijoueur-overview__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
}

.multijoueur-overview__card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--color-border-subtle);
  border-inline-start-color: var(--color-border-active);
  background: var(--color-carbon-950);
}

.multijoueur-overview__card > * {
  min-width: 0;
  margin: 0;
}

.multijoueur-overview__card h3 {
  font-size: var(--text-card-title);
}

.multijoueur-course__header {
  width: min(100%, 38.75rem);
  min-width: 0;
  margin-block-end: var(--space-7);
}

.multijoueur-course__layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 2fr) minmax(0, 5fr);
  grid-template-areas: "one axis media" "two axis media" "media axis three" "media axis four";
  gap: var(--space-6) var(--gutter);
  align-items: start;
}

.multijoueur-course__layout::before {
  grid-area: axis;
  width: 1px;
  min-height: 100%;
  justify-self: center;
  background: linear-gradient(var(--color-electric-cyan), transparent 90%);
  content: "";
}

.multijoueur-course__module {
  position: relative;
  min-width: 0;
  padding: var(--space-5);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-carbon-900);
}

.multijoueur-course__module > :last-child {
  margin-block-end: 0;
}

.multijoueur-course__module--one { grid-area: one; }
.multijoueur-course__module--two { grid-area: two; background: var(--color-carbon-800); }
.multijoueur-course__module--three { grid-area: three; }
.multijoueur-course__module--four { grid-area: four; background: var(--color-carbon-800); }

.multijoueur-course__number {
  display: block;
  margin-block-end: var(--space-3);
  color: var(--color-titanium-500);
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: var(--weight-extrabold);
  line-height: 1;
}

.multijoueur-course__module h3 {
  max-width: 26rem;
}

.multijoueur-course__media {
  grid-area: media;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

.multijoueur-course__media img {
  width: 100%;
  height: 42rem;
  object-fit: cover;
  object-position: center;
}

.multijoueur-course__media figcaption {
  padding: var(--space-3) var(--space-4);
  background: var(--color-carbon-900);
}

.multijoueur-course__verbs {
  display: flex;
  max-width: 17.5rem;
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  color: var(--color-electric-cyan);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.multijoueur-cross {
  background: var(--color-carbon-900);
}

.multijoueur-cross__header {
  width: min(100%, 43rem);
  min-width: 0;
  margin-block-end: var(--space-6);
}

.multijoueur-cross__layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 1fr) minmax(0, 4fr);
  grid-template-areas: "main gap side";
  align-items: start;
}

.multijoueur-cross__main { grid-area: main; max-width: 37rem; }
.multijoueur-cross__side { grid-area: side; }

.multijoueur-cross__side {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-5);
}

.multijoueur-cross__side > * { min-width: 0; }
.multijoueur-cross__opinion { border-inline-start-color: var(--color-racing-yellow); }

.multijoueur-friends__header {
  width: min(100%, 42rem);
  min-width: 0;
  margin-block-end: var(--space-6);
}

.multijoueur-friends__layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: start;
}

.multijoueur-friends__context {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-5);
}

.multijoueur-friends__context > * { min-width: 0; }

.multijoueur-friends__media {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

.multijoueur-friends__media img {
  width: 100%;
  height: 31rem;
  object-fit: cover;
  object-position: center;
}

.multijoueur-friends__media figcaption {
  padding: var(--space-3) var(--space-4);
  background: var(--color-carbon-900);
}

.multijoueur-friends__checklist {
  width: min(75%, 47.5rem);
  min-width: 0;
  margin-block-start: var(--space-6);
}

.multijoueur-friends__checklist-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-5);
}

.multijoueur-friends__checklist-list p {
  min-width: 0;
  margin: 0;
}

.multijoueur-clubs {
  background: var(--color-carbon-900);
}

.multijoueur-clubs__header {
  width: min(100%, 41.25rem);
  min-width: 0;
  margin-block-end: var(--space-6);
}

.multijoueur-clubs__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: stretch;
}

.multijoueur-clubs__grid > * { min-width: 0; }
.multijoueur-clubs__opinion { border-inline-start-color: var(--color-racing-yellow); }

.multijoueur-clubs__note {
  width: 100%;
  min-width: 0;
  margin: var(--space-6) 0 0;
  padding: var(--space-3) var(--space-4);
  border-inline-start: 2px solid var(--color-electric-cyan);
  background: var(--color-carbon-800);
  color: var(--color-titanium-300);
  font-size: var(--text-meta);
  line-height: var(--leading-meta);
}

.multijoueur-rankings__opening {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--gutter);
  align-items: center;
  margin-block-end: var(--space-6);
}

.multijoueur-rankings__opening header {
  width: min(100%, 38.75rem);
  min-width: 0;
}

.multijoueur-rankings__opening header > :last-child { margin-block-end: 0; }

.multijoueur-rankings__media {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-card);
}

.multijoueur-rankings__media img {
  width: 100%;
  height: 19rem;
  object-fit: cover;
  object-position: center;
}

.multijoueur-rankings__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
}

.multijoueur-rankings__grid > * { min-width: 0; }

.multijoueur-rankings__ritual {
  margin-block-end: 0;
  color: var(--color-electric-cyan);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.multijoueur-rankings__closing {
  width: min(66.666%, 40rem);
  min-width: 0;
  margin-block-start: var(--space-6);
}

.multijoueur-drift {
  background: var(--color-carbon-900);
}

.multijoueur-drift__header {
  width: min(100%, 40rem);
  min-width: 0;
  margin-block-end: var(--space-6);
}

.multijoueur-drift__media {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

.multijoueur-drift__media img {
  width: 100%;
  height: 34rem;
  object-fit: cover;
  object-position: 72% center;
}

.multijoueur-drift__overlay {
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  width: min(50%, 34rem);
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-6);
  background: linear-gradient(90deg, rgb(8 11 15 / 96%), rgb(8 11 15 / 72%), transparent);
}

.multijoueur-drift__overlay > * { margin: 0; }
.multijoueur-drift__overlay p { max-width: 33.75rem; }
.multijoueur-drift__mobile-copy { display: none; }

.multijoueur-drift__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
  margin-block-start: var(--space-6);
}

.multijoueur-drift__grid > * { min-width: 0; }

.multijoueur-drift__keyword {
  margin-block-end: 0;
  color: var(--color-racing-yellow);
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.multijoueur-controls__header {
  width: min(100%, 42.5rem);
  min-width: 0;
  margin-inline: auto;
  margin-block-end: var(--space-6);
}

.multijoueur-controls__comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
}

.multijoueur-controls__comparison > * { min-width: 0; }

.multijoueur-controls__protocol {
  width: min(75%, 47.5rem);
  min-width: 0;
  margin-block-start: var(--space-6);
}

.multijoueur-controls__steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-5);
}

.multijoueur-controls__steps p { min-width: 0; margin: 0; }

.multijoueur-controls__opinion {
  width: min(66.666%, 40rem);
  min-width: 0;
  margin-block-start: var(--space-6);
  padding-inline-start: var(--space-5);
  border-inline-start: 2px solid var(--color-racing-yellow);
}

.multijoueur-controls__opinion > :last-child { margin-block-end: 0; }

.multijoueur-next {
  background: var(--color-carbon-900);
}

.multijoueur-next__conclusion {
  width: min(58.333%, 38.75rem);
  min-width: 0;
  padding: var(--space-6);
  border-top: 1px solid var(--color-electric-cyan);
  background: var(--color-carbon-800);
}

.multijoueur-next__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
  margin-block: var(--space-6);
}

.multijoueur-next__card {
  display: flex;
  min-width: 0;
  min-height: 11rem;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  color: var(--color-ice-white);
  text-decoration: none;
}

.multijoueur-next__card:hover {
  border-color: var(--color-electric-cyan);
  color: var(--color-ice-white);
}

.multijoueur-next__card span {
  color: var(--color-electric-cyan);
  font-family: var(--font-mono);
  font-size: var(--text-telemetry);
  font-weight: var(--weight-bold);
}

.multijoueur-next__card strong {
  font-family: var(--font-heading);
  font-size: var(--text-card-title);
  letter-spacing: var(--tracking-heading);
  line-height: 1;
  text-transform: uppercase;
}

.multijoueur-next__card small {
  color: var(--color-titanium-300);
}

.multijoueur-next__disclaimer {
  width: min(66.666%, 45rem);
  min-width: 0;
  margin: 0;
  padding-block-start: var(--space-4);
  border-top: 1px solid var(--color-border);
  color: var(--color-titanium-300);
  font-size: var(--text-meta);
  line-height: var(--leading-meta);
}

@media (max-width: 1050px) {
  .multijoueur-overview__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
  .multijoueur-course__layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "one media" "two media" "three four";
  }
  .multijoueur-course__layout::before { display: none; }
  .multijoueur-course__media img { height: 100%; min-height: 34rem; }
}

@media (max-width: 980px) {
  .multijoueur-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "content" "media" "notice";
  }
  .multijoueur-hero__media img { height: auto; aspect-ratio: 16 / 9; }
  .multijoueur-friends__layout { grid-template-columns: minmax(0, 1fr); }
  .multijoueur-friends__media img { height: auto; aspect-ratio: 16 / 9; }
  .multijoueur-friends__checklist { width: min(100%, 47.5rem); }
}

@media (max-width: 960px) {
  .multijoueur-clubs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .multijoueur-clubs__grid > :nth-child(3) { grid-column: 1 / 2; }
  .multijoueur-rankings__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .multijoueur-rankings__grid > :nth-child(3) { grid-column: 1 / 2; }
  .multijoueur-next__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .multijoueur-next__grid > :nth-child(3) { grid-column: 1 / 2; }
}

@media (max-width: 940px) {
  .multijoueur-cross__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "main" "side";
    gap: var(--space-5);
  }
  .multijoueur-cross__main { max-width: 37rem; }
  .multijoueur-cross__side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gutter);
  }
}

@media (max-width: 900px) {
  .multijoueur-controls__comparison { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 880px) {
  .multijoueur-drift__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 820px) {
  .multijoueur-course__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "one" "media" "two" "three" "four";
  }
  .multijoueur-course__media img { height: auto; min-height: 0; aspect-ratio: 3 / 2; }
}

@media (max-width: 760px) {
  .multijoueur-page h2 { max-width: none; }
  .multijoueur-hero__grid { row-gap: var(--space-5); }
  .multijoueur-hero__content h1 { font-size: 3rem; line-height: 1.04; }
  .multijoueur-hero__intro { max-width: none; font-size: 1.0625rem; line-height: 1.588; }
  .multijoueur-hero__media img { aspect-ratio: 16 / 10; object-position: 62% center; }
  .multijoueur-hero__notice { width: 100%; }
  .multijoueur-overview__grid,
  .multijoueur-clubs__grid,
  .multijoueur-rankings__grid,
  .multijoueur-next__grid,
  .multijoueur-cross__side,
  .multijoueur-friends__checklist-list,
  .multijoueur-controls__steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .multijoueur-clubs__grid > :nth-child(3),
  .multijoueur-rankings__grid > :nth-child(3),
  .multijoueur-next__grid > :nth-child(3) { grid-column: auto; }
  .multijoueur-course__header,
  .multijoueur-overview__header,
  .multijoueur-cross__header,
  .multijoueur-friends__header,
  .multijoueur-clubs__header,
  .multijoueur-rankings__opening header,
  .multijoueur-drift__header,
  .multijoueur-controls__header,
  .multijoueur-next__conclusion,
  .multijoueur-rankings__closing,
  .multijoueur-controls__protocol,
  .multijoueur-controls__opinion,
  .multijoueur-next__disclaimer {
    width: 100%;
  }
  .multijoueur-controls__header { margin-inline: 0; }
  .multijoueur-rankings__opening { grid-template-columns: minmax(0, 1fr); }
  .multijoueur-rankings__media { order: 2; }
  .multijoueur-rankings__media img { height: auto; aspect-ratio: 3 / 2; }
  .multijoueur-drift__media img { height: auto; aspect-ratio: 16 / 10; object-position: center; }
  .multijoueur-drift__overlay { display: none; }
  .multijoueur-drift__mobile-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-3);
    margin-block-start: var(--space-5);
  }
  .multijoueur-drift__mobile-copy > * { margin: 0; }
  .multijoueur-next__conclusion { padding: var(--space-5); }
  .multijoueur-next__card { min-height: 9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .multijoueur-hero__routes a::after { transition: none; }
}