/* ─── sections ───────────────────────────────────────────────────────────── */

/* ── top bar ── */
/* 1fr auto 1fr, not space-between: the clock and the pill are different
   widths, so space-between leaves the centre mark off-centre by the
   difference. The middle column is the true centre of the viewport. */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 800;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem var(--gut);
  color: var(--dim);
}

.topbar .pill {
  justify-self: end;
}

.topbar .clock b {
  color: var(--bone);
  font-weight: 400;
}

/* The oni takes the centre of the bar, but only after the hero is gone —
   while the hero is on screen the big one is already the brand, and two of
   them at once reads as a duplicate rather than a signature. */
.topbar .mark {
  width: clamp(34px, 3vw, 44px);
  aspect-ratio: 1;
  height: auto;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-7px) scale(0.82);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.past-hero .topbar .mark {
  opacity: 1;
  transform: none;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.72rem 1.15rem;
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  color: var(--bone);
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
    border-color 0.35s var(--ease);
}

.pill:hover {
  background: var(--bone);
  border-color: var(--bone);
  color: var(--ink);
}

.pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 10px var(--mint);
}

/* On a phone the bar is clock + invite only — the centred mark would push
   the pill off the edge, and the wordmark is right below it anyway. */
@media (max-width: 640px) {
  .topbar {
    padding-inline: var(--gut);
  }
  .topbar .mark {
    display: none;
  }
  .pill {
    padding: 0.6rem 0.85rem;
  }
}

/* ─── 00 · hero ───────────────────────────────────────────────────────── */

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 14vh;
  padding-bottom: 0;
  overflow: clip;
  position: relative;
}

/* the oni sits IN FRONT of the wordmark and eclipses it as it turns */
.hero__oni {
  position: absolute;
  left: 50%;
  bottom: 14vh;
  transform: translateX(-50%);
  width: clamp(220px, 27vw, 380px);
  aspect-ratio: 1;
  pointer-events: none;
  z-index: 2;
}

.oni__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

@media (max-width: 700px) {
  /* the wordmark is a single tight line here — sit above it, not on it */
  .hero__oni {
    width: min(44vw, 190px);
    bottom: 30vh;
  }
}

.hero__eyebrow {
  color: var(--dim);
  margin-bottom: auto;
}

/* the wordmark bleeds the full width; letters wipe up on load */
.wordmark {
  display: flex;
  justify-content: space-between;
  width: 100%;
  color: var(--bone);
}

.wordmark span {
  display: block;
}

.hero__strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: var(--rule) solid var(--hair-strong);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.hero__strip div {
  padding: 1.4rem 1rem 1.6rem;
  border-right: var(--rule) solid var(--hair);
  text-align: center;
  color: var(--dim);
}

.hero__strip div:first-child {
  text-align: left;
  padding-left: 0;
}

.hero__strip div:last-child {
  border-right: 0;
  text-align: right;
  padding-right: 0;
}

.hero__strip b {
  display: block;
  color: var(--bone);
  font-weight: 400;
  margin-bottom: 0.4rem;
}

@media (max-width: 700px) {
  .hero {
    padding-top: 9vh;
  }
  .hero__strip {
    grid-template-columns: 1fr;
  }
  .hero__strip div {
    text-align: left !important;
    padding: 0.9rem 0;
    border-right: 0;
    border-bottom: var(--rule) solid var(--hair);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
  }
  .hero__strip b {
    margin: 0;
  }
}

/* ─── 01 · the loop ───────────────────────────────────────────────────── */

.beats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-block: clamp(2.5rem, 6vw, 6rem);
}

.beat {
  padding: 2rem 2rem 3.5rem 0;
  border-right: var(--rule) solid var(--hair);
}

.beat:last-child {
  border-right: 0;
}

.beat:not(:first-child) {
  padding-left: 2rem;
}

.beat h3 {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 5.5vw, 5rem);
  line-height: 0.82;
  margin: 0.9rem 0 1rem;
}

.beat:nth-child(1) h3 {
  color: var(--bone);
}
.beat:nth-child(2) h3 {
  color: var(--mint);
}
.beat:nth-child(3) h3 {
  color: var(--lime);
}

@media (max-width: 780px) {
  .beats {
    grid-template-columns: 1fr;
  }
  .beat {
    border-right: 0;
    border-bottom: var(--rule) solid var(--hair);
    padding: 1.6rem 0 2rem !important;
  }
}

