/* ==========================================================================
   FANTASY BOSSES INC — personalized manager experience layer
   Scoped to .mpx-* so the legacy site and reusable archive renderer remain
   untouched. Every concept receives its own visual and interaction grammar.
   ========================================================================== */

.page-manager-v2 {
  --mpx-primary: #a9def7;
  --mpx-secondary: #f47a38;
  --mpx-ink: #0b1e2d;
  --mpx-highlight: #f5efe2;
}

.mpx-hero-concept {
  position: relative;
  margin: 0 0 clamp(1.1rem, 2vw, 1.8rem);
  padding: 1rem 0 1.2rem 1.15rem;
  border-left: 3px solid var(--mpx-secondary);
}

.mpx-hero-concept::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: min(22rem, 80%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--mpx-primary) 15%, transparent), transparent);
  pointer-events: none;
}

.mpx-hero-concept > * {
  position: relative;
}

.mpx-concept-label {
  display: block;
  margin-bottom: .35rem;
  color: var(--mpx-primary);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.mpx-hero-concept h2 {
  margin: 0;
  max-width: 15ch;
  color: #fff;
  font: 800 clamp(2rem, 5vw, 4.2rem)/.88 "Big Shoulders Display", sans-serif;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.mpx-hero-concept p {
  max-width: 52ch;
  margin: .65rem 0 0;
  color: rgba(255,255,255,.74);
  font-size: .95rem;
  line-height: 1.55;
}

.mpx-motif-row {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .9rem;
}

.mpx-motif-row span {
  padding: .32rem .55rem;
  border: 1px solid color-mix(in srgb, var(--mpx-primary) 36%, transparent);
  color: color-mix(in srgb, var(--mpx-primary) 78%, white);
  background: rgba(3,8,13,.42);
  font: 600 .62rem/1.2 "IBM Plex Mono", monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.mpx-experience {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #eef5f8;
  background:
    radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--mpx-primary) 22%, transparent), transparent 34rem),
    radial-gradient(circle at 3% 42%, color-mix(in srgb, var(--mpx-secondary) 16%, transparent), transparent 32rem),
    #080d12;
  border-block: 1px solid rgba(255,255,255,.1);
}

.mpx-experience > .wrap {
  position: relative;
  z-index: 2;
}

.mpx-backdrop,
.mpx-backdrop i {
  position: absolute;
  pointer-events: none;
}

.mpx-backdrop {
  inset: 0;
  z-index: -1;
  overflow: hidden;
  opacity: .48;
}

.mpx-backdrop i:nth-child(1) {
  inset: 3rem -8rem auto auto;
  width: 29rem;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--mpx-primary) 40%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 3rem rgba(255,255,255,.014), 0 0 0 7rem rgba(255,255,255,.01);
}

.mpx-backdrop i:nth-child(2) {
  inset: 22% auto auto -8rem;
  width: 18rem;
  height: 42rem;
  border-left: 1px solid var(--mpx-secondary);
  transform: rotate(19deg);
  opacity: .35;
}

.mpx-backdrop i:nth-child(3) {
  inset: auto 0 7rem;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mpx-primary), transparent);
  opacity: .35;
}

.mpx-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2rem;
  margin-bottom: clamp(2rem, 4vw, 4rem);
}

