/* exp-gamify.css
   Stitch "Soft-Modernist" reskin for the IN-GAME GAMIFICATION and RETENTION
   overlays. This is the sibling of exp-collections.css (dex + badges) and
   exp-social-map.css (crew, chat, guild): it finishes the set by relighting the
   five MMO / retention screens that were still wearing the old dark "gold on
   near-black" panel look from main.css. Load it LAST (after exp-structure.css)
   so it wins for these roots.

   Screens reskinned (each keyed on its real overlay root so nothing else is
   touched, and never on .platform-screen so the platform front door is safe):

     - Player profile + progression   .overlay-card.prog-card    (progression.js)
     - Factions + reputation          .overlay-card.faction-card (factions.js)
     - Pets + mounts (the stable)     .overlay-card.pets-card    (pets.js)
     - Voyage Pass reward track       .overlay-card.pass-card    (voyage-pass.js)
     - Field research daily tasks     .overlay-card.fr-card      (field-research.js)

   Two more screens from the gamification set already carry this light chrome
   from the sibling files and are NOT re-shelled here (that would fight them):
     - Achievements catalog  .badges-card  is styled in exp-collections.css
     - Loot / guild perks    .guild-card   is styled in exp-social-map.css
   For those two, this file adds only small, purely additive, mock-faithful
   touches (a soft amber count chip on the badges screen, a connected perk-rail
   on the guild ladder) that the sibling files do not provide.

   Design system (fixed light chrome, per-pack amber accent), identical in spirit
   to the sibling exp-* files so the whole in-game surface reads as one system:
     - LIGHT surfaces   #F9F9F7 page / scrim card, #FFFFFF cards, #F1F1EF variant,
                        #E2E8F0 hairline
     - INK              #1E293B ink, #64748B muted slate  (dark text on light)
     - ACCENT           var(--amber) fill for bars + primary pills; #8A5A00
                        "accent ink" for amber TEXT on white (raw amber fails
                        contrast on white, so text uses the darker tone)
     - LOCKED           neutral grey (#94A3B8 text on #F1F1EF), never a faded gold
     - Type             Plus Jakarta Sans (--font-head) + Be Vietnam Pro (--font-body)
     - Geometry         24px cards, 16px inner cards, 9999px pills, gentle lift
                        0 4px 20px rgba(0,0,0,.05), 44px minimum tap targets

   Tokens use a private --g-* prefix so they never collide with the --exp-* /
   --c-* token sets that the sibling files declare on the shared badges / guild
   roots. No em dashes or en dashes anywhere. */

/* ================================================================== *
 *  0. Shared Soft-Modernist tokens for every gamification root.
 *     Declared on each real root so a screen is styled whether or not it
 *     sits inside a specific theme wrapper (robust + reversible).
 * ================================================================== */
.prog-card,
.faction-card,
.pets-card,
.pass-card,
.fr-card {
  --g-surface: #F9F9F7;     /* warm off-white modal stage           */
  --g-card: #FFFFFF;        /* pure white inner card                */
  --g-variant: #F1F1EF;     /* faintly deeper neutral fill / track  */
  --g-ink: #1E293B;         /* deep slate ink (titles + body)       */
  --g-muted: #64748B;       /* readable muted slate                 */
  --g-hairline: #E2E8F0;    /* hairline outline + separators        */
  --g-locked: #94A3B8;      /* neutral grey for locked / unearned   */
  --g-accent: var(--amber, #f59e0b);          /* bar + pill fill    */
  --g-on-accent: var(--on-amber, #2a1a00);    /* text on amber fill */
  --g-accent-ink: #8A5A00;  /* amber as readable TEXT on white      */
  --g-accent-soft: #FDF1DD; /* soft amber tint for chips + rings    */
  --g-soft-tile: #FFF7EA;   /* soft amber icon-tile background      */
  --g-lift: 0 4px 20px rgba(0, 0, 0, 0.05);
  --g-lift-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --g-radius: 24px;
  --g-radius-md: 16px;
  --g-pill: 9999px;
}

/* ================================================================== *
 *  1. Shared light card shell for the five roots.
 *     Relight the dark .overlay-card gradient to a warm off-white sheet,
 *     with a clean hairline header, soft close pill and slate typography.
 * ================================================================== */
.overlay-card.prog-card,
.overlay-card.faction-card,
.overlay-card.pets-card,
.overlay-card.pass-card,
.overlay-card.fr-card {
  background: var(--g-surface);
  color: var(--g-ink);
  border: 1px solid var(--g-hairline);
  border-radius: var(--g-radius);
  box-shadow: 0 1px 3px rgba(26, 28, 27, 0.06), 0 24px 60px rgba(26, 28, 27, 0.22);
  font-family: var(--font-body);
}

.prog-card .menu-header,
.faction-card .menu-header,
.pets-card .menu-header,
.pass-card .menu-header,
.fr-card .menu-header {
  background: var(--g-surface);
  border-bottom: 1px solid var(--g-hairline);
}
.prog-card .panel-title,
.faction-card .panel-title,
.pets-card .panel-title,
.pass-card .panel-title,
.fr-card .panel-title {
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--g-ink);
  text-transform: none;
}
.prog-card .panel-sub,
.faction-card .panel-sub,
.pets-card .panel-sub,
.pass-card .panel-sub,
.fr-card .panel-sub {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--g-ink);
  margin: 16px 0 8px;
  text-transform: none;
}
.prog-card .panel-note,
.faction-card .panel-note,
.pets-card .panel-note,
.pass-card .panel-note,
.fr-card .panel-note { color: var(--g-muted); }

