/* LET'S BOX deck.css — Tinder-style swipe deck, action bar, match celebration,
 * rich profile. Loaded after app.css. Interaction-only motion; the resting
 * stack is still. Portfolio floor honoured: no font-size below 11px.
 *
 * Action-bar tones — unframed flat sports-card chrome; only the glyph /
 * logo carries the role colour. Challenge is a larger metal-red mark, not
 * a filled coin. */
:root {
  --lb-act-pass: var(--lb-accent);       /* red — pass ✕ */
  --lb-act-fav: var(--lb-gold);          /* blue — favourite ★ */
  --lb-act-match: var(--lb-accent);      /* red — match/interested ♥ */
  --lb-act-boost: var(--lb-accent);      /* red — boost (sheet accent) */
}

/* ── Swipe deck stack ──────────────────────────────────────── */

.deck {
  position: relative;
  width: 100%;
  max-width: 22rem;
  margin-inline: auto;
  aspect-ratio: 3 / 4;
  /* room for the peeker cards that sit lower/behind the top one */
  margin-bottom: var(--lb-space-3);
  /* Perspective lives on the TOP card only — never on .deck. Putting the whole
     stack in one 3D scene made a flip look through to the peeker photos instead
     of the info face (tale of the tape). */
  touch-action: pan-y;
}

.deck-card {
  position: absolute;
  inset: 0;
  border-radius: var(--lb-radius-lg);
  overflow: hidden;
  background: var(--lb-surface-raised);
  /* real depth — layered shadow, not a flat border */
  box-shadow:
    0 1px 2px rgba(28, 20, 16, 0.28),
    0 10px 22px rgba(28, 20, 16, 0.28),
    0 24px 48px rgba(28, 20, 16, 0.32);
  transform-origin: center bottom;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
}

/* Depth: top card flat & sharp; peekers scaled down, nudged, dimmed. */
.deck-card[data-depth='0'] {
  z-index: 3;
  cursor: pointer;
  /* Swipe is gone — never trap the page. Vertical scroll must work on the card. */
  touch-action: pan-y;
}
.deck-card[data-depth='0'].is-dragging {
  cursor: grabbing;
}

/* ── Deck stage + control bar ────────────────────────────────
   Card stack centered; scout actions (prev · Pass / Spar · next) sit UNDER
   the card as one clean bar — no flanking side chevrons. */
.deck-stage {
  position: relative;
  width: 100%;
  max-width: 22rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lb-space-2);
  /* Grow to fill the .ring's leftover height; the frame below sizes the card
     to the leftover box so front + back fit with no page scroll / cut-off. */
  flex: 1 1 auto;
  min-height: 0;
}
/* Sizing shell — owns the leftover height above the control bar. The deck
   inside is a 3:4 card that fits (never overflows) and stays centered. */
.deck-stage__frame {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: grid;
  place-items: center;
  container-type: size;
  container-name: deckframe;
}
.deck-stage .deck {
  max-width: none;
  margin-inline: 0;
  margin-bottom: 0;
  /* Largest 3:4 rectangle that fits the frame — width- or height-limited. */
  width: min(22rem, 100cqw, calc(100cqh * 3 / 4));
  height: min(100cqh, calc(min(22rem, 100cqw) * 4 / 3));
  aspect-ratio: 3 / 4;
  max-width: 100%;
  max-height: 100%;
}
.deck-stage .deck-ctrl {
  flex: 0 0 auto;
  width: 100%;
}

