/* ==========================================================================
   Mealborne — Components (CSS)
   ==========================================================================
   Reusable element classes that consume design tokens. Loaded AFTER
   tokens.css so var(--c-*), var(--frame-*), var(--t-*), etc. are in scope.

   Naming convention: every Mealborne-system class is prefixed `.mb-`.
   This avoids collision with the existing prototype classes (.screen,
   .gold-title, .card, .btn) which Wave 3+ will replace incrementally.
   The legacy classes stay live until a screen is retheemed.

   Wave 2 (2026-04-25): seeded with what title-screen.js needs.
   ========================================================================== */

/* ===== PIXEL SPRITE · canonical render rule for all Squire/monster pixel art =====
   Apply to any <img> rendering pixel art at non-native sizes. Without it, browser
   bilinear filtering blurs the pixel grid and our crisp 8-bit edges become mushy.
   Use everywhere Squire sprites render: hub-town party-card, squire-den portrait,
   species-picker cards, squire-evolution ceremony, plus future monster/biome assets.
   First wired in: hub-town.js party-card avatar (Phase 6b, 2026-04-25). */
.mb-pixel-sprite {
  image-rendering: pixelated;
  image-rendering: crisp-edges;  /* Firefox fallback */
  object-fit: contain;
}


/* ============ SCREEN CONTAINERS =========================================== */

/* Full-bleed dark screen ground. Use for title, ceremony, hero contexts.
   Composes a Plum→Onyx radial vignette over flat Deep Onyx. */
.mb-screen {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 40%, var(--c-plum) 0%, var(--c-onyx) 70%),
    var(--c-onyx);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: var(--font-ui);
  color: var(--c-bone);
  z-index: var(--z-modal);
}

.mb-screen-tap { cursor: pointer; }


/* ============ EMBER PARTICLES =============================================
   Ambient warmth for hero / title contexts. Replaces the FitQuest gold-star
   twinkle. Each ember is a small dot that drifts upward and fades. */

.mb-ember {
  position: absolute;
  border-radius: 50%;
  background: var(--c-amber);
  pointer-events: none;
  opacity: 0;
  animation: mb-ember-drift 6s var(--ease-in-out) infinite;
  filter: drop-shadow(0 0 4px rgba(232, 147, 26, 0.5));
}

@keyframes mb-ember-drift {
  0%   { opacity: 0;    transform: translateY(0)    scale(0.6); }
  20%  { opacity: 0.6;  transform: translateY(-12px) scale(1.0); }
  100% { opacity: 0;    transform: translateY(-60px) scale(1.2); }
}


/* ============ WORDMARK · The locked Mealborne logo ========================
   Forum + Aged Bronze gradient + 8px inscriptional tracking. Uses
   background-clip:text so the gradient fills the glyphs. The drop-shadow
   simulates the incised depth from the locked v2 spec. */

.mb-wordmark {
  font-family: var(--font-ceremony);
  font-weight: 400;                  /* Forum is single-weight */
  font-size: clamp(40px, 12vw, 64px);
  letter-spacing: var(--ls-inscription);
  line-height: 1.1;
  text-align: center;

  /* Aged Bronze, applied via background-clip:text */
  color: transparent;
  background-image: var(--bronze-gradient-aged);
  -webkit-background-clip: text;
  background-clip: text;

  /* Inscribed depth — subtle bottom shadow simulates carve */
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.85));

  margin: var(--s-3) 0;
  user-select: none;
}


/* ============ INSCRIPTION RULES ===========================================
   The plaque-style hairline rules that frame the wordmark. Used above
   ("--top" alone) and below ("--rule" with center dot) per the locked
   primary master composition. */

.mb-rule-top {
  width: clamp(120px, 32vw, 200px);
  height: 1px;
  background: var(--c-bronze-mid);
  opacity: 0.35;
  margin: 0 auto var(--s-2);
}

.mb-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

.mb-rule-line {
  height: 1px;
  width: clamp(56px, 14vw, 92px);
  background: var(--c-bronze-mid);
  opacity: 0.55;
}

/* Square pixel dot — matches the inscription aesthetic (not round). */
.mb-rule-dot {
  width: 4px;
  height: 4px;
  background: var(--c-bronze-top);
  opacity: 0.85;
  flex: none;
}


/* ============ TAP PROMPT (title screen affordance) ======================== */

.mb-tap-prompt {
  position: absolute;
  bottom: clamp(64px, 14vh, 104px);
  font-family: var(--font-ceremony);
  font-size: var(--t-sm);
  letter-spacing: var(--ls-wide);
  color: var(--c-bronze-mid);
  text-transform: uppercase;
  user-select: none;
  animation:
    mb-tap-pulse 2.4s var(--ease-in-out) infinite,
    mb-fade-in   2s   var(--ease-out) 0.4s both;
}

/* Variant when prompt is nested inside another absolutely-positioned block
   (e.g. the welcome-back group) — drops the absolute positioning. */
.mb-tap-prompt--inline {
  position: static;
  bottom: auto;
}

@keyframes mb-tap-pulse {
  0%, 100% { opacity: 0.30; }
  50%      { opacity: 0.85; }
}


/* ============ WELCOME-BACK BLOCK (returning player) ======================= */

.mb-welcome {
  position: absolute;
  bottom: clamp(64px, 14vh, 104px);
  text-align: center;
  animation: mb-fade-in 2s var(--ease-out) 0.6s both;
}

.mb-welcome-eyebrow {
  font-family: var(--font-ceremony);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-wide);
  color: var(--c-bronze-mid);
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: var(--s-1);
}

.mb-welcome-name {
  font-family: var(--font-ceremony);
  font-size: var(--t-lg);
  letter-spacing: var(--ls-normal);
  color: var(--c-bronze-top);
  margin-bottom: var(--s-2);
}


/* ============ VERSION / CREDIT TAG ======================================== */

.mb-version-tag {
  position: absolute;
  bottom: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-tight);
  color: var(--c-bronze-mid);
  opacity: 0.35;
  user-select: none;
}


/* ============ ENTRANCE ANIMATIONS ========================================= */

.mb-title-reveal {
  position: relative;
  z-index: 1;
  animation: mb-title-fade-in 1.6s var(--ease-out) both;
}

@keyframes mb-title-fade-in {
  0%   { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0);    }
}

@keyframes mb-fade-in {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0);   }
}


/* ============ COMPACT WORDMARK (header contexts) ==========================
   Smaller variant for screens that are not the title hero — onboarding,
   onboarding flow, in-app screens that need a brand mark in the header. */

.mb-wordmark--sm {
  font-size: clamp(20px, 5.5vw, 28px);
  letter-spacing: var(--ls-wide);
  margin: var(--s-2) 0 0;
}


/* ============ PAGE-STYLE SCREEN (forms, settings, lists) ==================
   For screens that scroll and have content stacked vertically. Uses the
   on-brand onyx ground without the full vignette of .mb-screen.
   Replaces the legacy .screen class incrementally — Wave 3+ migrates more
   screens. */

.mb-screen-page {
  min-height: 100vh;
  padding: var(--s-6) var(--s-5);
  background:
    radial-gradient(ellipse at 50% 0%, var(--c-plum) 0%, var(--c-onyx) 65%),
    var(--c-onyx);
  display: flex;
  flex-direction: column;
  font-family: var(--font-ui);
  color: var(--c-bone);
}


/* ============ BUTTON · primary + secondary ================================
   Bronze-frame button that grammatically matches the locked logo system.
   Matches the .btn pattern in the design system v2 spec. */

.mb-btn {
  display: inline-block;
  width: 100%;
  min-height: 44px;
  padding: var(--s-3) var(--s-5);
  background: rgba(138, 125, 58, 0.15);
  border: var(--rule-thin) solid var(--c-bronze-top);
  border-radius: var(--r-card);
  font-family: var(--font-nav);
  font-size: var(--t-md);
  letter-spacing: var(--ls-normal);
  color: var(--c-bronze-top);
  text-align: center;
  cursor: pointer;
  text-transform: uppercase;
  transition: background var(--motion-snap) var(--ease-out),
              color      var(--motion-snap) var(--ease-out),
              border-color var(--motion-snap) var(--ease-out);
  user-select: none;
}

.mb-btn:hover {
  background: rgba(242, 184, 56, 0.22);
  color: var(--c-bone);
}

.mb-btn:active {
  background: rgba(242, 184, 56, 0.30);
}

.mb-btn:disabled,
.mb-btn[aria-disabled="true"] {
  opacity: 0.35;
  cursor: not-allowed;
}

.mb-btn--secondary {
  background: transparent;
  border-color: var(--c-bronze-mid);
  color: var(--c-bronze-mid);
}

.mb-btn--secondary:hover {
  background: rgba(138, 125, 58, 0.10);
  border-color: var(--c-bronze-top);
  color: var(--c-bone);
}

.mb-secondary-cta {
  display: block;
  width: auto;
  min-height: 0;
  margin: 10px auto 0;
  padding: 8px 24px;
  background: transparent;
  border: 0.5px solid var(--c-bronze-mid);
  border-radius: var(--r-md);
  color: var(--c-aff-wandering);
  font-size: 14px;
  font-family: var(--font-nav);
  text-transform: none;
  letter-spacing: 0.4px;
}

.mb-section-eyebrow {
  font-size: var(--t-xs);
  font-family: var(--font-mono);
  color: var(--c-bronze-top);
  margin: 0 0 var(--s-2);
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.mb-meal-type-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 18px;
}

.mb-meal-type-chip {
  padding: 6px 12px;
  background: transparent;
  border: 0.5px solid var(--c-bronze-mid);
  border-radius: var(--r-md);
  color: var(--c-aff-wandering);
  font-size: var(--t-xs);
  font-family: var(--font-nav);
  cursor: pointer;
}

.mb-meal-type-chip--selected {
  background: var(--c-bronze-top);
  border-color: var(--c-bronze-top);
  color: var(--c-bronze-shadow);
  font-weight: 500;
}

.mb-recent-relog-section {
  margin: 0 0 var(--s-4);
}

.mb-recent-relog-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.mb-recent-relog-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 0.5px solid rgba(255,255,255,0.08);
  border-radius: var(--r-md);
  cursor: pointer;
}

.mb-recent-relog-card__title {
  color: var(--c-bone);
  font-size: var(--t-sm);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.mb-recent-relog-card__macro {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: var(--t-xs);
}

.mb-recent-relog-card__cta {
  flex-shrink: 0;
  font-size: var(--t-xs);
  color: var(--c-bronze-mid);
  letter-spacing: 0.6px;
}


/* ============ TAB ROW · segmented control =================================
   Used in settings and anywhere two-or-three-way switching
   is needed. */

.mb-tab-row {
  display: flex;
  gap: 0;
  border: var(--rule-thin) solid rgba(138, 125, 58, 0.30);
  border-radius: var(--r-card);
  overflow: hidden;
  background: rgba(26, 20, 32, 0.55);
}

.mb-tab {
  flex: 1;
  padding: var(--s-3) var(--s-2);
  background: transparent;
  border: none;
  border-bottom: var(--rule-med) solid transparent;
  font-family: var(--font-nav);
  font-size: var(--t-sm);
  letter-spacing: var(--ls-normal);
  color: var(--c-bronze-mid);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--motion-snap), color var(--motion-snap), border-color var(--motion-snap);
}

.mb-tab:hover {
  color: var(--c-bone);
  background: rgba(138, 125, 58, 0.06);
}

.mb-tab--active {
  background: rgba(242, 184, 56, 0.10);
  color: var(--c-bronze-top);
  border-bottom-color: var(--c-bronze-top);
}


/* ============ DIVIDER · "or" between sections ============================= */

.mb-divider-or {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-5) 0;
}

.mb-divider-or-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(138, 125, 58, 0.35),
    transparent);
}

.mb-divider-or-text {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--c-bronze-mid);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  opacity: 0.6;
}


/* ============ FINE PRINT (footers, legal, version notes) ================== */

.mb-fine-print {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--c-bronze-mid);
  opacity: 0.45;
  line-height: 1.6;
  padding: var(--s-4) 0;
}


/* ============ HEADER BLOCK (centered title + optional subtitle) =========== */

.mb-page-header {
  text-align: center;
  margin-bottom: var(--s-8);
  animation: mb-fade-in 1.2s var(--ease-out) both;
}


/* ============ SCREEN TITLE (secondary heading, below wordmark) ============
   For screens that have their own identity beyond the brand wordmark —
   "GUILD ENTRY", "DAILY DEBRIEF", "TROPHY HALL". Forum caps, bronze,
   tracked. Sits below the wordmark in the page header. */

.mb-screen-title {
  font-family: var(--font-ceremony);
  font-size: var(--t-lg);
  letter-spacing: var(--ls-wide);
  color: var(--c-bronze-top);
  text-transform: uppercase;
  text-align: center;
  margin: var(--s-3) 0 var(--s-2);
}

/* Italic flavor caption beneath a screen title — diegetic / NPC voice. */
.mb-flavor {
  font-family: var(--font-script);
  font-style: italic;
  font-size: var(--t-base);
  color: var(--c-bronze-mid);
  text-align: center;
  line-height: 1.55;
  max-width: 32ch;
  margin: 0 auto var(--s-5);
  opacity: 0.85;
}


/* ============ INPUT (text, date, email, password) =========================
   Token-driven input style. Replaces the inline-styled inputs in age-gate,
   inputGroup() helpers, and any other form across the prototype.
   Wave 3 will migrate inputGroup() in components.js to use .mb-input. */

.mb-input {
  width: 100%;
  min-height: 44px;
  padding: var(--s-3) var(--s-4);
  background: rgba(26, 20, 32, 0.55);
  border: var(--rule-thin) solid rgba(138, 125, 58, 0.35);
  border-radius: var(--r-card);
  font-family: var(--font-ui);
  font-size: var(--t-md);
  color: var(--c-bone);
  letter-spacing: var(--ls-tight);
  transition: border-color var(--motion-snap), background var(--motion-snap);
}

.mb-input::placeholder {
  color: var(--c-bronze-mid);
  opacity: 0.55;
}

.mb-input:focus {
  outline: none;
  border-color: var(--c-bronze-top);
  background: rgba(26, 20, 32, 0.75);
}

.mb-input-label {
  display: block;
  font-family: var(--font-data);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-wide);
  color: var(--c-bronze-mid);
  text-transform: uppercase;
  margin-bottom: var(--s-1);
}

.mb-input-help {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  color: var(--c-bronze-mid);
  opacity: 0.7;
  margin-top: var(--s-2);
  line-height: 1.55;
}

.mb-input-error {
  display: none;
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  color: var(--c-ember);
  margin-top: var(--s-2);
}

.mb-input-error[data-visible="true"] {
  display: block;
}


/* ============ PROSE (readable body copy inside cards / sections) ==========
   For the warm, narrative-heavy content blocks — age-gate rejection,
   guild registration intro, etc. */

.mb-prose {
  font-family: var(--font-ui);
  font-size: var(--t-base);
  line-height: 1.7;
  color: var(--c-bone);
  text-align: center;
}

.mb-prose strong {
  color: var(--c-bronze-top);
  font-weight: 600;
}

.mb-prose-muted {
  color: var(--c-bronze-mid);
  opacity: 0.75;
}