/* Soft close pill, consistent with the dex / crew cards. */
.prog-card .menu-close,
.faction-card .menu-close,
.pets-card .menu-close,
.pass-card .menu-close,
.fr-card .menu-close {
  width: 44px;
  height: 44px;
  min-height: 44px;
  border-radius: var(--g-pill);
  border: 1.5px solid var(--g-hairline);
  background: var(--g-card);
  color: var(--g-ink);
}
.prog-card .menu-close:hover,
.prog-card .menu-close:focus-visible,
.faction-card .menu-close:hover,
.faction-card .menu-close:focus-visible,
.pets-card .menu-close:hover,
.pets-card .menu-close:focus-visible,
.pass-card .menu-close:hover,
.pass-card .menu-close:focus-visible,
.fr-card .menu-close:hover,
.fr-card .menu-close:focus-visible {
  border-color: var(--g-accent);
  background: var(--g-accent-soft);
}

/* Buttons on the light cards: amber pill primary, white outline pill secondary. */
.prog-card .btn-amber,
.faction-card .btn-amber,
.pets-card .btn-amber,
.pass-card .btn-amber,
.fr-card .btn-amber {
  background: var(--g-accent);
  color: var(--g-on-accent);
  border: none;
  border-radius: var(--g-pill);
  min-height: 44px;
  font-family: var(--font-body);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(133, 83, 0, 0.18), 0 10px 22px rgba(245, 158, 11, 0.24);
}
.prog-card .btn-small,
.faction-card .btn-small,
.pets-card .btn-small,
.pass-card .btn-small,
.fr-card .btn-small {
  background: var(--g-card);
  color: var(--g-ink);
  border: 1.5px solid var(--g-hairline);
  border-radius: var(--g-pill);
  min-height: 44px;
  font-family: var(--font-body);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(26, 28, 27, 0.04);
}
.prog-card .btn-small:hover,
.faction-card .btn-small:hover,
.pets-card .btn-small:hover,
.pass-card .btn-small:hover,
.fr-card .btn-small:hover {
  border-color: var(--g-accent);
  background: var(--g-accent-soft);
}

/* Shared progress-bar look (level XP, reputation, guild renown style): a soft
   neutral track with a confident amber fill and fully rounded ends. */
.prog-bar,
.faction-bar {
  height: 10px;
  border-radius: var(--g-pill);
  background: var(--g-variant);
  border: 1px solid var(--g-hairline);
  overflow: hidden;
  margin: 10px 0 6px;
}
.prog-bar-fill,
.faction-bar-fill {
  display: block;
  height: 100%;
  background: var(--g-accent);
  border-radius: var(--g-pill);
}

/* ================================================================== *
 *  2. PLAYER PROFILE + PROGRESSION  ~  js/components/progression.js
 *     Root: .overlay-card.prog-card
 *     Mock: player_profile_progress  (big level ring, title, XP bar,
 *           Levels and Titles list with earned / in-progress / locked rows).
 *     Inner: .prog-level-badge [.prog-level-n / .prog-level-word], .prog-title,
 *            .prog-bar > .prog-bar-fill, .prog-xp,
 *            .prog-ladder > .prog-ladder-row(.have) [.prog-ladder-lvl /
 *            .prog-ladder-title / .prog-ladder-check].
 * ================================================================== */