/* Fallback when container queries aren't available — fill leftover height. */
@supports not (width: 1cqw) {
  .deck-stage__frame {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .deck-stage .deck {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
  }
}

/* Control bar — flat navy field, red primary, quiet nav chevrons. */
.deck-ctrl {
  display: grid;
  grid-template-columns: 2.5rem 1fr 1.35fr 2.5rem;
  gap: var(--lb-space-2);
  align-items: stretch;
  width: 100%;
}
.deck-ctrl__nav {
  display: grid;
  place-items: center;
  padding: 0;
  border: 1.5px solid transparent;
  border-radius: var(--lb-radius-sm);
  background:
    linear-gradient(var(--lb-surface), var(--lb-surface)) padding-box,
    linear-gradient(135deg, #d81f2a, #c5ccd4, #1d4e89) border-box;
  color: var(--lb-chalk);
  cursor: pointer;
  transition: background 140ms var(--lb-ease), border-color 140ms var(--lb-ease);
}
.deck-ctrl__nav svg {
  width: 1.15rem;
  height: 1.15rem;
}
.deck-ctrl__nav:hover {
  background: var(--lb-surface-2);
  border-color: var(--lb-chalk-muted);
}
.deck-ctrl__nav:active {
  transform: scale(0.96);
}
.deck-ctrl__btn {
  padding: 0.7rem 0.4rem;
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-sm);
  font-weight: 700;
  letter-spacing: var(--lb-tracking-stats);
  text-transform: uppercase;
  border-radius: var(--lb-radius-sm);
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--lb-surface), var(--lb-surface)) padding-box,
    linear-gradient(135deg, #c5ccd4, #1d4e89) border-box;
  color: var(--lb-chalk);
  cursor: pointer;
  transition: background 140ms var(--lb-ease), border-color 140ms var(--lb-ease);
}
.deck-ctrl__btn--pass:hover {
  background:
    linear-gradient(var(--lb-surface-2), var(--lb-surface-2)) padding-box,
    linear-gradient(135deg, #c5ccd4, #1d4e89) border-box;
}
.deck-ctrl__btn--spar {
  border: 1.5px solid rgba(244, 246, 248, 0.55);
  background: linear-gradient(145deg, #ff6a62 0%, #d81f2a 38%, #8e1018 72%, #e24a52 100%);
  color: #fff;
  text-shadow: 0 1px 1px rgba(10, 27, 51, 0.35);
}
.deck-ctrl__btn--spar:hover {
  background: linear-gradient(145deg, #ff7a72 0%, #e02430 40%, #9a121c 75%, #ff8a82 100%);
  border-color: rgba(244, 246, 248, 0.7);
}
@media (prefers-reduced-motion: reduce) {
  .deck-ctrl__nav,
  .deck-ctrl__btn {
    transition: none;
  }
  .deck-ctrl__nav:active {
    transform: none;
  }
}

/* Legacy flanking arrows — kept inert so old cached CSS never floats coins. */
.deck-arrow {
  display: none !important;
}
/* Peekers sit BEHIND and slightly up so a clean frame edge shows near the top
   — never their content-heavy footer poking out the bottom. */
.deck-card[data-depth='1'] {
  z-index: 2;
  transform: translateY(-10px) scale(0.955);
  opacity: 0.9;
}
.deck-card[data-depth='2'] {
  z-index: 1;
  transform: translateY(-20px) scale(0.91);
  opacity: 0.7;
}

/* Interaction-driven transitions only — added by JS on release / fly-out. */
.deck-card.is-return {
  transition: transform 300ms var(--lb-ease);
}
.deck-card.is-flying {
  transition: transform 380ms cubic-bezier(0.36, 0, 0.66, 0.3);
}

/* Pressed action buttons nudge the top card toward the outcome. */
.deck-card.is-nudge-left,
.deck-card.is-nudge-right,
.deck-card.is-nudge-up {
  transition: transform 140ms var(--lb-ease);
}
.deck-card.is-nudge-left {
  transform: translateX(-10px) rotate(-1.2deg);
}
.deck-card.is-nudge-right {
  transform: translateX(10px) rotate(1.2deg);
}
.deck-card.is-nudge-up {
  transform: translateY(-10px);
}

.deck-card__photo {
  position: absolute;
  inset: 0;
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}

.deck-card__initials {
  position: relative;
  z-index: 1;
  font-family: var(--lb-font-display);
  font-size: clamp(3.5rem, 26vw, 5.5rem);
  letter-spacing: 0.05em;
  color: rgba(255, 248, 246, 0.92);
  text-shadow:
    0 2px 0 rgba(28, 20, 16, 0.35),
    0 8px 26px rgba(28, 20, 16, 0.6);
}

/* Brand DUOTONE — accent from one corner, gold from the other, multiplied
   over the photo so 16 disparate sourced shots read as ONE set. Re-tints per
   theme because --lb-accent / --lb-gold change with body[data-theme].
   First declaration is a plain-rgba fallback for engines without color-mix. */
/* Photos stay natural, full-colour. Just a faint top darken so the progress
   bar / compat pill keep contrast — NO colour multiply (it muddied skin). */
.deck-card__duotone,
.fprofile__duotone {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, transparent 22%);
}

/* Readability scrim — theme-independent black fade so overlaid cream text
   always clears contrast on real photos. */
.deck-card__scrim,
.fprofile__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, transparent 30%, rgba(0, 0, 0, 0.74) 100%);
}

/* (No applied "fight-poster" rail — the photo carries the card. Restraint.) */

/* Swipe stamps — INTERESTED (right/blue) · PASS (left/red). Up-swipe opens the
   full profile (no stamp). JS drives opacity. */
.deck-card__stamp {
  position: absolute;
  top: var(--lb-space-5);
  z-index: 4;
  padding: 0.25rem 0.75rem;
  font-family: var(--lb-font-display);
  font-size: clamp(1.5rem, 9vw, 2.25rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 4px solid currentColor;
  border-radius: var(--lb-radius-md);
  opacity: 0;
  pointer-events: none;
}
.deck-card__stamp--spar {
  right: var(--lb-space-4);
  transform: rotate(12deg);
  color: #2f7fd6;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.deck-card__stamp--pass {
  left: var(--lb-space-4);
  transform: rotate(-12deg);
  color: #ef4b52;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.deck-card__stamp--callout {
  left: 50%;
  top: 24%;
  transform: translateX(-50%) rotate(-6deg);
  color: #6ba3cc;
  white-space: nowrap;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* ── Segmented photo progress — one bar per photo, active brighter ── */
.deck-card__segs {
  position: absolute;
  top: var(--lb-space-3);
  left: var(--lb-space-3);
  right: var(--lb-space-3);
  z-index: 5;
  display: flex;
  gap: 4px;
  pointer-events: none;
}
.deck-card__segs span {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 248, 246, 0.35);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.deck-card__segs span.is-on {
  background: rgba(255, 248, 246, 0.95);
}
/* Hero variant — clears the compat pill that sits top-right. */
.deck-card__segs--hero {
  right: calc(var(--lb-space-3) + 6.5rem);
}

/* ── Verified seal — gold check-in-shield, bespoke ── */
.deck-card__verified {
  display: inline-flex;
  align-items: center;
  color: var(--lb-gold);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
  flex-shrink: 0;
}
.deck-card__verified svg {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
}
.deck-card__verified--hero svg {
  width: 1.3rem;
  height: 1.3rem;
}
.deck-card__verified--chat {
  filter: none;
}
.deck-card__verified--chat svg,
.deck-card__verified--me svg {
  width: 1rem;
  height: 1rem;
}

/* Weight rides the name line like Tinder's age — lighter, unmissable. */
.deck-card__wt {
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-xl);
  font-weight: 500;
  line-height: 1;
  color: rgba(255, 248, 246, 0.9);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* (i) — opens the rich profile without spending a swipe. */
.deck-card__infobtn {
  position: absolute;
  z-index: 6;
  right: var(--lb-space-3);
  bottom: var(--lb-space-4);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff8f6;
  background: rgba(20, 14, 11, 0.45);
  border: 1px solid rgba(255, 248, 246, 0.4);
  backdrop-filter: blur(2px);
  text-decoration: none;
  transition: background-color var(--lb-duration) var(--lb-ease);
}
.deck-card__infobtn:hover {
  background: rgba(20, 14, 11, 0.7);
}
.deck-card__infobtn svg {
  width: 1.2rem;
  height: 1.2rem;
  display: block;
}

/* Card face — name / weight / gym / compat / record + chips, bottom-left.
   Right padding clears the (i) button. */
.deck-card__face {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  padding: var(--lb-space-5) calc(var(--lb-space-3) + 2.75rem) var(--lb-space-4) var(--lb-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-2);
  color: #fff8f6;
}

.deck-card__topline {
  display: flex;
  align-items: center;
  gap: var(--lb-space-2);
  flex-wrap: wrap;
}

.deck-card__name {
  font-family: var(--lb-font-display);
  font-size: var(--lb-text-2xl);
  line-height: 1.02;
  text-transform: uppercase;
  color: #fff8f6;
  margin: 0;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.deck-card__gym {
  margin: 0;
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-sm);
  letter-spacing: 0.02em;
  color: rgba(255, 248, 246, 0.9);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

/* Discover card — "City · N mi away" then experience · weight · Boxing · stance. */
.deck-card__loc {
  margin: 0;
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-sm);
  letter-spacing: 0.02em;
  color: rgba(255, 248, 246, 0.92);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.deck-card__stat {
  margin: 2px 0 0;
  font-family: var(--lb-font-stats);
  font-size: max(var(--lb-text-xs), 11px);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 248, 246, 0.82);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.deck-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lb-space-2);
  align-items: center;
}

/* On-photo chips — glass over the scrim, not the light-surface chips. */
.chip--onphoto {
  background: rgba(20, 14, 11, 0.5);
  border-color: rgba(255, 248, 246, 0.35);
  color: #fff8f6;
  backdrop-filter: blur(2px);
}
.chip--onphoto.chip--accent {
  background: var(--lb-accent);
  border-color: var(--lb-accent);
  color: var(--lb-ink-on-accent);
}

.deck-card__compat {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  align-self: flex-start;
  padding: 0.15rem 0.6rem;
  border-radius: var(--lb-radius-pill);
  background: rgba(20, 14, 11, 0.5);
  border: 1px solid rgba(255, 248, 246, 0.3);
  backdrop-filter: blur(2px);
}
.deck-card__compat b {
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-base);
  font-weight: 700;
  color: var(--lb-gold);
}
.deck-card__compat span {
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 248, 246, 0.9);
}

.weight-badge--onphoto {
  background: rgba(255, 255, 255, 0.92);
  color: #0a1b33; /* white pill on a photo — navy ink in BOTH themes */
}

/* Compat pill + star rating share the top row of the card face. */
.deck-card__facetop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lb-space-2);
  flex-wrap: wrap;
}
.deck-card__rating {
  display: inline-flex;
  padding: 0.15rem 0.55rem;
  border-radius: var(--lb-radius-pill);
  background: rgba(20, 14, 11, 0.5);
  border: 1px solid rgba(255, 248, 246, 0.3);
  backdrop-filter: blur(2px);
}

/* Rich-profile hero rating sits under the meta line. */
.fprofile__rating {
  margin-top: var(--lb-space-2);
}

/* ── Match celebration ─────────────────────────────────────── */

.lb-celebrate {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--lb-space-4);
}

.lb-celebrate__backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 30%, rgba(40, 8, 8, 0.82), rgba(6, 4, 3, 0.94));
}

.lb-celebrate__card {
  position: relative;
  width: min(24rem, 100%);
  text-align: center;
  padding: var(--lb-space-6) var(--lb-space-5) var(--lb-space-5);
  border-radius: var(--lb-radius-lg);
  background: var(--lb-surface-raised);
  border: 2px solid var(--lb-gold);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  transform: scale(0.9);
  opacity: 0;
  animation: lb-cel-in 320ms var(--lb-ease) forwards;
}

@keyframes lb-cel-in {
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.lb-celebrate__eyebrow {
  margin: 0 0 var(--lb-space-2);
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-sm);
  font-weight: 700;
  letter-spacing: var(--lb-tracking-caps);
  text-transform: uppercase;
  color: var(--lb-gold-ink);
}

.lb-celebrate__title {
  margin: 0 0 var(--lb-space-4);
  font-family: var(--lb-font-display);
  font-size: var(--lb-text-3xl);
  line-height: 1;
  text-transform: uppercase;
  color: var(--lb-chalk);
}

.lb-celebrate__photos {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--lb-space-2);
  margin-bottom: var(--lb-space-4);
}

.lb-celebrate__photo {
  width: 6.5rem;
  height: 8.25rem;
  border-radius: var(--lb-radius-md);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 3px solid var(--lb-surface-raised);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  isolation: isolate;
}
.lb-celebrate__photo .fprofile__duotone {
  z-index: 0;
}
.lb-celebrate__photo--you {
  transform: rotate(-8deg) translateX(6px);
}
.lb-celebrate__photo--them {
  transform: rotate(8deg) translateX(-6px);
}
.lb-celebrate__photo-initials {
  position: relative;
  z-index: 1;
  font-family: var(--lb-font-display);
  font-size: var(--lb-text-2xl);
  color: rgba(255, 248, 246, 0.94);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.lb-celebrate__bell {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 3rem;
  height: 3rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--lb-gold);
  color: var(--lb-ink-on-gold);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.lb-celebrate__bell svg {
  width: 1.6rem;
  height: 1.6rem;
}

.lb-celebrate__sub {
  margin: 0 0 var(--lb-space-5);
  font-size: var(--lb-text-base);
  color: var(--lb-chalk-muted);
}

.lb-celebrate__actions {
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-3);
}

/* ── Rich fighter profile ──────────────────────────────────── */

