/* =====================================================================
   LITTLE BERRY — DESIGN SYSTEM  (v3: premium · muted · all-ages)
   Quiet colour, generous space, line icons, typographic art.
   ===================================================================== */

:root {
  /* Brand — warm coral (Blooming-inspired) */
  --berry:      #EC8A72;
  --berry-2:    #F4B2A1;
  --berry-deep: #D2694F;
  --berry-tint: #FCEDE7;
  --berry-glow: #FBE3D9;

  /* Neutrals — warm cream */
  --bg:        #FBF4EF;
  --surface:   #FFFFFF;
  --surface-2: #F6ECE6;
  --line:      #F1E3DB;
  --ink:       #43352F;
  --ink-2:     #897670;
  --ink-3:     #BCAAA1;

  /* Soft warm accents */
  --a-sage:#9CC0A6; --a-sky:#8FB8CE; --a-clay:#D79E83; --a-gold:#F0C879;
  --a-lilac:#C2A9D6; --a-rose:#EFA0A0; --a-teal:#86B7AE; --a-sand:#E0C29B;

  /* Depth — warm & soft */
  --sh-1: 0 1px 2px rgba(67,53,47,.04), 0 3px 12px rgba(67,53,47,.05);
  --sh-2: 0 4px 16px rgba(67,53,47,.07), 0 14px 34px rgba(67,53,47,.06);

  /* Spacing scale */
  --s1:6px; --s2:10px; --s3:14px; --s4:18px; --s5:24px; --s6:32px; --s7:44px;

  --r-sm:14px; --r:18px; --r-lg:24px; --r-xl:30px;

  --font-display:'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:'Plus Jakarta Sans', system-ui, sans-serif;
  --font-brand:'Fraunces', Georgia, serif;

  --pad:22px;
  --tab-h:64px;
  --header-h:56px;
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%; }
body {
  font-family:var(--font-body); color:var(--ink); background:var(--bg);
  -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased;
  overscroll-behavior:none; user-select:none; letter-spacing:-.01em;
}
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:700; color:var(--ink); margin:0; letter-spacing:-.02em; }
button { font-family:inherit; }
svg.ic { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; display:block; }

/* ===================== SHELL ===================== */
.lb-app { display:flex; flex-direction:column; height:100dvh; max-width:540px; margin:0 auto;
  background:var(--bg); position:relative; overflow:hidden; box-shadow:0 0 80px rgba(43,36,41,.05); }

.lb-header { height:var(--header-h); flex:0 0 auto; display:flex; align-items:center; gap:var(--s3);
  padding:0 var(--pad); padding-top:env(safe-area-inset-top);
  background:rgba(251,244,239,.85); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px);
  position:relative; z-index:30; border-bottom:1px solid transparent; transition:border-color .2s; }
.lb-header.scrolled { border-color:var(--line); }
.lb-header .title { font-family:var(--font-display); font-size:18px; font-weight:700; }
.lb-header .spacer { flex:1; }
.lb-iconbtn { width:38px; height:38px; border:none; border-radius:12px; background:var(--surface); color:var(--ink-2);
  display:grid; place-items:center; cursor:pointer; box-shadow:var(--sh-1); transition:transform .15s, color .15s; }
.lb-iconbtn:active { transform:scale(.9); }
.lb-iconbtn.on { color:var(--berry); }
.lb-back-pill { border:none; cursor:pointer; background:var(--surface); color:var(--ink); font-family:var(--font-display);
  font-size:14px; font-weight:600; padding:9px 16px 9px 10px; border-radius:999px; box-shadow:var(--sh-1);
  display:inline-flex; align-items:center; gap:4px; transition:transform .15s; }
.lb-back-pill:active { transform:scale(.94); }
.lb-back-pill svg.ic { width:18px; height:18px; }

/* brand lockup */
.lb-brand { display:flex; align-items:center; gap:9px; }
.lb-logomark { width:30px; height:30px; flex:0 0 auto; }
.lb-wordmark { font-family:var(--font-brand); font-weight:600; font-size:21px; color:var(--berry-deep); letter-spacing:-.01em; }

/* scroll */
.lb-scroll { flex:1 1 auto; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; scroll-behavior:smooth;
  padding:var(--s4) var(--pad) calc(var(--tab-h) + env(safe-area-inset-bottom) + 28px); }
.lb-scroll::-webkit-scrollbar { width:0; }

.lb-view { animation:viewIn .32s cubic-bezier(.22,.7,.3,1); }
@keyframes viewIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }

/* app shell launch animation (home-screen open feels native) */
.lb-app-enter { opacity:0; transform:scale(.985); }
.lb-app-enter.lb-app-in { opacity:1; transform:none; transition:opacity .42s ease, transform .42s cubic-bezier(.22,.7,.3,1); }
.lb-reduce-motion .lb-app-enter, .lb-reduce-motion .lb-app-enter.lb-app-in { opacity:1; transform:none; transition:none; }
.lb-reduce-motion #lb-splash { transition:none; }

/* ===================== TABS ===================== */
.lb-tabs { flex:0 0 auto; min-height:var(--tab-h); padding-bottom:env(safe-area-inset-bottom); box-sizing:content-box; display:flex;
  background:rgba(255,255,255,.92); backdrop-filter:saturate(160%) blur(18px); -webkit-backdrop-filter:saturate(160%) blur(18px);
  border-top:1px solid var(--line); position:relative; z-index:30; }
.lb-tab { flex:1; border:none; background:none; cursor:pointer; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:4px; color:var(--ink-3); font-family:var(--font-display); font-size:10.5px; font-weight:600;
  transition:color .2s; }
.lb-tab svg.ic { width:23px; height:23px; transition:transform .25s cubic-bezier(.34,1.56,.64,1); }
.lb-tab.active { color:var(--berry); }
.lb-tab.active svg.ic { transform:translateY(-1px); stroke-width:2.1; }

