:root {
  --yellow:#A3D977;--orange:#4CAF50;--blue:#66BB6A;--purple:#2E7D32;
  --green:#22C55E;--red:#EF4444;--bg:#E8F5E9;--card:#F1F8E9;
  --shadow:0 6px 28px rgba(0,0,0,0.07);
  --accent:#388E3C;--accent-light:#C8E6C9;--accent-dark:#1B5E20;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Nunito',sans-serif;background:var(--bg);min-height:100vh;overflow-x:hidden;}
/* 手机端：消除 300ms 点击延迟，提升按键响应 */
button,input,select,textarea,.abtn,.cbtn,.pyr-choice,.pyr-tile,.pyr-slot,.pyr-slot-empty,
.lbtn,.lbtn-sm,.dash-card,.game-tab,.top-tab,.pyr-mode-btn,.lesson-card,.ls-hub-btn,
.dash-cta,.dash-game,.spell-tile,.spell-slot,.gem-cell,.lang-bar button,.fill-submit,
.sch-session,.sch-slot,.lm-item-btn,.announce-close,[onclick]
{touch-action:manipulation;-webkit-tap-highlight-color:transparent;}

/* BG floats */
.bgf{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden;}
.bgf span{position:absolute;font-size:1.8rem;opacity:.06;animation:fup linear infinite;}
@keyframes fup{0%{transform:translateY(100vh) rotate(0);opacity:0}10%{opacity:.06}90%{opacity:.06}100%{transform:translateY(-120px) rotate(360deg);opacity:0}}

.wrap{position:relative;z-index:1;max-width:800px;margin:0 auto;padding:16px 14px 50px;}

/* Header */
.hdr{text-align:center;margin-bottom:18px;animation:sd .5s ease;}
@keyframes sd{from{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}
.title{font-family:'Fredoka One',cursive;font-size:clamp(1.7rem,5vw,2.6rem);color:#2E7D32;
  text-shadow:3px 3px 0 #A5D6A7;line-height:1.1;margin-bottom:4px;}
.subtitle{font-size:.85rem;color:#558B2F;font-weight:700;}

/* ══ TOP NAV — large child-friendly tabs ══ */
.top-tabs{display:flex;gap:6px;margin-bottom:8px;background:#F1F8E9;border-radius:18px;padding:5px;box-shadow:var(--shadow);}
.top-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:10px 4px 8px;border:none;border-radius:14px;cursor:pointer;
  font-family:'Nunito',sans-serif;font-weight:800;transition:all .2s;
  background:transparent;color:#9CA3AF;text-align:center;line-height:1.2;
  min-height:52px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.tt-icon{font-size:1.3rem;line-height:1;}
.tt-text{font-size:.72rem;}
.top-tab.active{background:#43A047;color:#fff;box-shadow:0 4px 12px rgba(67,160,71,.35);transform:scale(1.03);}
.top-tab:hover:not(.active){background:#E8F5E9;color:#2E7D32;}
.top-tab:active{transform:scale(0.95);}

/* ══ GAME BAR — visible, no dropdown ══ */
.game-bar{display:flex;gap:6px;margin-bottom:14px;background:#FFFDE7;border-radius:16px;
  padding:5px;box-shadow:0 3px 12px rgba(0,0,0,.05);border:2px solid #FFF9C4;}
.game-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 4px 6px;border:none;border-radius:12px;cursor:pointer;
  font-family:'Nunito',sans-serif;font-weight:800;transition:all .2s;
  background:transparent;color:#B0A060;text-align:center;line-height:1.2;
  min-height:48px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.gt-icon{font-size:1.2rem;line-height:1;}
.gt-text{font-size:.66rem;}
.game-tab:hover{background:#FFF8E1;color:#F57F17;}
.game-tab.active{background:linear-gradient(135deg,#FFA726,#FF9800);color:#fff;
  box-shadow:0 3px 10px rgba(255,152,0,.3);transform:scale(1.04);}
.game-tab:active{transform:scale(0.94);}

/* ── GAMES DROPDOWN (hidden, kept for compat) ── */
.games-dropdown-wrap{display:none;}
.games-btn{display:none;}
.games-panel{display:none;}

/* ══════════════════════════════════════════════════════
   HOME DASHBOARD — gamified card-based layout for kids
   ══════════════════════════════════════════════════════ */

/* ── Stats bar ── */
.dash-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px;}
.dash-stat{background:#fff;border-radius:16px;padding:12px 6px;text-align:center;
  box-shadow:0 3px 12px rgba(0,0,0,.05);border:2px solid #E8F5E9;transition:transform .15s;}
.dash-stat:hover{transform:translateY(-2px);}
.dash-stat-icon{font-size:1.5rem;line-height:1;margin-bottom:4px;}
.dash-stat-val{font-family:'Fredoka One',cursive;font-size:1.1rem;color:#2E7D32;line-height:1.2;}
.dash-stat-lbl{font-size:.6rem;font-weight:800;color:#9CA3AF;margin-top:2px;}

/* ── Level progress bar ── */
.dash-level-bar{height:8px;background:#E8F5E9;border-radius:8px;margin-bottom:16px;overflow:hidden;}
.dash-level-fill{height:100%;background:linear-gradient(90deg,#66BB6A,#43A047);border-radius:8px;
  transition:width .8s ease;}

/* ── Today summary ── */
.dash-today-summary{text-align:left;padding:14px 16px;margin-bottom:12px;border-radius:14px;
  background:linear-gradient(135deg,#FFF8E1,#FFFBEB);border:1.5px solid #FFE082;
  border-left:5px solid #F59E0B;
  font-size:.88rem;font-weight:700;color:#F57F17;width:100%;cursor:pointer;
  transition:all .18s;font-family:'Nunito',sans-serif;}
.dash-today-summary:hover{background:linear-gradient(135deg,#FFF3C4,#FFF8E1);
  border-color:#FFD54F;border-left-color:#FF8F00;transform:translateY(-1px);box-shadow:0 3px 10px rgba(245,127,23,.15);}
.dash-today-summary:active{transform:scale(0.98);}
.dts-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.dts-label{font-size:.88rem;}
.dts-count{font-family:'Fredoka One',cursive;font-size:.9rem;color:#E65100;}
.dts-bar{height:8px;background:rgba(255,224,130,.5);border-radius:8px;overflow:hidden;}
.dts-fill{height:100%;background:linear-gradient(90deg,#FFB300,#FF8F00);border-radius:8px;transition:width .6s ease;}

/* ── Primary CTA ── */
.dash-cta{display:flex;align-items:center;gap:16px;width:100%;padding:22px 24px;
  border:none;border-radius:22px;cursor:pointer;
  background:linear-gradient(135deg,#43A047,#2E7D32);color:#fff;
  box-shadow:0 6px 0 #1B5E20,0 8px 24px rgba(46,125,50,.25);
  font-family:'Nunito',sans-serif;transition:all .2s;margin-bottom:18px;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;text-align:left;
  animation:ctaPulse 2.5s ease-in-out infinite;}
@keyframes ctaPulse{
  0%,100%{box-shadow:0 6px 0 #1B5E20,0 8px 24px rgba(46,125,50,.25);}
  50%{box-shadow:0 6px 0 #1B5E20,0 8px 32px rgba(46,125,50,.45);}
}
.dash-cta:hover{transform:translateY(-3px);box-shadow:0 9px 0 #1B5E20,0 12px 32px rgba(46,125,50,.3);animation:none;}
.dash-cta:active{transform:translateY(4px);box-shadow:0 2px 0 #1B5E20;transition:all .06s;animation:none;}
.dash-cta-icon{font-size:2.4rem;flex-shrink:0;}
.dash-cta-text{flex:1;}
.dash-cta-main{display:block;font-family:'Fredoka One',cursive;font-size:1.4rem;letter-spacing:.5px;}
.dash-cta-sub{display:block;font-size:.8rem;font-weight:700;opacity:.85;margin-top:2px;}
.dash-cta-arrow{font-size:1.5rem;font-weight:900;opacity:.7;flex-shrink:0;}

.track-switch-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;}
.track-switch-label{font-size:.75rem;font-weight:900;color:#6B7280;white-space:nowrap;}
.track-switch-picker{display:flex;align-items:center;min-width:min(260px,100%);max-width:100%;
  padding:10px 14px;padding-right:36px;border-radius:18px;border:2.5px solid #C8E6C9;background:#fff;
  box-shadow:0 2px 10px rgba(67,160,71,.08);position:relative;overflow:hidden;}
.track-switch-picker::after{content:'▾';position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font-size:.82rem;color:#6B7280;pointer-events:none;}
.track-switch-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;border:none;background:transparent;
  color:#16A34A;font:inherit;font-weight:900;width:100%;padding:0;cursor:pointer;min-width:0;}
.track-switch-select:focus{outline:none;}
.track-switch-select option{color:#111827;}
.track-switch-row.track-switch-row-compact{margin:0 0 14px;}
.track-switch-row.track-switch-row-compact .track-switch-picker{min-width:min(240px,100%);}

/* ── Action cards (2×2 grid) ── */
.dash-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:18px;}
.dash-card{display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:20px 10px 16px;border:2.5px solid #E8F5E9;border-radius:20px;
  background:#fff;cursor:pointer;font-family:'Nunito',sans-serif;
  transition:all .2s;text-align:center;position:relative;overflow:hidden;
  box-shadow:0 3px 0 #E0E0E0;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.dash-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(0,0,0,.08);}
.dash-card:active{transform:translateY(2px);box-shadow:0 1px 0 #E0E0E0;transition:all .06s;}
.dash-card-emoji{font-size:2.2rem;line-height:1;}
.dash-card-title{font-weight:900;font-size:.92rem;color:#374151;}
.dash-card-sub{font-size:.65rem;font-weight:700;color:#9CA3AF;}

/* Card color accents */
.dash-card-daily{border-color:#FEF3C7;background:linear-gradient(180deg,#FFFDF5,#FEF9C3);}
.dash-card-daily:hover{border-color:#FBBF24;}
.dash-card-daily .dash-card-title{color:#92400E;}
.dash-card-lessons{border-color:#DBEAFE;background:linear-gradient(180deg,#F8FAFF,#DBEAFE);}
.dash-card-lessons:hover{border-color:#3B82F6;}
.dash-card-lessons .dash-card-title{color:#1E40AF;}
.dash-card-games{border-color:#FCE7F3;background:linear-gradient(180deg,#FFF5F9,#FCE7F3);}
.dash-card-games:hover{border-color:#EC4899;}
.dash-card-games .dash-card-title{color:#9D174D;}
.dash-card-progress{border-color:#D1FAE5;background:linear-gradient(180deg,#F5FFF8,#D1FAE5);}
.dash-card-progress:hover{border-color:#22C55E;}
.dash-card-progress .dash-card-title{color:#166534;}
.dash-card-errors{border-color:#FDE68A;background:linear-gradient(180deg,#FFFDF2,#FEF3C7);}
.dash-card-errors:hover{border-color:#F59E0B;}
.dash-card-errors .dash-card-title{color:#9A3412;}

/* ── Games panel (revealed on card click) ── */
.dash-games-panel{background:#fff;border-radius:20px;padding:16px;margin-bottom:18px;
  box-shadow:0 4px 16px rgba(0,0,0,.06);border:2px solid #FCE7F3;
  animation:fi .3s ease;}
.dash-games-title{font-family:'Fredoka One',cursive;font-size:1rem;color:#9D174D;
  margin-bottom:12px;text-align:center;}
.dash-errors-panel{background:#fff;border-radius:20px;padding:16px;margin-bottom:18px;
  box-shadow:0 4px 16px rgba(0,0,0,.06);border:2px solid #FDE68A;
  animation:fi .3s ease;}
.dash-errors-panel .dash-games-title{color:#9A3412;text-align:left;margin-bottom:4px;}
.dash-errors-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
.dash-errors-sub{font-size:.72rem;font-weight:700;color:#9CA3AF;line-height:1.5;}
.dash-errors-actions{display:flex;gap:8px;flex-wrap:wrap;}
.dash-errors-btn{padding:10px 14px;border:none;border-radius:12px;cursor:pointer;
  font-family:'Nunito',sans-serif;font-size:.78rem;font-weight:900;color:#fff;
  background:linear-gradient(135deg,#F59E0B,#EF4444);box-shadow:0 4px 10px rgba(245,158,11,.22);
  transition:transform .15s ease, box-shadow .15s ease;}
.dash-errors-btn:hover{transform:translateY(-2px);box-shadow:0 8px 16px rgba(245,158,11,.28);}
.dash-errors-btn-light{color:#9A3412;background:#FFF7ED;box-shadow:none;border:2px solid #FED7AA;}
.dash-errors-list{display:grid;gap:10px;}
.dash-error-item{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  border:2px solid #F3F4F6;border-radius:16px;padding:12px 14px;background:linear-gradient(180deg,#FFFFFF,#FFFBF5);}
.dash-error-main{flex:1;min-width:0;}
.dash-error-word{font-family:'Fredoka One',cursive;font-size:1rem;color:#1E1B18;margin-bottom:6px;word-break:break-word;}
.dash-error-stats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;}
.dash-error-pill{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:999px;
  font-size:.67rem;font-weight:800;background:#FFF7ED;color:#9A3412;border:1px solid #FED7AA;}
.dash-error-pill.cool{background:#ECFDF5;border-color:#A7F3D0;color:#166534;}
.dash-error-meta{font-size:.7rem;font-weight:700;color:#6B7280;line-height:1.5;}
.dash-error-actions{display:flex;flex-direction:column;gap:8px;flex-shrink:0;min-width:122px;}
.dash-error-cta{padding:10px 12px;border:none;border-radius:12px;background:#1D4ED8;color:#fff;
  font-family:'Nunito',sans-serif;font-size:.75rem;font-weight:900;cursor:pointer;white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease;box-shadow:0 4px 10px rgba(29,78,216,.18);}
.dash-error-cta:hover{transform:translateY(-2px);box-shadow:0 8px 14px rgba(29,78,216,.24);}
.dash-error-cta-remove{background:#FFF7ED;color:#9A3412;border:2px solid #FED7AA;box-shadow:none;}
.dash-error-cta-remove:hover{box-shadow:0 6px 12px rgba(245,158,11,.16);}
.dash-error-cta:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none;}
.mistake-pager{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px 0 4px;margin-top:8px;}
.mistake-pager-btn{background:#F59E0B;color:#fff;border:none;border-radius:12px;padding:8px 18px;font-size:.82rem;font-weight:800;cursor:pointer;transition:opacity .15s;}
.mistake-pager-btn:disabled{opacity:.35;cursor:default;}
.mistake-pager-btn:not(:disabled):hover{opacity:.85;}
.mistake-pager-info{font-size:.82rem;font-weight:800;color:#92400E;min-width:60px;text-align:center;}
.dash-error-empty{padding:18px 14px;border-radius:16px;background:#FFFBEB;border:2px dashed #FCD34D;
  font-size:.78rem;font-weight:800;color:#92400E;line-height:1.7;text-align:center;}
.dash-report-panel{background:#fff;border-radius:20px;padding:16px;margin-bottom:18px;
  box-shadow:0 4px 16px rgba(0,0,0,.06);border:2px solid #DDD6FE;animation:fi .3s ease;}
.dash-report-panel .dash-games-title{color:#5B21B6;text-align:left;margin-bottom:4px;}
.dash-report-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.dash-report-sub{font-size:.72rem;font-weight:700;color:#7C3AED;line-height:1.5;}
.dash-report-actions{display:flex;gap:8px;flex-wrap:wrap;}
.dash-report-body{display:grid;gap:14px;}
.dash-report-empty{padding:18px 14px;border:2px dashed #DDD6FE;border-radius:16px;background:#FAF5FF;
  color:#6D28D9;font-size:.82rem;font-weight:800;text-align:center;}
.dash-report-top{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
.dash-report-stat{border-radius:18px;padding:14px 12px;background:linear-gradient(180deg,#FFFFFF,#F8FAFC);
  border:2px solid #EEF2FF;box-shadow:0 3px 10px rgba(79,70,229,.06);}
.dash-report-stat-label{display:block;font-size:.68rem;font-weight:800;color:#8B5CF6;margin-bottom:6px;}
.dash-report-stat-value{display:block;font-family:'Fredoka One',cursive;font-size:1.25rem;color:#312E81;}
.dash-report-stat-sub{display:block;font-size:.7rem;font-weight:700;color:#94A3B8;margin-top:5px;}
.dash-report-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.dash-report-section{border:2px solid #F1F5F9;border-radius:18px;padding:14px;background:linear-gradient(180deg,#FFFFFF,#FCFCFF);}
.dash-report-section.full{grid-column:1 / -1;}
.dash-report-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.dash-report-section-title{font-size:.84rem;font-weight:900;color:#334155;}
.dash-report-section-note{font-size:.7rem;font-weight:800;color:#94A3B8;}
.dash-report-band-list{display:grid;gap:10px;}
.dash-report-band-row{display:grid;gap:6px;}
.dash-report-band-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.74rem;font-weight:800;color:#475569;}
.dash-report-band-bar{height:10px;border-radius:999px;background:#EEF2FF;overflow:hidden;}
.dash-report-band-fill{height:100%;border-radius:999px;}
.dash-report-band-fill.weak{background:linear-gradient(90deg,#F97316,#FB7185);}
.dash-report-band-fill.developing{background:linear-gradient(90deg,#F59E0B,#FBBF24);}
.dash-report-band-fill.growing{background:linear-gradient(90deg,#10B981,#34D399);}
.dash-report-band-fill.stable{background:linear-gradient(90deg,#3B82F6,#60A5FA);}
.dash-report-band-fill.mastered{background:linear-gradient(90deg,#7C3AED,#A78BFA);}
.dash-report-trend{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:6px;align-items:end;min-height:170px;}
.dash-report-day{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;}
.dash-report-day-bar{width:100%;height:110px;border-radius:12px;background:#EEF2FF;display:flex;align-items:flex-end;justify-content:center;padding:6px 0;overflow:hidden;}
.dash-report-day-fill{width:70%;min-height:6px;border-radius:999px 999px 4px 4px;background:linear-gradient(180deg,#A78BFA,#6366F1);}
.dash-report-day-count{font-size:.66rem;font-weight:800;color:#64748B;}
.dash-report-day-label{font-size:.6rem;font-weight:800;color:#94A3B8;white-space:nowrap;}
.dash-report-mode-list,.dash-report-delay-list,.dash-report-word-list{display:grid;gap:10px;}
.dash-report-mode-row,.dash-report-delay-row,.dash-report-word-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  border:2px solid #F8FAFC;border-radius:14px;padding:11px 12px;background:#fff;}
.dash-report-mode-main,.dash-report-word-main{flex:1;min-width:0;}
.dash-report-mode-name,.dash-report-word-name{font-size:.82rem;font-weight:900;color:#1F2937;word-break:break-word;}
.dash-report-mode-meta,.dash-report-word-meta{margin-top:4px;font-size:.7rem;font-weight:700;color:#94A3B8;line-height:1.45;}
.dash-report-chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
.dash-report-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:999px;
  font-size:.66rem;font-weight:800;color:#4C1D95;background:#F5F3FF;border:1px solid #DDD6FE;}
.dash-report-chip.cool{color:#166534;background:#ECFDF5;border-color:#A7F3D0;}
.dash-report-word-score{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0;}
.dash-report-word-score-num{font-family:'Fredoka One',cursive;font-size:1rem;color:#312E81;}
.dash-report-word-score-band{font-size:.64rem;font-weight:900;color:#8B5CF6;background:#F5F3FF;border:1px solid #DDD6FE;border-radius:999px;padding:3px 8px;}
.dash-games-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.dash-game{display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:14px 6px 12px;border:2.5px solid #FCE7F3;border-radius:16px;
  background:linear-gradient(180deg,#FFF5F9,#FFF);cursor:pointer;
  font-family:'Nunito',sans-serif;transition:all .18s;
  box-shadow:0 3px 0 #FBCFE8;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.dash-game:hover{border-color:#EC4899;transform:translateY(-3px);
  box-shadow:0 6px 14px rgba(236,72,153,.15);}
.dash-game:active{transform:translateY(2px);box-shadow:0 1px 0 #FBCFE8;transition:all .06s;}
.dash-game-icon{font-size:1.8rem;line-height:1;}
.dash-game-name{font-weight:800;font-size:.78rem;color:#374151;}
.dash-game-desc{font-size:.55rem;font-weight:700;color:#9CA3AF;}

/* ── Section titles ── */
.dash-section-title{font-family:'Fredoka One',cursive;font-size:.9rem;color:#2E7D32;
  margin:14px 0 10px;padding-left:2px;}

/* ── Lesson strip (horizontal scrollable) ── */
.dash-strip-wrap{position:relative;display:flex;align-items:center;gap:0;}
.dash-strip-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:36px;height:36px;border-radius:50%;border:2px solid #C8E6C9;background:rgba(255,255,255,.92);
  font-size:1.4rem;font-weight:700;color:#43A047;cursor:pointer;display:flex;align-items:center;
  justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.1);transition:all .15s;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.dash-strip-arrow:hover{background:#43A047;color:#fff;border-color:#43A047;transform:translateY(-50%) scale(1.1);}
.dash-strip-arrow:active{transform:translateY(-50%) scale(0.92);}
.dash-strip-left{left:0;}
.dash-strip-right{right:0;}
.dash-lesson-strip{display:flex;gap:8px;overflow-x:auto;padding:4px 40px 10px;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth;}
.dash-lesson-strip::-webkit-scrollbar{display:none;}
.dash-lcard{flex-shrink:0;width:120px;scroll-snap-align:start;
  border-radius:16px;padding:14px 10px;text-align:center;cursor:pointer;
  border:2.5px solid #E8F5E9;background:#fff;transition:all .18s;
  font-family:'Nunito',sans-serif;
  box-shadow:0 3px 0 #C8E6C9;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.dash-lcard:hover{border-color:#43A047;transform:translateY(-3px);
  box-shadow:0 6px 14px rgba(67,160,71,.15);}
.dash-lcard:active{transform:translateY(2px);box-shadow:0 1px 0 #C8E6C9;transition:all .06s;}
.dash-lcard.current{border-color:#43A047;background:#43A047;color:#fff;}
.dash-lcard-num{font-family:'Fredoka One',cursive;font-size:1.1rem;line-height:1.2;}
.dash-lcard-prog{font-size:.6rem;font-weight:800;color:#9CA3AF;margin-top:4px;}
.dash-lcard.current .dash-lcard-prog{color:rgba(255,255,255,.8);}
.dash-lcard-bar{height:4px;background:#E8F5E9;border-radius:4px;margin-top:6px;overflow:hidden;}
.dash-lcard.current .dash-lcard-bar{background:rgba(255,255,255,.3);}
.dash-lcard-fill{height:100%;background:#43A047;border-radius:4px;transition:width .5s;}
.dash-lcard.current .dash-lcard-fill{background:#fff;}

/* ── SPACE WORD ANIMATION OVERLAY ── */
#spaceWordOverlay{
  position:absolute;inset:0;z-index:150;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity .5s;
}
.swa-bg{
  position:absolute;inset:0;
  background:var(--swa-bg,#0C4A6E);
  opacity:.85;
}
.swa-stage{
  position:relative;z-index:2;
  width:100%;flex:1;display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.swa-word{
  position:relative;z-index:2;
  font-family:'Fredoka One',cursive;
  font-size:var(--game-word-size, clamp(1.6rem,7vw,3rem));
  color:#fff;letter-spacing:var(--game-word-spacing, 4px);
  white-space:nowrap;word-break:normal;overflow-wrap:normal;hyphens:none;
  text-wrap:nowrap;line-height:1.06;text-align:center;margin:0 auto;
  max-width:94vw;padding:0 10px;
  text-shadow:0 0 30px var(--swa-accent,#7DD3FC),0 4px 0 rgba(0,0,0,.5);
  animation:swaWordIn .45s cubic-bezier(.34,1.5,.64,1) both;
}
.swa-msg{
  position:relative;z-index:2;
  font-family:'Nunito',sans-serif;font-weight:800;
  animation:swaMsgPop .5s cubic-bezier(.34,1.5,.64,1) .25s both;
  font-size:clamp(1rem,4vmin,1.6rem);
  color:rgba(255,255,255,.92);
  padding:6px 20px 8px;text-align:center;
  animation:swaMsgIn .4s ease .3s both;
}
.swa-en{
  position:relative;z-index:2;
  font-family:'Nunito',sans-serif;font-weight:700;font-style:italic;
  font-size:clamp(.85rem,3.2vmin,1.3rem);
  color:rgba(255,255,255,.75);
  padding:0 20px 22px;text-align:center;
  letter-spacing:.02em;
  animation:swaMsgIn .4s ease .5s both;
}
.swa-en .swa-kw{
  color:#fff;font-weight:900;font-style:normal;
  text-decoration:underline;text-underline-offset:3px;
  text-shadow:0 0 12px var(--swa-accent,#7DD3FC);
}

/* scene: swim */
.swa-swim-lane{
  position:absolute;inset:0;overflow:hidden;
}
.swa-swimmer{
  position:absolute;font-size:clamp(2rem,8vmin,4rem);
  animation:swaSwimAcross linear both;
}
.swa-wave{
  position:absolute;bottom:0;left:0;right:0;height:22%;
  background:linear-gradient(to top,rgba(14,165,233,.35),transparent);
  border-top:3px solid rgba(125,211,252,.4);
}
.swa-bubble{
  position:absolute;bottom:10%;
  width:clamp(4px,1.5vmin,10px);height:clamp(4px,1.5vmin,10px);
  background:rgba(186,230,253,.6);border-radius:50%;
  animation:swaBubbleRise ease-in both;
}

/* scene: bounce */
.swa-bounce-em{
  font-size:clamp(4rem,20vmin,10rem);
  animation:swaBounce 2s cubic-bezier(.33,1,.68,1) both;
  display:block;
}

/* scene: shake */
.swa-shake-em{
  font-size:clamp(4rem,20vmin,10rem);
  animation:swaShake .15s ease infinite;
  display:block;
}

/* scene: float */
.swa-float-em{
  font-size:clamp(4rem,20vmin,10rem);
  animation:swaFloat 2.4s ease-out both;
  display:block;
}
.swa-floatstar{
  position:absolute;
  font-size:clamp(1rem,3vmin,2rem);
  animation:swaFloatStar ease-out both;
}

/* scene: spin */
.swa-spin-em{
  font-size:clamp(4rem,20vmin,10rem);
  animation:swaSpin 1.6s cubic-bezier(.5,0,.5,1) both;
  display:block;
}

/* scene: run */
.swa-run-em{
  position:absolute;
  font-size:clamp(3.5rem,16vmin,8rem);
  animation:swaRun 2s ease-in-out both;
  white-space:nowrap;
}

/* scene: steam */
.swa-steam-food{
  font-size:clamp(4rem,18vmin,9rem);
  animation:swaGrow .5s cubic-bezier(.34,1.5,.64,1) both;
  position:relative;z-index:2;
}
.swa-steam-puff{
  position:absolute;
  width:clamp(10px,3vmin,20px);height:clamp(10px,3vmin,20px);
  background:rgba(255,255,255,.5);border-radius:50%;
  animation:swaSteamPuff ease-out both;
}

/* scene: sparkle */
.swa-sparkle-em{
  font-size:clamp(4rem,20vmin,10rem);
  animation:swaGrow .5s cubic-bezier(.34,1.5,.64,1) both;
  display:block;
}
.swa-star{
  position:absolute;
  font-size:clamp(1.2rem,3.5vmin,2.2rem);
  animation:swaStarBurst ease-out both;
}

/* scene: grow */
.swa-grow-em{
  font-size:clamp(4rem,20vmin,10rem);
  animation:swaGrowPulse 2s ease both;
  display:block;
}

/* scene: explode */
.swa-explode-em{
  font-size:clamp(3rem,14vmin,7rem);
  animation:swaExplodeIn .4s cubic-bezier(.34,1.5,.64,1) both;
  display:block;
}
.swa-shard{
  position:absolute;font-size:clamp(1rem,3vmin,2rem);
  animation:swaShard ease-out both;
}

/* scene: friends */
.swa-friend-l,.swa-friend-r{
  position:absolute;font-size:clamp(3rem,14vmin,7rem);
}
.swa-friend-l{ animation:swaFriendL .8s cubic-bezier(.34,1.5,.64,1) both; }
.swa-friend-r{ animation:swaFriendR .8s cubic-bezier(.34,1.5,.64,1) .15s both; }
.swa-heart{
  position:absolute;font-size:clamp(1.5rem,5vmin,3rem);
  top:-8%;
  animation:swaHeartPop .3s cubic-bezier(.34,1.5,.64,1) .9s both;
}

/* ── KEYFRAMES ── */
@keyframes swaWordIn{0%{transform:scale(.4) translateY(20px);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1) translateY(0);opacity:1}}
@keyframes swaMsgIn{0%{transform:translateY(16px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes swaMsgPop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}

/* swim */
@keyframes swaSwimAcross{0%{transform:translateX(0) translateY(0)}25%{transform:translateX(-25%) translateY(-5vmin)}50%{transform:translateX(-50%) translateY(0)}75%{transform:translateX(-75%) translateY(-5vmin)}100%{transform:translateX(-110%) translateY(0)}}
@keyframes swaBubbleRise{0%{transform:translateY(0) scale(1);opacity:.7}100%{transform:translateY(-60vmin) scale(2);opacity:0}}

/* bounce */
@keyframes swaBounce{0%{transform:scaleX(1) scaleY(1) translateY(0)}10%{transform:scaleX(1.15) scaleY(.8) translateY(0)}30%{transform:scaleX(.9) scaleY(1.15) translateY(-20vmin)}50%{transform:scaleX(1.1) scaleY(.85) translateY(0)}65%{transform:scaleX(.95) scaleY(1.08) translateY(-10vmin)}80%{transform:scaleX(1.05) scaleY(.92) translateY(0)}90%{transform:scaleX(.98) scaleY(1.03) translateY(-3vmin)}100%{transform:scaleX(1) scaleY(1) translateY(0)}}

/* shake */
@keyframes swaShake{0%,100%{transform:translate(0,0) rotate(0)}20%{transform:translate(-4px,-2px) rotate(-8deg)}40%{transform:translate(4px,2px) rotate(8deg)}60%{transform:translate(-3px,1px) rotate(-5deg)}80%{transform:translate(3px,-1px) rotate(5deg)}}

/* float */
@keyframes swaFloat{0%{transform:translateY(8vmin) scale(.6);opacity:0}20%{opacity:1;transform:translateY(0) scale(1)}80%{opacity:.9;transform:translateY(-8vmin) scale(1)}100%{opacity:.5;transform:translateY(-14vmin) scale(1.05)}}
@keyframes swaFloatStar{0%{transform:translate(0,0) scale(0);opacity:1}100%{transform:translate(var(--sx),var(--sy)) scale(1.5);opacity:0}}

/* spin */
@keyframes swaSpin{0%{transform:rotate(0) scale(0)}30%{transform:rotate(200deg) scale(1.3)}60%{transform:rotate(320deg) scale(.95)}80%{transform:rotate(360deg) scale(1.05)}100%{transform:rotate(360deg) scale(1)}}

/* run */
@keyframes swaRun{0%{transform:translateX(-110%) scaleX(-1)}40%{transform:translateX(-10%) scaleX(-1)}70%{transform:translateX(10%) scaleX(-1)}100%{transform:translateX(110%) scaleX(1)}}

/* steam */
@keyframes swaSteamPuff{0%{transform:translate(0,0) scale(.5);opacity:.8}100%{transform:translate(var(--sx),var(--sy)) scale(2.5);opacity:0}}

/* sparkle */
@keyframes swaStarBurst{0%{transform:translate(0,0) scale(0) rotate(0);opacity:1}60%{opacity:.8}100%{transform:translate(var(--sx),var(--sy)) scale(1.2) rotate(var(--sr));opacity:0}}

/* grow */
@keyframes swaGrow{0%{transform:scale(0)}60%{transform:scale(1.25)}80%{transform:scale(.92)}100%{transform:scale(1)}}
@keyframes swaGrowPulse{0%{transform:scale(0)}40%{transform:scale(1.4)}60%{transform:scale(.85)}75%{transform:scale(1.15)}85%{transform:scale(.95)}100%{transform:scale(1)}}

/* explode */
@keyframes swaExplodeIn{0%{transform:scale(0) rotate(-20deg)}60%{transform:scale(1.3) rotate(10deg)}80%{transform:scale(.9) rotate(-3deg)}100%{transform:scale(1) rotate(0)}}
@keyframes swaShard{0%{transform:translate(0,0) scale(1) rotate(0);opacity:1}100%{transform:translate(var(--sx),var(--sy)) scale(0) rotate(var(--sr));opacity:0}}

/* friends */
@keyframes swaFriendL{0%{transform:translateX(-45vw);opacity:0}60%{transform:translateX(-8vw)}80%{transform:translateX(-12vw)}100%{transform:translateX(-10vw);opacity:1}}
@keyframes swaFriendR{0%{transform:translateX(45vw);opacity:0}60%{transform:translateX(8vw)}80%{transform:translateX(12vw)}100%{transform:translateX(10vw);opacity:1}}
@keyframes swaHeartPop{0%{transform:translateX(-50%) scale(0)}70%{transform:translateX(-50%) scale(1.4)}100%{transform:translateX(-50%) scale(1)}}

/* ── GAME HUD ── */
.hud{display:flex;align-items:center;justify-content:space-between;
  background:#fff;border-radius:20px;padding:12px 16px;margin-bottom:10px;
  box-shadow:var(--shadow);border:3px solid var(--yellow);}
.hud-lives{display:flex;gap:6px;align-items:center;}
.heart{font-size:1.8rem;transition:all .3s;display:inline-block;}
.heart.lost{filter:grayscale(1) opacity(.35);transform:scale(.8);}
.heart.shake{animation:hsh .4s ease;}
@keyframes hsh{0%,100%{transform:scale(1)}30%{transform:scale(1.4) rotate(-20deg)}60%{transform:scale(.8)}}
.hud-mid{text-align:center;flex:1;}
.hud-score{font-family:'Fredoka One',cursive;font-size:2rem;color:var(--orange);line-height:1;}
.hud-rank{font-size:.7rem;font-weight:800;color:#9CA3AF;margin-top:2px;}
.hud-streak{text-align:center;min-width:52px;}
.streak-fire{font-size:1.6rem;transition:all .3s;line-height:1;}
.streak-num{font-family:'Fredoka One',cursive;font-size:1.3rem;color:var(--orange);}
.streak-label{font-size:.6rem;font-weight:800;color:#9CA3AF;text-transform:uppercase;}

/* Speech bubble */
.bubble-wrap{position:relative;margin-bottom:8px;animation:bubbleIn .3s cubic-bezier(.175,.885,.32,1.275);}
@keyframes bubbleIn{from{transform:scale(0) translateY(10px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.char-bubble{background:#fff;border-radius:18px;padding:12px 16px;
  font-size:.92rem;font-weight:800;color:#1E1B18;line-height:1.5;
  box-shadow:var(--shadow);border:3px solid var(--yellow);position:relative;}
.char-bubble::before{content:'';position:absolute;bottom:-14px;left:28px;
  border:7px solid transparent;border-top-color:var(--yellow);}
.char-bubble::after{content:'';position:absolute;bottom:-10px;left:30px;
  border:5px solid transparent;border-top-color:#fff;}
.char-bubble.ok-bubble{border-color:var(--green);}
.char-bubble.ok-bubble::before{border-top-color:var(--green);}
.char-bubble.err-bubble{border-color:#43A047;}
.char-bubble.err-bubble::before{border-top-color:#43A047;}

/* Combo overlay */
.combo-overlay{position:fixed;top:30%;left:50%;transform:translate(-50%,-50%);
  pointer-events:none;z-index:9999;font-family:'Fredoka One',cursive;
  text-align:center;opacity:0;}
.combo-overlay.fire{animation:comboFire .9s ease forwards;}
@keyframes comboFire{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-5deg);}
  30%{opacity:1;transform:translate(-50%,-50%) scale(1.3) rotate(3deg);}
  60%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0);}
  100%{opacity:0;transform:translate(-50%,-60%) scale(.9);}}

/* Power-up button */
.powerup-btn{padding:6px 12px;border-radius:20px;border:2.5px solid #8B5CF6;
  background:linear-gradient(135deg,#C8E6C9,#DDD6FE);color:#5B21B6;
  font-family:'Nunito',sans-serif;font-size:.75rem;font-weight:900;cursor:pointer;
  transition:all .2s;white-space:nowrap;}
.powerup-btn:hover:not(:disabled){transform:scale(1.06);box-shadow:0 4px 12px rgba(139,92,246,.3);}
.powerup-btn:disabled{opacity:.3;cursor:not-allowed;}

/* Screen shake */
@keyframes scrnShake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-8px) rotate(-.5deg)}
  40%{transform:translateX(8px) rotate(.5deg)}
  60%{transform:translateX(-6px)}
  80%{transform:translateX(4px)}}
.screen-shake{animation:scrnShake .4s ease;}

/* Button entrance wiggle */
@keyframes btnEntrance{
  0%{transform:scale(0) rotate(-5deg);opacity:0}
  70%{transform:scale(1.08) rotate(1deg);opacity:1}
  100%{transform:scale(1) rotate(0);opacity:1}}
.cbtn-enter{animation:btnEntrance .25s ease forwards;opacity:0;}

/* Progress */
.prog{background:#F3F4F6;border-radius:8px;height:8px;margin-bottom:14px;overflow:hidden;}
.pf{height:100%;background:linear-gradient(90deg,var(--orange),var(--yellow));border-radius:8px;transition:width .5s ease;}

/* Mode tabs — bigger for kids */
.blind-toggle-row{margin-bottom:8px;background:#fff;padding:4px;border-radius:14px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px;font-size:.68rem;}
.blind-toggle-row .blind-toggle-btn{width:100%;flex:none;}
.blind-toggle-row .blind-delay-picker{width:100%;min-width:0;margin:0;background:#F8FAFC;border-color:#E5E7EB;}
.blind-toggle-row .blind-delay-picker::after{right:14px;}
.blind-toggle-row .blind-delay-picker .cf-picker-label{color:#9CA3AF;}
.blind-toggle-row .blind-delay-picker .cf-picker-select{color:#16A34A;}
.mtabs{display:flex;gap:6px;margin-bottom:16px;background:#fff;padding:5px;border-radius:16px;box-shadow:var(--shadow);}
.mtab{flex:1;padding:10px 4px;border:none;border-radius:12px;cursor:pointer;
  font-family:'Nunito',sans-serif;font-size:.74rem;font-weight:800;transition:all .2s;
  background:transparent;color:#9CA3AF;text-align:center;line-height:1.3;
  min-height:48px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.mtab.active{background:var(--orange);color:#fff;box-shadow:0 3px 8px rgba(67,160,71,.3);transform:scale(1.02);}
.mtab:hover:not(.active){background:#E8F5E9;color:var(--orange);}
.mtab:active{transform:scale(0.94);}

/* Word type badge */
.word-badge{display:inline-block;padding:3px 10px;border-radius:20px;
  font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.8px;margin-bottom:12px;}
.badge-underline{background:#FFE9D0;color:var(--orange);}
.badge-vocab{background:#E0F2FE;color:#0369A1;}
.badge-dictation{background:#E8F5E9;color:var(--purple);}

/* Char card — larger, friendlier */
.cc{background:#fff;border-radius:24px;padding:24px 22px 20px;margin-bottom:16px;
  box-shadow:var(--shadow);position:relative;overflow:hidden;animation:fi .4s ease;}
.cc::before{content:'';position:absolute;top:0;left:0;right:0;height:6px;background:var(--cc,#FFD93D);}
@keyframes fi{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.ch{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.ca{width:66px;height:66px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:2.2rem;flex-shrink:0;box-shadow:0 4px 12px rgba(0,0,0,.12);animation:bq 2s infinite;}
@keyframes bq{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.cn{font-family:'Fredoka One',cursive;font-size:1.1rem;margin-bottom:2px;}
.ct{font-size:.78rem;color:#9CA3AF;font-weight:700;}
.sbox{background:#FFF8E7;border-radius:16px;padding:16px 18px;
  border-left:6px solid var(--cc,#FFD93D);margin-bottom:12px;}
.sent{font-size:1.1rem;font-weight:700;color:#1E1B18;line-height:1.8;}
.sent .key-word{background:var(--yellow);color:#8B6914;padding:2px 12px;
  border-radius:8px;font-family:'Fredoka One',cursive;font-size:1.15rem;letter-spacing:1px;}
.sentence-btn-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-start;margin-top:2px;}
.sentence-btn-row .abtn{margin:0;}
.mhint{display:flex;align-items:flex-start;gap:10px;background:#EEF2FF;border-radius:14px;
  padding:12px 16px;border:2px dashed #A5B4FC;margin-top:12px;}
.mhi{font-size:1.3rem;flex-shrink:0;}
.mht{font-size:.85rem;color:#4338CA;font-weight:700;line-height:1.6;}

/* Letter breakdown */
.lbwrap{background:#fff;border-radius:18px;padding:16px 14px 14px;margin-bottom:14px;
  box-shadow:var(--shadow);text-align:center;}
.lbl{font-size:.7rem;font-weight:800;color:#9CA3AF;text-transform:uppercase;letter-spacing:.9px;margin-bottom:10px;}
.lbrow{display:flex;justify-content:center;gap:3px;flex-wrap:wrap;margin-bottom:10px;}
.lc{display:flex;flex-direction:column;align-items:center;gap:2px;}
.lb{width:44px;height:48px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  font-family:'Fredoka One',cursive;font-size:1.5rem;border:2px solid transparent;transition:transform .2s;}
/* 5-color letter type system */
.lt-vowel  {background:#FDE68A;color:#92400E;border-color:#F59E0B;}  /* 🟡 元音对 */
.lt-double {background:#C8E6C9;color:#5B21B6;border-color:#A78BFA;}  /* 🟣 双胞胎 */
.lt-cluster{background:#CCFBF1;color:#0F766E;border-color:#2DD4BF;}  /* 🔵 字母组合 */
.lt-silent {background:#FCE7F3;color:#9D174D;border-color:#F472B6;font-style:italic;opacity:.85;} /* 🌸 隐身字母 */
.lt-ending {background:#FFEDD5;color:#C2410C;border-color:#66BB6A;}  /* 🟠 难结尾 */
.lt-normal {background:#F3F4F6 !important;color:#374151 !important;border-color:#E5E7EB !important;}
.lb.is-key {animation:lp 2s infinite;font-size:1.65rem;border-width:3px;
  box-shadow:0 0 0 3px rgba(245,158,11,.18),0 6px 14px rgba(245,158,11,.16);}
@keyframes lp{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(0,0,0,.1)}
  50%{transform:scale(1.1);box-shadow:0 0 0 7px rgba(0,0,0,0)}}
.ls{font-size:.55rem;font-weight:800;color:#9CA3AF;text-transform:uppercase;line-height:1.2;}

/* Color legend */
.color-legend{display:flex;flex-wrap:wrap;gap:5px;padding:10px 14px;background:#FAFAFA;border-radius:12px;
  border:1.5px solid #F3F4F6;margin-top:10px;}
.cl-item{display:flex;align-items:center;gap:4px;font-size:.65rem;font-weight:800;color:#374151;}
.cl-dot{width:12px;height:12px;border-radius:4px;flex-shrink:0;}

/* Character card themes */
.cc{background:#fff;border-radius:22px;padding:22px 20px 18px;margin-bottom:14px;
  box-shadow:var(--shadow);position:relative;overflow:hidden;animation:fi .4s ease;
  transition:background .4s, border-color .4s;}
.cc::before{content:'';position:absolute;top:0;left:0;right:0;height:6px;background:var(--cc,#FFD93D);}
.cc.char-theme-0{background:linear-gradient(135deg,#FFFBEB 0%,#FFF8E7 60%,#FFFBEB 100%);}
.cc.char-theme-1{background:linear-gradient(135deg,#F0FDFA 0%,#E6FFFD 60%,#F0FDFA 100%);}
.cc.char-theme-2{background:linear-gradient(135deg,#FAF5FF 0%,#F5F0FF 60%,#FAF5FF 100%);}
/* Sentence box per character */
.sbox.char-theme-0{background:#FFFBEB;border-left-color:#F59E0B;}
.sbox.char-theme-1{background:#F0FDFA;border-left-color:#2DD4BF;}
.sbox.char-theme-2{background:#FAF5FF;border-left-color:#66BB6A;}
/* Memory hint per character */
.mhint.char-theme-0{background:#FFFBEB;border-color:#FCD34D;}
.mhint.char-theme-0 .mht{color:#92400E;}
.mhint.char-theme-1{background:#E6FFFD;border-color:#5EEAD4;}
.mhint.char-theme-1 .mht{color:#0F766E;}
.mhint.char-theme-2{background:#FAF5FF;border-color:#C084FC;}
.mhint.char-theme-2 .mht{color:#6D28D9;}
/* key-word highlight per character */
.sent .key-word-0{background:#FDE68A;color:#92400E;padding:1px 10px;border-radius:7px;
  font-family:'Fredoka One',cursive;font-size:1.1rem;letter-spacing:1px;}
.sent .key-word-1{background:#CCFBF1;color:#0F766E;padding:1px 10px;border-radius:7px;
  font-family:'Fredoka One',cursive;font-size:1.1rem;letter-spacing:1px;}
.sent .key-word-2{background:#C8E6C9;color:#5B21B6;padding:1px 10px;border-radius:7px;
  font-family:'Fredoka One',cursive;font-size:1.1rem;letter-spacing:1px;}

/* Visual letter diff in feedback */
.diff-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0;}
.diff-word{display:inline-flex;gap:2px;align-items:center;}
.diff-letter{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:36px;border-radius:8px;font-family:'Fredoka One',cursive;
  font-size:1.2rem;border:2px solid transparent;}
.dl-same{background:#F3F4F6;color:#374151;border-color:#E5E7EB;}
.dl-wrong{background:#FEE2E2;color:#DC2626;border-color:#FCA5A5;animation:dlw .4s ease;}
.dl-correct{background:#DCFCE7;color:#15803D;border-color:#86EFAC;animation:dlc .4s ease;}
.dl-missing{background:#DCEDC8;color:#B45309;border-color:#FCD34D;font-size:.8rem;padding:2px;}
@keyframes dlw{0%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes dlc{0%{transform:scale(0.8)}100%{transform:scale(1)}}
.abtn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:#EEF2FF;
  border:2.5px solid #A5B4FC;border-radius:20px;cursor:pointer;font-size:.82rem;font-weight:800;
  color:#4338CA;transition:all .2s;margin:3px;min-height:40px;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.abtn:hover{background:#E0E7FF;transform:scale(1.05);}
.abtn:active{transform:scale(0.94);background:#C7D2FE;}
.abtn.sp{background:#DCFCE7;border-color:var(--green);color:#15803D;}

/* Choices — big touchable buttons for children */
.clabel{font-size:.85rem;font-weight:800;color:#6B7280;text-transform:uppercase;
  letter-spacing:.8px;margin-bottom:10px;}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;}
.cbtn{padding:18px 12px;border-radius:18px;border:3px solid #E5E7EB;background:#fff;cursor:pointer;
  font-family:'Fredoka One',cursive;font-size:1.25rem;letter-spacing:1.5px;color:#1E1B18;
  transition:all .2s;box-shadow:0 4px 0 #E5E7EB;min-height:56px;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.cbtn:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 6px 0 #E5E7EB;border-color:var(--orange);}
.cbtn:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #E5E7EB;transition:all .08s;}
.cbtn.correct{background:#DCFCE7;border-color:var(--green);color:#15803D;box-shadow:0 4px 0 #86EFAC;animation:cp .4s ease;}
.cbtn.wrong{background:#FEE2E2;border-color:var(--red);color:var(--red);animation:sh .35s ease;}
.cbtn.dimmed{opacity:.35;cursor:not-allowed;pointer-events:none;}
@keyframes cp{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes sh{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}

/* Feedback */
.fb{border-radius:16px;padding:14px 16px;margin-bottom:14px;font-weight:800;font-size:.9rem;
  line-height:1.6;display:none;animation:fi .3s ease;}
.fb.show{display:block;}
.fb.ok{background:#DCFCE7;border:3px solid var(--green);color:#15803D;}
.fb.err{background:#DCEDC8;border:3px solid #F59E0B;color:#92400E;}
.fb.info{background:#EEF2FF;border:3px dashed #6366F1;color:#3730A3;}

/* Step indicator */
.steps{background:#fff;border-radius:14px;padding:12px 14px;margin-bottom:12px;box-shadow:var(--shadow);}
.sdots{display:flex;gap:6px;align-items:center;margin-top:6px;}
.sd{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'Fredoka One',cursive;font-size:.85rem;transition:all .3s;flex-shrink:0;}
.sd.pend{background:#F3F4F6;color:#9CA3AF;}
.sd.act{background:var(--orange);color:#fff;box-shadow:0 0 0 4px rgba(67,160,71,.2);}
.sd.done{background:var(--green);color:#fff;}
.sl2{flex:1;height:3px;background:#F3F4F6;border-radius:2px;overflow:hidden;}
.slf{height:100%;width:0;background:var(--green);transition:width .5s;border-radius:2px;}

/* Navigation buttons — Previous & Next */
.nav-btns{display:none;gap:12px;margin-top:8px;}
.nav-btns.show{display:flex;animation:btnEntrance .3s ease;}
.nav-btn{flex:1;padding:16px;border-radius:16px;border:none;
  background:linear-gradient(135deg, #22C55E, #16A34A);color:#fff;
  font-family:'Fredoka One',cursive;font-size:1.2rem;cursor:pointer;
  box-shadow:0 5px 0 #15803D,0 8px 20px rgba(34,197,94,0.3);
  transition:all .2s;letter-spacing:.5px;
  min-height:54px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.nav-btn:hover{transform:translateY(-3px);box-shadow:0 7px 0 #15803D,0 12px 25px rgba(34,197,94,0.4);}
.nav-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #15803D,0 2px 10px rgba(34,197,94,0.3);}
.nav-btn:disabled{opacity:0.5;cursor:not-allowed;transform:none;
  box-shadow:0 3px 0 #15803D;background:linear-gradient(135deg, #9CA3AF, #6B7280);}
.nav-btn:disabled:hover{transform:none;box-shadow:0 3px 0 #4B5563;}

/* ── DICTATION TAB ── */
#dictTab{display:none;}
.dict-passage{background:#fff;border-radius:20px;padding:22px;box-shadow:var(--shadow);margin-bottom:16px;}
.dict-title{font-family:'Fredoka One',cursive;font-size:1.1rem;color:var(--orange);margin-bottom:10px;}
.passage-text{font-size:1.05rem;font-weight:700;line-height:1.8;color:#1E1B18;
  background:#FFF8E7;border-radius:12px;padding:14px;border-left:5px solid var(--purple);}
.dict-area{width:100%;min-height:90px;border-radius:14px;border:3px solid #E5E7EB;padding:12px 14px;
  font-family:'Nunito',sans-serif;font-size:1rem;font-weight:700;resize:vertical;
  background:#FAFAFA;color:#1E1B18;outline:none;transition:border .2s;}
.dict-area:focus{border-color:var(--purple);}
.dict-check{padding:14px 32px;border:none;border-radius:16px;background:var(--purple);color:#fff;
  font-family:'Fredoka One',cursive;font-size:1.15rem;cursor:pointer;
  box-shadow:0 5px 0 #1B5E20;transition:all .2s;margin-top:12px;min-height:52px;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.dict-check:hover{transform:translateY(-2px);box-shadow:0 7px 0 #1B5E20;}
.dict-check:active{transform:translateY(3px);box-shadow:0 1px 0 #1B5E20;}
.dict-result{display:none;margin-top:12px;}
.dict-result.show{display:block;}
.word-check{display:inline-flex;align-items:center;gap:4px;margin:3px;
  padding:4px 10px;border-radius:20px;font-weight:800;font-size:.9rem;}
.wc-ok{background:#DCFCE7;color:#15803D;}
.wc-err{background:#FEE2E2;color:var(--red);text-decoration:line-through;}
.wc-exp{background:#DCEDC8;color:#92400E;font-size:.8rem;}

/* ── WORD LIST TAB ── */
#listTab{display:none;}
.wlist{background:#fff;border-radius:20px;padding:16px;box-shadow:var(--shadow);}
.wrow{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;cursor:pointer;
  transition:background .15s;border-bottom:1px solid #F3F4F6;}
.wrow:last-child{border-bottom:none;}
.wrow:hover{background:#FFF8E7;}
.wnum{font-family:'Fredoka One',cursive;font-size:.9rem;color:#D1D5DB;width:22px;flex-shrink:0;}
.wword{font-family:'Fredoka One',cursive;font-size:1.1rem;color:var(--orange);flex:1;}
.wchar{font-size:1rem;}
.wbadge{font-size:.65rem;font-weight:800;padding:2px 8px;border-radius:10px;}

/* Complete screen */
.cscreen{display:none;text-align:center;background:#fff;border-radius:26px;padding:36px 24px;
  box-shadow:var(--shadow);animation:fi .5s ease;}
.cscreen.show{display:block;}
.cej{font-size:4.5rem;margin-bottom:12px;animation:bq 1s infinite;}
.ct2{font-family:'Fredoka One',cursive;font-size:2rem;color:var(--orange);margin-bottom:6px;}
.cstats{display:flex;justify-content:center;gap:16px;margin:16px 0;flex-wrap:wrap;}
.csb{background:var(--bg);border-radius:14px;padding:14px 20px;text-align:center;}
.csn{font-family:'Fredoka One',cursive;font-size:1.8rem;color:var(--orange);}
.csl{font-size:.75rem;font-weight:800;color:#9CA3AF;}
.rbtn{margin-top:14px;padding:16px 40px;border-radius:16px;border:none;background:var(--orange);
  color:#fff;font-family:'Fredoka One',cursive;font-size:1.2rem;cursor:pointer;
  box-shadow:0 5px 0 #2E7D32;min-height:52px;transition:all .2s;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.rbtn:hover{transform:translateY(-2px);box-shadow:0 7px 0 #2E7D32;}
.rbtn:active{transform:translateY(3px);box-shadow:0 1px 0 #2E7D32;}

/* Star burst */
.star{position:fixed;pointer-events:none;z-index:999;font-size:1.6rem;animation:sfx .85s ease forwards;}
@keyframes sfx{0%{opacity:1;transform:scale(.5) translateY(0)}100%{opacity:0;transform:scale(1.5) translateY(-70px)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* Karaoke word highlight */
.kw-token{display:inline;transition:background .1s,border-radius .1s;}
.kw-reading{background:#FFD93D;border-radius:5px;padding:1px 3px;
  color:#8B6914;animation:kw-pulse .5s ease infinite alternate;
  box-shadow:0 2px 8px rgba(255,217,61,.5);}
@keyframes kw-pulse{from{background:#FFD93D;box-shadow:0 2px 8px rgba(255,217,61,.5)}
  to{background:#FFC107;box-shadow:0 3px 12px rgba(255,193,7,.7)}}

/* ── SPELL MODE ── */
.spell-answer{
  min-height:58px;background:#F9FAFB;border-radius:16px;
  border:3px dashed #E5E7EB;display:flex;flex-wrap:wrap;gap:4px;
  align-items:center;justify-content:center;padding:8px 12px;
  margin-bottom:12px;transition:border-color .2s;}
.spell-answer.has-letters{border-color:var(--orange);background:#FFF8F0;}
.spell-answer.correct-anim{border-color:var(--green);background:#F0FDF4;animation:cp .4s ease;}
.spell-answer.wrong-anim{border-color:var(--red);background:#FFF1F1;animation:sh .35s ease;}
.spell-slot{width:40px;height:44px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;font-family:'Fredoka One',cursive;font-size:1.4rem;
  cursor:pointer;transition:all .15s;border:2px solid transparent;}
.spell-slot:hover{transform:scale(1.08);}
.spell-tiles{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:12px;}
.spell-tile{width:48px;height:52px;border-radius:14px;display:flex;align-items:center;
  justify-content:center;font-family:'Fredoka One',cursive;font-size:1.6rem;
  cursor:pointer;border:3px solid #E5E7EB;background:#fff;
  box-shadow:0 4px 0 #E5E7EB;transition:all .18s;user-select:none;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.spell-tile:hover:not(.used){transform:translateY(-3px);box-shadow:0 6px 0 var(--orange);border-color:var(--orange);}
.spell-tile:active:not(.used){transform:translateY(2px);box-shadow:0 1px 0 #E5E7EB;}
.spell-tile.used{opacity:.22;cursor:default;transform:none;box-shadow:0 2px 0 #E5E7EB;}
.spell-clear{padding:10px 20px;border-radius:14px;border:2.5px solid #E5E7EB;
  background:#fff;font-family:'Nunito',sans-serif;font-size:.85rem;font-weight:800;
  color:#9CA3AF;cursor:pointer;transition:all .15s;min-height:44px;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.spell-clear:hover{border-color:#EF4444;color:#EF4444;background:#FFF1F1;}
.spell-clear:active{transform:scale(0.95);}

/* ── FILL MODE ── */
.fill-word{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;
  margin-bottom:14px;align-items:flex-end;}
.fill-letter{width:40px;height:48px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;font-family:'Fredoka One',cursive;font-size:1.5rem;
  border:2px solid transparent;}
.fill-blank{width:40px;height:48px;border-radius:10px;border:3px solid #E5E7EB;
  background:#F9FAFB;display:flex;align-items:center;justify-content:center;
  transition:all .2s;overflow:hidden;}
.fill-blank input{width:100%;height:100%;border:none;background:transparent;
  font-family:'Fredoka One',cursive;font-size:1.5rem;text-align:center;
  outline:none;color:#1E1B18;caret-color:var(--orange);padding:0;text-transform:uppercase;}
.fill-blank.active{border-color:var(--orange);background:#FFF8F0;
  box-shadow:0 0 0 3px rgba(67,160,71,.15);}
.fill-blank.ok{border-color:var(--green);background:#F0FDF4;}
.fill-blank.err{border-color:var(--red);background:#FFF1F1;animation:sh .3s ease;}
.fill-hint{font-size:.8rem;font-weight:800;color:#9CA3AF;text-align:center;margin-bottom:8px;}
.fill-submit{width:100%;padding:14px;border-radius:16px;border:none;
  background:linear-gradient(135deg, #22C55E, #16A34A);color:#fff;font-family:'Fredoka One',cursive;
  font-size:1.15rem;cursor:pointer;
  box-shadow:0 4px 0 #15803D,0 6px 15px rgba(34,197,94,0.3);
  transition:all .2s;margin-top:4px;}
.fill-submit:hover{transform:translateY(-2px);box-shadow:0 6px 0 #15803D,0 10px 20px rgba(34,197,94,0.4);}
.quiz-blind-active #wordBadge{color:transparent;}
.quiz-blind-active #ccard > *,
.quiz-blind-active .lbwrap > *{visibility:hidden;}
.quiz-blind-prompting #stepInd,
.quiz-blind-prompting #choiceArea,
.quiz-blind-prompting #spellArea,
.quiz-blind-prompting #blindTypeArea,
.quiz-blind-prompting #fillArea,
.quiz-blind-prompting #fb,
.quiz-blind-prompting #nbtn{display:none !important;}

/* Category filter */
.cat-filter{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap;}
.cf{padding:6px 10px;border-radius:18px;border:2px solid #E5E7EB;background:#fff;cursor:pointer;
  min-height:32px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  font-size:.68rem;font-weight:800;color:#9CA3AF;transition:all .2s;}
.cf.on{border-color:var(--orange);background:var(--orange);color:#fff;}
.cf.tries-pill{border-color:#E0F2FE;color:#9CA3AF;background:#F8FAFC;cursor:default;font-weight:700;}
.cf.mastery-pill{border-color:#E0F2FE;color:#9CA3AF;background:#F8FAFC;cursor:default;font-weight:700;transition:color .3s;}
.cf-picker{display:flex;align-items:center;gap:6px;min-width:min(250px,100%);max-width:100%;padding-right:30px;position:relative;overflow:hidden;font-size:.68rem;}
.cf-picker::after{content:'▾';position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:.8rem;color:#9CA3AF;pointer-events:none;}
.cf-word-picker{min-width:min(250px,100%);}
#cfSortWrap.cf-picker{width:min(220px,100%);min-width:min(220px,100%);}
#cfWordWrap.cf-word-picker{width:min(210px,100%);min-width:min(210px,100%);}
.cf-picker-label,.cf-word-label{color:#9CA3AF;white-space:nowrap;flex:0 0 auto;}
.cf-picker-select,.cf-word-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;border:none;background:transparent;color:#16A34A;
  font:inherit;font-weight:800;min-width:0;flex:1;padding:0 4px 0 0;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cf-picker-select:focus,.cf-word-select:focus{outline:none;}
.cf-picker-select:disabled,.cf-word-select:disabled{color:#9CA3AF;cursor:default;}
.cf-picker-select option,.cf-word-select option{color:#111827;}

/* Mastery summary bar */
.mastery-bar{display:none!important;}
.ms-text{font-family:'Fredoka One',cursive;font-size:.88rem;color:#16A34A;white-space:nowrap;}
.ms-track{flex:1;background:#D1FAE5;border-radius:6px;height:8px;overflow:hidden;}
.ms-fill{height:100%;background:linear-gradient(90deg,#22C55E,#10B981);
  border-radius:6px;transition:width .6s ease;}
.ms-reset{font-size:.68rem;font-weight:800;color:#9CA3AF;cursor:pointer;white-space:nowrap;
  text-decoration:underline;border:none;background:none;padding:0;}

/* Per-word mastery stars on char card */
.mastery-row{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;flex-wrap:wrap;}
.mstar{font-size:1.4rem;transition:all .3s;filter:grayscale(1) opacity(.2);line-height:1;}
.mstar.lit{filter:none;}
.mstar.just-lit{animation:starPop .4s cubic-bezier(.34,1.56,.64,1);}
@keyframes starPop{0%{transform:scale(0) rotate(-25deg)}65%{transform:scale(1.45) rotate(8deg)}100%{transform:scale(1)}}
/* Choice-mode counter pill */
.mastery-counter{display:flex;align-items:center;gap:5px;}
.mc-dot{width:10px;height:10px;border-radius:50%;background:#E5E7EB;transition:all .25s;}
.mc-dot.lit{background:var(--orange);box-shadow:0 0 5px rgba(67,160,71,.5);}
.mc-dot.just-lit{animation:dotPop .35s cubic-bezier(.34,1.56,.64,1);}
@keyframes dotPop{0%{transform:scale(0)}65%{transform:scale(1.6)}100%{transform:scale(1)}}
.mc-label{font-family:'Fredoka One',cursive;font-size:.85rem;color:#6B7280;}
.mastery-tag{font-size:.62rem;font-weight:800;color:#9CA3AF;margin-left:4px;letter-spacing:.5px;}

/* Mastery celebration flash */
.mastery-flash{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(34,197,94,.18);z-index:9996;
  pointer-events:none;border-radius:0;animation:mFlash .7s ease forwards;}
@keyframes mFlash{0%{opacity:0}25%{opacity:1}100%{opacity:0}}

/* Word list mastered row */
.wrow.mastered{background:linear-gradient(90deg,#F0FDF4,#fff);border-left:4px solid #22C55E;}
.wrow.mastered .wword{color:#86EFAC;}
.wrow .wstars{font-size:.85rem;margin-left:auto;letter-spacing:1px;}

/* ── Mark Mastered Button ── */
.mark-mastered-btn{border:1.5px solid #22C55E;background:#F0FDF4;color:#16A34A;font-size:.68rem;
  font-weight:800;padding:4px 12px;border-radius:8px;cursor:pointer;white-space:nowrap;
  font-family:'Nunito',sans-serif;transition:all .15s;}
.mark-mastered-btn:hover{background:#22C55E;color:#fff;}
.wlist-mast-btn{padding:2px 6px;font-size:.65rem;margin-left:2px;}
.unmark-mastered-btn{border:1.5px solid #9CA3AF;background:#F9FAFB;color:#6B7280;font-size:.68rem;
  font-weight:800;padding:4px 10px;border-radius:8px;cursor:pointer;white-space:nowrap;
  font-family:'Nunito',sans-serif;transition:all .15s;}
.unmark-mastered-btn:hover{background:#E5E7EB;color:#374151;}
.wlist-unmast-btn{padding:2px 6px;font-size:.65rem;margin-left:2px;border:1.5px solid #9CA3AF;
  background:#F9FAFB;color:#6B7280;border-radius:6px;cursor:pointer;font-weight:800;
  font-family:'Nunito',sans-serif;transition:all .15s;}
.wlist-unmast-btn:hover{background:#E5E7EB;color:#374151;}

/* ── Settings Icon Button ── */
.settings-icon-btn{background:#fff;border:2px solid #E5E7EB;font-size:.80rem;font-weight:800;
  font-family:'Nunito',sans-serif;cursor:pointer;padding:7px 16px;color:#555;
  border-radius:10px;transition:all .15s;line-height:1;display:flex;align-items:center;gap:4px;}
.settings-icon-btn:hover{background:#F3F4F6;border-color:#bbb;}

/* ── Settings Tab ── */
.stg-card{background:#fff;border-radius:16px;padding:16px;margin-bottom:10px;
  box-shadow:0 2px 12px rgba(0,0,0,.06);border:1.5px solid #F3F4F6;}
.stg-label{font-family:'Fredoka One',cursive;font-size:.9rem;color:#374151;margin-bottom:10px;}
.stg-lang-row{display:flex;gap:6px;flex-wrap:wrap;}
.stg-lang-btn{padding:8px 14px;border:2px solid #E5E7EB;border-radius:10px;background:#fff;
  font-family:'Nunito',sans-serif;font-size:.78rem;font-weight:700;cursor:pointer;transition:all .15s;}
.stg-lang-btn.active{border-color:#2E7D32;background:#E8F5E9;color:#2E7D32;font-weight:800;}
.stg-lang-btn:hover{border-color:#43A047;}
.stg-char-row{display:flex;gap:8px;flex-wrap:wrap;}
.stg-char-btn{display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:10px 14px;border:2px solid #E5E7EB;border-radius:12px;background:#fff;
  cursor:pointer;transition:all .15s;font-family:'Nunito',sans-serif;min-width:80px;}
.stg-char-btn.active{border-color:var(--scp-c,#43A047);background:color-mix(in srgb,var(--scp-c) 10%,#fff);}
.stg-char-btn:hover{border-color:var(--scp-c,#43A047);transform:scale(1.04);}
.stg-char-name{font-size:.7rem;font-weight:800;color:#555;}
.stg-select{width:100%;padding:10px 14px;border:2px solid #E5E7EB;border-radius:10px;
  font-family:'Nunito',sans-serif;font-size:.85rem;font-weight:700;color:#374151;
  background:#fff;cursor:pointer;outline:none;}
.stg-select:focus{border-color:#43A047;}
.stg-remind-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.stg-remind-icon{font-size:1.1rem;}
.stg-remind-label{flex:1;font-size:.8rem;font-weight:700;color:#555;}
.stg-time-input{border:2px solid #E5E7EB;border-radius:8px;padding:4px 8px;font-size:.8rem;
  font-family:'Nunito',sans-serif;color:#374151;width:85px;outline:none;}
.stg-time-input:focus{border-color:#43A047;}
.stg-account-row{display:flex;gap:8px;flex-wrap:wrap;}
.stg-account-btn{padding:10px 18px;border:2px solid #E5E7EB;border-radius:10px;background:#fff;
  font-family:'Nunito',sans-serif;font-size:.8rem;font-weight:800;cursor:pointer;transition:all .15s;}
.stg-account-btn:hover{border-color:#43A047;background:#F0FDF4;}
.stg-danger{color:#DC2626;border-color:#FECACA;}
.stg-danger:hover{background:#FEF2F2;border-color:#EF4444;}
.stg-notif-enable{padding:8px 16px;border:2px solid #F59E0B;border-radius:10px;background:#FFFBEB;
  font-family:'Nunito',sans-serif;font-size:.78rem;font-weight:800;color:#B45309;cursor:pointer;
  margin-bottom:8px;transition:all .15s;}
.stg-notif-enable:hover{background:#F59E0B;color:#fff;}

/* ── STORY CHARACTER PICKER (card-style) ── */
.cp-label{font-size:.7rem;font-weight:800;color:#9CA3AF;text-transform:uppercase;
  letter-spacing:.8px;margin-bottom:6px;}
.story-char-picker{display:flex;gap:10px;margin-bottom:6px;flex-wrap:wrap;}
.scp-card{flex:1;min-width:90px;padding:12px 10px;border-radius:18px;border:3px solid #E5E7EB;min-height:72px;
  background:#fff;cursor:pointer;text-align:center;transition:all .22s;
  box-shadow:0 2px 8px rgba(0,0,0,.06);user-select:none;font-family:inherit;}
.scp-card:hover{transform:translateY(-2px);box-shadow:0 5px 16px rgba(0,0,0,.1);}
.scp-card.active{border-color:var(--scp-c,#FFD93D);background:var(--scp-bg,#FFFBEB);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--scp-c,#FFD93D) 25%,transparent);}
.scp-emoji{font-size:2rem;margin-bottom:4px;display:block;}
.scp-card-name{font-family:'Fredoka One',cursive;font-size:.78rem;color:#374151;line-height:1.2;}

/* ── REWARD PROGRESS BAR ── */
.reward-bar-wrap{background:#fff;border-radius:16px;padding:10px 14px;margin-bottom:10px;
  box-shadow:var(--shadow);border:2px solid #C8E6C9;}
.reward-bar-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.reward-bar-label{font-size:.72rem;font-weight:800;color:#43A047;}
.reward-bar-pts{font-family:'Fredoka One',cursive;font-size:.85rem;color:#66BB6A;}
.reward-track{background:#F3F4F6;border-radius:8px;height:10px;overflow:hidden;position:relative;}
.reward-fill{height:100%;border-radius:8px;transition:width .6s cubic-bezier(.34,1.56,.64,1);
  background:linear-gradient(90deg,#66BB6A,#EC4899,#F59E0B);}
.reward-trophies{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap;}
.trophy-icon{font-size:1.3rem;filter:grayscale(1) opacity(.3);transition:all .4s;}
.trophy-icon.earned{filter:none;animation:trophyPop .5s cubic-bezier(.34,1.56,.64,1);}
@keyframes trophyPop{0%{transform:scale(0) rotate(-20deg)}70%{transform:scale(1.3) rotate(5deg)}100%{transform:scale(1) rotate(0)}}

/* ── BONUS FLOAT ── */
.bonus-float{position:fixed;pointer-events:none;z-index:9998;font-family:'Fredoka One',cursive;
  font-size:1.4rem;color:#43A047;text-shadow:0 2px 8px rgba(67,160,71,.4);
  animation:bonusRise .9s ease forwards;}
@keyframes bonusRise{0%{opacity:1;transform:translateY(0) scale(.8)}60%{opacity:1;transform:translateY(-55px) scale(1.1)}100%{opacity:0;transform:translateY(-80px) scale(.9)}}

/* ══════ GEM GAME ══════ */
/* ══════ GEM GAME ══════ */

/* ─── Base: circular brilliant-cut gem ─── */
.gem-cell{
  aspect-ratio:1;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Fredoka One',cursive;
  font-size:clamp(.78rem,3.4vw,1.08rem);
  font-weight:900;
  cursor:pointer;
  position:relative;
  overflow:visible;
  transition:transform .15s cubic-bezier(.34,1.56,.64,1), filter .13s;
  -webkit-tap-highlight-color:transparent;
}

/* Letter always on top */
.gem-cell span{
  position:relative;z-index:8;
  font-weight:900;
  color:#fff !important;
  text-shadow:
    0 0 4px rgba(0,0,0,1),
    0 1px 3px rgba(0,0,0,.9),
    0 2px 8px rgba(0,0,0,.8),
    -1px -1px 0 rgba(0,0,0,.7),
     1px -1px 0 rgba(0,0,0,.7),
    -1px  1px 0 rgba(0,0,0,.7),
     1px  1px 0 rgba(0,0,0,.7);
  paint-order: stroke fill;
}

/* ── LAYER 1: Base radial colour depth (dark core → bright edge) ── */
/* Applied per gem type via background on .gem-* class */

/* ── LAYER 2: Brilliant-cut facets via conic gradient ── */
.gem-cell .facet{
  position:absolute;inset:0;border-radius:50%;z-index:1;pointer-events:none;
  background:conic-gradient(
    from 0deg at 50% 50%,
    rgba(255,255,255,.00)  0deg,
    rgba(255,255,255,.18)  8deg,
    rgba(0,0,0,.20)       16deg,
    rgba(255,255,255,.22) 24deg,
    rgba(0,0,0,.18)       32deg,
    rgba(255,255,255,.20) 40deg,
    rgba(0,0,0,.22)       48deg,
    rgba(255,255,255,.18) 56deg,
    rgba(0,0,0,.18)       64deg,
    rgba(255,255,255,.24) 72deg,
    rgba(0,0,0,.20)       80deg,
    rgba(255,255,255,.18) 88deg,
    rgba(0,0,0,.16)       96deg,
    rgba(255,255,255,.22)104deg,
    rgba(0,0,0,.20)      112deg,
    rgba(255,255,255,.18)120deg,
    rgba(0,0,0,.22)      128deg,
    rgba(255,255,255,.20)136deg,
    rgba(0,0,0,.18)      144deg,
    rgba(255,255,255,.24)152deg,
    rgba(0,0,0,.20)      160deg,
    rgba(255,255,255,.18)168deg,
    rgba(0,0,0,.16)      176deg,
    rgba(255,255,255,.22)184deg,
    rgba(0,0,0,.20)      192deg,
    rgba(255,255,255,.18)200deg,
    rgba(0,0,0,.22)      208deg,
    rgba(255,255,255,.20)216deg,
    rgba(0,0,0,.18)      224deg,
    rgba(255,255,255,.24)232deg,
    rgba(0,0,0,.20)      240deg,
    rgba(255,255,255,.18)248deg,
    rgba(0,0,0,.16)      256deg,
    rgba(255,255,255,.22)264deg,
    rgba(0,0,0,.20)      272deg,
    rgba(255,255,255,.18)280deg,
    rgba(0,0,0,.22)      288deg,
    rgba(255,255,255,.20)296deg,
    rgba(0,0,0,.18)      304deg,
    rgba(255,255,255,.24)312deg,
    rgba(0,0,0,.20)      320deg,
    rgba(255,255,255,.18)328deg,
    rgba(0,0,0,.16)      336deg,
    rgba(255,255,255,.22)344deg,
    rgba(0,0,0,.18)      352deg,
    rgba(255,255,255,.00)360deg
  );
  mix-blend-mode:overlay;
}

/* ── LAYER 3: Table (centre circle) – slightly lighter/darker circle ── */
.gem-cell .depth{
  position:absolute;inset:0;border-radius:50%;z-index:2;pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,255,255,.12) 0%,
      rgba(255,255,255,.04) 30%,
      transparent          48%
    ),
    radial-gradient(circle at 50% 68%,
      rgba(0,0,0,.28) 0%,
      transparent 58%
    );
}

/* ── LAYER 4: Main dome glare – top-left bright orb ── */
.gem-cell::before{
  content:'';
  position:absolute;
  top:4%;left:8%;
  width:58%;height:45%;
  border-radius:50%;
  background:radial-gradient(ellipse at 35% 30%,
    rgba(255,255,255,.88)  0%,
    rgba(255,255,255,.55) 22%,
    rgba(255,255,255,.15) 55%,
    transparent           100%
  );
  z-index:5;pointer-events:none;
  transform:rotate(-18deg);
}

/* ── LAYER 5: Star-burst glint (6-ray) ── */
.gem-cell .glint{
  position:absolute;
  top:8%;left:16%;
  width:32%;height:32%;
  z-index:7;pointer-events:none;
  /* 6 rays using repeating-conic */
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,255,255,1)   0%,
      rgba(255,255,255,.80) 8%,
      transparent           45%
    ),
    repeating-conic-gradient(
      from 15deg at 50% 50%,
      rgba(255,255,255,.85)  0deg 3deg,
      transparent            3deg 60deg
    );
  filter:blur(.3px);
  mix-blend-mode:screen;
}

/* ── LAYER 6: Rim edge bevel ── */
.gem-cell::after{
  content:'';
  position:absolute;inset:0;border-radius:50%;z-index:6;pointer-events:none;
  box-shadow:
    inset 0  2px  4px rgba(255,255,255,.50),
    inset 0 -3px  6px rgba(0,0,0,.40),
    inset 2px 0   3px rgba(255,255,255,.15),
    inset -2px 0  3px rgba(0,0,0,.20);
}

/* ─── Interactions ─── */
.gem-cell:hover{
  transform:scale(1.13) translateY(-5px);
  filter:brightness(1.18) saturate(1.25);
}
.gem-cell.selected{
  transform:scale(1.20) translateY(-6px);
  filter:brightness(1.30) saturate(1.40);
  z-index:10;
  box-shadow:0 0 0 3px #FFD700, 0 0 28px rgba(255,215,0,.75), var(--glow);
}
.gem-cell.path{
  transform:scale(1.11) translateY(-3px);
  filter:brightness(1.20) saturate(1.30);
  box-shadow:0 0 0 2px rgba(255,215,0,.75), 0 0 16px rgba(255,215,0,.55), var(--glow);
}
.gem-cell.wrong{animation:gemWrong .42s ease;}
@keyframes gemWrong{
  0%,100%{transform:translateX(0) scale(1);}
  20%,60%{transform:translateX(-9px) scale(1.05);}
  40%,80%{transform:translateX(9px) scale(1.05);}
}
.gem-cell.exploding{
  animation: gemExplode 0.65s ease-out forwards !important;
  overflow: visible !important;
  pointer-events: none !important;
}
@keyframes gemExplode{
  0%   { transform:scale(1);                    opacity:1;   filter:brightness(1); }
  20%  { transform:scale(2.0);                  opacity:1;   filter:brightness(3) saturate(2); }
  55%  { transform:scale(2.8) rotate(25deg);    opacity:0.6; filter:brightness(4) saturate(3); }
  100% { transform:scale(0)   rotate(90deg);    opacity:0;   filter:brightness(6); }
}
.gem-cell.falling{animation:gemFall .40s cubic-bezier(.34,1.5,.64,1) forwards;}
@keyframes gemFall{
  0%  {transform:translateY(-90px) scale(.4) rotate(-15deg);opacity:0;}
  100%{transform:translateY(0) scale(1) rotate(0deg);opacity:1;}
}
.gem-cell.hint-pulse{animation:hintPulse .5s ease infinite alternate !important;z-index:15;}
@keyframes hintPulse{
  0%  {transform:scale(1);    filter:brightness(1.1);box-shadow:0 0 0 3px #FDE68A, var(--glow);}
  100%{transform:scale(1.25); filter:brightness(1.6) saturate(2);box-shadow:0 0 0 6px #FEF08A,0 0 36px #EAB308, var(--glow);}
}
.gem-cell.correct-flash{animation:correctFlash .5s ease infinite alternate;z-index:15;}
@keyframes correctFlash{
  0%  {filter:brightness(1.2);box-shadow:0 0 0 3px #4ade80, 0 0 18px rgba(74,222,128,.6), var(--glow);}
  100%{filter:brightness(1.7) saturate(1.8);box-shadow:0 0 0 5px #86efac, 0 0 36px rgba(74,222,128,.9), var(--glow);}
}

/* Ambient shimmer */
@keyframes gemShimmer{
  0%,100%{filter:brightness(1)   saturate(1);}
  50%    {filter:brightness(1.09) saturate(1.15);}
}
.gem-cell:not(.selected):not(.path):not(.exploding):not(.wrong):not(.falling):not(.hint-pulse):not(.correct-flash){
  animation:gemShimmer var(--sd,3.2s) ease-in-out infinite;
}

/* ══════════════════════════════════════
   GEM COLOURS — radial depth like photo:
   very dark centre → mid saturated → bright vivid edge
   ══════════════════════════════════════ */

.gem-sapphire{
  background:radial-gradient(circle at 50% 55%,
    #060e2a 0%, #0e2e8a 22%, #1a52cc 42%, #2e78f0 60%, #5aa0ff 78%, #90c4ff 100%);
  --glow:0 8px 32px rgba(20,80,220,.75), 0 0 60px rgba(20,80,220,.35);
  box-shadow:var(--glow), 0 8px 0 rgba(0,0,20,.6); color:#fff;
}
.gem-ruby{
  background:radial-gradient(circle at 50% 55%,
    #1a0006 0%, #6e0016 22%, #b40028 42%, #e0204a 60%, #f05c7a 78%, #ff9eb0 100%);
  --glow:0 8px 32px rgba(200,0,40,.75), 0 0 60px rgba(200,0,40,.35);
  box-shadow:var(--glow), 0 8px 0 rgba(40,0,0,.6); color:#fff;
}
.gem-topaz{
  background:radial-gradient(circle at 50% 55%,
    #1e0e00 0%, #6e3400 22%, #b86000 42%, #e09020 60%, #f8c040 78%, #ffe88a 100%);
  --glow:0 8px 32px rgba(200,120,0,.75), 0 0 60px rgba(200,120,0,.35);
  box-shadow:var(--glow), 0 8px 0 rgba(30,10,0,.6); color:#fff;
}
.gem-emerald{
  background:radial-gradient(circle at 50% 55%,
    #001408 0%, #004e1c 22%, #00882e 42%, #18b848 60%, #3ee070 78%, #88ffb0 100%);
  --glow:0 8px 32px rgba(0,160,50,.75), 0 0 60px rgba(0,160,50,.35);
  box-shadow:var(--glow), 0 8px 0 rgba(0,20,0,.6); color:#fff;
}
.gem-amethyst{
  background:radial-gradient(circle at 50% 55%,
    #0e0020 0%, #3a0880 22%, #6c18d0 42%, #9840f0 60%, #c078ff 78%, #e8b8ff 100%);
  --glow:0 8px 32px rgba(130,30,220,.75), 0 0 60px rgba(130,30,220,.35);
  box-shadow:var(--glow), 0 8px 0 rgba(15,0,30,.6); color:#fff;
}
.gem-diamond{
  background:radial-gradient(circle at 50% 55%,
    #5090b0 0%, #88b8d8 22%, #b8d8ee 42%, #d8eef8 60%, #eef8ff 80%, #ffffff 100%);
  --glow:0 8px 32px rgba(100,170,220,.65), 0 0 60px rgba(150,210,255,.30);
  box-shadow:var(--glow), 0 8px 0 rgba(20,50,80,.5); color:#fff;
}
.gem-pink{
  background:radial-gradient(circle at 50% 55%,
    #200010 0%, #780040 22%, #c01870 42%, #e84898 60%, #f888c0 78%, #ffccee 100%);
  --glow:0 8px 32px rgba(200,30,120,.75), 0 0 60px rgba(200,30,120,.35);
  box-shadow:var(--glow), 0 8px 0 rgba(30,0,15,.6); color:#fff;
}
.gem-obsidian{
  background:radial-gradient(circle at 50% 55%,
    #030508 0%, #101820 22%, #1e3040 42%, #304858 60%, #506880 78%, #8090a8 100%);
  --glow:0 8px 28px rgba(20,40,70,.80), 0 0 50px rgba(40,70,110,.30);
  box-shadow:var(--glow), 0 8px 0 rgba(0,0,0,.7); color:#fff;
}

/* Found word badge */
.gem-found-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:20px;font-family:'Fredoka One',cursive;font-size:.78rem;
  animation:badgePop .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes badgePop{0%{transform:scale(0)}100%{transform:scale(1)}}
.gem-found-badge.found{background:linear-gradient(135deg,#BBF7D0,#86EFAC);color:#14532D;}
.gem-found-badge.already{background:#E5E7EB;color:#9CA3AF;}

/* Float score popup */
.gem-float{position:fixed;pointer-events:none;font-family:'Fredoka One',cursive;
  font-size:1.4rem;font-weight:900;z-index:9999;animation:gemFloat 1.2s ease-out forwards;
  text-shadow:0 2px 10px rgba(0,0,0,.5);}
@keyframes gemFloat{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-95px) scale(1.5)}}

/* Target word chips */
.gem-target-chip{
  padding:4px 10px;border-radius:20px;font-family:'Fredoka One',cursive;font-size:.8rem;
  border:2px solid #E5E7EB;background:#F9FAFB;color:#6B7280;transition:all .25s;
}
.gem-target-chip.done{background:linear-gradient(135deg,#BBF7D0,#86EFAC);border-color:#4ADE80;color:#14532D;text-decoration:line-through;opacity:.7;}
.gem-target-chip.hint-active{border-color:#F59E0B;background:#FFFBEB;color:#92400E;}

/* Timer warning */
#gemTimer.warn{color:#EF4444;animation:timerPulse .5s ease infinite alternate;}
@keyframes timerPulse{0%{transform:scale(1)}100%{transform:scale(1.15)}}

/* Game over overlay */
.gem-over{position:absolute;inset:0;border-radius:22px;z-index:20;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(8,6,24,.90);backdrop-filter:blur(10px);
  animation:fadeIn .3s ease;}
.gem-over-title{font-family:'Fredoka One',cursive;font-size:2rem;color:#FDE68A;margin-bottom:6px;}
.gem-over-score{font-family:'Fredoka One',cursive;font-size:3rem;color:#fff;margin-bottom:18px;}


/* ── BEAR REWARD ── */
.bear-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,0);pointer-events:all;}
.bear-overlay.show{animation:bearBgIn .4s ease forwards;}
@keyframes bearBgIn{to{background:rgba(0,0,0,.45)}}

.bear-stage{display:flex;flex-direction:column;align-items:center;
  width:min(340px,90vw);text-align:center;position:relative;
  pointer-events:all;}

/* Bear SVG — 1/3 of viewport height */
#bearSvg{width:min(33vh,220px);height:auto;
  filter:drop-shadow(0 12px 32px rgba(0,0,0,.28));
  transform-origin:bottom center;}

/* Drop in from above */
.bear-stage.enter #bearSvg{animation:bearDrop .7s cubic-bezier(.22,.61,.36,1) forwards;}
@keyframes bearDrop{
  0%  {transform:translateY(-110vh) rotate(-8deg);}
  70% {transform:translateY(14px) rotate(3deg);}
  85% {transform:translateY(-6px) rotate(-2deg);}
  100%{transform:translateY(0) rotate(0);}
}

/* Arms wave after landing */
#bearArmL{animation:none;}
#bearArmR{animation:none;}
.bear-stage.cheer #bearArmL{animation:waveL .45s ease .72s 4 alternate;}
.bear-stage.cheer #bearArmR{animation:waveR .45s ease .72s 4 alternate;}
@keyframes waveL{0%{transform:rotate(0deg)}100%{transform:rotate(-42deg)}}
@keyframes waveR{0%{transform:rotate(0deg)}100%{transform:rotate(42deg)}}

/* Stars appear in hands */
.bear-stage.cheer #bearStarL{animation:starPop .3s ease .8s forwards;}
.bear-stage.cheer #bearStarR{animation:starPop .3s ease .95s forwards;}
@keyframes starPop{0%{opacity:0;transform:scale(0)}60%{transform:scale(1.4)}100%{opacity:1;transform:scale(1)}}

/* Body bounce */
.bear-stage.cheer #bearSvg{animation:bearBounce 1.8s ease .7s 2;}
@keyframes bearBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}

/* Fly away */
.bear-stage.exit #bearSvg{animation:bearFly .65s cubic-bezier(.55,0,1,.45) forwards;}
@keyframes bearFly{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-115vh) rotate(12deg);opacity:0}}

/* Text fade in below */
.bear-badge{font-family:'Fredoka One',cursive;font-size:.85rem;color:#fff;
  background:rgba(67,160,71,.85);border-radius:20px;padding:5px 14px;
  margin-bottom:10px;opacity:0;animation:none;}
.bear-stage.enter .bear-badge{animation:fadeUp .4s ease .85s forwards;}
.bear-title{font-family:'Fredoka One',cursive;font-size:1.7rem;
  background:linear-gradient(135deg,#F59E0B,#EF4444,#EC4899);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  margin-top:6px;opacity:0;}
.bear-stage.enter .bear-title{animation:fadeUp .4s ease .95s forwards;}
.bear-sub{font-size:.88rem;font-weight:700;color:#fff;margin:6px 0 14px;
  text-shadow:0 1px 6px rgba(0,0,0,.4);opacity:0;line-height:1.5;}
.bear-stage.enter .bear-sub{animation:fadeUp .4s ease 1.05s forwards;}
.bear-close{padding:11px 32px;border-radius:14px;border:none;
  background:linear-gradient(135deg,#66BB6A,#EC4899);color:#fff;
  font-family:'Fredoka One',cursive;font-size:1rem;cursor:pointer;
  box-shadow:0 4px 0 #7E22CE;transition:all .2s;opacity:0;}
.bear-stage.enter .bear-close{animation:fadeUp .4s ease 1.15s forwards;}
.bear-close:hover{transform:translateY(-2px);box-shadow:0 6px 0 #7E22CE;}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* Sparkle emojis around the bear */
.bear-sparkle{position:fixed;pointer-events:none;font-size:1.6rem;
  animation:sparkleFloat 1.2s ease-out forwards;}
@keyframes sparkleFloat{
  0%  {opacity:0;transform:scale(0) rotate(0deg);}
  25% {opacity:1;transform:scale(1.2) rotate(20deg);}
  80% {opacity:.8;}
  100%{opacity:0;transform:translateY(-90px) scale(.5) rotate(-30deg);}
}

/* Keep existing reward bar styles */
.reward-stars{display:none;}
.reward-emoji,.reward-title,.reward-sub,.reward-count,.reward-close,.reward-modal,.reward-overlay{}

/* ── LESSONS TAB ── */
#lessonsTab{display:none;}
.lesson-card{background:#fff;border-radius:18px;padding:16px;margin-bottom:10px;
  box-shadow:var(--shadow);border:2.5px solid #E5E7EB;transition:all .2s;}
.lesson-card.active-lesson{border-color:#2E7D32;background:#E8F5E9;}
.lesson-card-top{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.lesson-num{font-family:'Fredoka One',cursive;font-size:1.3rem;color:var(--orange);
  background:#E8F5E9;width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.lesson-info{flex:1;}
.lc-bar{height:5px;background:#E5E7EB;border-radius:3px;margin-top:10px;overflow:hidden;}
.lc-fill{height:100%;border-radius:3px;transition:width .3s;}
.lesson-name{font-family:'Fredoka One',cursive;font-size:1.05rem;color:#1E1B18;}
.lesson-meta{font-size:.72rem;font-weight:800;color:#9CA3AF;margin-top:2px;}
.lesson-actions{display:flex;gap:6px;flex-wrap:wrap;}
.lbtn-sm{padding:7px 14px;border-radius:10px;border:2px solid;
  font-family:'Nunito',sans-serif;font-size:.75rem;font-weight:800;cursor:pointer;transition:all .2s;}
.lbtn-orange{border-color:var(--orange);color:var(--orange);background:#fff;}
.lbtn-orange:hover{background:var(--orange);color:#fff;}
.lbtn-green{border-color:#22C55E;color:#16A34A;background:#fff;}
.lbtn-green:hover{background:#22C55E;color:#fff;}
.lbtn-blue{border-color:#3B82F6;color:#1D4ED8;background:#fff;}
.lbtn-blue:hover{background:#3B82F6;color:#fff;}
.lbtn-red{border-color:#EF4444;color:#DC2626;background:#fff;}
.lbtn-red:hover{background:#EF4444;color:#fff;}
.add-lesson-btn{width:100%;padding:14px;border-radius:16px;border:2.5px dashed #D1D5DB;
  background:#FAFAFA;color:#9CA3AF;font-family:'Fredoka One',cursive;font-size:1rem;
  cursor:pointer;transition:all .2s;text-align:center;}
.add-lesson-btn:hover{border-color:var(--orange);color:var(--orange);background:#FFF8F0;}

/* Lesson section (builtin / custom) */
.lesson-section{margin-bottom:18px;border-radius:18px;overflow:hidden;
  border:2px solid #E5E7EB;background:#FAFAFA;}
.lesson-section-header{display:flex;align-items:center;gap:8px;padding:12px 16px;
  background:linear-gradient(135deg,#43A04718,#2E7D3218);
  font-family:'Fredoka One',cursive;font-size:1rem;color:#2E7D32;font-weight:800;
  border-bottom:2px solid #E5E7EB;}
.lesson-section-icon{font-size:1.2rem;}
/* Group tabs row */
.lesson-group-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px;
  background:#fff;border-bottom:2px solid #F3F4F6;}
.lesson-group-tab{padding:6px 12px;border-radius:10px;border:2px solid #E5E7EB;
  background:#fff;font-family:'Nunito',sans-serif;font-size:.72rem;font-weight:800;
  color:#6B7280;cursor:pointer;transition:all .2s;}
.lesson-group-tab:hover{border-color:#43A047;color:#43A047;}
.lesson-group-tab.active{border-color:#43A047;background:#43A047;color:#fff;}
/* Cards inside open group */
.lesson-cards-group{padding:10px 10px 4px;}

/* Number grid for builtin lessons */
.lesson-num-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;padding:10px 8px 6px;}
.lesson-num-btn{width:100%;border-radius:8px;border:2px solid #E5E7EB;padding:6px 2px;
  background:#fff;font-family:'Nunito',sans-serif;font-size:.72rem;font-weight:800;color:#6B7280;
  cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;white-space:nowrap;}
.lesson-num-btn:hover{border-color:#43A047;color:#43A047;transform:scale(1.06);}
.lesson-num-btn{flex-direction:column;gap:1px;}
.lnb-num{font-size:.72rem;line-height:1.1;}
.lnb-title{font-size:.52rem;line-height:1;opacity:.7;font-weight:700;}
.lesson-num-btn.selected-lesson{border-color:#2E7D32;background:#2E7D32;color:#fff;
  box-shadow:0 2px 8px rgba(46,125,50,.4);}
.lesson-num-btn.selected-lesson .lnb-title{opacity:1;}
.lesson-num-btn.mastered{border-color:#22C55E;background:#DCFCE7;color:#16A34A;}
.lesson-num-btn.mastered.selected-lesson{background:#2E7D32;color:#fff;border-color:#2E7D32;}
.lesson-num-btn.started{border-color:#FBBF24;background:#FEF9C3;color:#B45309;}
.lesson-num-btn.started.selected-lesson{background:#2E7D32;color:#fff;border-color:#2E7D32;}
.lnb-bar{display:block;width:100%;height:6px;background:#E5E7EB;border-radius:3px;margin-top:5px;overflow:hidden;}
.lnb-fill{display:block;height:100%;background:#43A047;border-radius:3px;transition:width .4s;}
.lesson-num-btn.mastered .lnb-fill{background:#22C55E;}
.lesson-num-btn.selected-lesson .lnb-bar{background:rgba(255,255,255,.3);}
.lesson-num-btn.selected-lesson .lnb-fill{background:#fff;}
.lesson-card.selected-detail{background:#E8F5E9!important;border-color:#2E7D32!important;}
.lesson-num-detail{padding:10px;background:#fff;border-top:2px solid #F3F4F6;}

/* Lesson detail (word editor) */
.lesson-detail{display:none;}
.lesson-detail.show{display:block;}
.ld-header{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.ld-back{padding:7px 14px;border-radius:10px;border:2px solid #E5E7EB;
  background:#fff;font-family:'Nunito',sans-serif;font-size:.8rem;font-weight:800;
  color:#6B7280;cursor:pointer;transition:all .2s;}
.ld-back:hover{border-color:var(--orange);color:var(--orange);}
.ld-title{font-family:'Fredoka One',cursive;font-size:1.2rem;color:var(--orange);flex:1;}
.word-chip{display:inline-flex;align-items:center;gap:6px;background:#fff;
  border:2px solid #E5E7EB;border-radius:12px;padding:6px 10px;margin:3px;
  font-family:'Fredoka One',cursive;font-size:.9rem;color:#374151;}
.word-chip-del{border:none;background:none;color:#EF4444;cursor:pointer;font-size:1rem;padding:0;line-height:1;}
.word-chip.generating{border-color:#A78BFA;color:#43A047;animation:pulse .8s infinite alternate;}
@keyframes praiseRainbow{
  0%  {filter:drop-shadow(0 0 14px #ff0080) drop-shadow(0 0 30px #ff0080);}
  20% {filter:drop-shadow(0 0 14px #ff8800) drop-shadow(0 0 30px #ff8800);}
  40% {filter:drop-shadow(0 0 14px #ffee00) drop-shadow(0 0 30px #ffee00);}
  60% {filter:drop-shadow(0 0 14px #00ff88) drop-shadow(0 0 30px #00ff88);}
  80% {filter:drop-shadow(0 0 14px #00aaff) drop-shadow(0 0 30px #00aaff);}
  100%{filter:drop-shadow(0 0 14px #ff0080) drop-shadow(0 0 30px #ff0080);}
}
@keyframes praisePulse{
  0%,100%{transform:scale(1) rotate(-2deg);}
  50%{transform:scale(1.12) rotate(2deg);}
}

.add-word-area{background:#F9FAFB;border-radius:14px;padding:14px;margin-top:10px;}
.add-word-row{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap;}
.word-input{flex:1;min-width:140px;padding:10px 14px;border-radius:12px;
  border:2.5px solid #E5E7EB;font-family:'Fredoka One',cursive;font-size:1rem;
  outline:none;transition:border-color .2s;}
.word-input:focus{border-color:var(--orange);}
.photo-upload-area{border:2.5px dashed #D1D5DB;border-radius:14px;padding:20px;
  text-align:center;cursor:pointer;transition:all .2s;background:#fff;}
.photo-upload-area:hover{border-color:#A78BFA;background:#FAF5FF;}
.photo-preview{max-width:100%;border-radius:10px;margin:8px 0;display:none;}
.ai-status{font-size:.8rem;font-weight:800;color:#43A047;text-align:center;
  padding:8px;display:none;}
.ai-status.show{display:block;}

/* Modal overlay */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:10001;
  display:flex;align-items:center;justify-content:center;animation:fadeIn .2s ease;}
.modal-box{background:#fff;border-radius:22px;padding:28px 22px;max-width:360px;
  width:92%;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:modalPop .3s cubic-bezier(.34,1.56,.64,1);}
.modal-title{font-family:'Fredoka One',cursive;font-size:1.3rem;color:var(--orange);margin-bottom:14px;}
.modal-input{width:100%;padding:12px 16px;border-radius:12px;border:2.5px solid #E5E7EB;
  font-family:'Fredoka One',cursive;font-size:1rem;outline:none;box-sizing:border-box;
  transition:border-color .2s;}
.modal-input:focus{border-color:var(--orange);}
.modal-btns{display:flex;gap:8px;margin-top:16px;}
.modal-btn{flex:1;padding:12px;border-radius:12px;border:none;font-family:'Fredoka One',cursive;
  font-size:.95rem;cursor:pointer;transition:all .2s;}
.modal-btn-ok{background:var(--orange);color:#fff;box-shadow:0 3px 0 #C44B1A;}
.modal-btn-ok:hover{transform:translateY(-2px);}
.modal-btn-cancel{background:#F3F4F6;color:#6B7280;}
.modal-btn-cancel:hover{background:#E5E7EB;}

/* ══ LESSON SELECTOR — child-friendly grid + exercise hub ══ */
.lesson-selector{margin-bottom:10px;position:relative;z-index:10;pointer-events:auto;}
/* ── Lesson grid: 2 columns ── */
.ls-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:4px 0;}
.ls-num{border-radius:16px;border:3px solid #C8E6C9;background:#fff;
  cursor:pointer;font-family:'Nunito',sans-serif;font-size:1rem;font-weight:800;
  color:#6B7280;transition:all .15s;text-align:center;padding:18px 10px;line-height:1.25;
  min-height:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.ls-num-label{font-size:1.5rem;line-height:1.15;font-weight:800;}
.ls-num-title{font-size:.95rem;line-height:1.1;opacity:.6;font-weight:700;}
.ls-num.selected{border-color:#2E7D32;background:#2E7D32;color:#fff;
  box-shadow:0 3px 10px rgba(46,125,50,.4);transform:scale(1.03);}
.ls-num.selected .ls-num-title{opacity:1;}
.ls-num:hover:not(.selected){border-color:#66BB6A;color:#2E7D32;background:#E8F5E9;}
.ls-num:active{transform:scale(0.96);}
.ls-num.mastered{border-color:#22C55E;background:#DCFCE7;color:#16A34A;}
.ls-num.mastered::after{content:'⭐';display:block;font-size:.85rem;line-height:1;margin-top:2px;}
.ls-num.mastered.selected{background:#2E7D32;color:#fff;border-color:#2E7D32;}
.ls-num.mastered.selected::after{content:'⭐';}
.ls-num.started{border-color:#FBBF24;background:#FEF9C3;color:#B45309;}
.ls-num.started.selected{background:#2E7D32;color:#fff;border-color:#2E7D32;}

/* ── Level system tabs (练习 tab) — full-width, evenly distributed ── */
.ls-level-bar{display:flex;gap:8px;padding:0 0 14px;}
.ls-level-tab{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:12px 6px;border-radius:14px;border:3px solid #E5E7EB;background:#fff;
  cursor:pointer;transition:all .2s;font-family:'Nunito',sans-serif;min-width:0;}
.ls-level-tab:hover{border-color:var(--level-color,#43A047);background:#F9FAFB;}
.ls-level-tab.active{border-color:var(--level-color,#43A047);background:var(--level-color,#43A047);color:#fff;}
.ls-lt-label{font-size:1.1rem;font-weight:800;letter-spacing:.3px;}
.ls-lt-desc{font-size:.85rem;font-weight:700;opacity:.7;}
.ls-lt-pct{font-size:.85rem;font-weight:800;opacity:.85;}
.ls-level-tab.active .ls-lt-label,
.ls-level-tab.active .ls-lt-desc,
.ls-level-tab.active .ls-lt-pct{color:#fff;opacity:1;}

/* ── Level tabs (词库 tab) ── */
.lesson-level-tabs{display:flex;gap:6px;padding:8px 8px 4px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.lesson-level-tabs::-webkit-scrollbar{display:none;}
.lesson-level-tab{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:8px 12px;border-radius:12px;border:2.5px solid #E5E7EB;background:#fff;
  cursor:pointer;transition:all .2s;font-family:'Nunito',sans-serif;min-width:62px;}
.lesson-level-tab:hover{border-color:var(--level-color,#43A047);}
.lesson-level-tab.active{border-color:var(--level-color,#43A047);background:var(--level-color,#43A047);color:#fff;}
.llt-name{font-size:.72rem;font-weight:800;}
.llt-sub{font-size:.58rem;font-weight:700;opacity:.65;}
.lesson-level-tab.active .llt-name,
.lesson-level-tab.active .llt-sub{color:#fff;opacity:1;}

/* ── Exercise hub: big obvious buttons ── */
.ls-hub{margin-top:12px;background:#fff;border-radius:20px;padding:18px 16px;
  box-shadow:0 8px 28px rgba(0,0,0,.08);border:2.5px solid #A5D6A7;animation:lsHubIn .3s ease;
  position:relative;z-index:11;}
@keyframes lsHubIn{from{opacity:0;transform:translateY(-12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.ls-hub-header{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid #E8F5E9;}
.ls-hub-title{font-family:'Fredoka One',cursive;font-size:1.2rem;color:#2E7D32;}
.ls-hub-meta{font-size:.75rem;color:#6B7280;font-weight:700;margin-top:2px;}
.ls-hub-close{width:36px;height:36px;border-radius:50%;border:2px solid #E5E7EB;background:#F9FAFB;
  cursor:pointer;font-size:1.1rem;color:#9CA3AF;display:flex;align-items:center;
  justify-content:center;transition:all .15s;flex-shrink:0;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.ls-hub-close:hover{background:#FEE2E2;color:#DC2626;border-color:#FECACA;}
.ls-hub-close:active{transform:scale(0.9);}
.ls-hub-section-label{font-size:.72rem;font-weight:800;color:#9CA3AF;margin:12px 0 8px;
  text-transform:uppercase;letter-spacing:.5px;}

/* Practice buttons: 2 columns, big */
.ls-hub-btns{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
/* Game buttons: 2x2 on mobile, 4 on desktop */
.ls-hub-btns-4{grid-template-columns:repeat(2,1fr);gap:8px;}
@media(min-width:600px){.ls-hub-btns-4{grid-template-columns:repeat(4,1fr);}}

.ls-hub-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:16px 8px 14px;border:2.5px solid #E0F2E0;
  border-radius:16px;background:linear-gradient(180deg,#FAFFFE,#F1F8E9);
  cursor:pointer;font-family:'Nunito',sans-serif;font-weight:800;font-size:.85rem;
  color:#374151;transition:all .18s ease;text-align:center;position:relative;
  min-height:80px;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  -webkit-user-select:none;user-select:none;
  box-shadow:0 3px 0 #C8E6C9;}
.ls-hub-btn:hover{border-color:#66BB6A;background:linear-gradient(180deg,#E8F5E9,#DCEDC8);
  transform:translateY(-3px);box-shadow:0 6px 16px rgba(67,160,71,.18);}
.ls-hub-btn:active{transform:translateY(2px) scale(0.97);box-shadow:0 1px 0 #C8E6C9;
  background:#C8E6C9;transition:all .06s;}
.ls-hub-btn .ls-hub-icon,.ls-hub-btn .ls-hub-label-text,.ls-hub-btn .ls-hub-sub{pointer-events:none;}
.ls-hub-icon{font-size:1.8rem;line-height:1;}
.ls-hub-label-text{font-size:.85rem;font-weight:800;color:#2E7D32;}
.ls-hub-sub{font-size:.6rem;color:#9CA3AF;font-weight:600;}
.ls-hub-edit{display:block;width:100%;margin-top:14px;padding:14px;border:2.5px solid #43A047;
  border-radius:14px;background:#E8F5E9;cursor:pointer;font-family:'Nunito',sans-serif;
  font-weight:800;font-size:.9rem;color:#2E7D32;transition:all .15s;text-align:center;
  box-shadow:0 3px 0 #A5D6A7;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.ls-hub-edit:hover{background:#43A047;color:#fff;box-shadow:0 3px 0 #2E7D32;}
.ls-hub-edit:active{transform:translateY(2px);box-shadow:none;}

/* ── User courses section ── */
.ls-user-section{margin-top:16px;padding-top:14px;border-top:2.5px dashed #C8E6C9;}
.ls-user-title{font-family:'Fredoka One',cursive;font-size:.95rem;color:#2E7D32;margin-bottom:10px;}
.ls-user-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px;}
.ls-user-card{border-radius:14px;border:2.5px solid #E5E7EB;background:#fff;cursor:pointer;
  padding:12px 8px;font-family:'Nunito',sans-serif;transition:all .15s;text-align:center;
  min-height:52px;box-shadow:0 2px 0 #F3F4F6;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.ls-user-card:hover{border-color:#43A047;background:#E8F5E9;transform:translateY(-2px);}
.ls-user-card:active{transform:scale(0.95);}
.ls-user-card.active{border-color:#43A047;background:#43A047;color:#fff;box-shadow:0 3px 0 #2E7D32;}
.ls-uc-name{display:block;font-size:.82rem;font-weight:800;color:inherit;}
.ls-uc-meta{display:block;font-size:.65rem;color:#9CA3AF;font-weight:700;margin-top:2px;}
.ls-user-card.active .ls-uc-meta{color:rgba(255,255,255,.8);}
.ls-empty-hint{text-align:center;color:#9CA3AF;padding:14px 0;font-size:.85rem;font-weight:700;}
.ls-create-btn{display:flex;align-items:center;gap:10px;width:100%;padding:16px 18px;margin-top:8px;
  border:2.5px dashed #A5D6A7;border-radius:16px;background:#F1F8E9;cursor:pointer;
  font-family:'Nunito',sans-serif;font-weight:800;font-size:.92rem;color:#2E7D32;
  transition:all .15s;min-height:52px;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.ls-create-btn:hover{border-color:#43A047;background:#E8F5E9;transform:scale(1.02);}
.ls-create-btn:active{transform:scale(0.97);}
.ls-create-hint{font-size:.68rem;color:#9CA3AF;font-weight:600;margin-left:auto;}

/* ── NOTIFICATION BANNER ── */
.notif-banner{border-radius:18px;padding:14px 16px;display:flex;align-items:center;gap:12px;}
.notif-banner.ask{background:linear-gradient(135deg,#F0FDF4,#DCFCE7);border:2px solid #86EFAC;}
.notif-banner.granted{background:linear-gradient(135deg,#F0FDF4,#DCFCE7);border:2px solid #86EFAC;}
.notif-banner.denied{background:#FFF1F2;border:2px solid #FECDD3;}
.notif-banner-icon{font-size:1.8rem;flex-shrink:0;}
.notif-banner-info{flex:1;}
.notif-banner-title{font-family:'Fredoka One',cursive;font-size:.95rem;color:#15803D;}
.notif-banner-title.denied{color:#BE123C;}
.notif-banner-sub{font-size:.7rem;color:#4B5563;margin-top:2px;}
.notif-enable-btn{padding:8px 16px;border-radius:12px;border:none;background:#22C55E;color:#fff;
  font-family:'Fredoka One',cursive;font-size:.85rem;cursor:pointer;transition:all .2s;flex-shrink:0;
  box-shadow:0 3px 0 #16A34A;}
.notif-enable-btn:hover{transform:translateY(-2px);}
.notif-schedule-list{margin-top:12px;display:flex;flex-direction:column;gap:6px;}
.notif-time-row{display:flex;align-items:center;gap:10px;padding:8px 12px;background:rgba(255,255,255,.7);
  border-radius:12px;font-size:.8rem;color:#374151;}
.notif-time-icon{font-size:1.1rem;flex-shrink:0;}
.notif-time-label{flex:1;font-family:'Fredoka One',cursive;}
.notif-time-val{font-size:.75rem;color:#6B7280;font-weight:800;}
.notif-toggle{position:relative;width:38px;height:22px;flex-shrink:0;}
.notif-toggle input{opacity:0;width:0;height:0;}
.notif-toggle-slider{position:absolute;inset:0;background:#D1D5DB;border-radius:22px;
  cursor:pointer;transition:.2s;}
.notif-toggle-slider:before{content:'';position:absolute;height:16px;width:16px;left:3px;bottom:3px;
  background:#fff;border-radius:50%;transition:.2s;}
.notif-toggle input:checked+.notif-toggle-slider{background:#22C55E;}
.notif-toggle input:checked+.notif-toggle-slider:before{transform:translateX(16px);}

/* ── SCHEDULE TAB ── */
.sch-today-card{background:linear-gradient(135deg,var(--orange),#FF8C42);
  border-radius:20px;padding:18px 16px;color:#fff;box-shadow:0 6px 20px rgba(67,160,71,.35);}
.sch-today-date{font-family:'Fredoka One',cursive;font-size:1.2rem;margin-bottom:10px;}
.sch-session{background:rgba(255,255,255,.18);border-radius:12px;padding:10px 12px;margin-top:8px;
  display:flex;align-items:center;gap:10px;cursor:pointer;transition:background .2s;}
.sch-session:hover{background:rgba(255,255,255,.28);}
.sch-session-icon{font-size:1.4rem;flex-shrink:0;}
.sch-session-info{flex:1;}
.sch-session-type{font-family:'Fredoka One',cursive;font-size:.88rem;}
.sch-session-meta{font-size:.67rem;opacity:.82;margin-top:2px;}
.sch-session-time{font-family:'Fredoka One',cursive;font-size:.8rem;opacity:.85;text-align:right;}
.sch-slot{border-radius:10px;padding:5px 3px;text-align:center;vertical-align:top;cursor:pointer;transition:all .18s;}
.sch-slot:hover:not(.empty){filter:brightness(.94);}
.sch-slot.empty{background:#F9FAFB;cursor:default;}
.sch-slot.done{background:#DCFCE7;}
.sch-slot.stage-new{background:#E8F5E9;border:1.5px solid #FDBA74;}
.sch-slot.stage-sameDay{background:#FFFBEB;border:1.5px solid #FDE68A;}
.sch-slot.stage-day1{background:#EFF6FF;border:1.5px solid #BFDBFE;}
.sch-slot.stage-day3{background:#F0FDF4;border:1.5px solid #BBF7D0;}
.sch-slot.stage-day7{background:#F5F3FF;border:1.5px solid #DDD6FE;}
.sch-slot.stage-day14{background:#FDF4FF;border:1.5px solid #F0ABFC;}
.sch-slot.today-highlight{box-shadow:0 0 0 2.5px var(--orange)!important;}
.sch-slot-words{font-family:'Fredoka One',cursive;font-size:.78rem;color:#374151;display:block;}
.sch-slot-stage{font-size:.58rem;color:#6B7280;display:block;margin-top:1px;line-height:1.2;}
.sch-day-col{font-family:'Fredoka One',cursive;font-size:.72rem;color:#6B7280;
  text-align:center;padding:2px 3px 5px;}
.sch-day-col.today-col{color:var(--orange);}
.sch-row-lbl{font-size:.65rem;font-weight:800;color:#9CA3AF;padding:4px 6px 4px 0;white-space:nowrap;vertical-align:middle;}
.sch-grid-table{width:100%;border-collapse:separate;border-spacing:3px;}
.sch-legend-item{display:inline-flex;align-items:center;gap:4px;font-size:.63rem;color:#6B7280;
  background:#F9FAFB;border-radius:8px;padding:2px 7px;}
.sch-legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.sch-hint-item{display:flex;align-items:flex-start;gap:8px;padding:6px 0;
  border-bottom:1px solid rgba(67,160,71,.1);font-size:.78rem;color:#4B5563;}
.sch-hint-item:last-child{border-bottom:none;}

/* Today card — summary + start button */
.sch-today-summary{font-size:.78rem;opacity:.8;margin-top:10px;text-align:center;}
.sch-start-btn{display:block;width:100%;margin-top:10px;padding:14px;border:none;border-radius:14px;
  background:rgba(255,255,255,.95);color:var(--orange);font-family:'Fredoka One',cursive;
  font-size:1.05rem;cursor:pointer;transition:all .18s;box-shadow:0 2px 8px rgba(0,0,0,.1);}
.sch-start-btn:hover{background:#fff;transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.15);}
.sch-start-btn:active{transform:scale(0.97);}

/* Collapsible Ebbinghaus card */
.sch-collapse-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;
  cursor:pointer;user-select:none;transition:background .15s;}
.sch-collapse-header:hover{background:#FAFAFA;border-radius:18px;}
.sch-collapse-arrow{font-size:1.1rem;color:#9CA3AF;transition:transform .25s;}
.sch-collapse-arrow.open{transform:rotate(90deg);}
.sch-collapse-body{padding:0 16px 16px;}

/* ── LANG BAR ── */
.lang-bar{display:flex;justify-content:center;align-items:center;margin-bottom:14px;}
.lang-picker{position:relative;width:min(100%, 320px);}
.lang-picker-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 14px;border-radius:16px;border:2px solid #E5E7EB;background:#fff;
  box-shadow:var(--shadow);font-family:'Nunito',sans-serif;cursor:pointer;
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.lang-picker-btn:hover{border-color:var(--orange);}
.lang-picker-btn:active{transform:translateY(1px);}
.lang-picker-main{flex:0 0 auto;font-size:.95rem;font-weight:900;color:var(--orange);}
.lang-picker-current{flex:1;font-size:.84rem;font-weight:800;color:#6B7280;text-align:left;}
.lang-picker-arrow{flex:0 0 auto;font-size:.95rem;font-weight:900;color:#9CA3AF;}
.lang-picker-menu{
  display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:60;
  max-height:240px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:#fff;border:2px solid #E5E7EB;border-radius:16px;box-shadow:var(--shadow);padding:6px;
}
.lang-picker-menu.open{display:block;}
.auth-wall-lang{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  margin:0 auto 20px;
}
.auth-wall-lang-label{
  font-size:.92rem;
  font-weight:900;
  letter-spacing:.02em;
  color:rgba(255,255,255,.96);
}
.auth-wall-lang-select{
  width:min(78vw, 280px);
  min-height:46px;
  padding:10px 14px;
  border:2px solid rgba(255,255,255,.6);
  border-radius:14px;
  background:rgba(255,255,255,.14);
  color:#fff;
  font-family:'Nunito',sans-serif;
  font-size:.98rem;
  font-weight:800;
  text-align:center;
  text-align-last:center;
  outline:none;
  box-shadow:0 8px 18px rgba(0,0,0,.12);
  -webkit-appearance:none;
  appearance:none;
}
.auth-wall-lang-select option{color:#1F2937;}
.auth-wall-lang-select:focus{
  border-color:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.22);
}
.lang-option{
  width:100%;display:flex;align-items:center;gap:10px;padding:11px 10px;
  border:none;border-radius:12px;background:#fff;
  font-family:'Nunito',sans-serif;font-size:.92rem;font-weight:800;color:#4B5563;
  text-align:left;cursor:pointer;transition:background .18s,color .18s;
}
.lang-option:hover{background:#FFF7ED;}
.lang-option.active{background:#FFF7ED;color:var(--orange);}
.lang-option-flag{font-size:1rem;line-height:1;}
.lang-option-label{flex:1;}
.lang-option-check{margin-left:auto;font-size:.95rem;font-weight:900;color:var(--orange);opacity:0;}
.lang-option.active .lang-option-check{opacity:1;}

/* Gem overlays: fullscreen on desktop, normal flow on mobile */
#gemTab, #inlineGemArea {
  display: none;
}
@media (min-width: 601px) {
  #gemTab.gem-visible, #inlineGemArea.gem-visible {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--bg);
    overflow: hidden;
  }
}
@media (max-width: 600px) {
  #gemTab.gem-visible {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--bg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #inlineGemArea.gem-visible {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--bg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Mobile: stack board + controls vertically */
  #gemTab .gem-desktop-row,
  #inlineGemArea .gem-desktop-row {
    flex-direction: column !important;
    height: auto !important;
    padding: 0 !important;
  }
  #gemTab .gem-board-col,
  #inlineGemArea .gem-board-col {
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 1;
  }
  #gemTab .gem-ctrl-col,
  #inlineGemArea .gem-ctrl-col {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
  }
  /* miniGemModal mobile: stack vertically, scroll */
  #miniGemModal > div {
    flex-direction: column !important;
    height: auto !important;
    overflow-y: auto !important;
    align-items: stretch !important;
  }
  #miniGemModal .gem-board-col {
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 1;
  }
  #miniGemModal .gem-ctrl-col {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
  }
}

/* ════════════════════════════════════════
   🔺 PYRAMID GAME
   ════════════════════════════════════════ */
#pyrTab { padding: 0 0 40px; }
.pyr-scene {
  perspective: 900px;
  display: flex; align-items: center; justify-content: center;
  height: clamp(240px, 38vw, 380px);
  margin: 12px 0 8px;
}
.pyr-stage {
  transform-style: preserve-3d;
  position: relative;
  width: 120px; height: 120px;
}
.pyr-face {
  position: absolute;
  width: 120px; height: 120px;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid rgba(255,255,255,.25);
  border-radius: 16px;
  font-family: 'Fredoka One', cursive;
  font-size: clamp(2.5rem, 10vw, 5rem);
  font-weight: 900;
  backface-visibility: hidden;
  transition: background .3s;
}
.pyr-letter-current {
  background: linear-gradient(135deg,#43A047,#2E7D32);
  color: #FDE68A;
  text-shadow: 0 0 30px rgba(253,230,138,.8), 0 3px 0 rgba(0,0,0,.5);
  box-shadow: 0 0 40px rgba(67,160,71,.8), inset 0 1px 0 rgba(255,255,255,.3);
}
.pyr-letter-next {
  background: linear-gradient(135deg,#1E1B4B,#312E81);
  color: rgba(196,181,253,.5);
}
@keyframes pyrSpin {
  from { transform: rotateY(0deg) rotateX(-15deg); }
  to   { transform: rotateY(360deg) rotateX(-15deg); }
}
@keyframes pyrWobble {
  0%,100% { transform: rotateY(var(--pyr-angle)) rotateX(-15deg) scale(1); }
  50%     { transform: rotateY(var(--pyr-angle)) rotateX(-18deg) scale(1.04); }
}
.pyr-progress-row {
  display: flex; gap: 5px; justify-content: center; margin: 8px 0;
  flex-wrap: wrap;
}
.pyr-dot {
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fredoka One', cursive; font-size: .85rem;
  background: #E5E7EB; color: #9CA3AF;
  transition: all .3s cubic-bezier(.34,1.56,.64,1);
}
.pyr-dot.seen { background: var(--purple); color: #fff; transform: scale(1.15); }
.pyr-dot.current { background: var(--orange); color: #fff; transform: scale(1.25); box-shadow: 0 0 14px rgba(67,160,71,.6); }
.game-reveal-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:6px;
  padding:12px 18px;
  background:#FFF;
  border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.16);
  animation:pyrReveal .6s cubic-bezier(.34,1.56,.64,1);
}
.game-reveal-card--floating{
  position:fixed;
  left:50%;
  top:40%;
  transform:translate(-50%,-50%);
  z-index:10001;
  pointer-events:none;
}
.game-reveal-emoji{
  font-size:1.45rem;
  line-height:1;
}
.game-reveal-sentence{
  font-size:.85rem;
  color:#6B7280;
  line-height:1.35;
  margin-top:2px;
}
.game-reveal-sentence--pill{
  display:inline-flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:4px;
  max-width:min(92vw, 520px);
  margin-top:8px;
  padding:10px 16px;
  border-radius:18px;
  background:linear-gradient(180deg,#F5F0FF 0%, #EEE7FF 100%);
  border:1px solid rgba(139,92,246,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95);
  color:#7C3AED;
  font-weight:800;
  line-height:1.45;
}
.game-reveal-sentence-kw{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 8px;
  border-radius:8px;
  background:#8B5CF6;
  color:#FFF;
  font-weight:900;
  line-height:1.2;
  box-shadow:0 4px 10px rgba(139,92,246,.2);
}
.pyr-word-reveal {
  text-align: center; font-family: 'Fredoka One', cursive;
  font-size: clamp(1.6rem,7vw,3rem); letter-spacing: 4px;
  white-space:normal; word-break:keep-all; overflow-wrap:normal; hyphens:none;
  text-wrap:balance; line-height:1.06; margin:0 auto;
  background: linear-gradient(135deg,#43A047,#EC4899);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  padding: 4px 0; animation: pyrReveal .6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pyrReveal {
  0% { transform: scale(.5) rotateX(40deg); opacity: 0; }
  100% { transform: scale(1) rotateX(0); opacity: 1; }
}
/* Test area */
.pyr-test-box {
  background: #fff; border-radius: 20px; padding: 18px 16px;
  box-shadow: var(--shadow); margin-top: 10px; animation: pyrReveal .5s ease;
}
.pyr-test-prompt {
  text-align: center; font-size: .85rem; color: #6B7280; font-weight: 800;
  margin-bottom: 12px;
}
.pyr-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pyr-choice {
  padding: 12px 8px; border-radius: 14px;
  border: 2.5px solid #E5E7EB; background: #fff;
  font-family: 'Fredoka One', cursive; font-size: .95rem;
  cursor: pointer; text-align: center; color: #374151;
  transition: all .18s; -webkit-tap-highlight-color: transparent;
}
.pyr-choice:hover { border-color: var(--purple); background: #F5F3FF; }
.pyr-choice.correct { background: #DCFCE7; border-color: #22C55E; color: #15803D; }
.pyr-choice.wrong   { background: #FEE2E2; border-color: #EF4444; color: #DC2626; }
.pyr-type-row {
  display: flex; gap: 8px; margin-top: 8px;
}
.pyr-type-input {
  flex: 1; padding: 12px 14px; border-radius: 14px;
  border: 2.5px solid #E5E7EB; font-family: 'Fredoka One', cursive;
  font-size: 1.1rem; outline: none; text-align: center;
  letter-spacing: 3px; text-transform: lowercase;
  transition: border-color .2s;
}
.pyr-type-input:focus { border-color: var(--purple); }
.pyr-drag-row {
  display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 6px;
}
.pyr-tile {
  width: 42px; height: 48px; border-radius: 10px;
  background: linear-gradient(135deg,#C8E6C9,#DDD6FE);
  border: 2.5px solid #A78BFA;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fredoka One', cursive; font-size: 1.3rem;
  cursor: grab; color: #2E7D32;
  transition: all .15s cubic-bezier(.34,1.56,.64,1);
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.pyr-tile:active { cursor: grabbing; }
.pyr-tile:hover, .pyr-tile:active { transform: scale(1.15) translateY(-3px); background: linear-gradient(135deg,#43A047,#6D28D9); color: #fff; border-color: #43A047; }
.pyr-tile.used { opacity: .25; pointer-events: none; transform: none; }
.pyr-answer-slots {
  display: flex; flex-wrap: wrap; gap: 7px; justify-content: center;
  min-height: 56px; margin-top: 10px;
  padding: 8px; background: #F9FAFB; border-radius: 14px;
  border: 2px dashed #D1D5DB;
}
.pyr-slot {
  width: 42px; height: 48px; border-radius: 10px;
  background: linear-gradient(135deg,#43A047,#2E7D32);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fredoka One', cursive; font-size: 1.3rem; color: #fff;
  cursor: pointer; transition: all .15s;
  box-shadow: 0 3px 0 #2E7D32;
}
.pyr-slot:hover { transform: scale(1.1); background: linear-gradient(135deg,#EC4899,#C026D3); }
.pyr-slot-empty {
  width: 42px; height: 48px; border-radius: 10px;
  border: 2px dashed #C084FC; background: transparent;
  transition: all .2s;
}
.pyr-slot-empty.pyr-slot-droppable {
  background: rgba(167, 139, 250, 0.15);
  border-color: #7C3AED;
  border-style: solid;
}
.pyr-slot-empty.pyr-slot-wrong {
  animation: pyrSlotShake 0.4s ease;
  background: rgba(239, 68, 68, 0.12);
  border-color: #EF4444;
}
@keyframes pyrSlotShake {
  0%,100%{ transform: translateX(0); }
  25%{ transform: translateX(-6px); }
  75%{ transform: translateX(6px); }
}
.pyr-hud {
  display: flex; gap: 8px; margin-bottom: 10px;
}
.pyr-hud-card {
  background: #fff; border-radius: 14px; padding: 8px 12px;
  box-shadow: var(--shadow); flex: 1; text-align: center;
}
.pyr-mode-btns {
  display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap;
}
.pyr-mode-btn {
  flex: 1; padding: 8px 4px; border-radius: 12px;
  border: 2px solid #E5E7EB; background: #fff;
  font-family: 'Nunito', sans-serif; font-size: .78rem; font-weight: 800;
  cursor: pointer; color: #6B7280; text-align: center;
  transition: all .18s;
}
.pyr-mode-btn.active { border-color: var(--purple); background: #F5F3FF; color: var(--purple); }
/* ════════════════════════════════════════
   🥚 GOLDEN EGG GAME
   ════════════════════════════════════════ */
#eggTab { padding:0 0 40px; }

/* Two-col wrapper */
.egg-layout {
  display:flex; gap:12px; align-items:flex-start; margin-bottom:12px;
}
@media(max-width:480px){
  .egg-layout { flex-direction:column; }
  .egg-flashcard { min-height:auto!important; }
}

/* Scene container */
.egg-scene {
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,.18);
}
#eggSceneBg {
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none;
}

/* Flashcard */
.egg-flashcard {
  flex:1; min-width:0;
  background:linear-gradient(145deg,#FFFBEB,#DCEDC8,#FDE68A);
  border:3px solid #F59E0B;
  border-radius:20px;
  padding:16px 14px 12px;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:8px;
  min-height:220px;
  box-shadow:0 8px 28px rgba(245,158,11,.2), inset 0 1px 0 rgba(255,255,255,.8);
  position:relative; overflow:hidden;
}
.egg-flashcard::before {
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.5) 0%, transparent 70%);
  pointer-events:none;
}
.egg-fc-emoji {
  font-size:clamp(3.5rem,14vw,6rem);
  line-height:1;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.15));
  animation:fcEmojiBounce 2s ease-in-out infinite;
}
@keyframes fcEmojiBounce {
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%    { transform:translateY(-6px) rotate(3deg); }
}
.egg-fc-word {
  font-family:'Fredoka One',cursive;
  font-size:clamp(1.1rem,4vw,1.8rem);
  color:#92400E;
  letter-spacing:3px;
  text-shadow:0 2px 0 rgba(255,255,255,.7);
}
.egg-fc-label {
  font-size:.62rem; font-weight:800; color:#B45309;
  text-transform:uppercase; letter-spacing:1.5px; opacity:.75;
}
.egg-fc-letters {
  display:flex; gap:5px; flex-wrap:wrap; justify-content:center;
  min-height:40px; align-items:center;
}
.egg-fc-dot {
  width:clamp(18px,4vw,26px); height:clamp(18px,4vw,26px);
  border-radius:50%; background:#FDE68A;
  border:2px solid #F59E0B; opacity:.4;
}
.egg-fc-dot.filled {
  opacity:1; background:var(--purple);
  border-color:#43A047;
  animation:dotFill .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes dotFill {
  0%{ transform:scale(0); } 100%{ transform:scale(1); }
}

/* Nest bounce */
@keyframes nestBounce {
  0%,100%{ transform:translateY(0); }
  35%    { transform:translateY(-8px); }
  65%    { transform:translateY(3px); }
}

/* Egg — launched from right side of nest */
.egg-egg {
  position:absolute;
  width:clamp(24px,4.5vw,35px);
  height:clamp(30px,5.5vw,44px);
  left:50%; bottom:30%;
  transform:translateX(-50%);
  border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:radial-gradient(ellipse at 38% 28%, #FEFCE8, #FCD34D 42%, #D97706 78%, #92400E);
  box-shadow:0 4px 18px rgba(217,119,6,.5),
             inset 0 -4px 8px rgba(0,0,0,.14),
             inset 3px 3px 8px rgba(255,255,255,.65);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; z-index:12;
}
.egg-egg.launch {
  animation:eggLaunch var(--launch-dur,.88s) cubic-bezier(.18,.67,.35,1) forwards;
}
@keyframes eggLaunch {
  0%  { transform:translateX(-50%) translate(0,0) scale(.8) rotate(0deg); opacity:.6; }
  18% { transform:translateX(-50%) translate(8px,-30px) scale(1.06) rotate(8deg); opacity:1; }
  55% { transform:translateX(-50%) translate(14px,-110px) scale(1.14) rotate(18deg); }
  82% { transform:translateX(-50%) translate(10px,-140px) scale(1.07) rotate(14deg); }
  100%{ transform:translateX(-50%) translate(8px,-130px) scale(1) rotate(12deg); }
}

/* ── EGG CRACK SYSTEM ── */

/* The egg shell uses a jagged zigzag split line */
.egg-half-top {
  position:absolute; width:100%; left:0; top:0;
  height:52%;
  background:radial-gradient(ellipse at 38% 55%, #FEFCE8 0%, #FCD34D 45%, #D97706 85%, #92400E);
  border-radius:50% 50% 0 0 / 75% 75% 0 0;
  transform-origin:bottom center;
  /* Jagged bottom edge */
  clip-path: polygon(0 0, 100% 0, 100% 75%, 88% 55%, 76% 82%, 62% 50%, 50% 78%, 36% 48%, 22% 76%, 10% 52%, 0 70%);
  /* Crack lines painted via box-shadow trick */
}
.egg-half-bot {
  position:absolute; width:100%; left:0; bottom:0;
  height:52%;
  background:radial-gradient(ellipse at 38% 10%, #FCD34D 0%, #D97706 50%, #92400E 90%);
  border-radius:0 0 50% 50% / 0 0 65% 65%;
  transform-origin:top center;
  clip-path: polygon(0 30%, 10% 48%, 22% 24%, 36% 52%, 50% 22%, 62% 50%, 76% 18%, 88% 45%, 100% 25%, 100% 100%, 0 100%);
}

/* Crack lines on egg surface before breaking */
.egg-crack-line {
  position:absolute; pointer-events:none;
  background:#92400E; border-radius:2px;
  transform-origin:center;
  opacity:0;
  z-index:5;
}

/* Stage 1: cracks appear */
.egg-egg.pre-crack .egg-crack-line {
  animation: crackAppear 0.18s ease forwards;
}
@keyframes crackAppear {
  0%   { opacity:0; transform:scaleY(0); }
  100% { opacity:0.85; transform:scaleY(1); }
}

/* Stage 2: egg shudder just before crack */
.egg-egg.shudder {
  animation: eggShudder 0.22s ease forwards !important;
}
@keyframes eggShudder {
  0%,100% { transform:translateX(-50%) translate(8px,-130px) rotate(12deg); }
  25%     { transform:translateX(-50%) translate(4px,-133px) rotate(8deg) scale(1.06); }
  50%     { transform:translateX(-50%) translate(12px,-127px) rotate(16deg) scale(1.09); }
  75%     { transform:translateX(-50%) translate(5px,-132px) rotate(10deg) scale(1.06); }
}

/* Stage 3: shell pieces fly apart */
.egg-egg.cracking .egg-half-top {
  animation: shellTopFly 0.55s cubic-bezier(.2,0,.6,1) forwards;
}
.egg-egg.cracking .egg-half-bot {
  animation: shellBotFly 0.55s cubic-bezier(.2,0,.6,1) forwards;
}
@keyframes shellTopFly {
  0%   { transform:translateY(0) rotate(0deg) scale(1); opacity:1; }
  30%  { opacity:1; }
  100% { transform:translateY(-70px) translateX(-30px) rotate(-55deg) scale(0.7); opacity:0; }
}
@keyframes shellBotFly {
  0%   { transform:translateY(0) rotate(0deg) scale(1); opacity:1; }
  30%  { opacity:1; }
  100% { transform:translateY(50px) translateX(25px) rotate(40deg) scale(0.7); opacity:0; }
}

/* Flash burst at crack point */
.egg-burst {
  position:absolute;
  border-radius:50%;
  background:radial-gradient(circle, #FEF9C3 0%, #FCD34D 35%, #F59E0B 65%, transparent 100%);
  pointer-events:none;
  z-index:15;
  animation: burstFlash 0.45s ease-out forwards;
  left:50%; top:30%;
  transform:translate(-50%,-50%);
  width:20px; height:20px;
}
@keyframes burstFlash {
  0%   { transform:translate(-50%,-50%) scale(0); opacity:1; }
  40%  { transform:translate(-50%,-50%) scale(4); opacity:0.9; }
  100% { transform:translate(-50%,-50%) scale(7); opacity:0; }
}

/* Letter pop */
.egg-letter-pop {
  position:absolute;
  font-family:'Fredoka One',cursive;
  font-size:clamp(2.8rem,12vw,5.5rem);
  font-weight:900;
  color:#FEF9C3;
  text-shadow:
    0 0 30px #F59E0B,
    0 0 60px #FCD34D,
    0 4px 0 rgba(0,0,0,.6),
    0 0 8px rgba(255,255,255,.8);
  pointer-events:none; z-index:25;
  left:50%; bottom:30%;
  transform:translateX(-50%) translate(8px,-130px);
  animation:letterBurst .7s cubic-bezier(.17,.67,.35,1.3) forwards;
}
@keyframes letterBurst {
  0%   { transform:translateX(-50%) translate(8px,-130px) scale(0) rotate(-25deg); opacity:0; filter:blur(8px); }
  35%  { transform:translateX(-50%) translate(8px,-152px) scale(1.6) rotate(8deg);  opacity:1; filter:blur(0); }
  65%  { transform:translateX(-50%) translate(8px,-146px) scale(1.15) rotate(-3deg); }
  100% { transform:translateX(-50%) translate(8px,-140px) scale(1) rotate(0deg); opacity:1; }
}
.egg-letter-pop.fall {
  animation:letterFall .55s cubic-bezier(.55,.06,.68,.19) forwards !important;
}
@keyframes letterFall {
  0%   { opacity:1; }
  100% { transform:translateX(-50%) translate(8px,var(--fall-y,300%)) scale(.6) rotate(20deg); opacity:0; }
}


/* Sparkles */
.egg-sparkle {
  position:absolute; pointer-events:none;
  font-size:.9rem;
  animation:sparkFly .75s ease forwards; z-index:25;
}
@keyframes sparkFly {
  0%  { transform:translate(0,0) scale(1); opacity:1; }
  100%{ transform:translate(var(--sx),var(--sy)) scale(0); opacity:0; }
}

/* Collected letters */
.egg-collected {
  --egg-gap:clamp(3px,1.2vw,8px);
  --egg-box-w:clamp(32px,7vw,50px);
  --egg-box-h:clamp(40px,8vw,58px);
  --egg-font:clamp(1.3rem,5vw,2.4rem);
  display:flex; gap:var(--egg-gap);
  justify-content:center; align-items:flex-end;
  min-height:56px; flex-wrap:nowrap; margin:8px auto 4px; max-width:94vw;
}
.egg-collected.egg-collected-compact {
  --egg-gap:clamp(2px,0.9vw,6px);
  --egg-box-w:clamp(28px,6vw,42px);
  --egg-box-h:clamp(36px,7vw,50px);
  --egg-font:clamp(1.1rem,4.3vw,1.9rem);
}
.egg-collected.egg-collected-tight {
  --egg-box-w:clamp(26px,5.5vw,38px);
  --egg-box-h:clamp(34px,6.7vw,46px);
  --egg-font:clamp(1rem,4vw,1.7rem);
}
.egg-col-letter {
  font-family:'Fredoka One',cursive;
  font-size:var(--egg-font);
  color:var(--purple);
  background:#F5F3FF;
  border:3px solid #DDD6FE;
  border-radius:12px;
  width:var(--egg-box-w);
  height:var(--egg-box-h);
  display:flex; align-items:center; justify-content:center;
  animation:letterLand .4s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 4px 0 #A78BFA;
}
@keyframes letterLand {
  0%  { transform:scale(0) translateY(-20px); }
  70% { transform:scale(1.18) translateY(3px); }
  100%{ transform:scale(1) translateY(0); }
}

/* Reveal box */
.egg-reveal-box {
  background:#FFF;
  border-radius:14px;
  padding:12px 18px;
  text-align:center; margin:10px 0;
  box-shadow:0 8px 24px rgba(0,0,0,.16);
  animation:pyrReveal .6s cubic-bezier(.34,1.56,.64,1);
}
.egg-emoji {
  font-size:clamp(4rem,18vw,8rem);
  display:block;
  animation:eggEmojiPop .7s cubic-bezier(.34,1.56,.64,1);
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.18));
}
.egg-flashcard-image-wrap {
  width:min(100%, 340px);
  margin:0 auto 10px;
  border-radius:18px;
  overflow:hidden;
  background:#fff8dc;
  border:3px solid rgba(245,158,11,.28);
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}
.egg-flashcard-image {
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  background:#fff;
}
.egg-emoji-fallback {
  margin-bottom:6px;
}
@keyframes eggEmojiPop {
  0%  { transform:scale(0) rotate(-20deg); }
  70% { transform:scale(1.2) rotate(5deg); }
  100%{ transform:scale(1) rotate(0); }
}
.egg-word-display {
  font-family:'Fredoka One',cursive;
  font-size:var(--game-word-size, clamp(1.6rem,7vw,3rem));
  letter-spacing:var(--game-word-spacing, 4px);
  white-space:nowrap; word-break:normal; overflow-wrap:normal; hyphens:none;
  text-wrap:nowrap; line-height:1.06; margin:4px auto 0;
  max-width:94vw; padding:0 8px;
  background:linear-gradient(135deg,#43A047,#EC4899);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.egg-sent-display {
  font-size:.85rem;
  color:#6B7280;
  margin-top:2px;
  line-height:1.35;
}

/* ── Space Shooter ── */
#spaceTab { background:#000; touch-action:none; }
#spaceCanvas { background:#000; cursor:crosshair; display:block; }
.space-back-btn {
  position:absolute; top:10px; left:10px; z-index:510;
  background:rgba(255,255,255,0.18); border:2px solid rgba(255,255,255,0.3);
  color:#fff; font-size:15px; padding:8px 16px; border-radius:10px;
  cursor:pointer; font-family:Nunito,sans-serif; font-weight:700;
  backdrop-filter:blur(4px); transition:background .2s,transform .1s;
  touch-action:manipulation;
}
.space-back-btn:hover { background:rgba(255,255,255,0.3); }
.space-back-btn:active { transform:scale(0.95); }
@media(max-width:600px){
  .mtabs{flex-wrap:wrap;}
  .mtab{flex:1 1 calc(33.333% - 6px);}
  .pyr-word-reveal{
    max-width:94vw;
    letter-spacing:.08em;
  }
  .swa-word,
  .egg-word-display{
    max-width:94vw;
  }
}
@media (max-width:480px) {
  .space-back-btn { font-size:13px; padding:10px 14px; top:8px; left:6px; border-radius:8px; min-height:44px; }
}
@media (min-width:481px) and (max-width:1024px) {
  .space-back-btn { font-size:16px; padding:10px 20px; min-height:48px; }
}


/* ══════════════════════════════════════════════════════════
   响应式断点 — 手册规范 (mobile/tablet/desktop)
   ══════════════════════════════════════════════════════════ */

/* 手机 (≤480px) */
@media (max-width:480px){
  .wrap        { padding:10px 10px 60px; }
  .title       { font-size:clamp(1.4rem,6vw,2rem); }
  .top-tab     { font-size:0.70rem; padding:8px 4px; }
  .modal-box   { width:95vw; padding:16px; }
  #spaceCanvas { touch-action:none; }
  .games-panel { left:-60px; }
  .lesson-num-grid{grid-template-columns:repeat(5,1fr);gap:3px;padding:6px 4px;}
  .lesson-num-btn{font-size:.68rem;border-radius:6px;border-width:1.5px;padding:6px 1px;}
  .top-tab{min-height:48px;padding:8px 2px 6px;}
  .tt-icon{font-size:1.1rem;}
  .tt-text{font-size:.65rem;}
  .game-bar{gap:4px;padding:4px;}
  .game-tab{min-height:42px;padding:6px 2px 5px;}
  .gt-icon{font-size:1rem;}
  .gt-text{font-size:.58rem;}
  .ls-level-bar{gap:4px;padding:0 0 10px;}
  .ls-level-tab{padding:8px 4px;}
  .ls-lt-label{font-size:.9rem;}
  .ls-lt-desc{font-size:.7rem;}
  .ls-lt-pct{font-size:.7rem;}
  .lesson-level-tabs{gap:4px;padding:6px 4px 2px;}
  .lesson-level-tab{padding:6px 10px;min-width:54px;}
  .llt-name{font-size:.65rem;}
  .llt-sub{font-size:.52rem;}
  .ls-grid{gap:6px;}
  .ls-num{padding:14px 6px;border-radius:14px;min-height:60px;}
  .ls-num-label{font-size:1.25rem;}
  .ls-num-title{font-size:.8rem;}
  .ls-hub{padding:14px 12px;}
  .ls-hub-btns{grid-template-columns:repeat(2,1fr);gap:8px;}
  .ls-hub-btns-4{grid-template-columns:repeat(2,1fr);gap:6px;}
  .ls-hub-btn{padding:14px 6px;font-size:.78rem;min-height:72px;}
  .ls-hub-icon{font-size:1.5rem;}
  .ls-user-grid{grid-template-columns:repeat(2,1fr);}
  .ls-create-btn{padding:14px;font-size:.85rem;}
  .ls-create-hint{display:none;}
  .cbtn{padding:16px 10px;font-size:1.15rem;min-height:52px;}
  .cgrid{gap:10px;}
  .mtab{min-height:44px;padding:8px 3px;font-size:.7rem;}
  /* Dashboard mobile */
  .dash-stats{grid-template-columns:repeat(4,1fr);gap:6px;}
  .dash-stat{padding:10px 4px;border-radius:14px;}
  .dash-stat-icon{font-size:1.2rem;}
  .dash-stat-val{font-size:1rem;}
  .dash-stat-lbl{font-size:.55rem;}
  .dash-cta{padding:18px 16px;gap:12px;}
  .dash-cta-icon{font-size:2rem;}
  .dash-cta-main{font-size:1.2rem;}
  .track-switch-row{gap:8px;margin-bottom:10px;}
  .track-switch-label{font-size:.72rem;}
  .track-switch-picker{min-width:100%;padding:9px 12px;padding-right:34px;}
  .dash-cards{gap:8px;}
  .dash-card{padding:16px 8px 14px;}
  .dash-card-emoji{font-size:1.8rem;}
  .dash-card-title{font-size:.82rem;}
  .dash-errors-head{flex-direction:column;}
  .dash-errors-actions{width:100%;}
  .dash-errors-btn{flex:1;text-align:center;}
  .dash-error-item{flex-direction:column;}
  .dash-error-actions{width:100%;}
  .dash-error-cta{width:100%;}
  .dash-report-head{flex-direction:column;}
  .dash-report-actions{width:100%;}
  .dash-report-top{grid-template-columns:repeat(2,minmax(0,1fr));}
  .dash-report-grid{grid-template-columns:1fr;}
  .dash-report-trend{gap:4px;min-height:150px;}
  .dash-report-day-bar{height:90px;}
  .dash-report-mode-row,.dash-report-delay-row,.dash-report-word-row{flex-direction:column;}
  .dash-report-chips,.dash-report-word-score{justify-content:flex-start;align-items:flex-start;}
  .dash-games-grid{grid-template-columns:repeat(2,1fr);gap:8px;}
  .dash-game{padding:12px 6px;}
  .dash-lcard{width:100px;}
}

/* iPad mini / small tablet (481px–767px) */
@media (min-width:481px) and (max-width:767px){
  .wrap    { max-width:620px; padding:14px 16px 50px; }
  .top-tab { font-size:0.76rem; }
  .modal-box { width:90vw; }
}

/* iPad / large tablet (768px–1024px) */
@media (min-width:768px) and (max-width:1024px){
  .wrap    { max-width:720px; padding:16px 20px 60px; }
  .top-tab { font-size:0.82rem; padding:10px 10px; }
  .modal-box { width:600px; max-width:90vw; }
  #spaceCanvas { max-height:70vh; }
  /* Two-column lesson cards on iPad */
  .lesson-cards-group { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .lesson-card { margin-bottom:0; }
  /* Larger touch targets */
  .lbtn-sm { padding:9px 16px; font-size:.80rem; }
  .lesson-group-tab { padding:8px 14px; font-size:.78rem; }
  /* Gem game bigger cells */
  .gem-cell { font-size:1.4rem !important; }
}

/* 电脑 (>1024px) */
@media (min-width:1025px){
  .wrap    { max-width:820px; }
  .top-tab { font-size:0.85rem; padding:10px 12px; }
}

/* 横屏手机 */
@media (max-height:500px) and (orientation:landscape){
  #spaceCanvas { height:100vw; }
  .wrap        { padding-bottom:20px; }
}

/* ══════════════════════════════════════════════════════════
   用户认证 UI 样式
   ══════════════════════════════════════════════════════════ */
.auth-bar{display:flex;align-items:center;justify-content:center;gap:8px;margin:6px 0 2px;flex-wrap:wrap;}
.auth-btn{padding:7px 16px;border:2px solid var(--orange);border-radius:10px;background:transparent;
  color:var(--orange);font-family:'Nunito',sans-serif;font-size:.80rem;font-weight:800;cursor:pointer;transition:all .2s;line-height:1;}
.auth-btn:hover{background:var(--orange);color:#fff;}
.auth-btn-user{background:var(--orange);color:#fff;position:relative;font-size:.80rem;padding:7px 16px;}
.credits-badge{padding:7px 16px;border-radius:10px;font-size:.80rem;font-weight:800;line-height:1;}
.credits-badge.trial{background:#fef9c3;color:#854d0e;}
.credits-badge.ok   {background:#dcfce7;color:#166534;}
.credits-badge.low  {background:#ffedd5;color:#9a3412;}
.credits-badge.empty{background:#fee2e2;color:#991b1b;}
.auth-field{margin-bottom:14px;}
.auth-field label{display:block;font-size:.82rem;font-weight:700;color:#666;margin-bottom:5px;}
.auth-field input{width:100%;padding:11px 14px;border:2px solid #e0e0e0;border-radius:10px;
  font-size:.95rem;outline:none;font-family:'Nunito',sans-serif;transition:border .2s;}
.auth-field input:focus{border-color:var(--orange);}
.auth-submit{width:100%;padding:13px;border:none;border-radius:10px;background:var(--orange);
  color:#fff;font-family:'Nunito',sans-serif;font-size:1rem;font-weight:800;cursor:pointer;transition:opacity .2s;}
.auth-submit:hover{opacity:.88;}
.auth-submit:disabled{opacity:.5;cursor:not-allowed;}
.auth-err{color:#ef4444;font-size:.82rem;min-height:18px;margin-bottom:8px;text-align:center;}
.auth-modal-bg{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);z-index:6000;
  align-items:center;justify-content:center;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.auth-modal-bg.open{display:flex;}
.auth-modal-box{background:#fff;border-radius:20px;padding:32px;width:360px;max-width:95vw;
  max-height:90vh;max-height:90dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  box-shadow:0 24px 60px rgba(0,0,0,.25);}
.auth-modal-title{text-align:center;font-family:'Fredoka One',cursive;font-size:1.6rem;margin-bottom:6px;}
.auth-modal-sub{text-align:center;font-size:.82rem;color:#888;margin-bottom:20px;}
.auth-switch{text-align:center;font-size:.85rem;margin-top:14px;color:#888;display:flex;flex-direction:column;align-items:center;gap:8px;}
.auth-secondary-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  min-width:180px;
  padding:10px 18px;
  border:2px solid rgba(76,175,80,.28);
  border-radius:14px;
  background:#F5FFF4;
  color:var(--orange);
  font:inherit;
  font-weight:800;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  box-shadow:0 4px 16px rgba(76,175,80,.08);
}
.auth-secondary-btn:hover{background:#EEFBEC;border-color:rgba(76,175,80,.4);}
.auth-secondary-btn:active{transform:scale(.98);}
.auth-secondary-btn:focus-visible{
  outline:2px solid rgba(76,175,80,.22);
  outline-offset:2px;
}
.user-menu-wrap{position:relative;}
.user-menu{display:none;position:absolute;right:0;top:110%;background:#fff;border-radius:10px;
  box-shadow:0 8px 32px rgba(0,0,0,.15);min-width:160px;z-index:300;padding:6px;}
.user-menu.open{display:block;}
.umenu-item{padding:10px 14px;border-radius:8px;cursor:pointer;font-size:.88rem;font-weight:700;transition:background .15s;}
.umenu-item:hover{background:#FFF8E7;}
.umenu-item.danger{color:#ef4444;}
.lm-modal-bg{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);z-index:2000;align-items:center;justify-content:center;}
.lm-modal-bg.open{display:flex;}
.lm-modal-box{background:#fff;border-radius:20px;padding:28px;width:500px;max-width:95vw;max-height:85vh;overflow-y:auto;box-shadow:0 24px 60px rgba(0,0,0,.25);}
.lm-title{font-family:'Fredoka One',cursive;color:var(--orange);font-size:1.4rem;margin-bottom:16px;}
/* Game Scope Selector */
.gs-scope-btn{display:block;width:100%;padding:12px 16px;border:2px solid #E0E7FF;border-radius:12px;background:#F8FAFF;cursor:pointer;font-family:'Nunito',sans-serif;font-weight:800;font-size:.92rem;text-align:left;transition:transform .12s,box-shadow .12s;margin-bottom:6px;}
.gs-scope-btn:hover{transform:scale(1.02);box-shadow:0 4px 12px rgba(0,0,0,.1);}
.gs-scope-btn:active{transform:scale(.98);}
.gs-scope-btn .gs-sub{display:block;font-size:.72rem;color:#888;font-weight:600;margin-top:2px;}
.gs-scope-btn.gs-all{border-color:#6366F1;background:#EEF2FF;font-size:1rem;padding:14px 16px;}
.gs-level-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.gs-level-grid .gs-scope-btn{font-size:.84rem;padding:10px 12px;}
.gs-lesson-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;}
.gs-lesson-btn{padding:6px 0;border:1.5px solid #E5E7EB;border-radius:8px;background:#fff;cursor:pointer;font-family:'Nunito',sans-serif;font-weight:800;font-size:.78rem;text-align:center;transition:transform .1s,background .15s;color:#374151;}
.gs-lesson-btn:hover{background:#EEF2FF;border-color:#818CF8;transform:scale(1.08);}
.gs-user-grid{display:flex;flex-wrap:wrap;gap:6px;}
.gs-user-lesson-btn{min-width:60px;max-width:150px;padding:6px 12px;font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-color:#FDBA74;background:#FFF7ED;color:#C2410C;}
.gs-user-lesson-btn:hover{background:#FFEDD5;border-color:#F97316;}
@media(max-width:480px){.gs-lesson-grid{grid-template-columns:repeat(5,1fr);gap:4px;}.gs-level-grid{grid-template-columns:1fr;}}
.lm-create-row{display:flex;gap:8px;margin-bottom:16px;}
.lm-create-row input{flex:1;padding:10px 14px;border:2px solid #e0e0e0;border-radius:10px;font-size:.9rem;outline:none;font-family:'Nunito',sans-serif;}
.lm-create-row input:focus{border-color:var(--orange);}
.lm-create-row button{background:var(--orange);color:#fff;border:none;border-radius:10px;padding:10px 18px;cursor:pointer;font-weight:800;font-family:'Nunito',sans-serif;}
.lm-item{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border:1.5px solid #f0f0f0;border-radius:10px;margin-bottom:6px;font-size:.9rem;}
.lm-item-btns{display:flex;gap:6px;}
.lm-item-btn{padding:5px 10px;border:1.5px solid #ddd;border-radius:7px;background:#fff;cursor:pointer;font-size:.78rem;font-weight:700;font-family:'Nunito',sans-serif;}
.lm-item-btn.del{color:#ef4444;border-color:#fee2e2;}
.announce-banner{display:none;background:linear-gradient(135deg,#43A047,#2E7D32);color:#fff;
  padding:10px 16px;font-size:.83rem;border-radius:10px;margin-bottom:10px;position:relative;}
.announce-close{position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;font-size:1.1rem;opacity:.8;}
.announce-close:hover{opacity:1;}
/* ══════════════════════════════════════════════════════════════
   每课游戏菜单 + 登录墙
   ══════════════════════════════════════════════════════════════ */
#authWall {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, #43A047, #2E7D32, #f093fb);
  z-index: 5000;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
}
.lgm-btn {
  transition: transform .15s, box-shadow .15s;
}
.lgm-btn:active {
  transform: scale(0.95);
}

/* ── Quiz sub-view: back button bar ── */
.quiz-back-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 2px 0;
}
.quiz-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border: 2px solid #E5E7EB;
  border-radius: 12px;
  background: #fff;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: .82rem;
  color: #6B7280;
  cursor: pointer;
  transition: all .15s;
}
.quiz-back-btn:hover {
  background: #F3F4F6;
  color: #374151;
  border-color: #D1D5DB;
}
.quiz-back-btn:active {
  transform: scale(0.96);
}
.quiz-back-arrow {
  font-size: 1.05rem;
}
.quiz-back-lesson-name {
  font-family: 'Fredoka One', cursive;
  font-size: .9rem;
  color: var(--orange);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.quiz-lesson-nav {
  display: flex;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}
.quiz-nav-arrow {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 2px solid #E5E7EB;
  background: #fff;
  cursor: pointer;
  font-size: .85rem;
  color: #6B7280;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  padding: 0;
  font-family: inherit;
}
.quiz-nav-arrow:hover { background: #F3F4F6; color: #374151; border-color: #D1D5DB; }
.quiz-nav-arrow:active { transform: scale(0.92); }
.quiz-nav-arrow:disabled { opacity: 0.3; cursor: default; pointer-events: none; }

/* ══ Payment Modal ══ */
.pay-modal-bg {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.45);
  z-index:10000; align-items:center; justify-content:center;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.pay-modal-bg.open { display:flex; }
.pay-modal {
  background:#fff; border-radius:20px; width:92%; max-width:420px;
  max-height:90vh; overflow-y:auto; position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,.2); animation:paySlideUp .3s ease;
}
@keyframes paySlideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
.pay-modal-close {
  position:absolute; top:12px; right:14px; background:none; border:none;
  font-size:1.6rem; color:#9CA3AF; cursor:pointer; line-height:1; z-index:1;
}
.pay-modal-close:hover { color:#374151; }
.pay-modal-header { text-align:center; padding:24px 20px 8px; }
.pay-modal-title {
  font-family:'Fredoka One',cursive; font-size:1.3rem; color:#2E7D32;
}
.pay-modal-subtitle {
  font-size:.78rem; color:#9CA3AF; margin-top:4px;
}
.pay-modal-price {
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 20px 16px;
}
.pay-price-tag {
  background:linear-gradient(135deg,#4CAF50,#66BB6A); color:#fff;
  font-family:'Fredoka One',cursive; font-size:1.5rem; padding:6px 18px;
  border-radius:14px; box-shadow:0 3px 12px rgba(76,175,80,.3);
}
.pay-price-tag small { font-size:.7rem; opacity:.85; }
.pay-price-cny {
  background:linear-gradient(135deg,#07C160,#38D96A);
}
.pay-price-sep { color:#bbb; font-weight:700; font-size:.85rem; }
.pay-tabs {
  display:flex; gap:0; margin:0 20px; border-radius:12px;
  overflow:hidden; border:2px solid #E5E7EB;
}
.pay-tab {
  flex:1; padding:10px 0; border:none; background:#F9FAFB;
  font-family:'Nunito',sans-serif; font-weight:800; font-size:.85rem;
  color:#6B7280; cursor:pointer; transition:all .2s;
}
.pay-tab.active { background:#2E7D32; color:#fff; }
.pay-tab:not(.active):hover { background:#F3F4F6; }
.pay-tab-content { display:none; padding:16px 20px; }
.pay-tab-content.active { display:block; }
.pay-qr-wrap { text-align:center; }
.pay-qr-img {
  width:220px; height:auto; border-radius:12px;
  box-shadow:0 4px 16px rgba(0,0,0,.1);
}
.pay-wechat-hint {
  margin-top:10px; font-size:.78rem; color:#07C160; font-weight:700;
}
.pay-paynow-info { text-align:center; }
.pay-pn-icon { font-size:2.2rem; margin-bottom:4px; }
.pay-pn-label { font-size:.8rem; color:#9CA3AF; font-weight:700; margin-bottom:8px; }
.pay-pn-number {
  font-family:'Fredoka One',cursive; font-size:2rem; color:#1A237E;
  letter-spacing:3px; margin-bottom:10px;
}
.pay-copy-btn {
  background:#EEF2FF; border:2px solid #C7D2FE; border-radius:10px;
  padding:8px 20px; font-family:'Nunito',sans-serif; font-weight:800;
  font-size:.82rem; color:#4338CA; cursor:pointer; transition:all .15s;
}
.pay-copy-btn:hover { background:#C7D2FE; }
.pay-copy-btn:active { transform:scale(.95); }
.pay-pn-steps {
  text-align:left; margin-top:16px; background:#F9FAFB;
  border-radius:12px; padding:14px 16px;
}
.pay-step {
  display:flex; align-items:flex-start; gap:8px;
  font-size:.78rem; color:#4B5563; line-height:1.5; margin-bottom:6px;
}
.pay-step:last-child { margin-bottom:0; }
.pay-step-num {
  background:#2E7D32; color:#fff; width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  font-size:.65rem; font-weight:800;
}
.pay-modal-footer {
  padding:12px 20px 20px; text-align:center;
}
.pay-note {
  font-size:.75rem; color:#9CA3AF; background:#F9FAFB;
  border-radius:10px; padding:10px 14px;
}
/* Pay button pulse on nav */
#ttPay .tt-icon { animation:payPulse 2s ease-in-out infinite; }
@keyframes payPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }

/* ── Quiz Advanced Panel Toggle ────────────────────── */
.quiz-adv-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 10px 2px;
}
.quiz-adv-mini {
  font-size:.78rem; font-weight:700; color:#6B7280;
  font-family:'Nunito',sans-serif;
}
.quiz-adv-toggle {
  background:#F3F4F6; border:2px solid #E5E7EB; border-radius:20px; cursor:pointer;
  font-size:.78rem; padding:4px 14px; transition:all .2s;
  color:#6B7280; font-weight:700; font-family:'Nunito',sans-serif;
}
.quiz-adv-toggle:active { transform:scale(.95); }
.quiz-adv-toggle.open { background:#E8F5E9; border-color:#81C784; color:#2E7D32; }
.quiz-adv-panel { display:none !important; }
.quiz-adv-panel.show { display:flex !important; }

/* ── Audio Recovery Banner ─────────────────────────── */
.audio-recovery-banner {
  position:fixed; bottom:80px; left:50%; transform:translateX(-50%);
  z-index:9999; background:#EF4444; color:#fff;
  padding:10px 24px; border-radius:24px;
  font-family:'Nunito',sans-serif; font-size:.85rem; font-weight:700;
  box-shadow:0 4px 16px rgba(0,0,0,.25);
  cursor:pointer; animation:audioRecoveryPulse 1.5s ease-in-out infinite;
  white-space:nowrap; max-width:90vw; text-align:center;
}
@keyframes audioRecoveryPulse {
  0%,100%{ transform:translateX(-50%) scale(1); }
  50%{ transform:translateX(-50%) scale(1.04); }
}

/* ── Onboarding Carousel ────────────────────────────── */
.onboarding-bg {
  display:none; position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,.6); z-index:6500;
  align-items:center; justify-content:center;
}
.onboarding-bg.open { display:flex; }
.onboarding-box {
  background:#fff; border-radius:22px; width:380px; max-width:92vw;
  box-shadow:0 24px 60px rgba(0,0,0,.3); overflow:hidden;
  position:relative;
}
.onboarding-viewport {
  overflow:hidden; position:relative;
}
.onboarding-track {
  display:flex; transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.onboarding-slide {
  min-width:100%; box-sizing:border-box; padding:36px 28px 24px;
  text-align:center;
}
.onboarding-icon {
  font-size:3.2rem; margin-bottom:12px; line-height:1;
}
.onboarding-title {
  font-family:'Fredoka One',cursive; font-size:1.35rem;
  color:#2E7D32; margin-bottom:10px;
}
.onboarding-desc {
  font-family:'Nunito',sans-serif; font-size:.88rem;
  color:#555; line-height:1.6; margin-bottom:0;
}
.onboarding-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px 24px;
}
.onboarding-dots {
  display:flex; gap:8px;
}
.onboarding-dot {
  width:9px; height:9px; border-radius:50%;
  background:#D1D5DB; transition:background .25s;
}
.onboarding-dot.active {
  background:#43A047; width:22px; border-radius:5px;
}
.onboarding-btn {
  font-family:'Nunito',sans-serif; font-weight:800;
  font-size:.9rem; border:none; border-radius:12px;
  padding:10px 24px; cursor:pointer; transition:all .2s;
  background:#43A047; color:#fff;
  box-shadow:0 4px 14px rgba(67,160,71,.35);
}
.onboarding-btn:hover { background:#388E3C; transform:translateY(-1px); }
.onboarding-skip {
  font-family:'Nunito',sans-serif; font-size:.82rem;
  color:#9CA3AF; background:none; border:none;
  cursor:pointer; padding:8px 4px;
}
.onboarding-skip:hover { color:#666; }
@media (max-width:480px) {
  .onboarding-box { max-width:96vw; border-radius:18px; }
  .onboarding-slide { padding:28px 20px 18px; }
  .onboarding-title { font-size:1.15rem; }
  .onboarding-desc { font-size:.82rem; }
  .onboarding-footer { padding:12px 20px 20px; }
}