/* ─── the strike rail ─────────────────────────────────────────────────────
   A tall section with a sticky stage; the track translates horizontally as
   you scroll through it. Cards rotate and scale through centre. */

.rail {
  height: 460vh;
  position: relative;
}

.rail__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  perspective: 1600px;
}

.rail__track {
  display: flex;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-inline: 50vw;
  will-change: transform;
  transform: translate3d(var(--x, 0px), 0, 0);
}

.rail__card {
  flex: none;
  width: clamp(200px, 21vw, 300px);
  transform-style: preserve-3d;
  will-change: transform;
}

.rail__cap {
  position: absolute;
  left: var(--gut);
  right: var(--gut);
  bottom: 8vh;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--dim);
  pointer-events: none;
}

.rail__cap .now {
  color: var(--bone);
}

/* progress hairline under the stage */
.rail__prog {
  position: absolute;
  left: var(--gut);
  right: var(--gut);
  bottom: 6vh;
  height: 1px;
  background: var(--hair);
}

.rail__prog i {
  display: block;
  height: 100%;
  width: calc(var(--p, 0) * 100%);
  background: var(--bone);
}

/* ─── 02 · mintage ────────────────────────────────────────────────────── */

.mintage {
  position: relative;
  padding-block: clamp(3.5rem, 9vw, 9rem);
}

/* Hero-scale type sits over whatever the WebGL field is doing, so the section
   holds its own ground down rather than trusting the atmosphere to be quiet. */
.mintage::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(
      58% 34% at 50% 26%,
      rgba(0, 0, 0, 0.72),
      transparent 78%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.35),
      rgba(0, 0, 0, 0.72) 22%,
      rgba(0, 0, 0, 0.72) 86%,
      rgba(0, 0, 0, 0.3)
    );
}

/* The count is the whole argument, so it is set at hero scale — this
   section used to read as a footnote because the number lived inside a
   paragraph. */
.mintage__hero {
  text-align: center;
  margin-top: clamp(1.5rem, 4vw, 3rem);
}

.mintage__eyebrow {
  color: var(--dim);
}

.mintage__figure {
  font-family: var(--display);
  font-weight: 700;
  line-height: 0.78;
  font-size: clamp(9rem, 30vw, 26rem);
  font-variant-numeric: tabular-nums;
  color: var(--bone);
  padding-top: 0.06em;
  filter: drop-shadow(0 0 70px rgba(59, 232, 196, 0.22))
          drop-shadow(0 0 140px rgba(125, 57, 235, 0.16));
}

.mintage__claim {
  margin: clamp(1rem, 2vw, 1.75rem) auto 0;
  max-width: 26ch;
  font-size: clamp(1.15rem, 2.2vw, 1.9rem);
  line-height: 1.3;
  color: var(--bone);
  text-wrap: balance;
}

.mintage__claim strong {
  color: var(--mint);
  font-weight: 500;
}

.mintage__grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: baseline;
  margin-top: clamp(2.5rem, 6vw, 5rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: var(--rule) solid var(--hair-strong);
}

@media (max-width: 860px) {
  .mintage__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* the tier ladder — five material chips that fill on scroll */
.ladder {
  /* Five columns, not five stacked rows: the ramp is a comparison, and a
     comparison wants its terms side by side. Read left to right, the gems
     climb from matte to holo the way the cards do. */
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(0.5rem, 1.4vw, 1.5rem);
  margin-top: clamp(3rem, 8vw, 7rem);
  border-top: var(--rule) solid var(--hair-strong);
  padding-top: clamp(1.75rem, 3.5vw, 3rem);
}

.rung {
  --tier: var(--t-common);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(0.5rem, 1vw, 0.9rem);
  padding: clamp(0.9rem, 1.8vw, 1.4rem) clamp(0.25rem, 0.8vw, 0.75rem)
    clamp(1.25rem, 2.4vw, 2rem);
}

/* Hairlines between the columns rather than under the rows. */
.rung + .rung {
  border-left: var(--rule) solid var(--hair);
}

/* the material mark: the app's own glass tier gems, lifted straight from the
   asset catalogue so the ladder reads as the same objects the cards use */
.rung .gem {
  width: clamp(3.2rem, 7vw, 6.5rem);
  /* `height: auto` is load bearing: the intrinsic width/height attributes on
     the tag are a presentational hint, and without this the row would size the
     gem to a literal 320px tall box. */
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  /* a soft tier-coloured bloom lifts the glass off the black, same trick as
     TierGem in the app */
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--tier) 45%, transparent));
  transform: scale(var(--gem-s, 1));
  transition: transform 0.6s var(--ease);
}

