/* ── Typing Training System — BWS UI frontend styles ────────────────────────
   No Bootstrap. Child-friendly, energetic, playful, keyboard-themed.
   Prefixes: lrn-typ- (landing), typ- (game/lesson page)
   ──────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   BREADCRUMB (shared — landing page + lesson page)
   ═══════════════════════════════════════════════════════════════════════════ */

.lrn-typ-breadcrumb{display:flex;align-items:center;gap:.35rem;font-size:.82rem;flex-wrap:wrap;padding:.75rem 0;color:#9ca3af}
.lrn-typ-breadcrumb a{color:#6b7280;text-decoration:none;font-weight:600;transition:color .15s}
.lrn-typ-breadcrumb a:hover{color:#7c3aed}
.lrn-typ-breadcrumb span[aria-current]{color:#1f2937;font-weight:700}
.lrn-typ-breadcrumb span[aria-hidden]{color:#d1d5db;font-size:.9em;user-select:none}

/* ═══════════════════════════════════════════════════════════════════════════
   LANDING PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

.lrn-typ-hero{background:linear-gradient(135deg,#f0f9ff 0%,#fef3c7 100%);padding:3rem 0 2rem;text-align:center}
.lrn-typ-hero-title{font-size:clamp(1.8rem,5vw,2.8rem);font-weight:900;color:#1f2937;margin:0 0 .5rem;line-height:1.1}
.lrn-typ-hero-title span{color:#7c3aed}
.lrn-typ-hero-sub{font-size:1.05rem;color:#6b7280;margin:0 0 1.5rem;max-width:520px;margin-inline:auto}
.lrn-typ-hero-stats{display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap;margin-top:1rem}
.lrn-typ-hero-stat{display:flex;flex-direction:column;align-items:center;gap:.15rem}
.lrn-typ-hero-stat-val{font-size:1.4rem;font-weight:900;color:#7c3aed}
.lrn-typ-hero-stat-lbl{font-size:.73rem;color:#9ca3af;font-weight:600;text-transform:uppercase;letter-spacing:.04em}

/* Category strip */
.lrn-typ-cats{display:flex;gap:.5rem;overflow-x:auto;padding:.25rem 0 .6rem;scrollbar-width:thin;scrollbar-color:#c4b5fd #f3f4f6;-webkit-overflow-scrolling:touch}
.lrn-typ-cats::-webkit-scrollbar{height:4px}
.lrn-typ-cats::-webkit-scrollbar-thumb{background:#c4b5fd;border-radius:2px}
.lrn-typ-cat-btn{flex-shrink:0;padding:.38rem 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-typ-cat-btn:hover,.lrn-typ-cat-btn.active{border-color:#7c3aed;background:#7c3aed;color:#fff}

/* Lesson card grid */
.lrn-typ-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.25rem}
.lrn-typ-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;position:relative}
.lrn-typ-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(124,58,237,.13);border-color:#a78bfa}
.lrn-typ-card-head{padding:1.1rem 1rem .7rem;display:flex;align-items:flex-start;gap:.7rem}
.lrn-typ-card-icon{width:44px;height:44px;border-radius:.75rem;display:flex;align-items:center;justify-content:center;font-size:1.35rem;flex-shrink:0}
.lrn-typ-card-meta{flex:1;min-width:0}
.lrn-typ-card-cat{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.15rem;opacity:.8}
.lrn-typ-card-title{font-size:.95rem;font-weight:800;color:#1f2937;margin:0;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrn-typ-card-body{padding:0 1rem .8rem;flex:1}
.lrn-typ-card-desc{font-size:.8rem;color:#6b7280;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0 0 .6rem}
.lrn-typ-card-badges{display:flex;gap:.3rem;flex-wrap:wrap;align-items:center}
.lrn-typ-card-badge{display:inline-flex;align-items:center;gap:.2rem;font-size:.68rem;font-weight:700;border-radius:.3rem;padding:.1rem .4rem;white-space:nowrap}
.lrn-typ-card-badge--diff-beginner{background:#d1fae5;color:#065f46}
.lrn-typ-card-badge--diff-easy{background:#dcfce7;color:#15803d}
.lrn-typ-card-badge--diff-medium{background:#fef3c7;color:#92400e}
.lrn-typ-card-badge--diff-hard{background:#fee2e2;color:#991b1b}
.lrn-typ-card-badge--diff-expert{background:#fae8ff;color:#7e22ce}
.lrn-typ-card-badge--mode{background:#e0e7ff;color:#3730a3}
.lrn-typ-card-badge--wpm{background:#f0fdf4;color:#166534}
.lrn-typ-card-footer{padding:.6rem 1rem .9rem;border-top:1px solid #f3f4f6;display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.lrn-typ-card-pts{font-size:.78rem;font-weight:700;color:#7c3aed}
.lrn-typ-card-play{display:inline-flex;align-items:center;gap:.3rem;font-size:.78rem;font-weight:800;color:#fff;background:#7c3aed;border-radius:2rem;padding:.28rem .85rem;text-decoration:none;transition:background .15s}
.lrn-typ-card-play:hover{background:#6d28d9}
.lrn-typ-card-done{position:absolute;top:.5rem;right:.5rem;width:22px;height:22px;background:#10b981;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;color:#fff}
.lrn-typ-card-progress{height:3px;background:#e5e7eb;margin:0 1rem .5rem}
.lrn-typ-card-progress-fill{height:100%;background:#7c3aed;border-radius:1px;transition:width .3s}

/* Empty state */
.lrn-typ-empty{text-align:center;padding:3rem 1rem;color:#9ca3af}
.lrn-typ-empty-icon{font-size:3.5rem;margin-bottom:.75rem;display:block}

/* ═══════════════════════════════════════════════════════════════════════════
   GAME PAGE LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */

.typ-page{min-height:100vh;background:#f8fafc;display:flex;flex-direction:column}

/* Top bar */
.typ-topbar{display:flex;align-items:center;gap:.75rem;padding:.6rem 1rem;background:#fff;border-bottom:2px solid #f3f4f6;position:sticky;top:0;z-index:100;flex-wrap:wrap}
.typ-topbar-back{display:inline-flex;align-items:center;gap:.3rem;font-size:.82rem;font-weight:700;color:#7c3aed;text-decoration:none;flex-shrink:0}
.typ-topbar-back:hover{text-decoration:underline}
.typ-topbar-title{font-size:.9rem;font-weight:800;color:#1f2937;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.typ-topbar-pts{display:inline-flex;align-items:center;gap:.25rem;font-size:.78rem;font-weight:800;background:#f5f3ff;color:#7c3aed;border-radius:2rem;padding:.18rem .65rem;flex-shrink:0}

/* Stats bar (WPM / accuracy / combo) */
.typ-statsbar{display:flex;align-items:stretch;gap:0;background:#fff;border-bottom:2px solid #f3f4f6}
.typ-stat{flex:1;display:flex;flex-direction:column;align-items:center;padding:.45rem .5rem;border-right:1px solid #f3f4f6}
.typ-stat:last-child{border-right:none}
.typ-stat-val{font-size:1.2rem;font-weight:900;color:#1f2937;line-height:1}
.typ-stat-lbl{font-size:.62rem;font-weight:700;color:#9ca3af;text-transform:uppercase;letter-spacing:.04em;margin-top:.1rem}
.typ-stat--wpm .typ-stat-val{color:#7c3aed}
.typ-stat--acc .typ-stat-val{color:#10b981}
.typ-stat--combo .typ-stat-val{color:#f59e0b}
.typ-stat--hearts .typ-stat-val{color:#ef4444}
.typ-stat--timer .typ-stat-val{color:#f59e0b}
.typ-stat--timer.danger .typ-stat-val{color:#ef4444;animation:typ-pulse .5s infinite}

/* Hearts */
.typ-hearts{display:flex;gap:.15rem;font-size:1.1rem;line-height:1}

/* Progress bar */
.typ-progress-wrap{background:#e5e7eb;height:6px}
.typ-progress-fill{height:100%;background:linear-gradient(90deg,#7c3aed,#a78bfa);transition:width .3s;border-radius:0 3px 3px 0}

/* ═══════════════════════════════════════════════════════════════════════════
   MAIN GAME AREA
   ═══════════════════════════════════════════════════════════════════════════ */

.typ-game{flex:1;display:flex;flex-direction:column;align-items:center;padding:1.5rem 1rem .5rem;gap:1rem;max-width:760px;margin:0 auto;width:100%}

/* Item display (word / letter / sentence to type) */
.typ-display{text-align:center;width:100%}
.typ-display-image{margin-bottom:.75rem}
.typ-display-image img{max-height:140px;width:auto;border-radius:1rem;box-shadow:0 2px 12px rgba(0,0,0,.1);object-fit:contain}
.typ-display-hint{font-size:.82rem;color:#9ca3af;margin-bottom:.4rem;min-height:1.2em}
.typ-display-text{font-size:clamp(2rem,6vw,3.5rem);font-weight:900;color:#1f2937;letter-spacing:.04em;line-height:1.15;margin-bottom:.25rem;word-break:break-all;font-family:'Courier New',Courier,monospace}

/* Character-by-character highlight for sentence/word mode */
.typ-char{display:inline;transition:color .06s}
.typ-char--ok{color:#10b981}
.typ-char--err{color:#ef4444;text-decoration:underline wavy #ef4444}
.typ-char--cur{color:#7c3aed;border-bottom:3px solid #7c3aed}
.typ-char--pending{color:#9ca3af}

/* Listen mode button */
.typ-listen-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1.4rem;border-radius:2rem;border:2px solid #7c3aed;background:#f5f3ff;color:#7c3aed;font-size:.9rem;font-weight:800;cursor:pointer;font-family:inherit;transition:background .15s;margin-bottom:.5rem}
.typ-listen-btn:hover{background:#ede9fe}
.typ-listen-btn:active{background:#ddd6fe}

/* Type here input */
.typ-input-wrap{width:100%;position:relative}
.typ-input{width:100%;padding:.75rem 1rem;font-size:1.3rem;font-weight:700;border:3px solid #e5e7eb;border-radius:1rem;background:#fff;color:#1f2937;text-align:center;font-family:'Courier New',Courier,monospace;outline:none;transition:border-color .15s,box-shadow .15s;caret-color:#7c3aed;letter-spacing:.05em}
.typ-input:focus{border-color:#7c3aed;box-shadow:0 0 0 4px rgba(124,58,237,.12)}
.typ-input.correct{border-color:#10b981;background:#f0fdf4}
.typ-input.wrong{border-color:#ef4444;background:#fef2f2;animation:typ-shake .2s}
.typ-input-note{text-align:center;font-size:.75rem;color:#c4b5fd;margin-top:.3rem}

/* Feedback toast (correct / wrong message) */
.typ-feedback{text-align:center;min-height:1.6rem;font-size:1rem;font-weight:800;transition:opacity .2s}
.typ-feedback--ok{color:#10b981}
.typ-feedback--err{color:#ef4444}
.typ-feedback--empty{opacity:0}

/* Combo burst */
.typ-combo-burst{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2.5rem;font-weight:900;color:#f59e0b;text-shadow:0 2px 8px rgba(0,0,0,.18);pointer-events:none;animation:typ-comboburst .7s ease-out forwards;z-index:999}
@keyframes typ-comboburst{0%{opacity:1;transform:translate(-50%,-50%) scale(.8)}60%{opacity:1;transform:translate(-50%,-60%) scale(1.2)}100%{opacity:0;transform:translate(-50%,-80%) scale(1.1)}}

/* ═══════════════════════════════════════════════════════════════════════════
   ON-SCREEN KEYBOARD
   ═══════════════════════════════════════════════════════════════════════════ */

.typ-keyboard{width:100%;max-width:720px;margin:0 auto;user-select:none;padding:.25rem 0 .5rem}
.typ-keyboard-row{display:flex;justify-content:center;gap:4px;margin-bottom:4px}
.typ-key{
  min-width:32px;height:38px;
  border-radius:7px;border:2px solid rgba(0,0,0,.1);
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:800;
  cursor:pointer;
  transition:transform .07s,opacity .1s,filter .1s;
  position:relative;
  color:#1f2937;
  flex:0 0 auto;
  box-shadow:0 2px 0 rgba(0,0,0,.18);
  font-family:inherit;
}
.typ-key:active,.typ-key.pressed{transform:translateY(2px);box-shadow:0 0 0 rgba(0,0,0,.18)}
.typ-key--space{min-width:160px;flex:0 1 auto}
.typ-key--wide{min-width:56px}
.typ-key--xwide{min-width:72px}
.typ-key--active{transform:translateY(2px)!important;box-shadow:0 0 0 rgba(0,0,0,.18)!important;filter:brightness(.85)}
.typ-key--dim{opacity:.35}
.typ-key--highlight{outline:3px solid #fff;outline-offset:1px;z-index:2}

/* Finger color zones */
.typ-key--f0{background:#fecaca;border-color:#fca5a5} /* L pinky  #ef4444 family */
.typ-key--f1{background:#fed7aa;border-color:#fb923c} /* L ring   #f97316 */
.typ-key--f2{background:#fef08a;border-color:#facc15} /* L middle #eab308 */
.typ-key--f3{background:#bbf7d0;border-color:#4ade80} /* L index  #22c55e */
.typ-key--f4{background:#e0e7ff;border-color:#818cf8} /* thumbs   #6366f1 */
.typ-key--f5{background:#a5f3fc;border-color:#22d3ee} /* R index  #06b6d4 */
.typ-key--f6{background:#bfdbfe;border-color:#60a5fa} /* R middle #3b82f6 */
.typ-key--f7{background:#ddd6fe;border-color:#a78bfa} /* R ring   #8b5cf6 */
.typ-key--f8{background:#fbcfe8;border-color:#f472b6} /* R pinky  #ec4899 */

/* Keyboard legend */
.typ-keyboard-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem .6rem;margin-top:.4rem;font-size:.65rem;color:#6b7280}
.typ-leg-item{display:flex;align-items:center;gap:.2rem}
.typ-leg-dot{width:10px;height:10px;border-radius:2px;flex-shrink:0}

/* ═══════════════════════════════════════════════════════════════════════════
   RESULTS SCREEN
   ═══════════════════════════════════════════════════════════════════════════ */

.typ-results{width:100%;max-width:520px;text-align:center;padding:1.5rem 1rem 2rem}
.typ-results-trophy{font-size:4rem;margin-bottom:.5rem;display:block;animation:typ-bounce .6s ease}
.typ-results-title{font-size:1.6rem;font-weight:900;color:#1f2937;margin:0 0 .25rem}
.typ-results-sub{font-size:.9rem;color:#6b7280;margin-bottom:1.25rem}
.typ-results-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-bottom:1.25rem}
.typ-results-stat{background:#f8fafc;border-radius:1rem;padding:.75rem .5rem;text-align:center}
.typ-results-stat-val{font-size:1.5rem;font-weight:900;color:#7c3aed;display:block}
.typ-results-stat-lbl{font-size:.7rem;color:#9ca3af;text-transform:uppercase;font-weight:700;letter-spacing:.04em}
.typ-results-points{display:inline-flex;align-items:center;gap:.4rem;background:#f5f3ff;border:2px solid #a78bfa;border-radius:2rem;padding:.45rem 1.25rem;font-size:1.1rem;font-weight:900;color:#7c3aed;margin-bottom:1rem}
.typ-results-badges{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem;min-height:0}
.typ-results-badge{display:flex;flex-direction:column;align-items:center;gap:.2rem;background:#fff;border:2px solid #a78bfa;border-radius:.75rem;padding:.5rem .75rem;animation:typ-badge-pop .4s ease}
.typ-results-badge-icon{font-size:1.8rem;line-height:1}
.typ-results-badge-name{font-size:.65rem;font-weight:700;color:#7c3aed;text-align:center}
.typ-results-btns{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}
.typ-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.55rem 1.4rem;border-radius:2rem;border:2px solid transparent;font-size:.88rem;font-weight:800;cursor:pointer;font-family:inherit;text-decoration:none;transition:background .15s,border-color .15s}
.typ-btn--primary{background:#7c3aed;color:#fff;border-color:#7c3aed}
.typ-btn--primary:hover{background:#6d28d9;border-color:#6d28d9}
.typ-btn--outline{background:#fff;color:#7c3aed;border-color:#a78bfa}
.typ-btn--outline:hover{background:#f5f3ff}

/* ═══════════════════════════════════════════════════════════════════════════
   GAME START SCREEN
   ═══════════════════════════════════════════════════════════════════════════ */

.typ-start{width:100%;max-width:480px;text-align:center;padding:1.5rem 1rem}
.typ-start-icon{font-size:4rem;margin-bottom:.5rem;display:block}
.typ-start-title{font-size:1.5rem;font-weight:900;color:#1f2937;margin:0 0 .3rem}
.typ-start-sub{font-size:.9rem;color:#6b7280;margin-bottom:1.25rem}
.typ-start-info{display:flex;justify-content:center;gap:1.2rem;margin-bottom:1.5rem;flex-wrap:wrap}
.typ-start-info-item{display:flex;flex-direction:column;align-items:center;gap:.2rem}
.typ-start-info-val{font-size:1.1rem;font-weight:900;color:#1f2937}
.typ-start-info-lbl{font-size:.68rem;color:#9ca3af;text-transform:uppercase;font-weight:700;letter-spacing:.04em}
.typ-start-btn{font-size:1.1rem;padding:.7rem 2.5rem;border-radius:2rem;background:#7c3aed;color:#fff;border:none;cursor:pointer;font-weight:900;font-family:inherit;box-shadow:0 4px 16px rgba(124,58,237,.3);transition:background .15s,transform .1s}
.typ-start-btn:hover{background:#6d28d9;transform:translateY(-1px)}
.typ-start-btn:active{transform:translateY(1px)}

/* Best score badge on start screen */
.typ-start-best{display:inline-flex;align-items:center;gap:.5rem;background:#f5f3ff;border:2px solid #c4b5fd;border-radius:2rem;padding:.3rem .9rem;font-size:.8rem;font-weight:700;color:#7c3aed;margin-bottom:.75rem}

/* ═══════════════════════════════════════════════════════════════════════════
   SURVIVAL MODE — HEARTS
   ═══════════════════════════════════════════════════════════════════════════ */

.typ-heart-lost{animation:typ-heart-break .3s ease}
@keyframes typ-heart-break{0%{transform:scale(1.3)}50%{transform:scale(.7)}100%{transform:scale(1)}}

/* ═══════════════════════════════════════════════════════════════════════════
   ITEM COUNTER DOTS
   ═══════════════════════════════════════════════════════════════════════════ */

.typ-dots{display:flex;justify-content:center;gap:.35rem;flex-wrap:wrap;max-width:480px;margin:0 auto}
.typ-dot{width:10px;height:10px;border-radius:50%;background:#e5e7eb;transition:background .2s,transform .2s}
.typ-dot--done{background:#10b981}
.typ-dot--cur{background:#7c3aed;transform:scale(1.4)}
.typ-dot--err{background:#ef4444}

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes typ-pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes typ-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes typ-bounce{0%{transform:translateY(0)}40%{transform:translateY(-16px)}70%{transform:translateY(-8px)}100%{transform:translateY(0)}}
@keyframes typ-badge-pop{0%{transform:scale(0);opacity:0}70%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
@keyframes typ-confetti-fall{0%{transform:translateY(-20px) rotate(0);opacity:1}100%{transform:translateY(80px) rotate(360deg);opacity:0}}

/* Confetti pieces */
.typ-confetti-piece{position:fixed;width:8px;height:8px;border-radius:2px;pointer-events:none;animation:typ-confetti-fall .9s ease-in forwards;z-index:9999}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width:600px){
  .typ-key{min-width:24px;height:30px;font-size:.58rem;border-radius:5px;gap:2px}
  .typ-key--space{min-width:110px}
  .typ-key--wide{min-width:40px}
  .typ-key--xwide{min-width:52px}
  .typ-keyboard-row{gap:3px;margin-bottom:3px}
  .typ-display-text{font-size:clamp(1.6rem,8vw,2.8rem)}
  .typ-input{font-size:1.1rem;padding:.6rem .8rem}
  .lrn-typ-grid{grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:.85rem}
  .typ-results-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:380px){
  .typ-key{min-width:20px;height:26px;font-size:.52rem}
  .typ-key--space{min-width:90px}
  .typ-key--wide{min-width:34px}
  .typ-key--xwide{min-width:44px}
}