/* ============================================================================
   SOCIAL LAYER — RUN 1 (social1): the public VIP-pass profile (/@handle), the
   claim-your-handle gate, and the owner edit flow. Locked design system: candy
   field, --bb-* tokens only, hard 2px bevels/borders, FLAT surfaces, zero
   blur/soft shadows/glass (anti-clunk law), .bb-btn buttons from components.css.
   ========================================================================== */

/* The candy field for every social page (the standing design directive). */
body.page-social {
  background: var(--bb-field);
  color: var(--bb-warmwhite);
}

/* ── Shared: hard offset shadow (0 blur — the pass-card language). ─────────── */
/* ============================================================================
   THE PUBLIC PROFILE — /@handle
   ========================================================================== */

.sp { padding-block: var(--space-lg) var(--space-3xl); }

/* Post-claim welcome note — flat mulberry band, hard border. */
.sp__welcome {
  background: var(--bb-frame);
  border: 2px solid var(--bb-black);
  border-radius: var(--bb-radius);
  color: var(--bb-warmwhite);
  font-family: var(--font-body);
  padding: var(--space-sm) var(--space-md);
  margin-block-end: var(--space-md);
}
.sp__welcome-star { color: var(--bb-gold); margin-inline-end: var(--space-xs); }

/* Banner — a flat candy-striped band; the owner's banner doll headlines it. */
.sp__banner {
  position: relative;
  block-size: 132px;
  border: 2px solid var(--bb-black);
  border-radius: var(--bb-radius);
  /* Hard-stop stripes (no gradient blur — flat print, not glass). */
  background: repeating-linear-gradient(
    135deg,
    var(--bb-berry) 0 24px,
    var(--bb-panel) 24px 48px
  );
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  margin-block-end: var(--space-lg);
}
.sp__banner-doll {
  inline-size: auto;
  block-size: 124px;
  image-rendering: pixelated;   /* pixel dolls stay crisp when upscaled */
}

/* Two columns: the pass card + the content panels; stacks on mobile. */
.sp__grid {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
}

/* ── The VIP pass card — the signature identity element. ──────────────────── */
.sp-pass {
  position: relative;
  background: var(--bb-frame);
  border: 3px solid var(--bb-gold);
  border-radius: 4px;
  box-shadow: 5px 5px 0 0 rgba(14, 10, 12, 0.45); /* hard offset — 0 blur (bevel law) */
  padding: 40px 24px 20px;
  text-align: center;
}

/* Lanyard punch hole — recessed through the card (the auth pass-card pattern). */
.sp-pass__hole {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  inline-size: 44px;
  block-size: 12px;
  background: var(--bb-field);
  border: 2px solid var(--bb-black);
  border-radius: 999px; /* the hole itself is a slot — a physical shape, not button chrome */
  box-shadow: inset 0 2px 0 0 rgba(14, 10, 12, 0.55); /* hard inner edge, 0 blur */
}

.sp-pass__eyebrow {
  font-family: var(--font-mono);
  color: var(--bb-gold);
  font-size: var(--fs-md);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-block: var(--space-sm) var(--space-md);
}

/* Round avatar window — warm-white frame, pixel-crisp doll. */
.sp-pass__avatar {
  inline-size: 140px;
  block-size: 140px;
  margin-inline: auto;
  background: var(--bb-canvas);
  border: 3px solid var(--bb-warmwhite);
  outline: 2px solid var(--bb-black);
  border-radius: 50%;   /* the avatar circle — an established component shape */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sp-pass__avatar img {
  inline-size: 116px;
  block-size: 116px;
  image-rendering: pixelated;
}
/* No starter set at all → a flat silhouette disc (never a broken image). */
.sp-pass__avatar-fallback {
  inline-size: 84px;
  block-size: 84px;
  border-radius: 50%;
  background: var(--bb-panel);
}

.sp-pass__handle {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-2xl);
  color: var(--bb-warmwhite);
  margin-block-start: var(--space-md);
  overflow-wrap: anywhere;   /* a 20-char handle can't overflow the card at 375px */
}
.sp-pass__name {
  font-family: var(--font-body);
  color: var(--bb-dimpink);
  font-size: var(--fs-lg);
  margin-block-start: var(--space-xs);
  overflow-wrap: anywhere;
}

.sp-pass__vip {
  font-family: var(--font-mono);
  color: var(--bb-gold);
  font-size: var(--fs-lg);
  letter-spacing: 0.22em;
  margin-block: var(--space-md);
  border-block: 2px solid var(--bb-gold);
  padding-block: var(--space-xs);
}

.sp-pass__meta { margin-block-end: var(--space-md); }
.sp-pass__meta-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  padding-block: 2px;
}
.sp-pass__meta-row dt { color: var(--bb-dimpink); letter-spacing: 0.08em; text-transform: uppercase; }
.sp-pass__meta-row dd { color: var(--bb-warmwhite); }

/* Barcode strip — hard-stop stripes (flat print). */
.sp-pass__barcode {
  block-size: 34px;
  background: repeating-linear-gradient(
    90deg,
    var(--bb-warmwhite) 0 2px, var(--bb-frame) 2px 5px,
    var(--bb-warmwhite) 5px 6px, var(--bb-frame) 6px 11px,
    var(--bb-warmwhite) 11px 14px, var(--bb-frame) 14px 16px
  );
  border: 2px solid var(--bb-black);
  border-radius: var(--bb-radius);
  margin-block-end: var(--space-md);
}

.sp-pass__edit { inline-size: 100%; }

/* ── Right-column panels — flat warm-white, hard-bordered (anti-clunk). ────── */
.sp-panel {
  background: var(--bb-warmwhite);
  border: 2px solid var(--bb-black);
  border-radius: var(--bb-radius);
  color: var(--bb-frame);
  padding: var(--space-md) var(--space-lg);
  margin-block-end: var(--space-lg);
}
.sp-panel__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-xl);
  color: var(--bb-berry);
  margin-block-end: var(--space-sm);
  border-block-end: 2px solid var(--bb-dimpink);
  padding-block-end: var(--space-xs);
}

/* Status line — MySpace-style "currently: …". */
.sp-panel--status {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.sp-status__emoji { font-size: 28px; line-height: 1; }
.sp-status__text {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  overflow-wrap: anywhere;
}
.sp-status__label {
  font-family: var(--font-mono);
  color: var(--bb-berry);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-inline-end: var(--space-xs);
}

.sp-about__bio { overflow-wrap: anywhere; margin-block-end: var(--space-sm); }
.sp-about__facts { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-xl); }
.sp-about__fact dt {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bb-berry);
  font-size: var(--fs-md);
}
.sp-about__fact dd { font-size: var(--fs-lg); overflow-wrap: anywhere; }

.sp-links { display: flex; flex-direction: column; gap: var(--space-xs); }
.sp-links__anchor {
  color: var(--bb-berry);
  text-decoration: underline;
  overflow-wrap: anywhere;
  display: inline-block;
  padding-block: var(--space-xs);   /* comfortable touch target */
}
.sp-links__anchor:hover { color: var(--bb-panel); }

/* Stats — four flat cells divided by hard rules; honest zeros for now. */
.sp-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
}
.sp-stats__cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-sm) var(--space-xs);
  border-inline-start: 2px solid var(--bb-dimpink);
}
.sp-stats__cell:first-child { border-inline-start: none; }
.sp-stats__num {
  font-family: var(--font-mono);
  font-size: var(--fs-2xl);
  color: var(--bb-frame);
  line-height: 1;
}
.sp-stats__label {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--bb-berry);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Portfolio — the wired-but-empty stage (publishing lands in Run 2). */
/* The LIVE grid (publishing run): flat snapshot tiles on the --bb-canvas stage colour, hard 2px
   borders, pixel-crisp — the My Dolls card language. Hover = the brightness law only. */
.sp-portfolio__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-sm);
  list-style: none;
  padding: 0;
  margin: 0;
}
.sp-portfolio__tile {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--bb-canvas);
  border: 2px solid var(--bb-black);
  border-radius: var(--bb-radius);
  overflow: hidden;
  transition: filter var(--transition-fast);
}
.sp-portfolio__tile:hover { filter: brightness(1.12); }   /* the button hover law */
.sp-portfolio__tile:focus-visible { outline: 2px solid var(--bb-gold); outline-offset: 2px; }
.sp-portfolio__tile img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  image-rendering: pixelated;            /* crisp nearest-neighbor of the frozen snapshot */
}
.sp-portfolio__pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-block-start: var(--space-md);
}
.sp-portfolio__pager-status {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  letter-spacing: 0.04em;
}