.mpx-section-head h2,
.mpx-story-heading h2 {
  max-width: 13ch;
  margin: .35rem 0 .7rem;
  color: #fff;
  font: 800 clamp(2.8rem, 7vw, 6.6rem)/.84 "Big Shoulders Display", sans-serif;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.mpx-section-head p {
  max-width: 62ch;
  margin: 0;
  color: rgba(238,245,248,.68);
  line-height: 1.7;
}

.mpx-palette {
  display: flex;
  gap: .35rem;
}

.mpx-palette span {
  display: grid;
  justify-items: center;
}

.mpx-palette i {
  width: clamp(1.5rem, 3vw, 2.4rem);
  aspect-ratio: 1;
  background: var(--swatch);
  border: 1px solid rgba(255,255,255,.3);
  box-shadow: inset 0 0 0 4px rgba(0,0,0,.08);
}

.mpx-signature {
  display: grid;
  grid-template-columns: minmax(15rem, .72fr) minmax(0, 1.28fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(1.35rem, 3vw, 2.8rem);
  border: 1px solid color-mix(in srgb, var(--mpx-primary) 32%, rgba(255,255,255,.1));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--mpx-ink) 64%, #060b10), rgba(7,12,17,.9)),
    #0b1118;
  box-shadow: 0 2.2rem 6rem rgba(0,0,0,.34);
}

.mpx-signature__header {
  align-self: center;
}

.mpx-signature__header h3 {
  max-width: 12ch;
  margin: .5rem 0 .9rem;
  color: #fff;
  font: 800 clamp(2.25rem, 5vw, 4.7rem)/.88 "Big Shoulders Display", sans-serif;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.mpx-signature__header p {
  margin: 0;
  color: rgba(255,255,255,.65);
  line-height: 1.65;
}

.mpx-signature__body {
  position: relative;
  min-width: 0;
  padding: clamp(1rem, 3vw, 2rem);
  color: #f8fbfc;
  background: rgba(2,7,11,.58);
  border: 1px solid rgba(255,255,255,.09);
}

.mpx-signature__status {
  grid-column: 1 / -1;
  min-height: 2.7rem;
  margin: 0;
  padding: .75rem 1rem;
  color: color-mix(in srgb, var(--mpx-primary) 78%, white);
  background: rgba(0,0,0,.28);
  border-left: 2px solid var(--mpx-secondary);
  font-size: .72rem;
  line-height: 1.5;
}

.mpx-control-note {
  margin: .8rem 0 0;
  color: rgba(255,255,255,.58);
  font-size: .75rem;
  line-height: 1.5;
}

.mpx-control-note strong {
  color: var(--mpx-primary);
}

.mpx-range-label {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0 .4rem;
  color: rgba(255,255,255,.7);
  font: 600 .68rem/1.2 "IBM Plex Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mpx-range-label output {
  color: var(--mpx-primary);
}

.mpx-range {
  width: 100%;
  height: 1.65rem;
  margin: 0;
  accent-color: var(--mpx-secondary);
  cursor: ew-resize;
}

.mpx-range:focus-visible,
.mpx-action:focus-visible,
.mpx-signature button:focus-visible,
.mpx-signature select:focus-visible {
  outline: 3px solid var(--mpx-primary);
  outline-offset: 4px;
}

.mpx-action {
  padding: .72rem 1rem;
  color: #071016;
  background: var(--mpx-primary);
  border: 0;
  font: 800 .72rem/1 "IBM Plex Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

.mpx-story-heading {
  margin: clamp(4.5rem, 9vw, 8rem) 0 2rem;
}

.mpx-story-stack {
  display: grid;
  gap: 1.1rem;
}

.mpx-story {
  display: grid;
  grid-template-columns: minmax(10rem, .65fr) minmax(0, 1.35fr);
  min-height: 21rem;
  overflow: hidden;
  background: linear-gradient(110deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  border: 1px solid rgba(255,255,255,.1);
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity .65s ease calc(var(--story-index) * 80ms), transform .65s ease calc(var(--story-index) * 80ms), border-color .25s ease;
}

.mpx-story.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.mpx-story:hover {
  border-color: color-mix(in srgb, var(--mpx-primary) 58%, transparent);
}

.mpx-story__visual {
  position: relative;
  isolation: isolate;
  min-height: 18rem;
  overflow: hidden;
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--mpx-primary) 25%, transparent), transparent 60%),
    color-mix(in srgb, var(--mpx-ink) 72%, #060a0e);
}

.mpx-story__visual b {
  position: absolute;
  right: .7rem;
  bottom: -.18em;
  z-index: 2;
  color: rgba(255,255,255,.18);
  font: 900 clamp(5rem, 14vw, 11rem)/.8 "Big Shoulders Display", sans-serif;
}

.mpx-story__visual i {
  position: absolute;
  display: block;
}

.mpx-story__visual i:nth-child(1) {
  inset: 14% auto auto 13%;
  width: 62%;
  aspect-ratio: 1;
  border: 1px solid var(--mpx-primary);
  border-radius: 50%;
  opacity: .5;
}

.mpx-story__visual i:nth-child(2) {
  inset: 24% auto auto 24%;
  width: 40%;
  aspect-ratio: 1;
  background: color-mix(in srgb, var(--mpx-secondary) 52%, transparent);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.mpx-story__visual i:nth-child(3) {
  inset: auto 0 17%;
  height: 1px;
  width: 84%;
  background: linear-gradient(90deg, transparent, var(--mpx-highlight));
}

.mpx-story__copy {
  display: grid;
  align-content: center;
  padding: clamp(1.2rem, 4vw, 3.25rem);
}

.mpx-mode {
  color: var(--mpx-primary);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.mpx-story h3 {
  margin: .35rem 0 .65rem;
  color: #fff;
  font: 800 clamp(2rem, 4vw, 3.6rem)/.9 "Big Shoulders Display", sans-serif;
  text-transform: uppercase;
}

.mpx-story__copy > p {
  max-width: 60ch;
  margin: 0 0 1.2rem;
  color: rgba(255,255,255,.62);
  line-height: 1.55;
}

.mpx-facts {
  display: grid;
  gap: .55rem;
  margin: 0;
}

.mpx-fact {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: .8rem;
  padding: .7rem 0;
  border-top: 1px solid rgba(255,255,255,.09);
}

.mpx-fact dt {
  display: flex;
  align-items: center;
  gap: .45rem;
  color: color-mix(in srgb, var(--mpx-primary) 78%, white);
  font: 600 .58rem/1.2 "IBM Plex Mono", monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.mpx-proof-dot {
  width: .42rem;
  aspect-ratio: 1;
  background: var(--mpx-secondary);
  border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mpx-secondary) 18%, transparent);
}

.mpx-fact dd {
  display: grid;
  gap: .24rem;
  margin: 0;
}

.mpx-fact dd strong {
  color: #fff;
  font-size: .88rem;
}

.mpx-fact dd span {
  color: rgba(255,255,255,.55);
  font-size: .73rem;
  line-height: 1.45;
}

.mpx-motion-board {
  display: grid;
  grid-template-columns: minmax(12rem, .55fr) minmax(0, 1.45fr);
  gap: 2rem;
  margin-top: clamp(4rem, 8vw, 7rem);
  padding: clamp(1.4rem, 3vw, 2.5rem);
  color: #0a1118;
  background: var(--mpx-primary);
}

.mpx-motion-board h3 {
  margin: .35rem 0 0;
  font: 800 clamp(2rem, 4vw, 3.4rem)/.9 "Big Shoulders Display", sans-serif;
  text-transform: uppercase;
}

.mpx-motion-board ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mpx-motion-board li {
  position: relative;
  min-height: 9rem;
  padding: .8rem;
  overflow: hidden;
  background: rgba(6,13,19,.9);
  color: white;
}

.mpx-motion-board li > i {
  position: absolute;
  top: -.6rem;
  right: -.6rem;
  width: 4rem;
  aspect-ratio: 1;
  border: 1px solid var(--mpx-secondary);
  border-radius: 50%;
  animation: mpx-orbit 6s linear infinite;
}

.mpx-motion-board li span {
  color: var(--mpx-secondary);
  font-size: .65rem;
}

.mpx-motion-board li p {
  position: relative;
  margin: 2rem 0 0;
  font-size: .72rem;
  line-height: 1.5;
}

.mpx-truth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

.mpx-truth-card {
  padding: clamp(1.3rem, 3vw, 2.4rem);
  border: 1px solid rgba(255,255,255,.1);
}

.mpx-truth-card h3 {
  margin: .4rem 0 1.2rem;
  color: #fff;
  font: 800 clamp(2rem, 3.5vw, 3.1rem)/.95 "Big Shoulders Display", sans-serif;
  text-transform: uppercase;
}

.mpx-truth-card--archive {
  background: color-mix(in srgb, var(--mpx-ink) 58%, #070c11);
}

.mpx-truth-card--persona {
  background: linear-gradient(150deg, color-mix(in srgb, var(--mpx-secondary) 18%, #080d12), #080d12);
}

.mpx-fact-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.mpx-fact-cloud span {
  padding: .55rem .7rem;
  color: color-mix(in srgb, var(--mpx-primary) 72%, white);
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.1);
  font: 600 .68rem/1.25 "IBM Plex Mono", monospace;
}

.mpx-truth-card ul {
  display: grid;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mpx-truth-card li {
  padding-top: .75rem;
  border-top: 1px solid rgba(255,255,255,.1);
}

.mpx-truth-card li p {
  margin: 0 0 .45rem;
  color: rgba(255,255,255,.82);
  font-size: .8rem;
  line-height: 1.45;
}

.mpx-truth-card li small {
  display: block;
  color: rgba(255,255,255,.48);
  font-size: .65rem;
  line-height: 1.5;
}

.mpx-truth-card li small b {
  color: var(--mpx-primary);
}

.mpx-lore-boundary {
  margin: 1rem 0 0;
  padding: .8rem;
  color: rgba(255,255,255,.56);
  background: rgba(0,0,0,.24);
  border-left: 2px solid var(--mpx-secondary);
  font-size: .68rem;
  line-height: 1.55;
}

.mpx-lore-boundary b {
  color: var(--mpx-primary);
}

/* Baylor — a banner physically rises and resolves the inaugural final. */
.mpx-pennant-scene {
  position: relative;
  min-height: 18rem;
  overflow: hidden;
  background: linear-gradient(#08141d, #183246);
  border-bottom: .4rem solid rgba(255,255,255,.12);
}

.mpx-pennant-pole {
  position: absolute;
  inset: 1rem auto 0 18%;
  width: .34rem;
  background: linear-gradient(90deg, #654827, #e9d39c, #654827);
}

.mpx-pennant {
  position: absolute;
  left: calc(18% + .34rem);
  bottom: calc(1.2rem + var(--raise) * 11rem);
  display: grid;
  align-content: center;
  width: min(19rem, 68%);
  min-height: 7rem;
  padding: 1rem 2.8rem 1rem 1.25rem;
  color: #07131d;
  background: var(--mpx-primary);
  clip-path: polygon(0 0, 100% 0, 82% 50%, 100% 100%, 0 100%);
  box-shadow: 0 1rem 2rem rgba(0,0,0,.3);
  transform: skewY(calc((.5 - var(--raise)) * 2deg));
  transition: bottom .18s ease, transform .18s ease;
}

.mpx-pennant span,
.mpx-pennant small {
  font: 700 .65rem/1.2 "IBM Plex Mono", monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.mpx-pennant strong {
  font: 900 3rem/.8 "Big Shoulders Display", sans-serif;
}

.mpx-pennant-lock {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  padding: .65rem;
  color: rgba(255,255,255,.36);
  border: 1px solid rgba(255,255,255,.12);
  font: 600 .6rem/1.35 "IBM Plex Mono", monospace;
  opacity: .45;
}

.mpx-pennant-scene.is-locked .mpx-pennant-lock {
  color: white;
  border-color: var(--mpx-secondary);
  opacity: 1;
}

/* Carter — schedule-luck storm path. */
.mpx-storm-map {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  min-height: 16rem;
  padding: 1rem;
  overflow: hidden;
  background:
    radial-gradient(circle at calc(18% + var(--storm-progress) * 65%) 35%, #fff 0 .18rem, transparent .23rem),
    radial-gradient(circle at calc(18% + var(--storm-progress) * 65%) 35%, color-mix(in srgb, var(--mpx-primary) 55%, transparent), transparent 7rem),
    linear-gradient(135deg, #231342, #080d14 72%);
}

.mpx-storm-map > i {
  position: absolute;
  left: calc(12% + var(--storm-progress) * 70%);
  top: 25%;
  width: 3rem;
  height: 8rem;
  border-left: 2px solid var(--mpx-secondary);
  border-bottom: 2px solid var(--mpx-secondary);
  transform: skewX(-20deg) rotate(calc(var(--storm-progress) * 10deg));
  transition: left .18s ease, transform .18s ease;
}

.mpx-storm-map > b {
  position: absolute;
  inset: 35% 0 auto;
  color: rgba(255,255,255,.08);
  font: 900 6rem/.8 "Big Shoulders Display", sans-serif;
  text-align: center;
}

.mpx-storm-map > span {
  position: relative;
  z-index: 2;
  font: 700 .65rem/1.2 "IBM Plex Mono", monospace;
  text-transform: uppercase;
}

.mpx-storm-map__allplay { text-align: right; }

/* Chris — three independently accessible title tumblers. */
.mpx-vault {
  position: relative;
  min-height: 23rem;
}

.mpx-vault__door {
  position: absolute;
  left: 50%;
  top: 0;
  display: grid;
  place-items: center;
  width: 13rem;
  aspect-ratio: 1;
  border: .75rem double rgba(255,255,255,.16);
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 1.25rem, rgba(255,255,255,.05) 1.3rem 1.42rem), #101820;
  transform: translateX(-50%) rotate(-12deg);
  transition: transform .6s cubic-bezier(.2,.8,.2,1), border-color .3s ease;
}

.mpx-vault__door i {
  width: 55%;
  height: .32rem;
  background: var(--mpx-secondary);
  box-shadow: 0 0 1.5rem color-mix(in srgb, var(--mpx-secondary) 45%, transparent);
}

.mpx-vault__door b {
  position: absolute;
  color: var(--mpx-primary);
  font: 900 2.5rem/1 "Big Shoulders Display", sans-serif;
}

.mpx-vault.is-open .mpx-vault__door {
  border-color: #d6b15e;
  transform: translateX(-50%) rotate(90deg) scale(.94);
}

.mpx-vault__tumblers {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .55rem;
  padding-top: 10.5rem;
}

.mpx-vault__tumblers label {
  display: grid;
  gap: .35rem;
  color: rgba(255,255,255,.5);
  font: 600 .6rem/1.2 "IBM Plex Mono", monospace;
  text-transform: uppercase;
}

.mpx-vault__tumblers select {
  width: 100%;
  padding: .75rem .4rem;
  color: white;
  background: #111a23;
  border: 1px solid rgba(255,255,255,.18);
  font: 800 1rem/1 "IBM Plex Mono", monospace;
}

.mpx-vault__tumblers label.is-locked select {
  color: #0a1118;
  background: #d6b15e;
  border-color: #fff1a7;
}

.mpx-vault__results {
  display: grid;
  gap: .35rem;
  margin-top: .7rem;
}

.mpx-vault__results p {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .6rem;
  margin: 0;
  padding: .45rem .6rem;
  color: rgba(255,255,255,.38);
  background: rgba(255,255,255,.035);
  font-size: .63rem;
}

.mpx-vault__results p.is-locked { color: white; }
.mpx-vault__results p b { color: #d6b15e; }

/* Cloudy — voltage grid with two factual pulses. */
.mpx-charge {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 16rem;
  overflow: hidden;
  background: linear-gradient(145deg, #0c1c42, #132d62);
}

.mpx-charge__bolts {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

.mpx-charge__bolts i { border: 1px solid rgba(87,199,255,.14); }

.mpx-charge strong {
  position: relative;
  color: #fff7c2;
  font: 900 clamp(3.5rem, 10vw, 7rem)/1 "Big Shoulders Display", sans-serif;
  letter-spacing: .08em;
  text-shadow: 0 0 1.2rem #57c7ff;
}

.mpx-charge > span {
  position: absolute;
  bottom: 1rem;
  color: #57c7ff;
  font: 700 .65rem/1 "IBM Plex Mono", monospace;
  text-transform: uppercase;
}

.mpx-charge.is-charging strong,
.mpx-charge[data-pulses="1"] strong {
  animation: mpx-voltage .58s ease both;
}

.mpx-charge[data-pulses="2"] { box-shadow: inset 0 0 4rem rgba(255,247,194,.26); }
.mpx-action--charge { width: 100%; margin-top: .75rem; }

/* Connor — sixteen physical cereal pieces, eight marked as starts. */
.mpx-cereal {
  display: grid;
  grid-template-columns: .65fr 1.35fr;
  align-items: end;
  gap: 1rem;
  min-height: 15rem;
  padding: 1rem;
  background: linear-gradient(145deg, #eef2f5 0 46%, #264b73 46%);
}

.mpx-cereal__box {
  display: grid;
  align-content: center;
  min-height: 12rem;
  padding: .75rem;
  color: #fff;
  background: #264b73;
  border: .35rem solid #eef2f5;
  box-shadow: .5rem .5rem 0 #f47a38;
  transform: rotate(-4deg);
}

.mpx-cereal__box span { font: 900 2.5rem/.8 "Big Shoulders Display", sans-serif; }
.mpx-cereal__box b { color: #f47a38; font: 900 4rem/.9 "Big Shoulders Display", sans-serif; }
.mpx-cereal__box small { font: 700 .58rem/1.2 "IBM Plex Mono", monospace; text-transform: uppercase; }

.mpx-cereal__bowl {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .3rem;
  min-height: 9rem;
  padding: 1rem 1.4rem;
  background: linear-gradient(#dce5eb, #8396a6);
  border-radius: 1rem 1rem 5rem 5rem;
  box-shadow: inset 0 .45rem .8rem rgba(0,0,0,.2);
}

.mpx-cereal__bowl i {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  color: transparent;
  background: #d3a75d;
  border-radius: 45% 55% 40% 60%;
  opacity: .1;
  transform: translateY(-6rem) rotate(-35deg);
  transition: opacity .18s ease, transform .28s cubic-bezier(.2,.9,.35,1.35);
  font: 800 .48rem/1 "IBM Plex Mono", monospace;
}

.mpx-cereal__bowl i.is-start { background: #f47a38; }
.mpx-cereal__bowl i.is-poured { color: #14283c; opacity: 1; transform: translateY(0) rotate(0); }

/* Eli — commissioner docket advanced by a physical gavel. */
.mpx-court {
  position: relative;
  min-height: 18rem;
  padding: 2.2rem 1rem 1rem;
  overflow: hidden;
  background: linear-gradient(160deg, #111317, #27150b);
}

.mpx-court__pillars {
  position: absolute;
  inset: .65rem 1rem auto;
  color: rgba(244,122,56,.38);
  font: 700 .6rem/1 "IBM Plex Mono", monospace;
  letter-spacing: .15em;
  text-align: center;
}

.mpx-court__docket {
  min-height: 10rem;
  padding: 1.15rem;
  background: #e8dfcf;
  color: #111317;
  border-top: .35rem solid #f47a38;
  box-shadow: 0 1rem 2rem rgba(0,0,0,.36);
}

.mpx-court__docket strong {
  display: block;
  margin: .5rem 0;
  color: #111317;
  font: 900 2.6rem/.9 "Big Shoulders Display", sans-serif;
}

.mpx-court__docket p { margin: 0; font-size: .72rem; line-height: 1.45; }

.mpx-gavel {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: .8rem 0 0 auto;
  color: #f4e9d4;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: 700 .64rem/1 "IBM Plex Mono", monospace;
  text-transform: uppercase;
}

.mpx-gavel i {
  display: block;
  width: 4.2rem;
  height: .72rem;
  background: #8a572f;
  border-radius: .2rem;
  box-shadow: 1rem -.55rem 0 .2rem #bc8150;
  transform: rotate(-16deg);
  transform-origin: right center;
}

.mpx-court.is-struck .mpx-gavel i { animation: mpx-gavel .42s ease; }

/* Ethan — centerable 48–48 balance. */
.mpx-balance {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 16rem;
  overflow: hidden;
  background: linear-gradient(180deg, #162c3b, #0b151d);
}

.mpx-balance__beam {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 82%;
  padding-top: 1rem;
  color: #d9f2ff;
  border-top: .45rem solid #d7d7d7;
  transform: rotate(calc(var(--balance) * 8deg));
  transition: transform .18s ease;
  font: 800 .72rem/1 "IBM Plex Mono", monospace;
}

.mpx-balance__beam i {
  position: absolute;
  top: .1rem;
  left: 50%;
  width: .18rem;
  height: 7rem;
  background: #d7d7d7;
  transform: translateX(-50%);
}

.mpx-balance__chain {
  position: absolute;
  left: calc(50% + var(--balance) * 32%);
  bottom: 1.2rem;
  padding: .55rem .8rem;
  color: #fff;
  border: .22rem solid #d7d7d7;
  background: #f47a38;
  font: 900 1rem/1 "IBM Plex Mono", monospace;
  letter-spacing: .08em;
  transition: left .18s ease;
}

.mpx-balance.is-balanced .mpx-balance__chain { box-shadow: 0 0 2rem #d9f2ff; }

/* Justin — three separately solvable branches. */
.mpx-thinker {
  position: relative;
  display: grid;
  grid-template-columns: .65fr 1.35fr;
  gap: 1rem;
  min-height: 17rem;
  padding: 1rem;
  background: radial-gradient(circle at 25% 50%, rgba(169,222,247,.16), transparent 28%), #111a24;
}

.mpx-thinker__core {
  display: grid;
  place-content: center;
  aspect-ratio: 1;
  align-self: center;
  border: 1px solid var(--mpx-primary);
  border-radius: 50%;
  text-align: center;
}

.mpx-thinker__core b { color: #c7a75d; font: 900 4rem/.8 "Big Shoulders Display", sans-serif; }
.mpx-thinker__core span { font: 700 .55rem/1 "IBM Plex Mono", monospace; text-transform: uppercase; }

.mpx-thinker__branches {
  display: grid;
  gap: .5rem;
}

.mpx-thinker__branches button {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .8rem;
  color: white;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.1);
  cursor: pointer;
  font: 700 .68rem/1 "IBM Plex Mono", monospace;
  text-transform: uppercase;
}

.mpx-thinker__branches button i {
  width: .7rem;
  aspect-ratio: 1;
  border: 1px solid var(--mpx-primary);
  border-radius: 50%;
}

.mpx-thinker__branches button.is-solved { color: #101820; background: var(--mpx-primary); }
.mpx-thinker__branches button.is-solved i { background: var(--mpx-secondary); }

.mpx-thinker__answer {
  grid-column: 1 / -1;
  display: grid;
  gap: .3rem;
  min-height: 3.6rem;
  padding: .7rem;
  color: rgba(255,255,255,.58);
  background: rgba(0,0,0,.28);
  font-size: .7rem;
}

.mpx-thinker__answer b { color: var(--mpx-primary); }
.mpx-thinker.is-solved .mpx-thinker__core { animation: mpx-thought 1.2s ease both; }

/* Mikey — five fixed ranks, championship unlock at the top. */
.mpx-staircase {
  --active-rung: 0;
  position: relative;
  display: flex;
  align-items: end;
  gap: .4rem;
  min-height: 18rem;
  padding: 1rem;
  overflow: hidden;
  background: linear-gradient(140deg, #172235, #273c58);
}

.mpx-staircase button {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: end;
  flex: 1;
  height: calc(4.5rem + var(--rung, 0) * 2.2rem);
  padding: .6rem .25rem;
  color: rgba(255,255,255,.68);
  background: rgba(185,239,255,.08);
  border: 1px solid rgba(185,239,255,.22);
  cursor: pointer;
}

.mpx-staircase button:nth-child(1) { --rung: 0; }
.mpx-staircase button:nth-child(2) { --rung: 1; }
.mpx-staircase button:nth-child(3) { --rung: 2; }
.mpx-staircase button:nth-child(4) { --rung: 3; }
.mpx-staircase button:nth-child(5) { --rung: 4; }
.mpx-staircase button span,
.mpx-staircase button small { font: 700 .55rem/1 "IBM Plex Mono", monospace; }
.mpx-staircase button b { color: var(--mpx-secondary); font: 900 2.3rem/.9 "Big Shoulders Display", sans-serif; }
.mpx-staircase button.is-active { color: #172235; background: var(--mpx-primary); transform: translateY(-.4rem); }
.mpx-staircase button.is-active b { color: #172235; }

.mpx-staircase__wind {
  position: absolute;
  inset: 12% -2rem auto auto;
  color: rgba(255,255,255,.09);
  font: 900 5rem/1 "Big Shoulders Display", sans-serif;
  transform: rotate(-12deg);
}

.mpx-staircase.is-champion .mpx-staircase__wind { color: rgba(230,210,139,.26); }
.mpx-staircase__result { padding: .7rem; color: var(--mpx-primary); background: rgba(0,0,0,.32); font: 700 .67rem/1.4 "IBM Plex Mono", monospace; }

/* Nolan — one precise Week 5 thermal boundary. */
.mpx-thermal {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 16rem;
  overflow: hidden;
  background: linear-gradient(90deg, #b84a24 0 50%, #29475d 50%);
}

.mpx-thermal > div:not(.mpx-thermal__line) {
  display: grid;
  place-content: center;
  gap: .35rem;
  text-align: center;
}

.mpx-thermal span { font: 700 .62rem/1 "IBM Plex Mono", monospace; text-transform: uppercase; }
.mpx-thermal b { font: 900 3.7rem/.9 "Big Shoulders Display", sans-serif; }

.mpx-thermal__line {
  position: absolute;
  inset: 0 auto 0 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 1px;
  color: white;
  background: rgba(255,255,255,.65);
  font: 800 .55rem/1 "IBM Plex Mono", monospace;
}

.mpx-thermal > i {
  position: absolute;
  left: calc(var(--week) * 92% + 4%);
  bottom: 1.2rem;
  width: 1.1rem;
  aspect-ratio: 1;
  background: white;
  border: .25rem solid var(--mpx-secondary);
  border-radius: 50%;
  transition: left .18s ease;
}

.mpx-thermal.is-cold > i { border-color: var(--mpx-primary); }

/* Russell — five waypoints, two explicitly silver finals. */
.mpx-armada {
  --waypoint: 0;
  position: relative;
  min-height: 20rem;
  padding: 1rem;
  overflow: hidden;
  background: linear-gradient(#132b46 0 48%, #244f70 48% 62%, #0a2133 62%);
}

.mpx-armada__sea {
  position: absolute;
  inset: 48% 0 0;
  overflow: hidden;
}

.mpx-armada__sea i {
  position: absolute;
  left: -10%;
  width: 120%;
  height: 2rem;
  border-top: 2px solid rgba(169,222,247,.42);
  border-radius: 50%;
}

.mpx-armada__sea i:nth-child(1) { top: 1rem; }
.mpx-armada__sea i:nth-child(2) { top: 3.5rem; left: -18%; }
.mpx-armada__sea i:nth-child(3) { top: 6rem; }

.mpx-armada__ship {
  position: absolute;
  left: calc(5% + var(--waypoint) * 18%);
  top: 25%;
  width: 7rem;
  height: 4rem;
  color: #132b46;
  background: #e9d5a3;
  clip-path: polygon(0 55%, 100% 55%, 80% 100%, 18% 100%);
  transition: left .45s cubic-bezier(.2,.8,.2,1);
}

.mpx-armada__ship::before {
  content: "";
  position: absolute;
  left: 47%;
  bottom: 40%;
  width: .16rem;
  height: 3.2rem;
  background: #e9d5a3;
}

.mpx-armada__ship i {
  position: absolute;
  left: 48%;
  bottom: 70%;
  width: 3.4rem;
  height: 2.7rem;
  background: var(--mpx-secondary);
  clip-path: polygon(0 0, 100% 40%, 0 100%);
}

.mpx-armada__ship b { position: absolute; inset: auto 1.2rem .35rem; z-index: 2; font: 900 .7rem/1 "IBM Plex Mono", monospace; }

.mpx-armada__route {
  position: absolute;
  inset: auto 1rem 3.7rem;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .3rem;
}

.mpx-armada__route button {
  min-height: 3.2rem;
  padding: .35rem;
  color: rgba(255,255,255,.7);
  background: rgba(4,12,18,.64);
  border: 1px solid rgba(255,255,255,.13);
  cursor: pointer;
  font: 600 .52rem/1.3 "IBM Plex Mono", monospace;
}

.mpx-armada__route button span { display: block; color: var(--mpx-secondary); }
.mpx-armada__route button.is-active { color: #132b46; background: var(--mpx-primary); }
.mpx-armada__log { position: absolute; inset: auto 1rem .6rem; color: #e9d5a3; font: 600 .62rem/1.3 "IBM Plex Mono", monospace; }

/* Samuel — four-position film scrubber. */
.mpx-film {
  position: relative;
  min-height: 17rem;
  padding: 2.2rem 1.4rem;
  overflow: hidden;
  color: #e9dfcc;
  background: #111820;
  border-block: .7rem dotted rgba(233,223,204,.5);
}

.mpx-film__strip {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.mpx-film__strip i { border-right: 1px solid rgba(169,222,247,.15); }

.mpx-film__screen {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  min-height: 12rem;
  padding: 1rem;
  background: linear-gradient(140deg, rgba(169,222,247,.16), rgba(244,122,56,.08));
  border: 1px solid rgba(255,255,255,.13);
}

.mpx-film__screen span { color: var(--mpx-secondary); font: 800 .7rem/1 "IBM Plex Mono", monospace; }
.mpx-film__screen b { margin: .45rem 0; font: 900 2.8rem/.9 "Big Shoulders Display", sans-serif; text-transform: uppercase; }
.mpx-film__screen p { max-width: 52ch; margin: 0; color: rgba(255,255,255,.62); font-size: .7rem; line-height: 1.45; }

/* Wade — a literal two-sided eight-frame 2017 tape. */
.mpx-tape {
  position: relative;
  min-height: 17rem;
  padding: 1rem;
  color: #f2e7d8;
  background: linear-gradient(145deg, #280a0e, #711821);
  border: .18rem solid rgba(242,231,216,.5);
  box-shadow: inset 0 0 0 .45rem rgba(0,0,0,.35);
}

.mpx-tape__timecode { color: rgba(242,231,216,.58); font-size: .65rem; }

.mpx-tape__frames {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .35rem;
  margin: 2rem 0 1rem;
}

.mpx-tape__frames i {
  display: grid;
  place-items: center;
  aspect-ratio: 1.55;
  color: #f2e7d8;
  background: rgba(0,0,0,.38);
  border: 1px solid rgba(242,231,216,.22);
  font: 900 1.25rem/1 "IBM Plex Mono", monospace;
  transition: color .2s ease, background .2s ease;
}

.mpx-tape__frames i.is-win { color: #162b1d; background: #a9def7; }
.mpx-tape > strong { display: block; margin-bottom: .75rem; font: 900 2.3rem/.9 "Big Shoulders Display", sans-serif; text-transform: uppercase; }

/* Wills — exact labels prevent the 2024 collapse from becoming a third last. */
.mpx-trophy-case {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: .75rem;
  min-height: 19rem;
  padding: .85rem;
  background: linear-gradient(145deg, #1e4b2d, #0d2416);
  border: .55rem solid #6d4b28;
  box-shadow: inset 0 0 0 .25rem rgba(242,200,75,.35);
}

.mpx-trophy-case__empty {
  display: grid;
  place-content: center;
  min-height: 12rem;
  color: rgba(255,255,255,.7);
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.22);
  text-align: center;
}

.mpx-trophy-case__empty span { font: 700 .55rem/1 "IBM Plex Mono", monospace; text-transform: uppercase; }
.mpx-trophy-case__empty b { color: rgba(242,200,75,.44); font: 900 3rem/.9 "Big Shoulders Display", sans-serif; }

.mpx-trophy-case__drawers {
  display: grid;
  gap: .35rem;
}

.mpx-trophy-case__drawers button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .65rem;
  color: #f4efd9;
  background: #4e3420;
  border: 1px solid #87613d;
  cursor: pointer;
  font: 700 .58rem/1.25 "IBM Plex Mono", monospace;
  text-transform: uppercase;
  transition: transform .2s ease;
}

.mpx-trophy-case__drawers button i { width: .5rem; aspect-ratio: 1; background: #f2c84b; border-radius: 50%; }
.mpx-trophy-case__drawers button.is-open { transform: translateX(-1.2rem); box-shadow: .7rem .35rem 0 rgba(0,0,0,.25); }

.mpx-trophy-case__plaque {
  grid-column: 1 / -1;
  min-height: 3rem;
  padding: .7rem;
  color: #1a291e;
  background: #f2c84b;
  font: 700 .62rem/1.45 "IBM Plex Mono", monospace;
}

/* Concept-specific backgrounds and story geometry make the 14 files diverge. */
body[data-manager-concept="inaugural-bennett-banner"] .mpx-backdrop i:nth-child(1) { border-radius: 0; clip-path: polygon(0 0,100% 0,82% 50%,100% 100%,0 100%); }
body[data-manager-concept="blump-skol-weather-system"] .mpx-experience { background-image: radial-gradient(circle at 75% 12%, rgba(79,38,131,.65), transparent 32rem), linear-gradient(#080d12,#080d12); }
body[data-manager-concept="three-ring-dak-vault"] .mpx-backdrop i:nth-child(1) { border-width: .7rem; border-style: double; }
body[data-manager-concept="herby-lightning-repeat"] .mpx-backdrop i:nth-child(2) { width: 5rem; border: 0; background: #57c7ff; clip-path: polygon(58% 0,25% 47%,52% 47%,30% 100%,79% 38%,53% 38%); opacity: .16; }
body[data-manager-concept="zeke-cereal-vault"] .mpx-experience { background-image: radial-gradient(circle, rgba(238,242,245,.12) 0 .25rem, transparent .28rem), linear-gradient(#09111a,#09111a); background-size: 2rem 2rem, auto; }
body[data-manager-concept="commissioner-court-bengals"] .mpx-experience { background-image: repeating-linear-gradient(105deg, rgba(244,122,56,.08) 0 1.1rem, transparent 1.1rem 4rem), linear-gradient(#0a0c0f,#0a0c0f); }
body[data-manager-concept="eridge-perfect-balance"] .mpx-backdrop i:nth-child(3) { inset: 35% 12% auto; width: 76%; background: #d7d7d7; }
body[data-manager-concept="thinker-decision-engine"] .mpx-backdrop i:nth-child(1) { box-shadow: 0 0 0 2rem rgba(169,222,247,.025),0 0 0 4rem rgba(169,222,247,.018),0 0 0 6rem rgba(169,222,247,.012); }
body[data-manager-concept="hasagi-champion-staircase"] .mpx-experience { background-image: repeating-linear-gradient(155deg, transparent 0 4rem, rgba(185,239,255,.055) 4rem 4.12rem), linear-gradient(#080d12,#080d12); }
body[data-manager-concept="fast-start-thermal-map"] .mpx-experience { background-image: linear-gradient(90deg, rgba(244,122,56,.07), transparent 49.8%, rgba(169,222,247,.07) 50.2%, transparent), linear-gradient(#080d12,#080d12); }
body[data-manager-concept="ploopy-bubby-armada"] .mpx-backdrop i:nth-child(3) { height: 3rem; background: repeating-radial-gradient(ellipse at 50% 100%, transparent 0 1rem, rgba(169,222,247,.14) 1.05rem 1.12rem); }
body[data-manager-concept="mccafrican-2019-rewind"] .mpx-experience { background-image: linear-gradient(90deg, transparent 0 3%, rgba(255,255,255,.045) 3% 4%, transparent 4% 96%, rgba(255,255,255,.045) 96% 97%, transparent 97%), linear-gradient(#080d12,#080d12); }
body[data-manager-concept="all-jacked-origin-tape"] .mpx-experience { box-shadow: inset 0 0 8rem rgba(113,24,33,.34); }
body[data-manager-concept="empty-case-captain-comeback"] .mpx-backdrop i:nth-child(1) { border-radius: 0; box-shadow: inset 0 0 0 .4rem rgba(242,200,75,.08); }

@keyframes mpx-orbit { to { transform: rotate(360deg); } }
@keyframes mpx-voltage { 0%,100% { transform: scale(1); } 45% { transform: scale(1.08); text-shadow: 0 0 2.8rem #fff7c2; } }
@keyframes mpx-gavel { 0% { transform: rotate(-16deg); } 55% { transform: rotate(15deg) translateY(.35rem); } 100% { transform: rotate(-16deg); } }
@keyframes mpx-thought { 0% { box-shadow: 0 0 0 transparent; } 50% { box-shadow: 0 0 3rem rgba(169,222,247,.7); } 100% { box-shadow: 0 0 1rem rgba(169,222,247,.25); } }

@media (max-width: 880px) {
  .mpx-section-head,
  .mpx-signature,
  .mpx-motion-board,
  .mpx-truth-grid { grid-template-columns: 1fr; }
  .mpx-palette { justify-content: flex-start; }
  .mpx-signature__status { grid-column: auto; }
  .mpx-story { grid-template-columns: minmax(8rem, .45fr) minmax(0, 1.55fr); }
  .mpx-motion-board ol { grid-template-columns: 1fr; }
  .mpx-motion-board li { min-height: 6rem; }
}

@media (max-width: 620px) {
  .mpx-hero-concept h2 { font-size: 2.55rem; }
  .mpx-section-head h2 { font-size: 3.2rem; }
  .mpx-signature { padding: 1rem; }
  .mpx-signature__body { padding: .75rem; }
  .mpx-story { grid-template-columns: 1fr; }
  .mpx-story__visual { min-height: 10rem; }
  .mpx-fact { grid-template-columns: 1fr; gap: .35rem; }
  .mpx-cereal,
  .mpx-thinker,
  .mpx-trophy-case { grid-template-columns: 1fr; }
  .mpx-cereal__box { min-height: 7rem; }
  .mpx-vault__tumblers { grid-template-columns: 1fr; padding-top: 10rem; }
  .mpx-vault { min-height: 30rem; }
  .mpx-armada__route { grid-template-columns: repeat(5, minmax(4.4rem, 1fr)); overflow-x: auto; }
  .mpx-armada__ship { left: calc(3% + var(--waypoint) * 15%); }
  .mpx-staircase { min-height: 15rem; }
  .mpx-staircase button { padding-inline: .1rem; }
  .mpx-staircase button span,
  .mpx-staircase button small { font-size: .45rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mpx-experience *,
  .mpx-experience *::before,
  .mpx-experience *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .mpx-story { opacity: 1; transform: none; }
}