/* ============ FRAME · D2 Double-Rule Plaque ===============================
   The canonical Mealborne UI surface — wordmark monogram lineage. Used
   wherever "this is the game speaking" needs to read: ceremony moments,
   modal hero contexts, plaque-style emphasis. Has top corner accent
   pixels (Harvest Gold dots) at the outer rule. .mb-frame-inner adds the
   second hairline rule for full D2 grammar; omit for a lighter chrome. */

.mb-frame {
  position: relative;
  background: var(--frame-bg);
  border: var(--frame-outer-weight) solid var(--frame-outer-color);
  border-radius: var(--frame-radius);
  padding: var(--frame-padding);
}

.mb-frame::before,
.mb-frame::after {
  content: "";
  position: absolute;
  width: var(--frame-corner-size);
  height: var(--frame-corner-size);
  background: var(--frame-corner-color);
  pointer-events: none;
}
.mb-frame::before { top: calc(var(--frame-corner-size) / -2); left: calc(var(--frame-corner-size) / -2); }
.mb-frame::after  { top: calc(var(--frame-corner-size) / -2); right: calc(var(--frame-corner-size) / -2); }

.mb-frame-inner {
  border: var(--frame-inner-weight) solid var(--frame-inner-color);
  border-radius: calc(var(--frame-radius) - 1px);
  padding: var(--s-4) var(--s-5);
}


/* ============ CARD · content surface =====================================
   Lighter than .mb-frame — for content blocks within a screen. Single
   rule + top corner accents. No inner rule. Used for damage breakdown,
   stat blocks, list entries, secondary panels. */

.mb-card {
  position: relative;
  background: rgba(26, 20, 32, 0.55);
  border: var(--rule-thin) solid var(--c-bronze-mid);
  border-radius: var(--r-card);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-3);
}

.mb-card::before,
.mb-card::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--frame-corner-color);
  pointer-events: none;
}
.mb-card::before { top: -2px; left: -2px; }
.mb-card::after  { top: -2px; right: -2px; }

.mb-card-title {
  font-family: var(--font-ceremony);
  font-size: var(--t-md);
  letter-spacing: var(--ls-normal);
  color: var(--c-bronze-top);
  text-transform: uppercase;
  margin-bottom: var(--s-3);
}

.mb-card-subtitle {
  font-family: var(--font-script);
  font-style: italic;
  font-size: var(--t-sm);
  color: var(--c-bronze-mid);
  margin-bottom: var(--s-3);
  line-height: 1.5;
}


/* ============ INSIGHT BOX · accented callout =============================
   For Squire insights, level-ups, ability activations, critical hits —
   content blocks that need a colored emphasis stripe. Consume an
   `--accent` custom property via inline style for affinity / status color.
   Default accent is bronze-mid. */

.mb-insight {
  --accent: var(--c-bronze-mid);
  position: relative;
  background: rgba(26, 20, 32, 0.45);
  border-left: 3px solid var(--accent);
  border-top: var(--rule-hair) solid rgba(138, 125, 58, 0.18);
  border-right: var(--rule-hair) solid rgba(138, 125, 58, 0.18);
  border-bottom: var(--rule-hair) solid rgba(138, 125, 58, 0.18);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-3);
  font-family: var(--font-ui);
  font-size: var(--t-base);
  color: var(--c-bone);
  line-height: 1.55;
}

.mb-insight strong {
  color: var(--accent);
  font-weight: 600;
}

.mb-insight-line {
  font-size: var(--t-sm);
  color: #b8b0c0;
  margin-top: var(--s-1);
}

.mb-insight-meta {
  font-family: var(--font-script);
  font-style: italic;
  font-size: var(--t-xs);
  color: var(--c-bronze-mid);
  margin-top: var(--s-1);
  opacity: 0.85;
}


/* ============ STACKED BAR · damage breakdown =============================
   Horizontal bar with multiple colored segments. Used for the macro
   contribution display in battle-debrief. Each segment width is set
   inline (proportional to contribution); colors set inline (per-macro
   accuracy). */

.mb-stacked-bar {
  display: flex;
  width: 100%;
  height: 26px;
  background: rgba(26, 20, 32, 0.6);
  border: var(--rule-thin) solid var(--c-bronze-mid);
  border-radius: var(--r-card);
  overflow: hidden;
  margin-bottom: var(--s-3);
}

.mb-stacked-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--c-onyx);
  font-weight: 700;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.4);
  transition: width var(--motion-smooth) var(--ease-out);
  border-right: 1px solid rgba(26, 20, 32, 0.4);
}
.mb-stacked-seg:last-child { border-right: none; }


/* ============ STAT ROW · accuracy / macro indicator strip ================ */

.mb-stat-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--c-bronze-mid);
  margin-top: var(--s-3);
  letter-spacing: var(--ls-tight);
}

.mb-stat-row > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}


/* ============ NOTE · tiny inline annotation =============================
   Below cards, for tiny status notes (affix, variety, etc.). */

.mb-note {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  color: var(--c-bronze-mid);
  margin-top: var(--s-2);
  line-height: 1.5;
}

.mb-note-warm {
  color: var(--c-amber);
}


/* ============ PROGRESS BAR · configurable accent + width =================
   Used for Bond XP, HP, day progress, training rings, encounter HP, etc.
   Set width inline (`width: N%`); set accent inline via CSS var
   (`--accent: <color>`) when caller wants a non-default color (e.g. squire
   species color, affinity color). Default accent is bronze. */

.mb-progress {
  --accent: var(--c-bronze-top);
  position: relative;
  height: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: var(--rule-thin) solid rgba(138, 125, 58, 0.25);
  border-radius: var(--r-card);
  overflow: hidden;
  margin: var(--s-2) 0;
}

.mb-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 60%, transparent), var(--accent));
  border-radius: inherit;
  transition: width var(--motion-smooth) var(--ease-out);
}

.mb-progress-overlay {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: color-mix(in srgb, var(--c-bronze-mid) 72%, transparent);
  background-image: repeating-linear-gradient(135deg, rgba(255, 235, 200, 0.32) 0 2px, transparent 2px 6px);
  border-left: 1px solid rgba(255, 235, 200, 0.18);
  transition: width 200ms ease-out;
  pointer-events: none;
}

.mb-progress-overlay--cap {
  background-color: color-mix(in srgb, var(--c-bronze-mid) 85%, transparent);
  background-image: repeating-linear-gradient(135deg, rgba(255, 235, 200, 0.38) 0 2px, transparent 2px 6px);
  border-left: 1px solid rgba(255, 235, 200, 0.22);
}

.mb-progress-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--c-bronze-mid);
  letter-spacing: var(--ls-tight);
}

.mb-hub-boss-progress-preview {
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
}

.mb-hub-boss-progress-dialogue {
  margin-top: 8px;
  padding: 8px 10px;
  border-left: 3px solid var(--accent);
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  font-size: var(--t-xs);
  line-height: 1.45;
}

.mb-hub-boss-progress-dialogue__speaker {
  font-weight: 800;
}

.mb-hub-boss-progress-dialogue__copy {
  color: var(--text-flavor);
  font-style: italic;
}

.mb-hub-boss-progress-tip {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--c-bronze-mid) 34%, transparent);
  border-radius: var(--r-card);
  background: rgba(242, 184, 56, 0.08);
  color: var(--c-bone);
  font-size: var(--t-xs);
  line-height: 1.45;
}


/* ============ BADGE · small label chip ===================================
   For rarity tags, "equipped" indicators, level pills. Default is bronze
   tone; consume `--accent` for squire/affinity color via inline style. */

.mb-badge {
  --accent: var(--c-bronze-top);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: var(--rule-thin) solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: var(--r-pill);
  font-family: var(--font-nav);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-normal);
  color: var(--accent);
  text-transform: uppercase;
}

.mb-badge-strong {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-color: var(--accent);
}

/* ── .mb-tier-badge · tier indicator chip ────────────────────────────────── */
.mb-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--t-xs);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.mb-tier-badge[data-tier="adventurer"] {
  background: rgba(242, 184, 56, 0.15);
  color: var(--c-bronze-top);
  border: 1px solid rgba(242, 184, 56, 0.35);
}
.mb-tier-badge[data-tier="champion"] {
  background: rgba(168, 130, 255, 0.15);
  color: #c4a0ff;
  border: 1px solid rgba(168, 130, 255, 0.35);
}


/* ============ SPEECH BUBBLE · NPC / Squire dialogue ======================
   Cormorant italic body inside a soft squire-tinted bubble with a top-left
   speech triangle. Set `--accent` inline for the squire color. */

.mb-bubble {
  --accent: var(--c-bronze-mid);
  position: relative;
  margin: var(--s-3) 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-modal);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border: var(--rule-thin) solid color-mix(in srgb, var(--accent) 22%, transparent);
}

.mb-bubble::before {
  content: "";
  position: absolute;
  top: -8px;
  left: var(--s-8);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Squire cameo bubble: speaker is below the bubble, away from the Corvus banner. */
.mb-bubble--squire-cameo::before {
  top: unset;
  bottom: -8px;
  border-bottom: none;
  border-top: 8px solid color-mix(in srgb, var(--accent) 22%, transparent);
}

.mb-bubble-text {
  font-family: var(--font-script);
  font-style: italic;
  font-size: var(--t-base);
  color: var(--accent);
  line-height: 1.55;
}

.mb-bubble-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--c-bronze-mid);
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
  margin-bottom: 4px;
  opacity: 0.7;
}

.mb-bubble-dashed {
  border-style: dashed;
  background: rgba(26, 20, 32, 0.45);
}

.mb-results-training-truth {
  margin: 0 0 var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-card);
  border: 1px solid color-mix(in srgb, var(--c-info) 24%, transparent);
  background: color-mix(in srgb, var(--c-info) 7%, transparent);
  color: var(--c-bone);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 800;
}

.mb-results-training-reflection {
  --accent: var(--c-bronze-mid);
  margin: 0 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-modal);
  border: var(--rule-thin) solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.mb-results-squire-card {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: var(--s-3);
  align-items: center;
  border-left: 4px solid var(--accent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent), rgba(20, 16, 28, 0.88));
}

.mb-results-squire-avatar {
  width: 72px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.mb-results-squire-avatar img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.36));
}

.mb-results-squire-avatar span {
  font-size: 48px;
  line-height: 1;
}

.mb-results-squire-copy {
  min-width: 0;
}

.mb-results-squire-name,
.mb-results-channel-title,
.mb-results-corvus-title,
.mb-results-corvus-kicker {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 900;
  color: var(--accent);
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
}

.mb-results-corvus-kicker {
  margin: 10px 0 6px;
  color: var(--c-stone);
}

.mb-results-corvus-headline {
  margin-bottom: 8px;
  color: var(--c-bone);
  font-size: var(--t-base);
  font-weight: 900;
  line-height: 1.35;
}

.mb-results-reward-title {
  display: inline-block;
  margin-bottom: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--c-bronze-top);
  font-size: var(--t-xs);
  font-weight: 900;
}

.mb-results-squire-preamble {
  margin-top: 4px;
  color: var(--c-amber);
  font-size: var(--t-sm);
  line-height: 1.35;
}

.mb-results-squire-headline {
  margin-top: 4px;
  color: var(--c-bone);
  font-size: var(--t-lg);
  font-weight: 900;
  line-height: 1.25;
}

.mb-results-channel-card,
.mb-results-corvus-card {
  border-left: 3px solid var(--accent);
}

.mb-results-channel-value {
  margin-top: 2px;
  font-size: 32px;
  line-height: 1;
  font-weight: 900;
}

.mb-results-channel-body {
  margin-top: 8px;
  color: var(--c-stone);
  font-size: var(--t-sm);
  line-height: 1.45;
}

@media (max-width: 420px) {
  .mb-results-squire-card {
    grid-template-columns: 60px 1fr;
    gap: var(--s-2);
  }

  .mb-results-squire-avatar,
  .mb-results-squire-avatar img {
    width: 58px;
    height: 58px;
  }

  .mb-results-squire-headline {
    font-size: var(--t-base);
  }
}


/* ============ PORTRAIT RING · circular character avatar frame ============
   Used for Squire portrait, party-card portraits, Hub squire selector.
   Consumes `--accent` for the ring color (species/affinity hex). */

.mb-portrait-ring {
  --accent: var(--c-bronze-top);
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 14%, transparent),
    color-mix(in srgb, var(--accent) 4%, transparent));
  border: 3px solid color-mix(in srgb, var(--accent) 50%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  position: relative;
  box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 14%, transparent);
}

/* Stage-aware portrait sizing for Squire Den (Wave 20b §3.2) */
.mb-portrait-ring[data-stage="1"] { width: 120px; height: 120px; }
.mb-portrait-ring[data-stage="2"] { width: 132px; height: 132px; }
.mb-portrait-ring[data-stage="3"] { width: 144px; height: 144px; }
.mb-portrait-ring[data-stage="4"] { width: 156px; height: 156px; }
.mb-portrait-ring[data-stage="5"] {
  width: 168px; height: 168px;
  box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 24px color-mix(in srgb, var(--accent) 14%, transparent);
  background: radial-gradient(circle at center, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
}

.mb-portrait-status {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-onyx);
  border: 2px solid var(--c-bronze-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}


/* ============ TILE GRID · 2-col grid of accessory / item tiles =========== */

.mb-tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2);
}

.mb-tile {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3);
  background: rgba(255, 255, 255, 0.03);
  border: var(--rule-thin) solid rgba(138, 125, 58, 0.2);
  border-radius: var(--r-card);
  cursor: pointer;
  transition: border-color var(--motion-snap), background var(--motion-snap);
}

.mb-tile:hover {
  background: rgba(138, 125, 58, 0.06);
  border-color: var(--c-bronze-mid);
}

.mb-tile-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.mb-tile-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mb-tile-name {
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-bone);
}

.mb-tile-desc {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  color: var(--c-bronze-mid);
  line-height: 1.4;
}


/* ============ EQUIPPED CHIP · clickable removable accessory =============
   Squire-color tinted chip with the accessory icon + name + remove "x". */

.mb-eq-chip {
  --accent: var(--c-bronze-top);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: var(--rule-thin) solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: var(--r-card);
  cursor: pointer;
  transition: background var(--motion-snap);
}

.mb-eq-chip:hover {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.mb-eq-chip-name {
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  color: var(--accent);
}

.mb-eq-chip-remove {
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  color: var(--c-bronze-mid);
  margin-left: 2px;
}


/* ============ LIST ROW · ability rows, milestone rows ==================== */

.mb-list-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) 0;
}

.mb-list-row-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.03);
  border: var(--rule-thin) solid rgba(138, 125, 58, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.mb-list-row-icon[data-unlocked="true"] {
  --accent: var(--c-bronze-top);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

.mb-list-row-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.mb-list-row-name {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-bone);
}

.mb-list-row-meta {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--c-bronze-mid);
  letter-spacing: var(--ls-tight);
}

.mb-list-row-desc {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  color: var(--c-bronze-mid);
  line-height: 1.5;
}

.mb-list-row[data-locked="true"] {
  opacity: 0.4;
}


/* ============ MILESTONE TIMELINE · linear dots for level / phase progress
   Used for Bond level milestones (1-10) and similar linear progressions. */

.mb-milestone-row {
  display: flex;
  justify-content: space-between;
  margin-top: var(--s-3);
  padding: 0 var(--s-1);
}