.sp-portfolio__empty {
  text-align: center;
  padding: var(--space-xl) var(--space-md);
  border: 2px dashed var(--bb-dimpink);
  border-radius: var(--bb-radius);
  font-size: var(--fs-lg);
}
.sp-portfolio__empty-star {
  display: block;
  color: var(--bb-gold);
  font-size: var(--fs-2xl);
  margin-block-end: var(--space-xs);
}
.sp-portfolio__empty-hint { font-size: var(--fs-md); color: var(--bb-berry); margin-block-start: var(--space-xs); }

/* ── RUN 4: the Follow control on the pass card (mirrors the owner's Edit slot). ── */
.sp-follow { inline-size: 100%; }
.sp-follow__btn { inline-size: 100%; min-block-size: 44px; }
/* Friends = mutual follow — berry base with the gold star reading as the earned state. */
.sp-follow__btn--friends { color: var(--bb-gold); }

/* ── P2B: the Message / Send-request entry point, stacked under the Follow control (reuses
   .sp-follow__btn for the full-width button). The note reads on the dark pass card in the cream
   secondary-text tone used elsewhere on the card. ── */
.sp-msg { inline-size: 100%; margin-block-start: var(--space-sm); }
.sp-msg-note {
  margin: var(--space-xs) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--bb-breadcrumb);
  text-align: center;
}

/* RUN 4: the follower/following stat cells are links to their lists — same cell layout,
   whole cell tappable, hover = the brightness law only. */
.sp-stats__cell--link { padding: 0; }
.sp-stats__link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-sm) var(--space-xs);
  inline-size: 100%;
  min-block-size: 44px;
  transition: filter var(--transition-fast);
}
.sp-stats__link:hover { filter: brightness(1.12); }
.sp-stats__link:focus-visible { outline: 2px solid var(--bb-berry); outline-offset: -2px; }
.sp-stats__link .sp-stats__num { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================================
   FOLLOWER / FOLLOWING LISTS — /@handle/followers · /@handle/following (RUN 4).
   Flat warm-white rows on the candy field; hard borders, no blur (anti-clunk).
   ========================================================================== */
.fl { padding-block: var(--space-lg) var(--space-3xl); max-inline-size: 720px; }

.fl__head { text-align: center; margin-block-end: var(--space-lg); }
.fl__eyebrow {
  font-family: var(--font-mono);
  color: var(--bb-mint);
  font-size: var(--fs-lg);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.fl__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-2xl);
  color: var(--bb-warmwhite);
  margin-block-start: var(--space-xs);
  overflow-wrap: anywhere;
}
.fl__handle-link { color: var(--bb-gold); }
.fl__handle-link:hover { filter: brightness(1.12); }
.fl__title-sep { color: var(--bb-dimpink); }
.fl__count { font-family: var(--font-mono); color: var(--bb-gold); font-size: var(--fs-lg); margin-block-start: var(--space-xs); }

.fl__list { display: flex; flex-direction: column; gap: var(--space-sm); }

.fl-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--bb-warmwhite);
  border: 2px solid var(--bb-black);
  border-radius: var(--bb-radius);
  color: var(--bb-frame);
  padding: var(--space-sm) var(--space-md);
}
.fl-row__identity {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 1 1 auto;
  min-inline-size: 0;             /* lets the names shrink instead of overflowing at 375px */
  min-block-size: 44px;
  transition: filter var(--transition-fast);
}
.fl-row__identity:hover { filter: brightness(1.12); }
.fl-row__identity:focus-visible { outline: 2px solid var(--bb-berry); outline-offset: 2px; }
.fl-row__avatar {
  flex: 0 0 auto;
  inline-size: 48px;
  block-size: 48px;
  border-radius: 50%;             /* the established avatar-circle shape */
  background: var(--bb-canvas);
  border: 2px solid var(--bb-black);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fl-row__avatar img { inline-size: 42px; block-size: 42px; image-rendering: pixelated; }
.fl-row__names { display: flex; flex-direction: column; min-inline-size: 0; }
.fl-row__handle {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--bb-berry);
  overflow-wrap: anywhere;
}
.fl-row__display {
  font-size: var(--fs-sm);
  color: var(--bb-frame);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fl-row__friends {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  color: var(--bb-berry);
  font-size: var(--fs-md);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 2px solid var(--bb-berry);
  border-radius: var(--bb-radius);
  padding: 2px var(--space-sm);
}
.fl-row__you {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  color: var(--bb-berry);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.fl-row__action { flex: 0 0 auto; }

.fl__empty {
  text-align: center;
  background: var(--bb-warmwhite);
  border: 2px solid var(--bb-black);
  border-radius: var(--bb-radius);
  color: var(--bb-frame);
  padding: var(--space-xl) var(--space-md);
  font-size: var(--fs-lg);
}
.fl__empty-star { display: block; color: var(--bb-gold); font-size: var(--fs-2xl); margin-block-end: var(--space-xs); }

.fl__pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-block-start: var(--space-lg);
}
.fl__pager-status { font-family: var(--font-mono); font-size: var(--fs-lg); letter-spacing: 0.04em; }
.fl__back { display: flex; justify-content: center; margin-block-start: var(--space-xl); }

/* ============================================================================
   THE FEED — /en/feed (RUN 4). One centered chronological column of flat
   warm-white cards (the My Dolls / auth-card language: hard 2px border + hard
   offset shadow, snapshot on the --bb-canvas stage, zero blur).
   ========================================================================== */
.fd { padding-block: var(--space-lg) var(--space-3xl); max-inline-size: 640px; }

.fd__head { text-align: center; margin-block-end: var(--space-lg); }
.fd__eyebrow {
  font-family: var(--font-mono);
  color: var(--bb-mint);
  font-size: var(--fs-lg);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.fd__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(var(--fs-2xl), 5vw, var(--fs-3xl));
  color: var(--bb-warmwhite);
  margin-block-start: var(--space-xs);
}
.fd__lead { color: var(--bb-gold); font-size: var(--fs-lg); margin-block-start: var(--space-xs); }

/* "Follow creators…" intro over an all-discovery page — a feature note, never an error. */
.fd__note {
  background: var(--bb-frame);
  border: 2px solid var(--bb-black);
  border-radius: var(--bb-radius);
  color: var(--bb-warmwhite);
  padding: var(--space-sm) var(--space-md);
  margin-block-end: var(--space-lg);
}
.fd__note-star { color: var(--bb-gold); margin-inline-end: var(--space-xs); }

.fd__stream { display: flex; flex-direction: column; gap: var(--space-xl); }

/* The hand-over from the followed stream to the community fallback. */
.fd__divider {
  text-align: center;
  font-family: var(--font-mono);
  color: var(--bb-warmwhite);
  font-size: var(--fs-lg);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-block: 2px solid var(--bb-warmwhite);
  padding-block: var(--space-xs);
}

.fd-card {
  background: var(--bb-warmwhite);
  border: 2px solid var(--bb-black);
  border-radius: var(--bb-radius);
  box-shadow: 4px 4px 0 0 rgba(14, 10, 12, 0.45); /* hard offset — 0 blur (bevel law) */
  color: var(--bb-frame);
  overflow: hidden;
}
.fd-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
}
.fd-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-inline-size: 0;
  min-block-size: 44px;
  transition: filter var(--transition-fast);
}
a.fd-card__author:hover { filter: brightness(1.12); }
a.fd-card__author:focus-visible { outline: 2px solid var(--bb-berry); outline-offset: 2px; }
.fd-card__avatar {
  flex: 0 0 auto;
  inline-size: 36px;
  block-size: 36px;
  border-radius: 50%;
  background: var(--bb-canvas);
  border: 2px solid var(--bb-black);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fd-card__avatar img { inline-size: 32px; block-size: 32px; image-rendering: pixelated; }
.fd-card__handle {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--bb-berry);
  overflow-wrap: anywhere;
}
.fd-card__date { flex: 0 0 auto; font-family: var(--font-mono); color: var(--bb-berry); font-size: var(--fs-md); }