/* ===================== AVATAR / COVER (image-ready, no emoji) ===================== */
.lb-av { border-radius:18px; overflow:hidden; display:grid; place-items:center; position:relative;
  background:linear-gradient(150deg, var(--av-a,#C58CA0), var(--av-b,#9E5873)); }
.lb-av .mono { font-family:var(--font-brand); font-weight:600; color:#fff; line-height:1; }
.lb-av img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .35s ease; }
.lb-av img.is-on { opacity:1; }

.lb-cover { position:relative; overflow:hidden; display:grid; place-items:center;
  background:linear-gradient(155deg, var(--cv-a), var(--cv-b)); }
.lb-cover .mono { font-family:var(--font-brand); font-weight:500; color:rgba(255,255,255,.42); line-height:1; }
.lb-cover img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:0; transition:opacity .35s ease; }
.lb-cover img.is-on { opacity:1; }

/* ===================== HOME ===================== */
.lb-hello { margin:var(--s2) 2px var(--s5); }
.lb-hello h1 { font-size:27px; line-height:1.12; font-weight:800; }
.lb-hello p { margin:6px 0 0; color:var(--ink-2); font-weight:500; font-size:14.5px; }

/* welcome / name card (first run) */
.lb-welcome { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s5);
  box-shadow:var(--sh-1); margin-bottom:var(--s5); }
.lb-welcome h3 { font-size:17px; margin-bottom:6px; }
.lb-welcome p { margin:0 0 var(--s4); color:var(--ink-2); font-size:13.5px; line-height:1.5; font-weight:500; }
.lb-namerow { display:flex; gap:10px; }
.lb-namerow input { flex:1; border:1.5px solid var(--line); background:var(--surface-2); border-radius:12px;
  padding:12px 14px; font-family:var(--font-body); font-weight:600; font-size:15px; color:var(--ink); outline:none; }
.lb-namerow input:focus { border-color:var(--berry-2); }

/* verse of day — muted */
.lb-daily { border-radius:var(--r-lg); padding:var(--s5); color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(140deg, #F4A87E 0%, #EC8A72 55%, #EE96A0 115%); box-shadow:var(--sh-2); margin-bottom:var(--s5); }
.lb-daily .k { font-family:var(--font-display); font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.72; font-weight:700; }
.lb-daily .v { font-family:var(--font-brand); font-size:21px; line-height:1.4; margin:10px 0 8px; font-weight:500; }
.lb-daily .ref { font-weight:600; font-size:13px; opacity:.8; letter-spacing:.02em; }

.lb-sect { display:flex; align-items:center; justify-content:space-between; margin:var(--s6) 0 var(--s3); }
.lb-sect h2 { font-size:18px; font-weight:700; }
.lb-sect .more { color:var(--berry); font-family:var(--font-display); font-size:13px; font-weight:600; background:none; border:none; cursor:pointer; padding:4px; }

/* explore — quiet cards */
.lb-explore { display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
.lb-xcard { position:relative; cursor:pointer; text-align:left; border-radius:18px;
  padding:16px; color:#fff; display:flex; flex-direction:column; align-items:flex-start; gap:16px;
  box-shadow:var(--sh-1); transition:transform .14s ease; -webkit-tap-highlight-color:transparent; }
.lb-xcard:active { transform:scale(.97); }
.lb-xcard .xicon { width:42px; height:42px; border-radius:12px; flex:0 0 auto;
  background:rgba(255,255,255,.2); display:grid; place-items:center; }
.lb-xcard .xicon svg.ic { width:23px; height:23px; color:#fff; stroke-width:2; }
.lb-xcard .xarr { position:absolute; top:16px; right:16px; opacity:.6; }
.lb-xcard .xarr svg.ic { width:18px; height:18px; color:#fff; }
.lb-xcard .xtext { display:flex; flex-direction:column; }
.lb-xcard .t { font-family:var(--font-display); font-size:16px; font-weight:700; color:#fff; display:block; }
.lb-xcard .d { font-size:12px; color:rgba(255,255,255,.9); font-weight:600; margin-top:2px; display:block; }

/* continue card */
.lb-continue { display:flex; align-items:center; gap:var(--s4); width:100%; border:1px solid var(--line); cursor:pointer;
  text-align:left; background:var(--surface); border-radius:var(--r-lg); padding:var(--s3); box-shadow:var(--sh-1);
  transition:transform .16s; margin-bottom:var(--s2); }
.lb-continue:active { transform:scale(.98); }
.lb-continue .lb-cover { width:62px; height:62px; border-radius:14px; flex:0 0 auto; }
.lb-continue .lb-cover .mono { font-size:26px; }
.lb-continue .meta { flex:1; min-width:0; }
.lb-continue .meta .kk { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--berry); display:block; }
.lb-continue .meta .tt { font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--ink); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.lb-continue .meta .pg { font-size:12.5px; color:var(--ink-2); font-weight:500; margin-top:3px; display:block; }
.lb-continue .go { color:var(--ink-3); flex:0 0 auto; }

/* ===================== SEARCH + CHIPS ===================== */
.lb-search { position:relative; margin:2px 0 var(--s3); }
.lb-search input { width:100%; border:1.5px solid var(--line); background:var(--surface); border-radius:14px;
  padding:13px 16px 13px 44px; font-size:15px; font-family:var(--font-body); font-weight:600; color:var(--ink); outline:none;
  transition:border-color .2s; }
.lb-search input::placeholder { color:var(--ink-3); font-weight:500; }
.lb-search input:focus { border-color:var(--berry-2); }
.lb-search .mag { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--ink-3); }
.lb-search .mag svg.ic { width:20px; height:20px; }

.lb-chips { display:flex; gap:8px; overflow-x:auto; margin-right:calc(-1*var(--pad)); padding:2px var(--pad) var(--s3) 2px; }
.lb-chips::-webkit-scrollbar { display:none; }
.lb-chip { flex:0 0 auto; border:1.5px solid var(--line); background:var(--surface); cursor:pointer; font-family:var(--font-display);
  font-weight:600; font-size:13.5px; color:var(--ink-2); padding:9px 15px; border-radius:999px; transition:all .18s; white-space:nowrap; }
.lb-chip.active { background:var(--berry); border-color:var(--berry); color:#fff; }

/* ===================== HEROES GRID ===================== */
.lb-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
.lb-hcard { border:1px solid var(--line); cursor:pointer; background:var(--surface); border-radius:var(--r);
  padding:var(--s4) var(--s3) var(--s3); box-shadow:var(--sh-1); text-align:center;
  transition:transform .16s, box-shadow .16s; display:flex; flex-direction:column; align-items:center; }
.lb-hcard:active { transform:scale(.96); box-shadow:var(--sh-2); }
.lb-hcard .lb-av { width:64px; height:64px; margin-bottom:var(--s3); }
.lb-hcard .lb-av .mono { font-size:26px; }
.lb-hcard .nm { font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--ink); line-height:1.2; }
.lb-hcard .gp { font-size:11px; color:var(--ink-3); font-weight:600; margin-top:3px; }

.lb-glabel { font-family:var(--font-display); font-size:12px; font-weight:700; color:var(--ink-3); text-transform:uppercase;
  letter-spacing:.1em; margin:var(--s5) 2px var(--s3); }
.lb-empty { text-align:center; color:var(--ink-3); padding:var(--s7) var(--s5); font-weight:600; }
.lb-empty svg.ic { width:40px; height:40px; margin:0 auto var(--s3); stroke-width:1.5; color:var(--ink-3); }

/* ===================== HERO PROFILE ===================== */
.lb-profile { border-radius:var(--r-xl); padding:var(--s6) var(--s5); text-align:center; color:#fff; position:relative;
  background:linear-gradient(155deg, var(--av-a), var(--av-b)); box-shadow:var(--sh-2); margin-bottom:var(--s4); overflow:hidden; }
.lb-profile .lb-av { width:92px; height:92px; margin:0 auto var(--s3); background:rgba(255,255,255,.18); border-radius:26px; }
.lb-profile .lb-av .mono { font-size:42px; color:#fff; }
.lb-profile h1 { font-size:28px; color:#fff; font-weight:800; }
.lb-profile .tg { font-family:var(--font-brand); font-size:15px; font-weight:400; margin-top:8px; opacity:.92; font-style:italic; }
.lb-profile .lb-av img, .lb-profile .lb-av .mono { animation:floaty 4.5s ease-in-out infinite; }
.lb-profile .fav { position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.2); color:#fff; display:grid; place-items:center; transition:transform .15s; }
.lb-profile .fav:active { transform:scale(.85); }
.lb-profile .fav svg.ic { width:22px; height:22px; }
.lb-profile .fav.on svg.ic { fill:#fff; }
.lb-profile .fav.pop { animation:heartpop .45s cubic-bezier(.3,1.4,.5,1); }
@keyframes heartpop { 0%{transform:scale(1)} 40%{transform:scale(1.4)} 100%{transform:scale(1)} }

/* staggered reveal */
.lb-stagger > * { opacity:0; animation:rise .5s cubic-bezier(.22,.7,.3,1) forwards; }
@keyframes rise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }

/* prev / next hero browser */
.lb-heronav { display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); margin-top:var(--s4); }
.lb-heronav-btn { display:flex; align-items:center; gap:10px; border:1px solid var(--line); background:var(--surface); cursor:pointer;
  border-radius:var(--r); padding:10px; box-shadow:var(--sh-1); transition:transform .15s; color:var(--ink-3); min-width:0; overflow:hidden; }
.lb-heronav-btn:active { transform:scale(.97); }
.lb-heronav-btn .lb-av { width:42px; height:42px; border-radius:12px; flex:0 0 auto; }
.lb-heronav-btn .lb-av .mono { font-size:18px; }
.lb-heronav-btn .t { flex:1; min-width:0; display:flex; flex-direction:column; }
.lb-heronav-btn .dir { font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.lb-heronav-btn .nm { font-family:var(--font-display); font-size:14px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lb-heronav-btn svg.ic { width:18px; height:18px; flex:0 0 auto; }

.lb-listen { display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:none; background:var(--surface);
  color:var(--berry-deep); font-family:var(--font-display); font-weight:600; font-size:14px; padding:11px 20px; border-radius:999px;
  box-shadow:var(--sh-1); transition:transform .15s; }
.lb-listen:active { transform:scale(.95); }
.lb-listen.playing { background:var(--berry); color:#fff; }
.lb-listen svg.ic { width:18px; height:18px; }

.lb-panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:var(--s4) var(--s5);
  box-shadow:var(--sh-1); margin-bottom:var(--s3); }
.lb-panel h3 { font-size:13px; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.08em; margin-bottom:var(--s3); }
.lb-panel ul { margin:0; padding:0; list-style:none; }
.lb-panel li { margin:0 0 var(--s3); padding-left:18px; position:relative; font-size:15px; font-weight:500; line-height:1.55; color:var(--ink-2); }
.lb-panel li:last-child { margin-bottom:0; }
.lb-panel li::before { content:""; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:50%; background:var(--berry-2); }
.lb-panel p.note { margin:0; font-weight:500; line-height:1.6; color:var(--ink-2); font-size:15px; }
.lb-panel p.tale { margin:0; font-family:var(--font-brand); font-weight:400; font-size:16.5px; line-height:1.7; color:var(--ink); }

/* Did You Know? */
.lb-facts { display:grid; gap:10px; }
.lb-fact { display:flex; gap:11px; align-items:flex-start; background:var(--berry-tint); border-radius:14px; padding:13px 15px;
  font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.5; }
.lb-fact .spark { color:var(--berry); flex:0 0 auto; margin-top:1px; }
.lb-fact .spark svg.ic { width:19px; height:19px; }

/* What we can learn */
.lb-lesson { background:linear-gradient(135deg, var(--berry), var(--berry-2)); color:#fff; border-radius:var(--r);
  padding:18px 20px; box-shadow:var(--sh-1); margin-bottom:var(--s3); }
.lb-lesson .k { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; opacity:.82; }
.lb-lesson p { margin:7px 0 0; font-family:var(--font-brand); font-size:17px; line-height:1.5; }

/* related stories heading */
.lb-relhead { font-family:var(--font-display); font-size:13px; font-weight:700; color:var(--ink-3); text-transform:uppercase;
  letter-spacing:.08em; margin:var(--s3) 0 var(--s1); }

.lb-basics { display:grid; gap:var(--s3); }
.lb-basics .row { display:flex; gap:var(--s3); font-size:14.5px; }
.lb-basics .k { color:var(--ink-3); min-width:100px; font-weight:600; }
.lb-basics .vv { color:var(--ink); font-weight:600; }

.lb-scripture { padding:var(--s3) 0; border-bottom:1px solid var(--line); }
.lb-scripture:first-of-type { padding-top:0; } .lb-scripture:last-child { border-bottom:none; padding-bottom:0; }
.lb-scripture .ref { display:inline-block; color:var(--berry); font-family:var(--font-display); font-weight:700; font-size:12px;
  letter-spacing:.04em; margin-bottom:6px; }
.lb-scripture p { margin:0; font-family:var(--font-brand); font-size:16px; font-weight:400; line-height:1.55; color:var(--ink); }

/* ===================== STORIES SHELVES ===================== */
.lb-shelf { margin:0; }
.lb-shelf-row { display:flex; gap:var(--s3); overflow-x:auto; scroll-snap-type:x mandatory;
  margin-right:calc(-1*var(--pad)); padding:var(--s1) var(--pad) var(--s4) 2px; }
.lb-shelf-row::-webkit-scrollbar { display:none; }
.lb-scard { flex:0 0 auto; width:144px; scroll-snap-align:start; border:1px solid var(--line); cursor:pointer; text-align:left;
  background:var(--surface); border-radius:var(--r); box-shadow:var(--sh-1); overflow:hidden; transition:transform .16s; padding:0; }
.lb-scard:active { transform:scale(.96); }
.lb-scard .lb-cover { height:104px; }
.lb-scard .lb-cover .mono { font-size:54px; }
.lb-scard .meta { padding:var(--s3); }
.lb-scard .t { font-family:var(--font-display); font-size:14px; font-weight:700; color:var(--ink); line-height:1.25; }

.lb-cathead { display:flex; align-items:center; gap:9px; margin:var(--s5) 0 var(--s1); }
.lb-cathead .dot { width:10px; height:10px; border-radius:3px; }
.lb-cathead h3 { font-size:16px; font-weight:700; }

.lb-sgrid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
.lb-sgrid .lb-scard { width:auto; }
.lb-sgrid .lb-cover { height:92px; }

/* ===================== READER ===================== */
.lb-reader { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh-2); overflow:hidden; }
.lb-reader .scene { height:220px; position:relative; transition:background .4s; }
.lb-reader .scene .lb-cover { position:absolute; inset:0; }
.lb-reader .scene .lb-cover .mono { font-size:96px; animation:floaty 4s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
.lb-reader .body { padding:var(--s5) var(--s5) var(--s4); }
.lb-reader .txt { font-family:var(--font-brand); font-size:19px; font-weight:400; line-height:1.6; color:var(--ink); min-height:84px; text-align:center; }
.lb-word { padding:0 1px; border-radius:5px; transition:background .15s, color .15s; }
.lb-word.on { background:var(--berry-tint); color:var(--berry-deep); }
.lb-reader .controls { display:flex; align-items:center; justify-content:space-between; padding:0 var(--s5) var(--s5); }
.lb-dots { display:flex; gap:6px; }
.lb-dot { width:7px; height:7px; border-radius:50%; background:var(--line); transition:all .25s; }
.lb-dot.on { background:var(--berry); width:20px; border-radius:4px; }
.lb-cbtn { width:48px; height:48px; border-radius:50%; border:none; cursor:pointer; background:var(--surface-2); color:var(--ink);
  display:grid; place-items:center; box-shadow:var(--sh-1); transition:transform .15s; }
.lb-cbtn:active { transform:scale(.9); } .lb-cbtn.primary { background:var(--berry); color:#fff; }
.lb-cbtn:disabled { opacity:.3; box-shadow:none; }
.lb-cbtn svg.ic { width:22px; height:22px; }
.lb-listen-bar { display:flex; justify-content:center; gap:10px; padding:0 var(--s5) var(--s4); }

/* ===================== HUB ===================== */
.lb-hub { display:flex; align-items:center; gap:var(--s4); width:100%; border:1px solid var(--line); cursor:pointer;
  text-align:left; background:var(--surface); border-radius:var(--r-lg); padding:var(--s4) var(--s5); box-shadow:var(--sh-1);
  margin-bottom:var(--s3); transition:transform .16s, box-shadow .16s; }
.lb-hub:active { transform:scale(.98); box-shadow:var(--sh-2); }
.lb-hub .ic-tile { width:56px; height:56px; border-radius:18px; display:grid; place-items:center; color:#fff; flex:0 0 auto;
  box-shadow:0 6px 16px rgba(67,53,47,.14); }
.lb-hub .ic-tile svg.ic { width:26px; height:26px; stroke-width:2; }
.lb-hub .tx { flex:1; min-width:0; }
.lb-hub .tx .t { display:block; font-family:var(--font-display); font-size:17px; font-weight:700; color:var(--ink); line-height:1.2; }
.lb-hub .tx .d { display:block; font-size:13.5px; color:var(--ink-2); font-weight:500; margin-top:3px; }
.lb-hub .arr { margin-left:auto; color:var(--ink-3); flex:0 0 auto; }

/* ===================== SHARED HEADER ===================== */
.lb-h { margin:2px 2px var(--s4); }
.lb-h h2 { font-size:22px; font-weight:800; }
.lb-h p { margin:4px 0 0; color:var(--ink-2); font-size:14px; font-weight:500; }

/* ===================== COLORING / TRACING ===================== */
.lb-stage { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-2); padding:var(--s3); touch-action:none; position:relative; }
.lb-stage svg, .lb-stage canvas { width:100%; height:auto; display:block; border-radius:16px; }
.lb-fill { fill:#fff; stroke:#3A3036; stroke-width:5; stroke-linejoin:round; cursor:pointer; transition:fill .15s; }
.lb-toolbar { display:flex; flex-wrap:wrap; gap:9px; align-items:center; justify-content:center; margin:var(--s4) 0; }
.lb-swatches { display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin:4px 0 6px; }
.lb-swatch { width:36px; height:36px; border-radius:50%; border:3px solid #fff; box-shadow:var(--sh-1); cursor:pointer; transition:transform .14s; }
.lb-swatch.sel { transform:scale(1.18); box-shadow:0 0 0 3px var(--berry); }
.lb-btn { border:none; cursor:pointer; font-family:var(--font-display); font-weight:600; font-size:14px; background:var(--surface);
  color:var(--berry-deep); padding:11px 18px; border-radius:999px; box-shadow:var(--sh-1); transition:transform .14s;
  display:inline-flex; align-items:center; gap:6px; }
.lb-btn:active { transform:scale(.94); } .lb-btn.primary { background:var(--berry); color:#fff; }
.lb-thumbs { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s3); }
.lb-thumb { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:var(--s3); cursor:pointer; box-shadow:var(--sh-1); transition:transform .14s; }
.lb-thumb:active { transform:scale(.96); }
.lb-thumb svg { width:100%; height:auto; }
.lb-thumb .t { font-family:var(--font-display); font-weight:600; color:var(--ink); margin-top:8px; font-size:14px; }

/* ===================== QUIZ ===================== */
.lb-card3d { perspective:1400px; margin:0 auto var(--s4); }
.lb-flip { position:relative; transform-style:preserve-3d; transition:transform .55s cubic-bezier(.22,.7,.3,1); min-height:200px; }
.lb-flip.flipped { transform:rotateY(180deg); }
.lb-face { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-2); padding:var(--s6); display:grid; place-content:center; text-align:center; }
.lb-face.back { transform:rotateY(180deg); background:linear-gradient(155deg, var(--a-sage), #7d9d8c); color:#fff; border:none; }
.lb-face .label { font-family:var(--font-display); font-weight:700; color:var(--ink-3); font-size:11px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:var(--s3); }
.lb-face.back .label { color:rgba(255,255,255,.8); }
.lb-face .clue { font-family:var(--font-brand); font-size:19px; font-weight:400; line-height:1.55; color:var(--ink); }
.lb-face .ans { font-family:var(--font-display); font-size:34px; color:#fff; font-weight:800; }
.lb-options { display:grid; gap:10px; }
.lb-opt { border:1.5px solid var(--line); cursor:pointer; font-family:var(--font-display); font-weight:600; font-size:17px;
  background:var(--surface); color:var(--ink); padding:16px; border-radius:var(--r); box-shadow:var(--sh-1); transition:transform .14s, background .2s; }
.lb-opt:active { transform:scale(.98); }
.lb-opt.right { background:var(--a-sage); border-color:var(--a-sage); color:#fff; }
.lb-opt.wrong { background:var(--berry-2); border-color:var(--berry-2); color:#fff; }
.lb-progress { text-align:center; font-family:var(--font-display); font-weight:600; color:var(--ink-2); font-size:14px; margin-bottom:var(--s4); }
.lb-score { text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:var(--s7) var(--s5); box-shadow:var(--sh-2); }
.lb-score .big { font-family:var(--font-display); font-size:56px; color:var(--berry); font-weight:800; }

/* ===================== ACCESS ===================== */
:focus-visible { outline:3px solid var(--a-sky); outline-offset:3px; border-radius:8px; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* ===================== GAMES ===================== */
.lb-qhead { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.lb-scorepill { background:var(--berry-tint); color:var(--berry-deep); font-weight:700; font-size:12px; padding:5px 12px; border-radius:999px; }
.lb-qtext { font-family:var(--font-display); font-size:20px; font-weight:800; color:var(--ink); line-height:1.3; }
.lb-gamehint { color:var(--ink-2); font-size:14px; font-weight:500; margin:0 0 14px; }
.lb-btn.ghost { background:var(--surface); color:var(--ink); border:1px solid var(--line); }

/* win screen */
.lb-win { text-align:center; padding:30px 16px; animation:rise .5s both; }
.lb-win .burst { width:74px; height:74px; margin:0 auto 14px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--berry),var(--berry-2)); box-shadow:var(--sh-2); }
.lb-win .burst svg.ic { width:40px; height:40px; color:#fff; fill:#fff; }
.lb-win h2 { font-family:var(--font-brand); font-size:26px; color:var(--ink); margin:0 0 6px; }
.lb-win p { color:var(--ink-2); font-size:15px; margin:0 auto; max-width:300px; line-height:1.5; }
.lb-win-row { display:flex; gap:12px; justify-content:center; margin-top:22px; }

/* memory match */
.lb-mem { display:grid; grid-template-columns:repeat(var(--cols),1fr); gap:10px; margin-top:6px; }
.lb-mcard { position:relative; aspect-ratio:1; border:none; background:transparent; cursor:pointer; }
.lb-mcard .mface { position:absolute; inset:0; border-radius:16px; display:grid; place-items:center;
  backface-visibility:hidden; transition:transform .4s cubic-bezier(.4,.1,.3,1); box-shadow:var(--sh-1); overflow:hidden; }
.lb-mcard .back { background:linear-gradient(135deg,var(--berry),var(--berry-2)); transform:rotateY(0deg); }
.lb-mcard .back svg { width:46%; height:46%; opacity:.9; }
.lb-mcard .front { transform:rotateY(180deg); }
.lb-mcard .front img { width:100%; height:100%; object-fit:cover; }
.lb-mcard.up .back, .lb-mcard.done .back { transform:rotateY(180deg); }
.lb-mcard.up .front, .lb-mcard.done .front { transform:rotateY(360deg); }
.lb-mcard.done .front { box-shadow:0 0 0 3px var(--a-sage); }

/* memory verse */
.lb-verseline { min-height:56px; display:flex; flex-wrap:wrap; gap:8px; padding:14px; background:var(--surface);
  border:1px dashed var(--berry-2); border-radius:16px; margin-bottom:16px; }
.lb-wfilled { background:var(--berry-tint); color:var(--berry-deep); font-weight:700; padding:6px 12px; border-radius:10px; font-size:15px; animation:rise .25s both; }
.lb-versepool { display:flex; flex-wrap:wrap; gap:10px; }
.lb-wtile { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:11px 15px; font-size:15px;
  font-weight:700; color:var(--ink); cursor:pointer; box-shadow:var(--sh-1); transition:transform .12s; }
.lb-wtile:active { transform:scale(.94); }
.lb-wtile.used { opacity:0; pointer-events:none; }
.lb-wtile.nudge { animation:nudge .35s; border-color:var(--berry-deep); }
@keyframes nudge { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

/* connect the dots */
.lb-dots-wrap { background:var(--surface); border-radius:var(--r-lg); padding:8px; box-shadow:var(--sh-1); }
.lb-dots-svg { width:100%; height:auto; display:block; touch-action:manipulation; }
.lb-dot-g { cursor:pointer; }
.lb-dot-g circle { fill:var(--berry-tint); stroke:var(--berry); stroke-width:2.5; }
.lb-dot-g text { font:700 13px var(--font-display); fill:var(--berry-deep); }
.lb-dot-g.hit circle { fill:var(--berry); stroke:var(--berry-deep); }
.lb-dot-g.hit text { fill:#fff; }
.lb-dot-g circle.nudge { animation:nudge .3s; }
.lb-dotline { stroke:var(--berry); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; transition:fill .4s; }
.lb-dotline.complete { fill:var(--berry-tint); }

/* maze */
.lb-maze { position:relative; display:grid; grid-template-columns:repeat(var(--cols),1fr);
  width:100%; max-width:330px; margin:6px auto 0; aspect-ratio:calc(var(--cols)/var(--rows));
  background:var(--surface-2); border-radius:14px; padding:6px; box-shadow:var(--sh-1); gap:2px; }
.lb-cell { border-radius:4px; display:grid; place-items:center; }
.lb-cell.wall { background:var(--berry); }
.lb-cell .goal { width:100%; height:100%; display:grid; place-items:center; }
.lb-cell .goal svg, .lb-lamb svg { width:84%; height:84%; }
.lb-lamb { width:100%; height:100%; display:grid; place-items:center; }
.lb-lamb.cheer { animation:pop .5s; }
.lb-dpad { display:grid; grid-template-columns:repeat(3,56px); grid-template-rows:repeat(3,56px);
  justify-content:center; gap:8px; margin:22px auto 0; }
.lb-dbtn { border:none; background:var(--surface); box-shadow:var(--sh-1); border-radius:14px; cursor:pointer;
  color:var(--berry-deep); display:grid; place-items:center; }
.lb-dbtn:active { transform:scale(.92); background:var(--berry-tint); }
.lb-dbtn svg.ic { width:24px; height:24px; }
.lb-dbtn.up { grid-area:1/2; } .lb-dbtn.left { grid-area:2/1; } .lb-dbtn.right { grid-area:2/3; } .lb-dbtn.down { grid-area:3/2; }
.lb-dbtn.up svg { transform:rotate(-90deg); } .lb-dbtn.down svg { transform:rotate(90deg); }
@keyframes pop { 0%{transform:scale(1)} 45%{transform:scale(1.25)} 100%{transform:scale(1)} }

/* ===================== HEADER / BRAND ===================== */
.lb-brand-btn { border:none; background:transparent; cursor:pointer; padding:0; }
.lb-brand-btn:active { transform:scale(.97); }

/* ===================== SETTINGS ===================== */
.lb-set-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s4) var(--s5); box-shadow:var(--sh-1); margin-bottom:var(--s5); }
.lb-set-label { font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--ink); margin:0 2px var(--s2); }
.lb-set-card .lb-set-label { margin:0; }
.lb-set-card .lb-chiprow { margin-top:12px; }
.lb-set-card .lb-namerow { margin-top:12px; }
.lb-set-note { font-size:13px; color:var(--ink-2); margin-top:8px; line-height:1.5; }
.lb-set-about { font-size:14.5px; color:var(--ink-2); line-height:1.6; margin:10px 0 12px; }
.lb-set-ver { font-size:12px; color:var(--ink-3); font-weight:600; }
.lb-set-rowcard { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.lb-set-rowcard .lb-set-note { margin-top:3px; }

.lb-switch { width:52px; height:30px; border-radius:999px; border:none; background:var(--line);
  position:relative; cursor:pointer; flex:0 0 auto; transition:background .2s; }
.lb-switch .knob { position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%;
  background:#fff; box-shadow:var(--sh-1); transition:transform .2s; }
.lb-switch.on { background:var(--berry); }
.lb-switch.on .knob { transform:translateX(22px); }

.lb-btn.ghost.danger { color:var(--berry-deep); border-color:var(--berry-2); background:var(--surface); }
.lb-btn.ghost.danger:active { background:var(--berry-tint); }

/* ===================== REDUCED MOTION ===================== */
.lb-reduce-motion *, .lb-reduce-motion *::before, .lb-reduce-motion *::after {
  animation-duration:.001ms !important; animation-iteration-count:1 !important;
  transition-duration:.001ms !important; }

/* ===================== MORE ACTIVITIES ===================== */
.lb-ws{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:4px;max-width:360px;margin:10px auto;}
.lb-wscell{aspect-ratio:1;border:none;border-radius:8px;background:var(--surface,#fff);color:var(--ink,#43352F);
  font-weight:800;font-size:clamp(12px,3.6vw,18px);box-shadow:0 1px 2px rgba(67,53,47,.08);cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:background .15s,transform .1s;}
.lb-wscell:active{transform:scale(.92);}
.lb-wscell.sel{background:var(--berry-2,#F4B2A1);color:#fff;}
.lb-wscell.found{background:var(--sage,#9CC0A6);color:#fff;}
.lb-wslist{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center;margin:16px 6px 6px;}
.lb-wsword{font-weight:700;color:var(--ink,#43352F);letter-spacing:.04em;}
.lb-wsword.done{color:var(--berry-deep,#D2694F);text-decoration:line-through;opacity:.55;}

.lb-seq{display:flex;flex-direction:column;gap:10px;margin:12px 0;}
.lb-seqrow{display:flex;align-items:center;gap:10px;background:var(--surface,#fff);border-radius:16px;
  padding:12px;box-shadow:0 2px 6px rgba(67,53,47,.07);transition:background .25s;}
.lb-seqrow.right{background:#EAF3EC;}
.lb-seqnum{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--berry,#EC8A72);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:14px;}
.lb-seqtxt{flex:1;color:var(--ink,#43352F);font-size:15px;line-height:1.35;}
.lb-seqbtns{display:flex;flex-direction:column;gap:4px;}
.lb-seqbtn{width:36px;height:26px;border:none;border-radius:8px;background:var(--berry-tint,#FCEDE7);
  color:var(--berry-deep,#D2694F);font-size:15px;font-weight:800;cursor:pointer;}
.lb-seqbtn:disabled{opacity:.3;cursor:default;}

.lb-actwrap{display:flex;flex-direction:column;}
.lb-sortcard,.lb-fillcard{background:var(--surface,#fff);border-radius:20px;padding:22px 18px;text-align:center;
  box-shadow:0 3px 10px rgba(67,53,47,.08);margin:10px 0 4px;}
.lb-sortmono{width:64px;height:64px;border-radius:50%;background:var(--berry-tint,#FCEDE7);color:var(--berry-deep,#D2694F);
  font-family:var(--serif,"Fraunces"),serif;font-weight:700;font-size:30px;display:grid;place-items:center;margin:0 auto 10px;}
.lb-sortcard h2{margin:.1em 0;color:var(--ink,#43352F);}
.lb-sortcard p,.lb-fillref{color:#9a8a82;font-size:14px;}
.lb-sortbtns,.lb-fillopts{display:flex;flex-direction:column;gap:10px;margin-top:14px;}
.lb-sortbtn,.lb-fillopt{border:none;border-radius:14px;padding:15px;font-size:16px;font-weight:800;color:#fff;
  cursor:pointer;transition:transform .1s;}
.lb-sortbtn:active,.lb-fillopt:active{transform:scale(.98);}
.lb-fillopt{background:var(--berry,#EC8A72);}
.lb-sortbtn.good,.lb-fillopt.good{background:#6FAE86 !important;box-shadow:0 0 0 3px rgba(111,174,134,.3);}
.lb-sortbtn.bad,.lb-fillopt.bad{background:#D98B82 !important;}
.lb-fillverse{font-size:18px;line-height:1.6;color:var(--ink,#43352F);}
.lb-blank{display:inline-block;min-width:62px;border-bottom:3px solid var(--berry-2,#F4B2A1);
  font-weight:800;color:var(--berry-deep,#D2694F);}
.lb-blank.good{color:#6FAE86;border-color:#6FAE86;}
.lb-blank.bad{color:#D98B82;border-color:#D98B82;}

/* ===================== MATCH + ODD ONE OUT ===================== */
.lb-match{display:flex;gap:12px;margin:12px 0;}
.lb-matchcol{flex:1;display:flex;flex-direction:column;gap:10px;}
.lb-matchbtn{border:none;border-radius:14px;padding:14px 12px;font-size:15px;font-weight:700;
  background:var(--surface,#fff);color:var(--ink,#43352F);box-shadow:0 2px 6px rgba(67,53,47,.07);
  cursor:pointer;text-align:center;line-height:1.3;transition:outline .1s,background .2s;}
.lb-matchbtn.clue{background:var(--berry-tint,#FCEDE7);font-weight:600;}
.lb-matchbtn.sel{outline:3px solid var(--berry,#EC8A72);}
.lb-matchbtn.done{background:#6FAE86;color:#fff;box-shadow:none;cursor:default;}
.lb-matchbtn.shake{animation:lb-shake .4s;}
@keyframes lb-shake{0%,100%{transform:translateX(0);}20%{transform:translateX(-6px);}40%{transform:translateX(6px);}60%{transform:translateX(-4px);}80%{transform:translateX(4px);}}

.lb-oddq{font-size:17px;font-weight:700;color:var(--ink,#43352F);text-align:center;margin:16px 8px;line-height:1.35;}
.lb-oddgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.lb-oddbtn{border:none;border-radius:16px;padding:24px 12px;font-size:16px;font-weight:700;
  background:var(--surface,#fff);color:var(--ink,#43352F);box-shadow:0 2px 8px rgba(67,53,47,.08);
  cursor:pointer;transition:transform .1s;}
.lb-oddbtn:active{transform:scale(.97);}
.lb-oddbtn.good{background:#6FAE86;color:#fff;}
.lb-oddbtn.bad{background:#D98B82;color:#fff;}

/* ===================== SINGLE-PAGE STORY READER ===================== */
.lb-story-cover{aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;position:relative;box-shadow:var(--sh-2);margin-bottom:var(--s5);background:var(--surface-2);}
.lb-story-cover .lb-cover{position:absolute;inset:0;}
.lb-story-cover .lb-cover img,.lb-art-scene .lb-cover img{object-fit:contain;object-position:center;}
.lb-story-cover .lb-cover .mono{font-size:100px;animation:floaty 4s ease-in-out infinite;}
.lb-article{font-family:var(--font-brand);font-size:19px;line-height:1.74;color:var(--ink);}
.lb-article p{margin:0 0 1.05em;}
.lb-article p.first::first-letter{font-family:var(--font-brand);font-size:3.1em;line-height:.8;float:left;
  margin:.06em .12em 0 0;color:var(--berry-deep);font-weight:600;}
.lb-art-scene{aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;position:relative;margin:14px 0 18px;box-shadow:var(--sh-1);background:var(--surface-2);}
.lb-art-scene .lb-cover{position:absolute;inset:0;}
.lb-end{display:flex;align-items:center;justify-content:center;gap:9px;color:var(--ink-3);
  font-family:var(--font-display);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:12px;margin:20px 0 4px;}
.lb-end .dot{width:8px;height:8px;border-radius:50%;}
.lb-storynav{display:flex;gap:10px;align-items:stretch;margin:24px 0 8px;}
.lb-storynav-btn{flex:1;min-width:0;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);
  padding:13px 14px;cursor:pointer;font-family:var(--font-display);font-weight:700;color:var(--ink);
  display:flex;align-items:center;gap:8px;font-size:13px;box-shadow:var(--sh-1);transition:transform .1s;}
.lb-storynav-btn:active{transform:scale(.97);}
.lb-storynav-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lb-storynav-btn.next{justify-content:flex-end;}
.lb-storynav-btn.all{flex:0 0 auto;background:var(--berry);color:#fff;border:none;justify-content:center;}
.lb-storynav-btn svg.ic{width:18px;height:18px;flex:0 0 auto;}

/* ===================== QUIZ GLOW-UP (kid friendly) ===================== */
.lb-qhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;}
.lb-progress{display:inline-block;background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:7px 15px;font-family:var(--font-display);font-weight:800;font-size:13px;color:var(--ink-2);margin:0;text-align:left;}
.lb-scorepill{background:linear-gradient(135deg,var(--a-gold),#e7b047);color:#fff;font-weight:800;font-size:13px;
  padding:7px 15px;border-radius:999px;box-shadow:0 3px 10px rgba(240,200,121,.5);}
.lb-qtext{font-family:var(--font-display);font-size:21px;font-weight:800;color:var(--ink);line-height:1.35;
  background:linear-gradient(160deg,#fff,var(--berry-tint));border:1px solid var(--line);border-radius:22px;
  padding:22px 18px;text-align:center;box-shadow:var(--sh-1);margin:2px 0;}

.lb-options{display:grid;gap:12px;counter-reset:opt;margin-top:16px;}
.lb-opt{position:relative;display:flex;align-items:center;gap:14px;text-align:left;border:none;border-radius:18px;
  background:var(--surface);box-shadow:0 3px 10px rgba(67,53,47,.07);padding:15px 18px;
  font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--ink);cursor:pointer;
  transition:transform .12s,box-shadow .2s,background .2s;}
.lb-opt::before{counter-increment:opt;content:counter(opt,upper-alpha);flex:0 0 auto;width:36px;height:36px;
  border-radius:50%;display:grid;place-items:center;font-size:16px;font-weight:800;color:#fff;background:var(--berry-2);}
.lb-opt:nth-child(4n+1)::before{background:var(--a-sky);}
.lb-opt:nth-child(4n+2)::before{background:var(--a-gold);}
.lb-opt:nth-child(4n+3)::before{background:var(--a-lilac);}
.lb-opt:nth-child(4n+4)::before{background:var(--a-teal);}
.lb-opt:active{transform:scale(.98);}
.lb-opt.right{background:var(--a-sage);color:#fff;animation:lb-pop .35s;}
.lb-opt.right::before{background:rgba(255,255,255,.35);content:"\2713";}
.lb-opt.wrong{background:var(--berry-2);color:#fff;}
.lb-opt.wrong::before{background:rgba(255,255,255,.35);content:"\2715";}
.lb-opt:disabled{cursor:default;}
@keyframes lb-pop{0%{transform:scale(1);}40%{transform:scale(1.04);}100%{transform:scale(1);}}

/* Who Am I clue card a touch more playful */
.lb-face:not(.back){background:linear-gradient(160deg,#fff,var(--berry-glow));}
.lb-face .clue{color:var(--ink);}

/* Result screen pops */
.lb-score .big{display:inline-grid;place-items:center;width:124px;height:124px;border-radius:50%;
  background:radial-gradient(circle at 32% 26%, var(--berry-glow), var(--berry-tint));
  color:var(--berry-deep);font-size:46px;font-weight:800;margin:0 auto 12px;
  box-shadow:0 8px 22px rgba(236,138,114,.25);}
.lb-score .big .of{font-size:18px;color:var(--ink-3);font-weight:700;}
.lb-score .best{margin-top:6px;color:var(--ink-2);font-weight:700;font-size:14px;
  background:var(--berry-tint);display:inline-block;padding:6px 14px;border-radius:999px;}

/* ===================== TRUE OR FALSE ===================== */
.lb-tfcard{background:linear-gradient(160deg,#fff,var(--berry-tint));border:1px solid var(--line);border-radius:22px;
  padding:30px 22px;text-align:center;font-family:var(--font-display);font-weight:800;font-size:20px;
  color:var(--ink);line-height:1.42;box-shadow:var(--sh-1);margin:6px 0 16px;}
.lb-tfbtns{display:flex;gap:12px;}
.lb-tfbtn{flex:1;border:none;border-radius:18px;padding:22px;font-family:var(--font-display);font-size:19px;
  font-weight:800;color:#fff;cursor:pointer;box-shadow:0 3px 10px rgba(67,53,47,.1);transition:transform .1s;}
.lb-tfbtn:active{transform:scale(.97);}
.lb-tfbtn.good{box-shadow:0 0 0 4px rgba(111,174,134,.4);}
.lb-tfbtn.bad{opacity:.8;}
.lb-tfbtn:disabled{cursor:default;}

/* ===================== BIBLE READER ===================== */
/* keep 6 tabs comfortable */
.lb-tabs .lb-tab{min-width:0;}
.lb-tab span,.lb-tab{font-size:11px;}

.lb-bible-ctrls{display:flex;flex-direction:column;gap:var(--s3);margin:0 0 var(--s3);}
.lb-chiprow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.lb-bible-summary{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--berry-deep);background:var(--berry-tint);border-radius:14px;padding:11px 15px;margin:0 0 var(--s4);line-height:1.4;}
.lb-bible-summary .x{color:var(--ink-2);font-weight:600;}
.lb-chiplabel{font-family:var(--font-display);font-weight:800;font-size:12px;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.08em;width:74px;flex:0 0 auto;}
.lb-chip{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:9px 14px;cursor:pointer;
  font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--ink);display:flex;flex-direction:column;
  line-height:1.15;transition:transform .1s;}
.lb-chip .sub{font-size:10px;font-weight:600;color:var(--ink-3);margin-top:2px;}
.lb-chip:active{transform:scale(.97);}
.lb-chip.on{background:var(--berry);border-color:var(--berry);color:#fff;}
.lb-chip.on .sub{color:rgba(255,255,255,.85);}

.lb-bible-continue{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--berry),var(--berry-deep));color:#fff;border-radius:var(--r-lg);
  padding:16px 18px;margin-bottom:18px;box-shadow:var(--sh-1);}
.lb-bible-continue .meta{flex:1;display:flex;flex-direction:column;}
.lb-bible-continue .k{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.85;}
.lb-bible-continue .t{font-family:var(--font-brand);font-size:19px;font-weight:600;margin-top:2px;}
.lb-bible-continue .go svg.ic{width:22px;height:22px;}

.lb-bible-sect{margin-bottom:22px;}
.lb-bible-sect .lb-cathead{display:flex;align-items:center;gap:8px;margin:0 0 12px;}
.lb-bible-sect .lb-cathead h3{font-size:16px;}
.lb-bible-sect .lb-cathead .dot{width:9px;height:9px;border-radius:50%;}
.lb-bookgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.lb-bookbtn{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:14px 14px;cursor:pointer;
  font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--ink);text-align:left;
  box-shadow:var(--sh-1);transition:transform .1s;}
.lb-bookbtn:active{transform:scale(.98);}

.lb-chapgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}
.lb-chapbtn{aspect-ratio:1/1;border:none;background:var(--surface);border-radius:14px;cursor:pointer;
  font-family:var(--font-display);font-weight:800;font-size:17px;color:var(--berry-deep);
  box-shadow:var(--sh-1);transition:transform .1s;}
.lb-chapbtn:active{transform:scale(.95);}

.lb-chapter{font-family:var(--font-brand);font-size:18px;line-height:1.75;color:var(--ink);}
.lb-verse{margin:0 0 .7em;}
.lb-verse .vn{font-family:var(--font-display);font-weight:800;font-size:12px;color:var(--berry);
  vertical-align:super;margin-right:6px;}
.lb-loading{color:var(--ink-2);font-family:var(--font-display);font-weight:600;}

.lb-deutero-card{background:linear-gradient(160deg,#fff,var(--berry-tint));border:1px solid var(--line);
  border-radius:20px;padding:22px;font-family:var(--font-brand);font-size:18px;line-height:1.6;color:var(--ink);
  box-shadow:var(--sh-1);}
.lb-deutero-card .note{font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--ink-3);margin:14px 0 0;}
.lb-chapnav{margin-top:18px;}

/* ===================== JOURNAL ===================== */
.lb-journal-new{display:flex;align-items:center;gap:10px;width:100%;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--a-clay),#c98a6c);color:#fff;border-radius:var(--r-lg);
  padding:16px 18px;font-family:var(--font-display);font-weight:700;font-size:16px;box-shadow:var(--sh-1);margin-bottom:18px;}
.lb-journal-new .plus{font-size:24px;font-weight:800;line-height:1;}
.lb-journal-list{display:flex;flex-direction:column;gap:12px;}
.lb-journal-card{display:flex;flex-direction:column;gap:4px;width:100%;text-align:left;border:1px solid var(--line);
  background:var(--surface);border-radius:18px;padding:16px 18px;cursor:pointer;box-shadow:var(--sh-1);transition:transform .1s;}
.lb-journal-card:active{transform:scale(.99);}
.lb-journal-card .d{font-family:var(--font-display);font-weight:800;font-size:12px;color:var(--berry);text-transform:uppercase;letter-spacing:.06em;}
.lb-journal-card .pr{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--ink-2);}
.lb-journal-card .tx{font-family:var(--font-brand);font-size:16px;color:var(--ink);line-height:1.4;}
.lb-journal-edit{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:var(--sh-1);}
.lb-journal-prompt{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--berry-deep);
  background:var(--berry-tint);border-radius:14px;padding:12px 14px;margin-bottom:12px;line-height:1.35;}
.lb-journal-text{width:100%;border:none;outline:none;resize:vertical;font-family:var(--font-brand);font-size:18px;
  line-height:1.6;color:var(--ink);background:transparent;min-height:200px;}
.lb-journal-actions{display:flex;gap:12px;margin-top:16px;}
.lb-journal-actions .lb-btn{flex:1;padding:14px;}

/* ===================== PROFILE ===================== */
.lb-profile-head{display:flex;align-items:center;gap:16px;margin:0 0 var(--s5);}
.lb-avatar-big{width:84px;height:84px;border-radius:50%;border:none;cursor:pointer;display:grid;place-items:center;
  color:#fff;box-shadow:var(--sh-1);flex:0 0 auto;}
.lb-avatar-big svg.ic{width:42px;height:42px;}
.lb-profile-info .nm{font-family:var(--font-brand);font-size:26px;font-weight:600;color:var(--ink);}
.lb-profile-info .sub{font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--ink-2);margin-top:2px;}
.lb-avatar-row{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 var(--s5);}
.lb-avatar-opt{width:50px;height:50px;border-radius:50%;border:3px solid transparent;cursor:pointer;display:grid;place-items:center;color:#fff;transition:transform .1s;}
.lb-avatar-opt svg.ic{width:26px;height:26px;}
.lb-avatar-opt:active{transform:scale(.92);}
.lb-avatar-opt.on{border-color:var(--ink);}
.lb-headav svg.ic{width:22px;height:22px;}
.lb-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 var(--s5);}
.lb-stat{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px 10px;text-align:center;box-shadow:var(--sh-1);}
.lb-stat .num{font-family:var(--font-display);font-weight:800;font-size:30px;line-height:1;}
.lb-stat .lab{font-family:var(--font-display);font-weight:600;font-size:11px;color:var(--ink-2);margin-top:6px;line-height:1.25;}
.lb-profile-links{display:flex;flex-direction:column;gap:12px;margin:0;}

/* ===================== WORD SCRAMBLE ===================== */
.lb-scrm-answer{display:flex;gap:8px;justify-content:center;margin:16px 0;flex-wrap:wrap;}
.lb-scrm-slot{width:36px;height:46px;border-bottom:3px solid var(--line);display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:22px;color:var(--ink);}
.lb-scrm-slot.filled{border-color:var(--berry);}
.lb-scrm-answer.right .lb-scrm-slot{border-color:#6FAE86;color:#6FAE86;}
.lb-scrm-answer.wrong .lb-scrm-slot{border-color:#D98B82;color:#D98B82;animation:lb-shake .4s;}
.lb-scrm-tray{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:8px;}
.lb-scrm-tile{width:46px;height:46px;border:none;border-radius:12px;background:var(--surface);box-shadow:var(--sh-1);
  font-family:var(--font-display);font-weight:800;font-size:22px;color:var(--ink);cursor:pointer;transition:transform .1s;}
.lb-scrm-tile:active{transform:scale(.92);}
.lb-scrm-tile.used{opacity:.25;}

/* ===================== STICKERS & REWARDS ===================== */
.lb-sticker-bar{height:12px;border-radius:8px;background:var(--surface-2);overflow:hidden;margin:0 0 20px;border:1px solid var(--line);}
.lb-sticker-bar > span{display:block;height:100%;background:linear-gradient(90deg,var(--a-gold),var(--berry));border-radius:8px;transition:width .4s;}
.lb-sticker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.lb-sticker{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;}
.lb-sticker .badge{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:var(--surface-2);box-shadow:var(--sh-1);}
.lb-sticker .badge svg.ic{width:34px;height:34px;}
.lb-sticker .badge .q{font-family:var(--font-display);font-weight:800;font-size:30px;color:var(--ink-3);}
.lb-sticker.got .badge{box-shadow:0 6px 16px rgba(210,105,79,.28);}
.lb-sticker:not(.got) .badge{opacity:.7;}
.lb-sticker .nm{font-family:var(--font-display);font-weight:800;font-size:12px;color:var(--ink);line-height:1.2;}
.lb-sticker:not(.got) .nm{color:var(--ink-3);}
.lb-sticker .hint{font-family:var(--font-display);font-weight:600;font-size:10px;color:var(--ink-3);line-height:1.2;}

.lb-sticker-banner{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--a-gold),var(--berry));color:#fff;border-radius:var(--r-lg);
  padding:16px 18px;margin:0 0 var(--s5);box-shadow:var(--sh-1);}
.lb-sticker-banner .ic{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;flex:0 0 auto;}
.lb-sticker-banner .ic svg.ic{width:24px;height:24px;}
.lb-sticker-banner .tx{flex:1;display:flex;flex-direction:column;gap:6px;}
.lb-sticker-banner .t{font-family:var(--font-brand);font-size:19px;font-weight:600;}
.lb-sticker-banner .d{font-family:var(--font-display);font-size:12px;font-weight:700;opacity:.9;}
.lb-sticker-banner .bar{height:8px;border-radius:6px;background:rgba(255,255,255,.3);overflow:hidden;}
.lb-sticker-banner .bar > span{display:block;height:100%;background:#fff;border-radius:6px;}
.lb-sticker-banner .arr svg.ic{width:22px;height:22px;}

.lb-toast{position:fixed;left:50%;bottom:88px;transform:translate(-50%,24px);z-index:200;
  display:flex;align-items:center;gap:12px;background:var(--ink);color:#fff;border-radius:18px;
  padding:12px 18px 12px 12px;box-shadow:0 10px 30px rgba(0,0,0,.28);opacity:0;transition:opacity .35s,transform .35s;max-width:88vw;}
.lb-toast.show{opacity:1;transform:translate(-50%,0);}
.lb-toast .ic{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:0 0 auto;}
.lb-toast .ic svg.ic{width:22px;height:22px;}
.lb-toast .tx{display:flex;flex-direction:column;line-height:1.25;}
.lb-toast .tx b{font-family:var(--font-display);font-weight:800;font-size:13px;}
.lb-toast .tx .nm{font-family:var(--font-brand);font-size:16px;}

/* ===================== HUB SECTIONS ===================== */
.lb-hub-sect{font-family:var(--font-display);font-weight:800;font-size:12px;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.09em;margin:20px 2px 10px;}
.lb-view > .lb-hub-sect:first-of-type{margin-top:10px;}

/* ===================== BIBLE READER EXTRAS ===================== */
.lb-bible-saved{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1px solid var(--line);cursor:pointer;
  background:var(--surface);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:18px;box-shadow:var(--sh-1);}
.lb-bible-saved .ic{width:40px;height:40px;border-radius:50%;background:var(--berry-tint);display:grid;place-items:center;color:var(--berry-deep);flex:0 0 auto;}
.lb-bible-saved .ic svg.ic{width:20px;height:20px;}
.lb-bible-saved .tx{flex:1;display:flex;flex-direction:column;}
.lb-bible-saved .t{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--ink);}
.lb-bible-saved .d{font-size:12px;color:var(--ink-3);font-weight:600;margin-top:1px;}
.lb-bible-saved .go svg.ic{width:20px;height:20px;color:var(--ink-3);}

.lb-bible-toolbar{display:flex;gap:10px;align-items:center;margin:2px 0 14px;}
.lb-tool-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);
  border-radius:14px;padding:9px 14px;cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--ink);box-shadow:var(--sh-1);transition:transform .1s;}
.lb-tool-btn:active{transform:scale(.96);}
.lb-tool-btn svg.ic{width:18px;height:18px;}
.lb-tool-btn.round{width:42px;height:42px;justify-content:center;padding:0;font-size:15px;font-weight:800;}
.lb-tool-btn.on{background:var(--berry);border-color:var(--berry);color:#fff;}

.lb-verse{cursor:pointer;position:relative;border-radius:10px;padding:2px 4px;transition:background .15s;}
.lb-verse .vmark{display:none;margin-left:6px;vertical-align:middle;color:var(--berry);}
.lb-verse .vmark svg.ic{width:14px;height:14px;fill:currentColor;}
.lb-verse.saved{background:var(--berry-tint);}
.lb-verse.saved .vmark{display:inline-block;}
.lb-verse.reading{background:var(--a-gold);background:color-mix(in srgb,var(--a-gold) 38%,transparent);}

.lb-bookbtn{position:relative;}
.lb-bookbtn .rd{display:block;font-family:var(--font-display);font-weight:700;font-size:11px;color:var(--berry-deep);margin-top:3px;}
.lb-bookbtn.started{border-color:var(--berry-2);}
.lb-chapbtn.read{background:var(--berry-tint);color:var(--berry-deep);position:relative;}
.lb-chapbtn.read::after{content:"\2713";position:absolute;top:4px;right:6px;font-size:10px;font-weight:800;color:var(--a-sage);}

.lb-saved-list{display:flex;flex-direction:column;gap:12px;}
.lb-saved-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px 46px 16px 18px;box-shadow:var(--sh-1);}
.lb-saved-card .ref{font-family:var(--font-display);font-weight:800;font-size:12px;color:var(--berry);text-transform:uppercase;letter-spacing:.05em;cursor:pointer;}
.lb-saved-card .tx{font-family:var(--font-brand);font-size:18px;line-height:1.5;color:var(--ink);margin-top:5px;cursor:pointer;}
.lb-saved-card .rm{position:absolute;top:14px;right:14px;border:none;background:transparent;cursor:pointer;color:var(--berry);}
.lb-saved-card .rm svg.ic{width:20px;height:20px;fill:currentColor;}

/* ===================== BIBLE SEARCH ===================== */
.lb-bible-results{display:flex;flex-direction:column;gap:10px;margin-top:4px;}
.lb-bible-result{text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:13px 16px;cursor:pointer;box-shadow:var(--sh-1);transition:transform .1s;}
.lb-bible-result:active{transform:scale(.98);}
.lb-bible-result .ref{display:block;font-family:var(--font-display);font-weight:800;font-size:12px;color:var(--berry);text-transform:uppercase;letter-spacing:.05em;}
.lb-bible-result .tx{display:block;font-family:var(--font-brand);font-size:16px;line-height:1.45;color:var(--ink);margin-top:4px;}
.lb-bible-result mark{background:var(--a-gold);color:var(--ink);border-radius:4px;padding:0 2px;}
.lb-verse.flash{animation:verseFlash 1.8s ease-out;}
@keyframes verseFlash{0%{background:var(--a-gold);}60%{background:var(--berry-glow);}100%{background:transparent;}}

/* ===================== SCRIPTURE HANGMAN ===================== */
.lb-hang-lives{display:flex;gap:6px;justify-content:center;margin:8px 0 16px;}
.lb-heart svg.ic{width:26px;height:26px;color:var(--berry);fill:currentColor;}
.lb-heart.gone svg.ic{color:var(--line);fill:var(--line);opacity:.6;}
.lb-hang-word{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:10px 0 22px;}
.lb-hang-slot{width:34px;height:46px;border-bottom:3px solid var(--line);display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:24px;color:var(--ink);transition:border-color .15s;}
.lb-hang-slot.on{border-color:var(--berry);}
.lb-hang-keys{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;max-width:340px;margin:0 auto;}
.lb-key{width:40px;height:46px;border:none;border-radius:11px;background:var(--surface);box-shadow:var(--sh-1);
  font-family:var(--font-display);font-weight:800;font-size:17px;color:var(--ink);cursor:pointer;transition:transform .1s,opacity .15s;}
.lb-key:active{transform:scale(.9);background:var(--berry-tint);}
.lb-key.used{opacity:.28;}
.lb-hang-msg{text-align:center;margin-top:20px;}
.lb-hang-msg .lb-btn{margin-top:12px;}

/* ===================== DAILY VERSE STREAK ===================== */
.lb-streak{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:14px 16px;box-shadow:var(--sh-1);margin-bottom:var(--s5);}
.lb-streak .fl{width:44px;height:44px;border-radius:13px;background:var(--berry);display:grid;place-items:center;flex:0 0 auto;}
.lb-streak .fl svg.ic{width:24px;height:24px;color:#fff;}
.lb-streak .tx{display:flex;flex-direction:column;min-width:0;}
.lb-streak .n{font-family:var(--font-display);font-weight:800;font-size:16px;color:var(--ink);}
.lb-streak .s{font-family:var(--font-display);font-weight:600;font-size:12px;color:var(--ink-2);margin-top:2px;}

/* ===================== NAME THAT MIRACLE ===================== */
.lb-miracle-ic{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--berry-tint);margin-bottom:10px;}
.lb-miracle-ic svg.ic{width:26px;height:26px;color:var(--berry-deep);}
.lb-miracle-clue{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--ink);line-height:1.45;margin:0;}

/* ===================== BIBLE BOOK ORDER RACE ===================== */
.lb-bookrace{display:flex;flex-direction:column;gap:10px;margin-top:6px;}
.lb-bookbtn-r{position:relative;border:1px solid var(--line);background:var(--surface);border-radius:14px;
  padding:15px 16px;font-family:var(--font-display);font-weight:800;font-size:16px;color:var(--ink);
  box-shadow:var(--sh-1);cursor:pointer;text-align:center;transition:transform .1s;}
.lb-bookbtn-r:active{transform:scale(.98);}
.lb-bookbtn-r.done{background:#6FAE86;color:#fff;border-color:#6FAE86;cursor:default;}
.lb-bookbtn-r.done .num{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:rgba(255,255,255,.3);font-size:13px;margin-right:8px;vertical-align:middle;}
.lb-bookbtn-r.shake{animation:lb-shake .45s;}

/* ===================== TREASURE MATCH (emoji memory) ===================== */
.lb-mcard .front.treasure{flex-direction:column;gap:3px;background:var(--berry-tint);}
.lb-mcard .front.treasure .memoji{font-size:30px;line-height:1;}
.lb-mcard .front.treasure .memlbl{font-family:var(--font-display);font-weight:800;font-size:10px;color:var(--ink-2);text-align:center;padding:0 2px;}

/* ===================== STORY PICTURE PUZZLE ===================== */
.lb-jig-ref{display:flex;align-items:center;gap:12px;margin:0 0 16px;}
.lb-jig-goal .lb-cover{width:72px;height:72px;border-radius:12px;overflow:hidden;display:block;}
.lb-jig-name{display:flex;flex-direction:column;}
.lb-jig-name .gl{font-family:var(--font-display);font-weight:800;font-size:11px;color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase;}
.lb-jig-name .ti{font-family:var(--font-display);font-weight:800;font-size:16px;color:var(--ink);margin-top:2px;}
.lb-jig{display:grid;grid-template-columns:repeat(var(--n),1fr);grid-template-rows:repeat(var(--n),1fr);
  gap:4px;max-width:360px;margin:0 auto;aspect-ratio:16/9;}
.lb-jigcell{border:none;border-radius:6px;background-color:var(--surface-2);background-repeat:no-repeat;
  cursor:pointer;transition:transform .1s,box-shadow .15s;}
.lb-jigcell.sel{box-shadow:0 0 0 3px var(--berry);transform:scale(.95);z-index:1;}

/* ===================== BIBLE TRIVIA BATTLE ===================== */
.lb-battle-score{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 18px;
  box-shadow:var(--sh-1);margin-bottom:var(--s4);}
.lb-battle-score .side{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:64px;}
.lb-battle-score .who{font-family:var(--font-display);font-weight:800;font-size:12px;color:var(--ink-2);}
.lb-battle-score .side.bot .who{color:var(--berry-deep);}
.lb-battle-score .pts{font-family:var(--font-display);font-weight:800;font-size:30px;color:var(--ink);line-height:1;}
.lb-battle-score .vs{font-family:var(--font-display);font-weight:700;font-size:11px;color:var(--ink-3);text-align:center;text-transform:uppercase;letter-spacing:.04em;}
.lb-battle-msg{text-align:center;font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--ink-2);margin-top:16px;}

/* =====================================================================
   LITTLE ONES (ages 3 to 5) games, bright, big targets, soft motion
   ===================================================================== */
@keyframes llPop   { 0%{transform:scale(1)} 40%{transform:scale(1.22)} 100%{transform:scale(1)} }
@keyframes llShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)} 40%{transform:translateX(7px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(5px)} }
@keyframes llRise  { from{transform:translateY(0)} to{transform:translateY(calc(-100% - 360px))} }
@keyframes llFall  { from{top:-58px} to{top:calc(100% - 6px)} }
@keyframes llBurst { to{transform:scale(1.9);opacity:0} }
@keyframes llDrop  { to{transform:translateY(420px) rotate(220deg);opacity:0} }
.ll-pop   { animation:llPop .34s ease; }
.ll-shake { animation:llShake .38s ease; }

.ll-confetti { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:60; }
.ll-confetti i { position:absolute; top:-16px; width:10px; height:14px; border-radius:3px; animation:llDrop 1.5s ease-in forwards; }

/* 1) Find the Lost Sheep */
.ll-field { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:6px; }
.ll-leaf  { aspect-ratio:1; border:none; border-radius:16px; background:var(--surface-2); font-size:30px;
  display:grid; place-items:center; cursor:pointer; box-shadow:var(--sh-1); transition:transform .15s, background .2s; }
.ll-leaf:active { transform:scale(.9); }
.ll-target { background:#E8F2EA; }

/* 2) Balloon Pop */
.ll-stage { position:relative; height:46vh; min-height:320px; margin-top:4px; border-radius:var(--r-lg);
  background:linear-gradient(180deg,#EAF4FB,#F7FBFE); overflow:hidden; box-shadow:inset 0 0 0 1px var(--line); }
.ll-balloon { position:absolute; bottom:-70px; width:60px; height:74px; border:none; padding:0; background:transparent;
  font-size:54px; line-height:1; cursor:pointer; filter:drop-shadow(0 6px 8px rgba(67,53,47,.14));
  color:var(--bc); animation:llRise var(--dur,5s) linear forwards; }
.ll-balloon::before { content:""; }
.ll-balloon { color:transparent; } /* tint via emoji is fixed; use ring marker */
.ll-balloon { background:radial-gradient(circle at 38% 32%, #fff9, transparent 42%), var(--bc);
  border-radius:50% 50% 50% 50%/55% 55% 45% 45%; font-size:0; }
.ll-balloon::after { content:""; position:absolute; left:50%; bottom:-9px; width:2px; height:14px; background:rgba(67,53,47,.3); transform:translateX(-50%); }
.ll-burst { animation:llBurst .26s ease forwards; }
.ll-bigscore { text-align:center; font-family:var(--font-display); font-weight:800; font-size:20px; color:var(--berry-deep); margin-top:14px; }

/* 3) Creation Match  &  shared chip look */
.ll-match { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:4px; }
.ll-col   { display:flex; flex-direction:column; gap:10px; }
.ll-chip  { border:2px solid var(--line); background:var(--surface); border-radius:16px; padding:14px 12px;
  font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--ink); cursor:pointer;
  box-shadow:var(--sh-1); transition:transform .15s, border-color .2s, background .2s; min-height:54px; }
.ll-chip:active { transform:scale(.96); }
.ll-chip.ll-sel { border-color:var(--berry); background:var(--berry-tint); }
.ll-chip.ll-ok  { border-color:var(--a-sage); background:#EAF4EC; color:var(--ink-2); cursor:default; }

/* 4) Tap the Colour */
.ll-colstage { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:6px; }
.ll-colcard  { aspect-ratio:1.3; border:3px solid; border-radius:22px; font-size:46px; cursor:pointer;
  display:grid; place-items:center; box-shadow:var(--sh-1); transition:transform .15s; }
.ll-colcard:active { transform:scale(.92); }

/* 5) Star Catcher */
.ll-catch { position:relative; height:48vh; min-height:340px; margin-top:4px; border-radius:var(--r-lg);
  background:linear-gradient(180deg,#2E2A4F,#4A4474); overflow:hidden; touch-action:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.1); }
.ll-star   { position:absolute; top:-58px; font-size:34px; animation:llFall var(--fall,3s) linear forwards; pointer-events:none; }
.ll-basket { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); font-size:46px; transition:left .05s linear; pointer-events:none; }

/* 6) Feed the Ark */
.ll-animals { display:flex; justify-content:center; gap:14px; margin:8px 0 18px; flex-wrap:wrap; }
.ll-animal  { width:84px; height:84px; border-radius:22px; background:var(--surface-2); display:grid; place-items:center;
  font-size:42px; box-shadow:var(--sh-1); transition:transform .15s, background .2s, box-shadow .2s; }
.ll-animal.hot { transform:scale(1.08); background:var(--berry-tint); box-shadow:0 0 0 3px var(--berry); }
.ll-animal.ll-ok { background:#EAF4EC; box-shadow:0 0 0 3px var(--a-sage); }
.ll-tray  { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
.ll-food  { width:66px; height:66px; border-radius:18px; background:var(--surface); display:grid; place-items:center;
  font-size:36px; box-shadow:var(--sh-1); cursor:grab; touch-action:none; transition:opacity .2s, transform .15s; }
.ll-food:active { transform:scale(.94); }
.ll-food.drag { position:fixed; z-index:80; width:66px; height:66px; transform:translate(-50%,-50%) scale(1.1); pointer-events:none; box-shadow:var(--sh-2); }
.ll-food.ll-ok { opacity:.3; cursor:default; }

/* ===================== AGE FILTER BAR (Play / Create hubs) ===================== */
.lb-agebar { display:flex; gap:8px; overflow-x:auto; padding:2px 2px 12px; margin:-2px 0 6px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.lb-agebar::-webkit-scrollbar { display:none; }
.lb-agechip { flex:0 0 auto; border:1.5px solid var(--line); background:var(--surface); color:var(--ink-2);
  font-family:var(--font-display); font-weight:700; font-size:13px; padding:8px 15px; border-radius:999px;
  cursor:pointer; box-shadow:var(--sh-1); transition:transform .14s, background .2s, color .2s, border-color .2s; }
.lb-agechip:active { transform:scale(.94); }
.lb-agechip.on { background:var(--berry); color:#fff; border-color:var(--berry); }
.lb-hub-body { display:flex; flex-direction:column; }
.lb-hub-body .lb-hub-sect:first-child { margin-top:2px; }

/* =====================================================================
   EARLY ELEMENTARY (ages 6 to 8) games
   ===================================================================== */
@keyframes kdFall { to{transform:translateY(260px) rotate(140deg);opacity:0} }

/* 1) David and Goliath */
.kd-sling { position:relative; height:46vh; min-height:320px; margin-top:4px; border-radius:var(--r-lg);
  background:linear-gradient(180deg,#DCECF5 0%,#EAF4E9 62%,#E4D9C3 62%,#EAE0CD 100%); overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line); touch-action:none; }
.kd-david   { position:absolute; left:6%; bottom:6%; font-size:40px; }
.kd-goliath { position:absolute; right:7%; bottom:6%; font-size:64px; transition:transform .2s; }
.kd-goliath.kd-hit { transform:rotate(82deg) translateY(30px); filter:grayscale(.3); }
.kd-stone   { position:absolute; font-size:24px; transform:translate(-50%,-50%); cursor:grab; z-index:3; }
.kd-aim     { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.kd-aim line{ stroke:var(--berry-deep); stroke-width:3; stroke-dasharray:5 6; stroke-linecap:round; opacity:.7; }

/* 2) Jericho */
.kd-wall { display:flex; flex-wrap:wrap; gap:4px; justify-content:center; margin:8px 0 12px; max-width:320px; margin-inline:auto; }
.kd-brick { width:46px; height:24px; border-radius:5px; background:linear-gradient(180deg,#D89A73,#C07E55);
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.12); }
.kd-brick.kd-fall { animation:kdFall .8s ease-in forwards; animation-delay:var(--d,0ms); }
.kd-track { position:relative; height:40px; margin:4px 0 14px; border-bottom:3px dashed var(--line); }
.kd-marcher { position:absolute; left:8%; bottom:2px; font-size:26px; transition:left .3s ease; }
.kd-bigbtn { width:100%; padding:16px; font-size:17px; }
.kd-shout { background:var(--a-gold); color:var(--ink); animation:llPop .5s ease infinite alternate; }

/* 3) Crossword */
.kd-xwgrid { display:grid; grid-template-columns:repeat(var(--c),1fr); gap:3px; max-width:300px; margin:6px auto 14px; }
.kd-xcell { position:relative; aspect-ratio:1; border:none; background:var(--surface); border-radius:6px; box-shadow:inset 0 0 0 1.5px var(--line);
  font-family:var(--font-display); font-weight:800; font-size:18px; color:var(--ink); display:grid; place-items:center; cursor:pointer; transition:background .15s, box-shadow .15s; }
.kd-xcell.block { background:transparent; box-shadow:none; cursor:default; }
.kd-xcell.inword { background:var(--berry-glow); }
.kd-xcell.sel { box-shadow:inset 0 0 0 2.5px var(--berry); background:var(--berry-tint); }
.kd-xcell.ok { color:var(--a-sage); }
.kd-xnum { position:absolute; top:1px; left:3px; font-size:9px; font-weight:700; color:var(--ink-3); }
.kd-clues { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.kd-cluecol h4 { font-size:13px; color:var(--ink-2); margin:0 0 6px; }
.kd-clue { display:block; width:100%; text-align:left; border:none; background:var(--surface-2); border-radius:10px;
  padding:8px 10px; margin-bottom:6px; font-size:12px; color:var(--ink); cursor:pointer; line-height:1.3; }
.kd-kb { display:flex; flex-wrap:wrap; gap:5px; justify-content:center; }
.kd-key { width:30px; height:38px; border:none; border-radius:9px; background:var(--surface); box-shadow:var(--sh-1);
  font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--ink); cursor:pointer; transition:transform .12s, background .15s; }
.kd-key:active { transform:scale(.9); background:var(--berry-tint); }
.kd-key.wide { width:46px; }

/* 4) Lost Coin */
.kd-coingrid { display:grid; grid-template-columns:repeat(var(--n),1fr); gap:8px; max-width:320px; margin:6px auto 12px; }
.kd-tile { aspect-ratio:1; border:none; border-radius:14px; background:var(--surface-2); font-size:24px;
  display:grid; place-items:center; cursor:pointer; box-shadow:var(--sh-1); transition:transform .15s, background .25s; }
.kd-tile:active { transform:scale(.92); }
.kd-tile.h-hot{background:#F6C5B6} .kd-tile.h-warm{background:#FBE0C8} .kd-tile.h-mild{background:#F3EBD6}
.kd-tile.h-cool{background:#DCEAF2} .kd-tile.h-cold{background:#CBDEEC} .kd-tile.hot{background:#F0C879}
.kd-heat { text-align:center; font-family:var(--font-display); font-weight:700; color:var(--berry-deep); font-size:15px; }

/* 5) Good Samaritan */
.kd-story { text-align:center; }
.kd-scene { font-size:56px; margin:10px 0 6px; }
.kd-storyline { font-size:16px; font-weight:600; color:var(--ink); margin:0 auto 16px; max-width:320px; }
.kd-opts { display:flex; flex-direction:column; gap:10px; max-width:340px; margin:0 auto; }
.kd-opt { border:2px solid var(--line); background:var(--surface); border-radius:16px; padding:14px;
  font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--ink); cursor:pointer; transition:transform .15s, background .2s, border-color .2s; }
.kd-opt:active { transform:scale(.97); }
.kd-opt.good { border-color:var(--a-sage); background:#EAF4EC; }
.kd-opt.bad { border-color:var(--a-rose); background:#FBEDED; }
.kd-hintkind { color:var(--ink-2); font-size:14px; margin-top:12px; }

/* 6) Red Sea */
.kd-sea { position:relative; display:flex; gap:12px; justify-content:center; align-items:flex-end;
  height:42vh; min-height:280px; margin-top:4px; padding:18px; border-radius:var(--r-lg);
  background:linear-gradient(90deg,#7FB6D6,#A9D2E6 12%,#EFE3C6 50%,#A9D2E6 88%,#7FB6D6); box-shadow:inset 0 0 0 1px var(--line); }
.kd-moses { position:absolute; left:8%; bottom:10px; font-size:30px; transition:left .35s ease; z-index:2; }
.kd-stone2 { width:62px; height:62px; border:none; border-radius:16px; background:#C9B79A; font-size:30px;
  box-shadow:var(--sh-1); cursor:pointer; transition:transform .15s, background .2s, box-shadow .2s; }
.kd-stone2.lit { background:var(--a-gold); transform:translateY(-8px); box-shadow:0 0 0 4px #fff7e0; }
.kd-stone2.good { background:#BFE0C6; transform:translateY(-6px); }
.kd-stone2.bad { background:#F2C4C4; }
.kd-retry, .kd-marcher { text-align:center; }
.kd-retry { color:var(--ink-2); font-size:14px; text-align:center; }

/* =====================================================================
   FAMILY FUN (all ages) games
   ===================================================================== */
/* 1) Bingo */
.kf-bingo { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; max-width:340px; margin:6px auto 12px; }
.kf-bcell { aspect-ratio:1; border:none; border-radius:12px; background:var(--surface); box-shadow:inset 0 0 0 1.5px var(--line);
  font-family:var(--font-display); font-weight:700; font-size:12px; color:var(--ink); display:grid; place-items:center; padding:2px;
  cursor:pointer; transition:transform .15s, background .2s, box-shadow .2s; line-height:1.1; }
.kf-bcell.ready { box-shadow:inset 0 0 0 2px var(--a-gold); }
.kf-bcell.dab { background:var(--berry); color:#fff; box-shadow:none; transform:scale(.97); }
.kf-bcell.free { background:var(--berry-tint); color:var(--berry-deep); font-size:11px; }
.kf-call { text-align:center; font-family:var(--font-display); font-size:17px; color:var(--ink); margin:0 0 12px; min-height:24px; }
.kf-call b { color:var(--berry-deep); }

/* 2/3) Prompt games (Pictionary / Charades) */
.kf-stage { text-align:center; }
.kf-turn { font-family:var(--font-display); font-weight:700; color:var(--ink-2); margin:6px 0 4px; }
.kf-scene { font-size:60px; margin:8px 0; }
.kf-secret { color:var(--ink-2); font-size:14px; margin:6px 0 2px; }
.kf-word { font-family:var(--font-brand); color:var(--berry-deep); font-size:28px; margin:0 0 8px; }
.kf-canvas { width:100%; max-width:360px; height:200px; background:#fff; border-radius:var(--r); box-shadow:inset 0 0 0 1px var(--line);
  touch-action:none; margin:6px auto; display:block; cursor:crosshair; }
.kf-timerbar { height:8px; border-radius:999px; background:var(--surface-2); overflow:hidden; max-width:360px; margin:10px auto 4px; }
.kf-timerfill { height:100%; width:100%; background:var(--berry); transition:width 1s linear; }
.kf-time { font-family:var(--font-display); font-weight:800; font-size:22px; color:var(--berry-deep); margin:2px 0 10px; }
.kf-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* 4) Story Guess */
.kf-cluebox { max-width:340px; margin:4px auto 8px; display:flex; flex-direction:column; gap:8px; }
.kf-clue { background:var(--surface-2); border-radius:14px; padding:12px 14px; font-size:15px; color:var(--ink); margin:0;
  font-style:italic; animation:rise .35s both; }
.kf-pts { font-family:var(--font-display); font-weight:700; color:var(--a-clay); font-size:14px; margin:2px 0 10px; }

/* 5) Scavenger Hunt */
.kf-hunt { display:flex; flex-direction:column; gap:8px; max-width:420px; margin:4px auto; }
.kf-huntitem { display:flex; align-items:center; gap:12px; border:none; background:var(--surface); border-radius:14px; padding:12px 14px;
  box-shadow:var(--sh-1); font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--ink); text-align:left; cursor:pointer;
  transition:transform .15s, background .2s; }
.kf-huntitem .box { width:28px; height:28px; flex:0 0 auto; border-radius:8px; background:var(--surface-2); display:grid; place-items:center; color:transparent; transition:background .2s, color .2s; }
.kf-huntitem .box svg.ic { width:18px; height:18px; }
.kf-huntitem.got { background:#EAF4EC; }
.kf-huntitem.got .box { background:var(--a-sage); color:#fff; }
.kf-huntitem.got span:last-child { text-decoration:line-through; color:var(--ink-2); }

/* 6) Verse Race */
.kf-ref { text-align:center; font-family:var(--font-display); font-weight:700; color:var(--berry-deep); margin:4px 0 10px; }
.kf-verse { background:var(--surface); border-radius:var(--r); padding:18px; box-shadow:var(--sh-1); line-height:2;
  font-size:18px; color:var(--ink); max-width:440px; margin:0 auto 14px; }
.kf-vw { transition:color .2s; }
.kf-vw.blank { color:var(--berry); font-weight:800; letter-spacing:1px; }

/* =====================================================================
   COMPANION (Today, Bible Pet, missions, levels)
   ===================================================================== */
@keyframes cpBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }

/* streak + home cards */
.cp-streak { display:flex; align-items:center; gap:12px; background:var(--berry-tint); border-radius:var(--r);
  padding:14px 16px; margin-bottom:12px; }
.cp-streak .fl { width:38px; height:38px; border-radius:50%; background:var(--a-gold); color:#fff; display:grid; place-items:center; flex:0 0 auto; }
.cp-streak .tx { display:flex; flex-direction:column; line-height:1.3; }
.cp-streak .tx span { color:var(--ink-2); font-size:13px; }
.cp-homecard, .cp-petpeek { display:flex; align-items:center; gap:14px; width:100%; border:none; cursor:pointer;
  background:linear-gradient(120deg,#FFF6F0,#FBE8DE); border-radius:var(--r-lg); padding:14px 16px; margin-bottom:12px;
  box-shadow:var(--sh-1); text-align:left; transition:transform .15s; }
.cp-homecard:active, .cp-petpeek:active { transform:scale(.985); }
.cp-htx, .cp-peektx { display:flex; flex-direction:column; flex:1; line-height:1.35; }
.cp-htx b, .cp-peektx b { font-family:var(--font-display); font-size:15px; color:var(--ink); }
.cp-htx span, .cp-peektx span { color:var(--ink-2); font-size:13px; }
.cp-go { color:var(--ink-3); display:grid; place-items:center; }

/* pet figure */
.cp-petfig { position:relative; width:60px; height:60px; flex:0 0 auto; display:grid; place-items:center; }
.cp-petfig.big { width:140px; height:140px; margin:6px auto 0; }
.cp-pet { font-size:42px; line-height:1; transform:scale(var(--sc,1)); animation:cpBob 2.6s ease-in-out infinite; }
.cp-petfig.big .cp-pet { font-size:96px; }
.cp-mood { position:absolute; top:-2px; right:-2px; font-size:16px; }
.cp-petfig.big .cp-mood { font-size:30px; top:6px; right:14px; }

/* level bar */
.cp-level { background:var(--surface); border-radius:var(--r); padding:14px 16px; box-shadow:var(--sh-1); margin-bottom:14px; }
.cp-lvtop { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.cp-lvtitle { font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--ink); }
.cp-lvberries { font-family:var(--font-display); font-weight:800; font-size:14px; color:var(--berry-deep); }
.cp-lvbar { height:10px; border-radius:999px; background:var(--surface-2); overflow:hidden; }
.cp-lvbar span { display:block; height:100%; background:linear-gradient(90deg,var(--berry-2),var(--berry)); border-radius:999px; transition:width .4s ease; }
.cp-lvsub { font-size:12px; color:var(--ink-2); margin-top:6px; }

/* missions */
.cp-missions { display:flex; flex-direction:column; gap:10px; }
.cp-mission { display:flex; align-items:center; gap:12px; border:2px solid var(--line); background:var(--surface);
  border-radius:16px; padding:12px 14px; cursor:pointer; transition:transform .15s, background .2s, border-color .2s; }
.cp-mission:active { transform:scale(.98); }
.cp-mission .ic-tile { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color:#fff; flex:0 0 auto; }
.cp-mission .ic-tile svg.ic { width:20px; height:20px; }
.cp-mtx { flex:1; font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--ink); }
.cp-check { width:26px; height:26px; border-radius:50%; background:var(--surface-2); color:transparent; display:grid; place-items:center; flex:0 0 auto; transition:background .2s, color .2s; }
.cp-check svg.ic { width:16px; height:16px; }
.cp-mission.done { border-color:var(--a-sage); background:#EAF4EC; }
.cp-mission.done .cp-mtx { color:var(--ink-2); }
.cp-mission.done .cp-check { background:var(--a-sage); color:#fff; }
.cp-bonus { text-align:center; background:var(--berry-tint); color:var(--berry-deep); font-family:var(--font-display);
  font-weight:700; border-radius:14px; padding:12px; margin-top:12px; animation:rise .4s both; }

/* pet care screen */
.cp-petcard { text-align:center; background:linear-gradient(180deg,#EAF4FB,#F4FBEF); border-radius:var(--r-lg);
  padding:16px; box-shadow:inset 0 0 0 1px var(--line); margin-bottom:14px; position:relative; }
.cp-bubble { display:inline-block; background:#fff; color:var(--ink); font-family:var(--font-display); font-weight:700;
  font-size:14px; padding:7px 14px; border-radius:999px; box-shadow:var(--sh-1); margin:8px 0 4px; transition:opacity .3s; min-height:14px; }
.cp-hint { color:var(--berry-deep); font-size:14px; font-weight:600; margin:6px 0 0; }
.cp-stats { display:flex; flex-direction:column; gap:8px; max-width:300px; margin:10px auto 2px; }
.cp-stat { display:flex; align-items:center; gap:10px; }
.cp-stat .k { width:54px; text-align:left; font-size:12px; font-weight:700; color:var(--ink-2); }
.cp-meter { flex:1; height:12px; border-radius:999px; background:var(--surface-2); overflow:hidden; }
.cp-meter span { display:block; height:100%; border-radius:999px; transition:width .4s ease; }
.cp-actions { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px; }
.cp-act { display:flex; flex-direction:column; align-items:center; gap:4px; border:none; background:var(--surface);
  border-radius:16px; padding:12px 4px; font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--ink);
  box-shadow:var(--sh-1); cursor:pointer; transition:transform .15s, background .2s; }
.cp-act span { font-size:26px; }
.cp-act:active { transform:scale(.93); background:var(--berry-tint); }
.cp-tip, .cp-lvholder { margin-top:4px; }
.cp-tip { text-align:center; color:var(--ink-2); font-size:13px; line-height:1.5; margin-top:14px; }

/* mission sheet */
.cp-sheetback { position:fixed; inset:0; z-index:100; background:rgba(43,53,47,.35); display:flex; align-items:flex-end;
  justify-content:center; opacity:0; transition:opacity .25s; }
.cp-sheetback.on { opacity:1; }
.cp-sheet { width:100%; max-width:480px; background:var(--surface); border-radius:24px 24px 0 0; padding:24px 22px calc(24px + env(safe-area-inset-bottom));
  text-align:center; transform:translateY(20px); transition:transform .25s; box-shadow:var(--sh-2); }
.cp-sheetback.on .cp-sheet { transform:translateY(0); }
.cp-sheet h3 { font-family:var(--font-brand); color:var(--berry-deep); font-size:20px; margin:0 0 12px; }
.cp-versebox p, .cp-pray { font-size:17px; line-height:1.6; color:var(--ink); margin:0 0 6px; }
.cp-versebox span { color:var(--berry-deep); font-weight:700; font-size:14px; }
.cp-praysub { color:var(--ink-2); font-size:14px; margin-top:8px; }

/* =====================================================================
   TWEENS (ages 9 to 12) logic and puzzles
   ===================================================================== */
/* 1) Timeline */
.tw-timeline { display:flex; flex-direction:column; gap:6px; margin:4px 0 14px; }
.tw-slot { display:flex; align-items:center; gap:10px; background:#EAF4EC; border-radius:12px; padding:10px 12px;
  font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--ink); animation:rise .3s both; }
.tw-slot .n { width:24px; height:24px; flex:0 0 auto; border-radius:50%; background:var(--a-sage); color:#fff; display:grid; place-items:center; font-size:12px; font-weight:800; }
.tw-pool { display:flex; flex-direction:column; gap:8px; }
.tw-ev { border:2px solid var(--line); background:var(--surface); border-radius:14px; padding:13px 14px;
  font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--ink); cursor:pointer; transition:transform .15s, opacity .3s; }
.tw-ev:active { transform:scale(.98); }
.tw-ev.placed { opacity:0; pointer-events:none; height:0; padding:0; margin:0; border:0; }

/* 2) Geography */
.tw-geoq { text-align:center; font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--ink); margin:6px 0 10px; min-height:22px; }
.tw-map { position:relative; width:100%; max-width:380px; margin:0 auto 8px; aspect-ratio:1/1.05; border-radius:var(--r-lg);
  background:radial-gradient(circle at 60% 35%, #DCEFD9, #CFE6CC 60%, #C2DDBE); box-shadow:inset 0 0 0 1px var(--line); overflow:hidden; }
.tw-map::after { content:""; position:absolute; left:24%; top:0; width:14%; height:100%; background:linear-gradient(180deg,#A9D2E6,#8FB8CE); opacity:.7; transform:skewX(-6deg); }
.tw-dot { position:absolute; transform:translate(-50%,-50%); border:none; background:transparent; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; z-index:2; }
.tw-dot .pin { width:16px; height:16px; border-radius:50%; background:var(--berry-deep); box-shadow:0 0 0 3px #fff; transition:transform .15s; }
.tw-dot .lbl { font-family:var(--font-display); font-weight:700; font-size:10px; color:var(--ink); background:rgba(255,255,255,.85); padding:1px 5px; border-radius:6px; white-space:nowrap; }
.tw-dot:active .pin { transform:scale(.8); }
.tw-dot.right .pin { background:var(--a-sage); transform:scale(1.3); }
.tw-dot.wrong .pin { background:var(--a-rose); }

/* 3) Proverbs */
.tw-wis { text-align:center; }
.tw-wisq { font-size:16px; font-weight:600; color:var(--ink); max-width:340px; margin:8px auto 16px; }
.tw-wisopt { display:block; width:100%; max-width:360px; margin:0 auto 10px; border:2px solid var(--line); background:var(--surface);
  border-radius:16px; padding:14px; font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--ink); cursor:pointer; transition:transform .15s, background .2s, border-color .2s; }
.tw-wisopt:active { transform:scale(.98); }
.tw-wisopt.good { border-color:var(--a-sage); background:#EAF4EC; }
.tw-wisopt.bad { border-color:var(--a-rose); background:#FBEDED; }
.tw-proverb { max-width:360px; margin:10px auto 4px; background:var(--berry-tint); color:var(--berry-deep); border-radius:14px;
  padding:12px 14px; font-style:italic; font-size:14px; animation:rise .35s both; }

/* 4) Detective */
.tw-clues { display:flex; flex-direction:column; gap:8px; max-width:360px; margin:4px auto 14px; }
.tw-clue { background:var(--surface-2); border-radius:12px; padding:10px 14px; font-size:14px; color:var(--ink); margin:0; }
.tw-suspects { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:360px; margin:0 auto; }
.tw-suspect { display:flex; flex-direction:column; align-items:center; gap:4px; border:2px solid var(--line); background:var(--surface);
  border-radius:16px; padding:14px 4px; font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--ink); cursor:pointer; transition:transform .15s, background .2s, border-color .2s; }
.tw-suspect .e { font-size:30px; }
.tw-suspect:active { transform:scale(.95); }
.tw-suspect.solved { border-color:var(--a-sage); background:#EAF4EC; }
.tw-suspect.nope { border-color:var(--a-rose); background:#FBEDED; opacity:.6; }

/* 5) Sudoku */
.tw-sud { display:grid; grid-template-columns:repeat(4,1fr); gap:3px; max-width:260px; margin:6px auto 14px;
  background:var(--ink); padding:3px; border-radius:12px; }
.tw-scell { aspect-ratio:1; border:none; background:var(--surface); font-size:24px; display:grid; place-items:center; cursor:pointer; transition:background .15s; }
.tw-scell.alt { background:var(--surface-2); }
.tw-scell.fixed { cursor:default; opacity:.95; }
.tw-scell.sel { box-shadow:inset 0 0 0 3px var(--berry); background:var(--berry-tint); }
.tw-scell.err { background:#FBEDED; }
.tw-scell:nth-child(2),.tw-scell:nth-child(6),.tw-scell:nth-child(10),.tw-scell:nth-child(14) { margin-right:0; }
.tw-sudpad { display:flex; gap:8px; justify-content:center; }
.tw-sudkey { width:52px; height:48px; border:none; border-radius:12px; background:var(--surface); box-shadow:var(--sh-1);
  font-size:24px; cursor:pointer; transition:transform .12s, background .15s; }
.tw-sudkey:active { transform:scale(.9); background:var(--berry-tint); }
.tw-sudkey.wide { width:60px; font-size:18px; }

/* 6) Cipher */
.tw-key { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:6px 0 8px; }
.tw-code { min-width:38px; height:46px; padding:0 6px; border-radius:12px; background:var(--ink); color:#fff;
  font-family:var(--font-display); font-weight:800; font-size:18px; display:grid; place-items:center; }
.tw-hint { text-align:center; color:var(--ink-2); font-size:14px; margin:0 0 12px; }
.tw-slots { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:14px; }
.tw-slot2 { width:38px; height:46px; border-radius:12px; background:var(--surface); box-shadow:inset 0 0 0 2px var(--line);
  font-family:var(--font-display); font-weight:800; font-size:20px; color:var(--ink); display:grid; place-items:center; }
.tw-slot2.ok { box-shadow:inset 0 0 0 2px var(--a-sage); color:var(--a-sage); }
.tw-slot2.bad { box-shadow:inset 0 0 0 2px var(--a-rose); color:var(--a-rose); }

/* =====================================================================
   TEENS (ages 13 to 16) games
   ===================================================================== */
/* 1) Choices Adventure */
.tn-story { max-width:440px; margin:0 auto; }
.tn-narr { background:var(--surface); border-radius:var(--r); padding:18px; box-shadow:var(--sh-1); font-size:16px; line-height:1.6; color:var(--ink); animation:rise .35s both; margin:6px 0 14px; }
.tn-choices { display:flex; flex-direction:column; gap:10px; }
.tn-choice { border:2px solid var(--line); background:var(--surface); border-radius:14px; padding:14px; text-align:left;
  font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--ink); cursor:pointer; transition:transform .15s, background .2s, border-color .2s; }
.tn-choice:active { transform:scale(.98); } .tn-choice:hover { border-color:var(--berry-2); }

/* 2) Apologetics / shared option look */
.tn-apol, .tn-speed { max-width:460px; margin:0 auto; }
.tn-q, .tn-sq { font-size:16px; font-weight:700; color:var(--ink); margin:8px 0 14px; line-height:1.5; }
.tn-opt, .tn-sopt { display:block; width:100%; margin-bottom:10px; border:2px solid var(--line); background:var(--surface);
  border-radius:14px; padding:13px 14px; text-align:left; font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--ink);
  cursor:pointer; transition:transform .15s, background .2s, border-color .2s; }
.tn-opt:active, .tn-sopt:active { transform:scale(.98); }
.tn-opt.good, .tn-sopt.good { border-color:var(--a-sage); background:#EAF4EC; }
.tn-opt.bad, .tn-sopt.bad { border-color:var(--a-rose); background:#FBEDED; }
.tn-explain { background:var(--berry-tint); color:var(--berry-deep); border-radius:14px; padding:12px 14px; font-size:14px; margin:6px 0 4px; animation:rise .3s both; }

/* 3) Virtue */
.tn-meter { height:14px; border-radius:999px; background:var(--surface-2); overflow:hidden; max-width:460px; margin:6px auto 4px; }
.tn-meter span { display:block; height:100%; background:linear-gradient(90deg,var(--a-rose),var(--berry)); border-radius:999px; transition:width .3s ease; }
.tn-meterlbl { text-align:center; color:var(--ink-2); font-size:13px; margin:0 0 12px; }
.tn-virt { max-width:460px; margin:0 auto; text-align:center; }
.tn-vs { font-size:17px; font-weight:700; color:var(--ink); margin:8px 0 10px; }
.tn-vrow { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.tn-vbtn { border:none; border-radius:16px; padding:16px 12px; font-family:var(--font-display); font-weight:700; font-size:14px; cursor:pointer; transition:transform .15s; line-height:1.3; }
.tn-vbtn:active { transform:scale(.95); }
.tn-vbtn.virtue { background:#EAF4EC; color:var(--ink); } .tn-vbtn.tempt { background:#F7ECE4; color:var(--ink); }

/* 4) Speed Battle */
.tn-speedtop { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-family:var(--font-display); font-weight:700; }
.tn-time { font-size:22px; color:var(--berry-deep); } .tn-sc { color:var(--ink); font-size:15px; } .tn-combo { color:var(--a-clay); font-size:16px; }
.tn-sopts { display:flex; flex-direction:column; gap:8px; }

/* 5) Escape */
.tn-clues { display:flex; flex-direction:column; gap:8px; max-width:460px; margin:4px auto 14px; }
.tn-eclue { background:var(--surface-2); border-radius:12px; padding:11px 14px; font-size:14px; color:var(--ink); }
.tn-eclue b { color:var(--berry-deep); margin-right:6px; }
.tn-lock { display:flex; gap:14px; justify-content:center; margin:6px 0 14px; }
.tn-dial { display:flex; flex-direction:column; align-items:center; gap:6px; }
.tn-dbtn { width:54px; height:30px; border:none; border-radius:10px; background:var(--surface); box-shadow:var(--sh-1); color:var(--ink); cursor:pointer; transition:transform .12s; }
.tn-dbtn:active { transform:scale(.9); }
.tn-dval { width:54px; height:54px; border-radius:12px; background:var(--ink); color:#fff; font-family:var(--font-display); font-weight:800; font-size:26px; display:grid; place-items:center; }
.tn-emsg { text-align:center; color:var(--a-clay); font-size:14px; min-height:18px; }

/* 6) Leadership */
.tn-meters { display:flex; flex-direction:column; gap:8px; max-width:460px; margin:4px auto 14px; }
.tn-mrow { display:flex; align-items:center; gap:10px; }
.tn-mrow .k { width:70px; font-size:12px; font-weight:700; color:var(--ink-2); }
.tn-mbar { flex:1; height:12px; border-radius:999px; background:var(--surface-2); overflow:hidden; }
.tn-mbar span { display:block; height:100%; border-radius:999px; transition:width .4s ease; }
.tn-lead { max-width:460px; margin:0 auto; }
.tn-event { font-size:16px; font-weight:700; color:var(--ink); margin:8px 0 14px; }
.tn-lopt { display:block; width:100%; margin-bottom:10px; border:2px solid var(--line); background:var(--surface); border-radius:14px;
  padding:13px 14px; text-align:left; font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--ink); cursor:pointer; transition:transform .15s, border-color .2s; }
.tn-lopt:active { transform:scale(.98); }

/* =====================================================================
   BIBLE ESCAPE ROOM (big single build)
   ===================================================================== */
.er-scene { position:relative; width:100%; max-width:460px; height:44vh; min-height:300px; margin:4px auto 12px;
  border-radius:var(--r-lg); overflow:hidden; box-shadow:inset 0 0 0 1px var(--line); transition:filter .4s; }
.er-library { background:linear-gradient(180deg,#E6D6BE,#D8C09A); }
.er-chapel  { background:linear-gradient(180deg,#E7DDF0,#D4C3E6); }
.er-chapel.dark { background:linear-gradient(180deg,#2B2740,#3A3457); }
.er-gate    { background:linear-gradient(180deg,#D7C4A8,#B89A74); }
.er-floor { position:absolute; left:0; right:0; bottom:0; padding:8px 12px; font-size:12px; color:rgba(67,53,47,.7);
  background:rgba(255,255,255,.35); text-align:center; }
.er-chapel.dark .er-floor { color:rgba(255,255,255,.7); background:rgba(0,0,0,.2); }
.er-hot { position:absolute; transform:translate(-50%,-50%); border:none; background:transparent; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:3px; z-index:2; transition:transform .15s; }
.er-hot:active { transform:translate(-50%,-50%) scale(.9); }
.er-hot .he { font-size:38px; filter:drop-shadow(0 4px 6px rgba(0,0,0,.18)); }
.er-hot .hl { font-family:var(--font-display); font-weight:700; font-size:10px; color:var(--ink);
  background:rgba(255,255,255,.85); padding:1px 7px; border-radius:7px; white-space:nowrap; }
.er-chapel.dark .er-hot .hl { color:#fff; background:rgba(255,255,255,.18); }
.er-msg { background:var(--surface); border-radius:14px; padding:12px 14px; font-size:14px; color:var(--ink);
  box-shadow:var(--sh-1); min-height:20px; line-height:1.45; margin-bottom:12px; }
.er-nav { display:flex; gap:8px; justify-content:center; margin-bottom:12px; flex-wrap:wrap; }
.er-navbtn { border:1.5px solid var(--line); background:var(--surface); color:var(--ink-2); font-family:var(--font-display);
  font-weight:700; font-size:13px; padding:9px 14px; border-radius:999px; cursor:pointer; box-shadow:var(--sh-1); transition:transform .14s, background .2s, color .2s, border-color .2s; }
.er-navbtn:active { transform:scale(.94); }
.er-navbtn.on { background:var(--berry); color:#fff; border-color:var(--berry); }
.er-inv { display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:var(--surface-2); border-radius:14px; padding:10px 12px; }
.er-invlabel { font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--ink-2); }
.er-invempty { color:var(--ink-3); font-size:13px; font-style:italic; }
.er-item { width:44px; height:44px; border:none; border-radius:12px; background:var(--surface); font-size:24px;
  display:grid; place-items:center; cursor:pointer; box-shadow:var(--sh-1); transition:transform .14s, box-shadow .2s; }
.er-item:active { transform:scale(.9); }
.er-item.on { box-shadow:0 0 0 3px var(--berry); transform:translateY(-2px); }
.er-lockinner { margin:8px 0; }

/* =====================================================================
   BIBLE DETECTIVE MYSTERIES (logic grid)
   ===================================================================== */
.dm-clues { display:flex; flex-direction:column; gap:7px; max-width:460px; margin:2px auto 14px; }
.dm-clue { background:var(--surface-2); border-radius:12px; padding:10px 13px; font-size:14px; color:var(--ink); line-height:1.4; }
.dm-clue b { color:var(--berry-deep); margin-right:5px; }
.dm-grid { display:grid; grid-template-columns:repeat(var(--n),1fr); gap:4px; max-width:340px; margin:4px auto 10px; }
.dm-corner { display:grid; place-items:center; font-size:18px; }
.dm-colh { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:1px; padding-bottom:3px; }
.dm-colh span { font-size:22px; } .dm-colh small { font-size:9px; color:var(--ink-2); font-weight:700; }
.dm-rowh { display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:12px; color:var(--ink); padding:2px; }
.dm-cell { aspect-ratio:1; border:none; border-radius:10px; background:var(--surface); box-shadow:inset 0 0 0 1.5px var(--line);
  font-size:20px; font-weight:800; display:grid; place-items:center; cursor:pointer; transition:background .15s, color .15s; }
.dm-cell.yes { background:#EAF4EC; color:var(--a-sage); box-shadow:inset 0 0 0 2px var(--a-sage); }
.dm-cell.no { background:var(--surface-2); color:var(--ink-3); }
.dm-tip { text-align:center; color:var(--ink-2); font-size:12px; margin:0 0 12px; }

/* =====================================================================
   FAITH CARD BATTLE (big single build)
   ===================================================================== */
.cb-score { display:flex; align-items:center; justify-content:space-between; margin:4px 0 12px; }
.cb-side { font-family:var(--font-display); font-size:14px; color:var(--ink); display:flex; align-items:center; gap:8px; }
.cb-round { font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--ink-2); }
.cb-pip { display:inline-block; width:12px; height:12px; border-radius:50%; background:var(--surface-2); box-shadow:inset 0 0 0 1.5px var(--line); margin-left:2px; transition:background .2s; }
.cb-pip.on { background:var(--berry); box-shadow:none; }
.cb-arena { display:flex; align-items:center; justify-content:center; gap:14px; margin:6px 0 8px; min-height:150px; }
.cb-slot { display:flex; flex-direction:column; align-items:center; gap:4px; }
.cb-slot small { font-size:11px; font-weight:700; color:var(--ink-2); }
.cb-vs { font-family:var(--font-brand); font-style:italic; color:var(--ink-3); font-size:16px; }
.cb-card { width:88px; height:124px; border-radius:14px; background:var(--surface); box-shadow:var(--sh-1), inset 0 0 0 2px var(--el,var(--line));
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; position:relative; padding:6px; }
.cb-card.back { background:linear-gradient(135deg,var(--berry-2),var(--berry-deep)); color:#fff; font-size:34px; box-shadow:var(--sh-1); }
.cb-card.empty { background:var(--surface-2); box-shadow:inset 0 0 0 2px var(--line); }
.cb-cel { position:absolute; top:5px; left:7px; font-size:14px; }
.cb-cpow { position:absolute; bottom:5px; right:8px; font-family:var(--font-display); font-weight:800; font-size:20px; color:var(--el,var(--ink)); }
.cb-cemoji { font-size:40px; line-height:1; }
.cb-cname { font-family:var(--font-display); font-weight:700; font-size:12px; color:var(--ink); }
.cb-result { text-align:center; min-height:22px; font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--berry-deep); margin-bottom:8px; }
.cb-hand { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:12px; }
.cb-handcard { border:none; background:transparent; padding:0; cursor:pointer; transition:transform .15s; }
.cb-handcard:hover { transform:translateY(-6px); } .cb-handcard:active { transform:scale(.94); }
.cb-handcard .cb-card { width:72px; height:102px; }
.cb-handcard .cb-cemoji { font-size:32px; } .cb-handcard .cb-cpow { font-size:17px; }
.cb-legend { text-align:center; font-size:11px; color:var(--ink-2); font-weight:600; line-height:1.7; }

/* =====================================================================
   PREMIUM REFRESH (v4)  — calm paper, hairlines, soft depth, editorial type
   Token-level overrides that lift the whole app. Appended last so it wins
   the cascade. Games keep their colour; the frame becomes premium minimal.
   ===================================================================== */
:root{
  /* cleaner warm paper + crisper ink */
  --bg:        #FAF6F2;
  --surface:   #FFFFFF;
  --surface-2: #F4EEE8;
  --line:      #EDE6DF;
  --ink:       #322C28;
  --ink-2:     #786E68;
  --ink-3:     #B4A99F;

  /* softer, layered, premium depth */
  --sh-1: 0 1px 2px rgba(50,40,33,.035), 0 2px 8px rgba(50,40,33,.04);
  --sh-2: 0 6px 18px rgba(50,40,33,.06), 0 16px 44px rgba(50,40,33,.07);

  /* gentle radius bump for softness */
  --r-sm:14px; --r:18px; --r-lg:22px; --r-xl:28px;
}
body{ letter-spacing:-.011em; }

/* editorial page titles in the serif, used across Home, Today, Pet and games */
.lb-hello h1{ font-family:var(--font-brand); font-weight:600; font-size:30px; line-height:1.08; letter-spacing:-.015em; color:var(--ink); }
.lb-hello p{ font-size:15px; color:var(--ink-2); }

/* section + group labels: quieter, tracked, premium */
.lb-sect h2{ font-size:19px; letter-spacing:-.02em; }
.lb-hub-sect{ font-size:11.5px; letter-spacing:.12em; color:var(--ink-3); font-weight:800; text-transform:uppercase; margin:26px 2px 12px; }
.lb-glabel{ letter-spacing:.12em; }

/* hub rows: airier, hairline + whisper shadow, softer icon tiles */
.lb-hub{ padding:15px 16px; border-radius:var(--r-lg); border:1px solid var(--line); box-shadow:var(--sh-1); margin-bottom:10px;
  transition:transform .16s ease, box-shadow .2s ease; }
.lb-hub:hover{ box-shadow:var(--sh-2); transform:translateY(-1px); }
.lb-hub:active{ transform:scale(.985); }
.lb-hub .ic-tile{ width:52px; height:52px; border-radius:16px; box-shadow:inset 0 1px 0 rgba(255,255,255,.35); }
.lb-hub .ic-tile svg.ic{ width:24px; height:24px; }
.lb-hub .tx .t{ font-size:16px; letter-spacing:-.01em; }
.lb-hub .tx .d{ font-size:13px; color:var(--ink-2); }

/* explore cards: a touch more rounded, softer lift */
.lb-xcard{ border-radius:20px; box-shadow:var(--sh-1); }
.lb-xcard:active{ transform:scale(.975); }

/* buttons: bigger tap target, crisper, brand glow on primary */
.lb-btn{ font-weight:700; font-size:14.5px; padding:13px 22px; border-radius:14px; box-shadow:var(--sh-1); letter-spacing:-.01em;
  transition:transform .14s ease, box-shadow .2s ease, background .2s ease; }
.lb-btn.primary{ background:var(--berry); color:#fff; box-shadow:0 4px 14px rgba(236,138,114,.32); }
.lb-btn.primary:hover{ box-shadow:0 6px 20px rgba(236,138,114,.38); }
.lb-btn.ghost{ background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-1); }
.kd-bigbtn{ border-radius:16px; padding:15px; }

/* chips + age filter: refined pills */
.lb-chip, .lb-agechip{ border-radius:999px; font-weight:600; }
.lb-agechip{ box-shadow:none; border:1px solid var(--line); }
.lb-agechip.on{ box-shadow:0 3px 10px rgba(236,138,114,.28); }

/* tabs: cleaner, calmer inactive colour, gentle active lift */
.lb-tabs{ background:rgba(255,255,255,.9); border-top:1px solid var(--line); }
.lb-tab{ font-size:10px; letter-spacing:.01em; color:var(--ink-3); }
.lb-tab svg.ic{ width:22px; height:22px; }

/* header: lighter, airier */
.lb-header{ background:rgba(250,246,242,.82); }
.lb-iconbtn{ border-radius:12px; box-shadow:var(--sh-1); }

/* win screen: more editorial, calmer */
.lb-win{ padding:34px 18px; }
.lb-win .burst{ width:78px; height:78px; box-shadow:0 8px 24px rgba(236,138,114,.3); }
.lb-win h2{ font-size:28px; letter-spacing:-.01em; }
.lb-win p{ font-size:15px; color:var(--ink-2); }

/* game headers: consistent, calm */
.lb-qhead .lb-progress{ font-weight:700; color:var(--ink); letter-spacing:-.01em; }
.lb-gamehint{ font-size:14px; color:var(--ink-2); line-height:1.5; }

/* daily verse: slightly calmer, more refined gradient + spacing */
.lb-daily{ box-shadow:0 10px 30px rgba(236,138,114,.22); }
.lb-daily .v{ font-size:22px; line-height:1.45; }

/* inputs: cleaner focus */
.lb-namerow input:focus, .lb-search input:focus{ border-color:var(--berry); box-shadow:0 0 0 3px rgba(236,138,114,.12); }

/* =====================================================================
   LIFE JOURNEY (Christian Life Simulator)
   ===================================================================== */
.ls-dash { display:grid; grid-template-columns:1fr 1fr; gap:10px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:14px; box-shadow:var(--sh-1); margin-bottom:14px; }
.ls-stat { display:flex; flex-direction:column; gap:5px; }
.ls-slabel { font-family:var(--font-display); font-weight:700; font-size:12px; color:var(--ink-2); }
.ls-sbar { height:9px; border-radius:999px; background:var(--surface-2); overflow:hidden; }
.ls-sbar span { display:block; height:100%; border-radius:999px; transition:width .5s cubic-bezier(.22,.7,.3,1); }
.ls-stage { display:inline-flex; align-items:center; gap:7px; background:var(--berry-tint); color:var(--berry-deep);
  font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  padding:7px 14px; border-radius:999px; margin-bottom:12px; }
.ls-stage span { font-size:16px; }
.ls-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; box-shadow:var(--sh-1); position:relative; }
.ls-scene { font-size:17px; font-weight:600; color:var(--ink); line-height:1.5; margin:0 0 16px; }
.ls-opts { display:flex; flex-direction:column; gap:10px; }
.ls-opt { border:1.5px solid var(--line); background:var(--surface); border-radius:14px; padding:14px; text-align:left;
  font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--ink); cursor:pointer;
  transition:transform .15s, background .2s, border-color .2s; }
.ls-opt:hover { border-color:var(--berry-2); } .ls-opt:active { transform:scale(.98); background:var(--berry-tint); }
.ls-delta { position:absolute; top:14px; right:16px; font-family:var(--font-display); font-weight:800; font-size:12px;
  color:var(--a-sage); animation:rise .4s both; }
.ls-final { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; max-width:320px; margin:18px auto 4px; }
.ls-fstat { display:flex; flex-direction:column; align-items:center; gap:1px; background:var(--surface-2); border-radius:14px; padding:10px 4px; }
.ls-fstat span { font-size:22px; } .ls-fstat b { font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--ink); }
.ls-fstat small { font-size:10px; color:var(--ink-2); font-weight:700; }

/* =====================================================================
   PROGRESS & ACHIEVEMENTS
   ===================================================================== */
.cp-progresslink { display:flex; align-items:center; gap:14px; width:100%; border:1px solid var(--line); cursor:pointer;
  background:var(--surface); border-radius:var(--r-lg); padding:14px 16px; margin-bottom:14px; box-shadow:var(--sh-1);
  text-align:left; transition:transform .15s, box-shadow .2s; }
.cp-progresslink:hover { box-shadow:var(--sh-2); } .cp-progresslink:active { transform:scale(.985); }
.cp-progresslink .ic-tile { width:44px; height:44px; border-radius:13px; display:grid; place-items:center; color:#fff; flex:0 0 auto; }
.cp-progresslink .ic-tile svg.ic { width:22px; height:22px; }
.cp-statgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:2px 0 14px; }
.cp-statcard { display:flex; flex-direction:column; align-items:center; gap:1px; background:var(--surface); border:1px solid var(--line);
  border-radius:16px; padding:14px 4px; box-shadow:var(--sh-1); }
.cp-statcard .e { font-size:22px; } .cp-statcard b { font-family:var(--font-display); font-weight:800; font-size:19px; color:var(--ink); }
.cp-statcard small { font-size:10px; color:var(--ink-2); font-weight:700; text-align:center; }
.cp-badges { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.cp-badge { display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; background:var(--surface-2);
  border-radius:16px; padding:14px 6px; opacity:.55; transition:transform .15s; }
.cp-badge.on { opacity:1; background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-1); }
.cp-badge .bm { font-size:30px; line-height:1; } .cp-badge.on .bm { animation:llPop .5s ease; }
.cp-badge b { font-family:var(--font-display); font-weight:700; font-size:12px; color:var(--ink); }
.cp-badge small { font-size:9.5px; color:var(--ink-2); line-height:1.3; font-weight:600; }

/* =====================================================================
   FAITH POINTS SHOP + WIN FLASH + PET ACCESSORY
   ===================================================================== */
.cp-acc { position:absolute; top:-4px; left:50%; transform:translateX(-50%); font-size:22px; z-index:3; pointer-events:none; }
.cp-petfig.big .cp-acc { font-size:42px; top:-10px; }
.cp-shoptop { text-align:center; background:linear-gradient(180deg,#FFF6F0,#FBE8DE); border-radius:var(--r-lg); padding:18px;
  box-shadow:inset 0 0 0 1px var(--line); margin-bottom:16px; }
.cp-balance { font-family:var(--font-display); font-weight:800; font-size:16px; color:var(--berry-deep); margin-top:8px; }
.cp-shop { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.cp-shopcard { display:flex; flex-direction:column; align-items:center; gap:5px; border:1.5px solid var(--line); background:var(--surface);
  border-radius:18px; padding:16px 8px; cursor:pointer; box-shadow:var(--sh-1); transition:transform .15s, border-color .2s, background .2s; }
.cp-shopcard:active { transform:scale(.96); }
.cp-shopcard .se { font-size:40px; line-height:1; }
.cp-shopcard b { font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--ink); }
.cp-shopcard .cost { font-family:var(--font-display); font-weight:800; font-size:13px; color:var(--berry-deep); }
.cp-shopcard .cost.no { color:var(--ink-3); }
.cp-shopcard .tag { font-family:var(--font-display); font-weight:700; font-size:11px; color:var(--a-sage); }
.cp-shopcard.owned { border-color:var(--line); }
.cp-shopcard.eq { border-color:var(--berry); background:var(--berry-tint); }
.cp-shopcard.eq .tag { color:var(--berry-deep); }
.cp-shopbtn { width:100%; margin-top:10px; }
.cp-pflash { position:fixed; top:38%; left:50%; transform:translate(-50%,0); z-index:200; pointer-events:none;
  font-family:var(--font-display); font-weight:800; font-size:26px; color:var(--berry-deep);
  background:#fff; padding:10px 20px; border-radius:999px; box-shadow:var(--sh-2); opacity:0; transition:transform .9s cubic-bezier(.2,.8,.3,1), opacity .9s; }
.cp-pflash.go { opacity:1; transform:translate(-50%,-60px); }

/* sound toggle: clear muted state */
.lb-iconbtn[aria-label="Sound on or off"]{ position:relative; }
.lb-iconbtn[aria-label="Sound on or off"]:not(.on){ color:var(--ink-3); }
.lb-iconbtn[aria-label="Sound on or off"]:not(.on)::after{ content:""; position:absolute; left:8px; right:8px; top:50%;
  height:2px; background:var(--ink-3); transform:rotate(-45deg); border-radius:2px; }

/* Choices Adventure: story title pill */
.tn-storytitle { display:inline-block; background:var(--berry-tint); color:var(--berry-deep); font-family:var(--font-display);
  font-weight:700; font-size:12px; letter-spacing:.04em; text-transform:uppercase; padding:6px 14px; border-radius:999px; margin:0 0 12px; }

/* =====================================================================
   BIBLE HEROES CARDS, redesign
   Bigger integrated portrait, gentle per-hero tint (no stark white box),
   redundant group label removed, tighter so cards are not mostly empty.
   ===================================================================== */
.lb-grid { gap:12px; }
.lb-hcard { padding:18px 14px 15px; border-radius:20px; border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.9)), var(--hc, var(--surface));
  box-shadow:var(--sh-1); transition:transform .16s ease, box-shadow .2s ease; }
.lb-hcard:hover { box-shadow:var(--sh-2); transform:translateY(-2px); }
.lb-hcard:active { transform:scale(.97); }
.lb-hcard .lb-av { width:90px; height:90px; border-radius:24px; margin-bottom:12px;
  box-shadow:0 8px 18px rgba(60,45,38,.14); }
.lb-hcard .lb-av .mono { font-size:34px; }
.lb-hcard .nm { font-size:16px; letter-spacing:-.01em; }
.lb-hcard .gp { display:none; }

/* =====================================================================
   PALETTE v5 (Option B) + LIGHT / DARK THEMES
   New calm "berry-rose" brand on warm paper, with a cozy warm-dark mode.
   Light tokens live in :root. Dark tokens apply when the user picks dark,
   OR when the device is dark and the user has not forced light.
   ===================================================================== */
:root{
  /* warm paper + crisp ink */
  --bg:        #FAF5EF;
  --surface:   #FFFFFF;
  --surface-2: #F4ECE3;
  --line:      #ECE2D6;
  --ink:       #2C2825;
  --ink-2:     #75695F;
  --ink-3:     #B0a497;

  /* brand: a softer, rosier berry */
  --berry:      #E76A6A;
  --berry-2:    #F2A39B;
  --berry-deep: #C8504C;
  --berry-tint: #FBE8E5;
  --berry-glow: #FAE0DA;

  /* refined, friendly accents (used across the games) */
  --a-sage:#96BE9C; --a-sky:#93B7D0; --a-clay:#D69A82; --a-gold:#ECBB5E;
  --a-lilac:#BFA6D4; --a-rose:#E89FA0; --a-teal:#82B9AF; --a-sand:#E0C49E;

  --sh-1: 0 1px 2px rgba(60,42,33,.04), 0 2px 8px rgba(60,42,33,.045);
  --sh-2: 0 6px 18px rgba(60,42,33,.07), 0 16px 44px rgba(60,42,33,.08);
}

/* ---- dark token set (used in two places below) ---- */
:root[data-theme="dark"]{
  --bg:        #1E1A19;
  --surface:   #29221F;
  --surface-2: #332A26;
  --line:      #3C322D;
  --ink:       #F3EBE3;
  --ink-2:     #B7ABA0;
  --ink-3:     #82766C;

  --berry:      #F18C84;
  --berry-2:    #C45F5A;
  --berry-deep: #F4A79F;
  --berry-tint: #3A2A27;
  --berry-glow: #2E2220;

  --a-sage:#86B58E; --a-sky:#84AAC6; --a-clay:#CB8E78; --a-gold:#E4B45C;
  --a-lilac:#B59ACB; --a-rose:#DE9293; --a-teal:#79AFA6; --a-sand:#CFB48E;

  --sh-1: 0 1px 2px rgba(0,0,0,.25), 0 2px 10px rgba(0,0,0,.3);
  --sh-2: 0 8px 22px rgba(0,0,0,.4), 0 18px 48px rgba(0,0,0,.45);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    --bg:#1E1A19; --surface:#29221F; --surface-2:#332A26; --line:#3C322D;
    --ink:#F3EBE3; --ink-2:#B7ABA0; --ink-3:#82766C;
    --berry:#F18C84; --berry-2:#C45F5A; --berry-deep:#F4A79F; --berry-tint:#3A2A27; --berry-glow:#2E2220;
    --a-sage:#86B58E; --a-sky:#84AAC6; --a-clay:#CB8E78; --a-gold:#E4B45C;
    --a-lilac:#B59ACB; --a-rose:#DE9293; --a-teal:#79AFA6; --a-sand:#CFB48E;
    --sh-1: 0 1px 2px rgba(0,0,0,.25), 0 2px 10px rgba(0,0,0,.3);
    --sh-2: 0 8px 22px rgba(0,0,0,.4), 0 18px 48px rgba(0,0,0,.45);
  }
}
/* gentle theme cross-fade */
body, .lb-hub, .lb-hcard, .lb-card, .lb-tabs, .lb-header, .lb-btn { transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
/* in dark, the warm daily-verse gradient can stay; header tint follows bg */
:root[data-theme="dark"] .lb-header { background:rgba(30,26,25,.82); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .lb-header{ background:rgba(30,26,25,.82); } }

/* =====================================================================
   THEME-SAFE SURFACES (dark-mode fix)
   These components were built with hardcoded white/cream backgrounds, so
   in dark mode their (now light) text became invisible. Re-pointing them
   at theme tokens fixes dark mode while keeping the light look identical.
   ===================================================================== */

/* Bible Heroes cards: surface tinted with the hero colour, adapts to theme */
.lb-hcard{ background:var(--surface); background:color-mix(in srgb, var(--hc) 10%, var(--surface)); }

/* warm Home pet card + Today pet peek */
.cp-homecard, .cp-petpeek{ background:linear-gradient(120deg, var(--berry-glow), var(--berry-tint)); }
.cp-htx b, .cp-peektx b{ color:var(--ink); }
.cp-htx span, .cp-peektx span{ color:var(--ink-2); }

/* pet screen card + speech bubble */
.cp-petcard{ background:linear-gradient(180deg, var(--surface), var(--surface-2)); box-shadow:inset 0 0 0 1px var(--line); }
.cp-bubble{ background:var(--surface); color:var(--ink); }

/* shop preview header */
.cp-shoptop{ background:linear-gradient(180deg, var(--berry-glow), var(--berry-tint)); }

/* +points flash pill */
.cp-pflash{ background:var(--surface); color:var(--berry-deep); }

/* bottom tab bar (was translucent white) */
.lb-tabs{ background:var(--surface); }

/* tween games: word slot, map label chip, sudoku error cell */
.tw-slot{ background:var(--surface-2); }
.tw-dot .lbl{ background:var(--surface); color:var(--ink); }
.tw-scell.err{ background:rgba(202,80,76,.16); }

/* heat-map colour game: keep readable in dark by dimming the pale tiles slightly */
:root[data-theme="dark"] .kd-tile.h-mild{ background:#6E5E4A; }
:root[data-theme="dark"] .kd-tile.h-cool{ background:#3E5260; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .kd-tile.h-mild{ background:#6E5E4A; }
  :root:not([data-theme="light"]) .kd-tile.h-cool{ background:#3E5260; } }

/* game success / error tints: keep the green/red hint but stay readable in dark */
.lb-seqrow.right{ background:var(--surface); background:color-mix(in srgb, var(--a-sage) 20%, var(--surface)); }
.kf-huntitem.got{ background:var(--surface); background:color-mix(in srgb, var(--a-sage) 20%, var(--surface)); }
.ll-target{ background:var(--surface-2); background:color-mix(in srgb, var(--a-sage) 16%, var(--surface)); }
.kd-stone2.bad{ background:var(--surface); background:color-mix(in srgb, var(--a-rose) 26%, var(--surface)); }

/* =====================================================================
   EXPLORE CARDS, richer treatment
   Layered depth (gradient is set inline) + soft top sheen + an oversized
   "ghost" icon motif so each card reads as a playful, themed tile rather
   than a flat colour block. Kept large for little hands.
   ===================================================================== */
.lb-explore { gap:14px; }
.lb-xcard { overflow:hidden; min-height:138px; justify-content:flex-start; padding:18px; }
.lb-xcard::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1;
  background:radial-gradient(135% 95% at 12% -12%, rgba(255,255,255,.24), transparent 56%); }
.lb-xcard .xicon { width:48px; height:48px; border-radius:15px; position:relative; z-index:2;
  background:rgba(255,255,255,.24); box-shadow:inset 0 1px 0 rgba(255,255,255,.28); }
.lb-xcard .xicon svg.ic { width:26px; height:26px; }
.lb-xcard .xtext { position:relative; z-index:2; margin-top:auto; }
.lb-xcard .t { font-size:17px; letter-spacing:-.01em; }
.lb-xcard .xarr { z-index:2; }
.lb-xcard .xghost { position:absolute; right:-14px; bottom:-22px; z-index:0; pointer-events:none;
  opacity:.18; transform:rotate(-8deg); transition:transform .3s ease, opacity .3s ease; }
.lb-xcard .xghost svg.ic { width:122px; height:122px; color:#fff; stroke-width:1.4; }
.lb-xcard:hover .xghost { opacity:.24; transform:rotate(-8deg) scale(1.05); }

/* =====================================================================
   LISTEN PLAYER (story + hero narration)
   ===================================================================== */
.lb-listenrow { margin:0 2px 16px; }
.lb-panelhd { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.lb-panelhd h3 { margin:0; }
.lba-btn { display:inline-flex; align-items:center; gap:9px; border:none; cursor:pointer; position:relative; overflow:hidden;
  background:var(--berry); color:#fff; font-family:var(--font-display); font-weight:700; font-size:15px;
  padding:11px 20px 11px 15px; border-radius:999px; box-shadow:0 4px 14px rgba(236,138,114,.32);
  transition:transform .14s ease, box-shadow .2s ease, background .2s ease; -webkit-tap-highlight-color:transparent; }
.lb-panelhd .lba-btn { font-size:13px; padding:8px 15px 8px 12px; }
.lba-btn:hover { box-shadow:0 6px 20px rgba(236,138,114,.4); }
.lba-btn:active { transform:scale(.96); }
.lba-btn.playing { background:var(--berry-deep); }
.lba-btn[disabled] { opacity:.6; cursor:default; box-shadow:none; }
.lba-btn .lba-ic { display:grid; place-items:center; width:22px; height:22px; flex:0 0 auto; }
.lba-btn .lba-ic svg.ic { width:19px; height:19px; color:#fff; }
.lba-btn .lba-tx { line-height:1; }
.lba-btn .lba-prog { position:absolute; left:0; bottom:0; height:3px; width:100%; background:rgba(255,255,255,.22); }
.lba-btn .lba-prog i { display:block; height:100%; width:0; background:#fff; border-radius:0 2px 2px 0; transition:width .25s linear; }