/* ============================================================
   FABLEPIXELS — SHARED STYLES
   ============================================================ */
:root{
  --body:'Atkinson Hyperlegible',system-ui,sans-serif;
  --story:'Crimson Pro',Georgia,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-style:italic;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-style:italic;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-style:italic;font-size:.98rem;color:var(--ink2);margin-bottom:5px}
.foot a{color:var(--ink2)}

/* ============================================================
   MOBILE BOTTOM TAB BAR — primary nav on phones.
   Hidden on tablet/desktop (top nav takes over there).
   ============================================================ */
.tabbar{display:none}
.tabbar-spacer{display:none}
@media(max-width:640px){
  /* top nav links collapse on phone; brand stays put */
  .tb-nav{display:none}
  .topbar-in{justify-content:center}

  .tabbar{
    display:flex;position:fixed;bottom:0;left:0;right:0;z-index:60;
    background:rgba(250,245,236,.96);backdrop-filter:blur(10px);
    border-top:1px solid var(--rule);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -4px 16px -8px rgba(40,30,10,.18)}
  .tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:52px;padding:5px 2px;border-radius:10px;
    text-decoration:none;color:var(--ink3);font-family:var(--body);
    -webkit-tap-highlight-color:transparent;transition:color .14s,background .14s}
  .tab:active{background:var(--paper2)}
  .tab-ico{font-size:1.18rem;line-height:1;width:24px;height:24px;display:flex;align-items:center;justify-content:center}
  .tab-lbl{font-size:.62rem;font-weight:700;letter-spacing:.01em}
  .tab.active{color:var(--ink)}
  .tab.active .tab-ico{position:relative}
  .tab.active .tab-ico::after{content:"";position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);
    width:5px;height:5px;border-radius:50%;background:var(--acc,#b5832e)}

  /* clear the tab bar so nothing hides behind it */
  .tabbar-spacer{display:block;height:calc(64px + env(safe-area-inset-bottom,0px))}
  .foot{padding-bottom:14px}
}

@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}
  .tab,.tab:active{transition:none}
}