/* css/theme.css — RESTAURANT CITY DESIGN SYSTEM (REMASTER Phase F1, owner directive 2026-07-02).
 *
 * ONE place for every token + every HUD / toolbar / modal / toast style. Loaded BEFORE
 * css/responsive.css (source order preserved: responsive's equal-specificity touch overrides
 * still win). The self-injected <style> blocks that used to live in main.js / journal.js /
 * blueprints.js / garden.js are migrated here so the whole game reads as one family.
 *
 * The system: dark aubergine surfaces + warm gold accents (the platform's family look),
 * a 12px type floor, an 8px spacing scale, one modal anatomy (accent-edged card → header
 * with icon/title/close → note → body), one button family with a satisfying press, and
 * per-surface accent hues carried by a single --ac custom property.
 */

/* ============================== 1 · DESIGN TOKENS ============================== */
:root {
  /* type scale (12px floor — nothing readable renders smaller) */
  --font: Verdana, Geneva, sans-serif;
  --fs-xs: 12px;     /* captions, overlines, bar numbers */
  --fs-sm: 13px;     /* body, buttons */
  --fs-md: 14px;     /* emphasized body */
  --fs-lg: 16px;     /* card titles, big prices */
  --fs-xl: 18px;     /* modal titles */
  --fs-2xl: 22px;    /* hero numbers */
  --fs-3xl: 26px;    /* celebration titles */

  /* spacing (8px scale, 4px half-step) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;

  /* radii */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px;

  /* elevation */
  --shadow-1: 0 2px 8px rgba(0, 0, 0, .35);
  --shadow-2: 0 10px 34px rgba(0, 0, 0, .5);
  --shadow-3: 0 24px 70px rgba(0, 0, 0, .6);

  /* motion (120–200ms ease-out) */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --t-fast: 120ms var(--ease);
  --t-med: 160ms var(--ease);
  --t-slow: 200ms var(--ease);

  /* surfaces (dark aubergine ramp) */
  --overlay: rgba(10, 8, 18, .62);
  --surface-0: #17122a;                        /* deepest (card gradient floor) */
  --surface-1: #1c1730;                        /* modal card base */
  --surface-2: #241d36;                        /* modal card top */
  --card: #2b2640;                             /* inner card / tile */
  --inset: #1b1726;                            /* bar troughs, icon wells */
  --raised: #3a3350;                           /* neutral button */
  --raised-hi: #4a4366;                        /* neutral button hover */
  --disabled-bg: #332e48;
  --disabled-fg: #6f678c;
  --line: #4a4366;
  --line-soft: #3a3350;
  --grad-card: linear-gradient(180deg, var(--surface-2), var(--surface-1));

  /* text */
  --text: #f1ecfa;
  --text-dim: #c7bce2;
  --text-faint: #9c93b8;
  --text-on-accent: #1b1726;

  /* semantic color roles */
  --accent: #9b8bff;                           /* GP purple — progression */
  --accent-deep: #5a4fb0;
  --accent-hi: #6a5ec8;
  --focus: #b6a8ff;
  --coin: #ffd27a;                             /* coin gold */
  --coin-hi: #ffd86b;
  --grad-gold: linear-gradient(90deg, #ffd86b, #ffb347);
  --success: #7dffa0;
  --success-deep: #3a8f57;
  --grad-go: linear-gradient(180deg, #5fd07a, #3a9f57);   /* primary "go" button */
  --danger: #ff8e8e;
  --danger-bg: #7a3b4a;
  --danger-bg-hi: #8f4658;
  --warn: #ffb35c;
  --info: #8fd0ff;
  --grad-bar: linear-gradient(90deg, #ffd86b, #7dffa0);   /* progress fills */
  --grad-bar-gp: linear-gradient(90deg, #9b8bff, #7dffa0);

  /* per-surface accent hues (toolbar .on + the modal's accent edge share these) */
  --ac-build: #66ff88;
  --ac-menu: #ffd27a;
  --ac-market: #ffb37a;
  --ac-orders: #7ab8ff;
  --ac-hire: #9b8bff;
  --ac-goals: #7dffa0;
  --ac-journal: #cdb3ff;
  --ac-plans: #8fd0ff;
  --ac-garden: #8effa6;

  /* chrome */
  --hud-bg: rgba(17, 13, 29, .88);
  --toast-top: 64px;                           /* body.touch re-points this (responsive.css) */
}

/* ============================== 2 · BASE ============================== */
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #93c13a;                         /* grass — open doors reveal the outdoors */
  font-family: var(--font); color: var(--text);
}
#stage { position: fixed; inset: 0; }

button { font-family: var(--font); }
button:focus-visible, .palItem:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}
/* the satisfying press — every enabled control dips on :active */
button:not(:disabled):active { transform: translateY(1px) scale(.985); }

/* one scrollbar family everywhere */
* { scrollbar-width: thin; scrollbar-color: var(--raised-hi) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--raised-hi); border-radius: 5px;
  border: 3px solid transparent; background-clip: padding-box;
}
*::-webkit-scrollbar-track { background: transparent; }

/* ============================== 3 · TOP BAR (the one header layer) ============================== */
/* Overlap fix (owner report 2026-07-02): #hud and #toolbar used to be SEPARATE fixed layers with
   no flow relationship — at 1280–1920 the stats pill painted over the button row and toasts landed
   on both. Now ONE positioned container holds two flex bands in normal document flow:
     band A (#hdrInfo)  = status card (left) + stats chips + LVL/GP (right; may wrap within itself)
     band B (#toolbar)  = the button row, ALWAYS below band A (wraps with even gaps if it must)
   The container ignores pointer events; only interactive children re-enable them, so clicks in
   empty header space fall through to the Pixi canvas exactly like before. ui/mobile.js keeps
   --toast-top pointed at the container's real bottom edge (ResizeObserver), so toasts/banners/
   the quest chip always anchor BELOW the whole header, never on it. */
#topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: 10px 12px 0;
  pointer-events: none;
}
#hdrInfo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
#hud {
  flex: 0 1 auto; pointer-events: none;
  background: var(--hud-bg); border: 1px solid var(--line-soft);
  padding: 7px 12px; border-radius: var(--r-md); box-shadow: var(--shadow-1);
  font-size: var(--fs-xs); line-height: 1.55; color: var(--text-dim);
  text-shadow: 0 1px 2px #000;
}
#hud b { color: var(--coin); }

/* guided-opening hint chip (created in main.js) */
#questChip {
  position: fixed; top: var(--toast-top, 64px); left: 12px; z-index: 25; display: none;
  cursor: pointer; text-align: left;
  background: rgba(28, 20, 46, .94); color: var(--coin-hi);
  font: 700 var(--fs-xs)/1.4 var(--font); padding: 9px 14px;
  border: 1px solid var(--accent-hi); border-radius: var(--r-md);
  box-shadow: var(--shadow-2); transition: transform var(--t-fast), filter var(--t-fast);
}
#questChip:hover { filter: brightness(1.12); }

/* ============================== 4 · TOOLBAR + STATS CHIPS (the header bands) ============================== */
/* band B: ONE visual row of buttons, right-aligned, grouped game actions | panels | system.
   It sits in flow below band A inside #topbar — it can never be painted over. If the window is
   too narrow it wraps with even gaps (still right-aligned, never ragged half-buried rows). */
#toolbar {
  display: flex; gap: var(--sp-2) 14px; align-items: center;
  flex-wrap: wrap; justify-content: flex-end;
  pointer-events: none;
}
.tbGroup { display: flex; gap: var(--sp-2); align-items: center; pointer-events: none; }
/* subtle family separators between the three groups */
.tbGroup + .tbGroup { padding-left: 14px; border-left: 1px solid rgba(241, 236, 250, .16); }
#toolbar button {
  pointer-events: auto;
  font: 700 var(--fs-sm) var(--font); padding: 9px 13px; min-height: 38px;
  border: 0; border-radius: 10px; background: var(--raised); color: var(--text);
  cursor: pointer; box-shadow: var(--shadow-1);
  transition: background var(--t-fast), transform var(--t-fast), color var(--t-fast);
}
#toolbar button:hover { background: var(--raised-hi); }
/* system chrome (Sound/Exit): a touch smaller than the game-action buttons, but
   still clearly a live, clickable control — full-strength text + a solid raised
   surface + the standard shadow (the old dim text/flat fill read as disabled). */