/* The level disc becomes the mock's bold amber ring: thick accent ring, clean
   white centre, a big slate number and a quiet "Level" caption. */
.prog-card .prog-level-badge {
  width: 132px;
  height: 132px;
  margin: 14px auto 6px;
  border-radius: 50%;
  background: var(--g-card);
  border: 8px solid var(--g-accent);
  box-shadow: var(--g-lift);
}
.prog-card .prog-level-n {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 42px;
  line-height: 1;
  color: var(--g-ink);
}
.prog-card .prog-level-word {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--g-muted);
}
.prog-card .prog-title {
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 22px;
  color: var(--g-ink);
  margin: 6px 0 12px;
}
/* XP progress readout in the darker accent ink so it stays legible on white. */
.prog-card .prog-xp {
  font-size: 13px;
  font-weight: 700;
  color: var(--g-accent-ink);
  margin: 2px 0 8px;
}

/* Title ladder: hairline list rows. Earned = soft amber tint + amber check.
   Locked (no .have) = neutral grey, never a faded gold. */
.prog-card .prog-ladder { gap: 8px; margin-top: 6px; }
.prog-card .prog-ladder-row {
  min-height: 56px;
  padding: 10px 14px;
  border-radius: var(--g-radius-md);
  background: var(--g-card);
  border: 1px solid var(--g-hairline);
  box-shadow: var(--g-lift-sm);
  opacity: 1;
}
.prog-card .prog-ladder-row.have {
  background: var(--g-accent-soft);
  border-color: var(--g-accent);
}
.prog-card .prog-ladder-row:not(.have) {
  background: var(--g-variant);
  border-color: var(--g-hairline);
  box-shadow: none;
}
.prog-card .prog-ladder-lvl {
  flex: 0 0 3rem;
  font-size: 12px;
  font-weight: 700;
  color: var(--g-muted);
}
.prog-card .prog-ladder-row.have .prog-ladder-lvl { color: var(--g-accent-ink); }
.prog-card .prog-ladder-title { flex: 1 1 auto; font-weight: 700; color: var(--g-ink); }
.prog-card .prog-ladder-row:not(.have) .prog-ladder-title { color: var(--g-locked); }
.prog-card .prog-ladder-check { flex: 0 0 auto; color: var(--g-accent-ink); font-weight: 800; }

/* ================================================================== *
 *  3. FACTIONS + REPUTATION  ~  js/components/factions.js
 *     Root: .overlay-card.faction-card
 *     Mock: factions_reputation  (patron cards, standing labels, progress bars,
 *           a standings ladder).
 *     Inner (pledge picker): .faction-grid > .faction-pick [.faction-emoji /
 *            .faction-name / .faction-blurb].
 *     Inner (chosen patron): .faction-current [.faction-cur-emoji /
 *            .faction-cur-name / .faction-cur-tier], .faction-bar > fill,
 *            .faction-rep, .faction-ladder > .faction-ladder-row(.have)
 *            [.faction-ladder-name / .faction-ladder-rep / .faction-ladder-check].
 * ================================================================== */

/* Pledge picker: each patron is a white feature card with a soft amber icon disc. */
.faction-card .faction-grid { gap: 12px; margin-top: 10px; }
.faction-card .faction-pick {
  gap: 8px;
  padding: 16px 12px;
  border-radius: var(--g-radius-md);
  background: var(--g-card);
  border: 1px solid var(--g-hairline);
  box-shadow: var(--g-lift-sm);
  color: var(--g-ink);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.faction-card .faction-pick:hover,
.faction-card .faction-pick:focus-visible {
  transform: translateY(-2px);
  border-color: var(--g-accent);
  box-shadow: 0 2px 6px rgba(26, 28, 27, 0.06), 0 16px 34px rgba(245, 158, 11, 0.14);
}
.faction-card .faction-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--g-radius-md);
  background: var(--g-soft-tile);
  font-size: 28px;
}
.faction-card .faction-name { font-family: var(--font-head); font-weight: 800; color: var(--g-ink); }
.faction-card .faction-blurb { font-size: 12px; color: var(--g-muted); line-height: 1.4; }

