/* ============================================================
   FABLEPIXELS — SHARED STYLES
   ============================================================ */
:root{
  --body:'Lexend',system-ui,sans-serif;
  --story:'Lexend',system-ui,sans-serif;
  --ink:#2c2620;--ink2:#6f6557;--ink3:#a09484;
  --rule:#ddd2bf;--paper:#faf5ec;--paper2:#f3ece0;--page:#ece5d8;
  --acc:var(--w-acc,#b5832e);--acc-deep:var(--w-acc-deep,#8a6220);--acc-soft:var(--w-acc-soft,#f0e1c2);
  --found:var(--w-found,#ece0c4);--found-ink:var(--w-found-ink,#5a4216);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--page);color:var(--ink);min-height:100vh;-webkit-font-smoothing:antialiased;transition:background .5s ease}

/* top bar */
.topbar{position:sticky;top:0;z-index:50;background:rgba(250,245,236,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--rule);padding:10px 20px}
.topbar-in{max-width:680px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.tb-brand{display:flex;align-items:center;gap:9px;font-size:1.15rem;font-weight:700;color:var(--ink);text-decoration:none}
.px-grid{display:grid;grid-template-columns:repeat(3,6px);gap:2px}
.px-grid span{width:6px;height:6px;border-radius:1.5px;animation:npop 3s ease-in-out infinite}
@keyframes npop{0%,80%,100%{opacity:.3;transform:scale(1)}40%{opacity:1;transform:scale(1.35)}}
.tb-nav{display:flex;gap:6px;align-items:center}
.tb-link{font-size:.82rem;font-weight:700;color:var(--ink2);text-decoration:none;padding:6px 11px;border-radius:6px}
.tb-link:hover{background:var(--paper2);color:var(--ink)}
.tb-link.active{background:var(--ink);color:var(--paper)}

.col{max-width:680px;margin:0 auto;padding:0 20px}

/* activity pills */
.act-pills{display:flex;gap:8px;margin:18px 0}
.ap{font-family:var(--body);font-weight:700;font-size:.85rem;padding:9px 18px;border-radius:40px;border:1px solid var(--rule);
  background:#fff;color:var(--ink2);cursor:pointer;text-decoration:none;transition:all .12s}
.ap:hover{border-color:var(--ink3)}
.ap.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* world cards */
.worlds{display:grid;gap:10px}
@media(min-width:560px){.worlds{grid-template-columns:1fr 1fr}}
.wc{background:#fff;border:1px solid var(--rule);border-left:4px solid var(--wc-accent,#ccc);border-radius:0 10px 10px 0;
  display:flex;align-items:center;gap:12px;padding:14px 14px 14px 12px;cursor:pointer;text-decoration:none;color:var(--ink);
  transition:transform .12s,box-shadow .12s;box-shadow:0 2px 6px -3px rgba(0,0,0,.06)}
.wc:hover{transform:translateY(-2px);box-shadow:0 8px 18px -8px rgba(0,0,0,.12)}
.wc-sil{width:40px;height:40px;flex-shrink:0;font-size:1.8rem;display:flex;align-items:center;justify-content:center}
.wc-text{flex:1;min-width:0}
.wc-name{font-size:1.05rem;font-weight:700;line-height:1.15}
.wc-tag{font-size:.78rem;color:var(--ink3)}
.wc-flavor{font-family:var(--story);font-size:.88rem;color:var(--ink2);line-height:1.3;margin-top:3px}
.wc-arrow{font-size:1.1rem;color:var(--ink3);flex-shrink:0;transition:transform .12s}
.wc:hover .wc-arrow{transform:translateX(3px)}

/* segmented + tool buttons */
.seg{display:flex;gap:4px}
.sb{background:#fff;border:1px solid var(--rule);color:var(--ink2);padding:6px 12px;border-radius:5px;font-weight:700;font-size:.8rem;cursor:pointer;min-height:34px;font-family:var(--body)}
.sb:hover{border-color:var(--acc)}.sb.active{background:var(--acc);border-color:var(--acc);color:#fff}
.tool-btn{font-family:var(--body);font-weight:700;font-size:.8rem;background:#fff;border:1px solid var(--rule);color:var(--ink2);padding:7px 14px;border-radius:5px;cursor:pointer;min-height:34px}
.tool-btn:hover{border-color:var(--acc);color:var(--acc-deep)}
.tool-btn.primary{background:var(--acc);border-color:var(--acc);color:#fff}.tool-btn.primary:hover{background:var(--acc-deep)}

/* completion */
.done{display:none;margin:16px 0;text-align:center;padding:18px 16px;border-radius:8px;background:var(--paper2);border:1px solid var(--rule)}
.done.show{display:block;animation:fade .5s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.done .eyebrow{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--acc-deep);opacity:.8;margin-bottom:5px}
.done .dline{font-family:var(--story);font-size:1.3rem;color:var(--ink);max-width:30ch;line-height:1.4;margin:0 auto 12px}
.done .next-btn{font-family:var(--body);font-weight:700;font-size:.92rem;background:var(--acc);color:#fff;border:none;padding:10px 22px;border-radius:6px;cursor:pointer}
.done .next-btn:hover{background:var(--acc-deep)}

/* footer */
.foot{text-align:center;padding:28px 0 40px;font-size:.82rem;color:var(--ink3);line-height:1.6}
.foot .fline{font-family:var(--story);font-size:.98rem;color:var(--ink2);margin-bottom:5px}
.foot a{color:var(--ink2)}

@media(max-width:560px){.col{padding:0 14px}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .px-grid span{animation:none;opacity:.55}
  body{transition:none}.done.show{animation:none}
  .wc:hover{transform:none}
}


/* readability settings shared by every page (set in the grown-ups corner, applied by story-kit.js) */
body{letter-spacing:.01em;line-height:1.5}
html.fp-wide body{font-family:'Lexend Exa','Lexend',system-ui,sans-serif;letter-spacing:.03em;word-spacing:.16em}
html.fp-calm *,html.fp-calm *::before,html.fp-calm *::after{animation:none !important;transition:none !important}
/* nav: scroll sideways on narrow screens instead of overflowing */
.tb-nav{min-width:0;overflow-x:auto;scrollbar-width:none}
.tb-nav::-webkit-scrollbar{display:none}
.tb-link{white-space:nowrap}
.tb-brand{flex-shrink:0}
@media(max-width:560px){.tb-link{padding:6px 8px}.tb-brand span:last-child{display:none}}