/* ============================================================================
   manual-builder.css — the "I already know my costume" picker (2026-09-20).
   Theme variables only; see home.css for why.
   ============================================================================ */
.mb {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 24px 60px;
}

/* Step chips: the page is two choices and a hand-off, and saying so up front is
   most of what stops it feeling complicated. */
.mb-steps {
  display: flex;
  flex-wrap: wrap;
  /* Everything on this page is centred (Robert, 2026-09-20). */
  justify-content: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.mb-stepchip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text-faint);
  font-size: 13px;
  font-weight: 600;
}
.mb-stepchip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--panel-3);
  color: var(--text-dim);
  font-size: 11.5px;
  font-weight: 800;
}
.mb-stepchip.is-current {
  border-color: var(--hero);
  color: var(--text);
}
.mb-stepchip.is-current span {
  background: var(--hero);
  color: var(--bg);
}
.mb-stepchip.is-done {
  color: var(--text-dim);
}
.mb-stepchip.is-done span {
  background: var(--hero-dim);
  color: var(--hero);
}

.mb-panel {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}
.mb-panel-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  position: relative;
}
/* Back sits at the left edge so the heading stays optically centred. */
.mb-panel-head .mb-back {
  position: absolute;
  left: 0;
}
.mb-h {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
}
.mb-panel-head .mb-h {
  margin: 0;
}
.mb-back {
  padding: 7px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.mb-back:hover {
  color: var(--hero);
  border-color: var(--hero);
}

.mb-search {
  width: 100%;
  max-width: 340px;
  padding: 10px 13px;
  margin: 0 auto 14px;
  display: block;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--sunken);
  color: var(--text);
  font-size: 14px;
}
.mb-search:focus {
  outline: none;
  border-color: var(--hero);
}
.mb-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.mb-filters .mb-search {
  margin-bottom: 0;
}
.mb-check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  color: var(--text-dim);
  cursor: pointer;
}
.mb-check input {
  accent-color: var(--hero);
}

/* ---- step 1: characters ---- */
.mb-grid {
  display: grid;
  /* 124px keeps the 100px head source close to 1:1 — see manual-builder.js for
     why there is nothing larger to draw on. */
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 12px;
  justify-items: stretch;
}
/* Large art cards (Robert, 2026-09-20): the character's own costume artwork
   is the card, with the name underneath. */
.mb-char {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-2);
  color: var(--text);
  font-size: 14.5px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, transform 0.12s;
}
.mb-char:hover {
  border-color: var(--hero);
  background: var(--panel-3);
  transform: translateY(-2px);
}
/* SQUARE head (Robert, 2026-09-20). The source is already a head-and-shoulders
   crop, so it needs no object-position trickery — a square box and the square
   image simply agree. */
.mb-char-art-wrap {
  display: block;
  width: 100%;
  /* Capped so the 100px source is never blown up much past native — the
     grid can stretch a card to ~136px, which was a visibly soft 1.36x.
     The card stays as wide as the grid makes it; only the art is capped. */
  max-width: 116px;
  margin: 0 auto;
  /* Drop the head half a centimetre from the top of its box (Robert,
     2026-09-20). box-sizing: content-box means the square applies to the
     ART and this padding is added above it, rather than being taken out
     of the image. */
  box-sizing: content-box;
  padding-top: 0.5cm;
  aspect-ratio: 1;
  /* NO background: the head PNGs are transparent, and a fill here painted a
     dark square behind every character (Robert, 2026-09-20). Let the card
     show through. */
  overflow: hidden;
}
.mb-char-art-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mb-char-name {
  display: block;
  width: 100%;
  padding: 9px 7px;
  font-size: 13.5px;
  min-width: 0;
  /* Wrap rather than ellipsis: "Armored All Mi…" is worse than two lines. */
  white-space: normal;
  line-height: 1.3;
}

/* ---- step 2: costumes ---- */
.mb-costumes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.mb-cos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-2);
  text-decoration: none;
  transition: border-color 0.12s, background 0.12s, transform 0.12s;
}
.mb-cos:hover {
  border-color: var(--hero);
  background: var(--panel-3);
  transform: translateY(-2px);
}
/* The art's own box, so the special-slot corner badges land on the CORNERS OF
   THE COSTUME rather than the corners of the tile — the art is capped at 150px
   inside a wider tile, so anchoring to .mb-cos would float them out in the
   padding. The badges themselves are .special-corner, from style.css. */
.mb-cos-shot {
  position: relative;
  display: block;
  width: 100%;
  max-width: 150px;
  line-height: 0;
}

/* ⚠️ COSTUME ART IS NOT ONE SHAPE. Measured across all 1628 playable costumes:
   223 distinct thumbnail sizes, aspect ratios from 0.24 (Momo's summer uniform,
   192x802) to 1.98 (Hawks with his wings out, 192x97), median 0.51.
   So:
     - object-fit: CONTAIN letterboxes the wide ones down to nothing. That is
       the "some Armored All Might costumes are too small" bug — his art is
       1020x1024 and 1272x1080, nearly square and landscape, in a portrait box.
     - object-fit: COVER with the DEFAULT centre position crops top and bottom
       equally and decapitates the tall ones. That was the earlier bug.
   `cover` + `top center` is the combination that solves both: every tile is
   the same size, and since the head sits flush at the top of every render, the
   crop only ever eats feet (or, for Hawks, wingtips). */
.mb-cos-art {
  width: 100%;
  max-width: 150px;
  aspect-ratio: 1;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
  object-position: top center;
  background: var(--sunken);
}
.mb-cos-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  line-height: 1.35;
}
.mb-cos-stars {
  font-size: 13px;
  color: var(--gold);
  letter-spacing: 1px;
}
.mb-empty {
  margin: 0;
  padding: 18px 2px;
  color: var(--text-dim);
  font-size: 14px;
}

@media (max-width: 760px) {
  .mb {
    padding: 14px 16px 48px;
  }
  .mb-panel {
    padding: 16px;
  }
  .mb-grid {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  }
  .mb-panel-head .mb-back {
    position: static;
  }
  .mb-costumes {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}

/* ⚠️ TWO PER ROW, AND THE ART FILLS ITS OWN WRAPPER (Robert, 2026-10-09:
   "the costumes for the manual build page are uncentered ... just make it 2
   costumes per row").

   The off-centre was NOT the grid — auto-fill already gave two columns on a
   phone. It was inside the tile: .mb-cos-shot is the art's positioning box at
   max-width 150px, while .mb-cos-art was capped at 118px. The wrapper is a
   block, so the narrower image sat against its LEFT edge while the name below
   it stayed centred by .mb-cos's align-items. Matching the two removes the
   question, and the badges — which anchor to .mb-cos-shot's corners — land on
   the costume's corners again instead of floating in 32px of dead wrapper.

   820px, not 760px: that is mobile.js's breakpoint, so the phone UI and this
   layout switch together instead of leaving a 60px band with neither. */
@media (max-width: 820px) {
  .mb-costumes {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .mb-cos {
    padding: 12px 8px;
  }
  .mb-cos-shot,
  .mb-cos-art {
    max-width: 100%;
  }
  .mb-cos-name {
    font-size: 13px;
  }
}

/* Line the shared page heading up with THIS page's content width — the
   default in style.css matches the optimizer's wider .layout. */
.page-intro {
  max-width: 1280px;
  padding-left: 24px;
  padding-right: 24px;
  /* Centred with the rest of the page (Robert, 2026-09-20). */
  text-align: center;
}
.page-intro p {
  margin-left: auto;
  margin-right: auto;
}