.mb-milestone {
  --accent: var(--c-bronze-top);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: var(--rule-thin) solid rgba(138, 125, 58, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--c-bronze-mid);
  transition: all var(--motion-smooth);
}

.mb-milestone[data-state="reached"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--c-onyx);
}

.mb-milestone[data-state="current"] {
  background: var(--accent);
  border: 2px solid var(--c-bronze-top);
  color: var(--c-onyx);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 50%, transparent);
}


/* ============ BACK LINK · subtle text-only "←" navigation ================
   Use this in screens that want a quiet back affordance instead of a full
   button. Replaces inline-styled `<button>` patterns. */

.mb-back-link {
  background: transparent;
  border: none;
  color: var(--c-bronze-mid);
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  letter-spacing: var(--ls-tight);
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  margin-bottom: var(--s-3);
  text-align: left;
  transition: color var(--motion-snap);
}

.mb-back-link:hover {
  color: var(--c-bronze-top);
}


/* ============ SECTION HEADER · in-card row title + meta ================== */

.mb-section-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s-3);
}

.mb-section-row-title {
  font-family: var(--font-nav);
  font-size: var(--t-md);
  letter-spacing: var(--ls-normal);
  color: var(--c-bone);
  text-transform: uppercase;
}

.mb-section-row-meta {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--c-bronze-mid);
  letter-spacing: var(--ls-tight);
}


/* ============ HUD STRIP · top bar with currency + level + settings =======
   Used at the top of Hub Town and other in-game screens. Sticky-ish row
   showing player resources + level + settings entry. */

.mb-hud-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  margin-bottom: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--c-bone);
}

.mb-hud-strip-left,
.mb-hud-strip-right {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}

.mb-hud-strip-left {
  flex: 1 1 auto;
}

.mb-hud-strip-right {
  flex: 0 1 58%;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Currency readout (Gold ingot, Soul Gems) — compact pill in the HUD strip. */
.mb-currency-pill {
  --accent: var(--c-bronze-top);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--c-bone);
  letter-spacing: var(--ls-tight);
}

.mb-currency-pill-glyph {
  font-size: 14px;
  color: var(--accent);
}

/* Icon-only button (gear, close, X) — bronze-mid by default, brighter on hover. */
.mb-icon-btn {
  background: transparent;
  border: none;
  color: var(--c-bronze-mid);
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  border-radius: var(--r-subtle);
  transition: color var(--motion-snap), background var(--motion-snap);
  line-height: 1;
}

.mb-icon-btn:hover {
  color: var(--c-bronze-top);
  background: rgba(242, 184, 56, 0.06);
}

/* ============ TIER BADGE · HUD strip subscription marker ============
   Renders only for Adventurer + Champion tiers. Free renders nothing
   (per Pillar #5 — absence is the signal). Static-only treatment per
   Pillar #5 §5.4 dial-back (no @keyframes, no animation, no continuous
   transitions). Escalation Adventurer → Champion is achieved via
   color saturation, border weight, typography weight, icon size, and
   drop-shadow — NOT motion. */

.mb-hud-strip .mb-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-pill);
  font-family: var(--font-nav);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
  color: var(--c-bone);
  cursor: pointer;
}

.mb-hud-strip .mb-tier-badge:hover {
  transition: filter var(--motion-snap);
  filter: brightness(1.08);
}

.mb-hud-strip .mb-tier-badge__icon {
  font-size: var(--t-xs);
  line-height: 1;
}

.mb-hud-strip .mb-tier-badge__label {
  font-weight: 600;
}

.mb-hud-strip .mb-tier-badge--adventurer {
  border: 1px solid var(--c-bronze-top);
  background: linear-gradient(
    to bottom,
    var(--c-bronze-mid) 0%,
    var(--c-bronze-mid) 55%,
    var(--c-bronze-shadow) 100%
  );
}

.mb-hud-strip .mb-tier-badge--adventurer .mb-tier-badge__icon {
  color: var(--c-bronze-top);
}

.mb-hud-strip .mb-tier-badge--champion {
  border: 1.5px solid var(--c-champion-gold-top);
  background: linear-gradient(
    to bottom,
    var(--c-champion-gold-mid) 0%,
    var(--c-champion-gold-mid) 55%,
    var(--c-champion-gold-shadow) 100%
  );
  box-shadow: 0 1px 4px rgba(90, 64, 32, 0.6);
}

.mb-hud-strip .mb-tier-badge--champion .mb-tier-badge__icon {
  font-size: var(--t-sm);
  color: var(--c-champion-gold-top);
}

.mb-hud-strip .mb-tier-badge--champion .mb-tier-badge__label {
  font-weight: 700;
}


/* ============ BANNER · status rows (momentum / streak / weather / etc) ===
   Centered-text row with --accent-driven background tint + border. Used for
   single-line status indicators above the main content. */

.mb-banner {
  --accent: var(--c-bronze-mid);
  text-align: center;
  padding: var(--s-2) var(--s-3);
  margin-bottom: var(--s-2);
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: var(--rule-thin) solid color-mix(in srgb, var(--accent) 25%, transparent);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--accent);
  letter-spacing: var(--ls-tight);
  font-weight: 700;
}

.mb-banner-collapsed {
  padding: 4px var(--s-3);
  font-size: var(--t-xs);
  margin-bottom: var(--s-2);
}


/* ============ HUB TILE GRID + HUB TILE ===================================
   The 2-column navigable tile grid at the heart of Hub Town. Each tile is
   a square-ish card with icon + label + sub. State variants:
     [data-state="pulse"]   — pulsing accent (Scale tile prompting weigh-in)
     [data-state="ready"]   — glow ring (Chronicle with new tier, etc.)
     [data-state="dim"]     — disabled / locked (encounter done, missing data)
   `--accent` custom property drives state colors. Default bronze. */

.mb-hub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}

.mb-hub-tile {
  --accent: var(--c-bronze-top);
  position: relative;
  background: rgba(26, 20, 32, 0.55);
  border: var(--rule-thin) solid var(--c-bronze-mid);
  border-radius: var(--r-card);
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  cursor: pointer;
  min-height: 96px;
  transition: border-color var(--motion-snap), background var(--motion-snap);
}

/* Top-corner accent pixels (matches `.mb-card` grammar). */
.mb-hub-tile::before,
.mb-hub-tile::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--c-bronze-top);
  pointer-events: none;
}
.mb-hub-tile::before { top: -1.5px; left: -1.5px; }
.mb-hub-tile::after  { top: -1.5px; right: -1.5px; }

.mb-hub-tile:hover {
  background: rgba(138, 125, 58, 0.10);
  border-color: var(--c-bronze-top);
}

.mb-hub-tile[data-state="pulse"] {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 25%, transparent);
  animation: pulseAmber 2s ease-in-out infinite;
}

.mb-hub-tile[data-state="ready"] {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 25%, transparent);
}

.mb-hub-tile[data-state="dim"] {
  opacity: 0.35;
  cursor: default;
}

.mb-hub-tile-icon {
  font-size: 24px;
  line-height: 1;
  margin-bottom: 2px;
}

.mb-hub-tile-label {
  font-family: var(--font-nav);
  font-size: var(--t-sm);
  letter-spacing: var(--ls-normal);
  color: var(--c-bone);
  text-transform: uppercase;
}

.mb-hub-tile-sub {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--c-bronze-mid);
  letter-spacing: var(--ls-tight);
  line-height: 1.3;
}

/* "NEW" sash for freshly unlocked tiles (used by `_applyNewPulse`). */
.mb-hub-tile-sash {
  position: absolute;
  top: 4px;
  right: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: var(--r-subtle);
  background: var(--c-amber);
  color: var(--c-onyx);
  pointer-events: none;
}


/* ============ PARTY CARD · Squire portrait + identity ====================
   The big squire identity card on Hub Town. Avatar (squircle, not circle —
   distinguishes from `.mb-portrait-ring` in squire-den) + name + evolution
   title + bond level + affinity chip + cosmetics + bond progress bar.
   Driven by `--accent` for squire color. */

.mb-party-card {
  --accent: var(--c-bronze-top);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--s-4) var(--s-3);
  margin-bottom: var(--s-4);
  background: rgba(255, 255, 255, 0.03);
  border: var(--rule-thin) solid rgba(138, 125, 58, 0.25);
  border-radius: var(--r-modal);
}

.mb-party-card-avatar-wrap {
  position: relative;
  display: inline-flex;
  justify-content: center;
}

.mb-party-bubble {
  margin-top: var(--s-2);
  align-self: center;
  background: var(--c-bone);
  color: var(--c-onyx);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-modal);
  font-family: var(--font-nav);
  font-style: italic;
  font-size: var(--t-lg);
  line-height: 1.4;
  max-width: 240px;
  text-align: center;
  box-shadow: var(--shadow-low);
}

.mb-party-avatar {
  --accent: var(--c-bronze-top);
  width: 72px;
  height: 72px;
  border-radius: var(--r-modal);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 14%, transparent),
    color-mix(in srgb, var(--accent) 4%, transparent));
  border: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  position: relative;
}

.mb-party-avatar[data-stage="champion"] {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 30%, transparent);
  background: radial-gradient(circle at center, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
}

.mb-party-name {
  font-family: var(--font-ceremony);
  font-size: var(--t-base);
  letter-spacing: var(--ls-normal);
  color: var(--accent);
}

.mb-party-evo-title {
  font-family: var(--font-script);
  font-style: italic;
  font-size: var(--t-xs);
  color: var(--accent);
  opacity: 0.85;
}

.mb-party-bond-line {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--c-bronze-mid);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}


/* ============ AFFINITY CHIP (compact, inline pill) =======================
   The squire's emergent affinity displayed on the party card. Different
   from the in-game frame chip — this is a small pill with the affinity
   emoji + "the {titlePhrase}" label, color-tinted per affinity. */

.mb-aff-chip {
  --accent: var(--c-aff-wandering);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: var(--rule-thin) solid color-mix(in srgb, var(--accent) 40%, transparent);
}

.mb-aff-chip-emoji {
  font-size: 14px;
  line-height: 1;
}

.mb-aff-chip-name {
  font-family: var(--font-nav);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  color: var(--accent);
  text-transform: lowercase;
}


/* ============ KEYFRAMES · pulse for tiles ================================ */

@keyframes pulseAmber {
  0%, 100% { box-shadow: 0 0 12px color-mix(in srgb, var(--accent, var(--c-bronze-top)) 25%, transparent); }
  50%      { box-shadow: 0 0 18px color-mix(in srgb, var(--accent, var(--c-bronze-top)) 45%, transparent); }
}

@keyframes hubNewGlow {
  0%   { box-shadow: 0 0 0 rgba(232, 147, 26, 0); }
  50%  { box-shadow: 0 0 18px rgba(232, 147, 26, 0.45); }
  100% { box-shadow: 0 0 14px rgba(232, 147, 26, 0.25); }
}


/* ============ COLLAPSIBLE SLOT (customize / settings / bazaar tabs) =======
   Expandable container with a clickable header row + body content.
   Used wherever a list of categories / equipment slots / settings groups
   needs an accordion pattern. State driven via `[data-state="expanded"]`. */

.mb-slot {
  --accent: var(--c-bronze-mid);
  position: relative;
  background: rgba(255, 255, 255, 0.02);
  border: var(--rule-thin) solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: var(--r-card);
  margin-bottom: var(--s-2);
  overflow: hidden;
  transition: background var(--motion-snap), border-color var(--motion-snap);
}

.mb-slot[data-state="expanded"] {
  background: rgba(255, 255, 255, 0.04);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

.mb-slot-header {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  cursor: pointer;
}

.mb-slot-icon {
  --accent: var(--c-bronze-mid);
  width: 32px;
  height: 32px;
  border-radius: var(--r-subtle);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: var(--rule-thin) solid color-mix(in srgb, var(--accent) 35%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.mb-slot-info {
  flex: 1;
  min-width: 0;
}

.mb-slot-name {
  font-family: var(--font-nav);
  font-size: var(--t-base);
  letter-spacing: var(--ls-tight);
  color: var(--c-bone);
  text-transform: uppercase;
}

.mb-slot-current {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--c-bronze-mid);
  letter-spacing: var(--ls-tight);
  margin-top: 2px;
}

.mb-slot-chevron {
  font-size: var(--t-sm);
  color: var(--c-bronze-mid);
  transition: transform var(--motion-snap);
}

.mb-slot[data-state="expanded"] .mb-slot-chevron {
  transform: rotate(90deg);
}

.mb-slot-content {
  padding: 0 var(--s-3) var(--s-3) var(--s-3);
  max-height: 240px;
  overflow-y: auto;
}


/* ============ PICK ROW · selectable item in a slot picker ================
   Used inside `.mb-slot-content` for the equippable / placeable item lists.
   States: default | active (currently equipped/placed) | remove (delete row).
   `--accent` drives rarity color. */

.mb-pick-row {
  --accent: var(--c-bronze-mid);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2);
  margin-bottom: var(--s-1);
  border-radius: var(--r-subtle);
  background: rgba(255, 255, 255, 0.02);
  border: var(--rule-thin) solid rgba(138, 125, 58, 0.18);
  cursor: pointer;
  transition: background var(--motion-snap), border-color var(--motion-snap);
}

.mb-pick-row:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.mb-pick-row[data-state="active"] {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  cursor: default;
  opacity: 0.7;
}
.mb-pick-row[data-state="active"]::after {
  content: '✓';
  font-size: var(--t-xs);
  color: var(--c-aff-scout);
  flex-shrink: 0;
}

.mb-pick-row[data-state="remove"] {
  --accent: #ef4444;
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.18);
}

.mb-pick-row-icon {
  --accent: var(--c-bronze-mid);
  width: 28px;
  height: 28px;
  border-radius: var(--r-subtle);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: var(--rule-thin) solid color-mix(in srgb, var(--accent) 30%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.mb-pick-row-body {
  flex: 1;
  min-width: 0;
}

.mb-pick-row-name {
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-bone);
}

.mb-pick-row-desc {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  color: var(--c-bronze-mid);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mb-pick-row-check {
  font-size: var(--t-xs);
  color: var(--c-aff-scout);
  flex-shrink: 0;
}


/* ============ SQUIRCLE AVATAR (customize / preview contexts) =============
   Squircle-shaped variant of the portrait — distinct from `.mb-portrait-ring`
   (which is a circle). Used in customize-hub to indicate "you're dressing
   the Squire" with the equipment overlay positions. */

.mb-avatar-squircle {
  --accent: var(--c-bronze-top);
  width: 80px;
  height: 80px;
  border-radius: 16px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 12%, transparent),
    color-mix(in srgb, var(--accent) 4%, transparent));
  border: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  position: relative;
}

.mb-avatar-squircle[data-glow="true"] {
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 25%, transparent);
}


/* ============ DECO MINI GRID · 3-col compact preview ===================== */

.mb-deco-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
}

.mb-deco-mini-cell {
  --accent: var(--c-bronze-mid);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--s-2) 4px;
  border-radius: var(--r-subtle);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: var(--rule-thin) dashed color-mix(in srgb, var(--accent) 30%, transparent);
}

.mb-deco-mini-cell[data-placed="true"] {
  border-style: solid;
}

.mb-deco-mini-icon {
  font-size: 20px;
}

.mb-deco-mini-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--c-bronze-mid);
  text-align: center;
  letter-spacing: var(--ls-tight);
}