.rung:hover .gem {
  --gem-s: 1.08;
}

.rung h4 {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  /* Humane is ultra-condensed, so it still fits a fifth of the row — but it
     is the one thing here that would overflow, hence the low floor. */
  font-size: clamp(1.5rem, 3.2vw, 3.2rem);
  line-height: 0.85;
  margin: 0;
  color: var(--tier);
}

.rung .band {
  color: var(--dim);
  text-align: center;
  font-size: clamp(0.58rem, 0.9vw, 0.72rem);
  line-height: 1.5;
}

.rung .band b {
  display: block;
  color: var(--bone);
  font-weight: 400;
}

/* The fill wipe, driven by scroll. Columns fill upward from the floor rather
   than left to right — a horizontal wipe in a narrow column reads as a glitch. */
.rung::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    color-mix(in srgb, var(--tier) 14%, transparent),
    transparent 70%
  );
  transform: scaleY(var(--fill, 0));
  transform-origin: bottom;
  transition: transform 1.1s var(--ease);
  pointer-events: none;
}

.rung[data-tier="common"] {
  --tier: var(--t-common);
}
.rung[data-tier="uncommon"] {
  --tier: var(--t-uncommon);
}
.rung[data-tier="rare"] {
  --tier: var(--t-rare);
}
.rung[data-tier="epic"] {
  --tier: var(--t-epic);
}
.rung[data-tier="legendary"] {
  --tier: var(--t-legendary);
}

/* Five across stops working long before phone width. Below 760 the ramp
   folds to a 3+2 grid, which keeps the side-by-side comparison rather than
   collapsing back into the stack this replaced. */
@media (max-width: 760px) {
  .ladder {
    grid-template-columns: repeat(3, 1fr);
    row-gap: clamp(1.25rem, 4vw, 2rem);
  }

  .rung {
    border-left: 0;
  }

  .rung:nth-child(-n + 3) {
    border-bottom: var(--rule) solid var(--hair);
    padding-bottom: clamp(1.25rem, 4vw, 2rem);
  }

  .rung h4 {
    font-size: clamp(1.6rem, 6vw, 2.4rem);
  }
}

@media (max-width: 420px) {
  .ladder {
    grid-template-columns: repeat(2, 1fr);
  }

  .rung:nth-child(-n + 3) {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .rung:nth-child(-n + 4) {
    border-bottom: var(--rule) solid var(--hair);
    padding-bottom: clamp(1rem, 4vw, 1.5rem);
  }
}


/* ─── marquee ─────────────────────────────────────────────────────────── */

.marquee {
  overflow: hidden;
  border-block: var(--rule) solid var(--hair);
  padding-block: 0.9rem;
  white-space: nowrap;
  user-select: none;
}

.marquee__row {
  display: inline-flex;
  gap: 2.5rem;
  will-change: transform;
  transform: translate3d(var(--mx, 0px), 0, 0);
  color: var(--dimmer);
}

.marquee__row em {
  font-style: normal;
  color: var(--dim);
}

.marquee + .marquee .marquee__row {
  color: var(--dimmer);
}

/* ─── 04 · the app ────────────────────────────────────────────────────── */

.app {
  padding-block: clamp(4rem, 10vw, 10rem);
}

/* ── the feature entries ──
   Each screenshot belongs to the feature it illustrates and sits beside it,
   alternating sides down the page. The previous layout put four screenshots
   in one row and the descriptions in a separate list below, so nothing was
   visibly attached to anything. */
.entries {
  margin-top: clamp(3rem, 7vw, 6rem);
}

.entry {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  padding-block: clamp(2.5rem, 6vw, 5.5rem);
  border-top: var(--rule) solid var(--hair);
}

.entry--flip .entry__media {
  order: 2;
}

@media (max-width: 820px) {
  .entry {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .entry--flip .entry__media {
    order: 0;
  }
}

.entry__media {
  display: flex;
  justify-content: center;
}

.entry__media .shot {
  width: min(100%, 320px);
}

/* the garage entry shows an actual struck card rather than a screenshot —
   a card is what a garage holds */
.entry__card {
  width: min(100%, 260px);
}

.entry__text h3 {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.8rem, 6vw, 5rem);
  line-height: 0.84;
  margin: 0.75rem 0 1.25rem;
  color: var(--bone);
}

.entry__text .mono {
  color: var(--dim);
}

.entry__text .copy {
  max-width: 42ch;
}

/* ── the screenshot frames ──
   Each shot is cropped to the one thing it is there to show. Crops live here
   rather than in the image files, so a re-crop is a one-line change and the
   originals stay intact. */
.shot__frame {
  position: relative;
  /* ONE ratio for every shot. They used to be 9/16, 9/6, 9/6 and 9/5, which
     made entries 03-05 read as squat letterbox slivers beside the tall feed —
     a 9/6 frame over a 9/19.6 screenshot shows barely 31% of the screen.
     9/13 shows about 66% of a phone screen: enough to read as a phone, short
     enough that --pos can still reach the top or the bottom of any shot. */
  aspect-ratio: 9 / 13;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--hair);
  background: var(--panel);
}

.shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% var(--pos, 50%);
}

/* Only --pos varies now: which 66% of the screen each frame lands on.
   0% is the top of the screenshot, 100% the bottom. */

/* Top-anchored shots sit at 0% so the status bar stays whole — a status bar
   sliced through the middle reads as a bad crop rather than a phone. */

/* the globe and the top of the live-spots list */
.shot--feed .shot__frame { --pos: 0%; }

/* the status score, then down into the board itself */
.shot--ranks .shot__frame { --pos: 0%; }

/* clears the status bar entirely: the sealed pack, its title and checklist */
.shot--pack .shot__frame { --pos: 18%; }

/* all the way down to the milestone coins */
.shot--miles .shot__frame { --pos: 100%; }

/* ─── 05 · your number + the invite ──────────────────────────────────────
   These were two sections; the credential is the whole argument for joining
   the first wave, so the call to action now sits directly beside it. */

.closing {
  position: relative;
  padding-block: clamp(4rem, 10vw, 10rem);
}

.closing::before {
  content: "";
  position: absolute;
  inset: 12% calc(50% - 50vw) 12%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
      48% 42% at 62% 45%,
      rgba(125, 57, 235, 0.26),
      transparent 70%
    ),
    radial-gradient(36% 30% at 25% 78%, rgba(59, 232, 196, 0.12), transparent 72%);
  filter: blur(10px);
}

.closing__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

.closing__kicker {
  color: var(--dim);
  margin-bottom: 1rem;
}

.closing__cta {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.closing__pitch .invite__note {
  margin-top: 1.1rem;
}

@media (max-width: 860px) {
  .closing__grid {
    grid-template-columns: 1fr;
  }
}

.invite__note {
  color: var(--dimmer);
}

/* the credential — a membership object, tilted to the pointer */
.cred {
  position: relative;
  aspect-ratio: 8 / 5;
  border-radius: 18px;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  background: linear-gradient(160deg, #121216, #08080a);
  border: 1px solid var(--hair-strong);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  box-shadow: 0 40px 80px -30px #000;
  overflow: hidden;
}

/* the iridescent sweep tracks the pointer */
.cred::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: var(--holo);
  opacity: 0.07;
  mix-blend-mode: soft-light;
  transform: translate3d(var(--hx, 0%), var(--hy, 0%), 0);
  pointer-events: none;
  transition: transform 0.25s ease-out;
}

.cred__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  color: var(--dim);
  position: relative;
  z-index: 2;
}

.cred__no {
  position: relative;
  z-index: 2;
}

.cred__no b {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(5rem, 12vw, 9rem);
  line-height: 0.78;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.cred__no b i {
  font-style: normal;
  color: var(--dimmer);
}

.cred__foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--dim);
  position: relative;
  z-index: 2;
}

.cred__foot b {
  display: block;
  color: var(--bone);
  font-weight: 400;
}

/* the holo seal */
.seal {
  width: clamp(38px, 5vw, 54px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--holo);
  opacity: 0.9;
  flex: none;
  box-shadow: 0 0 30px -8px var(--mint);
}

/* ─── 07 · the invite ─────────────────────────────────────────────────── */

.invite {
  position: relative;
  padding-block: clamp(4rem, 10vw, 9rem);
  text-align: center;
}

/* a single low bloom behind the headline — the only colour in this section */
.invite::before {
  content: "";
  position: absolute;
  inset: 10% calc(50% - 50vw) 20%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
      50% 44% at 50% 42%,
      rgba(125, 57, 235, 0.3),
      transparent 70%
    ),
    radial-gradient(38% 30% at 50% 75%, rgba(59, 232, 196, 0.14), transparent 72%);
  filter: blur(10px);
}

.invite .d-1 {
  color: var(--bone);
}