/* The chosen patron, shown as a white row with the patron disc and standing. */
.faction-card .faction-current {
  align-items: center;
  gap: 14px;
  margin: 12px 0;
  padding: 16px;
  border-radius: var(--g-radius-md);
  background: var(--g-card);
  border: 1px solid var(--g-hairline);
  box-shadow: var(--g-lift-sm);
}
.faction-card .faction-cur-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--g-radius-md);
  background: var(--g-soft-tile);
  font-size: 30px;
  flex: 0 0 auto;
}
.faction-card .faction-cur-name { font-family: var(--font-head); font-weight: 800; font-size: 18px; color: var(--g-ink); }
/* Standing label reads as a small amber caps line (the mock's TRUSTED ALLY). */
.faction-card .faction-cur-tier {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--g-accent-ink);
}
.faction-card .faction-rep { font-size: 13px; font-weight: 600; color: var(--g-muted); }

/* Standings ladder: hairline rows, earned tinted amber with an amber check. */
.faction-card .faction-ladder { gap: 8px; margin-top: 6px; }
.faction-card .faction-ladder-row {
  min-height: 48px;
  padding: 8px 14px;
  border-radius: var(--g-radius-md);
  background: var(--g-variant);
  border: 1px solid var(--g-hairline);
  opacity: 1;
}
.faction-card .faction-ladder-row.have {
  background: var(--g-accent-soft);
  border-color: var(--g-accent);
}
.faction-card .faction-ladder-name { flex: 1 1 auto; font-weight: 700; color: var(--g-locked); }
.faction-card .faction-ladder-row.have .faction-ladder-name { color: var(--g-ink); }
.faction-card .faction-ladder-rep { font-size: 12px; color: var(--g-muted); }
.faction-card .faction-ladder-row.have .faction-ladder-rep { color: var(--g-accent-ink); font-weight: 700; }
.faction-card .faction-ladder-check { color: var(--g-accent-ink); font-weight: 800; }

/* ================================================================== *
 *  4. PETS + MOUNTS (the stable)  ~  js/components/pets.js
 *     Root: .overlay-card.pets-card
 *     Mock: pets_mounts  (active companion highlight, then a grid where owned =
 *           full colour cards and locked = neutral grey lock + requirement).
 *     Inner: .pets-active, .pets-grid > .pets-cell(.has)(.active)
 *            [.pets-emoji / .pets-name / .pets-kind].
 * ================================================================== */

/* Active buddy: a soft amber-tinted highlight card, not the old gold text line. */
.pets-card .pets-active {
  display: block;
  margin: 10px 0;
  padding: 12px 16px;
  border-radius: var(--g-radius-md);
  background: var(--g-accent-soft);
  border: 1px solid var(--g-accent);
  color: var(--g-accent-ink);
  font-family: var(--font-head);
  font-weight: 800;
}

.pets-card .pets-grid { gap: 12px; margin-top: 8px; }
.pets-card .pets-cell {
  padding: 14px 8px;
  border-radius: var(--g-radius-md);
  background: var(--g-card);
  border: 1px solid var(--g-hairline);
  box-shadow: var(--g-lift-sm);
  opacity: 1;                         /* locked reads via grey, not fade */
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
/* Locked cells: neutral grey silhouette (the JS shows a lock glyph + a hint). */
.pets-card .pets-cell:not(.has) {
  background: var(--g-variant);
  border-color: var(--g-hairline);
  box-shadow: none;
  color: var(--g-locked);
}
.pets-card .pets-cell:not(.has) .pets-emoji { filter: grayscale(1); opacity: 0.7; }
.pets-card .pets-cell:not(.has) .pets-name,
.pets-card .pets-cell:not(.has) .pets-kind { color: var(--g-locked); }
/* Owned cells lift and highlight on hover; the active buddy keeps an amber ring. */
.pets-card .pets-cell.has { cursor: pointer; }
.pets-card .pets-cell.has:hover,
.pets-card .pets-cell.has:focus-visible {
  transform: translateY(-2px);
  border-color: var(--g-accent);
  box-shadow: 0 2px 6px rgba(26, 28, 27, 0.06), 0 16px 34px rgba(245, 158, 11, 0.14);
}
.pets-card .pets-cell.active {
  background: var(--g-accent-soft);
  border-color: var(--g-accent);
  box-shadow: inset 0 0 0 2px var(--g-accent), var(--g-lift-sm);
}
.pets-card .pets-emoji { font-size: 32px; line-height: 1; }
.pets-card .pets-name { font-size: 13px; font-weight: 800; color: var(--g-ink); margin-top: 6px; }
/* The Pet / Mount kind (or the unlock hint) as a small caps label. */
.pets-card .pets-kind {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--g-muted);
}