#toolbar .tbQuiet {
  background: var(--raised); border: 1px solid var(--line-soft);
  font-weight: 600; font-size: var(--fs-xs); padding: 7px 11px; min-height: 34px;
  box-shadow: var(--shadow-1); color: var(--text);
}
#toolbar .tbQuiet:hover { background: var(--raised-hi); color: var(--text); }
#btnBuild.on      { background: var(--ac-build);   color: var(--text-on-accent); }
#btnMenu.on       { background: var(--ac-menu);    color: var(--text-on-accent); }
#btnMarket.on     { background: var(--ac-market);  color: var(--text-on-accent); }
#btnOrders.on     { background: var(--ac-orders);  color: var(--text-on-accent); }
#btnHire.on       { background: var(--ac-hire);    color: var(--text-on-accent); }
#btnGoals.on      { background: var(--ac-goals);   color: var(--text-on-accent); }
#btnJournal.on    { background: var(--ac-journal); color: var(--text-on-accent); }
#btnBlueprints.on { background: var(--ac-plans);   color: var(--text-on-accent); }

/* ONE badge family: the count pill (Goals) + the attention dots (Market deal / Orders ready) */
#btnGoals, #btnMarket, #btnOrders { position: relative; }
#btnGoals .gBadge {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; line-height: 18px;
  padding: 0 5px; border-radius: var(--r-pill); background: #ff5d6c; color: #fff;
  font: 800 12px var(--font); text-align: center; box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
  border: 2px solid var(--surface-1); box-sizing: border-box; display: none;
}
#btnGoals.hasNew .gBadge { display: block; }
#btnMarket .mkDot, #btnOrders .odDot {
  position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--surface-1); box-sizing: content-box;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5); display: none;
}
#btnMarket .mkDot { background: var(--warn); }
#btnOrders .odDot { background: var(--success); }
#btnMarket.hasDeal .mkDot, #btnOrders.hasReady .odDot { display: block; }

/* the stats pill (band A, right side): one chip per stat — comfortable, legible, consistent */
#stats {
  display: flex; gap: var(--sp-1); align-items: stretch;
  flex-wrap: wrap; justify-content: flex-end;   /* mid-width windows: chips wrap WITHIN the pill */
  flex: 0 1 auto; min-width: 0; pointer-events: auto;   /* chips keep their hover tooltips */
  padding: 5px 6px; border-radius: 14px;
  background: var(--hud-bg); box-shadow: var(--shadow-1); border: 1px solid var(--line-soft);
}
#stats > span {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 var(--fs-sm) var(--font); white-space: nowrap; text-shadow: 0 1px 2px #000;
  padding: 5px 9px; border-radius: 9px; background: rgba(255, 255, 255, .045);
}
#stats #clock { color: var(--text-dim); font-weight: 600; }
#stats #coins { color: var(--coin-hi); font: 800 var(--fs-lg) var(--font); }
/* income/expense fold into the profit chip's tooltip (de-densify) — data lives in #prof's title */
#stats #inc, #stats #exp { display: none; }
#stats #prof { font-weight: 800; background: #0e2419; }
#stats #prof.up { color: var(--success); }
#stats #prof.down { color: var(--danger); background: #2a0d14; }
#stats #pop { gap: 6px; }
#stats #pop .popLbl { color: var(--text-faint); font: 800 var(--fs-xs) var(--font); letter-spacing: .4px; }
#stats #popBar, #stats #gpBar {
  display: inline-block; width: 64px; height: 10px; border-radius: 6px; background: #241d3a;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); overflow: hidden; vertical-align: middle;
}
#stats #popFill { display: block; height: 100%; width: 0%; border-radius: 6px;
  background: var(--grad-bar-gp); transition: width .4s var(--ease); }
#stats #popNum { color: var(--text-dim); font: 700 var(--fs-xs) var(--font); }
#stats #rating { color: var(--coin-hi); font: 700 var(--fs-md) var(--font); letter-spacing: 1px; }
#stats #venue { color: var(--info); font-weight: 700; }
#stats #chaseBadge { color: var(--coin-hi); }
#stats #lvl { gap: 6px; }
#stats #lvl .lvlLbl { color: var(--text-faint); font: 800 var(--fs-xs) var(--font); letter-spacing: .4px; }
#stats #lvl .lvlBadge {
  color: var(--text-on-accent); background: var(--grad-gold);
  font: 800 var(--fs-xs) var(--font); padding: 3px 9px; border-radius: var(--r-sm);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}
#stats #gpFill { display: block; height: 100%; width: 0%; border-radius: 6px;
  background: var(--grad-bar); transition: width .4s var(--ease); }