/* ============ STATUS PILL · centered colored callout =====================
   Used for "N changes pending" or similar single-line status indicators. */

.mb-status-pill {
  --accent: #4ade80;
  text-align: center;
  padding: var(--s-2);
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: var(--rule-thin) solid color-mix(in srgb, var(--accent) 25%, transparent);
  font-family: var(--font-nav);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-normal);
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: var(--s-2);
}


/* ============ CARD ACCENT EMPHASIS · biome / ritual / mystery emphasis ====
   Optional `[data-accent="strong"]` on `.mb-card` opts into accent-tinted
   border + corner pixels + soft accent wash. Driven by inline `--accent`.
   Used by Bazaar (Wave 7) for biome special, mystery item, ritual cards. */

.mb-card[data-accent="strong"] {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  background-color: color-mix(in srgb, var(--accent) 8%, rgba(26, 20, 32, 0.7));
}

.mb-card[data-accent="strong"]::before,
.mb-card[data-accent="strong"]::after {
  background: var(--accent);
}


/* ============ SHOP ROW · price + buy on the right =========================
   Non-clickable list row for shop items. Differs from `.mb-pick-row` (which
   is fully clickable as a selector). Here the row is read-only; only the
   action button on the right is interactive. `--accent` colors the name
   (rarity color). Used by Bazaar (Wave 7) for cosmetic shelves, soul-gem
   rituals, sell list. */

.mb-shop-row {
  --accent: var(--c-bronze-mid);
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: var(--rule-hair) solid rgba(138, 125, 58, 0.12);
}

.mb-shop-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.mb-shop-row-icon {
  --accent: var(--c-bronze-mid);
  width: 32px;
  height: 32px;
  border-radius: var(--r-subtle);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: var(--rule-thin) solid color-mix(in srgb, var(--accent) 30%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.mb-shop-row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mb-shop-row-name {
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.mb-shop-row-desc {
  font-family: var(--font-ui);
  font-style: italic;
  font-size: var(--t-xs);
  color: var(--c-bronze-mid);
  line-height: 1.4;
}

.mb-shop-row-effect {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  color: #cbd5e1;
  line-height: 1.4;
}

.mb-shop-row-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.mb-shop-row-action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
  min-width: 72px;
}

.mb-shop-row-price {
  --accent: var(--c-bronze-top);
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  letter-spacing: var(--ls-tight);
}

.mb-shop-row-price-strike {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--c-bronze-mid);
  text-decoration: line-through;
  opacity: 0.65;
  margin-right: 4px;
}

/* Compact action button variant for shop rows — overrides `.mb-btn` width. */
.mb-btn--compact {
  width: auto;
  padding: 6px var(--s-3);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-tight);
}


/* ============ EMPTY STATE · centered "nothing here" card body ============
   For closed merchant, empty inventory, no-stock-at-quest-level. Sits inside
   a `.mb-card` so the framing is shared. */

.mb-empty-state {
  text-align: center;
  padding: var(--s-5) var(--s-3);
}

.mb-empty-state-icon {
  font-size: 40px;
  margin-bottom: var(--s-2);
  opacity: 0.65;
  line-height: 1;
}

.mb-empty-state-title {
  font-family: var(--font-ceremony);
  font-size: var(--t-md);
  letter-spacing: var(--ls-normal);
  color: var(--c-bronze-top);
  text-transform: uppercase;
  margin-bottom: var(--s-2);
}

.mb-empty-state-body {
  font-family: var(--font-script);
  font-style: italic;
  font-size: var(--t-sm);
  color: var(--c-bronze-mid);
  line-height: 1.55;
  max-width: 32ch;
  margin: 0 auto;
}


/* ============ PHOTO ANALYSIS SPINNER · meal-encounter photo capture ======
   Restored 2026-04-26 (Wave 8) — original was orphaned in main by an
   unresolved `=======` merge marker that ate the keyframe's closing brace.
   meal-encounter.js's photo loading overlay consumes `animation: photoSpin`. */

@keyframes photoSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* ============ HALL CREST · Chronicle Hall header ===========================
   Wave 8 chronicle-hall composes this with .mb-screen-title (the "Chronicle
   Hall" wordmark) + .mb-badge.mb-badge-strong (level pill) + .mb-progress
   (CP bar). The crest itself is the building emoji + italic Cormorant
   subtitle naming the current hall stage ("Tower Emerging", etc). */

.mb-hall-crest {
  text-align: center;
  padding: var(--s-3) 0 var(--s-1);
}

.mb-hall-crest-emoji {
  font-size: 48px;
  line-height: 1;
  margin-bottom: 4px;
}

.mb-hall-crest-name {
  font-family: var(--font-script);
  font-style: italic;
  font-size: var(--t-xs);
  color: var(--c-bronze-mid);
  margin-top: 2px;
}


/* ============ MINI STAT GRID · 3-up overview tile row ======================
   Compact glance component for "Tiers / Trophies / Weeks" headline numbers.
   Visually adjacent to .mb-tile-grid but smaller — icon-only header, big
   number, tiny label. Do NOT reuse .mb-tile (too tall for this rhythm). */

.mb-mini-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 0 var(--s-2);
  margin-bottom: var(--s-3);
}

.mb-mini-stat {
  text-align: center;
  padding: var(--s-2) 4px;
  border-radius: var(--r-subtle);
  background: rgba(26, 20, 32, 0.55);
  border: var(--rule-thin) solid rgba(138, 125, 58, 0.30);
}

.mb-mini-stat-icon {
  font-size: 20px;
  margin-bottom: 2px;
}

.mb-mini-stat-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-md);
  color: var(--c-bronze-top);
  letter-spacing: var(--ls-tight);
}

.mb-mini-stat-label {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  color: var(--c-bronze-mid);
}


/* ============ TIER DOTS · achievement tier progress ========================
   Tiny 6px circles, filled or empty per `data-filled` attribute. The JS
   sets `data-filled="true"` on dots `i < ach.tierReached`. Dot count comes
   from `achDef.tiers.length`, NOT a hardcoded 3 — some achievements have
   more or fewer than 3 tiers. */

.mb-tier-dots {
  display: flex;
  gap: 2px;
}

.mb-tier-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(138, 125, 58, 0.30);
}

.mb-tier-dot[data-filled="true"] {
  background: var(--c-bronze-top);
}


/* ============ GRADE ROW · weekly-run grade distribution ====================
   5-cell row showing how many weeks fell into each grade (S/A/B/C/D).
   Per-cell `--accent` is JS-injected from `RUN_GRADES[grade].color`. The
   `data-active` attr brightens the fill when count > 0. */

.mb-grade-row {
  display: flex;
  gap: 4px;
  padding: 0 var(--s-2);
  margin-bottom: var(--s-3);
}

.mb-grade-cell {
  flex: 1;
  text-align: center;
  padding: var(--s-1) 4px;
  border-radius: var(--r-subtle);
  background: rgba(255, 255, 255, 0.02);
  border: var(--rule-thin) solid rgba(138, 125, 58, 0.30);
}

.mb-grade-cell[data-active="true"] {
  background: color-mix(in srgb, var(--accent, var(--c-bronze-mid)) 8%, transparent);
  border-color: color-mix(in srgb, var(--accent, var(--c-bronze-mid)) 25%, transparent);
}

.mb-grade-cell-letter {
  font-family: var(--font-data);
  font-weight: 700;
  font-size: var(--t-md);
  color: var(--accent, var(--c-bronze-mid));
}

.mb-grade-cell-count {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--c-bronze-mid);
}


/* ============ GRADE BADGE · square plaque on run rows ======================
   36×36 colored square with grade letter. Same `--accent` injection
   pattern as `.mb-grade-cell` — JS sets per row from RUN_GRADES color. */

.mb-grade-badge {
  width: 36px;
  height: 36px;
  border-radius: var(--r-subtle);
  background: color-mix(in srgb, var(--accent, var(--c-bronze-mid)) 12%, transparent);
  border: 2px solid color-mix(in srgb, var(--accent, var(--c-bronze-mid)) 40%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-data);
  font-size: var(--t-md);
  font-weight: 800;
  color: var(--accent, var(--c-bronze-mid));
  flex-shrink: 0;
}


/* ============ STEPPER ROW · meal distribution stepper (Wave 9) =============
   Settings → Ration Style. One row per meal × 4. Each row has a colored
   swatch (--accent set inline from meal palette), the meal name, and a
   −/value/+ stepper triplet. The stepper bottom-totals into `.mb-stepper-total`
   with `data-state="ok|over|under"` driving the success/danger color flip. */

.mb-stepper-row {
  --accent: var(--c-bronze-mid);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: var(--rule-thin) solid rgba(138, 125, 58, 0.12);
}
.mb-stepper-row:last-of-type { border-bottom: none; }

.mb-stepper-label {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.mb-stepper-swatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--accent);
}

.mb-stepper-name {
  font-family: var(--font-ui);
  font-size: var(--t-md);
  color: var(--c-bone);
}

.mb-stepper-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mb-stepper-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--r-subtle);
  border: var(--rule-thin) solid rgba(138, 125, 58, 0.25);
  background: rgba(255, 255, 255, 0.04);
  color: var(--c-bone);
  font-family: var(--font-data);
  font-size: var(--t-lg);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--motion-snap), border-color var(--motion-snap);
}
.mb-stepper-btn:hover:not([disabled]):not([aria-disabled="true"]) {
  background: rgba(242, 184, 56, 0.10);
  border-color: var(--c-bronze-top);
}
.mb-stepper-btn[disabled],
.mb-stepper-btn[aria-disabled="true"] {
  background: rgba(255, 255, 255, 0.02);
  color: rgba(232, 220, 192, 0.25);
  cursor: default;
}

.mb-stepper-value {
  --accent: var(--c-bronze-mid);
  min-width: 36px;
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-md);
  color: var(--accent);
  letter-spacing: var(--ls-tight);
}
.mb-stepper-value[data-zero="true"] { color: rgba(138, 125, 58, 0.45); }

.mb-stepper-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--s-2);
  padding-top: 6px;
  border-top: var(--rule-thin) solid rgba(242, 184, 56, 0.20);
}
.mb-stepper-total-label {
  font-family: var(--font-data);
  font-size: var(--t-sm);
  letter-spacing: var(--ls-normal);
  color: var(--c-bone);
  text-transform: uppercase;
  font-weight: 700;
}
.mb-stepper-total-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--t-md);
}
.mb-stepper-total-value[data-state="ok"]    { color: var(--c-aff-scout); }
.mb-stepper-total-value[data-state="over"],
.mb-stepper-total-value[data-state="under"] { color: var(--c-aff-warrior); }

.mb-stepper-total-help {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  margin-top: 4px;
  color: var(--c-aff-warrior);
}


/* ============ TOGGLE ROW · settings on/off switch row (Wave 9) =============
   Reusable for any setting expressed as binary on/off. Left side is name +
   description; right side is `.mb-toggle-switch` with `data-on="true|false"`
   driving the success-tinted vs muted visual state. */

.mb-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-2) 0;
  gap: var(--s-3);
}

.mb-toggle-info {
  flex: 1;
  min-width: 0;
}

.mb-toggle-name {
  font-family: var(--font-ui);
  font-size: var(--t-md);
  color: var(--c-bone);
}

.mb-toggle-desc {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  color: var(--c-bronze-mid);
  margin-top: 2px;
  line-height: 1.45;
}

.mb-toggle-switch {
  padding: 6px var(--s-4);
  border-radius: var(--r-subtle);
  font-family: var(--font-data);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-normal);
  font-weight: 700;
  min-width: 56px;
  text-align: center;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.04);
  border: var(--rule-thin) solid rgba(138, 125, 58, 0.25);
  color: rgba(232, 220, 192, 0.45);
  text-transform: uppercase;
  transition: background var(--motion-snap), border-color var(--motion-snap), color var(--motion-snap);
}
.mb-toggle-switch[data-on="true"] {
  background: color-mix(in srgb, var(--c-aff-scout) 12%, transparent);
  border-color: color-mix(in srgb, var(--c-aff-scout) 40%, transparent);
  color: var(--c-aff-scout);
}


/* ============ PRESET CHIP ROW · ration style quick-select (Wave 9) =========
   Smaller than `.mb-tab` — these are quick-action chips for selecting a
   pre-baked meal distribution (`Standard`, `Athlete`, `OMAD`, etc.). Active
   chip is gold-bordered; inactive is bronze-mid muted. */

.mb-preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--s-3);
}

.mb-preset-chip {
  padding: 4px 10px;
  border-radius: var(--r-subtle);
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-tight);
  cursor: pointer;
  border: var(--rule-thin) solid rgba(138, 125, 58, 0.25);
  background: rgba(255, 255, 255, 0.04);
  color: var(--c-bronze-mid);
  transition: background var(--motion-snap), border-color var(--motion-snap), color var(--motion-snap);
}
.mb-preset-chip:hover { color: var(--c-bone); border-color: var(--c-bronze-mid); }
.mb-preset-chip[data-active="true"] {
  border: 2px solid var(--c-bronze-top);
  background: color-mix(in srgb, var(--c-bronze-top) 12%, transparent);
  color: var(--c-bronze-top);
  padding: 3px 9px;  /* compensate for thicker border */
}


/* ============ BUTTON · tone variants (Wave 9) ==============================
   Adds color-tone modifiers to `.mb-btn` for dev-tools / wipe / export use
   cases where a single screen needs to differentiate primary actions by
   intent. Dev / warn / info / danger. Default `.mb-btn` (gold) remains the
   primary CTA; these are explicit non-primary tones. */

.mb-btn[data-tone="warn"] {
  background: color-mix(in srgb, var(--c-bronze-top) 10%, transparent);
  border-color: color-mix(in srgb, var(--c-bronze-top) 35%, transparent);
  color: var(--c-bronze-top);
}
.mb-btn[data-tone="warn"]:hover {
  background: color-mix(in oklab, var(--c-bronze-top) 18%, transparent);
  color: color-mix(in oklab, var(--c-bronze-top) 80%, white);
}

.mb-btn[data-tone="info"] {
  background: color-mix(in oklab, var(--c-info) 10%, transparent);
  border-color: color-mix(in oklab, var(--c-info) 35%, transparent);
  color: var(--c-info);
}
.mb-btn[data-tone="info"]:hover {
  background: color-mix(in oklab, var(--c-info) 18%, transparent);
  color: color-mix(in oklab, var(--c-info) 70%, white);
}

.mb-btn[data-tone="danger"] {
  background: color-mix(in srgb, var(--c-aff-warrior) 10%, transparent);
  border-color: color-mix(in srgb, var(--c-aff-warrior) 35%, transparent);
  color: var(--c-aff-warrior);
}
.mb-btn[data-tone="danger"]:hover {
  background: color-mix(in oklab, var(--c-aff-warrior) 20%, transparent);
  color: color-mix(in oklab, var(--c-aff-warrior) 60%, white);
}


/* ============ CARD · dev tone (Wave 9) =====================================
   `.mb-card[data-tone="dev"]` opts the card into orange-warning corner
   pixels and a softer header-warning treatment. Used by Dev Tools panels
   that explicitly aren't shipping with the production app. */

.mb-card[data-tone="dev"] {
  border-color: color-mix(in srgb, var(--c-amber) 35%, var(--c-bronze-mid));
}
.mb-card[data-tone="dev"]::before,
.mb-card[data-tone="dev"]::after {
  background: var(--c-amber);
}
.mb-card-title[data-tone="dev"] { color: var(--c-amber); }


/* --------------------------------------------------------------------------
   End of components.css (Wave 9 — settings additions)
   --------------------------------------------------------------------------
   Wave 10+ will add: world-map biome tiles, weekly-summary stat plaques.
   -------------------------------------------------------------------------- */


/* ============ WAVE 11 ADDITIONS — world-map net-new ============ */

/* ── .mb-biome-card · tri-state biome card (current / unlocked / locked) ─────
   Drives styling via [data-state="current|unlocked|locked"].
   [data-complete="true"] on the card turns the meta text success-green. */

.mb-biome-card {
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-1);
  border-radius: var(--r-modal);
  background: rgba(255, 255, 255, 0.02);
  border: var(--rule-thin) solid rgba(255, 255, 255, 0.06);
}
.mb-biome-card:last-child { margin-bottom: 0; }

.mb-biome-card[data-state="current"] {
  background: rgba(251, 191, 36, 0.06);
  border-color: rgba(251, 191, 36, 0.2);
}
.mb-biome-card[data-state="locked"] {
  background: rgba(255, 255, 255, 0.01);
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.05);
  opacity: 0.4;
}

.mb-biome-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mb-biome-card-name {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.mb-biome-card-emoji { font-size: var(--t-xl); }
.mb-biome-card-title {
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--c-bone);
}
.mb-biome-card[data-state="current"] .mb-biome-card-title { color: var(--c-bronze-top); }
.mb-biome-card[data-state="locked"]  .mb-biome-card-title { color: var(--c-stone); }

.mb-biome-card-meta {
  font-size: var(--t-xs);
  color: #94a3b8;
}
.mb-biome-card[data-complete="true"] .mb-biome-card-meta { color: var(--c-aff-scout); }

.mb-biome-card-subtitle {
  font-size: var(--t-tiny);
  color: #64748b;
  margin-top: 2px;
  margin-left: 28px; /* aligns with title text past the emoji */
}


/* ── .mb-node-strip · flex-wrap dot strip for biome node progress ─────────── */

.mb-node-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 6px;
  margin-left: 28px;
}

.mb-node-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: var(--rule-thin) solid rgba(255, 255, 255, 0.08);
  transition: background var(--motion-fade);
}
.mb-node-dot[data-state="revealed"] {
  background: var(--c-aff-scout);
  border: none;
}
.mb-node-dot[data-state="current"] {
  background: var(--c-bronze-top);
  border: 2px solid var(--c-bronze-top);
}

.mb-node-dot[data-node-type="lore_stone"],
.mb-node-dot[data-node-type="treasure_cache"] {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  background-color: rgba(15, 20, 30, 0.78);
  border: var(--rule-thin) solid currentColor;
  cursor: pointer;
}

.mb-node-dot[data-node-type="lore_stone"]:focus-visible,
.mb-node-dot[data-node-type="treasure_cache"]:focus-visible {
  outline: 2px solid var(--c-bronze-top);
  outline-offset: 2px;
}

.mb-lore-stone-fragment {
  margin: var(--s-4) 0;
  padding: var(--s-4);
  border-radius: var(--r-card);
  border: var(--rule-thin) solid color-mix(in srgb, var(--c-aff-alchemist) 28%, transparent);
  background: color-mix(in srgb, var(--c-aff-alchemist) 8%, transparent);
  color: var(--text-primary);
  font-family: var(--font-script);
  font-size: var(--t-lg);
  font-style: italic;
  line-height: 1.55;
}


/* ── .mb-path-connector · vertical pipe │ between stacked biome cards ─────── */

.mb-path-connector {
  text-align: center;
  padding: 2px 0;
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, 0.06);
}
.mb-path-connector[data-active="true"] {
  color: rgba(255, 255, 255, 0.15);
}

/* ============ STREAM 2 PHASE 1 · Biome 1 visual integration ===============
   Starter Meadow environmental art. Static only: no backdrop animation. */

.mb-hub-town-biome-band {
  position: relative;
  width: 100%;
  height: clamp(160px, 28vh, 240px);
  background-image: url('/art/biomes/starter_meadow/squire_stage_v1.webp');
  background-color: #5a7c3a;
  background-size: cover;
  background-position: bottom center;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  border: var(--rule-thin) solid var(--c-bronze-mid);
  border-radius: var(--r-card);
  overflow: hidden;
  margin-bottom: var(--s-3);
}

@media (max-width: 360px) {
  .mb-hub-town-biome-band {
    height: clamp(120px, 25vh, 180px);
  }
}

.mb-squire-anchor {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.mb-squire-anchor--hub {
  bottom: 5%;
}

.mb-squire-anchor--hub .mb-tier1-avatar {
  width: clamp(72px, 20vw, 96px);
  height: clamp(72px, 20vw, 96px);
  font-size: clamp(34px, 9vw, 44px);
}

.mb-squire-anchor--hub .mb-tier1-avatar .mb-pixel-sprite {
  width: 92%;
  height: 92%;
}

.mb-squire-den-biome-backdrop {
  position: relative;
  container-type: size;
  height: clamp(320px, 58vh, 520px);
  min-height: clamp(320px, 58vh, 520px);
  margin: 0 0 var(--s-3);
  background-image: url('/art/biomes/starter_meadow/squire_stage_v1.webp');
  background-color: #5a7c3a;
  background-size: auto 155%;
  background-position: bottom center;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  border: var(--rule-thin) solid var(--c-bronze-mid);
  border-radius: var(--r-card);
  overflow: hidden;
}

.mb-squire-anchor--den {
  bottom: 8%;
}

.mb-squire-anchor--den .mb-portrait-ring {
  width: clamp(330px, 92vw, 410px);
  height: clamp(330px, 92vw, 410px);
  border-radius: 0;
  border: none;
  background: none;
  box-shadow: none;
}

.mb-squire-anchor--den .mb-portrait-ring .mb-pixel-sprite {
  width: 88%;
  height: 88%;
}

.mb-squire-anchor--den .mb-portrait-status {
  right: 18%;
  bottom: 4%;
  background: rgba(26, 20, 32, 0.85);
}

.mb-encounter-bg-tile {
  display: inline-block;
  width: 32px;
  height: 32px;
  background-image: url('/art/biomes/starter_meadow/ground_tiles_v1.webp');
  background-size: 96px 96px;
  image-rendering: pixelated;
}

.mb-encounter-bg-tile--nw     { background-position:   0px   0px; }
.mb-encounter-bg-tile--n      { background-position: -32px   0px; }
.mb-encounter-bg-tile--ne     { background-position: -64px   0px; }
.mb-encounter-bg-tile--w      { background-position:   0px -32px; }
.mb-encounter-bg-tile--center { background-position: -32px -32px; }
.mb-encounter-bg-tile--e      { background-position: -64px -32px; }
.mb-encounter-bg-tile--sw     { background-position:   0px -64px; }
.mb-encounter-bg-tile--s      { background-position: -32px -64px; }
.mb-encounter-bg-tile--se     { background-position: -64px -64px; }

.mb-node-dot.mb-node-dot--biome-tile {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background-image: url('/art/biomes/starter_meadow/ground_tiles_v1.webp');
  background-color: transparent;
  background-size: 42px 42px;
}

.mb-node-dot.mb-node-dot--biome-tile.mb-encounter-bg-tile--nw     { background-position:   0px   0px; }
.mb-node-dot.mb-node-dot--biome-tile.mb-encounter-bg-tile--n      { background-position: -14px   0px; }
.mb-node-dot.mb-node-dot--biome-tile.mb-encounter-bg-tile--ne     { background-position: -28px   0px; }
.mb-node-dot.mb-node-dot--biome-tile.mb-encounter-bg-tile--w      { background-position:   0px -14px; }
.mb-node-dot.mb-node-dot--biome-tile.mb-encounter-bg-tile--center { background-position: -14px -14px; }
.mb-node-dot.mb-node-dot--biome-tile.mb-encounter-bg-tile--e      { background-position: -28px -14px; }
.mb-node-dot.mb-node-dot--biome-tile.mb-encounter-bg-tile--sw     { background-position:   0px -28px; }
.mb-node-dot.mb-node-dot--biome-tile.mb-encounter-bg-tile--s      { background-position: -14px -28px; }
.mb-node-dot.mb-node-dot--biome-tile.mb-encounter-bg-tile--se     { background-position: -28px -28px; }

.mb-day-boss-cinematic {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background-color: #27211b;
  background-image: url('/art/biomes/starter_meadow/standard_battle_arena_v1.webp');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}

.mb-day-boss-cinematic::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(16, 11, 12, 0.82) 0%, rgba(16, 11, 12, 0.18) 26%, rgba(16, 11, 12, 0.08) 58%, rgba(16, 11, 12, 0.86) 100%),
    radial-gradient(circle at 50% 56%, rgba(251, 191, 36, 0.12) 0%, rgba(251, 191, 36, 0) 50%);
}

.mb-day-boss-scene {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  max-width: 520px;
  margin: 0 auto;
  padding: 18px 14px 70px;
  --db-callout-bottom: 12px;
  --db-callout-max: clamp(168px, 29svh, 248px);
  --db-callout-gap: clamp(12px, 2svh, 18px);
  color: var(--c-bone);
  text-align: center;
}

.mb-day-boss-nameplate {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 3px;
  text-shadow: 0 2px 10px rgba(16, 11, 12, 0.95);
}

.mb-day-boss-nameplate__eyebrow {
  font-family: var(--font-ceremony);
  font-size: var(--t-xs);
  letter-spacing: 3px;
  color: var(--c-bronze-mid);
  text-transform: uppercase;
}

.mb-day-boss-nameplate--intro .mb-day-boss-nameplate__eyebrow,
.mb-day-boss-nameplate--intro .mb-day-boss-nameplate__title,
.mb-day-boss-nameplate--intro .mb-day-boss-nameplate__level {
  opacity: 0;
}

.mb-day-boss-nameplate--intro .mb-day-boss-nameplate__eyebrow.is-visible {
  animation: mb-fade-in 200ms var(--ease-out) both;
}

.mb-day-boss-nameplate--intro .mb-day-boss-nameplate__title.is-visible,
.mb-day-boss-nameplate--intro .mb-day-boss-nameplate__level.is-visible {
  animation: mb-title-fade-in 200ms var(--ease-out) both;
}

.mb-day-boss-nameplate__title {
  margin: 0;
  font-family: var(--font-ceremony);
  font-size: clamp(26px, 8vw, 40px);
  line-height: 1;
  color: var(--c-bone);
  letter-spacing: 0;
}

.mb-day-boss-nameplate__level {
  font-size: var(--t-sm);
  font-weight: 800;
  color: color-mix(in oklab, var(--accent, var(--c-bronze-top)) 78%, var(--c-bone));
}

.mb-day-boss-boss-anchor,
.mb-day-boss-squire-anchor {
  position: absolute;
  left: 50%;
  z-index: 5;
  display: grid;
  justify-items: center;
  transition: transform 0.6s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}

.mb-day-boss-boss-anchor {
  top: clamp(178px, 28svh, 250px);
  width: clamp(210px, 58vw, 290px);
  transform: translateX(-50%);
}

.mb-day-boss-boss-anchor--settle {
  transform: translateX(-50%) scale(1.02);
}

.mb-day-boss-squire-anchor {
  bottom: calc(var(--db-callout-bottom) + var(--db-callout-max) + var(--db-callout-gap));
  width: clamp(96px, 30vw, 142px);
  transform: translateX(-50%);
}

.mb-day-boss-squire-anchor--ready {
  transform: translate(-50%, -10px) skewX(-2deg);
}

.mb-day-boss-squire-anchor--cheer {
  transform: translate(-50%, -18px) scale(1.05);
}

.mb-day-boss-squire-anchor--warm {
  transform: translate(-50%, -8px) rotate(-1deg);
}

.mb-day-boss-boss-anchor::after,
.mb-day-boss-squire-anchor::after {
  content: "";
  width: 68%;
  height: 13px;
  margin-top: -10px;
  border-radius: 999px;
  background: rgba(12, 8, 8, 0.48);
  filter: blur(3px);
}

.mb-day-boss-boss-sprite,
.mb-day-boss-squire-sprite {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  user-select: none;
  -webkit-user-drag: none;
}

.mb-day-boss-boss-sprite {
  filter: drop-shadow(0 20px 16px rgba(10, 6, 6, 0.62));
}

.mb-day-boss-boss-anchor--defeated .mb-day-boss-boss-sprite {
  filter:
    saturate(0.4)
    brightness(0.5)
    drop-shadow(0 20px 16px rgba(10, 6, 6, 0.72));
}

.mb-day-boss-boss-anchor--dissolving .mb-day-boss-boss-sprite {
  opacity: 0.3;
  transform: translateY(-8px);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), filter 200ms var(--ease-out);
}

.mb-day-boss-squire-sprite {
  filter: drop-shadow(0 10px 9px rgba(10, 6, 6, 0.54));
}

.mb-day-boss-squire-fallback {
  font-size: 64px;
  line-height: 1;
  filter: drop-shadow(0 10px 9px rgba(10, 6, 6, 0.54));
}

.mb-day-boss-squire-name {
  margin-top: 2px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(16, 11, 12, 0.56);
  color: var(--c-bone);
  font-size: 10px;
  font-weight: 800;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.mb-day-boss-impact-flash {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at var(--impact-x, 50%) var(--impact-y, 47%), rgba(255, 236, 176, 0.44) 0%, rgba(255, 236, 176, 0) 42%),
    linear-gradient(90deg, rgba(239, 68, 68, 0.22), rgba(239, 68, 68, 0) 18%, rgba(239, 68, 68, 0) 82%, rgba(239, 68, 68, 0.22));
}

.mb-day-boss-impact-flash.is-active {
  animation: mbDayBossImpactFlash 520ms ease-out 1;
}

.mb-day-boss-callout {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: var(--db-callout-bottom);
  z-index: 3;
  min-height: 88px;
  max-height: var(--db-callout-max);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 12px 14px;
  border: 1px solid rgba(255, 236, 176, 0.2);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(23, 16, 16, 0.86), rgba(23, 16, 16, 0.68));
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(2px);
  transition: opacity 0.3s ease;
}

.mb-day-boss-callout--result {
  bottom: 14px;
  min-height: 0;
  max-height: calc(100svh - 92px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 12px 12px 10px;
  background: linear-gradient(180deg, rgba(23, 16, 16, 0.92), rgba(23, 16, 16, 0.82));
}

.mb-day-boss-callout__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 2px 10px;
}

.mb-day-boss-callout__actions {
  flex: 0 0 auto;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 236, 176, 0.16);
}

.mb-day-boss-result-buttons {
  display: grid;
  gap: var(--s-2);
}

.mb-day-boss-result-buttons .mb-btn {
  width: 100%;
  min-height: 32px;
  padding-top: 7px;
  padding-bottom: 7px;
}

.mb-day-boss-callout__eyebrow {
  margin-bottom: 5px;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.mb-day-boss-callout__score {
  margin-bottom: 6px;
  font-size: 23px;
  font-weight: 900;
  line-height: 1;
}

.mb-day-boss-callout__body {
  max-width: 360px;
  margin: 0 auto;
  color: #dfd6c3;
  font-size: 13px;
  line-height: 1.45;
}

.mb-day-boss-skip {
  width: 100%;
  min-height: 34px;
  padding: 7px 13px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(16, 11, 12, 0.5);
  color: var(--c-bronze-mid);
  font-size: var(--t-sm);
  cursor: pointer;
}

.mb-day-boss-fanfare {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: clamp(72px, 12svh, 108px);
  z-index: 6;
  display: grid;
  justify-items: center;
  gap: 8px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}

.mb-day-boss-fanfare.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.mb-day-boss-fanfare__banner {
  font-family: var(--font-ceremony);
  font-size: clamp(28px, 9vw, 44px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.9);
  animation: mb-title-fade-in 200ms var(--ease-out) both;
}

.mb-day-boss-fanfare--victory .mb-day-boss-fanfare__banner {
  color: var(--c-bronze-top);
}

.mb-day-boss-fanfare--endurance .mb-day-boss-fanfare__banner {
  color: var(--c-bronze-mid);
}

.mb-day-boss-squire-line {
  max-width: 360px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid color-mix(in oklab, var(--speaker-color, var(--c-bronze-top)) 36%, transparent);
  border-left: 3px solid var(--speaker-color, var(--c-bronze-top));
  background: rgba(16, 11, 12, 0.72);
  color: var(--c-bone);
  text-align: left;
}

.mb-day-boss-squire-line__name {
  margin-bottom: 3px;
  color: var(--speaker-color, var(--c-bronze-top));
  font-size: 11px;
  font-weight: 900;
}

.mb-day-boss-squire-line__body {
  color: var(--c-bone);
  font-size: 12px;
  line-height: 1.45;
  font-style: italic;
}

.mb-day-boss-corvus-line {
  max-width: 360px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-left: 3px solid var(--c-info);
  background: rgba(15, 20, 30, 0.82);
  color: var(--c-bone);
  text-align: left;
}

.mb-day-boss-corvus-line__name {
  margin-bottom: 3px;
  color: var(--c-info);
  font-size: 11px;
  font-weight: 900;
}

.mb-day-boss-corvus-line__body {
  color: var(--c-bone);
  font-size: 12px;
  line-height: 1.45;
  font-style: italic;
}

.mb-screen-shake {
  animation: mb-screen-shake-anim 200ms steps(4) 1;
}

@keyframes mbDayBossImpactFlash {
  0% { opacity: 0; transform: translateX(0); }
  20% { opacity: 1; transform: translateX(-2px); }
  45% { opacity: 0.72; transform: translateX(2px); }
  100% { opacity: 0; transform: translateX(0); }
}

@keyframes mb-screen-shake-anim {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(2px); }
  75% { transform: translateX(-2px); }
}

/* Tutorial battle cinematic reskin — first-run confrontation grammar */
.mb-tutorial-speech {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mb-tutorial-squire-avatar {
  display: block;
  width: 64px;
  height: auto;
  flex: 0 0 auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 5px rgba(10, 6, 6, 0.34));
}

.mb-tutorial-squire-avatar-fallback {
  flex: 0 0 auto;
  font-size: 48px;
  line-height: 1;
}

.mb-tutorial-speech-copy,
.mb-battle-cheer-copy {
  min-width: 0;
  color: var(--c-bone);
  font-size: var(--t-sm);
  line-height: 1.45;
}

.mb-tutorial-speech-name {
  display: inline;
  margin-right: 6px;
  color: var(--accent, var(--c-bronze-top));
  font-weight: 800;
}

.mb-tutorial-monster-card-sprite {
  display: block;
  width: 64px;
  height: auto;
  image-rendering: pixelated;
  transform: scaleX(-1);
  filter: drop-shadow(0 5px 6px rgba(10, 6, 6, 0.42));
}

.mb-monster-card-sprite {
  display: block;
  width: 64px;
  height: auto;
  flex: 0 0 auto;
  image-rendering: pixelated;
  transform: scaleX(-1);
  filter: drop-shadow(0 5px 6px rgba(10, 6, 6, 0.42));
}

.mb-monster-card-sprite--compact {
  width: 44px;
}

.mb-meal-squire-tip-inline,
.mb-meal-prediction-label {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}

.mb-meal-squire-inline-sprite {
  display: block;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 4px rgba(10, 6, 6, 0.28));
}

.mb-meal-squire-inline-fallback {
  flex: 0 0 auto;
  font-size: 24px;
  line-height: 1;
}

.mb-battle-cinematic {
  position: relative;
  min-height: 100svh;
  padding: 0;
  overflow: hidden;
  background-color: #27211b;
  background-image: url('/art/biomes/starter_meadow/standard_battle_arena_v1.webp');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}

.mb-battle-cinematic::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(16, 11, 12, 0.78) 0%, rgba(16, 11, 12, 0.14) 30%, rgba(16, 11, 12, 0.06) 58%, rgba(16, 11, 12, 0.82) 100%),
    radial-gradient(circle at 50% 56%, rgba(251, 191, 36, 0.1) 0%, rgba(251, 191, 36, 0) 50%);
}

.mb-battle-scene {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  max-width: 520px;
  margin: 0 auto;
  padding: 18px 14px 70px;
  color: var(--c-bone);
  text-align: center;
}

.mb-battle-nameplate {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 3px;
  text-shadow: 0 2px 10px rgba(16, 11, 12, 0.95);
}

.mb-battle-nameplate__eyebrow {
  font-family: var(--font-ceremony);
  font-size: var(--t-xs);
  letter-spacing: 3px;
  color: var(--c-bronze-mid);
  text-transform: uppercase;
}

.mb-battle-nameplate__title {
  margin: 0;
  font-family: var(--font-ceremony);
  font-size: clamp(24px, 7vw, 36px);
  line-height: 1;
  color: var(--c-bone);
  letter-spacing: 0;
}

.mb-battle-nameplate__level {
  font-size: var(--t-sm);
  font-weight: 800;
  color: color-mix(in oklab, var(--accent, var(--c-bronze-top)) 78%, var(--c-bone));
}

.mb-battle-monster-anchor,
.mb-battle-squire-anchor {
  position: absolute;
  left: 50%;
  z-index: 2;
  display: grid;
  justify-items: center;
  transition: transform 0.8s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}

.mb-battle-monster-anchor {
  top: clamp(170px, 27svh, 250px);
  width: clamp(160px, 48vw, 218px);
  transform: translateX(-50%);
}

.mb-battle-squire-anchor {
  bottom: clamp(100px, 15svh, 140px);
  width: clamp(106px, 34vw, 152px);
  transform: translateX(-50%);
}

.mb-battle-squire-anchor--cheer {
  transform: translate(-50%, -14px) scale(1.04);
}

.mb-battle-squire-anchor--warm {
  transform: translate(-50%, -7px) rotate(-1deg);
}

.mb-battle-squire-anchor--concern {
  transform: translate(-50%, -5px) scale(0.98);
}

.mb-battle-cinematic--lite-polished {
  --lite-contact-x: 53%;
  --lite-contact-y: clamp(310px, 48svh, 410px);
  --impact-x: var(--lite-contact-x);
  --impact-y: var(--lite-contact-y);
}

.mb-battle-cinematic--lite-polished .mb-day-boss-impact-flash.is-active {
  animation: mbLiteContactImpactFlash 520ms ease-out 1;
}

.mb-battle-cinematic--lite-polished .mb-battle-nameplate {
  opacity: 0;
  animation: mbLiteNameplateSettle 250ms ease-out 80ms 1 forwards;
}

.mb-battle-cinematic--lite-polished .mb-battle-monster-anchor {
  left: 58%;
}

.mb-battle-cinematic--lite-polished .mb-battle-monster-sprite {
  opacity: 0;
  animation:
    mbLiteEnemySettle 250ms cubic-bezier(0.18, 0.9, 0.2, 1) 1 forwards,
    mbLiteEnemyNotice 220ms ease-out 350ms 1,
    mbLiteEnemyBreathe 700ms ease-in-out 650ms infinite alternate;
}

.mb-battle-cinematic--lite-polished .mb-battle-monster-fallback {
  opacity: 0;
  animation:
    mbLiteEnemyFallbackSettle 250ms cubic-bezier(0.18, 0.9, 0.2, 1) 1 forwards,
    mbLiteEnemyFallbackNotice 220ms ease-out 350ms 1,
    mbLiteEnemyFallbackBreathe 700ms ease-in-out 650ms infinite alternate;
}

.mb-battle-cinematic--lite-polished .mb-battle-squire-anchor {
  left: 42%;
  transition: transform 180ms cubic-bezier(0.2, 0.85, 0.16, 1);
}

.mb-battle-cinematic--lite-polished .mb-battle-squire-anchor--ready {
  transform: translate(calc(-50% - 2px), -10px) scale(1.01);
}

.mb-battle-cinematic--lite-polished .mb-battle-squire-anchor--winding {
  transform: translate(calc(-50% - 6px), -10px) scale(1.01);
}

.mb-battle-cinematic--lite-polished .mb-battle-squire-anchor--lunging {
  transform: translate(calc(-50% + 32px), -13px) scale(1.06);
  transition-duration: 130ms;
}

.mb-battle-cinematic--lite-polished .mb-battle-squire-anchor--cheer {
  transform: translate(-50%, -14px) scale(1.04);
}

.mb-battle-cinematic--lite-polished .mb-battle-squire-anchor--warm {
  transform: translate(-50%, -7px) rotate(-1deg);
}

.mb-battle-cinematic--lite-polished .mb-battle-squire-anchor--concern {
  transform: translate(-50%, -5px) scale(0.98);
}

.mb-battle-cinematic--lite-polished .mb-battle-monster-anchor--recoil {
  transform: translate(calc(-50% + 14px), -2px) rotate(7deg);
  transition: transform 280ms cubic-bezier(0.16, 0.85, 0.24, 1);
}

.mb-battle-cinematic--lite-polished .mb-battle-monster-anchor--hit .mb-battle-monster-sprite,
.mb-battle-cinematic--lite-polished .mb-battle-monster-anchor--hit .mb-battle-monster-fallback {
  filter:
    brightness(1.35)
    drop-shadow(0 0 18px color-mix(in oklab, var(--lite-impact-color, var(--c-bronze-top)) 62%, transparent))
    drop-shadow(0 12px 12px rgba(10, 6, 6, 0.58));
}

.mb-battle-monster-anchor::after,
.mb-battle-squire-anchor::after {
  content: "";
  width: 70%;
  height: 12px;
  margin-top: -8px;
  border-radius: 999px;
  background: rgba(12, 8, 8, 0.46);
  filter: blur(3px);
}

.mb-battle-monster-sprite,
.mb-battle-squire-sprite {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  user-select: none;
  -webkit-user-drag: none;
}

.mb-battle-monster-sprite {
  transform: scaleX(-1);
  filter: drop-shadow(0 12px 12px rgba(10, 6, 6, 0.58));
}

.mb-battle-monster-anchor--defeated .mb-battle-monster-sprite {
  filter:
    saturate(0.4)
    brightness(0.5)
    drop-shadow(0 12px 12px rgba(10, 6, 6, 0.7));
}

.mb-battle-monster-anchor--defeated .mb-battle-monster-fallback {
  filter:
    saturate(0.4)
    brightness(0.5)
    drop-shadow(0 8px 8px rgba(10, 6, 6, 0.62));
}

.mb-battle-squire-sprite {
  filter: drop-shadow(0 8px 8px rgba(10, 6, 6, 0.52));
}

.mb-battle-squire-anchor--result {
  opacity: 0.38;
}

.mb-battle-monster-fallback,
.mb-battle-squire-fallback {
  font-size: 64px;
  line-height: 1;
  filter: drop-shadow(0 8px 8px rgba(10, 6, 6, 0.52));
}

.mb-battle-monster-anchor.is-crit-flash .mb-battle-monster-sprite,
.mb-battle-monster-anchor.is-crit-flash .mb-battle-monster-fallback {
  filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.88)) drop-shadow(0 12px 12px rgba(10, 6, 6, 0.58));
}

.mb-battle-squire-name {
  margin-top: 2px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(16, 11, 12, 0.56);
  color: var(--c-bone);
  font-size: 10px;
  font-weight: 800;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.mb-battle-hp-label,
.mb-battle-hp {
  position: absolute;
  left: 18px;
  right: 18px;
  z-index: 4;
}

.mb-battle-hp-label {
  top: clamp(94px, 14svh, 118px);
  color: var(--c-bronze-mid);
  font-size: 10px;
  font-weight: 800;
  text-align: left;
  text-transform: uppercase;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
}

.mb-battle-hp {
  top: clamp(112px, 16svh, 138px);
}

.mb-battle-hp-bg {
  height: 15px;
  overflow: hidden;
  border: 1px solid rgba(255, 236, 176, 0.28);
  border-radius: 999px;
  background: rgba(17, 13, 16, 0.8);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.26), 0 2px 8px rgba(0, 0, 0, 0.28);
}

.mb-battle-hp-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ef4444, #c43620);
  transition: width 1s ease-out;
}

.mb-battle-cheer,
.mb-battle-result {
  position: absolute;
  left: 16px;
  right: 16px;
  z-index: 4;
  border: 1px solid rgba(255, 236, 176, 0.2);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(23, 16, 16, 0.86), rgba(23, 16, 16, 0.68));
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(2px);
}

.mb-battle-cheer {
  bottom: 80px;
  margin: 0;
  padding: 12px 14px;
  transition: opacity 300ms ease-out;
}

.mb-battle-cheer--exiting {
  opacity: 0 !important;
}

.mb-battle-result {
  bottom: 80px;
  padding: 12px 14px;
  transition: opacity 200ms ease-out 100ms;
}

.mb-battle-result--summary {
  bottom: 18px;
  display: grid;
  gap: 8px;
  padding: 12px;
  text-align: center;
}

.mb-battle-result--pending {
  pointer-events: none;
}

.mb-battle-result--entering {
  pointer-events: auto;
}

.mb-battle-result__content {
  color: var(--c-bone);
  line-height: 1.25;
}

.mb-battle-result__rewards {
  color: var(--c-bronze-mid);
  font-size: var(--t-sm);
  font-weight: 800;
  transition: opacity 0.3s;
}

.mb-battle-result__actions {
  display: grid;
  gap: var(--s-2);
  transition: opacity 0.3s;
}

.mb-battle-result__actions .mb-btn {
  width: 100%;
}

.mb-battle-damage {
  position: absolute;
  top: clamp(150px, 24svh, 215px);
  left: 0;
  right: 0;
  z-index: 5;
  color: var(--c-aff-warrior);
  font-size: 28px;
  font-weight: 900;
  text-shadow: 0 2px 8px rgba(16, 11, 12, 0.95);
  transition: opacity 0.4s;
}

.mb-battle-damage--crit {
  color: var(--c-bronze-top);
}

.mb-battle-actions {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 22px;
  z-index: 5;
  transition: opacity 0.4s;
}

.mb-battle-phase-indicator {
  position: absolute;
  top: clamp(122px, 18svh, 156px);
  left: 50%;
  z-index: 4;
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(16, 11, 12, 0.5);
  color: var(--c-stone);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.mb-battle-cinematic--lite-polished .mb-boss-phase-hp__segment::before {
  transition:
    width var(--lite-reveal, 800ms) cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.35s ease,
    filter 200ms ease;
}

.mb-battle-cinematic--lite-polished .mb-boss-phase-hp__segment--stacked::before {
  transition:
    width var(--lite-reveal, 800ms) cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.35s ease,
    filter 200ms ease;
}

.mb-battle-cinematic--lite-polished .mb-boss-phase-hp__segment--stacked::after {
  transition:
    left var(--lite-reveal, 800ms) cubic-bezier(0.34, 1.56, 0.64, 1),
    width var(--lite-reveal, 800ms) cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.35s ease,
    filter 200ms ease;
}

.mb-boss-phase-hp__segment--lite-impact {
  border-color: color-mix(in oklab, var(--lite-impact-color, var(--c-bronze-top)) 76%, #ffffff);
  box-shadow:
    0 0 14px color-mix(in oklab, var(--lite-impact-color, var(--c-bronze-top)) 48%, transparent),
    inset 0 0 0 1px color-mix(in oklab, var(--lite-impact-color, var(--c-bronze-top)) 42%, transparent);
}

.mb-boss-phase-hp__segment--lite-impact::before,
.mb-boss-phase-hp__segment--lite-impact::after {
  filter: saturate(1.1);
}

.mb-battle-phase-particles,
.mb-battle-contact-particles {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.mb-battle-phase-particles {
  inset: 0;
}

.mb-battle-contact-particles {
  left: var(--lite-contact-x, 53%);
  top: var(--lite-contact-y, 48svh);
  z-index: 6;
  width: 1px;
  height: 1px;
}

.mb-battle-phase-particle,
.mb-battle-contact-particle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--lite-impact-color, var(--c-bronze-top)) 82%, #ffffff);
  opacity: 0;
  animation: mbBattlePhaseParticle 520ms ease-out var(--delay, 0ms) 1;
}

.mb-battle-contact-particle {
  left: 0;
  top: 0;
  width: 4px;
  height: 4px;
}

@keyframes mbBattlePhaseParticle {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
  }
  28% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -10px))) scale(0.35);
  }
}

@keyframes mbLiteNameplateSettle {
  0% {
    opacity: 0;
    transform: translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mbLiteContactImpactFlash {
  0% { opacity: 0; }
  18% { opacity: 0.95; }
  46% { opacity: 0.58; }
  100% { opacity: 0; }
}

@keyframes mbLiteEnemySettle {
  0% {
    opacity: 0;
    transform: scaleX(-1) translateY(-12px) scale(1.08);
  }
  100% {
    opacity: 1;
    transform: scaleX(-1) translateY(0) scale(1);
  }
}

@keyframes mbLiteEnemyNotice {
  0%, 100% {
    transform: scaleX(-1) translateY(0) rotate(0deg);
  }
  50% {
    transform: scaleX(-1) translateY(0) rotate(-5deg);
  }
}

@keyframes mbLiteEnemyBreathe {
  0% {
    transform: scaleX(-1) translateY(0);
  }
  100% {
    transform: scaleX(-1) translateY(-3px);
  }
}

@keyframes mbLiteEnemyFallbackSettle {
  0% {
    opacity: 0;
    transform: translateY(-12px) scale(1.08);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes mbLiteEnemyFallbackNotice {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(0) rotate(5deg);
  }
}

@keyframes mbLiteEnemyFallbackBreathe {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-3px);
  }
}

/* Meal Encounter biome bg/prop ROLLED BACK 2026-05-14 per CEO visual-quality verdict.
   Tile-atlas-repeating ground texture + corner set-piece prop didn't pass Pillar #2 bar.
   Future Meal Encounter biome treatment: defer to Squire-in-world composition rule
   (see docs/coordination/handoffs/2026-05-14-art-direction-squire-in-world-composition-
   rule-and-biome-1-regen.md). */

/* ============ END WAVE 11 ADDITIONS ============ */


/* ============ WAVE 10 ADDITIONS ============ */

/* .mb-progress size variants — mini (rank bars, accuracy strips) */
.mb-progress[data-size="mini"]  { height: 4px; margin: 0; }
.mb-progress[data-size="micro"] { height: 6px; margin: 0; }

/* .mb-section-divider — uppercase letterspaced section header (chronicle-hall + weekly-summary) */
.mb-section-divider {
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--c-bone);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: var(--s-8) 0 var(--s-2);
  padding-bottom: var(--s-1);
  border-bottom: 1px solid rgba(138, 125, 58, 0.30);
}
.mb-section-divider:first-child { margin-top: 0; }

/* .mb-stat-quad — 4-up daily totals row (calories / protein / carbs / fat) */
.mb-stat-quad-header {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: var(--s-3) 0 6px;
  text-align: center;
}

.mb-stat-quad {
  display: flex;
  justify-content: space-around;
  margin-bottom: var(--s-2);
}
.mb-stat-quad-cell { text-align: center; }
.mb-stat-quad-value {
  font-family: var(--font-mono);
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--accent, var(--c-bone));
  letter-spacing: var(--ls-tight);
}
.mb-stat-quad-label {
  font-family: var(--font-ui);
  font-size: 9px;
  color: var(--c-bronze-mid);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mb-tray-footer-subtotal {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  color: var(--text-secondary);
  padding-top: var(--s-2);
  margin-top: var(--s-2);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  letter-spacing: 0.04em;
}

/* .mb-rank-row — ranked-list row: emoji label (96px) + flex bar + value.
   Set `--accent` on the row for current-affinity color emphasis. */
.mb-rank-row {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  padding: 5px 0;
}
.mb-rank-row[data-zero="true"] { opacity: 0.55; }
.mb-rank-label {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 96px;
  flex-shrink: 0;
}
.mb-rank-emoji { font-size: var(--t-md); line-height: 1; }
.mb-rank-name {
  font-size: var(--t-xs);
  color: var(--c-bronze-mid);
  font-weight: 500;
}
.mb-rank-row[data-current="true"] .mb-rank-name {
  color: var(--accent);
  font-weight: 700;
}
.mb-rank-bar { flex: 1; }
.mb-rank-value {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--c-bronze-mid);
  font-weight: 500;
  min-width: 32px;
  text-align: right;
  letter-spacing: var(--ls-tight);
}
.mb-rank-row[data-current="true"] .mb-rank-value {
  color: var(--accent);
  font-weight: 700;
}

/* .mb-week-dots — 7-day weekday dot strip for current-week snapshot */
.mb-week-dots {
  display: flex;
  justify-content: space-around;
  margin-bottom: var(--s-2);
}
.mb-week-day { text-align: center; }
.mb-week-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 0 auto 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  background: rgba(26, 20, 32, 0.55);
  color: rgba(138, 125, 58, 0.55);
  border: none;
}
.mb-week-dot[data-state="done"] {
  background: var(--c-aff-scout);
  color: var(--c-bg-deep);
}
.mb-week-dot[data-state="today"] {
  background: var(--c-amber);
  color: var(--c-bg-deep);
  border: 2px solid var(--c-amber);
}
.mb-week-day-label {
  font-family: var(--font-ui);
  font-size: 8px;
  color: rgba(138, 125, 58, 0.55);
}
.mb-week-day[data-state="today"] .mb-week-day-label { color: var(--c-amber); }

/* ============ END WAVE 10 ADDITIONS ============ */

/* ============ WAVE 12 ADDITIONS — weekly-summary net-new ============ */

/* .mb-grade-reveal — animated 120×120 grade circle with spring-back cubic-bezier */
.mb-grade-reveal {
  width: 120px; height: 120px;
  border-radius: 50%;
  border: 4px solid var(--accent, var(--c-bone));
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  margin: 0 auto var(--s-4);
  background: radial-gradient(circle, color-mix(in oklab, var(--accent, var(--c-bone)) 12%, transparent), transparent);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mb-grade-reveal[data-animate-in="true"] {
  opacity: 1;
  transform: scale(1);
}
.mb-grade-reveal-letter {
  font-size: 48px; font-weight: 900;
  color: var(--accent, var(--c-bone));
  line-height: 1; font-family: var(--font-script);
}
.mb-grade-reveal-label {
  font-size: var(--t-xs); font-weight: 700;
  color: var(--accent, var(--c-bone)); margin-top: 2px;
}

/* .mb-result-card — left-edge accent card (apply alongside .mb-card) */
.mb-result-card {
  border-left: 3px solid var(--accent, var(--c-bronze-mid));
  background: color-mix(in oklab, var(--accent, var(--c-onyx)) 4%, transparent);
}
.mb-result-card-title {
  font-size: var(--t-sm); font-weight: 700;
  color: var(--accent, var(--c-bone));
  display: flex; align-items: center; gap: var(--s-2);
}
.mb-result-card-status {
  margin-left: auto; font-size: var(--t-xs); font-weight: 700;
  padding: 2px var(--s-2); border-radius: var(--r-subtle);
  background: color-mix(in oklab, var(--accent, var(--c-bronze-mid)) 12%, transparent);
  color: var(--accent, var(--c-bronze-mid));
}
.mb-result-card-status[data-tone="success"] { --accent: var(--c-aff-scout); }
.mb-result-card-status[data-tone="warn"]    { --accent: var(--c-amber); }
.mb-result-card-status[data-tone="fail"]    { --accent: var(--c-aff-warrior); }
.mb-result-card-status[data-tone="muted"]   { --accent: var(--c-bronze-mid); }

/* .mb-trend-row — Plateau Watch 3-cell weight trend comparison */
.mb-trend-row { display: flex; justify-content: space-between; gap: var(--s-2); }
.mb-trend-cell {
  flex: 1; text-align: center; padding: var(--s-2) 4px;
  border-radius: var(--r-subtle);
  background: rgba(26, 20, 32, 0.55);
  border: 1px solid rgba(138, 125, 58, 0.30);
}
.mb-trend-cell[data-current="true"] {
  background: color-mix(in oklab, var(--c-amber) 10%, transparent);
  border-color: color-mix(in oklab, var(--c-amber) 20%, transparent);
}
.mb-trend-cell-label { font-size: 10px; color: var(--c-bronze-mid); margin-bottom: 4px; }
.mb-trend-cell-value { font-family: var(--font-mono); font-size: var(--t-md); font-weight: 700; color: var(--c-bone); }
.mb-trend-cell[data-current="true"] .mb-trend-cell-value { color: var(--c-amber); }
.mb-trend-cell-delta { font-size: 10px; margin-top: 2px; }
.mb-trend-cell-delta[data-tone="warn"]    { color: var(--c-amber); }
.mb-trend-cell-delta[data-tone="success"] { color: var(--c-aff-scout); }

/* .mb-quote — italic motivational quote (Cormorant, dim, centered) */
.mb-quote {
  font-family: var(--font-script);
  font-style: italic;
  font-size: var(--t-sm);
  color: rgba(138, 125, 58, 0.55);
  text-align: center;
  margin: var(--s-4) 0;
  padding: 0 var(--s-4);
  line-height: 1.6;
}

/* ============ END WAVE 12 ADDITIONS ============ */


/* ============ WAVE 13 ADDITIONS — onboarding sweep ======================== */

/* .mb-species-card — companion selection card for species-picker.js.
   `--accent` injected per card from species.color (JS inline style).
   `data-state="selected"` applied when this species is active. */
.mb-species-card {
  background: rgba(26, 20, 32, 0.55);
  border: 2px solid rgba(138, 125, 58, 0.30);
  border-radius: var(--r-tile);
  padding: var(--s-4);
  margin-bottom: var(--s-3);
  cursor: pointer;
  transition: background var(--motion-snap), border-color var(--motion-snap);
  text-align: left;
}
.mb-species-card[data-state="selected"] {
  background: color-mix(in oklab, var(--accent, var(--c-bronze-top)) 10%, transparent);
  border-color: var(--accent, var(--c-bronze-top));
}
.mb-species-card-header {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
}
.mb-species-card-sprite-wrap {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: color-mix(in oklab, var(--accent, var(--c-bronze-mid)) 12%, transparent);
  border-radius: var(--r-card);
}
.mb-species-card-name {
  font-weight: 500;
  font-size: var(--t-xl);
  color: var(--c-bone);
}
.mb-species-card[data-state="selected"] .mb-species-card-name {
  color: var(--accent, var(--c-bronze-top));
}
.mb-species-card-archetype {
  font-family: var(--font-script);
  font-style: italic;
  font-size: var(--t-sm);
  color: var(--c-bronze-mid);
}
.mb-species-card-desc {
  font-size: var(--t-sm);
  color: var(--c-bone);
  line-height: 1.5;
  margin-bottom: var(--s-2);
}
.mb-species-card-quote {
  font-family: var(--font-script);
  font-style: italic;
  font-size: var(--t-sm);
  color: var(--accent, var(--c-bronze-mid));
  background: rgba(0, 0, 0, 0.25);
  border-left: 3px solid color-mix(in oklab, var(--accent, var(--c-bronze-mid)) 55%, transparent);
  border-radius: var(--r-card);
  padding: var(--s-2) var(--s-3);
  line-height: 1.4;
}

/* Inline name + begin block on selected card */
.mb-species-card-name-block { margin-top: var(--s-3); }
.mb-species-card-name-label {
  font-family: var(--font-ceremony);
  font-size: var(--t-xs);
  letter-spacing: 2px;
  color: var(--c-bronze-mid);
  text-transform: uppercase;
  margin-bottom: var(--s-2);
}
.mb-species-card-name-input {
  background: var(--c-onyx);
  border: 2px solid color-mix(in oklab, var(--accent, var(--c-bronze-top)) 50%, transparent);
  border-radius: var(--r-card);
  padding: var(--s-3) var(--s-4);
  text-align: center;
  font-size: var(--t-xl);
  font-weight: 500;
  color: var(--c-bone);
  width: 100%;
  outline: none;
  font-family: inherit;
}
.mb-species-card-name-input:focus {
  border-color: var(--accent, var(--c-bronze-top));
  background: rgba(26, 20, 32, 0.85);
}

/* ============ END WAVE 13 ADDITIONS ============ */


/* ============ WAVE 14a ADDITIONS — generic ceremony chrome ============ */

/* .mb-ceremony-page — full-bleed dramatic page chrome for peak-end ceremonial
   moments. Deeper radial vignette than .mb-screen-page; position:relative
   anchors confetti/particle overlay layers. */
.mb-ceremony-page {
  min-height: 100vh;
  padding: var(--s-6) var(--s-5);
  background:
    radial-gradient(ellipse at 50% 35%, var(--c-plum) 0%, var(--c-onyx) 70%),
    var(--c-onyx);
  display: flex;
  flex-direction: column;
  font-family: var(--font-ui);
  color: var(--c-bone);
  position: relative;
  overflow: hidden;
}

/* .mb-ceremony-crest — large central icon container with per-ceremony radial
   glow. JS injects --accent: gold (level-up), biome color (monday-start),
   affinity color (shift), squire color (evolution). */
.mb-ceremony-crest {
  text-align: center;
  padding: var(--s-4) var(--s-3) var(--s-5);
  background: radial-gradient(ellipse at center,
    color-mix(in oklab, var(--accent, var(--c-bronze-top)) 15%, transparent) 0%,
    transparent 70%);
  border-radius: var(--r-modal);
  margin-bottom: var(--s-4);
}
.mb-ceremony-crest-icon {
  font-size: 56px;
  line-height: 1;
  margin-bottom: var(--s-3);
  filter: drop-shadow(0 0 14px color-mix(in oklab, var(--accent, var(--c-bronze-top)) 60%, transparent));
}

/* .mb-ceremony-eyebrow — Forum tracked uppercase announcement text above the
   main ceremony title. "The Guild Assessor Proclaims", "New Expedition", etc. */
.mb-ceremony-eyebrow {
  font-family: var(--font-ceremony);
  font-size: var(--t-xs);
  letter-spacing: 4px;
  color: var(--c-bronze-mid);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: var(--s-2);
}

/* ============ END WAVE 14a ADDITIONS ============ */


/* ============ WAVE 14b ADDITIONS — day-boss-specific chrome ============ */

.mb-boss-phase-hp {
  position: absolute;
  top: clamp(82px, 13svh, 116px);
  left: 16px;
  right: 16px;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(var(--phase-track-count, 5), minmax(0, 1fr));
  gap: 6px;
}

.mb-boss-phase-hp__slot {
  display: grid;
  gap: 3px;
}

.mb-boss-phase-hp__segment {
  --phase-fill: 100%;
  position: relative;
  height: 13px;
  overflow: hidden;
  border: 1px solid rgba(255, 236, 176, 0.26);
  border-radius: 4px;
  background: rgba(17, 13, 16, 0.78);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.26), 0 2px 8px rgba(0, 0, 0, 0.28);
}