.fprofile {
  max-width: 26rem;
  margin-inline: auto;
  border-radius: var(--lb-radius-lg);
  overflow: hidden;
  background: var(--lb-surface-raised);
  box-shadow: var(--lb-shadow-lg);
  border: 1px solid var(--lb-border);
}

.fprofile__hero {
  position: relative;
  aspect-ratio: 4 / 3;
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}

.fprofile__hero .deck-card__initials {
  font-size: clamp(3rem, 20vw, 4.5rem);
}

.fprofile__hero::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  z-index: 3;
  background: linear-gradient(180deg, var(--lb-accent) 0%, var(--lb-gold) 100%);
}

.fprofile__hero-text {
  position: absolute;
  left: var(--lb-space-4);
  right: var(--lb-space-4);
  bottom: var(--lb-space-4);
  z-index: 4;
  color: #fff8f6;
}

.fprofile__eyebrow {
  margin: 0 0 var(--lb-space-1);
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-xs);
  font-weight: 600;
  letter-spacing: var(--lb-tracking-caps);
  text-transform: uppercase;
  color: rgba(255, 248, 246, 0.85);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.fprofile__name {
  margin: 0 0 var(--lb-space-1);
  font-family: var(--lb-font-display);
  font-size: var(--lb-text-3xl);
  line-height: 1;
  text-transform: uppercase;
  color: #fff8f6;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

.fprofile__meta {
  margin: 0;
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-sm);
  color: rgba(255, 248, 246, 0.92);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.fprofile__compat {
  position: absolute;
  top: var(--lb-space-3);
  right: var(--lb-space-3);
  z-index: 4;
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.2rem 0.65rem;
  border-radius: var(--lb-radius-pill);
  background: rgba(20, 14, 11, 0.55);
  border: 1px solid rgba(255, 248, 246, 0.3);
}
.fprofile__compat b {
  font-family: var(--lb-font-stats);
  font-weight: 700;
  font-size: var(--lb-text-base);
  color: var(--lb-gold);
}
.fprofile__compat span {
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 248, 246, 0.9);
}

.fprofile__body {
  padding: var(--lb-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-5);
}

.eyebrow {
  margin: 0 0 var(--lb-space-2);
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-xs);
  font-weight: 600;
  letter-spacing: var(--lb-tracking-caps);
  text-transform: uppercase;
  color: var(--lb-muted);
}

/* Achievement badges */
.fprofile__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lb-space-2);
}

.fbadge {
  display: inline-flex;
  align-items: center;
  gap: var(--lb-space-2);
  padding: 0.3rem 0.65rem 0.3rem 0.5rem;
  border-radius: var(--lb-radius-pill);
  background: var(--lb-surface);
  border: 1px solid var(--lb-border-strong);
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lb-ink-on-canvas);
  max-width: 100%;
}
.fbadge--accent {
  border-color: var(--lb-accent);
  color: var(--lb-link);
  background: var(--lb-accent-soft);
}
.fbadge--gold {
  border-color: var(--lb-gold-dark);
  color: var(--lb-gold-ink);
  background: var(--lb-gold-soft);
}
.fbadge__glyph {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
}
.fbadge__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Record visualisation — proportional bar + tally marks */
.recordbar__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--lb-space-2);
}
.recordbar__w,
.recordbar__l {
  font-family: var(--lb-font-display);
  font-size: var(--lb-text-2xl);
  line-height: 1;
}
.recordbar__w {
  color: var(--lb-gold-ink);
}
.recordbar__l {
  color: var(--lb-muted);
}
.recordbar__w small,
.recordbar__l small {
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-sm);
  letter-spacing: 0.08em;
  margin-left: 0.15rem;
}
.recordbar__track {
  height: 0.65rem;
  border-radius: var(--lb-radius-pill);
  overflow: hidden;
  background: var(--lb-surface-2);
  border: 1px solid var(--lb-border);
  display: flex;
}
.recordbar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--lb-gold), var(--lb-accent));
}
.recordbar__tallies {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: var(--lb-space-2);
}
.recordbar__tally {
  width: 4px;
  height: 1rem;
  border-radius: 2px;
  background: var(--lb-surface-2);
}
.recordbar__tally--w {
  background: var(--lb-gold);
}
.recordbar__tally--l {
  background: var(--lb-pass);
  opacity: 0.5;
}

.fprofile__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--lb-space-4);
}
.info-block__value {
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-md);
  font-weight: 600;
  color: var(--lb-ink-on-canvas);
}

.fprofile__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lb-space-2);
}

.fprofile__bio {
  margin: 0;
  font-size: var(--lb-text-base);
  line-height: 1.55;
  color: var(--lb-ink-on-canvas);
  border-left: 3px solid var(--lb-gold);
  padding-left: var(--lb-space-3);
}

.fprofile-screen {
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-4);
}
.fprofile-screen__hint {
  max-width: 26rem;
  margin: 0 auto;
  font-size: var(--lb-text-sm);
  color: var(--lb-muted);
  text-align: center;
}
.fprofile-screen__actions {
  max-width: 26rem;
  margin: 0 auto;
  width: 100%;
  display: flex;
  gap: var(--lb-space-3);
}
.fprofile-screen__actions .btn {
  flex: 1;
}

/* ── Flat action bar — deck controls (unframed sports-card chrome) ── */

.lb-act {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--lb-space-5);
  width: 100%;
  max-width: 22rem;
  margin-inline: auto;
  flex: 0 0 auto;
}

.lb-act__textbtn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0.35rem 0.15rem;
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-sm);
  font-weight: 700;
  letter-spacing: var(--lb-tracking-stats);
  text-transform: uppercase;
  color: var(--lb-chalk-muted);
  cursor: pointer;
  border-radius: 0;
  box-shadow: none;
}
.lb-act__textbtn:hover:not(:disabled),
.lb-act__textbtn:focus-visible {
  color: var(--lb-chalk);
}
.lb-act__textbtn.is-on {
  color: var(--lb-gold-ink);
}
.lb-act__textbtn--challenge {
  color: var(--lb-accent);
}
.lb-act__textbtn--challenge:hover:not(:disabled),
.lb-act__textbtn--challenge:focus-visible {
  color: var(--lb-accent-dark);
}
.lb-act__textbtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Legacy coin styles kept inert so old cached CSS never resurrects discs. */
.lb-act__btn {
  display: none !important;
}