/* ================================================================== *
 *  5. VOYAGE PASS reward track  ~  js/components/voyage-pass.js
 *     Root: .overlay-card.pass-card
 *     Mock: voyage_pass_rewards  (a tier track where claimed = grey + check,
 *           ready = white amber-framed with a Claim pill, locked = neutral grey;
 *           milestones stand out).
 *     Inner: .pass-list > .pass-row(.ready)(.claimed)(.locked)(.milestone)
 *            [.pass-tier, .pass-main > .pass-reward / .pass-req],
 *            .pass-claim (a .btn-amber), .pass-check.
 * ================================================================== */
.pass-card .pass-list { gap: 10px; margin-top: 8px; }
.pass-card .pass-row {
  gap: 12px;
  padding: 12px 14px;
  min-height: 64px;
  border-radius: var(--g-radius-md);
  background: var(--g-card);
  border: 1px solid var(--g-hairline);
  box-shadow: var(--g-lift-sm);
  opacity: 1;
}
/* Ready to claim: white card, amber frame (the mock's active tier). */
.pass-card .pass-row.ready {
  border-color: var(--g-accent);
  box-shadow: 0 2px 6px rgba(26, 28, 27, 0.06), 0 14px 30px rgba(245, 158, 11, 0.16);
}
/* Already claimed: quiet neutral grey, done. */
.pass-card .pass-row.claimed {
  background: var(--g-variant);
  border-color: var(--g-hairline);
  box-shadow: none;
}
/* Not yet unlocked: neutral grey locked. */
.pass-card .pass-row.locked {
  background: var(--g-variant);
  border-color: var(--g-hairline);
  box-shadow: none;
}
/* Milestone tiers keep a bold amber marker down the leading edge. */
.pass-card .pass-row.milestone { border-left: 4px solid var(--g-accent); }

/* The tier chip becomes a round pill badge; amber when the tier is claimable. */
.pass-card .pass-tier {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border-radius: var(--g-pill);
  background: var(--g-variant);
  color: var(--g-muted);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 13px;
}
.pass-card .pass-row.ready .pass-tier { background: var(--g-accent); color: var(--g-on-accent); }
.pass-card .pass-row.claimed .pass-tier { background: var(--g-hairline); color: var(--g-muted); }
.pass-card .pass-reward { font-size: 14px; font-weight: 700; color: var(--g-ink); }
.pass-card .pass-row.locked .pass-reward,
.pass-card .pass-row.claimed .pass-reward { color: var(--g-locked); }
.pass-card .pass-req { font-size: 12px; color: var(--g-muted); margin-top: 2px; }
.pass-card .pass-row.ready .pass-req { color: var(--g-accent-ink); font-weight: 700; }
/* The Claim button is already a .btn-amber (styled above). The done check: */
.pass-card .pass-check { flex: 0 0 auto; color: var(--g-accent-ink); font-weight: 800; font-size: 18px; }

/* ================================================================== *
 *  6. FIELD RESEARCH daily tasks  ~  js/components/field-research.js
 *     Root: .overlay-card.fr-card
 *     Mock: field_research_tasks  (quest cards with a progress bar, an XP line
 *           and a Claim pill; complete = amber, claimed = done).
 *     Inner: .fr-row(.done)(.claimed) [.fr-emoji, .fr-main > .fr-text / .fr-prog],
 *            .fr-todo-tag, .fr-claimed-tag, .fr-summary. The Claim control is a
 *            .btn-small; here it is lifted to an amber pill to match the mock.
 * ================================================================== */
