/* ============================================================
   LUTHER'S WORLD — SHARED DESIGN SYSTEM
   Structural rules modeled on Gerah's discipline: one card
   shape, two radius values, one hover pattern, no decorative
   shadows. Warm palette kept for the audience (families, seniors).
   ============================================================ */
html{font-size:112.5%}
:root{
  --body:'Atkinson Hyperlegible',system-ui,sans-serif;
  --display:'Source Serif 4',Georgia,serif;
  --story:var(--body);

  /* ink scale — four steps, purple-black base */
  --ink:#241a22;--ink2:#4c3f49;--ink3:#796973;--ink4:#a0949c;

  /* surface scale: lifted from parchment to layered neutrals */
  --rule:#e4e0da;--paper:#ffffff;--paper2:#f5f3f0;--page:#f0eeeb;

  /* brand */
  --site-acc:#5b2a54;--site-acc-deep:#3f2247;--site-acc-soft:#f3ecf2;
  --gold:#c99a2e;--gold-deep:#8a6a1c;--gold-soft:#faf3e2;

  /* per-world overrides (set by game pages via inline style) */
  --acc:var(--w-acc,var(--site-acc));--acc-deep:var(--w-acc-deep,var(--site-acc-deep));--acc-soft:var(--w-acc-soft,var(--site-acc-soft));
  --found:var(--w-found,#f3ecf2);--found-ink:var(--w-found-ink,#4c3a12);

  /* elevation */
  --shadow-sm:0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.03);
  --shadow-md:0 2px 8px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --shadow-lg:0 4px 16px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);

  /* ── structural tokens ── */
  --radius-sm:10px;  /* buttons, pills, nav links, small controls */
  --radius-md:16px;  /* cards, containers, sheets, modals */
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
/* visually hidden but present for screen readers & crawlers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body{font-family:var(--body);background:var(--page);color:var(--ink);min-height:100vh;-webkit-font-smoothing:antialiased;line-height:1.55;font-size:1.05rem}
a{text-underline-offset:2px;color:var(--site-acc)}

/* keyboard focus */
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--site-acc);outline-offset:2px;border-radius:var(--radius-sm)}

/* ── top bar ───────────────────────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:50;background:rgba(250,246,236,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--rule);padding:12px 20px}
.topbar-in{max-width:700px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tb-brand{display:flex;align-items:center;gap:10px;font-size:1.2rem;font-weight:700;color:var(--ink);text-decoration:none;line-height:1.2}
.px-grid{display:grid;grid-template-columns:repeat(3,7px);gap:2px}
.px-grid span{width:7px;height:7px;border-radius:2px;background:var(--site-acc);opacity:.85}
.tb-nav{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.tb-link{font-size:.92rem;font-weight:700;color:var(--ink2);text-decoration:none;padding:10px 13px;border-radius:var(--radius-sm);min-height:44px;display:flex;align-items:center;transition:background .15s,color .15s}
.tb-link:hover{background:var(--paper2);color:var(--ink)}
.tb-link.active{background:var(--site-acc);color:#fff}

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

/* ── THE CARD — one component, used for every "tap to go" element ── */
/* Adapted from Gerah's .path-row: white bg, 1px border, consistent
   radius, content left + CTA right, border-color shift on hover.
   Thick 2px borders replaced with 1px to match Gerah's restraint. */
.card{
  display:flex;align-items:center;gap:14px;
  width:100%;padding:16px 18px;
  background:#fff;border:none;border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  text-decoration:none;color:var(--ink);cursor:pointer;
  transition:box-shadow .2s,transform .2s;
}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.card-icon{width:42px;height:42px;flex-shrink:0;font-size:1.8rem;display:flex;align-items:center;justify-content:center}
.card-body{flex:1;min-width:0}
.card-name{display:block;font-family:var(--display);font-size:1.12rem;font-weight:600;line-height:1.25}
.card-sub{display:block;font-size:.88rem;color:var(--ink2);line-height:1.35;margin-top:2px}
.card-cta{white-space:nowrap;font-size:.88rem;font-weight:700;color:var(--site-acc);display:flex;align-items:center;gap:4px;flex-shrink:0;transition:transform .15s}
.card:hover .card-cta{transform:translateX(3px)}

/* card grid */
.card-grid{display:grid;gap:10px}
@media(min-width:560px){.card-grid{grid-template-columns:1fr 1fr}}

