/* NALAROO Kid-Friendly Language & Storybook UX v1.0
 * Presentation only — no changes to XP, wallet, sessions or achievements.
 * Scoped to the three destination pages, without repainting collectible cards.
 */

/* Compact destination chapters: reduce dead space but retain the established
   parchment, brown hand-drawn border, custom illustrated emblem and logo. */
.collection-page .adventure-hero,
.learning-journal .adventure-hero{
  grid-template-columns:90px minmax(0,1fr);
  gap:8px 17px;
  padding:13px 18px;
  margin:4px auto 15px;
  border-radius:26px 30px 25px 29px;
}
.adventure-hero .adventure-emblem{
  width:90px;height:92px;
  padding:9px;
}
.adventure-hero .adventure-emblem svg{width:70px;height:70px}
.adventure-hero .adventure-copy{padding-right:170px}
.adventure-hero .adventure-eyebrow{
  font-size:11px;line-height:1.35;
  letter-spacing:.1em;margin-bottom:3px;
}
.collection-page .adventure-title,
.learning-journal .adventure-title{font-size:30px;line-height:1.13}
.adventure-hero .adventure-subtitle{
  font-size:15px;line-height:1.4;
  margin:3px 0 7px;
}
.adventure-hero .adventure-brand{width:155px;height:46px;top:13px;right:18px}
.adventure-hero .adventure-identity{font-size:14px;gap:7px}
.adventure-hero .adventure-stats{align-self:start}
.adventure-hero .collection-wallet{padding:8px 12px;gap:15px}
.adventure-hero .collection-wallet-amount span,
.adventure-hero .collection-wallet small,
.adventure-hero .collection-owned-count span{
  font-size:13px;line-height:1.4;
}
.adventure-hero .collection-owned-count{padding-left:15px}
.adventure-bag .collection-owned-count{padding-left:0;padding-right:15px}
.collection-page .collection-wallet small{max-width:230px}
.collection-page .collection-filters .collection-filter{
  font-size:14px;line-height:1.35;
}
.collection-page .collection-family-link,
.collection-page .collection-shop-links .collection-link{
  font-size:14px;
}

/* Journal: legible learning outcomes, distinct notes and storybook badges.
 * Descriptive statistic copy never replaces verified data or calculation. */
.learning-journal .lj-panel>h2{font-size:19px;line-height:1.3}
.learning-journal .lj-stat-value{font-size:25px}
.learning-journal .lj-stat-label{
  font-size:14px;line-height:1.35;color:#385447;
}
.learning-journal .lj-caption,
.learning-journal .lj-no-data,
.learning-journal .lj-accuracy,
.learning-journal .lj-review-count{
  font-size:13px;line-height:1.45;
}
.learning-journal .lj-subject h3{font-size:15px}
.learning-journal .lj-session-heading strong,
.learning-journal .lj-session-score,
.learning-journal .lj-session-details,
.learning-journal .lj-session time,
.learning-journal .lj-detail-label,
.learning-journal .lj-link-button{
  font-size:13px;line-height:1.45;
}
.learning-journal .lj-next-copy{font-size:14px;line-height:1.5}
.learning-journal .lj-button{font-size:14px}
.lj-method-note{
  margin-top:5px;
  color:#4E6257;
  font-size:12px;line-height:1.45;
}
.lj-method-note summary{
  display:inline-flex;align-items:center;
  min-height:36px;padding:4px 1px;
  color:#365e78;font-weight:800;
  text-decoration:underline;text-underline-offset:3px;
  cursor:pointer;
}
.lj-method-note p{
  max-width:78ch;
  padding:7px 11px;margin:0 0 3px!important;
  background:#F4F0E2;border-left:3px solid #9AAE8D;
  border-radius:3px 9px 9px 3px;
}
.learning-journal .lj-badge-total{font-size:14px}
.learning-journal .lj-badge-preview{
  gap:9px;margin:10px 0 0;
}
.learning-journal .lj-badge-preview li{
  display:flex;align-items:center;gap:8px;
  max-width:100%;min-height:46px;
  padding:6px 12px 6px 7px;
  background:linear-gradient(150deg,#FFFDF6,#F4EAD7);
  border:1px solid #CAB08C;border-radius:16px 18px 15px 17px;
  box-shadow:0 2px 0 #B7A08033;
  color:#2A4C44;font-size:14px;font-weight:800;
}
.learning-journal .lj-badge-preview .lj-icon{
  width:34px;height:34px;
}
.learning-journal .lj-badge-list{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr));
}
.learning-journal .lj-badge{
  padding:13px;
  border:1px solid #D5C2A3;border-radius:13px;
  background:#FFFCF5;
}
.learning-journal .lj-badge h3{font-size:15px}
.learning-journal .lj-badge p,
.learning-journal .lj-badge small{font-size:13px}
.learning-journal .lj-achievement-details>summary{margin-top:7px}
.learning-journal :focus-visible,
.collection-page :focus-visible{outline-offset:3px}