.fr-card .fr-body { display: flex; flex-direction: column; gap: 12px; }
.fr-card .fr-row {
  gap: 14px;
  padding: 16px;
  margin-bottom: 0;
  border-radius: var(--g-radius-md);
  background: var(--g-card);
  border: 1px solid var(--g-hairline);
  box-shadow: var(--g-lift-sm);
}
/* Complete and awaiting claim: amber frame. */
.fr-card .fr-row.done {
  border-color: var(--g-accent);
  box-shadow: 0 2px 6px rgba(26, 28, 27, 0.06), 0 14px 30px rgba(245, 158, 11, 0.16);
}
/* Claimed: settle to a quiet neutral card. */
.fr-card .fr-row.claimed {
  background: var(--g-variant);
  border-color: var(--g-hairline);
  box-shadow: none;
}
/* The task glyph sits in a soft amber tile (the mock's rounded icon square). */
.fr-card .fr-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--g-soft-tile);
  font-size: 24px;
  flex: 0 0 auto;
}
.fr-card .fr-text { font-family: var(--font-head); font-weight: 800; font-size: 16px; color: var(--g-ink); }
.fr-card .fr-prog { font-size: 13px; color: var(--g-muted); margin-top: 4px; }
.fr-card .fr-row.done .fr-prog { color: var(--g-accent-ink); font-weight: 700; }
/* "In progress" tag reads as a soft neutral chip. */
.fr-card .fr-todo-tag {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: var(--g-pill);
  background: var(--g-variant);
  color: var(--g-muted);
  font-size: 12px;
  font-weight: 700;
}
/* Claimed tag reads as a soft amber "done" chip. */
.fr-card .fr-claimed-tag {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: var(--g-pill);
  background: var(--g-accent-soft);
  color: var(--g-accent-ink);
  font-size: 12px;
  font-weight: 700;
}
/* Lift the Claim button (a .btn-small in the JS) to a solid amber pill CTA. */
.fr-card .fr-row .btn-small {
  background: var(--g-accent);
  color: var(--g-on-accent);
  border: none;
  box-shadow: 0 1px 2px rgba(133, 83, 0, 0.18), 0 10px 22px rgba(245, 158, 11, 0.24);
}
.fr-card .fr-row .btn-small:hover { filter: brightness(1.03); background: var(--g-accent); }
.fr-card .fr-summary { font-weight: 800; color: var(--g-accent-ink); margin-top: 6px; }

/* ================================================================== *
 *  7. Additive, mock-faithful touches for the two roots already relit by
 *     sibling files (kept minimal so they never fight the base rules).
 * ================================================================== */

/* 7a. Achievements catalog (.badges-card, shelled in exp-collections.css).
   The summary "X of Y earned" line becomes a soft amber count chip, echoing the
   prominent badge count in the achievements_catalog mock (matches the dex chip
   pattern already used for the creature count). */
.overlay-card.badges-card > .panel-note {
  display: inline-block;
  background: #FDF1DD;      /* soft amber tint (matches the dex count chip) */
  color: #8A5A00;           /* accent ink, readable on the soft tint        */
  font-weight: 700;
  border-radius: 9999px;
  padding: 0.34rem 0.9rem;
  margin-bottom: 0.5rem;
}

/* 7b. Guild perks ladder (.guild-card, shelled in exp-social-map.css).
   The loot_guild_perks mock draws the perks as a connected vertical rail with a
   node per rank. Add that rail additively: a hairline spine down the ladder and
   a small amber node on each earned rank. Purely decorative, no layout shift. */
.guild-card .guild-ladder {
  position: relative;
  padding-left: 22px;
}
.guild-card .guild-ladder::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: #E2E8F0;
}
.guild-card .guild-ladder-row { position: relative; }
.guild-card .guild-ladder-row::before {
  content: "";
  position: absolute;
  left: -19px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid #E2E8F0;
}
.guild-card .guild-ladder-row.have::before {
  background: var(--amber, #f59e0b);
  border-color: var(--amber, #f59e0b);
}

/* ================================================================== *
 *  8. Reduce motion: pin the small lifts on these cards for anyone who
 *     asked for calm. Colour and layout are unaffected.
 * ================================================================== */
@media (prefers-reduced-motion: reduce) {
  .faction-card .faction-pick,
  .pets-card .pets-cell {
    transition: none !important;
  }
  .faction-card .faction-pick:hover,
  .pets-card .pets-cell.has:hover {
    transform: none !important;
  }
}

/* ================================================================== *
 *  9. STRUCTURAL mock elements (the DOM the JS now emits, styled here).
 *     These finish the five screens against their Stitch mocks: the
 *     profile stat trio + title-ladder sublabels and inline bars, the
 *     factions stat cards + Available Bounty, the pets active-companion
 *     card + optional stat chips, the Voyage Pass crate hero + season
 *     header + premium badge + keep-voyaging callout, and the field
 *     research Daily / Weekly toggle + per-quest bars. Same tokens as
 *     above, so the whole surface stays one system. No long dashes.
 * ================================================================== */

/* 9a. PLAYER PROFILE ~ progression.js -------------------------------- */
/* Headline stat trio (Total XP / Adventures / Creatures): three white
   inner cards, big amber number over a quiet caps label. */
.prog-card .prog-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 8px 0 14px;
}
.prog-card .prog-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px;
  border-radius: var(--g-radius-md);
  background: var(--g-card);
  border: 1px solid var(--g-hairline);
  box-shadow: var(--g-lift-sm);
  text-align: center;
}
.prog-card .prog-stat-n {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.1;
  color: var(--g-accent-ink);
}
.prog-card .prog-stat-k {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g-muted);
}

/* Title-ladder rows gain a stacked middle column: title, a caps sublabel
   (the XP threshold) and, on the in-progress row only, an inline bar. */
.prog-card .prog-ladder-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.prog-card .prog-ladder-sub {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--g-muted);
}
.prog-card .prog-ladder-row.have .prog-ladder-sub { color: var(--g-accent-ink); }
.prog-card .prog-ladder-row:not(.have) .prog-ladder-sub { color: var(--g-locked); }
.prog-card .prog-ladder-bar {
  height: 8px;
  border-radius: var(--g-pill);
  background: var(--g-variant);
  border: 1px solid var(--g-hairline);
  overflow: hidden;
  margin-top: 6px;
}
.prog-card .prog-ladder-bar-fill {
  display: block;
  height: 100%;
  background: var(--g-accent);
  border-radius: var(--g-pill);
}
.prog-card .prog-ladder-status {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--g-accent-ink);
}
/* The in-progress (next) row reads as an active white amber-framed card,
   overriding the neutral locked look from section 2 (later + equal weight). */
.prog-card .prog-ladder-row.next {
  background: var(--g-card);
  border-color: var(--g-accent);
  box-shadow: 0 2px 6px rgba(26, 28, 27, 0.06), 0 14px 30px rgba(245, 158, 11, 0.16);
}
.prog-card .prog-ladder-row.next .prog-ladder-title { color: var(--g-ink); }
.prog-card .prog-ladder-row.next .prog-ladder-sub { color: var(--g-accent-ink); }
.prog-card .prog-ladder-row.next .prog-ladder-lvl { color: var(--g-accent-ink); }

/* 9b. FACTIONS ~ factions.js ---------------------------------------- */
/* Two headline stat cards (Global Rep / Active Titles). */
.faction-card .faction-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 10px 0 14px;
}
.faction-card .faction-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border-radius: var(--g-radius-md);
  background: var(--g-card);
  border: 1px solid var(--g-hairline);
  box-shadow: var(--g-lift-sm);
}
.faction-card .faction-stat-k {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--g-muted);
}
.faction-card .faction-stat-n {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.05;
  color: var(--g-accent-ink);
}
/* Available Bounty: a solid amber callout with dark, readable text. */
.faction-card .faction-bounty {
  margin: 14px 0 6px;
  padding: 18px;
  border-radius: var(--g-radius-md);
  background: var(--g-accent);
  color: var(--g-on-accent);
  box-shadow: 0 1px 2px rgba(133, 83, 0, 0.18), 0 12px 26px rgba(245, 158, 11, 0.22);
}
.faction-card .faction-bounty-title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 6px;
}
.faction-card .faction-bounty-text {
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.92;
}

/* 9c. PETS ~ pets.js ------------------------------------------------- */
/* The active companion becomes a feature card: emoji tile + details, with
   optional stat chips (only rendered when the pet data carries the fields).
   The amber-tinted shell from section 4 is kept; this only lays it out. */