.lb-act__btn {
  position: relative;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: var(--lb-space-1) var(--lb-space-2);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  box-shadow: none;
  transition:
    transform var(--lb-duration) var(--lb-ease),
    color var(--lb-duration) var(--lb-ease),
    opacity var(--lb-duration) var(--lb-ease);
}
.lb-act__btn::after {
  content: '';
  position: absolute;
  bottom: 0.1rem;
  left: 50%;
  width: 1.35rem;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
  transform: translateX(-50%) scaleX(0);
  transition: transform var(--lb-duration) var(--lb-ease);
}
.lb-act__btn:hover:not(:disabled) {
  transform: translateY(-1px);
}
.lb-act__btn:hover:not(:disabled)::after,
.lb-act__btn:focus-visible::after {
  transform: translateX(-50%) scaleX(1);
}
.lb-act__btn:active:not(:disabled) {
  transform: translateY(0) scale(0.97);
}
.lb-act__btn:disabled {
  cursor: not-allowed;
}
.lb-act__btn.is-dim {
  opacity: 0.55;
}

.lb-act__btn--lg {
  min-width: 3.25rem;
  min-height: 3.25rem;
  padding: var(--lb-space-1) var(--lb-space-2);
}

.lb-act__icon {
  width: 1.6rem;
  height: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lb-act__btn--lg .lb-act__icon {
  width: 2.35rem;
  height: 2.35rem;
}
.lb-act__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Logo / mark images — glyph carries colour, no circular crop */
.lb-act__logo,
.lbx-mark,
.challenge-hub__glove,
.challenge-hub__glove img {
  display: block;
  width: auto;
  height: 2rem;
  max-height: 2.5rem;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.lb-act__btn--lg .lb-act__logo,
.lb-act__btn--challenge .lb-act__logo {
  height: 2.35rem;
}
.challenge-hub__glove {
  margin-inline: auto;
}

.lb-act__btn--pass { color: var(--lb-act-pass); }
.lb-act__btn--fav { color: var(--lb-act-fav); }
.lb-act__btn--match { color: var(--lb-act-match); }

/* Favourite saved — accent on the glyph, underline stays visible */
.lb-act__btn--fav.is-on {
  background: transparent;
  color: var(--lb-gold);
}
.lb-act__btn--fav.is-on::after {
  transform: translateX(-50%) scaleX(1);
  opacity: 0.65;
}

/* Challenge — larger metal-red mark, no filled disc */
.lb-act__btn--challenge {
  background: transparent;
  color: var(--lb-accent);
  box-shadow: none;
}
.lb-act__btn--challenge:hover:not(:disabled) {
  background: transparent;
  color: var(--lb-accent-dark);
}
.lb-act__btn--challenge.is-dim {
  background: transparent;
  color: var(--lb-chalk-faint);
  box-shadow: none;
  border: none;
}

/* Call Out counter dot — Tinder-style tiny budget marker. */
.lb-act__count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 1rem;
  height: 1rem;
  padding-inline: 0.15rem;
  border-radius: var(--lb-radius-pill);
  background: var(--lb-gold);
  color: var(--lb-ink-on-gold);
  font-family: var(--lb-font-stats);
  font-size: max(var(--lb-text-xs), 11px);
  font-weight: 700;
  line-height: 1rem;
  text-align: center;
}

/* ── Boost sheet — quiet bottom sheet, interaction-gated slide ── */

.lb-sheet-root {
  position: fixed;
  inset: 0;
  z-index: 180;
}

.lb-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 11, 8, 0.55);
  opacity: 0;
  transition: opacity var(--lb-duration) var(--lb-ease);
}

.lb-sheet {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
  width: min(26rem, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lb-space-3);
  text-align: center;
  padding: var(--lb-space-3) var(--lb-space-5) calc(var(--lb-space-5) + var(--lb-safe-bottom));
  background: var(--lb-surface-raised);
  backdrop-filter: blur(calc(var(--lb-glass-blur) + 4px));
  -webkit-backdrop-filter: blur(calc(var(--lb-glass-blur) + 4px));
  border-radius: var(--lb-radius-lg) var(--lb-radius-lg) 0 0;
  border-top: 3px solid var(--lb-act-boost);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.55);
  transition: transform 240ms var(--lb-ease);
}

.lb-sheet-root.open .lb-sheet__backdrop {
  opacity: 1;
}
.lb-sheet-root.open .lb-sheet {
  transform: translate(-50%, 0);
}

.lb-sheet__grab {
  width: 2.5rem;
  height: 4px;
  border-radius: 2px;
  background: var(--lb-border-strong);
}

.lb-sheet__glyph {
  width: 2.2rem;
  height: 2.2rem;
  color: var(--lb-act-boost);
}
.lb-sheet__glyph svg {
  width: 100%;
  height: 100%;
  display: block;
}

.lb-sheet__title {
  margin: 0;
  font-family: var(--lb-font-display);
  font-size: var(--lb-text-xl);
  text-transform: uppercase;
  color: var(--lb-chalk);
}

.lb-sheet__copy {
  margin: 0 0 var(--lb-space-2);
  font-size: var(--lb-text-base);
  color: var(--lb-chalk-muted);
}

.lb-sheet .btn {
  width: 100%;
}

/* ── Rich profile — credibility, trust, stat grid, detail rows ──── */

.fprofile__cred {
  margin: 0;
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--lb-chalk-muted);
}