#stats #gpNum { color: var(--text-dim); font: 700 var(--fs-xs) var(--font); }
@keyframes lvlPulse { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
#stats #lvl.levelup .lvlBadge { animation: lvlPulse .7s var(--ease); }

/* ============================== 5 · BUILD PALETTE (bottom sheet) ============================== */
#palette {
  position: fixed; left: 0; bottom: 0; width: 100%; max-height: 36vh; z-index: 20; display: none;
  background: rgba(20, 16, 32, .95); backdrop-filter: blur(6px);
  border-top: 1px solid var(--line); box-shadow: 0 -4px 18px rgba(0, 0, 0, .4);
}
body.build-on #palette { display: block; }
#palHead { display: flex; align-items: center; gap: 10px; padding: var(--sp-2) 14px 0; }
#palTabs { display: flex; gap: 5px; }
#palTabs button {
  font: 600 var(--fs-xs) var(--font); padding: 7px 14px; min-height: 32px; border: 0;
  border-radius: var(--r-sm) var(--r-sm) 0 0; background: var(--card); color: var(--text-dim);
  cursor: pointer; transition: background var(--t-fast), color var(--t-fast);
}
#palTabs button:hover { background: var(--raised); }
#palTabs button.on { background: var(--raised-hi); color: #fff; }
#btnExpand, #btnExpandYard {
  font: 600 var(--fs-xs) var(--font); padding: 7px 12px; min-height: 32px; border: 0;
  border-radius: var(--r-sm); color: #fff; cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
}
#btnExpand { background: var(--accent-deep); margin-left: 12px; }
#btnExpand:hover { background: var(--accent-hi); }
#btnExpandYard { background: #3a7a4a; margin-left: 8px; }
#btnExpandYard:hover { background: #46934f; }
#palHint { margin-left: auto; font: var(--fs-xs) var(--font); color: var(--text-faint); }
#palGrid {
  display: grid; grid-template-columns: repeat(auto-fill, 92px); gap: 9px;
  grid-auto-rows: max-content; align-content: start;   /* rows track tile content deterministically */
  padding: var(--sp-3) 14px; overflow-y: auto; max-height: 26vh;
}
.palItem {
  width: 92px; box-sizing: border-box; background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; padding: 6px;
  cursor: pointer; text-align: center;
  transition: transform var(--t-fast), border-color var(--t-fast);
}
.palItem:hover { transform: translateY(-2px); border-color: #7a6fa6; }
.palItem:active { transform: scale(.96); }
.palItem.sel { outline: 2px solid var(--ac-build); outline-offset: 1px; }
.palItem img { width: 64px; height: 64px; object-fit: contain; display: block; margin: 0 auto; pointer-events: none; }
.palItem .nm { font: var(--fs-xs) var(--font); color: var(--text-dim); margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palItem .ct { font: 700 var(--fs-xs) var(--font); color: var(--coin); }

/* ============================== 6 · THE MODAL FAMILY ============================== */
/* anatomy: .rcModal backdrop → .rcCard (accent-edged) → .rcHead (icon+title+close) →
   .rcNote → scrolling body/grid. Open/close: fade backdrop + scale-lift card. */
.rcModal {
  position: fixed; inset: 0; z-index: 40; display: flex;
  align-items: center; justify-content: center;
  background: var(--overlay); backdrop-filter: blur(4px); font-family: var(--font);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-med), visibility var(--t-med);
}
.rcModal.show, .rcModal.in { opacity: 1; visibility: visible; }
.rcCard {
  width: min(760px, 94vw); max-height: 88vh; display: flex; flex-direction: column;
  background: var(--grad-card);
  border: 1px solid var(--line); border-top: 3px solid var(--ac, var(--accent-deep));
  border-radius: var(--r-lg); box-shadow: var(--shadow-3); overflow: hidden;
  transform: translateY(10px) scale(.97);
  transition: transform var(--t-slow);
}
.rcModal.show .rcCard, .rcModal.in .rcCard { transform: none; }
.rcHead {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 14px var(--sp-4) 13px; border-bottom: 1px solid var(--line-soft);
  flex: 0 0 auto;
}
.rcIcon {
  width: 36px; height: 36px; flex: 0 0 36px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 19px;
  background: color-mix(in srgb, var(--ac, var(--accent)) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--ac, var(--accent)) 34%, transparent);
  border-radius: 10px;
}
.rcTitle { font: 700 var(--fs-xl) var(--font); color: var(--text); }
.rcCoins {
  font: 800 var(--fs-md) var(--font); color: var(--coin-hi);
  background: rgba(255, 210, 122, .1); border: 1px solid rgba(255, 210, 122, .25);
  padding: 5px 11px; border-radius: var(--r-pill);
}
.rcSub { font: var(--fs-xs) var(--font); color: var(--text-faint); }
.rcClose {
  margin-left: auto; width: 36px; height: 36px; flex: 0 0 36px;
  border: 0; border-radius: var(--r-sm); background: var(--raised); color: var(--text);
  cursor: pointer; font: 700 var(--fs-md) var(--font);
  transition: background var(--t-fast), transform var(--t-fast);
}
.rcClose:hover { background: var(--raised-hi); }
.rcTabs { display: flex; gap: 6px; padding: var(--sp-3) var(--sp-4) 0; flex: 0 0 auto; }
.rcTabs button {
  font: 600 var(--fs-sm) var(--font); padding: 9px 18px; min-height: 38px; border: 0;
  border-radius: 10px 10px 0 0; background: var(--card); color: var(--text-dim); cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.rcTabs button:hover { background: var(--raised); }
.rcTabs button.on {
  background: var(--raised-hi); color: #fff;
  box-shadow: inset 0 2px 0 var(--ac, var(--accent));
}
.rcNote { padding: 9px var(--sp-4); font: var(--fs-xs)/1.5 var(--font); color: var(--text-faint); flex: 0 0 auto; }
.rcNote.warn { color: var(--coin); }

/* section overline (goals / journal share it) */
.gSection, .jSection {
  font: 800 var(--fs-xs) var(--font); letter-spacing: .8px; color: var(--accent);
  margin: var(--sp-2) 0 10px; text-transform: uppercase;
}

/* progress bar family — thick, legible, everywhere the same */
.gBar, .jBar {
  height: 12px; border-radius: 7px; background: var(--inset);
  border: 1px solid var(--line); overflow: hidden; margin-top: 4px;
}
.gBar i, .jBar i {
  display: block; height: 100%; border-radius: 7px;
  background: var(--grad-bar); transition: width .3s var(--ease);
}
.gBarNum, .jBarNum { font: var(--fs-xs) var(--font); color: var(--text-faint); margin: 4px 0 2px; }

/* ============================== 7 · MENU MODAL ============================== */
#menuCard { --ac: var(--ac-menu); width: min(880px, 94vw); }
#menuGrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4) var(--sp-4); overflow-y: auto;
}
.dish {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-3); display: flex; flex-direction: column; gap: 10px;
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  align-self: start;
}
.dish:hover { transform: translateY(-2px); }
.dish.on { border-color: var(--ac-build); box-shadow: inset 0 0 0 1px rgba(102, 255, 136, .33); }
.dish.hardlocked { opacity: .55; }
.dish.locked .dishIcon { filter: grayscale(.65) brightness(.8); }
.dish.starved { border-color: #8f4a2e; box-shadow: inset 0 0 0 1px rgba(255, 150, 90, .3); }
.dishTop { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.dishIcon {
  width: 52px; height: 52px; object-fit: contain; flex: 0 0 52px;
  background: var(--inset); border-radius: 10px; padding: 3px;
}
.dishMeta { min-width: 0; flex: 1; }
.dishName {
  font: 700 var(--fs-md)/1.25 var(--font); color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dishSub {
  display: flex; align-items: center; gap: 5px 7px; margin-top: 4px; flex-wrap: wrap;
  font: var(--fs-xs) var(--font); color: var(--text-faint);
}
.dishSub > * { white-space: nowrap; }
.dishSub .profit { color: var(--success); font-weight: 700; }
.dishTier {
  font: 800 12px var(--font); color: var(--text-dim); background: var(--inset);
  border: 1px solid var(--line); padding: 1px 6px; border-radius: 6px; letter-spacing: .3px;
}
.dishPrice { font: 800 var(--fs-xl) var(--font); color: var(--coin-hi); flex: 0 0 auto; text-align: right; }
.dishPrice .up { font: 700 var(--fs-xs) var(--font); color: var(--success); }
.dishCaret {
  flex: 0 0 auto; color: var(--text-faint); font-size: var(--fs-xs);
  transition: transform var(--t-med); margin-left: 2px;
}
.dish.open .dishCaret { transform: rotate(180deg); }
/* mastery — compact but always visible (the long grind must stay legible) */
.dishMastery { display: flex; align-items: center; gap: 8px; }
.dishMastery .mBar {
  flex: 1; height: 8px; background: var(--inset); border: 1px solid var(--line);
  border-radius: 5px; overflow: hidden;
}
.dishMastery .mBar span { display: block; height: 100%; background: var(--grad-gold);
  border-radius: 5px; transition: width .2s var(--ease); }
.dishMastery .mLbl { font: 700 var(--fs-xs) var(--font); color: var(--text-faint); white-space: nowrap; }
.dishMastery.max .mLbl { color: var(--coin-hi); }
.dishLvl {
  font: 700 var(--fs-xs) var(--font); color: var(--text-on-accent);
  background: var(--grad-gold); padding: 1px 7px; border-radius: 6px; white-space: nowrap;
}
/* the expandable details drawer (ingredients · economy · larder · Perfect-it) */
.dishDetails { display: none; flex-direction: column; gap: 9px; padding-top: 2px; }
.dish.open .dishDetails { display: flex; }
.dishIngs { font: var(--fs-xs)/1.5 var(--font); color: var(--text-dim); }
.dishIngs b { color: var(--text-faint); font-weight: 800; }
.dishEcon { display: flex; flex-wrap: wrap; gap: 6px; font: var(--fs-xs) var(--font); color: var(--text-dim); }
.dishEcon span {
  background: var(--inset); border: 1px solid var(--line-soft);
  border-radius: 7px; padding: 4px 8px; white-space: nowrap;
}
.dishEcon .sell { color: var(--coin); }
.dishEcon .profit { color: var(--success); font-weight: 700; }
.dishLarder {
  font: 700 var(--fs-xs)/1.7 var(--font); color: var(--success);
  background: rgba(46, 143, 87, .16); border: 1px solid var(--success-deep);
  border-radius: var(--r-sm); padding: 6px 9px;
}
.dishLarder.out { color: #ffb38e; background: rgba(143, 72, 46, .18); border-color: #8f4a2e; }
.dishLarder .lardIng { white-space: nowrap; }
.dishLarder .lardIng.out { color: var(--danger); font-weight: 800; }
/* collapsed-state starved pill (visible without expanding) */
.dishRestock {
  font: 700 var(--fs-xs) var(--font); color: #ffb38e;
  background: rgba(143, 72, 46, .18); border: 1px solid #8f4a2e;
  border-radius: 7px; padding: 3px 8px; white-space: nowrap;
}

/* ============================== 8 · BUTTON FAMILY ============================== */
/* base: every in-modal action button shares metrics, radius, press + disabled behavior */
.dishBtn, .mkBuy, .odBtn, .staff .train, .staff .meal, .bpBtns button, .gQNow .qGo, .gpUpBtn,
#inspBody .fireBtn, #inspBody .followBtn {
  font: 700 var(--fs-sm) var(--font); padding: 10px 12px; min-height: 38px;
  border: 0; border-radius: 10px; cursor: pointer; color: #fff;
  transition: background var(--t-fast), filter var(--t-fast), transform var(--t-fast);
}
.dishBtn:hover, .mkBuy:hover, .odBtn:hover, .staff .train:hover, .staff .meal:hover,
.bpBtns button:hover,
.gQNow .qGo:hover, .gpUpBtn:hover, #inspBody .fireBtn:hover, #inspBody .followBtn:hover {
  filter: brightness(1.12);
}
.dishBtn:disabled, .mkBuy:disabled, .odBtn:disabled, .staff .train:disabled, .staff .meal:disabled,
.bpBtns button:disabled, .gpUpBtn:disabled, .gpUpBtn.dis {
  background: var(--disabled-bg); color: var(--disabled-fg); cursor: not-allowed; filter: none;
}
/* variants */
.dishBtn { background: var(--accent-deep); }
.dishBtn.add, .mkBuy, .odBtn.collect { background: var(--grad-go); color: #0d2b16; }
.dishBtn.on { background: #1f6b3d; color: #bfffce; }              /* still a control: click = take OFF the menu */
.dishBtn.on:hover { background: #26804a; filter: none; }
.dishBtn.unlock { background: linear-gradient(180deg, #c99b34, #a17a24); color: #241a00; }
.dishBtn.perfect { background: linear-gradient(90deg, #b08a2e, #8a5fb0); }
.dishBtn.perfect:disabled { background: var(--disabled-bg); }
.odBtn { background: #3a6ea8; }
.odBtn.abandon { background: var(--danger-bg); flex: 0 0 auto; }
.odBtn.abandon:hover { background: var(--danger-bg-hi); filter: none; }
.mkSellBtns { display: flex; gap: var(--sp-2); }
.mkSellBtns .mkBuy { flex: 1; background: linear-gradient(180deg, #c99b34, #a17a24); color: #241a00; }
/* 🔒 locked reads distinct from plain disabled: dashed outline, gold-dim text, transparent body */
.dishBtn.lk:disabled, .mkBuy.lk:disabled, .odBtn.lk:disabled, .staff .train.lk:disabled {
  background: transparent; border: 1px dashed var(--line);
  color: color-mix(in srgb, var(--coin) 62%, var(--text-faint));
}

/* ============================== 9 · MARKET MODAL ============================== */
#marketCard { --ac: var(--ac-market); }
#marketGrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4) var(--sp-4); overflow-y: auto;
}
.mkSlot {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-3); display: flex; flex-direction: column; gap: 9px;
  transition: transform var(--t-fast), border-color var(--t-fast);
}
.mkSlot:hover { transform: translateY(-2px); }
.mkSlot.deal { border-color: var(--warn); box-shadow: inset 0 0 0 1px rgba(255, 155, 61, .35); }
.mkSlot.locked { opacity: .55; }
.mkDeal { font: 800 var(--fs-xs) var(--font); letter-spacing: .6px; color: var(--warn); }
.mkTop { display: flex; gap: 10px; align-items: center; }
.mkIco {
  font-size: 26px; line-height: 1; width: 44px; height: 44px; flex: 0 0 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--inset); border-radius: 10px;
}
.mkMeta { min-width: 0; }
.mkName { font: 700 var(--fs-md) var(--font); color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkRar { font: var(--fs-xs) var(--font); color: var(--coin-hi); margin-top: 3px; }
.mkPrice { font: 800 var(--fs-xl) var(--font); color: var(--coin-hi); }
.mkPrice s { font: var(--fs-xs) var(--font); color: var(--text-faint); margin-left: 5px; }
.mkEmpty { grid-column: 1/-1; font: var(--fs-sm)/1.6 var(--font); color: var(--text-faint);
  padding: var(--sp-4); text-align: center; }

/* ============================== 10 · ORDERS MODAL ============================== */
#ordersCard { --ac: var(--ac-orders); }
#ordersGrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4) var(--sp-4); overflow-y: auto;
}
.odSlot {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-3); display: flex; flex-direction: column; gap: 9px;
  transition: transform var(--t-fast), border-color var(--t-fast);
}
.odSlot:hover { transform: translateY(-2px); }
.odSlot.banquet { border-color: #c9a2ff; box-shadow: inset 0 0 0 1px rgba(201, 162, 255, .3); }
.odSlot.activeC { grid-column: 1/-1; border-color: var(--success); }
.odBanq { font: 800 var(--fs-xs) var(--font); letter-spacing: .6px; color: #d9beff; }
.odTop { display: flex; gap: 10px; align-items: center; }
.odIco { width: 44px; height: 44px; object-fit: contain; flex: 0 0 44px;
  background: var(--inset); border-radius: 10px; padding: 3px; }
.odMeta { min-width: 0; }
.odName { font: 700 var(--fs-md) var(--font); color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.odSub { font: var(--fs-xs)/1.45 var(--font); color: var(--text-faint); margin-top: 3px; }
.odPay { font: 700 var(--fs-sm) var(--font); color: var(--coin); }
.odPay .gp { color: var(--success); }
.odBarWrap { display: block; height: 12px; border-radius: 7px; background: var(--inset);
  border: 1px solid var(--line); overflow: hidden; }
.odBar { display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, #7ab8ff, #7dffa0); border-radius: 7px; transition: width .3s var(--ease); }
.odEmpty { grid-column: 1/-1; font: var(--fs-sm)/1.6 var(--font); color: var(--text-faint);
  padding: var(--sp-4); text-align: center; }

/* ============================== 11 · CREW (HIRE) MODAL ============================== */
#hireCard { --ac: var(--ac-hire); }
#hireWages { font: 700 var(--fs-xs) var(--font); color: var(--danger);
  background: rgba(255, 142, 142, .08); border: 1px solid rgba(255, 142, 142, .2);
  padding: 5px 11px; border-radius: var(--r-pill); }
#hireGrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4) var(--sp-4); overflow-y: auto;
}
.staff {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-4) 14px; display: flex; flex-direction: column; gap: 10px;
  align-items: center; text-align: center;
}
.staff .face { font-size: 44px; line-height: 1; }
.staff .role { font: 800 var(--fs-lg) var(--font); color: var(--text); }
.staff .wage { font: 700 var(--fs-xs) var(--font); color: var(--text-dim);
  background: var(--inset); border: 1px solid var(--line-soft);
  padding: 4px 10px; border-radius: var(--r-pill); }
.staff .desc { font: var(--fs-xs)/1.5 var(--font); color: var(--text-faint); min-height: 44px; }
.staff .desc.warn { color: var(--coin); min-height: 0; }
.staff .countRow { display: flex; align-items: center; gap: 14px; margin-top: 2px; }
.staff .countRow button {
  width: 44px; height: 44px; border: 0; border-radius: var(--r-md);
  font: 700 22px var(--font); cursor: pointer; color: #fff;
  transition: background var(--t-fast), transform var(--t-fast), filter var(--t-fast);
}
.staff .countRow .hire { background: var(--success-deep); }
.staff .countRow .hire:hover { background: #46a866; }
.staff .countRow .fire { background: var(--danger-bg); }
.staff .countRow .fire:hover { background: var(--danger-bg-hi); }
.staff .countRow button:disabled { background: var(--disabled-bg); color: var(--disabled-fg); cursor: not-allowed; }
.staff .count { font: 800 var(--fs-2xl) var(--font); color: var(--coin-hi); min-width: 30px; }
/* crew ENERGY row + the one STAFF MEAL action (owner directive 2026-07-02 — replaces the old
   four-button perk-food strip): a labeled average-energy bar, then "🍲 Staff meal · $X". */
.staff .energyRow { display: flex; align-items: center; gap: 8px; width: 100%; }
.staff .energyRow .eLbl {
  font: 800 var(--fs-xs) var(--font); color: var(--text-faint);
  letter-spacing: .4px; white-space: nowrap;
}
.staff .energyRow .eBar {
  flex: 1; height: 10px; border-radius: 6px; background: var(--inset);
  border: 1px solid var(--line); overflow: hidden;
}
.staff .energyRow .eBar i { display: block; height: 100%; border-radius: 6px; transition: width .3s var(--ease); }
.staff .energyRow .ePct { font: 700 var(--fs-xs) var(--font); min-width: 34px; text-align: right; }
.staff .meal { width: 100%; background: linear-gradient(180deg, #c9722e, #a35a20); }
/* fresh/empty crew: the meal rests QUIET (dashed ghost) — distinct from "can't afford" (solid dim) */
.staff .meal.fresh:disabled {
  background: transparent; border: 1px dashed var(--line);
  color: var(--text-faint); box-shadow: none;
}
.staff .train { width: 100%; background: linear-gradient(90deg, #8a5fb0, #5a4fb0); }
.staff .train:disabled { background: var(--disabled-bg); }
.staff .mgrOn { font: 700 var(--fs-sm) var(--font); color: var(--success); }
.staff.mgr { border-color: #5a6a8a; }

/* ============================== 12 · GOALS MODAL (injected) ============================== */
#goalsModal { z-index: 50; }
#goalsCard { --ac: var(--ac-goals); width: min(560px, 94vw); }
#goalsBody { padding: 14px var(--sp-4) var(--sp-4); overflow-y: auto; }
.gNext { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 13px 14px; margin-bottom: 10px; }
.gNext .gnTop { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: 7px; }
.gNext .gnTitle { font: 700 var(--fs-md) var(--font); color: var(--text); }
.gNext .gnSub { font: var(--fs-xs) var(--font); color: var(--text-dim); margin-left: auto; }
.gNext .gnList { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.gNext .gnList li { font: var(--fs-xs) var(--font); color: #bfead0;
  background: rgba(46, 143, 87, .18); border: 1px solid var(--success-deep);
  border-radius: 7px; padding: 4px 9px; }
.gNext .gnMax { font: var(--fs-xs) var(--font); color: var(--coin-hi); }
.gAch { display: flex; align-items: center; gap: var(--sp-3); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 11px 13px; margin-bottom: var(--sp-2); }
.gAch.done { border-color: var(--success-deep); background: #1f2f26; }
.gAch .gaIcon { font-size: 24px; line-height: 1; width: 32px; text-align: center; flex: 0 0 32px; }
.gAch .gaMain { flex: 1; min-width: 0; }
.gAch .gaName { font: 700 var(--fs-sm) var(--font); color: var(--text); }
.gAch.done .gaName { color: #bfffce; }
.gAch .gaDesc { font: var(--fs-xs) var(--font); color: var(--text-faint); margin: 2px 0 3px; }
.gAch .gaNum { font: var(--fs-xs) var(--font); color: var(--text-dim); margin-top: 4px; text-align: right; }
.gAch .gaTick { font-size: 18px; color: var(--success); }
.gAch .gaReward { font: var(--fs-xs) var(--font); color: var(--coin-hi); }
.gQDone { display: flex; align-items: center; gap: var(--sp-2); font: var(--fs-xs) var(--font);
  color: var(--success); opacity: .75; padding: 4px 2px; }
.gQFuture { display: flex; align-items: center; gap: var(--sp-2); font: var(--fs-xs) var(--font);
  color: var(--text-faint); opacity: .55; padding: 4px 2px; }
.gQNow { background: var(--card); border: 1px solid var(--success-deep); border-radius: var(--r-md);
  padding: var(--sp-3) 14px; margin: 6px 0 var(--sp-2); }
.gQNow .qTitle { font: 700 var(--fs-md) var(--font); color: var(--text); }
.gQNow .qDesc { font: var(--fs-xs)/1.5 var(--font); color: var(--text-dim); margin: 5px 0 2px; }
.gQNow .qLock { font: 700 var(--fs-xs) var(--font); color: var(--coin); margin-top: 6px; }
.gQNow .qGo { margin-top: 9px; background: var(--grad-go); color: #0d2b16; padding: 9px 16px; }
.gQNow .qReward { font: var(--fs-xs) var(--font); color: var(--coin-hi); margin-left: var(--sp-2); }

/* ============================== 13 · JOURNAL MODAL (injected) ============================== */
/* DECLUTTER (owner report 2026-07-02 "the journal tab is busy"): three tabs (Journey / The Chase /
   Story), each sized to skim on one phone screen. The tab strip is the shared .rcTabs family. */
#journalModal { z-index: 50; }
#journalCard { --ac: var(--ac-journal); width: min(560px, 94vw); }
#journalTabs { padding-bottom: 0; }
#journalBody { padding: 14px var(--sp-4) var(--sp-4); overflow-y: auto; }
.jNow { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 14px; margin-bottom: var(--sp-3); }
.jNowTop { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; flex-wrap: wrap; }
.jLvlBadge { color: var(--text-on-accent); background: var(--grad-gold);
  font: 800 var(--fs-md) var(--font); padding: 4px 12px; border-radius: var(--r-sm); }
.jVenue { font: 700 var(--fs-xs) var(--font); color: var(--info); }
.jBarNum { margin: 5px 0 12px; }
.jWork { font: 700 var(--fs-sm) var(--font); color: var(--text); margin-bottom: 8px; }
.jChips { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.jChips li { font: var(--fs-xs) var(--font); color: #bfead0;
  background: rgba(46, 143, 87, .18); border: 1px solid var(--success-deep);
  border-radius: 7px; padding: 4px 9px; }
.jChips li.shop { color: #e3dcff; background: rgba(90, 79, 176, .25); border-color: var(--accent-hi); }
.jChips li.more { color: var(--text-faint); background: transparent; border-style: dashed; cursor: help; }
.jMax { font: var(--fs-xs)/1.5 var(--font); color: var(--coin-hi); }
/* the quiet "Coming later" milestone line — one chip per future gate, blurbs in tooltips */
.jComing { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 2px 2px 0; }
.jComingLbl { font: 800 var(--fs-xs) var(--font); letter-spacing: .8px; color: var(--text-faint);
  text-transform: uppercase; margin-right: 3px; }
.jMile { font: var(--fs-xs) var(--font); color: var(--text-dim); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px 10px;
  white-space: nowrap; cursor: help; }
.jMile.frontier { color: #b6a8ff; border-style: dashed; border-color: var(--accent-hi); }
.jEntry { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 11px 13px; margin-bottom: var(--sp-2); }
.jeTop { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: 7px; }
.jeLvl { font: 700 var(--fs-sm) var(--font); color: var(--text); }
.jeWhen { font: var(--fs-xs) var(--font); color: var(--text-faint); margin-left: auto; }
.jEmpty { font: var(--fs-xs)/1.55 var(--font); color: var(--text-faint); background: var(--card);
  border: 1px dashed var(--line); border-radius: var(--r-md); padding: var(--sp-3) 14px; }
/* THE CHASE — one column, airy cards: requirement bars only, bonus math in tooltips */
.jChase { display: flex; flex-direction: column; gap: var(--sp-3); }
.jChaseCard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-4) 16px; }
.jChaseCard.gold { border-color: #8a7430; }
.jChaseCard.teal { border-color: #2f7a72; }
.jcTop { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 10px; cursor: help; }
.jcTitle { font: 800 var(--fs-md) var(--font); color: var(--text); }
.jcBadge { margin-left: auto; font: 700 var(--fs-md) var(--font); color: var(--coin-hi); letter-spacing: 2px; }
.jChaseCard.teal .jcBadge { color: #7de8dc; }
.jcLock { font: 700 var(--fs-xs) var(--font); color: var(--coin);
  background: rgba(138, 116, 48, .18); border: 1px solid #8a7430;
  border-radius: var(--r-sm); padding: 6px 10px; margin-bottom: 10px; }
.jcReq { margin: 11px 0 0; }
.jcReqTop { display: flex; justify-content: space-between; font: var(--fs-xs) var(--font);
  color: var(--text-dim); margin-bottom: 3px; }
.jcReqTop b { color: var(--text); }
/* earned permanent bonuses — one quiet line, not a list */
.jcOwn { font: 700 var(--fs-xs)/1.6 var(--font); color: #bfead0; margin-top: 12px; }
.jcDone { font: 700 var(--fs-sm) var(--font); color: var(--coin-hi); margin-top: 9px; }

/* ============================== 14 · BLUEPRINTS MODAL (injected) ============================== */
#bpModal { z-index: 50; }
#bpCard { --ac: var(--ac-plans); width: min(560px, 94vw); }
#bpBody { padding: 14px var(--sp-4) var(--sp-4); overflow-y: auto; }
#bpNote { font: var(--fs-xs)/1.55 var(--font); color: var(--text-dim); background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 11px; }
#bpNote.warn { color: var(--coin); border-color: #8a7430; }
.bpSlot { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-3) 14px; margin-bottom: 10px; }
.bpSlot.locked { opacity: .55; border-style: dashed; }
.bpTop { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.bpName { font: 700 var(--fs-md) var(--font); color: var(--text); }
.bpMeta { font: var(--fs-xs) var(--font); color: var(--text-faint); margin-left: auto; }
.bpQuote { font: var(--fs-xs)/1.6 var(--font); color: #bfead0; margin: 8px 0 10px; }
.bpQuote .neg { color: var(--danger); }
.bpQuote .lock { color: var(--coin); }
/* the plain-language quote: one short line per fact, net line emphasized */
.bpQuote .bpLine { display: block; margin: 2px 0; }
.bpQuote .bpNet { font-weight: 800; color: var(--coin-hi); margin-top: 6px; }
.bpQuote .bpNet.earn { color: var(--success); }
/* the reserved auto-backup slot — the safety net, visually its own thing */
.bpSlot.backup { border-style: dashed; border-color: var(--info); }
.bpSlot.backup .bpName { color: var(--info); }
.bpBtns { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.bpBuild { background: var(--grad-go); color: #0d2b16; }
.bpBuild[disabled] { filter: grayscale(.7); opacity: .6; cursor: default; }
.bpSave { background: var(--accent-deep); }
.bpDel { background: var(--raised); }
.bpDel:hover { background: var(--danger-bg); }
.bpEmpty { font: var(--fs-xs)/1.5 var(--font); color: var(--text-faint); }

/* ============================== 15 · GARDEN POPUP (injected) ============================== */
#gardenPopup { z-index: 45; }
#gpCard {
  --ac: var(--ac-garden);
  width: min(560px, 94vw); max-height: 88vh; overflow-y: auto;
  background: var(--grad-card); border: 1px solid var(--line);
  border-top: 3px solid var(--ac-garden);
  border-radius: var(--r-lg); box-shadow: var(--shadow-3);
  padding: var(--sp-4) 18px; font-family: var(--font);
}
#gpCard h3 { margin: 0 0 10px; font: 700 var(--fs-xl) var(--font); color: var(--text);
  display: flex; align-items: center; gap: 10px; }
#gpCard h3 .gpClose { margin-left: auto; width: 36px; height: 36px; border: 0;
  border-radius: var(--r-sm); background: var(--raised); color: var(--text); cursor: pointer;
  font: 700 var(--fs-md) var(--font); transition: background var(--t-fast); }
#gpCard h3 .gpClose:hover { background: var(--raised-hi); }
.gpRow { font: var(--fs-xs)/1.5 var(--font); color: var(--text-dim); margin: 6px 0; }
.gpLock { color: var(--coin); }
.gpGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 9px; margin: var(--sp-2) 0; }
.gpCrop { display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 10px 6px; cursor: pointer; color: var(--text);
  transition: transform var(--t-fast), border-color var(--t-fast); }
.gpCrop:hover { transform: translateY(-2px); border-color: var(--ac-garden); }
.gpCrop:active { transform: scale(.97); }
.gpCrop.dis { opacity: .45; cursor: not-allowed; }
.gpCrop .gpIco img { width: 42px; height: 42px; object-fit: contain; }
.gpCrop .gpIco { font-size: 30px; height: 42px; display: flex; align-items: center; }
.gpNm { font: 700 var(--fs-xs) var(--font); }
.gpRar { color: var(--coin-hi); font-size: var(--fs-xs); }
.gpCost { font: 700 var(--fs-xs) var(--font); color: var(--coin); }
.gpVal { font: var(--fs-xs) var(--font); color: var(--ac-garden); }
.gpUpHdr { font: 700 var(--fs-sm) var(--font); color: var(--text); margin-top: var(--sp-3);
  border-top: 1px solid var(--line-soft); padding-top: 10px; }
.gpUps { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 9px; }
.gpUp { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.gpUpTop { display: flex; justify-content: space-between; font: 700 var(--fs-xs) var(--font); color: var(--text); }
.gpUpLv { color: var(--text-faint); font-weight: 400; }
.gpUpDesc { font: var(--fs-xs)/1.45 var(--font); color: var(--text-faint); margin: 5px 0 8px; min-height: 28px; }
.gpUpBtn { width: 100%; background: var(--grad-gold); color: var(--text-on-accent); }

/* ============================== 16 · ACTOR INSPECTOR ============================== */
#inspect { position: fixed; left: 12px; bottom: 12px; z-index: 30; display: none; width: 256px; }
#inspect.show { display: block; }
#inspCard { background: var(--grad-card); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-2); overflow: hidden; }
#inspHead { display: flex; align-items: center; gap: 9px; padding: 11px 13px;
  border-bottom: 1px solid var(--line-soft); }
#inspIcon { font-size: 20px; line-height: 1; }
#inspTitle { font: 700 var(--fs-md) var(--font); color: var(--text); flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#inspClose { font: 700 var(--fs-sm) var(--font); width: 30px; height: 30px; border: 0;
  border-radius: 7px; background: var(--raised); color: var(--text); cursor: pointer;
  transition: background var(--t-fast); }
#inspClose:hover { background: var(--raised-hi); }
#inspBody { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 7px; }
#inspBody .iRow { display: flex; justify-content: space-between; gap: 10px; font: var(--fs-xs) var(--font); }
#inspBody .iLabel { color: var(--text-faint); }
#inspBody .iVal { color: var(--text); font-weight: 700; text-align: right; }
#inspBody .iBar { height: 8px; border-radius: 5px; background: var(--inset); overflow: hidden; }
#inspBody .iBarFill { height: 100%; border-radius: 5px; transition: width .2s var(--ease); }
#inspBody .iMood { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-faint);
  font: var(--fs-xs) var(--font); margin-top: 2px; }
#inspBody .iMood img { width: 26px; height: 26px; object-fit: contain; }
#inspBody .fireBtn { margin-top: 6px; background: var(--danger-bg); }
#inspBody .fireBtn:hover { background: var(--danger-bg-hi); filter: none; }
#inspBody .followBtn { margin-top: 6px; background: #3a4d7a; }
#inspBody .followBtn:hover { background: #465d92; filter: none; }
#inspBody .followBtn.on { background: #5a8fd0; color: #0d2236; }

/* ============================== 17 · ITEM TOOLTIP ============================== */
.itemTip { position: fixed; z-index: 70; display: none; max-width: 250px; pointer-events: none;
  background: var(--grad-card); border: 1px solid var(--line); border-radius: 11px;
  box-shadow: var(--shadow-2); padding: 10px 12px; }
.itemTip.show { display: block; }
.itemTip .ttHead { display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; margin-bottom: 5px; }
.itemTip .ttName { font: 700 var(--fs-sm) var(--font); color: var(--text); }
.itemTip .ttCost { font: 700 var(--fs-xs) var(--font); color: var(--coin); }
.itemTip .ttLine { font: var(--fs-xs)/1.5 var(--font); color: var(--text-dim); margin-top: 2px; }
.itemTip .ttBarRow { display: flex; align-items: center; gap: 7px; margin-top: 6px; }
.itemTip .ttBarLbl { font: 700 var(--fs-xs) var(--font); color: var(--text-faint);
  width: 46px; flex: 0 0 46px; letter-spacing: .3px; }
.itemTip .ttBar { flex: 1; height: 8px; border-radius: 5px; background: var(--inset);
  border: 1px solid var(--line); overflow: hidden; }
.itemTip .ttBar i { display: block; height: 100%; border-radius: 5px; background: var(--grad-bar); }
.itemTip .ttBarVal { font: 700 var(--fs-xs) var(--font); color: var(--text-dim);
  width: 36px; flex: 0 0 36px; text-align: right; }

/* ============================== 18 · TOASTS / BANNERS (one celebration family) ============================== */
.rcToast {
  position: fixed; left: 50%; top: var(--toast-top, 64px); z-index: 60;
  transform: translateX(-50%) translateY(-8px);
  font: 700 var(--fs-sm)/1.5 var(--font); color: var(--text); text-align: center;
  background: var(--grad-card); border: 1px solid var(--accent);
  padding: 11px 18px; border-radius: var(--r-md); box-shadow: var(--shadow-2);
  opacity: 0; transition: opacity .35s var(--ease), transform .35s var(--ease);
  pointer-events: none; max-width: min(92vw, 520px);
}
.rcToast.in { opacity: 1; transform: translateX(-50%) translateY(0); }
.rcToast.slot2 { top: calc(var(--toast-top, 64px) + 52px); }
.rcToast b, .rcToast .gold { color: var(--coin-hi); }
.rcToast--good { background: linear-gradient(180deg, #2b6e3a, #1e4f29); border-color: #4fd07a; color: #eaffe0; }
.rcToast--crate { background: linear-gradient(180deg, #6e552b, #4f3d1e); border-color: #d0a54f; color: #fff3e0; }
.rcToast--ach { background: linear-gradient(180deg, #3a2f6e, #241d44); border-color: var(--accent); color: #eee6ff; }
.rcToast--warn { background: rgba(28, 20, 46, .95); border-color: var(--accent-hi); color: var(--coin-hi); }

#rushBanner {
  position: fixed; top: var(--toast-top, 64px); left: 50%;
  transform: translateX(-50%) translateY(-8px); z-index: 60;
  background: linear-gradient(180deg, #7a3a12, #52260b); color: #ffe9d6;
  font: 700 var(--fs-md) var(--font); padding: 13px 22px;
  border: 1px solid #ff9b54; border-radius: 14px; box-shadow: var(--shadow-2);
  opacity: 0; transition: opacity .35s var(--ease), transform .35s var(--ease);
  pointer-events: none; text-align: center; max-width: 80vw;
}
#rushBanner .rbSub { display: block; font: 600 var(--fs-xs)/1.45 var(--font); color: #ffd2ad; margin-top: 3px; }
#rushBanner.win { background: linear-gradient(180deg, #2b6e3a, #1e4f29); border-color: #4fd07a; color: #eaffe0; }
#rushBanner.win .rbSub { color: #bdf0c7; }
#rushBanner.lose { background: linear-gradient(180deg, #6e2b2b, #4f1e1e); border-color: #d07a7a; color: #ffe0e0; }
#rushBanner.lose .rbSub { color: #f0bdbd; }

/* ============================== 19 · CELEBRATIONS (level-up / chase award) ============================== */
#levelUpPop { position: fixed; inset: 0; z-index: 55; display: flex; align-items: center;
  justify-content: center; background: rgba(10, 8, 18, .45); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity var(--t-slow); font-family: var(--font); }
#luCard { width: min(380px, 92vw); background: linear-gradient(180deg, #2c2547, #1d1832);
  border: 1px solid var(--accent-hi); border-top: 3px solid var(--coin-hi);
  border-radius: 18px; box-shadow: var(--shadow-3);
  padding: 22px 22px 18px; text-align: center;
  transform: translateY(10px) scale(.95); transition: transform var(--t-slow); }
#levelUpPop.in { opacity: 1; }
#levelUpPop.in #luCard { transform: none; }
#luCard .luBurst { font-size: 42px; line-height: 1; margin-bottom: 4px; }
#luCard .luTitle { font: 800 var(--fs-3xl) var(--font); color: var(--coin-hi);
  margin: 2px 0; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
#luCard .luSub { font: 700 var(--fs-xs) var(--font); letter-spacing: .8px; color: #b6a8ff;
  text-transform: uppercase; margin-bottom: 12px; }
#luCard .luList { list-style: none; margin: 0 0 14px; padding: 0;
  display: flex; flex-direction: column; gap: 7px; }
#luCard .luList li { font: 600 var(--fs-sm)/1.4 var(--font); color: #dff7e6;
  background: rgba(46, 143, 87, .2); border: 1px solid var(--success-deep);
  border-radius: 9px; padding: 9px 12px; }
#luCard .luList li.shop { color: #e3dcff; background: rgba(90, 79, 176, .28); border-color: var(--accent-hi); }
#luCard .luMax { font: var(--fs-sm)/1.5 var(--font); color: var(--text-dim); margin-bottom: 14px; }
#luCard .luJournal { font: var(--fs-xs) var(--font); color: var(--text-faint); margin-top: 10px; }
#luCard .luClose { border: 0; border-radius: 10px; background: var(--grad-go); color: #0d2b16;
  font: 800 var(--fs-md) var(--font); padding: 11px 28px; min-height: 44px; cursor: pointer;
  box-shadow: 0 3px 0 #2a7a40; transition: transform var(--t-fast), box-shadow var(--t-fast); }
#luCard .luClose:active { transform: translateY(2px); box-shadow: 0 1px 0 #2a7a40; }

/* ============================== 20 · SOUND POPOVER + JUKEBOX (injected) ============================== */
#soundPanel { position: fixed; top: var(--toast-top, 64px); right: 12px; z-index: 60;
  background: rgba(22, 17, 36, .97); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 14px 16px; min-width: 240px;
  box-shadow: var(--shadow-2); font: 600 var(--fs-sm) var(--font); color: var(--text); }
#soundPanel h4 { margin: 0 0 10px; font: 700 var(--fs-md) var(--font); color: var(--coin); }
#soundPanel .row { display: flex; align-items: center; gap: 10px; margin: var(--sp-2) 0; min-height: 32px; }
#soundPanel input[type=range] { flex: 1; accent-color: var(--coin); }
#soundPanel .muteRow { cursor: pointer; user-select: none; }
#soundPanel .val { min-width: 40px; text-align: right; color: var(--coin); }

#musicPicker { z-index: 50; }
#mpCard { --ac: var(--accent); width: min(380px, 92vw);
  padding: var(--sp-4) 18px; display: block; overflow-y: auto; }
#mpCard h3 { margin: 0 0 10px; font: 700 var(--fs-lg) var(--font); color: #e7dcff;
  display: flex; align-items: center; gap: var(--sp-2); }
#mpCard h3 .mpClose { margin-left: auto; width: 36px; height: 36px; border: 0;
  border-radius: var(--r-sm); background: var(--raised); color: var(--text);
  cursor: pointer; font: 700 var(--fs-sm) var(--font); transition: background var(--t-fast); }
#mpCard h3 .mpClose:hover { background: var(--raised-hi); }
.mpTrk { display: flex; align-items: center; width: 100%; margin: 5px 0; padding: 11px 12px;
  min-height: 44px; border: 1px solid #4a4276; border-radius: 10px; background: #322b54;
  color: #eee6ff; cursor: pointer; font: 600 var(--fs-sm) var(--font);
  transition: transform var(--t-fast), border-color var(--t-fast); }
.mpTrk:hover { transform: translateY(-1px); border-color: var(--focus); }
.mpTrk.on { border-color: var(--focus); background: #3f3570; }
.mpTrk .mpDot { margin-left: auto; color: var(--focus); font-size: var(--fs-xs); }

/* ============================== 21 · HELP — THE ILLUSTRATED GUIDE (Phase F2) ============================== */
/* Two surfaces, one look: the in-game ❓ modal (#helpModal, game/help.js) and the standalone
   infographic page (help.html → body.helpPage), both rendering game/help-content.js sections.
   Everything below consumes the §1 tokens — the guide must read native to the family. */
:root { --ac-help: #7de8dc; }                       /* the help teal (franchise-badge hue) */

#btnHelp.on { background: var(--ac-help); color: var(--text-on-accent); }
/* first-boot beacon: a soft ring pulse, a handful of beats then done (one session, no nagging) */
@keyframes helpBeacon {
  0%, 100% { box-shadow: var(--shadow-1); }
  50% { box-shadow: 0 0 0 7px rgba(125, 232, 220, .28), var(--shadow-1); }
}
#btnHelp.hint { animation: helpBeacon 2s var(--ease) 6; }

#helpModal { z-index: 50; }
#helpCard { --ac: var(--ac-help); width: min(720px, 94vw); }
#helpHead .hHeadTxt { min-width: 0; }
#helpHead .rcSub { margin-top: 2px; }
/* section nav — the pills ARE the modal's chrome: one row, a soft rule under it, nothing else */
#helpNav {
  display: flex; gap: 6px; padding: var(--sp-3) var(--sp-4) var(--sp-2); flex: 0 0 auto;
  overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--line-soft);
}
#helpNav::-webkit-scrollbar { display: none; }
.hDot {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  font: 700 var(--fs-xs) var(--font); padding: 7px 11px; min-height: 34px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--card); color: var(--text-dim); cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.hDot:hover { background: var(--raised); }
.hDot.on {
  background: color-mix(in srgb, var(--ac-help) 18%, var(--card));
  border-color: var(--ac-help); color: var(--text);
}
.hDot .hDotIco { font-size: 14px; line-height: 1; }
#helpBody {
  position: relative;                              /* offsetTop anchor for the scroll-spy */
  padding: 14px var(--sp-4) var(--sp-4); overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--sp-3);
}

/* ---- the section card (modal + standalone share every rule below) ---- */
.hCard {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--sp-4) 18px;
}
.hHead { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.hIcon {
  width: 40px; height: 40px; flex: 0 0 40px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 20px;
  background: color-mix(in srgb, var(--ac-help) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--ac-help) 32%, transparent);
  border-radius: 10px;
}
.hHeadTxt { min-width: 0; }
.hKick {
  font: 800 var(--fs-xs) var(--font); letter-spacing: .9px; color: var(--ac-help);
  text-transform: uppercase;
}
.hTag { font: 700 var(--fs-md)/1.4 var(--font); color: var(--text); margin-top: 3px; }
.hBody { display: flex; flex-direction: column; gap: var(--sp-3); }
.hFoot { font: var(--fs-xs)/1.6 var(--font); color: var(--text-dim); }
.hFoot b { color: var(--coin-hi); }
/* sprites: real game art, gently grounded */
.hSpr {
  display: block; object-fit: contain; flex: 0 0 auto;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
}
.hSprSm { width: 40px; height: 34px; }
.hGate {
  font: 800 var(--fs-xs) var(--font); color: var(--text-on-accent);
  background: var(--grad-gold); padding: 1px 7px; border-radius: 6px; white-space: nowrap;
}

/* §1 THE LOOP — four steps + arrows */
.hFlow { display: flex; align-items: stretch; gap: 4px; flex-wrap: wrap; }
.hStep {
  flex: 1 1 0; min-width: 108px; display: flex; flex-direction: column; align-items: center;
  gap: 6px; background: var(--inset); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); padding: 12px 8px 10px; text-align: center;
}
.hStep .hSpr { height: 46px; max-width: 84px; }
.hStepName { font: 800 var(--fs-sm) var(--font); color: var(--text); letter-spacing: .6px; }
.hStepSub { font: var(--fs-xs)/1.4 var(--font); color: var(--text-faint); }
.hArrow { align-self: center; flex: 0 0 auto; font: 800 var(--fs-2xl) var(--font); color: var(--ac-help); }
.hArrow.hLoopBack { color: var(--text-faint); }

/* §2 / §6 ladders — one rung per row */
.hLadder { display: flex; flex-direction: column; gap: 7px; }
.hRung {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--inset); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); padding: 9px 12px;
}
.hRung .hSpr { width: 44px; height: 36px; }
.hRungName { font: 800 var(--fs-sm) var(--font); color: var(--text); min-width: 72px; white-space: nowrap; }
.hRungWant { font: var(--fs-xs)/1.45 var(--font); color: var(--text-dim); flex: 1; min-width: 0; }
.hTip {
  font: 700 var(--fs-xs) var(--font); color: var(--coin-hi); white-space: nowrap;
  background: rgba(255, 210, 122, .1); border: 1px solid rgba(255, 210, 122, .25);
  padding: 3px 9px; border-radius: var(--r-pill);
}
.hRung.vip { border-color: #8a7430; background: rgba(138, 116, 48, .14); }
.hVenues { display: flex; gap: 6px; flex-wrap: wrap; }
.hVenue {
  flex: 1 1 110px; text-align: center; background: var(--inset);
  border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 7px 4px 8px;
}
.hVenue b { display: block; font: 800 var(--fs-xs) var(--font); color: var(--text); }
.hVenue i { display: block; font: var(--fs-xs) var(--font); font-style: normal; color: var(--text-faint); margin-top: 2px; }
.hVenue.gold { border-color: #8a7430; }
.hVenue.gold b { color: var(--coin-hi); }

/* §3 LEVELING — serve → GP bar mock, shower chips, frontier tease */
.hGpRow { display: flex; align-items: center; gap: var(--sp-3); }
.hGpArrow { font: 800 var(--fs-2xl) var(--font); color: var(--ac-help); flex: 0 0 auto; }
.hGpBar { flex: 1; min-width: 0; }
.hGpTop { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: 4px; }
.hLvlBadge {
  font: 800 var(--fs-xs) var(--font); color: var(--text-on-accent);
  background: var(--grad-gold); padding: 3px 9px; border-radius: var(--r-sm);
}
.hGpNext { font: var(--fs-xs) var(--font); color: var(--text-faint); }
.hGpSub { font: var(--fs-xs) var(--font); color: var(--text-faint); margin-top: 5px; }
.hChips { display: flex; flex-wrap: wrap; gap: 6px; }
.hChips span {
  font: var(--fs-xs) var(--font); color: #bfead0;
  background: rgba(46, 143, 87, .18); border: 1px solid var(--success-deep);
  border-radius: 7px; padding: 4px 9px;
}
.hChips span.shop { color: #e3dcff; background: rgba(90, 79, 176, .25); border-color: var(--accent-hi); }
.hFrontier {
  display: flex; align-items: center; gap: var(--sp-3);
  border: 1px dashed var(--accent-hi); border-radius: var(--r-md); padding: 10px 14px;
}
.hFrontier .hSpr { height: 60px; }
.hFrontier b { font: 800 var(--fs-sm) var(--font); color: #b6a8ff; letter-spacing: .5px; }
.hFrontierSub { font: var(--fs-xs)/1.5 var(--font); color: var(--text-faint); margin-top: 3px; }

/* §4 THE KITCHEN LADDER — six tiers in a row */
.hStoves { display: flex; align-items: flex-end; gap: 2px; flex-wrap: wrap; }
.hStove {
  flex: 1 1 0; min-width: 86px; text-align: center;
  background: var(--inset); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); padding: 9px 4px 8px;
}
.hStove .hSpr { height: 54px; max-width: 74px; margin: 0 auto 4px; }
.hStove i { display: block; font: 800 var(--fs-xs) var(--font); font-style: normal; color: var(--text); white-space: nowrap; }
.hStove u { display: block; text-decoration: none; font: 700 var(--fs-xs) var(--font); color: var(--text-faint); margin-top: 2px; }
.hStove.t6 { border-color: var(--accent-hi); background: rgba(90, 79, 176, .14); }
.hArrow.hStoveArrow { font-size: var(--fs-lg); align-self: center; }

/* §5 THE LARDER — the grow/buy/win trio + the Perfect strip */
.hTrio { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 9px; }
.hSrc {
  background: var(--inset); border: 1px solid var(--line-soft); border-radius: var(--r-md);
  padding: 13px 12px; text-align: center;
}
.hSrc .hSpr { height: 48px; max-width: 110px; margin: 0 auto 8px; }
.hSrcName { font: 800 var(--fs-sm) var(--font); color: var(--text); letter-spacing: .6px; }
.hSrcSub { font: var(--fs-xs)/1.5 var(--font); color: var(--text-faint); margin-top: 5px; }
.hPerfect {
  display: flex; align-items: center; gap: var(--sp-3);
  background: rgba(46, 143, 87, .12); border: 1px solid var(--success-deep);
  border-radius: var(--r-md); padding: 10px 13px;
  font: var(--fs-xs)/1.55 var(--font); color: var(--text-dim);
}
.hPerfect b { color: #bfead0; }

/* §7 THE CHASE — the two crowns */
.hChase { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 9px; }
.hChaseCard {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--inset); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-3) 14px;
}
.hChaseCard .hSpr { height: 64px; max-width: 64px; }
.hChaseCard.gold { border-color: #8a7430; }
.hChaseCard.teal { border-color: #2f7a72; }
.hChaseName { font: 800 var(--fs-sm) var(--font); color: var(--coin-hi); letter-spacing: .6px; }
.hChaseCard.teal .hChaseName { color: #7de8dc; }
.hChaseSub { font: var(--fs-xs)/1.55 var(--font); color: var(--text-dim); margin-top: 4px; }
.hChaseSub b { color: var(--text); }

/* ---- phone (one column, bottom-sheet card like the other modals) ---- */
@media (max-width: 560px) {
  #helpCard {
    width: 100vw; max-width: 100vw; border-radius: 14px 14px 0 0;
    max-height: calc(100vh - var(--safe-t, 0px));
    max-height: calc(100dvh - var(--safe-t, 0px));
    margin-top: var(--safe-t, 0px);
  }
  #helpBody { padding-bottom: calc(20px + var(--safe-b, 0px)); }
  .hFlow .hArrow { display: none; }                /* steps wrap 2×2 — arrows would dangle */
  .hStep { min-width: 42%; }
  .hArrow.hStoveArrow { display: none; }
  .hStove { min-width: 30%; }
  /* rung rows re-stack: sprite + name + tip pill on the first line, the description on its
     own full-width line below (a single shared line would starve the text to a word column) */
  .hRungName { min-width: 60px; }
  .hRung { flex-wrap: wrap; row-gap: 4px; }
  .hRung .hTip { margin-left: auto; }
  .hRungWant { flex: 1 1 100%; order: 5; }
}
body.coarse #helpHead .hClose { width: 44px; height: 44px; }
body.coarse .hDot { min-height: 40px; }

/* ---- the standalone infographic page (help.html) ---- */
body.helpPage {
  overflow: auto; height: auto;
  background:
    radial-gradient(1100px 460px at 50% -140px, #2b2344, transparent),
    var(--surface-0);
}
#helpRoot {
  width: min(1000px, 96vw); margin: 0 auto;
  padding: 34px 0 46px; display: flex; flex-direction: column; gap: var(--sp-4);
}
#helpSections { display: flex; flex-direction: column; gap: var(--sp-4); }
.helpMast { text-align: center; padding: 6px 0 8px; }
.hmKick {
  font: 800 var(--fs-sm) var(--font); letter-spacing: 4px; color: var(--ac-help);
}
.hmTitle {
  margin: 6px 0 8px; font: 800 34px var(--font); color: var(--text);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .35);
}
.hmSub { font: var(--fs-md) var(--font); color: var(--text-dim); }
.helpFootnote {
  text-align: center; font: 700 var(--fs-sm) var(--font); color: var(--text-faint);
  padding: 4px 0 6px;
}
/* the page gives sections a touch more air than the modal */
body.helpPage .hCard { padding: 22px 24px; box-shadow: var(--shadow-1); }
body.helpPage .hTag { font-size: var(--fs-lg); }

/* ==================== MARKET SUPPLIER + INGREDIENT WAYFINDING ==================== */
/* (owner report: "It says I need chicken, butter… I don't know how to get that")    */
/* full-width section headers inside #marketGrid: stall (bargains) vs supplier (always stocked) */
.mkSection { grid-column: 1 / -1; margin-top: var(--sp-2); }
.mkSection:first-child { margin-top: 0; }
.mkSecTitle { font: 800 var(--fs-md) var(--font); color: var(--text); letter-spacing: .3px; }
.mkSecSub { font: var(--fs-xs)/1.5 var(--font); color: var(--text-faint); margin-top: 2px; }
/* supplier rows: same .mkSlot card family; the flat price rides IN the buy buttons so the
   meta line ("stars · in larder: N") keeps the full card width */
.supRow .mkMeta { flex: 1 1 auto; }
.mkBuyRow { display: flex; gap: var(--sp-2); }
.mkBuyRow .mkBuy { flex: 1; padding: 10px 6px; font-size: var(--fs-xs); white-space: nowrap; }
/* deep-link landing pulse (Menu chip → Market.openFor): a coin-gold ring that breathes twice */
@keyframes mkPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 216, 107, .8); }
  70%  { box-shadow: 0 0 0 13px rgba(255, 216, 107, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 216, 107, 0); }
}
.mkSlot.pulse { border-color: var(--coin-hi); animation: mkPulse .9s var(--ease) 2; }
/* menu larder chips are now real buttons (click → market deep-link) — keep the chip look,
   add a dotted underline + hover so they read as tappable */
button.lardIng {
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 3px;
}
button.lardIng:hover { color: var(--coin-hi); }
button.lardIng.out:hover { color: var(--danger); filter: brightness(1.2); }
/* the collapsed "restock" pill is a button too (same deep-link) */
button.dishRestock { cursor: pointer; transition: filter var(--t-fast); }
button.dishRestock:hover { filter: brightness(1.2); }
/* keep the supplier row's meta line ("★★★ · in larder: N") on one line beside the docked price */
.supRow .mkRar { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }