/* Journey shell — all scoped under #journey-shell to never clobber page CSS. */
:root { --jshell-h: 52px; }
body.js-shell-on { padding-top: var(--jshell-h); }
/* Ribbon is theme-aware: it reads the page's own palette vars (dark by default on
   illtowell.com), and the [data-theme="light"] override flips them to light — so the
   ribbon always matches the page instead of being permanently light-cream. */
#journey-shell { position: fixed; top: 0; left: 0; right: 0; height: var(--jshell-h);
  display: flex; align-items: center; gap: 12px; padding: 0 12px; z-index: 9999;
  background: var(--surface, #14201a); border-bottom: 1px solid var(--border, #25402d);
  color: var(--text, #e9e2cf); font: 14px/1.2 system-ui, sans-serif; }
#journey-shell .js-home, #journey-shell .js-back, #journey-shell .js-theme { background: none;
  border: none; cursor: pointer; font-size: 18px; color: var(--muted, #9aa08f);
  padding: 4px 6px; border-radius: 6px; }
#journey-shell .js-theme { font-size: 15px; }
#journey-shell .js-home:hover, #journey-shell .js-back:hover,
#journey-shell .js-theme:hover { background: rgba(127,127,127,.16); }
#journey-shell .js-path { flex: 1; display: flex; align-items: center; gap: 6px;
  overflow-x: auto; cursor: pointer; }
.js-land { display: flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 4px 8px; border-radius: 14px; color: var(--muted, #9aa08f); opacity: .7; }
.js-land .js-icon { font-size: 16px; }
.js-land.done { opacity: 1; color: var(--green, #6aa37a); }
.js-land.next { opacity: 1; color: var(--gold, #d4a843); font-weight: 600; }
.js-land.next::after { content: "💎"; margin-left: 2px; }   /* gold gem on current */
.js-land.fog { opacity: .35; filter: blur(.3px); }
.js-trail-link { color: var(--muted, #6b6f63); }            /* drawn path between lands */
.js-trail-link.done { color: var(--green, #6aa37a); }
.js-hide { display: none !important; }
#journey-shell .js-mypath-btn { background: none; border: 1px solid var(--border, #3a4a3f);
  border-radius: 14px; padding: 4px 10px; cursor: pointer; color: var(--text, #cfc9b8); }
.js-mypath { position: fixed; top: var(--jshell-h); right: 8px; width: 280px; max-height: 60vh;
  overflow-y: auto; background: var(--surface, #1a261f); color: var(--text, #e9e2cf);
  border: 1px solid var(--border, #2c4233); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 8px; z-index: 9999; display: none; }
.js-mypath.open { display: block; }
.js-mypath h4 { margin: 4px 8px; font-size: 12px; text-transform: uppercase; color: var(--muted, #999); }
.js-mypath a { display: block; padding: 6px 8px; color: var(--text, #cfc9b8); text-decoration: none;
  border-radius: 6px; }
.js-mypath a:hover { background: rgba(127,127,127,.14); }
.js-ext-mark { font-size: .8em; opacity: .6; margin-left: 2px; }
/* member efficient nav */
#journey-shell .js-mnav { display: flex; gap: 10px; }
#journey-shell .js-mnav a { color: #555; text-decoration: none; padding: 4px 6px; }
#journey-shell .js-maptoggle { font-size: 18px; background: none; border: none; cursor: pointer; }
/* expand-to-map overlay */
.js-overlay { position: fixed; inset: 0; background: rgba(28,24,18,.78); z-index: 10000;
  display: none; align-items: center; justify-content: center; }
.js-overlay.open { display: flex; }
.js-overlay-inner { background: #faf8f4; border-radius: 16px; padding: 20px;
  max-width: 860px; width: 92vw; max-height: 86vh; overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.js-pav-land { border: 1px solid #e6e0d6; border-radius: 12px; padding: 14px; }
.js-pav-land.fog { opacity: .45; }
.js-pav-land h3 { margin: 0 0 4px; font-size: 16px; }
.js-pav-land .js-intrigue { font-size: 12px; color: #8a8073; margin-bottom: 8px; }
.js-pav { display: block; padding: 5px 0; color: #555; text-decoration: none; font-size: 13px; }
.js-pav.done::before { content: "✓ "; color: #5aa36a; }
.js-overlay-close { position: fixed; top: 14px; right: 18px; font-size: 26px; color: #fff;
  background: none; border: none; cursor: pointer; z-index: 10001; }

/* mobile: collapse the path to the current land + a compact "n / total" */
@media (max-width: 640px) {
  #journey-shell .js-mnav { display: none; }
  #journey-shell .js-path .js-land:not(.next) { display: none; }
  #journey-shell .js-path .js-trail-link { display: none; }
  .js-count { display: inline; }
}

/* 1b reward layer */
#journey-shell .js-orb { width: 26px; height: 26px; border-radius: 50%; margin-left: 4px;
  background: radial-gradient(circle at 50% 40%, var(--gold,#d4a843), transparent 70%);
  box-shadow: 0 0 0 0 var(--gold,#d4a843); opacity: .4; transition: opacity .4s, box-shadow .4s; }
#journey-shell .js-orb[data-lit="1"] { opacity: .7; box-shadow: 0 0 8px 1px var(--gold,#d4a843); }
#journey-shell .js-orb[data-lit="2"] { opacity: .85; box-shadow: 0 0 12px 2px var(--gold,#d4a843); }
#journey-shell .js-orb[data-lit="3"] { opacity: 1; box-shadow: 0 0 18px 3px var(--gold,#d4a843); }
.js-pav-featured { margin: 4px 0 8px; padding: 8px; border-radius: 8px;
  background: var(--surface-2,#162318); }
.js-pav-featured .js-fname { font-weight: 600; color: var(--gold,#d4a843); }
.js-pav-featured .js-fpower { font-size: 12px; color: var(--muted,#a89870); }
.js-claim { margin-top: 6px; background: var(--gold,#d4a843); color: #12130f; border: none;
  border-radius: 8px; padding: 5px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.js-claim[disabled] { opacity: .5; cursor: default; }
.js-wallet-coupon { padding: 6px 8px; border: 1px dashed var(--gold,#d4a843); border-radius: 8px;
  margin: 6px 0; font-size: 13px; }
.js-wallet-coupon .js-exp { color: var(--muted,#a89870); font-size: 11px; }