.collaborators-section {
  position: relative;
  padding: clamp(5rem, 9vw, 9rem) clamp(1.25rem, 5vw, 5rem);
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 74, 174, .16), transparent 31%),
    radial-gradient(circle at 12% 74%, rgba(168, 121, 255, .12), transparent 28%),
    #090a0f;
}
.collaborators-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .15;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(90deg, black, transparent 82%);
}
.collaborators-heading,
.collaborator-grid {
  position: relative;
  z-index: 1;
  width: min(1240px, 100%);
  margin-inline: auto;
}
.collaborators-heading {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: clamp(2rem, 7vw, 8rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.collaborators-heading h2 {
  margin: 0;
  font-size: clamp(3.4rem, 7.5vw, 7.8rem);
  line-height: .82;
  letter-spacing: -.055em;
}
.collaborators-heading h2 i { color: #ff6abb; }
.collaborators-heading > p {
  max-width: 520px;
  margin: 0 0 .4rem;
  color: #a8aaad;
  font-size: clamp(.92rem, 1.2vw, 1.06rem);
  line-height: 1.75;
}
.collaborator-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, .45fr);
  gap: 1.25rem;
}
.collaborator-card {
  display: grid;
  grid-template-columns: minmax(270px, .75fr) minmax(0, 1.25fr);
  min-height: 410px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(17, 17, 25, .86);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  grid-column: 1;
}
.collaborator-card:hover,
.collaborator-card:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(255, 106, 187, .78);
  box-shadow: 0 26px 70px rgba(0,0,0,.38), 0 0 34px rgba(255, 74, 174, .12);
}
.collaborator-card:focus-visible { outline: 3px solid var(--acid); outline-offset: 4px; }
.collaborator-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 360px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(168, 121, 255, .26), transparent 50%),
    linear-gradient(315deg, rgba(255, 74, 174, .24), transparent 48%),
    #15101d;
}
.collaborator-visual::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255,255,255,.13);
}
.collaborator-orbit {
  position: absolute;
  width: 270px;
  height: 270px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  box-shadow: inset 0 0 50px rgba(255,106,187,.1);
}
.collaborator-orbit::before,
.collaborator-orbit::after {
  content: "";
  position: absolute;
  inset: 30px;
  border: 1px dashed rgba(216,255,62,.34);
  border-radius: inherit;
}
.collaborator-orbit::after { inset: 70px; border-style: solid; border-color: rgba(255,255,255,.14); }
.mandy-sprite-frame {
  position: relative;
  z-index: 2;
  display: block;
  width: 128px;
  height: 128px;
  overflow: hidden;
  transform: scale(2.05);
  transform-origin: center;
  image-rendering: pixelated;
  filter: drop-shadow(0 18px 12px rgba(0,0,0,.45));
}
.mandy-sprite-frame img { width: 896px; max-width: none; height: 128px; }
.duo-sprite-pair {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 270px;
  filter: drop-shadow(0 18px 12px rgba(0,0,0,.45));
}
.fighter-sprite-frame {
  display: block;
  width: 128px;
  height: 128px;
  overflow: hidden;
  image-rendering: pixelated;
}
.fighter-sprite-frame:first-child { transform: translateX(18px) scale(1.55); transform-origin: bottom center; }
.fighter-sprite-frame:last-child { transform: translateX(-18px) scale(1.55); transform-origin: bottom center; }
.fighter-sprite-frame img { width: 896px; max-width: none; height: 128px; }
.collaborator-number {
  position: absolute;
  right: 24px;
  bottom: 18px;
  z-index: 3;
  color: rgba(255,255,255,.22);
  font-family: var(--display);
  font-size: 4rem;
  font-weight: 900;
  line-height: 1;
}
.collaborator-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 5vw, 4.5rem);
}
.collaborator-copy > span {
  color: #ff88c8;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.collaborator-copy h3 {
  margin: .75rem 0 1.15rem;
  font-size: clamp(3rem, 5.5vw, 6.2rem);
  line-height: .84;
  letter-spacing: -.05em;
}
.collaborator-freedom .collaborator-copy h3 { font-size: clamp(2.7rem, 4.8vw, 5.35rem); }
.collaborator-copy p {
  max-width: 570px;
  margin: 0;
  color: #aaabb0;
  line-height: 1.72;
}
.collaborator-copy strong {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin-top: 2rem;
  color: var(--acid);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.collaborator-copy strong b { font-size: 1.2rem; }
.collaborator-manifesto {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 410px;
  padding: clamp(2rem, 4vw, 3.5rem);
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.035);
  grid-column: 2;
  grid-row: 1 / span 2;
  min-height: 100%;
}
.collaborator-manifesto > span,
.collaborator-manifesto small {
  color: #85878b;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .16em;
}
.collaborator-manifesto p {
  margin: 3rem 0;
  color: #d3d2d0;
  font-family: var(--display);
  font-size: clamp(1.65rem, 2.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.08;
  text-transform: uppercase;
}
.collaborator-manifesto small { color: var(--acid); text-transform: uppercase; }

/* Creator spotlight page */
.creator-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 85% 18%, rgba(255, 74, 174, .18), transparent 28%),
    radial-gradient(circle at 9% 72%, rgba(168, 121, 255, .14), transparent 30%),
    #08090d;
}
.creator-page .noise { z-index: 50; }
.creator-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 0 clamp(1.25rem, 5vw, 5rem);
  border-bottom: 1px solid rgba(255,255,255,.13);
  background: rgba(8,9,13,.74);
  backdrop-filter: blur(16px);
}
.creator-header .brand { color: var(--paper); }
.creator-back {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: #a8aaad;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.creator-back:hover { color: var(--acid); }
.creator-main { overflow: hidden; }
.creator-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
  min-height: calc(100svh - 76px);
  border-bottom: 1px solid rgba(255,255,255,.13);
}
.creator-hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(4.5rem, 8vw, 9rem) clamp(1.25rem, 6vw, 7rem);
}
.creator-hero-copy h1 {
  max-width: 900px;
  font-size: clamp(5rem, 10.2vw, 11.5rem);
  line-height: .76;
  letter-spacing: -.07em;
}
.creator-hero-copy h1 i { color: #ff6abb; }
.creator-freedom-page .creator-hero-copy h1 { font-size: clamp(4.4rem, 8.8vw, 9.8rem); }
.creator-hero-lede {
  max-width: 660px;
  margin: 2rem 0 0;
  color: #b1b2b6;
  font-size: clamp(1rem, 1.35vw, 1.22rem);
  line-height: 1.72;
}
.creator-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 2.2rem;
}
.creator-primary,
.creator-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: .85rem 1.35rem;
  border: 1px solid rgba(255,255,255,.22);
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
  transition: transform .2s, background .2s, color .2s;
}
.creator-primary { border-color: var(--acid); background: var(--acid); color: var(--ink); }
.creator-secondary { background: rgba(255,255,255,.035); }
.creator-primary:hover,
.creator-secondary:hover { transform: translateY(-3px); }
.creator-secondary:hover { border-color: #ff6abb; color: #ff9bd1; }
.creator-hero-art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 620px;
  overflow: hidden;
  border-left: 1px solid rgba(255,255,255,.13);
  background: #141118;
}
.creator-hero-art::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 8%;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  box-shadow: 0 0 90px rgba(255,74,174,.18), inset 0 0 80px rgba(0,0,0,.44);
}
.creator-hero-art::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 42%, rgba(8,7,12,.74) 100%),
    linear-gradient(90deg, rgba(9,7,15,.22), transparent 48%);
  pointer-events: none;
}
.creator-portrait {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  filter: saturate(.9) contrast(1.04);
}
.creator-pixel-card {
  position: absolute;
  left: clamp(1.25rem, 3vw, 3rem);
  bottom: clamp(1.5rem, 4vw, 4rem);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 188px;
  min-height: 196px;
  padding: 1rem .75rem .75rem;
  border: 1px solid rgba(255,255,255,.42);
  background: rgba(13,9,18,.86);
  box-shadow: 0 18px 48px rgba(0,0,0,.42), 0 0 28px rgba(255,74,174,.16);
  backdrop-filter: blur(8px);
}
.creator-pixel-card .mandy-sprite-frame { transform: scale(1.28); }
.creator-duo-art {
  background:
    radial-gradient(circle at 34% 42%, rgba(255, 209, 61, .32), transparent 24%),
    radial-gradient(circle at 70% 42%, rgba(67, 215, 255, .3), transparent 26%),
    linear-gradient(145deg, #21152f, #07151d 72%);
}
.creator-duo-art::before { border-radius: 0; transform: rotate(-7deg); }
.creator-duo-stage {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(1rem, 3vw, 3rem);
  width: min(620px, 92%);
  padding-bottom: 4rem;
}
.creator-duo-fighter {
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  width: 44%;
}
.creator-duo-fighter .fighter-sprite-frame {
  transform: scale(clamp(1.5, 2.6vw, 2.3));
  filter: drop-shadow(0 26px 18px rgba(0,0,0,.5));
}
.creator-duo-fighter strong,
.creator-duo-fighter span:last-child {
  position: relative;
  z-index: 4;
  text-align: center;
  text-transform: uppercase;
}
.creator-duo-fighter strong {
  color: var(--paper);
  font-family: var(--display);
  font-size: clamp(1.1rem, 2vw, 1.7rem);
  line-height: .95;
}
.creator-duo-fighter span:last-child {
  color: var(--acid);
  font-size: .56rem;
  font-weight: 900;
  letter-spacing: .12em;
}
.creator-duo-art .creator-fighter-tag { max-width: 310px; }
.creator-pixel-card > span:last-child {
  position: relative;
  z-index: 2;
  margin-top: .75rem;
  color: var(--acid);
  font-size: .57rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-align: center;
  text-transform: uppercase;
}
.creator-fighter-tag {
  position: absolute;
  right: clamp(1.25rem, 3vw, 3rem);
  bottom: clamp(1.5rem, 4vw, 4rem);
  z-index: 3;
  max-width: 250px;
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--acid);
  background: rgba(5,5,9,.82);
  color: #c8c8cb;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .11em;
  line-height: 1.6;
  text-transform: uppercase;
}
.creator-ticker {
  display: flex;
  gap: 2rem;
  overflow: hidden;
  padding: 1rem 0;
  background: #ff6abb;
  color: #100a10;
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.1vw, 2rem);
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.creator-ticker span { flex: none; }
.creator-ticker i { margin-inline: 2rem; font-style: normal; }
.creator-profile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .7fr);
  gap: clamp(3rem, 8vw, 9rem);
  width: min(1180px, calc(100% - 2.5rem));
  margin-inline: auto;
  padding: clamp(5rem, 10vw, 10rem) 0;
}
.creator-profile h2,
.creator-game-panel h2 {
  margin: 0;
  font-size: clamp(3.5rem, 7vw, 7.4rem);
  line-height: .82;
  letter-spacing: -.055em;
}
.creator-profile h2 i,
.creator-game-panel h2 i { color: #ff6abb; }
.creator-profile-copy > p:not(.eyebrow) {
  max-width: 720px;
  color: #aaa9ae;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.82;
}
.creator-profile-copy .creator-profile-lede { color: #e0dedc; font-size: clamp(1.2rem, 1.8vw, 1.55rem); }
.creator-links {
  display: grid;
  align-content: start;
  border-top: 1px solid rgba(255,255,255,.16);
}
.creator-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem .25rem;
  border-bottom: 1px solid rgba(255,255,255,.16);
  color: #cac9c7;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.creator-links a span { color: #777981; font-size: .62rem; }
.creator-links a b { color: var(--acid); font-size: 1.2rem; }
.creator-links a:hover { color: #ff84c5; }
.creator-game-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(2.5rem, 7vw, 8rem);
  padding: clamp(5rem, 9vw, 9rem) clamp(1.25rem, 6vw, 7rem);
  border-top: 1px solid rgba(255,255,255,.13);
  background:
    linear-gradient(90deg, rgba(5,6,9,.98), rgba(5,6,9,.62)),
    url("/assets/promo/melee-mayhem-key-art-wide.png") center/cover;
}
.creator-game-copy { position: relative; z-index: 2; }
.creator-game-copy > p:not(.eyebrow) {
  max-width: 620px;
  margin: 1.5rem 0 2rem;
  color: #b1b1b4;
  line-height: 1.75;
}
.creator-move-list {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.13);
}
.creator-move-list article {
  min-height: 148px;
  padding: 1.5rem;
  background: rgba(11,10,16,.9);
}
.creator-move-list span { color: #ff77bf; font-size: .6rem; font-weight: 900; letter-spacing: .14em; }
.creator-move-list h3 { margin: .55rem 0 0; font-size: 1.5rem; line-height: 1; }
.creator-page-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem clamp(1.25rem, 5vw, 5rem);
  border-top: 1px solid rgba(255,255,255,.13);
  color: #77797d;
  font-size: .63rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.creator-page-footer a:hover { color: var(--acid); }

@media (max-width: 980px) {
  .collaborators-heading,
  .collaborator-grid,
  .creator-profile,
  .creator-game-panel { grid-template-columns: 1fr; }
  .collaborator-card,
  .collaborator-manifesto { grid-column: auto; grid-row: auto; }
  .collaborator-manifesto { min-height: 280px; }
  .creator-hero { grid-template-columns: 1fr; }
  .creator-hero-art { min-height: 560px; border-top: 1px solid rgba(255,255,255,.13); border-left: 0; }
  .creator-game-panel { background-position: center; }
}

@media (max-width: 700px) {
  .collaborators-section { padding-block: 4.5rem; }
  .collaborators-heading { display: block; }
  .collaborators-heading > p { margin-top: 1.5rem; }
  .collaborator-card { grid-template-columns: 1fr; }
  .collaborator-visual { min-height: 320px; }
  .collaborator-copy { padding: 2rem 1.5rem 2.4rem; }
  .collaborator-copy h3 { font-size: 3.7rem; }
  .duo-sprite-pair { transform: scale(.9); }
  .creator-header { min-height: 66px; }
  .creator-header .brand-name em { display: none; }
  .creator-back { font-size: .58rem; }
  .creator-hero { min-height: 0; }
  .creator-hero-copy { padding-block: 5rem 4rem; }
  .creator-hero-copy h1 { font-size: clamp(4.8rem, 23vw, 7.1rem); }
  .creator-freedom-page .creator-hero-copy h1 {
    max-width: 100%;
    font-size: clamp(2.4rem, 10.5vw, 3.2rem);
    letter-spacing: -.075em;
  }
  .creator-freedom-page .creator-actions { flex-direction: column; }
  .creator-freedom-page .creator-actions a { width: 100%; }
  .creator-hero-art { min-height: 470px; }
  .creator-pixel-card {
    left: 1rem;
    bottom: 1rem;
    width: 150px;
    min-height: 164px;
    padding: .65rem .5rem;
  }
  .creator-pixel-card .mandy-sprite-frame { transform: scale(1.05); }
  .creator-duo-stage { gap: 0; padding-bottom: 2.25rem; }
  .creator-duo-fighter { width: 50%; gap: 1rem; }
  .creator-duo-fighter .fighter-sprite-frame { transform: scale(1.12); }
  .creator-duo-fighter strong { font-size: 1rem; }
  .creator-duo-fighter span:last-child { font-size: .48rem; }
  .creator-pixel-card > span:last-child { margin-top: .25rem; font-size: .5rem; }
  .creator-fighter-tag { display: none; }
  .creator-profile { width: min(100% - 2.5rem, 1180px); padding-block: 5rem; }
  .creator-profile h2,
  .creator-game-panel h2 { font-size: clamp(3.5rem, 18vw, 5.2rem); }
  .creator-move-list { grid-template-columns: 1fr; }
  .creator-game-panel { padding-block: 5rem; }
  .creator-page-footer { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .collaborator-card,
  .creator-primary,
  .creator-secondary { transition: none; }
}