/* Tablets and narrow desktop screens keep the compact headers, with the
 * official logo clear of labels and without hiding the wallet/XP. */
@media(max-width:900px){
 .collection-page .adventure-hero,
 .learning-journal .adventure-hero{
   grid-template-columns:74px minmax(0,1fr);
   gap:9px 13px;padding:13px 15px;
 }
 .adventure-hero .adventure-emblem{
   width:74px;height:80px;padding:7px;
 }
 .adventure-hero .adventure-emblem svg{width:59px;height:59px}
 .adventure-hero .adventure-copy{padding-right:0}
 .adventure-hero .adventure-brand{width:121px;height:37px;top:12px;right:15px}
 .adventure-hero .adventure-eyebrow{
   padding-right:110px;min-height:0;
 }
 .collection-page .adventure-title,
 .learning-journal .adventure-title{font-size:27px}
}
@media(max-width:600px){
 .collection-page .adventure-hero,
 .learning-journal .adventure-hero{
   grid-template-columns:58px minmax(0,1fr);
   gap:8px 10px;padding:12px 11px;
   margin-bottom:13px;
   border-radius:22px 25px 22px 24px;
 }
 .adventure-hero .adventure-emblem{
   width:58px;height:65px;margin-top:28px;padding:5px;
 }
 .adventure-hero .adventure-emblem svg{width:48px;height:48px}
 .adventure-hero .adventure-brand{width:94px;height:29px;top:10px;right:11px}
 .adventure-hero .adventure-eyebrow{
   padding-right:80px;max-width:none;
   font-size:10px;min-height:0;
 }
 .collection-page .adventure-title,
 .learning-journal .adventure-title{font-size:23px}
 .adventure-hero .adventure-subtitle{
   font-size:13px;line-height:1.4;margin:4px 0 8px;
 }
 .adventure-hero .adventure-identity{font-size:12px;gap:5px}
 .adventure-hero .adventure-stats{grid-column:1/-1}
 .adventure-hero .collection-wallet{gap:9px;padding:8px 10px}
 .adventure-hero .collection-wallet-amount span,
 .adventure-hero .collection-wallet small,
 .adventure-hero .collection-owned-count span{font-size:12px}
 .adventure-hero .collection-owned-count{
   padding-left:10px;
 }
 .adventure-bag .collection-owned-count{
   padding-left:0;padding-right:10px;
 }
 .collection-page .collection-filters .collection-filter{font-size:13px}
 .learning-journal .lj-stats{gap:6px}
 .learning-journal .lj-stat{padding:9px 7px}
 .learning-journal .lj-stat-value{font-size:clamp(17px,5.4vw,23px)}
 .learning-journal .lj-stat-label{font-size:12px}
 .learning-journal .lj-panel>h2{font-size:17px}
 .learning-journal .lj-session-summary{min-height:65px}
 .learning-journal .lj-badge-preview li{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
 .learning-journal .lj-badge-preview li{transition:none}
}