.mb-boss-phase-hp__segment::before {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--phase-fill);
  background: linear-gradient(90deg, #ef4444, #f59e0b 58%, #fde68a);
  transition: width 0.45s ease, opacity 0.35s ease;
}

.mb-boss-phase-hp__segment--stacked::before {
  width: var(--phase-snack-fill, 0%);
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.5), rgba(251, 191, 36, 0.42));
  transition: width 150ms ease, opacity 0.35s ease;
}

.mb-boss-phase-hp__segment--stacked::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--phase-snack-fill, 0%);
  width: max(0%, calc(var(--phase-meal-fill, 0%) - var(--phase-snack-fill, 0%)));
  background: linear-gradient(90deg, #ef4444, #f59e0b 58%, #fde68a);
  transition: width 500ms ease 150ms, opacity 0.35s ease;
}

.mb-boss-phase-hp__segment[data-state="current"] {
  border-color: color-mix(in oklab, var(--accent, var(--c-bronze-top)) 72%, #ffffff);
  box-shadow: 0 0 16px color-mix(in oklab, var(--accent, var(--c-bronze-top)) 42%, transparent);
}

.mb-boss-phase-hp__segment[data-state="broken"] {
  border-color: rgba(94, 72, 54, 0.72);
  background:
    linear-gradient(135deg, transparent 0 43%, rgba(255, 236, 176, 0.36) 44% 48%, transparent 49%),
    linear-gradient(45deg, transparent 0 55%, rgba(255, 236, 176, 0.22) 56% 59%, transparent 60%),
    rgba(24, 18, 20, 0.92);
}

.mb-boss-phase-hp__segment[data-state="broken"]::before {
  opacity: 0.14;
}

.mb-boss-phase-hp__segment[data-outcome="held"] {
  border-color: rgba(239, 68, 68, 0.48);
}

.mb-boss-phase-hp__segment--impact {
  animation: mbBossPhaseImpact 500ms ease-out 1;
}

.mb-boss-phase-hp__label {
  color: var(--c-bronze-mid);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
  transition: color 0.35s ease, opacity 0.35s ease;
}

@keyframes mbBossPhaseImpact {
  0% { transform: scale(1); }
  42% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ============ END WAVE 14b ADDITIONS ============ */

/* ============ QTY BUTTON PRIMITIVE (2026-04-29) ============ */
/* 24×24 micro-control for inline qty contexts (+/-, remove, etc.).
   NOT .mb-btn — primary-CTA pattern would balloon the form factor.
   NOT .mb-icon-btn — that selector is owned by hub-town settings gear (Wave 5).
   Used in: snack-log tray rows; meal-encounter tray rows (Wave 15b).
   Variants:
     [data-tone="danger"] — destructive remove; warrior-red tint via color-mix.
*/
.mb-qty-btn {
  width: 24px;
  height: 24px;
  border-radius: var(--r-card);
  border: none;
  background: rgba(255,255,255,0.08);
  color: var(--c-bone);
  font-size: var(--t-lg);
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 120ms ease;
}
.mb-qty-btn:hover {
  background: rgba(255,255,255,0.14);
}
.mb-qty-btn:active {
  transform: scale(0.95);
}
.mb-qty-btn[data-tone="danger"] {
  color: color-mix(in oklab, var(--c-aff-warrior) 90%, var(--c-bone));
}
.mb-qty-btn[data-tone="danger"]:hover {
  background: color-mix(in oklab, var(--c-aff-warrior) 18%, transparent);
}


/* ─── Squire Header Avatar (Wave 20a) ─────────────────────────────────────
   Persistent 32px Squire avatar in the .mb-hud-strip. Tappable → Squire Den.
   Notification dot (::after) communicates highest-priority pending state per §4.3. */

.mb-squire-header-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--accent, var(--c-bronze-mid));
  background: transparent;
  padding: 2px;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mb-squire-header-avatar img {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

/* Notification dot — single highest-priority trigger, per §4.3 */
.mb-squire-header-avatar[data-notification-priority="1"]::after,
.mb-squire-header-avatar[data-notification-priority="2"]::after,
.mb-squire-header-avatar[data-notification-priority="3"]::after,
.mb-squire-header-avatar[data-notification-priority="4"]::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--c-onyx);
}

.mb-squire-header-avatar[data-notification-priority="1"]::after { background: var(--c-bronze-mid); }
.mb-squire-header-avatar[data-notification-priority="2"]::after { background: var(--c-amber); }
.mb-squire-header-avatar[data-notification-priority="3"]::after { background: var(--accent, var(--c-bronze-top)); }
.mb-squire-header-avatar[data-notification-priority="4"]::after { background: var(--c-aff-warrior); }

/* Quiet state — avatar recedes during active logging (per §4.1) */
.mb-squire-header-avatar[data-quiet="true"] {
  opacity: 0.5;
}
.mb-squire-header-avatar[data-quiet="true"]::after {
  display: none;
}

/* Stage scaling — Wave 20b carries the full CSS effects; placeholders here keep Stage 5 readable */
.mb-squire-header-avatar[data-stage="5"] {
  width: 40px;
  height: 40px;
}
.mb-squire-header-avatar[data-stage="5"] img {
  width: 36px;
  height: 36px;
}

/* Reduced-motion guard — mandatory per §5.4 accessibility constraint */
@media (prefers-reduced-motion: reduce) {
  .mb-squire-header-avatar {
    transition: none !important;
    animation: none !important;
  }
}

/* ─── Screen Header (Wave 20a-2) ──────────────────────────────────────────
   Wraps .mb-back-link (left) + .mb-squire-header-avatar (right) on screens
   that don't have .mb-hud-strip. */
.mb-screen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: var(--s-3);
}
.mb-screen-header .mb-back-link { flex-shrink: 0; }
.mb-screen-header .mb-squire-header-avatar { flex-shrink: 0; }

/* ─── Hub Town 4-tier hierarchy (Workstream 2 Item 3) ───────────────────── */
.mb-tier-1 {
  margin-bottom: 16px;
}

.mb-tier1-squire-zone {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
}

/* Pet affordance — training-wheel hint that disappears after pet_count >= 3 (Bucket 6a) */
.mb-party-hint {
  font-family: var(--font-nav);
  font-size: var(--t-xs);
  color: var(--c-stone);
  text-align: center;
  margin-top: var(--s-1);
  opacity: 0.8;
}

/* Pet affordance — heart icon overlay when canPetNow (Bucket 6b) */
.mb-pet-heart {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 18px;
  color: var(--c-bronze-top);
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  animation: mb-pet-heart-pulse 2s ease-in-out infinite;
}

@keyframes mb-pet-heart-pulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1.0;  transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .mb-pet-heart { animation: none; opacity: 0.95; }
}

.mb-tier1-avatar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  min-width: 64px;
}

.mb-tier1-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--c-gold);
  background: color-mix(in oklab, var(--accent, var(--c-gold)) 24%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

/* Stage-aware avatar sizing (Wave 20b) */
.mb-tier1-avatar[data-stage="1"] { width: 120px; height: 120px; font-size: 52px; }
.mb-tier1-avatar[data-stage="2"] { width: 132px; height: 132px; font-size: 56px; }
.mb-tier1-avatar[data-stage="3"] { width: 144px; height: 144px; font-size: 60px; }
.mb-tier1-avatar[data-stage="4"] { width: 156px; height: 156px; font-size: 64px; }
.mb-tier1-avatar[data-stage="5"] {
  width: 168px; height: 168px; font-size: 68px;
  box-shadow: 0 0 20px color-mix(in srgb, var(--accent, var(--c-gold)) 30%, transparent);
  background: radial-gradient(circle at center, color-mix(in srgb, var(--accent, var(--c-gold)) 16%, transparent), transparent 70%);
}

/* Sprite fills 80% of frame — protagonism > frame-fit (Wave 20c) */
.mb-tier1-avatar .mb-pixel-sprite {
  width: 80%;
  height: 80%;
}

.mb-squire-anchor--hub .mb-tier1-avatar {
  border-radius: 0;
  border: none;
  background: transparent;
  overflow: visible;
  box-shadow: none;
}

.mb-squire-anchor--hub .mb-tier1-avatar[data-stage="5"] {
  background: transparent;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .mb-tier1-avatar { animation: none !important; transition: none !important; }
}

.mb-tier1-squire-name {
  font-family: var(--font-ceremony);
  color: var(--c-gold);
  font-size: var(--t-xl);
  line-height: 1.15;
  text-align: center;
}

.mb-tier1-speech-bubble {
  position: relative;
  flex: 1;
  background: var(--frame-bg);
  border: 1px solid var(--c-divider);
  border-radius: 12px;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: var(--t-sm);
  color: var(--text-primary);
  line-height: 1.4;
}

.mb-tier1-speech-bubble::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 16px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 8px solid var(--c-divider);
}

.mb-tier1-cta-zone {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.mb-banner-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.mb-pill {
  font-family: var(--font-nav);
  font-size: var(--t-xs);
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--frame-bg);
  border: 1px solid var(--c-divider);
  color: var(--text-primary);
}

.mb-grid-group-label {
  grid-column: 1 / -1;
  font-family: var(--font-nav);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-wide);
  color: var(--text-muted);
  padding: 8px 0 4px;
  text-transform: uppercase;
}

.training-log-toast {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: var(--c-surface-raised, #2a2a2a);
  border: 1px solid var(--c-aff-warrior, #ef4444);
  border-radius: 12px;
  padding: 12px 20px;
  max-width: 340px;
  width: calc(100% - 32px);
  animation: toast-slide-in 0.3s ease-out;
  cursor: pointer;
}

.training-log-toast__stats {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary, #fff);
  margin-bottom: 4px;
}

.training-log-toast__squire {
  font-size: 0.85rem;
  color: var(--text-secondary, #b8b8b8);
  font-style: italic;
}

.training-log-toast--exiting {
  animation: toast-slide-out 0.3s ease-in forwards;
}

.snack-log-toast {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: var(--c-surface-raised, #2a2a2a);
  border: 1px solid var(--c-aff-alchemist, #22c55e);
  border-radius: 12px;
  padding: 12px 20px;
  max-width: 340px;
  width: calc(100% - 32px);
  animation: toast-slide-in 0.3s ease-out;
  cursor: pointer;
}

.snack-log-toast__stats {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary, #fff);
  margin-bottom: 4px;
}

.snack-log-toast__squire {
  font-size: 0.85rem;
  color: var(--text-secondary, #b8b8b8);
  font-style: italic;
}

.snack-log-toast--exiting {
  animation: toast-slide-out 0.3s ease-in forwards;
}

@keyframes toast-slide-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-20px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes toast-slide-out {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to { opacity: 0; transform: translateX(-50%) translateY(-20px); }
}

/* ─── Squire's Journal (Day 18+) ─────────────────────────────────────────── */
.mb-journal-card { padding: 12px 14px; }

.mb-journal-heatmap {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.mb-heatmap-cell {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  transition: background 0.2s;
}
.mb-heatmap-cell[data-intensity="1"] { background: rgba(var(--c-accent-rgb,168,85,247),0.25); }
.mb-heatmap-cell[data-intensity="2"] { background: rgba(var(--c-accent-rgb,168,85,247),0.50); }
.mb-heatmap-cell[data-intensity="3"] { background: rgba(var(--c-accent-rgb,168,85,247),0.80); }

.mb-journal-pulse {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 4px;
}
.mb-pulse-label { color: var(--c-bone); opacity: 0.75; }

.mb-journal-streak { color: var(--c-bone); }

/* ─── Tester Feedback MVP ───────────────────────────────────────────────── */
.mb-feedback-button {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 850;
  border: 1px solid rgba(232, 220, 192, 0.28);
  border-radius: 999px;
  background: rgba(18, 14, 20, 0.84);
  color: var(--text-primary);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  font-family: var(--font-nav);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0;
  padding: 10px 14px;
  cursor: pointer;
}

.mb-feedback-button:hover,
.mb-feedback-button:focus-visible {
  border-color: var(--c-bronze-top);
  background: rgba(34, 26, 32, 0.94);
}

.mb-feedback-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.76);
}

.mb-feedback-modal__card {
  width: min(480px, 100%);
  max-height: calc(100svh - 36px);
  overflow-y: auto;
  border: 1px solid var(--c-divider);
  border-radius: var(--r-modal);
  background: var(--frame-bg);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  padding: var(--s-4);
}

.mb-feedback-modal__title {
  color: var(--text-primary);
  font-family: var(--font-nav);
  font-size: var(--t-lg);
  font-weight: 800;
  margin-bottom: var(--s-2);
}

.mb-feedback-modal__intro,
.mb-feedback-modal__disclosure {
  color: var(--text-secondary);
  font-size: var(--t-sm);
  line-height: 1.5;
  margin-bottom: var(--s-3);
}

.mb-feedback-modal__textarea {
  width: 100%;
  min-height: 132px;
  resize: vertical;
  border: 1px solid var(--c-divider);
  border-radius: var(--r-card);
  background: rgba(0, 0, 0, 0.24);
  color: var(--text-primary);
  font: inherit;
  line-height: 1.45;
  padding: 12px;
  margin-bottom: var(--s-3);
}

.mb-feedback-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}

.mb-feedback-category {
  min-height: 44px;
  border: 1px solid var(--c-divider);
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--t-sm);
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
}

.mb-feedback-category[data-active="true"] {
  border-color: var(--c-bronze-top);
  background: rgba(196, 151, 91, 0.16);
}

.mb-feedback-modal__status {
  min-height: 20px;
  color: var(--text-secondary);
  font-size: var(--t-sm);
  margin-bottom: var(--s-3);
}

.mb-feedback-modal__status[data-tone="error"] { color: var(--c-aff-warrior); }

.mb-feedback-modal__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}

@media (max-width: 520px) {
  .mb-feedback-category-grid,
  .mb-feedback-modal__actions {
    grid-template-columns: 1fr;
  }
}

/* ─── Squire Challenge Card (Day 21+) ────────────────────────────────────── */
.mb-challenge-card { padding: 12px 14px; }