.fprofile__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lb-space-2);
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem 0.25rem 0.45rem;
  border-radius: var(--lb-radius-pill);
  font-family: var(--lb-font-stats);
  font-size: max(var(--lb-text-xs), 11px);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--lb-surface);
  border: 1px solid var(--lb-glass-border);
  color: var(--lb-chalk-muted);
}
.trust-badge svg {
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
}
/* Coach-verified + good-standing read BLUE (verify/success = blue law). */
.trust-badge--coach {
  color: var(--lb-gold-ink);
  border-color: var(--lb-gold-dark);
  background: var(--lb-gold-soft);
}
.trust-badge--safe {
  color: var(--lb-gold-ink);
  border-color: var(--lb-gold-dark);
  background: var(--lb-gold-soft);
}
.trust-badge--new {
  color: var(--lb-chalk-muted);
}
.trust-badge--flagged {
  color: var(--lb-danger-ink);
  border-color: var(--lb-danger);
  background: var(--lb-accent-soft);
}

.fprofile__section--rows {
  gap: var(--lb-space-3);
  display: flex;
  flex-direction: column;
}

/* Stat grid — icon + label + value cells. */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--lb-space-3);
}
.stat-cell {
  display: flex;
  align-items: center;
  gap: var(--lb-space-3);
  padding: var(--lb-space-3);
  border-radius: var(--lb-radius-md);
  background: var(--lb-surface);
  border: 1px solid var(--lb-glass-border);
}
.stat-cell__icon {
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--lb-gold-ink);
}
.stat-cell__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.stat-cell__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.stat-cell__label {
  font-family: var(--lb-font-stats);
  font-size: max(var(--lb-text-xs), 11px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lb-muted);
}
.stat-cell__value {
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-md);
  font-weight: 700;
  color: var(--lb-ink-on-canvas);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Detail rows — icon + label + chips/value. */
.detail-row {
  display: flex;
  gap: var(--lb-space-3);
  align-items: flex-start;
}
.detail-row__icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 2px;
  display: inline-flex;
  color: var(--lb-gold-ink);
}
.detail-row__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.detail-row__body {
  flex: 1;
  min-width: 0;
}
.detail-row__label {
  margin: 0 0 var(--lb-space-2);
  font-family: var(--lb-font-stats);
  font-size: max(var(--lb-text-xs), 11px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lb-muted);
}
.detail-row__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lb-space-2);
}
.detail-row__value {
  margin: 0;
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-base);
  font-weight: 600;
  color: var(--lb-ink-on-canvas);
}

.fprofile__reviews {
  margin: 0;
  font-size: var(--lb-text-sm);
  line-height: 1.55;
  color: var(--lb-chalk-muted);
}

/* Fighter-detail actions — Challenge / Interested pair + block/report. */
.fprofile-screen__pair {
  display: flex;
  gap: var(--lb-space-3);
  width: 100%;
}
.fprofile-screen__pair .btn {
  flex: 1;
}
.fprofile-screen__pair .btn svg {
  width: 1.05rem;
  height: 1.05rem;
}
.fprofile-screen__blocked {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-3);
}
.fprofile-screen__blocked-msg {
  margin: 0;
  font-size: var(--lb-text-sm);
  color: var(--lb-chalk-muted);
  text-align: center;
}

.trust-actions {
  display: flex;
  justify-content: center;
  gap: var(--lb-space-5);
  max-width: 26rem;
  margin: 0 auto;
}
.trust-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: var(--lb-space-2);
  border: 0;
  background: transparent;
  color: var(--lb-chalk-faint);
  font-family: var(--lb-font-stats);
  font-size: max(var(--lb-text-xs), 11px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--lb-duration) var(--lb-ease);
}
.trust-link:hover {
  color: var(--lb-danger-ink);
}
.trust-link svg {
  width: 0.95rem;
  height: 0.95rem;
}

/* Inline block/report confirm — glass card, red edge, no OS dialog. */
.trust-confirm {
  max-width: 26rem;
  margin: 0 auto;
  width: 100%;
  border: 1px solid var(--lb-danger);
  border-left: 4px solid var(--lb-danger);
  border-radius: var(--lb-radius-md);
  background: var(--lb-surface-raised);
  backdrop-filter: blur(var(--lb-glass-blur));
  -webkit-backdrop-filter: blur(var(--lb-glass-blur));
  padding: var(--lb-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--lb-space-3);
}
.trust-confirm[hidden] {
  display: none;
}
.trust-confirm__msg {
  margin: 0;
  font-size: var(--lb-text-sm);
  color: var(--lb-ink-on-canvas);
}
.trust-confirm__reasons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lb-space-2);
}
.trust-reason {
  padding: 0.3rem 0.7rem;
  border-radius: var(--lb-radius-pill);
  border: 1px solid var(--lb-border-strong);
  background: var(--lb-surface);
  color: var(--lb-chalk-muted);
  font-family: var(--lb-font-stats);
  font-size: max(var(--lb-text-xs), 11px);
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color var(--lb-duration) var(--lb-ease),
    color var(--lb-duration) var(--lb-ease);
}
.trust-reason.is-on {
  border-color: var(--lb-accent);
  color: var(--lb-chalk);
  background: var(--lb-accent-soft);
}
.trust-confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--lb-space-3);
}
.trust-confirm__done {
  margin: 0;
  font-size: var(--lb-text-sm);
  color: var(--lb-gold-ink);
}

/* ── Reduced motion: no tilt/fly, snap only; still fully usable ─ */
@media (prefers-reduced-motion: reduce) {
  .deck-card.is-return,
  .deck-card.is-flying,
  .deck-card.is-nudge-left,
  .deck-card.is-nudge-right,
  .deck-card.is-nudge-up,
  .lb-sheet,
  .lb-sheet__backdrop {
    transition: none !important;
  }
  .lb-celebrate__card {
    animation: none !important;
    transform: none;
    opacity: 1;
  }
}

