/* ── Stories — Empathy Stories frontend styles ───────────────────────────────
   BWS UI only — no Bootstrap. Child-friendly, soft, rounded, calm palette.
   ──────────────────────────────────────────────────────────────────────────── */

/* ─── Stories landing page ─────────────────────────────────────────────────── */
.lrn-stories-hero{background:linear-gradient(135deg,#fdf4ff 0%,#f0fdf4 100%);padding:3rem 0 2rem}
.lrn-stories-hero-title{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:900;color:#1f2937;margin:0 0 .5rem}
.lrn-stories-hero-sub{font-size:1.05rem;color:#6b7280;margin:0 0 1.5rem}
.lrn-stories-hero-badge{display:inline-flex;align-items:center;gap:.4rem;background:#fff;border:2px solid #a78bfa;color:#7c3aed;border-radius:2rem;padding:.25rem .9rem;font-size:.82rem;font-weight:700}

/* Category strip */
.lrn-story-cats{display:flex;gap:.5rem;overflow-x:auto;padding:.25rem 0 .6rem;scrollbar-width:thin;scrollbar-color:#c4b5fd #f3f4f6;-webkit-overflow-scrolling:touch}
.lrn-story-cats::-webkit-scrollbar{height:4px}
.lrn-story-cats::-webkit-scrollbar-thumb{background:#c4b5fd;border-radius:2px}
.lrn-story-cat-btn{flex-shrink:0;padding:.4rem 1rem;border-radius:2rem;border:2px solid #e5e7eb;background:#fff;color:#374151;font-size:.82rem;font-weight:700;cursor:pointer;white-space:nowrap;text-decoration:none;transition:border-color .15s,background .15s,color .15s;font-family:inherit}
.lrn-story-cat-btn:hover,.lrn-story-cat-btn.active{border-color:#7c3aed;background:#7c3aed;color:#fff}
.lrn-story-cat-btn--fav{border-color:#fca5a5;color:#ef4444}
.lrn-story-cat-btn--fav:hover,.lrn-story-cat-btn--fav.active{background:#ef4444;border-color:#ef4444;color:#fff}

/* Story card grid */
.lrn-story-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.25rem}
.lrn-story-card{display:flex;flex-direction:column;text-decoration:none;background:#fff;border-radius:1.25rem;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.07);transition:transform .2s,box-shadow .2s;border:2px solid transparent}
.lrn-story-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(124,58,237,.13);border-color:#a78bfa}
.lrn-story-card-cover{aspect-ratio:3/4;background:#f5f3ff;overflow:hidden;position:relative}
.lrn-story-card-cover img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.lrn-story-card-cover-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:3rem;background:linear-gradient(135deg,#fef3c7,#fde68a)}
.lrn-story-card-body{padding:1rem;flex:1;display:flex;flex-direction:column}
.lrn-story-card-cat{font-size:.72rem;font-weight:700;color:#7c3aed;text-transform:uppercase;letter-spacing:.03em;margin-bottom:.25rem}
.lrn-story-card-title{font-size:.95rem;font-weight:800;color:#1f2937;margin:0 0 .4rem;line-height:1.3}
.lrn-story-card-desc{font-size:.8rem;color:#6b7280;line-height:1.4;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:.6rem}
.lrn-story-card-meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.lrn-story-card-badge{display:inline-flex;align-items:center;gap:.2rem;font-size:.7rem;font-weight:700;border-radius:.3rem;padding:.1rem .4rem}
.lrn-story-card-badge--free{background:#d1fae5;color:#065f46}
.lrn-story-card-badge--safety{background:#fef3c7;color:#92400e}
.lrn-story-card-badge--ages{background:#ede9fe;color:#5b21b6}
.lrn-story-card-progress{height:4px;background:#e5e7eb;border-radius:2px;overflow:hidden;margin-top:.5rem}
.lrn-story-card-progress-fill{height:100%;background:#7c3aed;border-radius:2px;transition:width .3s}

/* ─── Category landing ──────────────────────────────────────────────────────── */
.lrn-story-cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem}
.lrn-story-cat-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:1.25rem 1rem;border-radius:1.25rem;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.07);text-decoration:none;transition:transform .2s,box-shadow .2s;border:2px solid transparent}
.lrn-story-cat-card:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(124,58,237,.12);border-color:#a78bfa}
.lrn-story-cat-card-icon{font-size:2.8rem;margin-bottom:.5rem;line-height:1}
.lrn-story-cat-card-title{font-size:.92rem;font-weight:800;color:#1f2937;margin-bottom:.2rem}
.lrn-story-cat-card-count{font-size:.75rem;color:#9ca3af}

/* ─── Story reader ──────────────────────────────────────────────────────────── */
.lrn-story-reader{max-width:720px;margin:0 auto;padding:1.5rem 1rem 4rem}

/* Breadcrumb */
.lrn-story-breadcrumb{display:flex;align-items:center;gap:.4rem;font-size:.82rem;color:#9ca3af;margin-bottom:1.5rem;flex-wrap:wrap}
.lrn-story-breadcrumb a{color:#7c3aed;text-decoration:none;font-weight:600}
.lrn-story-breadcrumb a:hover{text-decoration:underline}
.lrn-story-breadcrumb span[aria-hidden]{color:#d1d5db}

/* Mode selector */
.lrn-story-modes{display:flex;gap:.4rem;overflow-x:auto;margin-bottom:1.5rem;padding-bottom:.25rem;scrollbar-width:none}
.lrn-story-modes::-webkit-scrollbar{display:none}
.lrn-story-mode-btn{flex-shrink:0;padding:.35rem .85rem;border-radius:2rem;border:2px solid #e5e7eb;background:#fff;color:#6b7280;font-size:.78rem;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s;white-space:nowrap}
.lrn-story-mode-btn:hover{border-color:#7c3aed;color:#7c3aed}
.lrn-story-mode-btn.active{border-color:#7c3aed;background:#7c3aed;color:#fff}

/* Story card */
.lrn-story-card-reader{background:#fff;border-radius:1.5rem;box-shadow:0 4px 24px rgba(0,0,0,.08);overflow:hidden;margin-bottom:1rem}
.lrn-story-card-img{width:100%;max-height:560px;object-fit:contain;display:block;background:#fff}
.lrn-story-card-img-placeholder{min-height:220px;display:flex;align-items:center;justify-content:center;font-size:4rem;background:linear-gradient(135deg,#fef9c3,#fde68a)}
.lrn-story-card-content{padding:1.5rem}
.lrn-story-card-page-title{font-size:1.05rem;font-weight:900;color:#7c3aed;margin:0 0 .75rem}
.lrn-story-card-text{font-size:1.1rem;line-height:1.7;color:#1f2937;margin:0 0 1rem}

/* Character dialogue / speech bubble */
.lrn-story-dialogue{display:flex;align-items:flex-start;gap:.75rem;margin:1rem 0;padding:1rem;background:#f5f3ff;border-radius:1rem;border-left:4px solid #a78bfa}
.lrn-story-dialogue-avatar{width:44px;height:44px;border-radius:50%;background:#7c3aed;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0}
.lrn-story-dialogue-bubble{flex:1}
.lrn-story-dialogue-name{font-size:.75rem;font-weight:700;color:#7c3aed;margin-bottom:.2rem}
.lrn-story-dialogue-text{font-size:1rem;color:#1f2937;font-style:italic;line-height:1.5}

/* Safety callout */
.lrn-story-safety-tip{display:flex;align-items:flex-start;gap:.6rem;margin:1rem 0;padding:.85rem 1rem;background:#fef3c7;border-radius:.75rem;border:2px solid #fde68a;font-size:.9rem;color:#78350f;line-height:1.4}
.lrn-story-safety-tip-icon{font-size:1.2rem;flex-shrink:0;margin-top:.05rem}

/* Question section */
.lrn-story-question{margin-top:1rem;padding-top:1rem;border-top:2px dashed #e5e7eb}
.lrn-story-question-label{font-size:.8rem;font-weight:700;color:#9ca3af;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}
.lrn-story-question-text{font-size:1.05rem;font-weight:700;color:#1f2937;margin-bottom:1rem;line-height:1.4}

/* Choice buttons */
.lrn-story-choices{display:flex;flex-direction:column;gap:.6rem}
.lrn-story-choice{display:block;width:100%;padding:.85rem 1.1rem;border-radius:1rem;border:2px solid #e5e7eb;background:#fff;color:#374151;font-size:.97rem;font-weight:600;text-align:left;cursor:pointer;transition:border-color .15s,background .15s,transform .1s;font-family:inherit;line-height:1.4}
.lrn-story-choice:hover:not(:disabled){border-color:#7c3aed;background:#f5f3ff;transform:translateX(3px)}
.lrn-story-choice:disabled{cursor:default}
.lrn-story-choice--correct{border-color:#10b981 !important;background:#ecfdf5 !important;color:#065f46 !important}
.lrn-story-choice--wrong{border-color:#f87171 !important;background:#fef2f2 !important;color:#991b1b !important;opacity:.7}

/* Feedback box */
.lrn-story-feedback{margin-top:.85rem;padding:.85rem 1rem;border-radius:.85rem;font-size:.95rem;line-height:1.5;font-weight:600}
.lrn-story-feedback--correct{background:#ecfdf5;border:2px solid #6ee7b7;color:#065f46}
.lrn-story-feedback--hint{background:#fef3c7;border:2px solid #fde68a;color:#78350f}

/* Explanation */
.lrn-story-explanation{margin-top:.5rem;padding:.75rem 1rem;background:#f0fdf4;border-radius:.75rem;font-size:.9rem;color:#166534;line-height:1.5}

/* Read aloud button */
.lrn-story-read-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .9rem;border-radius:2rem;border:2px solid #a78bfa;background:#fff;color:#7c3aed;font-size:.82rem;font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s,color .15s;margin-bottom:.75rem}
.lrn-story-read-btn:hover,.lrn-story-read-btn.reading{background:#7c3aed;color:#fff;border-color:#7c3aed}
.lrn-story-read-btn-icon{font-size:1rem}

/* Progress bar */
.lrn-story-progress-bar{background:#e5e7eb;border-radius:2rem;height:8px;overflow:hidden;margin-bottom:1rem}
.lrn-story-progress-bar-fill{height:100%;background:linear-gradient(90deg,#7c3aed,#a78bfa);border-radius:2rem;transition:width .4s ease}

/* Navigation */
.lrn-story-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 .5rem}
.lrn-story-nav-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.65rem 1.4rem;border-radius:2rem;border:none;font-size:.92rem;font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s,transform .1s}
.lrn-story-nav-btn:active{transform:scale(.97)}
.lrn-story-nav-btn--prev{background:#f3f4f6;color:#6b7280}
.lrn-story-nav-btn--prev:hover{background:#e5e7eb}
.lrn-story-nav-btn--next{background:#7c3aed;color:#fff}
.lrn-story-nav-btn--next:hover{background:#6d28d9}
.lrn-story-nav-btn:disabled{opacity:.45;cursor:default}
.lrn-story-page-counter{font-size:.8rem;color:#9ca3af;font-weight:600}

/* ─── Points earned overlay ─────────────────────────────────────────────────── */
.lrn-story-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem;animation:lrnFadeIn .3s ease}
.lrn-story-overlay[hidden]{display:none}
@keyframes lrnFadeIn{from{opacity:0}to{opacity:1}}
.lrn-story-overlay-card{background:#fff;border-radius:2rem;padding:2.5rem 2rem;text-align:center;max-width:380px;width:100%;animation:lrnSlideUp .35s ease}
@keyframes lrnSlideUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
.lrn-story-overlay-emoji{font-size:4rem;margin-bottom:.5rem;display:block}
.lrn-story-overlay-title{font-size:1.6rem;font-weight:900;color:#1f2937;margin-bottom:.35rem}
.lrn-story-overlay-sub{font-size:1rem;color:#6b7280;margin-bottom:1.5rem}
.lrn-story-points-pill{display:inline-flex;align-items:center;gap:.4rem;background:#fef3c7;border:2px solid #fde68a;color:#92400e;border-radius:2rem;padding:.4rem 1.1rem;font-size:1.05rem;font-weight:700;margin-bottom:1.25rem}
.lrn-story-badge-earned{margin:1rem 0;padding:1rem;background:#f5f3ff;border-radius:1rem}
.lrn-story-badge-earned-icon{font-size:2.5rem;margin-bottom:.25rem}
.lrn-story-badge-earned-name{font-weight:700;color:#5b21b6}

/* ─── Game mode screens ─────────────────────────────────────────────────────── */
.lrn-story-mode-intro{text-align:center;padding:2rem 1rem;background:#fff;border-radius:1.5rem;box-shadow:0 4px 20px rgba(0,0,0,.07);margin-bottom:1rem}
.lrn-story-mode-intro-icon{font-size:3.5rem;margin-bottom:.5rem}
.lrn-story-mode-intro-title{font-size:1.3rem;font-weight:900;color:#1f2937;margin-bottom:.4rem}
.lrn-story-mode-intro-desc{font-size:.9rem;color:#6b7280;max-width:360px;margin:0 auto 1.25rem}

/* Match game pairs */
.lrn-match-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.lrn-match-item{padding:.75rem;border:2.5px solid #e5e7eb;border-radius:.85rem;background:#fff;font-size:.9rem;font-weight:600;cursor:pointer;text-align:center;transition:border-color .15s,background .15s;user-select:none;color:#374151}
.lrn-match-item:hover{border-color:#a78bfa;background:#f5f3ff}
.lrn-match-item.selected{border-color:#7c3aed;background:#7c3aed;color:#fff}
.lrn-match-item.matched{border-color:#10b981;background:#ecfdf5;color:#065f46;cursor:default}
.lrn-match-item.wrong{border-color:#f87171;background:#fef2f2;animation:lrnShake .4s}
@keyframes lrnShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* Sequence cards */
.lrn-sequence-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem}
.lrn-sequence-card{padding:1rem;border:2.5px solid #e5e7eb;border-radius:1rem;background:#fff;cursor:grab;transition:border-color .15s,box-shadow .15s;font-size:.88rem;color:#374151;line-height:1.4;user-select:none}
.lrn-sequence-card:hover{border-color:#a78bfa;box-shadow:0 3px 10px rgba(124,58,237,.12)}
.lrn-sequence-card.drag-over{border-color:#7c3aed;background:#f5f3ff}
.lrn-sequence-card.correct-pos{border-color:#10b981;background:#ecfdf5}
.lrn-sequence-card.wrong-pos{border-color:#f87171;background:#fef2f2}

/* Emotion match */
.lrn-emotion-pairs{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.lrn-emotion-scenario{padding:1rem;border:2px solid #e5e7eb;border-radius:1rem;background:#fafafa;font-size:.88rem;color:#374151;line-height:1.4}
.lrn-emotion-options{display:flex;flex-direction:column;gap:.4rem}
.lrn-emotion-opt{padding:.5rem .75rem;border:2px solid #e5e7eb;border-radius:.6rem;background:#fff;cursor:pointer;font-size:.9rem;font-weight:600;text-align:center;transition:border-color .15s,background .15s;font-family:inherit}
.lrn-emotion-opt:hover{border-color:#a78bfa;background:#f5f3ff}
.lrn-emotion-opt.matched{border-color:#10b981;background:#ecfdf5;cursor:default}

/* Printables section */
.lrn-story-printables{margin-top:2rem}
.lrn-story-printables-title{font-size:.95rem;font-weight:800;color:#1f2937;margin-bottom:.75rem;display:flex;align-items:center;gap:.4rem}
.lrn-printable-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.75rem}
.lrn-printable-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:1rem .75rem;border:2px solid #e5e7eb;border-radius:1rem;background:#fff;cursor:pointer;font-family:inherit;transition:border-color .15s,background .15s}
.lrn-printable-card:hover{border-color:#7c3aed;background:#f5f3ff}
.lrn-printable-card-icon{font-size:1.8rem;margin-bottom:.4rem}
.lrn-printable-card-label{font-size:.78rem;font-weight:700;color:#374151;line-height:1.3}
.lrn-printable-card-cost{font-size:.7rem;color:#9ca3af;margin-top:.2rem}

/* ─── Empty state ───────────────────────────────────────────────────────────── */
.lrn-stories-empty{text-align:center;padding:4rem 1rem;color:#9ca3af}
.lrn-stories-empty-icon{font-size:4rem;margin-bottom:.75rem}
.lrn-stories-empty p{font-size:1rem;margin-bottom:1rem}

/* ─── Responsive ─────────────────────────────────────────────────────────────── */
@media(max-width:600px){
  .lrn-story-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.85rem}
  .lrn-story-card-content{padding:1rem}
  .lrn-story-card-text{font-size:1rem}
  .lrn-story-choice{font-size:.9rem;padding:.75rem .9rem}
  .lrn-match-grid{grid-template-columns:1fr}
  .lrn-emotion-pairs{grid-template-columns:1fr}
}