/* card earned state (passport) */
.card.earned{box-shadow:0 0 0 2px var(--gold), var(--shadow-sm)}
.card.earned .card-cta{color:var(--gold-deep)}
.card.locked{opacity:.88}

/* ── legacy .wc alias — same shape as .card, for pages still using
   the old class name. Will eventually be replaced in markup. ────── */
.worlds{display:grid;gap:10px}
@media(min-width:560px){.worlds{grid-template-columns:1fr 1fr}}
.wc{
  display:flex;align-items:center;gap:14px;
  background:#fff;border:none;border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  padding:16px 18px;cursor:pointer;text-decoration:none;color:var(--ink);
  transition:box-shadow .2s,transform .2s;
}
.wc:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.wc-sil{width:42px;height:42px;flex-shrink:0;font-size:1.8rem;display:flex;align-items:center;justify-content:center}
.wc-text{flex:1;min-width:0}
.wc-name{display:block;font-family:var(--display);font-size:1.12rem;font-weight:600;line-height:1.25}
.wc-tag{display:block;font-size:.88rem;color:var(--ink2);line-height:1.35;margin-top:2px}
.wc-flavor{font-size:.88rem;color:var(--ink3);line-height:1.4;margin-top:3px}
.wc-arrow{font-size:.88rem;font-weight:700;color:var(--site-acc);flex-shrink:0;transition:transform .15s}
.wc:hover .wc-arrow{transform:translateX(3px)}

/* ── segmented controls + tool buttons ─────────────────────────── */
.seg{display:flex;gap:6px;flex-wrap:wrap}
.sb{background:var(--paper2);border:none;color:var(--ink2);padding:9px 16px;border-radius:var(--radius-sm);font-weight:700;font-size:.92rem;cursor:pointer;min-height:46px;font-family:var(--body);transition:background .15s,color .15s}
.sb:hover{background:var(--rule);color:var(--ink)}.sb.active{background:var(--acc);color:#fff}
.tool-btn{font-family:var(--body);font-weight:700;font-size:.92rem;background:var(--paper2);border:none;color:var(--ink2);padding:10px 18px;border-radius:var(--radius-sm);cursor:pointer;min-height:46px;transition:background .15s,color .15s}
.tool-btn:hover{background:var(--rule);color:var(--ink)}
.tool-btn.primary{background:var(--acc);color:#fff;transition:background .15s}.tool-btn.primary:hover{background:var(--acc-deep)}

/* ── game label — quiet, like Gerah's .promo-eyebrow ───────────── */
.pa-badge{font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--site-acc)}

/* ── completion banner ─────────────────────────────────────────── */
.done{display:none;margin:18px 0;text-align:center;padding:22px 18px;border-radius:var(--radius-md);background:#fff;border:none;box-shadow:var(--shadow-md)}
.done.show{display:block;animation:fade .5s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.done .eyebrow{font-size:.82rem;font-weight:700;color:var(--acc-deep);margin-bottom:6px}
.done .dline{font-family:var(--display);font-size:1.35rem;color:var(--ink);max-width:32ch;line-height:1.45;margin:0 auto 14px}
.done .next-btn{font-family:var(--body);font-weight:700;font-size:1rem;background:var(--acc);color:#fff;border:none;padding:12px 24px;border-radius:var(--radius-sm);cursor:pointer;min-height:48px;transition:background .15s}
.done .next-btn:hover{background:var(--acc-deep)}

/* ── footer ────────────────────────────────────────────────────── */
.foot{text-align:center;padding:30px 0 44px;font-size:.92rem;color:var(--ink2);line-height:1.7}
.foot .fline{font-size:1.05rem;color:var(--ink);font-weight:700;margin-bottom:6px}
.foot a{color:var(--ink);font-weight:700}

/* ── section headers (Gerah-style: heading + one-line sub) ─────── */
.sec-head{margin-bottom:16px}
.sec-head h2{font-family:var(--display);font-size:1.4rem;font-weight:600;margin-bottom:3px}
.sec-head p,.sec-head .hint{font-size:.95rem;color:var(--ink2)}

@media(max-width:560px){.col{padding:0 14px}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .done.show{animation:none}
  .card:hover,.wc:hover{background:#fff}
  .card:hover .card-cta,.wc:hover .wc-arrow{transform:none}
}