/* ══ Boxing trading card — image front / tape back ═════════════════════════
   FRONT = full-bleed photo (or monogram) + name only — real sports-card feel.
   BACK  = key tape (record / class / stance / gym + available). No prose.
   Pass/Spar + prev/next live in .deck-ctrl under the card (not on the face).
   Equal RED / SILVER / BLUE metallics (logo DNA) — no flat solid fills.
   Interaction-only flip. Vertical page scroll stays free (pan-y). */

.lbx-card {
  --lb-metal-red: linear-gradient(145deg, #ff6a62 0%, #d81f2a 38%, #8e1018 72%, #ff8a82 100%);
  --lb-metal-silver: linear-gradient(145deg, #f4f6f8 0%, #c8ced6 32%, #8b949e 58%, #e8ecf0 78%, #aeb6c0 100%);
  --lb-metal-blue: linear-gradient(145deg, #4a7eb8 0%, #1d4e89 40%, #0a1b33 72%, #6a9ad0 100%);
  --lb-metal-blue-deep: #143a67;
  position: absolute;
  inset: 0;
  border-radius: var(--lb-radius-lg);
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.lbx-card[data-depth='0'] {
  z-index: 3;
  cursor: pointer;
  /* Perspective ONLY on the interactive card, and ONLY while flipping —
     resting perspective on a parent traps mobile scroll. */
  perspective: none;
}
.lbx-card[data-depth='0'].is-perspective {
  -webkit-perspective: 1600px;
  perspective: 1600px;
}
.lbx-card[data-depth='1'],
.lbx-card[data-depth='2'] {
  pointer-events: none;
}
.lbx-card[data-depth='1'] {
  z-index: 2;
  transform: translateY(-10px) scale(0.955);
  opacity: 0.92;
}
.lbx-card[data-depth='2'] {
  z-index: 1;
  transform: translateY(-20px) scale(0.91);
  opacity: 0.72;
}

.lbx-card__flip {
  position: absolute;
  inset: 0;
  -webkit-transform-style: preserve-3d; /* iOS Safari needs the prefix to render the 3D flip */
  transform-style: preserve-3d;
  transition: transform 460ms var(--lb-ease);
}
.lbx-card.is-flipped .lbx-card__flip {
  transform: rotateY(180deg);
}

/* Faces — equal red / silver / blue metal rings (not one solid border). */
.lbx-card__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--lb-radius-lg);
  border: 0;
  background:
    linear-gradient(165deg, rgba(244, 246, 248, 0.18) 0%, rgba(29, 78, 137, 0) 28%, rgba(10, 27, 51, 0.35) 100%),
    linear-gradient(180deg, #2a5f9a 0%, #1d4e89 42%, #0f2d52 100%);
  box-shadow:
    inset 0 0 0 2px #d81f2a,
    inset 0 0 0 4px #c5ccd4,
    inset 0 0 0 6px #1d4e89,
    0 1px 2px rgba(10, 27, 51, 0.28),
    0 10px 22px rgba(10, 27, 51, 0.28),
    0 24px 48px rgba(10, 27, 51, 0.32);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.lbx-card__face::before {
  content: '';
  position: absolute;
  inset: 7px;
  z-index: 6;
  border-radius: calc(var(--lb-radius-lg) - 7px);
  box-shadow:
    inset 0 0 0 1px rgba(244, 246, 248, 0.55),
    inset 0 0 0 2px rgba(29, 78, 137, 0.35);
  pointer-events: none;
}
.lbx-card__face--front {
  z-index: 2;
}
.lbx-card__face--back {
  /* Pre-rotated so after the parent rotates 180° this face reads upright.
     Opaque fill (above) so peeker photos never show through a failed
     backface-visibility composite. */
  z-index: 1;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .lbx-card__flip {
    transition: none;
  }
  /* Instant face swap — no spin when motion is reduced. */
  .lbx-card.is-flipped .lbx-card__flip {
    transform: none;
  }
  .lbx-card:not(.is-flipped) .lbx-card__face--back,
  .lbx-card.is-flipped .lbx-card__face--front {
    visibility: hidden;
  }
  .lbx-card.is-flipped .lbx-card__face--back {
    -webkit-transform: none;
    transform: none;
    visibility: visible;
  }
}

/* Set bar — silver chrome field, blue type, red/silver/blue underline.
   Title dead-centered; card number in the right column (never shifts the title). */
.lbx-card__set {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(3.25rem, 1fr) auto minmax(3.25rem, 1fr);
  align-items: center;
  flex: 0 0 auto;
  min-height: 1.85rem;
  padding: 0.35rem var(--lb-space-2);
  background: var(--lb-metal-silver);
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, #d81f2a 0%, #c5ccd4 50%, #1d4e89 100%) 1;
}
.lbx-card__set-brand {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 0;
  max-width: 100%;
}
.lbx-card__set img,
.lbx-card__set-logo,
.lbx-card__brandlogo {
  position: absolute;
  left: var(--lb-space-2);
  top: 50%;
  transform: translateY(-50%);
  flex: 0 0 auto;
  height: clamp(18px, 1.3125rem, 22px);
  width: auto;
  max-width: 3.75rem;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 1px 1px rgba(10, 27, 51, 0.35));
}
.lbx-card__set b,
.lbx-card__set-text {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-xs);
  font-weight: 700;
  letter-spacing: var(--lb-tracking-caps);
  text-transform: uppercase;
  color: var(--lb-metal-blue-deep);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  text-align: center;
}
.lbx-card__no {
  grid-column: 3;
  justify-self: end;
  position: static;
  transform: none;
  flex: 0 0 auto;
  margin: 0;
  padding-right: 0.15rem;
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--lb-metal-blue-deep);
  white-space: nowrap;
}

/* FRONT crest — owns almost the whole card. Nameplate overlays the bottom. */
.lbx-card__crestwrap {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
}
.lbx-card__crest {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background-position: center top;
  background-size: cover;
}
.lbx-card__crest--photo {
  background-color: #143a67;
}
/* Optional crest watermark — faint brand mark behind the photo. */
.lbx-card__mark {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0.1;
}
.lbx-card__mark img {
  width: min(58%, 9rem);
  height: auto;
  max-height: 55%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.lbx-card__mono {
  font-family: var(--lb-font-display);
  font-weight: 700;
  font-size: clamp(3.2rem, 18vw, 5rem);
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 2px 14px rgba(10, 27, 51, 0.55);
}
.lbx-card__wtchip {
  position: absolute;
  top: var(--lb-space-2);
  right: var(--lb-space-2);
  z-index: 3;
  padding: 0.2rem 0.45rem;
  font-family: var(--lb-font-stats);
  font-size: var(--lb-text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--lb-metal-red);
  border: 1px solid rgba(244, 246, 248, 0.45);
  border-radius: var(--lb-radius-sm);
  box-shadow: 0 1px 3px rgba(10, 27, 51, 0.35);
}

/* Nameplate — bottom scrim over the image; card-style name + gym, centered. */
.lbx-card__plate {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 2.75rem var(--lb-space-3) var(--lb-space-3);
  text-align: center;
  background: linear-gradient(
    180deg,
    rgba(10, 27, 51, 0) 0%,
    rgba(10, 27, 51, 0.68) 38%,
    rgba(10, 27, 51, 0.96) 100%
  );
}
.lbx-card__name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-family: var(--lb-font-card);
  font-weight: 400;
  font-size: clamp(1.85rem, 8.5vw, 2.5rem);
  line-height: 0.95;
  letter-spacing: var(--lb-tracking-card);
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    0 1px 0 rgba(10, 27, 51, 0.35),
    0 2px 10px rgba(10, 27, 51, 0.55);
}
.lbx-card__gym {
  margin: 0.2rem 0 0;
  font-family: var(--lb-font-stats);
  font-size: max(var(--lb-text-xs), 11px);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
  text-shadow: 0 1px 4px rgba(10, 27, 51, 0.5);
}
.lbx-card__fliphint {
  margin: 0.45rem 0 0;
  font-family: var(--lb-font-stats);
  font-size: max(var(--lb-text-xs), 11px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244, 246, 248, 0.78);
  text-shadow: 0 1px 4px rgba(10, 27, 51, 0.55);
}
.lbx-card__verified {
  display: inline-flex;
  align-self: center;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--lb-gold-on-chalk);
  flex-shrink: 0;
  filter: drop-shadow(0 1px 3px rgba(10, 27, 51, 0.45));
}
.lbx-card__verified svg {
  width: 100%;
  height: 100%;
}