.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: 1.15rem 2rem;
  border-radius: 999px;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.cta:not([aria-disabled]) {
  background: var(--lime);
  color: var(--ink);
}

.cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 50px -20px rgba(198, 255, 51, 0.55);
}

.cta[aria-disabled="true"] {
  background: transparent;
  color: var(--bone);
  border: 1px solid var(--hair-strong);
  cursor: default;
}

.cta[aria-disabled="true"]:hover {
  transform: none;
  box-shadow: none;
}

.invite__note {
  margin-top: 1.5rem;
  color: var(--dimmer);
}

/* ─── 08 · footer ─────────────────────────────────────────────────────── */

.foot {
  padding-block: clamp(3rem, 6vw, 5rem);
  border-top: var(--rule) solid var(--hair-strong);
  color: var(--dim);
}

.foot__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2rem;
}

@media (max-width: 760px) {
  .foot__grid {
    grid-template-columns: 1fr;
  }
}

.foot__legal {
  max-width: 52ch;
  line-height: 1.7;
  color: var(--dimmer);
  font-size: 0.78rem;
}

.foot__mark {
  width: 52px;
  aspect-ratio: 1;
  height: auto;
  opacity: 0.85;
  margin-bottom: 1.25rem;
}

/* ─── 05 · the founding season + the world boss ───────────────────────────
   The app's "VIOLET DEPTH" register (docs/design.md round 4): a deep, low
   chroma aurora behind the content. Everything competitive in the game is
   zero-sum; this is the one place everyone points the same direction, so it
   gets its own atmosphere rather than sitting on the flat black. */

.season {
  position: relative;
  overflow: clip;
  padding-block: clamp(3.5rem, 9vw, 9rem);
}

.season::before {
  content: "";
  position: absolute;
  inset: -10% calc(50% - 50vw) 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
      55% 45% at 78% 30%,
      rgba(125, 57, 235, 0.28),
      transparent 68%
    ),
    radial-gradient(45% 40% at 12% 78%, rgba(59, 232, 196, 0.09), transparent 70%);
  filter: blur(6px);
}

.season__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

@media (max-width: 900px) {
  .season__grid {
    grid-template-columns: 1fr;
  }
}

/* ── the objective list ── */
.objectives {
  margin-top: 1.75rem;
  border-top: var(--rule) solid var(--hair);
}

.objectives li {
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.85rem 0;
  border-bottom: var(--rule) solid var(--hair);
  color: var(--bone);
}

.objectives li span:last-child {
  color: var(--dim);
  flex: none;
}

/* ── the boss panel ── */
.boss {
  position: relative;
  border: 1px solid var(--hair-strong);
  border-radius: 18px;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  background: linear-gradient(165deg, rgba(28, 12, 48, 0.75), rgba(8, 6, 14, 0.9));
  overflow: hidden;
}

/* a thin violet edge-light along the top, like the app's live battle tile */
.boss::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--violet),
    rgba(59, 232, 196, 0.6),
    transparent
  );
}

.boss__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  color: var(--dim);
}

.boss__name {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.84;
  font-size: clamp(3rem, 6vw, 5.5rem);
  margin: 0.75rem 0 0.25rem;
  padding-top: 0.06em;
  background: linear-gradient(160deg, #e7d6ff, #c9a6ff 45%, var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── the health bar and its phase gates ── */
.hp {
  position: relative;
  height: 10px;
  margin-top: 1.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.hp i {
  display: block;
  position: relative;
  z-index: 1;
  height: 100%;
  width: var(--hp, 100%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--violet), #c9a6ff);
  box-shadow: 0 0 18px -2px rgba(125, 57, 235, 0.8);
  transform-origin: left;
}

/* the two phase thresholds, drawn where the config puts them — notched into
   the bar rather than laid over it, so they read at 10px tall */
.hp b {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 2px;
  background: rgba(0, 0, 0, 0.65);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.phases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: 1.1rem;
}

.phases div {
  padding-top: 0.75rem;
  border-top: 1px solid var(--hair);
  color: var(--dim);
}

.phases b {
  display: block;
  color: var(--bone);
  font-weight: 400;
  margin-bottom: 0.3rem;
}

.phases div:last-child b {
  color: #c9a6ff;
}

.boss__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.75rem;
}

.boss__foot span {
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  color: var(--dim);
}

/* the boss's portrait — original character art, which docs/bossfyte-endgame.md
   carves out from the real-photos-only rule that governs card art */
.boss__art {
  margin: 1.5rem 0;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--hair);
}

.boss__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}