/* The snapshot on its stage — full-bleed inside the card, pixel-crisp, links to the post. */
.fd-card__stage {
  display: block;
  background: var(--bb-canvas);
  border-block: 2px solid var(--bb-black);
  transition: filter var(--transition-fast);
}
.fd-card__stage:hover { filter: brightness(1.12); }
.fd-card__stage:focus-visible { outline: 2px solid var(--bb-gold); outline-offset: -2px; }
.fd-card__stage img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  image-rendering: pixelated;
}

.fd-card__body { padding: var(--space-sm) var(--space-md) var(--space-md); }
.fd-card__caption { overflow-wrap: anywhere; margin-block-end: var(--space-sm); }
.fd-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.fd-card__tag {
  padding: 2px var(--space-sm);
  border: 2px solid var(--bb-black);
  border-radius: var(--bb-radius);
  background: var(--bb-berry);
  color: var(--bb-warmwhite);
  font-family: var(--font-condensed);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--fs-sm);
}

.fd__empty {
  text-align: center;
  background: var(--bb-warmwhite);
  border: 2px solid var(--bb-black);
  border-radius: var(--bb-radius);
  color: var(--bb-frame);
  padding: var(--space-2xl) var(--space-md);
  font-size: var(--fs-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}
.fd__empty-star { color: var(--bb-gold); font-size: var(--fs-2xl); letter-spacing: 0.3em; }
.fd__empty-hint { color: var(--bb-berry); font-size: var(--fs-md); }

.fd__pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-block-start: var(--space-xl);
}

/* ============================================================================
   THE CLAIM GATE + NOT-FOUND — a single centered pass-style card.
   ========================================================================== */
.sc {
  display: flex;
  justify-content: center;
  padding-block: var(--space-2xl) var(--space-3xl);
}
.sc__card {
  inline-size: 100%;
  max-inline-size: 460px;
  background: var(--bb-frame);
  border: 3px solid var(--bb-gold);
  border-radius: 4px;
  box-shadow: 5px 5px 0 0 rgba(14, 10, 12, 0.45); /* hard offset — 0 blur */
  padding: var(--space-xl) var(--space-lg);
}
.sc__eyebrow {
  font-family: var(--font-mono);
  color: var(--bb-gold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  margin-block-end: var(--space-sm);
}
.sc__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-2xl);
  color: var(--bb-warmwhite);
  text-align: center;
  margin-block-end: var(--space-sm);
}
.sc__lead {
  color: var(--bb-dimpink);
  text-align: center;
  margin-block-end: var(--space-lg);
}
.sc__url { font-family: var(--font-mono); color: var(--bb-gold); }

.sc__alert {
  background: var(--bb-berry-dark);
  border: 2px solid var(--bb-berry-light);
  border-radius: var(--bb-radius);
  color: var(--bb-warmwhite);
  padding: var(--space-sm) var(--space-md);
  margin-block-end: var(--space-md);
}

.sc__field { margin-block-end: var(--space-md); display: flex; flex-direction: column; gap: var(--space-xs); }
.sc__label { font-family: var(--font-body); font-weight: 700; color: var(--bb-warmwhite); }
.sc__optional { font-weight: 400; color: var(--bb-dimpink); font-size: var(--fs-sm); }
.sc__handle-wrap { display: flex; align-items: stretch; }
.sc__at {
  display: flex;
  align-items: center;
  padding-inline: var(--space-sm);
  background: var(--bb-gold);
  color: var(--bb-frame);
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  border: 2px solid var(--bb-black);
  border-inline-end: none;
  border-radius: var(--bb-radius) 0 0 var(--bb-radius);
}
.sc__input {
  inline-size: 100%;
  background: var(--bb-warmwhite);
  border: 2px solid var(--bb-black);
  border-radius: var(--bb-radius);
  color: var(--bb-frame);
  font-size: var(--fs-lg);
  padding: var(--space-sm) var(--space-md);
  min-block-size: 44px;
}
.sc__input--handle { border-radius: 0 var(--bb-radius) var(--bb-radius) 0; }
.sc__input:focus-visible { outline: 2px solid var(--bb-gold); outline-offset: 2px; }
.sc__error { color: var(--bb-gold); font-size: var(--fs-sm); }
.sc__hint { color: var(--bb-dimpink); font-size: var(--fs-sm); }
.sc__submit { inline-size: 100%; margin-block-start: var(--space-sm); }
.sc__note {
  color: var(--bb-dimpink);
  font-size: var(--fs-sm);
  text-align: center;
  margin-block-start: var(--space-md);
}
.sc__card--notfound { text-align: center; }
.sc__card--notfound .bb-btn { margin-block-start: var(--space-sm); }

/* ============================================================================
   OWNER EDIT — flat warm-white panels on the candy field.
   ========================================================================== */
.se { padding-block: var(--space-lg) var(--space-3xl); max-inline-size: 900px; }
.se__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-block-end: var(--space-md);
}
.se__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-2xl);
  color: var(--bb-warmwhite);
}

.se__alert {
  background: var(--bb-berry-dark);
  border: 2px solid var(--bb-berry-light);
  border-radius: var(--bb-radius);
  color: var(--bb-warmwhite);
  padding: var(--space-sm) var(--space-md);
  margin-block-end: var(--space-md);
}
.se__alert--ok { background: var(--bb-frame); border-color: var(--bb-mint); }

.se-panel {
  background: var(--bb-warmwhite);
  border: 2px solid var(--bb-black);
  border-radius: var(--bb-radius);
  color: var(--bb-frame);
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  margin-block-end: var(--space-lg);
}
.se-panel__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-xl);
  color: var(--bb-berry);
  /* A warm-white backdrop notches the legend cleanly out of the fieldset's top border
     (the reset makes <legend> display:table, so it overlaps rather than interrupts it). */
  background: var(--bb-warmwhite);
  padding-inline: var(--space-xs);
  margin-block-end: var(--space-xs);
}

.se__field { display: flex; flex-direction: column; gap: var(--space-xs); margin-block-start: var(--space-md); }
.se__field--row { flex-direction: row; gap: var(--space-md); flex-wrap: wrap; }
.se__field--row > * { display: flex; flex-direction: column; gap: var(--space-xs); }
.se__field-grow { flex: 1 1 200px; }
.se__label { font-weight: 700; font-size: var(--fs-md); }
.se__handle { font-family: var(--font-mono); font-size: var(--fs-xl); color: var(--bb-berry); }
.se__handle-note { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--bb-frame); }

.se__input {
  inline-size: 100%;
  background: var(--bb-warmwhite); /* flat well — the hard 2px border delineates it on the panel */
  border: 2px solid var(--bb-black);
  border-radius: var(--bb-radius);
  color: var(--bb-frame);
  font-size: var(--fs-md);
  padding: var(--space-sm) var(--space-md);
  min-block-size: 44px;
}
.se__input:focus-visible { outline: 2px solid var(--bb-berry); outline-offset: 2px; }
.se__input--area { resize: vertical; }
.se__input--emoji { min-inline-size: 110px; }
.se__error { color: var(--bb-berry-dark); font-size: var(--fs-sm); font-weight: 700; }
.se__hint { color: var(--bb-berry); font-size: var(--fs-sm); margin-block-start: var(--space-sm); }
.se__hint-link { color: var(--bb-berry); text-decoration: underline; }