/* BACK — name + compact tape + availability.
   Tape must NOT flex-shrink: shrink + overflow:hidden cropped Gym / Stance.
   Compact 2×2 (shorter than 4 stacked rows) so short phones fit without scroll. */
.lbx-card__face--back .lbx-card__set {
  padding-top: 0.28rem;
  padding-bottom: 0.28rem;
  min-height: 1.6rem;
}
.lbx-card__face--back .lbx-card__set-text {
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  line-height: 1.1;
  letter-spacing: 0.06em;
}
.lbx-card__face--back .lbx-card__backbody {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.35rem;
  padding: 0.4rem 0.65rem 0.55rem;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.lbx-card__face--back .lbx-card__backname {
  flex: 0 0 auto;
  font-family: var(--lb-font-card);
  font-weight: 400;
  font-size: clamp(0.875rem, 3.7vw, 1.125rem);
  line-height: 1.05;
  letter-spacing: var(--lb-tracking-card);
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  padding: 0 0.2rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.lbx-card__tape {
  display: grid;
  gap: 1px;
  background: var(--lb-tape-line);
  border: 1px solid var(--lb-tape-line);
  border-radius: var(--lb-radius-sm);
  overflow: hidden;
}
.lbx-card__tape--back {
  flex: 0 0 auto;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  min-height: auto;
  overflow: visible;
}
.lbx-card__face--back .lbx-card__cell {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.12rem;
  padding: 0.35rem 0.5rem;
  background: var(--lb-tape-stock);
  min-height: 0;
}
.lbx-card__face--back .lbx-card__cell-label {
  font-family: var(--lb-font-stats);
  font-size: max(var(--lb-text-xs), 11px);
  font-weight: 600;
  letter-spacing: var(--lb-tracking-caps);
  text-transform: uppercase;
  color: var(--lb-tape-ink);
  opacity: 0.72;
  line-height: 1.15;
}
.lbx-card__face--back .lbx-card__cell-value {
  font-family: var(--lb-font-stats);
  font-size: max(0.75rem, 11px); /* 12px — one point under prior 13px */
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--lb-tape-ink);
  line-height: 1.2;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: left;
  min-width: 0;
  max-width: 100%;
}
.lbx-card__face--back .lbx-card__avail {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  margin-top: auto;
  flex: 0 0 auto;
  padding: 0.35rem 0.5rem;
  background: var(--lb-tape-stock);
  border: 1px solid var(--lb-tape-line);
  border-radius: var(--lb-radius-sm);
}
.lbx-card__face--back .lbx-card__avail .lbx-card__cell-label {
  color: var(--lb-tape-ink);
  opacity: 0.72;
}
.lbx-card__face--back .lbx-card__slots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
}
.lbx-card__face--back .lbx-card__slot {
  padding: 0.14rem 0.38rem;
  font-family: var(--lb-font-stats);
  font-size: max(var(--lb-text-xs), 11px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lb-tape-ink);
  background: transparent;
  border: 1px solid var(--lb-tape-ink);
  border-radius: var(--lb-radius-sm);
  line-height: 1.2;
}
.lbx-card__face--back .lbx-card__slot--empty {
  border-style: dashed;
  opacity: 0.6;
}