.pets-card .pets-active {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.pets-card .pets-active-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--g-radius-md);
  background: var(--g-card);
  border: 1px solid var(--g-accent);
  font-size: 34px;
  flex: 0 0 auto;
}
.pets-card .pets-active-main { flex: 1 1 auto; min-width: 0; }
.pets-card .pets-active-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g-accent-ink);
}
.pets-card .pets-active-name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 18px;
  color: var(--g-ink);
}
.pets-card .pets-active-kind {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--g-muted);
}
.pets-card .pets-stats {
  display: flex;
  gap: 8px;
  flex: 1 1 100%;
  flex-wrap: wrap;
}
.pets-card .pets-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 14px;
  border-radius: 12px;
  background: var(--g-card);
  border: 1px solid var(--g-hairline);
}
.pets-card .pets-stat-k {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g-muted);
}
.pets-card .pets-stat-v {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 15px;
  color: var(--g-accent-ink);
}

/* 9d. VOYAGE PASS ~ voyage-pass.js ---------------------------------- */
/* Daily Reward crate hero: a soft amber-to-white card, big reward glyph,
   an amber status line and (when a tier is ready) an Open pill. */
.pass-card .pass-crate {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 20px 18px;
  margin: 8px 0 14px;
  border-radius: var(--g-radius);
  background: linear-gradient(180deg, var(--g-soft-tile) 0%, var(--g-card) 70%);
  border: 1px solid var(--g-hairline);
  box-shadow: var(--g-lift);
}
.pass-card .pass-crate-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--g-accent-ink);
}
.pass-card .pass-crate-title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--g-ink);
}
.pass-card .pass-crate-emoji { font-size: 56px; line-height: 1; margin: 6px 0; }
.pass-card .pass-crate-note {
  font-size: 13px;
  font-weight: 700;
  color: var(--g-accent-ink);
}
.pass-card .pass-crate-open { margin-top: 10px; min-width: 220px; padding: 0 22px; }

/* Season-style track header with the pass level chip. */
.pass-card .pass-season {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0 10px;
}
.pass-card .pass-season-title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 18px;
  color: var(--g-ink);
}
.pass-card .pass-season-sub {
  font-size: 12px;
  font-weight: 600;
  color: var(--g-muted);
  margin-top: 2px;
}
.pass-card .pass-lvl {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: var(--g-pill);
  background: var(--g-accent-soft);
  color: var(--g-accent-ink);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.04em;
}
/* Featured (milestone) tiers carry a small deep-brown corner badge. */
.pass-card .pass-row.milestone { position: relative; }
.pass-card .pass-premium {
  position: absolute;
  top: -8px;
  right: 10px;
  padding: 3px 10px;
  border-radius: var(--g-pill);
  background: var(--g-on-accent);
  color: var(--g-soft-tile);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: var(--g-lift-sm);
}
/* Keep-voyaging callout (soft amber, no paid upgrade in this pass). */
.pass-card .pass-upgrade {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px 0 6px;
  padding: 18px;
  border-radius: var(--g-radius-md);
  background: var(--g-accent-soft);
  border: 1px solid var(--g-accent);
}
.pass-card .pass-upgrade-title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 16px;
  color: var(--g-accent-ink);
}
.pass-card .pass-upgrade-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--g-muted);
  margin-top: 4px;
}

/* 9e. FIELD RESEARCH ~ field-research.js ---------------------------- */
/* Daily / Weekly segmented toggle: a pill track with a white active pill. */
.fr-card .fr-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--g-pill);
  background: var(--g-variant);
  border: 1px solid var(--g-hairline);
}
.fr-card .fr-tab {
  flex: 1 1 0;
  min-height: 44px;
  border: none;
  border-radius: var(--g-pill);
  background: transparent;
  color: var(--g-muted);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
}
.fr-card .fr-tab.active {
  background: var(--g-card);
  color: var(--g-ink);
  box-shadow: var(--g-lift-sm);
}
.fr-card .fr-tab:not(.active):hover { color: var(--g-ink); }
/* Per-quest progress bar under the task text. */
.fr-card .fr-bar {
  height: 8px;
  border-radius: var(--g-pill);
  background: var(--g-variant);
  border: 1px solid var(--g-hairline);
  overflow: hidden;
  margin-top: 8px;
}
.fr-card .fr-bar-fill {
  display: block;
  height: 100%;
  background: var(--g-accent);
  border-radius: var(--g-pill);
}