/* The doll picker — bare doll art in flat selectable frames (radio-driven). */
.se-dolls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-start: var(--space-sm);
}
.se-doll { cursor: pointer; }
.se-doll__radio {
  /* Visually hidden, still focusable — the frame carries the visible state. */
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
}
.se-doll__frame {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 96px;
  block-size: 96px;
  background: var(--bb-canvas);
  border: 2px solid var(--bb-black);
  border-radius: var(--bb-radius);
}
.se-doll__img { inline-size: 88px; block-size: 88px; image-rendering: pixelated; }
.se-doll__none { font-size: var(--fs-2xl); color: var(--bb-berry); }
.se-doll__name {
  display: block;
  max-inline-size: 96px;
  font-size: var(--fs-sm);
  text-align: center;
  margin-block-start: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Selected = the gold pressed-in language (checked state drives it — no JS). */
.se-doll__radio:checked + .se-doll__frame {
  background: var(--bb-gold);
  box-shadow: inset 2px 2px 0 0 rgba(14, 10, 12, 0.32), inset -2px -2px 0 0 rgba(255, 255, 255, 0.5);
}
.se-doll__radio:focus-visible + .se-doll__frame {
  outline: 2px solid var(--bb-berry);
  outline-offset: 2px;
}

.se__reroll { margin-block-start: var(--space-md); }
.se__actions { display: flex; justify-content: center; margin-block-start: var(--space-xl); }

/* ============================================================================
   RESPONSIVE — stack below lg; no horizontal overflow at 375px.
   ========================================================================== */
@media (max-width: 991px) {
  .sp__grid { grid-template-columns: 1fr; }
  .sp-pass { max-inline-size: 360px; margin-inline: auto; }
}

@media (max-width: 576px) {
  .sp__banner { block-size: 96px; }
  .sp__banner-doll { block-size: 90px; }
  .sp-stats { grid-template-columns: repeat(2, 1fr); }
  .sp-stats__cell:nth-child(3) { border-inline-start: none; }
  .sp-stats__cell { border-block-start: 2px solid var(--bb-dimpink); }
  .sp-stats__cell:first-child, .sp-stats__cell:nth-child(2) { border-block-start: none; }
  .se__head { justify-content: center; text-align: center; }

  /* RUN 4 — follow-list rows wrap their chip/button under the identity on narrow phones
     (no horizontal overflow at 375px). */
  .fl-row { flex-wrap: wrap; }
  .fl-row__action { margin-inline-start: auto; }
}

/* ══ IMPRESSIONS (Impressions run): the reaction bar — shared by the post view (.ps) and every feed
   card (.fd-card) via the _ReactionBar partial ═══════════════════════════════════════════════════
   Each chip is a hard-bevel warm-white button (the .bb-btn language: 2px black border, brightness-law
   hover, ZERO blur) holding a 32px sprite; the ADMIN'S 64×64 vertical-strip sheet plays via CSS
   steps() through the inline --rx-* custom properties (retina-crisp at 2×, image-rendering:
   pixelated). The viewer's own pick is the PRESSED state — solid gold fill + a reversed inset bevel
   ("gold = selected", the category-tab law). prefers-reduced-motion pins frame 1 (the static
   fallback the spec gets for free). */
.rxbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}
.rxbar__form { display: contents; }
.rxbar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding: 4px 8px;
  background: var(--bb-warmwhite);
  border: 2px solid var(--bb-black);
  border-radius: var(--bb-radius);
  /* Hard 2px raised bevel — light top-left, dark bottom-right, 0 blur (anti-clunk). */
  box-shadow: inset 2px 2px 0 0 rgba(255, 255, 255, 0.85), inset -2px -2px 0 0 rgba(14, 10, 12, 0.22);
  cursor: pointer;
  font: inherit;
}
button.rxbar__btn:hover { filter: brightness(1.12); }   /* the button hover law */
button.rxbar__btn:active {
  box-shadow: inset 2px 2px 0 0 rgba(14, 10, 12, 0.32), inset -2px -2px 0 0 rgba(255, 255, 255, 0.5);
  transform: translateY(1px);
}
button.rxbar__btn:focus-visible { outline: 2px solid var(--bb-gold); outline-offset: 2px; }
.rxbar__btn.is-pressed {
  background: var(--bb-gold);
  box-shadow: inset 2px 2px 0 0 rgba(14, 10, 12, 0.32), inset -2px -2px 0 0 rgba(255, 255, 255, 0.5);
}
.rxbar__btn--static { cursor: default; }

.rx-sprite {
  display: inline-block;
  inline-size: 32px;
  block-size: 32px;
  background-repeat: no-repeat;
  background-size: 32px auto;
  background-position-y: 0;
  image-rendering: pixelated;
  animation-name: rx-play;
  animation-duration: var(--rx-dur, 0.8s);
  animation-timing-function: steps(var(--rx-frames, 1));
  animation-iteration-count: infinite;
}
@keyframes rx-play {
  from { background-position-y: 0; }
  to   { background-position-y: var(--rx-shift, 0px); }
}
@media (prefers-reduced-motion: reduce) {
  /* The spec's free static fallback: frame 1 of the same sheet. */
  .rx-sprite { animation: none; background-position-y: 0; }
}

.rxbar__count {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  line-height: 1;
  color: var(--bb-berry);
  min-inline-size: 1ch;
}
.rxbar__btn.is-pressed .rxbar__count { color: var(--bb-frame); font-weight: 700; }
.rxbar__total {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  color: var(--bb-frame);
  margin-inline-start: var(--space-xs);
  white-space: nowrap;
}

/* The feed card's impressions footer: the bar + the chatter (comment) count linking into the thread. */
.fd-card__impressions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md) var(--space-md);
  border-block-start: 2px solid var(--bb-dimpink);
}
.fd-card__chatter {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  color: var(--bb-berry);
  text-decoration: none;
  white-space: nowrap;
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.fd-card__chatter:hover { filter: brightness(1.12); color: var(--bb-berry); }

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   MYSPACE PERSONALIZATION (RUN 7) — the structured decoration layer. Every rendered value comes
   from admin-curated assets or the fixed color-key map; hard borders/bevels only (anti-clunk law).
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* The generic decoration sprite (the reaction pipeline generalized): a vertical strip played via
   steps() through the --dk-* custom properties; frame 1 is the prefers-reduced-motion static. */
.dk-sprite {
  display: inline-block;
  inline-size: var(--dk-w, 64px);
  block-size: var(--dk-h, 64px);
  background-repeat: no-repeat;
  background-size: var(--dk-w, 64px) auto;
  background-position-y: 0;
  image-rendering: pixelated;
  animation-name: rx-play;                      /* shares the strip-scroll keyframes */
  animation-duration: var(--dk-dur, 0.8s);
  animation-timing-function: steps(var(--dk-frames, 1));
  animation-iteration-count: infinite;
}
.dk-sprite { --rx-shift: var(--dk-shift, 0px); }   /* feed the shared keyframes' end value */
@media (prefers-reduced-motion: reduce) {
  .dk-sprite { animation: none; background-position-y: 0; }   /* frame 1 = the static fallback */
}

/* ── The six structured sticker zones — decorative, never interactive (pointer-events none),
      absolutely placed inside the profile section (never free coordinates). ── */
.sp { position: relative; }
.sp-sticker { position: absolute; z-index: 5; pointer-events: none; }
.sp-sticker--z1 { inset-block-start: 8px;   inset-inline-start: 8px; }
.sp-sticker--z2 { inset-block-start: 8px;   inset-inline-end: 8px; }
.sp-sticker--z3 { inset-block-start: 220px; inset-inline-start: -12px; }
.sp-sticker--z4 { inset-block-start: 220px; inset-inline-end: -12px; }
.sp-sticker--z5 { inset-block-end: 8px;     inset-inline-start: 8px; }
.sp-sticker--z6 { inset-block-end: 8px;     inset-inline-end: 8px; }
@media (max-width: 576px) {
  .sp-sticker { transform: scale(0.75); transform-origin: top left; }
  .sp-sticker--z3, .sp-sticker--z4 { display: none; }   /* graceful degrade on narrow screens */
}

/* ── The retro hit counter (the VIP pass card). ── */
.sp-pass__hits {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-block: var(--space-sm);
}
.sp-pass__hits-label {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bb-breadcrumb);
}
.sp-hits { display: inline-flex; gap: 2px; }
.sp-hits__digit {
  display: inline-block;
  min-inline-size: 14px;
  padding-block: 2px;
  background-color: var(--bb-black);
  color: var(--bb-mint);
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  text-align: center;
  border: 1px solid var(--bb-berry-dark);
}

/* ── The blinkie badge wall. ── */
.sp-blinkies__wall { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.sp-blinkies__badge { border: 1px solid var(--bb-black); }

/* ── Top Friends ("Top 8"). ── */
.sp-topfriends {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
}
.sp-topfriends__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
  padding: var(--space-sm);
  background-color: var(--bb-canvas);
  border: 2px solid var(--bb-black);
  border-radius: var(--bb-radius);
}
.sp-topfriends__card:hover { filter: brightness(1.12); }
.sp-topfriends__card:focus-visible { outline: 2px solid var(--bb-gold); outline-offset: 2px; }
.sp-topfriends__avatar {
  display: block;
  inline-size: 64px;
  block-size: 64px;
  background-color: var(--bb-dimpink);
  border: 2px solid var(--bb-frame);
  border-radius: 50%;
  overflow: hidden;
}
.sp-topfriends__avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; image-rendering: pixelated; }
.sp-topfriends__handle {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--bb-berry);
  overflow-wrap: anywhere;
  text-align: center;
}
.sp-topfriends__empty { color: var(--bb-panel); font-size: var(--fs-sm); }
.sp-topfriends__edit { margin-block-start: var(--space-sm); }
@media (max-width: 576px) {
  .sp-topfriends { grid-template-columns: repeat(2, 1fr); }
}

/* ── The guestbook. ── */
.sp-guestbook__count { color: var(--bb-berry); font-family: var(--font-mono); font-size: var(--fs-md); }
.sp-guestbook__ok { color: var(--bb-mint-text, var(--bb-frame)); background-color: var(--bb-mint); border: 2px solid var(--bb-black); padding: var(--space-sm); font-weight: 600; }
.sp-guestbook__err { color: var(--bb-warmwhite); background-color: var(--bb-berry); border: 2px solid var(--bb-black); padding: var(--space-sm); }
.sp-guestbook__form { display: flex; flex-direction: column; gap: var(--space-sm); margin-block-end: var(--space-md); }
.sp-guestbook__input {
  inline-size: 100%;
  background-color: var(--bb-warmwhite);
  border: 2px solid var(--bb-black);
  border-radius: var(--bb-radius);
  padding: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: var(--bb-frame);
}
.sp-guestbook__form .bb-btn { align-self: flex-start; }
.sp-guestbook__login { color: var(--bb-panel); font-size: var(--fs-sm); }
.sp-guestbook__login a { color: var(--bb-berry); text-decoration: underline; }
.sp-guestbook__empty { color: var(--bb-panel); font-size: var(--fs-sm); }
.sp-guestbook__list { display: flex; flex-direction: column; gap: var(--space-sm); }
.sp-guestbook__entry {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  background-color: var(--bb-canvas);
  border: 2px solid var(--bb-black);
  border-radius: var(--bb-radius);
  padding: var(--space-sm);
}
.sp-guestbook__avatar {
  flex-shrink: 0;
  display: block;
  inline-size: 36px;
  block-size: 36px;
  background-color: var(--bb-dimpink);
  border: 2px solid var(--bb-frame);
  border-radius: 50%;
  overflow: hidden;
}
.sp-guestbook__avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; image-rendering: pixelated; }
.sp-guestbook__body { flex: 1 1 auto; min-inline-size: 0; }
.sp-guestbook__meta { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: baseline; }
.sp-guestbook__handle { font-family: var(--font-mono); font-size: var(--fs-md); color: var(--bb-berry); text-decoration: none; }
a.sp-guestbook__handle:hover { color: var(--bb-frame); }
.sp-guestbook__date { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--bb-panel); }
.sp-guestbook__text { color: var(--bb-frame); font-size: var(--fs-md); overflow-wrap: anywhere; }
.sp-guestbook__delete .bb-btn { min-inline-size: 44px; }
.sp-guestbook__pager { display: flex; align-items: center; justify-content: center; gap: var(--space-md); margin-block-start: var(--space-md); }
.sp-guestbook__pager-status { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--bb-panel); }

/* ── The glitter-trail sparks (spawned by social-decor.js; decorative, non-interactive). ── */
.sp-glitter-spark {
  position: fixed;
  z-index: 950;
  pointer-events: none;
  animation-iteration-count: 1;   /* one strip pass, then the JS removes the node */
}

/* ── The customizer + Top-8 editor (owner-only pages). ── */
.cz { padding-block: var(--space-2xl) var(--space-3xl); }
.cz__head { margin-block-end: var(--space-lg); }
.cz__eyebrow { font-family: var(--font-mono); font-size: var(--fs-lg); color: var(--bb-mint); }
.cz__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(var(--fs-xl), 4vw, var(--fs-2xl)); color: var(--bb-warmwhite); }
.cz__lead { color: var(--bb-gold); }
.cz__lead a { color: var(--bb-warmwhite); text-decoration: underline; }
.cz__ok { color: var(--bb-mint-text, var(--bb-frame)); background-color: var(--bb-mint); border: 2px solid var(--bb-black); padding: var(--space-sm); font-weight: 600; margin-block-end: var(--space-md); }
.cz__ok a { color: inherit; text-decoration: underline; }
.cz__err { color: var(--bb-warmwhite); background-color: var(--bb-berry); border: 2px solid var(--bb-black); padding: var(--space-sm); margin-block-end: var(--space-md); }
.cz__empty { color: var(--bb-warmwhite); }
.cz__empty a { color: var(--bb-gold); text-decoration: underline; }
.cz__group {
  background-color: var(--bb-warmwhite);
  border: 2px solid var(--bb-black);
  border-radius: var(--bb-radius);
  padding: var(--space-md);
  margin-block-end: var(--space-lg);
}
.cz__legend { font-family: var(--font-heading); font-weight: 700; color: var(--bb-frame); padding-inline: var(--space-xs); }
.cz__hint { font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-sm); color: var(--bb-panel); }
.cz__options { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: flex-start; }
.cz__option { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); cursor: pointer; }
.cz__option input { inline-size: 20px; block-size: 20px; accent-color: var(--bb-berry); }
.cz__option input:focus-visible + * { outline: 2px solid var(--bb-gold); outline-offset: 2px; }
.cz__swatch {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 64px;
  block-size: 64px;
  border: 2px solid var(--bb-black);
  border-radius: var(--bb-radius);
  background-color: var(--bb-canvas);
  font-size: var(--fs-xs);
  color: var(--bb-frame);
  text-transform: uppercase;
  overflow: hidden;
}
.cz__swatch--tile { background-size: 64px 64px; image-rendering: pixelated; }
.cz__swatch--color.cz-color--candy     { background-color: var(--bb-field); color: var(--bb-warmwhite); }
.cz__swatch--color.cz-color--dimpink   { background-color: var(--bb-dimpink); }
.cz__swatch--color.cz-color--warmwhite { background-color: var(--bb-warmwhite); }
.cz__swatch--color.cz-color--mint      { background-color: var(--bb-mint); }
.cz__swatch--color.cz-color--mulberry  { background-color: var(--bb-frame); color: var(--bb-warmwhite); }
.cz__swatch--art img { image-rendering: pixelated; }
.cz__caption { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--bb-panel); max-inline-size: 80px; text-align: center; }
.cz__options--blinkies .cz__option--blinkie { flex-direction: row; gap: var(--space-sm); align-items: center; min-block-size: 44px; }
.cz__slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-md); }
.cz__slot { display: flex; flex-direction: column; gap: var(--space-xs); }
.cz__slot-label { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--bb-frame); }
.cz__select {
  min-block-size: 44px;
  background-color: var(--bb-canvas);
  border: 2px solid var(--bb-black);
  border-radius: var(--bb-radius);
  padding-inline: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: var(--bb-frame);
}
.cz__sticker-previews { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-block-start: var(--space-md); }
.cz__sticker-preview { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); }
.cz__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); }

/* ── Game Layer (BUILD 1) — the scores + wallet on the VIP pass (clean/functional; polish deferred).
   On-brand --bb-* only; flat, no blur/soft-shadow (the anti-clunk law). ─────────────────────────── */
.sp-pass__rank {
  margin: var(--space-xs) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  letter-spacing: 0.04em;
  color: var(--bb-gold);
  text-align: center;
}
.sp-pass__rank--craft {
  font-size: var(--fs-md);
  color: var(--bb-warmwhite);
  opacity: 0.9;
}
.sp-pass__xp {
  margin: var(--space-2xs, 4px) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--bb-warmwhite);
  opacity: 0.75;
  text-align: center;
}
.sp-checkin { margin: 0; }
.sp-checkin__msg {
  margin: var(--space-xs) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--bb-gold);
  text-align: center;
}
.sp-checkin__done {
  margin: var(--space-xs) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--bb-warmwhite);
  opacity: 0.7;
  text-align: center;
}
/* The owner-only wallet cells read gold to distinguish spendable currency from the public stats. */
.sp-stats__cell--wallet .sp-stats__num { color: var(--bb-gold); }

/* ── Game Layer BUILD 2 — showcases (the Rack / the Series) + Props ───────────────────────────────
   Curated collections on the profile + individual-item Prop buttons. On-brand --bb-* only; flat
   fills, hard 2px borders, hard offset shadows, brightness-law hovers — no blur/glass (anti-clunk).
   Clean/functional this build; the deeper cosmetic polish is tracked for the social+game sweep. */
.sp-showcase__kind {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--bb-berry);
  opacity: 0.85;
}
.sp-showcase__count {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  color: var(--bb-berry);
}
.sp-showcase__allowance {
  margin: 0 0 var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  background: var(--bb-dimpink);
  border: 2px solid var(--bb-frame);
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  color: var(--bb-frame);
}
.sp-showcase__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-sm);
}
.sp-showcase__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}
.sp-showcase__tile {
  margin: 0;
  inline-size: 100%;
  background: var(--bb-warmwhite);
  border: 2px solid var(--bb-black);
  box-shadow: 3px 3px 0 0 var(--bb-black);   /* hard offset — no blur (anti-clunk law) */
}
.sp-showcase__art {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  aspect-ratio: 1 / 1;
  background: var(--bb-canvas);
  overflow: hidden;
}
.sp-showcase__art img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  image-rendering: pixelated;   /* the designs are pixel art — keep them crisp */
}
.sp-showcase__art-fallback { font-size: 2.5rem; }
.sp-showcase__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  padding: var(--space-xs);
  border-block-start: 2px solid var(--bb-frame);
}
.sp-showcase__item-name {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--bb-frame);
  overflow-wrap: anywhere;
}
.sp-showcase__props {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--bb-berry);
  white-space: nowrap;
}
.sp-prop-form { margin: 0; }
.sp-prop-done {
  display: inline-block;
  padding: var(--space-2xs, 4px) var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--bb-mint-text, var(--bb-frame));
  background: var(--bb-mint);
  border: 2px solid var(--bb-black);
}
.sp-prop-login {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--bb-frame);
}
.sp-prop-msg {
  margin: 0 0 var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  background: var(--bb-warmwhite);
  border: 2px solid var(--bb-mint);
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  color: var(--bb-frame);
}
.sp-showcase__empty {
  padding: var(--space-md);
  text-align: center;
  color: var(--bb-frame);
}
.sp-showcase__empty-star { font-size: 1.6rem; color: var(--bb-gold); }
.sp-showcase__empty-hint { font-size: var(--fs-sm); opacity: 0.8; }
.sp-showcase__pager,
.sp-showcase__curate { margin-block-start: var(--space-sm); }
.sp-showcase__pager {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.sp-showcase__pager-status {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--bb-frame);
}
.sp-showcase__curate { display: inline-block; }

/* ── The owner curate page (/en/social/rack · /en/social/series) ── */
.sc__panel { margin-block-end: var(--space-md); }
.sc__name-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}
.sc__name-input {
  flex: 1 1 220px;
  min-block-size: 44px;
  padding: var(--space-xs) var(--space-sm);
  background: var(--bb-warmwhite);
  border: 2px solid var(--bb-black);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: var(--bb-frame);
}
.sc__item-actions {
  display: flex;
  gap: var(--space-xs);
}
.sc__item-actions form { margin: 0; }
.sc__empty {
  font-family: var(--font-mono);
  color: var(--bb-frame);
}
.sc__back {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-start: var(--space-lg);
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   GAME LAYER BUILD 3a — the BADGE CASE + the earned Label / Custom Shop multi-collection tier.
   Flat fills, hard 2px borders, hard offset shadows, ZERO blur (the anti-clunk law). Cosmetic
   polish is deliberately parked for the later social+game sweep — this is clean and functional.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── The badge case (public recognition on the VIP pass; badges grant NO economy) ────────────── */
.sp-badges__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sp-badges__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  inline-size: 88px;
  text-align: center;
}
.sp-badges__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 72px;
  block-size: 72px;
  background: var(--bb-warmwhite);
  border: 2px solid var(--bb-black);
  box-shadow: 3px 3px 0 0 var(--bb-frame);   /* hard offset — 0 blur */
}
.sp-badges__art {
  inline-size: 64px;
  block-size: 64px;
  image-rendering: pixelated;                /* pixel art stays crisp */
}
.sp-badges__art--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--bb-gold);
  line-height: 1;
}
.sp-badges__name {
  margin-block-start: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--bb-frame);
  overflow-wrap: anywhere;
}
.sp-badges__empty,
.sp-badges__locked {
  margin-block-start: var(--space-sm);
  font-family: var(--font-mono);
  color: var(--bb-frame);
}
.sp-badges__locked-icon { margin-inline-end: var(--space-xs); }

/* ── The curate page's tier panel: collection tabs + the unlock hint ─────────────────────────── */
.sc__tier-status,
.sc__tier-hint {
  font-family: var(--font-mono);
  color: var(--bb-frame);
}
.sc__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: var(--space-sm) 0;
  padding: 0;
  list-style: none;
}
.sc__tab-link {
  display: inline-block;
  min-block-size: 44px;
  padding: var(--space-xs) var(--space-sm);
  background: var(--bb-warmwhite);
  border: 2px solid var(--bb-black);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--bb-frame);
  text-decoration: none;
  line-height: 30px;
}
.sc__tab-link:hover { filter: brightness(1.12); }
.sc__tab-link--current {
  background: var(--bb-gold);
  font-weight: 700;
  box-shadow: inset 2px 2px 0 0 rgba(14, 10, 12, 0.32);   /* pressed-in — 0 blur */
}
.sc__tab-count {
  font-family: var(--font-mono);
  opacity: 0.75;
}
.sc__tier-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  margin-block-start: var(--space-sm);
}
.sc__tier-actions form { margin: 0; }

/* ── Profile showcase: the "showing N of M" glance note (full paging lives on curate) ────────── */
.sp-showcase__more {
  margin-block-start: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--bb-frame);
}

/* ════════════════════════════════════════════════════════════════════════════════════════════════
   Game Layer BUILD 3b — Backstage Goals (quests + streak) and The Charts (leaderboards).
   Flat fills, hard 2px borders, hard offset shadows, ZERO blur — the locked anti-clunk language.
   Cosmetic polish is deliberately deferred to the later social+game sweep.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */

/* The candy field for the two new pages too (the standing design directive — never near-black). */
body.page-quests,
body.page-charts {
  background: var(--bb-field);
  color: var(--bb-warmwhite);
}

/* ── Shared page furniture for both new pages ─────────────────────────────────────────────────── */
.qb,
.ch {
  padding-block: var(--space-xl);
}
.qb__eyebrow,
.ch__eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  color: var(--bb-mint);
  text-align: center;
}
.qb__title,
.ch__title {
  margin: var(--space-xs) 0 var(--space-sm);
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  color: var(--bb-warmwhite);
  text-align: center;
}
.qb__lead,
.ch__lead {
  margin: 0 auto var(--space-lg);
  max-inline-size: 46rem;
  color: var(--bb-gold);
  text-align: center;
}
.qb__foot,
.ch__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  margin-block-start: var(--space-lg);
}

/* ── The check-in streak card — a warm fact, never a countdown ────────────────────────────────── */
.qb-streak {
  margin-block-end: var(--space-lg);
  padding: var(--space-md);
  background: var(--bb-frame);
  border: 2px solid var(--bb-black);
  box-shadow: 4px 4px 0 0 var(--bb-black);
  text-align: center;
}
.qb-streak__title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  color: var(--bb-gold);
}
.qb-streak__count { margin: var(--space-xs) 0; }
.qb-streak__day {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  color: var(--bb-warmwhite);
}
.qb-streak__best {
  font-family: var(--font-mono);
  color: var(--bb-gold);
}
.qb-streak__note {
  margin: var(--space-xs) auto 0;
  max-inline-size: 40rem;
  font-size: var(--fs-sm);
  color: var(--bb-warmwhite);
}
.qb-streak__form { margin-block-start: var(--space-sm); }

/* ── A group of goals (onboarding / today) ────────────────────────────────────────────────────── */
.qb-group { margin-block-end: var(--space-lg); }
.qb-group__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: baseline;
  justify-content: space-between;
}
.qb-group__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  color: var(--bb-warmwhite);
}
.qb-group__note,
.qb-group__lead {
  margin: 0;
  font-family: var(--font-mono);
  color: var(--bb-gold);
}
.qb-group__lead {
  margin-block-start: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
}
.qb-group__done {
  margin: var(--space-xs) 0 0;
  font-family: var(--font-mono);
  color: var(--bb-mint);
}
.qb-list {
  margin: var(--space-sm) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-sm);
}

/* ── One goal row ─────────────────────────────────────────────────────────────────────────────── */
.qb-row {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  padding: var(--space-sm);
  background: var(--bb-warmwhite);
  border: 2px solid var(--bb-black);
  box-shadow: 3px 3px 0 0 var(--bb-black);
}
/* Done = celebrated with a gold edge. There is no "failed" or "expired" state by design. */
.qb-row--done { border-inline-start: 6px solid var(--bb-gold); }
.qb-row__mark {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  color: var(--bb-frame);
}
.qb-row--done .qb-row__mark { color: var(--bb-mint-text, var(--bb-frame)); }
/* basis 0 (not auto): the body shrinks to share its line with the tick rather than wrapping below it. */
.qb-row__body { flex: 1 1 0; min-inline-size: 0; }
.qb-row__name {
  margin: 0;
  font-family: var(--font-heading);
  color: var(--bb-frame);
}
.qb-row__desc {
  margin: 2px 0 0;
  font-size: var(--fs-sm);
  color: var(--bb-frame);
}
.qb-row__progress {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  margin: var(--space-xs) 0 0;
}
.qb-row__bar {
  display: block;
  inline-size: 120px;
  block-size: 10px;
  background: var(--bb-canvas);
  border: 2px solid var(--bb-black);
}
.qb-row__fill {
  display: block;
  block-size: 100%;
  background: var(--bb-berry);
}
.qb-row__count,
.qb-row__reward {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--bb-frame);
}
.qb-row__reward {
  flex: 0 0 auto;
  display: grid;
  gap: 2px;
  text-align: end;
}

/* ── The Charts ───────────────────────────────────────────────────────────────────────────────── */
.ch-board {
  margin-block-end: var(--space-lg);
  padding: var(--space-md);
  background: var(--bb-warmwhite);
  border: 2px solid var(--bb-black);
  box-shadow: 4px 4px 0 0 var(--bb-black);
}
.ch-board__head { margin-block-end: var(--space-sm); }
.ch-board__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  color: var(--bb-frame);
}
.ch-board__sub,
.ch-board__empty {
  margin: 2px 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--bb-frame);
}
.ch-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-xs);
}
.ch-row {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  background: var(--bb-canvas);
  border: 2px solid var(--bb-black);
  min-block-size: 44px;
}
.ch-row--top { background: var(--bb-gold); }
.ch-row__rank {
  flex: 0 0 2rem;
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  color: var(--bb-frame);
  text-align: center;
}
.ch-row__who {
  flex: 1 1 0;
  min-inline-size: 0;
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  color: var(--bb-frame);
  text-decoration: none;
}
.ch-row__who:hover { filter: brightness(1.12); }
.ch-row__name {
  font-family: var(--font-heading);
  overflow-wrap: anywhere;
}
.ch-row__handle {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  opacity: 0.75;
}
.ch-row__metric {
  flex: 0 0 auto;
  display: grid;
  gap: 0;
  text-align: end;
  font-family: var(--font-mono);
  color: var(--bb-frame);
}
.ch-row__value { font-size: var(--fs-lg); }
.ch-row__label { font-size: var(--fs-sm); opacity: 0.75; }

/* ── The VIP pass's gentle streak line (next to the check-in control) ─────────────────────────── */
.sp-streak {
  margin: var(--space-xs) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--bb-gold);
}
.sp-goals-link {
  display: inline-block;
  margin-block-start: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--bb-gold);
}

@media (max-width: 576px) {
  /* Only the reward wraps to its own line — the tick and the goal name stay together, so a row
     still reads as one thought rather than a stray bullet above a paragraph. */
  .qb-row { flex-wrap: wrap; }
  .qb-row__reward {
    flex-basis: 100%;
    display: flex;
    gap: var(--space-sm);
    text-align: start;
  }
  /* A chart row stays ONE line: the rank, then the member (whose name/handle wrap inside their own
     box), then the number. Stacking all three read as three separate rows. */
  .ch-row { flex-wrap: nowrap; gap: var(--space-xs); }
  .ch-row__rank { flex-basis: 1.5rem; }
  .ch-row__who { flex: 1 1 0; flex-wrap: wrap; }
  .ch-row__metric {
    display: flex;
    align-items: baseline;
    gap: 4px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   GAME LAYER BUILD 4 — unlocking, the collection, and gifting.
   Flat fills, hard 2px borders, hard offset shadows, ZERO blur (the anti-clunk law).
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ⚠ THE CANDY FIELD — the rule whose ABSENCE shipped these pages looking like the old dark theme.
   Every Shop view sets ViewData["BodyClass"] = "page-shop", but nothing styled that class, so the
   body fell through to base.css's `background-color: var(--color-bg)` (#120408, the legacy ink).
   The panels and type were already --bb-* correct; they were simply sitting on a near-black field.
   Standing directive: a new page is born compliant — a body-class background rule is part of
   building the page, not part of a later polish sweep. */
body.page-shop {
  background: var(--bb-field);
  color: var(--bb-warmwhite);
}

.shop { padding-block: var(--space-xl) var(--space-3xl); }

.shop__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  color: var(--bb-mint);
  text-align: center;
  margin-block-end: var(--space-xs);
}
.shop__title {
  font-family: var(--font-heading);
  color: var(--bb-warmwhite);
  text-align: center;
  margin-block-end: var(--space-sm);
}
.shop__lead {
  color: var(--bb-gold);
  text-align: center;
  margin-block-end: var(--space-lg);
}

.shop__flash {
  border: 2px solid var(--bb-black);
  padding: var(--space-sm) var(--space-md);
  margin-block-end: var(--space-lg);
  font-weight: 700;
}
.shop__flash--ok  { background: var(--bb-mint); color: var(--bb-mint-text); }
.shop__flash--err { background: var(--bb-warmwhite); color: var(--bb-frame); }

/* ── The wallet. Shown, never sold — there is no "buy more" control anywhere. ─────────────────── */
.shop-wallet {
  background: var(--bb-frame);
  border: 2px solid var(--bb-black);
  box-shadow: 4px 4px 0 0 var(--bb-black);
  padding: var(--space-md);
  margin-block-end: var(--space-xl);
}
.shop-wallet__title,
.shop-owned__title,
.shop-locked__title {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  color: var(--bb-gold);
  margin-block-end: var(--space-sm);
}
.shop-wallet__list {
  display: flex;
  gap: var(--space-xl);
  list-style: none;
  padding: 0;
  margin: 0;
}
.shop-wallet__cell { display: flex; flex-direction: column; }
.shop-wallet__value {
  font-family: var(--font-mono);
  font-size: var(--fs-2xl);
  color: var(--bb-gold);
  line-height: 1;
}
.shop-wallet__label {
  font-family: var(--font-mono);
  color: var(--bb-warmwhite);
}
.shop-wallet__note {
  margin-block-start: var(--space-sm);
  font-size: var(--fs-sm);
  color: var(--bb-warmwhite);
}

.shop-owned, .shop-locked, .shop-gift-set { margin-block-end: var(--space-xl); }
.shop-empty { color: var(--bb-warmwhite); }

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--space-md);
  list-style: none;
  padding: 0;
  margin: 0;
}
.shop-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  background: var(--bb-warmwhite);
  border: 2px solid var(--bb-black);
  box-shadow: 4px 4px 0 0 var(--bb-black);
  padding: var(--space-sm);
  text-align: center;
}
.shop-card__art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  block-size: 5rem;
  background: var(--bb-canvas);
  border: 2px solid var(--bb-frame);
}
.shop-card__art img {
  max-inline-size: 100%;
  max-block-size: 100%;
  image-rendering: pixelated;
}
/* The lock sits ON the art, so a locked item still reads as the thing you want. */
.shop-card__lock {
  position: absolute;
  inset-block-start: 2px;
  inset-inline-end: 2px;
  font-size: var(--fs-sm);
}
.shop-card__name {
  font-weight: 700;
  color: var(--bb-frame);
  overflow-wrap: anywhere;
}
.shop-card__meta,
.shop-card__price {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--bb-berry);
}
.shop-card__meta a { color: var(--bb-berry); }

/* ── The confirmation step (spec §3): plain figures, an equal Cancel, no pressure. ────────────── */
.shop-confirm {
  background: var(--bb-frame);
  border: 2px solid var(--bb-black);
  box-shadow: 5px 5px 0 0 var(--bb-black);
  padding: var(--space-lg);
}
.shop-confirm__item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-block-end: var(--space-md);
}
.shop-confirm__art {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 6rem;
  block-size: 6rem;
  flex: 0 0 auto;
  background: var(--bb-canvas);
  border: 2px solid var(--bb-black);
}
.shop-confirm__art img {
  max-inline-size: 100%;
  max-block-size: 100%;
  image-rendering: pixelated;
}
.shop-confirm__name {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  color: var(--bb-warmwhite);
  overflow-wrap: anywhere;
}
.shop-confirm__kind {
  font-family: var(--font-mono);
  color: var(--bb-gold);
}
.shop-confirm__kind a { color: var(--bb-gold); }

.shop-confirm__figures {
  margin: 0 0 var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--bb-warmwhite);
  border: 2px solid var(--bb-black);
}
.shop-confirm__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: 4px;
  color: var(--bb-frame);
}
.shop-confirm__row dt { font-weight: 700; }
.shop-confirm__row dd { margin: 0; font-family: var(--font-mono); }
.shop-confirm__price { color: var(--bb-berry); font-weight: 700; }

.shop-confirm__note { color: var(--bb-warmwhite); margin-block-end: var(--space-md); }
.shop-confirm__note--quiet { font-size: var(--fs-sm); color: var(--bb-gold); }
.shop-confirm__short { color: var(--bb-warmwhite); margin-block-end: var(--space-md); }
.shop-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

/* ── Gifting ──────────────────────────────────────────────────────────────────────────────────── */
.shop-gift__wallet,
.shop-gift__hint,
.shop-gift__note,
.shop-gift__done { color: var(--bb-warmwhite); }
.shop-gift__wallet strong { color: var(--bb-gold); }
.shop-gift__hint { font-size: var(--fs-sm); margin-block-end: var(--space-sm); }
.shop-gift__note,
.shop-gift__done {
  background: var(--bb-frame);
  border: 2px solid var(--bb-black);
  padding: var(--space-sm) var(--space-md);
  margin-block-end: var(--space-lg);
}
/* The gift entry point sits with the Follow control, since that's where the friendship is. */
.sp-gift__btn { margin-block-start: var(--space-xs); }

@media (max-width: 576px) {
  .shop-wallet__list { gap: var(--space-lg); }
  .shop-confirm__item { flex-direction: column; text-align: center; }
  /* Actions stack full-width so neither Unlock nor Cancel is the easier tap (no dark patterns). */
  .shop-confirm__actions .bb-btn { flex: 1 1 100%; text-align: center; }
}

/* ── Locked decorations in the customizer (spec §3: visible, marked, priced). ─────────────────── */
.cz__option--locked { opacity: 0.75; }
.cz__lock {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--bb-gold);
}
.cz__unlock {
  display: inline-block;
  min-block-size: 44px;
  line-height: 44px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--bb-gold);
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   THE SPEND MODAL + THE SUCCESS / FAILURE POPUPS.
   Locked --bb-* system: flat fills, hard 2px borders, hard OFFSET shadows (0 blur), sharp corners.
   No glass, no backdrop-filter, no soft shadow anywhere — the anti-clunk law applies to overlays
   exactly as it does to panels.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* z-index 900 = the toasts/alerts tier in this project's z-index law (the skip link keeps 9999). */
.shop-modal {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  /* A FLAT scrim — signals modality without blurring anything behind it. */
  background: rgba(14, 10, 12, 0.72);
  overflow-y: auto;
}
.shop-modal[hidden] { display: none; }

/* Stop the page scrolling behind an open modal. */
body.shop-modal-open { overflow: hidden; }

.shop-modal__panel {
  inline-size: min(100%, 30rem);
  max-block-size: calc(100dvh - var(--space-xl));
  overflow-y: auto;
  background: var(--bb-frame);
  border: 2px solid var(--bb-black);
  border-radius: var(--bb-radius);
  /* The pass-card language: a hard offset, never a blurred drop shadow. */
  box-shadow: 6px 6px 0 0 rgba(14, 10, 12, 0.45);
}
/* A win gets a gold edge — the only difference between the two states' chrome. */
.shop-modal__panel--win { border-color: var(--bb-gold); }

.shop-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-block-end: 2px solid var(--bb-black);
}
.shop-modal__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--bb-warmwhite);
}
.shop-modal__panel--win .shop-modal__title {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  color: var(--bb-gold);
}

/* A real pressable: hard bevel, brightness-only hover, inset on press (the button law). */
.shop-modal__close {
  flex-shrink: 0;
  inline-size: 44px;
  block-size: 44px;
  font-size: var(--fs-lg);
  line-height: 1;
  color: var(--bb-warmwhite);
  background: var(--bb-berry);
  border: 2px solid var(--bb-black);
  border-radius: var(--bb-radius);
  box-shadow: inset 2px 2px 0 0 rgba(255, 255, 255, 0.28),
              inset -2px -2px 0 0 rgba(14, 10, 12, 0.55);
  cursor: pointer;
}
.shop-modal__close:hover { filter: brightness(1.12); }
.shop-modal__close:active {
  box-shadow: inset 2px 2px 0 0 rgba(14, 10, 12, 0.5),
              inset -2px -2px 0 0 rgba(255, 255, 255, 0.3);
}

.shop-modal__body { padding: var(--space-md); position: relative; }

/* The confirm partial sits inside the modal without its page-level frame. */
.shop-modal__body .shop-confirm {
  margin: 0;
  border: 0;
  box-shadow: none;
  padding: 0;
  background: transparent;
}

/* ── The popup body (success or failure) ──────────────────────────────────────────────────────── */
.shop-pop { text-align: center; }

.shop-pop__art {
  display: block;
  inline-size: 96px;
  block-size: 96px;
  margin: 0 auto var(--space-sm);
  background: var(--bb-warmwhite);
  border: 2px solid var(--bb-black);
  border-radius: var(--bb-radius);
}
.shop-pop__art img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.shop-pop__item {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--bb-gold);
}
.shop-pop__msg {
  margin: 0 0 var(--space-sm);
  color: var(--bb-warmwhite);
}
.shop-pop__balance {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-mono);
  color: var(--bb-warmwhite);
}
.shop-pop__balance strong { color: var(--bb-gold); }
.shop-pop__rep {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  color: var(--bb-mint);
}

.shop-pop__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  margin-block-start: var(--space-md);
}

/* ── The celebration: decorative only, never focusable, never blocking. ───────────────────────── */
.shop-pop__stars {
  position: absolute;
  inset-block-start: 40%;
  inset-inline-start: 50%;
  pointer-events: none;
}
.shop-pop__star {
  position: absolute;
  font-size: var(--fs-xl);
  color: var(--bb-gold);
  opacity: 0;
  animation: shop-star-burst 900ms ease-out var(--delay, 0ms) 1;
}
@keyframes shop-star-burst {
  0%   { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(0.4); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--d, 110px))) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  /* The JS already skips spawning these; belt-and-braces if any ever render. */
  .shop-pop__star { animation: none; opacity: 0; }
}

@media (max-width: 576px) {
  .shop-modal { padding: var(--space-sm); align-items: flex-end; }
  .shop-modal__panel { inline-size: 100%; }
  /* Both actions full-width so neither is the easier accidental tap (no dark patterns). */
  .shop-pop__actions .bb-btn { flex: 1 1 100%; text-align: center; }
}

/* ── P3A: the profile Block / Unblock control ────────────────────────────────────────────────────
   Block is deliberately LOW-EMPHASIS — a text control, not a button — so it sits beside Follow and
   Message without competing with them. Unblock, by contrast, is the only action left on a blocked
   profile, so it uses the ordinary .bb-btn--secondary treatment (in the markup, not here). */

.sp-block { inline-size: 100%; margin-block-start: var(--space-sm); }

.sp-block__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  min-block-size: 44px;                        /* the touch-target law still applies to text controls */
  background: none;
  border: none;
  color: var(--bb-breadcrumb);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  text-decoration: underline;
  cursor: pointer;
  transition: filter var(--transition-fast);
}
.sp-block__btn:hover { filter: brightness(1.12); }       /* the button hover law — brightness ONLY */
.sp-block__btn:focus-visible { outline: 2px solid var(--bb-gold); outline-offset: 2px; }

.sp-blocked-note {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--bb-breadcrumb);
  text-align: center;
}