/* ── ROOT ──
   Warm dark study surface: walnut and gold, matching the academy family.
   Every text colour below is verified at 4.5:1 or better against --bg, --card
   and --card-hover; --border reaches 3:1 so controls stay identifiable. */
:root {
  --bg:#1A1008; --card:#2C1E10; --card-hover:#3A2817; --border:#8B7A66;
  --text:#F3EBDD; --muted:#C9B8A4; --accent:#C9A84C;
  --correct:#9BC4B0; --wrong:#E08977; --blue:#E8B87A;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);min-height:100vh}

/* ── HEADER ── */
.header{padding:1.25rem 2rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:1rem;background:rgba(26,16,8,.96);backdrop-filter:blur(10px);position:sticky;top:0;z-index:50}
.flag{display:flex;flex-direction:column;width:5px;height:44px;border-radius:3px;overflow:hidden;flex-shrink:0}
.flag div{flex:1}
.flag .f1{background:#1a1a1a}.flag .f2{background:#D98C6A}.flag .f3{background:#C9A84C}
.header-text h1{font-family:var(--font-display);font-size:1.6rem;font-weight:700}
.header-text p{font-size:.78rem;color:var(--muted);margin-top:1px;letter-spacing:.04em;text-transform:uppercase}
.header-right{margin-left:auto;display:flex;align-items:center;gap:.75rem}
.level-badge{background:linear-gradient(135deg,#A87B1A,#C9A84C);color:#000;font-weight:700;font-size:.75rem;padding:.3rem .7rem;border-radius:20px;letter-spacing:.06em}
.back-btn{display:none;align-items:center;gap:.4rem;background:var(--card);border:1px solid var(--border);color:var(--text);padding:.45rem .9rem;border-radius:8px;cursor:pointer;font-family:var(--font-body);font-size:.82rem;transition:background .15s}
.back-btn:hover{background:var(--card-hover)}
.back-btn.visible{display:flex}

/* ── SCREENS ── */
.screen{display:none;padding:2rem;max-width:84rem;margin:0 auto;animation:fadeIn .3s ease}
.screen.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ── TOPIC SCREEN ── */
.screen-heading{font-family:var(--font-display);font-size:2rem;font-weight:700;margin-bottom:.4rem}
.screen-sub{color:var(--muted);font-size:.88rem;margin-bottom:2rem;line-height:1.6}
.topics-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1rem}
.topic-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1.5rem;cursor:pointer;transition:background-color .2s,border-color .2s,transform .2s,box-shadow .2s;position:relative;overflow:hidden}
.topic-card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#1a1a1a 33%,#D98C6A 33% 66%,#C9A84C 66%);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.topic-card:hover{background:var(--card-hover);transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.4)}
.topic-card:hover::after{transform:scaleX(1)}
.topic-icon{font-size:2.2rem;margin-bottom:.75rem;line-height:1}
.topic-num{font-size:.7rem;color:#C9A84C;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.25rem}
.topic-title{font-family:var(--font-display);font-size:1.1rem;font-weight:600;margin-bottom:.25rem}
.topic-sub{font-size:.8rem;color:var(--accent);font-weight:500;margin-bottom:.5rem}
.topic-desc{font-size:.82rem;color:var(--muted);line-height:1.55}
.topic-meta{display:flex;gap:.5rem;margin-top:.9rem;flex-wrap:wrap}
.topic-tag{font-size:.72rem;background:rgba(255,255,255,.05);border:1px solid var(--border);padding:.18rem .5rem;border-radius:5px;color:var(--muted)}

/* ── TYPE SELECT ── */
.breadcrumb{font-size:.8rem;color:var(--muted);margin-bottom:.6rem}
.breadcrumb em{color:var(--accent);font-style:normal}
.type-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;max-width:580px;margin-top:1.5rem}
.type-card{background:var(--card);border:2px solid var(--border);border-radius:14px;padding:2rem 1.5rem;cursor:pointer;transition:background-color .2s,border-color .2s,transform .2s,box-shadow .2s;text-align:center}
.type-card:hover{border-color:var(--accent);background:var(--card-hover);transform:translateY(-2px)}
.type-emoji{font-size:2.8rem;margin-bottom:.8rem}
.type-name{font-family:var(--font-display);font-size:1.2rem;font-weight:600;margin-bottom:.4rem}
.type-desc{font-size:.82rem;color:var(--muted);line-height:1.5}

/* ── EXERCISE SCREEN ── */
.ex-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.25rem;flex-wrap:wrap}
.ex-info{flex:1;min-width:200px}
.ex-title{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.4rem}
.progress-bar-wrap{height:6px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,#D98C6A,#C9A84C);border-radius:3px;transition:width .28s ease}
.progress-text{font-size:.75rem;color:var(--muted);margin-top:.3rem;display:flex;justify-content:space-between}
.score-box{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:.5rem 1rem;font-size:.82rem;white-space:nowrap;text-align:center}
.score-box strong{color:var(--accent);font-size:1rem}

/* ── RULE CARD ── */
.rule-card{display:none;background:#241708;border:1px solid #5A4330;border-left:4px solid #C9A84C;border-radius:12px;padding:1rem 1.25rem;margin-bottom:1rem;font-size:.87rem;line-height:1.7;color:#E8DCCB;animation:fadeIn .2s ease}
.rule-card.open{display:block}
.rule-card-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:#C9A84C;font-weight:700;margin-bottom:.5rem}
.rule-card strong{color:#FFFBF5}
.rule-card em{color:#E8B87A;font-style:normal;font-weight:600}
.btn-rule-active{background:rgba(201,168,76,.2)!important;border-color:rgba(201,168,76,.5)!important;color:#C9A84C!important}

/* ── VOCAB BAR ── */
.vocab-bar{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1rem 1.25rem;margin-bottom:1rem}
.vocab-bar-title{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:.6rem}
.vocab-pills{display:flex;flex-wrap:wrap;gap:.5rem}
.vocab-pill{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:20px;padding:.3rem .8rem;font-size:.82rem;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s,transform .15s;position:relative}
.vocab-pill:hover,.vocab-pill.active{background:rgba(201,168,76,.1);border-color:rgba(201,168,76,.4);color:var(--accent)}
.vp-tip{display:none;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#1A1008;border:1.5px solid #C9A84C;border-radius:8px;padding:.35rem .7rem;font-size:.78rem;color:#C9A84C;white-space:nowrap;z-index:300;pointer-events:none}
.vocab-pill:hover .vp-tip,.vocab-pill.active .vp-tip{display:block}

/* ── QUESTION CARD ── */
.q-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:2rem;margin-bottom:1.25rem}
.q-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}
.q-label span{background:#D98C6A;color:#fff;font-size:.68rem;padding:.15rem .45rem;border-radius:4px}
.q-text{font-size:1.15rem;line-height:1.75;margin-bottom:1.5rem;color:var(--text)}

/* ── CLICKABLE WORDS ── */
.cw{cursor:pointer;border-bottom:1px dashed rgba(201,168,76,.45);border-radius:2px;transition:color .1s,border-color .1s,background .1s;display:inline}
.cw:hover{color:#C9A84C;border-color:#C9A84C}
.cw.cw-active{color:#C9A84C;background:rgba(201,168,76,.12);border-color:#C9A84C;border-radius:3px}

/* ── FLOATING WORD TOOLTIP ── */
#wordTooltip{
  position:fixed;
  background:#1A1008;
  border:2px solid #C9A84C;
  border-radius:12px;
  padding:.7rem 1.1rem .55rem;
  z-index:99999;
  pointer-events:none;
  display:none;
  max-width:300px;
  min-width:140px;
  box-shadow:0 8px 40px rgba(0,0,0,.95),0 0 0 1px rgba(201,168,76,.3);
  visibility:hidden;
}
#wordTooltip.wt-show{display:block}
#wordTooltip.wt-visible{visibility:visible}
.wt-word{font-size:.95rem;font-weight:700;color:#C9A84C;margin-bottom:.25rem;font-family:var(--font-display)}
.wt-tr{font-size:.88rem;color:#ffffff;line-height:1.55;font-weight:400}
.wt-arrow{font-size:.65rem;color:#8B7A66;margin-top:.2rem}

/* ── MCQ OPTIONS ── */
.mcq-opts{display:grid;gap:.7rem}
.mcq-opt{background:rgba(255,255,255,.03);border:2px solid var(--border);border-radius:10px;padding:.9rem 1.1rem;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s,transform .15s;display:flex;align-items:center;gap:.9rem;font-size:.95rem;color:var(--text);text-align:left;width:100%}
.mcq-opt:hover:not(.locked){border-color:var(--blue);background:rgba(232,184,122,.07)}
.mcq-opt.sel-correct{border-color:var(--correct)!important;background:rgba(155,196,176,.1)!important}
.mcq-opt.sel-wrong{border-color:var(--wrong)!important;background:rgba(255,138,122,.1)!important}
.mcq-opt.show-correct{border-color:var(--correct)!important;background:rgba(155,196,176,.07)!important}
.mcq-opt.locked{cursor:default}
.opt-badge{width:30px;height:30px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;flex-shrink:0;transition:background-color .15s,border-color .15s,color .15s,transform .15s}
.sel-correct .opt-badge{background:var(--correct);border-color:var(--correct);color:#000}
.sel-wrong .opt-badge{background:var(--wrong);border-color:var(--wrong);color:#fff}
.show-correct .opt-badge{background:var(--correct);border-color:var(--correct);color:#000}
.opt-text{flex:1}

/* ── FILL INPUT ── */
.fill-wrap{margin-top:.25rem}
.fill-input{background:rgba(255,255,255,.05);border:2px solid var(--border);border-radius:9px;padding:.7rem 1rem;color:var(--text);font-family:var(--font-body);font-size:1rem;width:100%;max-width:380px;outline:none;transition:border-color .15s}
.fill-input:focus{border-color:var(--blue)}
.fill-input.fi-correct{border-color:var(--correct);background:rgba(155,196,176,.07)}
.fill-input.fi-wrong{border-color:var(--wrong);background:rgba(255,138,122,.07)}
.fill-note{font-size:.78rem;color:var(--muted);margin-top:.4rem}

/* ── FEEDBACK & HINT ── */
.feedback-box{margin-top:.9rem;padding:.65rem 1rem;border-radius:8px;font-size:.88rem;display:none}
.feedback-box.fb-correct{display:block;background:rgba(155,196,176,.1);border:1px solid rgba(155,196,176,.3);color:var(--correct)}
.feedback-box.fb-wrong{display:block;background:rgba(255,138,122,.1);border:1px solid rgba(255,138,122,.3);color:var(--wrong)}
.hint-box{margin-top:.9rem;padding:.65rem 1rem;border-radius:8px;background:rgba(201,168,76,.08);border:1px solid rgba(201,168,76,.2);font-size:.85rem;color:var(--accent);display:none}
.hint-box.visible{display:block}

/* ── CONTROLS ── */
.controls{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.25rem}
.btn{padding:.65rem 1.3rem;border-radius:8px;border:none;cursor:pointer;font-family:var(--font-body);font-size:.88rem;font-weight:600;transition:background-color .15s,border-color .15s,color .15s,transform .15s;letter-spacing:.01em}
.btn-primary{background:var(--accent);color:#000}
.btn-primary:hover{background:#f0b000;transform:translateY(-1px)}
.btn-secondary{background:var(--card);border:1px solid var(--border);color:var(--text)}
.btn-secondary:hover{background:var(--card-hover)}
.btn-hint{background:rgba(201,168,76,.1);border:1px solid rgba(201,168,76,.25);color:var(--accent)}
.btn-hint:hover{background:rgba(201,168,76,.18)}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none!important}

/* ── RESULTS ── */
.results-wrap{text-align:center;padding:2.5rem 1rem}
.results-ring-outer{width:150px;height:150px;border-radius:50%;margin:0 auto 1.5rem;position:relative;display:flex;align-items:center;justify-content:center}
.results-ring-svg{position:absolute;top:0;left:0;transform:rotate(-90deg)}
.results-inner{width:120px;height:120px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative}
.results-num{font-size:2.4rem;font-weight:700;font-family:var(--font-display)}
.results-denom{font-size:.78rem;color:var(--muted)}
.results-h{font-family:var(--font-display);font-size:1.8rem;font-weight:700;margin-bottom:.4rem}
.results-msg{color:var(--muted);font-size:.9rem;margin-bottom:1.5rem}
.results-btns{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.review-list{max-width:660px;margin:2rem auto 0;text-align:left}
.review-list h3{font-family:var(--font-display);margin-bottom:1rem;font-size:1.15rem}
.review-item{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:.9rem 1.1rem;margin-bottom:.7rem;border-left:4px solid transparent}
.review-item.ri-correct{border-left-color:var(--correct)}
.review-item.ri-wrong{border-left-color:var(--wrong)}
.review-q{font-size:.8rem;color:var(--muted);margin-bottom:.25rem}
.review-answer{font-size:.9rem}
.review-correct-ans{font-size:.82rem;color:var(--correct);margin-top:.2rem}

@media(max-width:580px){
  .type-grid{grid-template-columns:1fr}
  .topics-grid{grid-template-columns:1fr}
  .screen{padding:1rem}
  .header{padding:1rem}
  .q-card{padding:1.25rem}
  .screen-heading{font-size:1.5rem}
}

/* ── COUNT SELECTOR SCREEN ── */
.count-grid{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.5rem}
.count-card{background:var(--card);border:2px solid var(--border);border-radius:14px;
  padding:1.75rem 2rem;cursor:pointer;transition:background-color .2s,border-color .2s,transform .2s,box-shadow .2s;text-align:center;min-width:120px;flex:1}
.count-card:hover{border-color:var(--accent);background:var(--card-hover);transform:translateY(-2px)}
.count-num{font-family:var(--font-display);font-size:2.8rem;font-weight:700;color:var(--accent);line-height:1}
.count-label{font-size:.88rem;font-weight:600;margin:.4rem 0 .2rem}
.count-est{font-size:.75rem;color:var(--muted)}

/* ── MATCHING EXERCISE ── */
.match-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:1rem}
.match-col{display:flex;flex-direction:column;gap:.55rem}
.match-card{background:rgba(255,255,255,.04);border:2px solid var(--border);
  border-radius:10px;padding:.75rem 1rem;cursor:pointer;transition:background-color .18s,border-color .18s,transform .18s;
  font-size:.92rem;line-height:1.45;min-height:52px;display:flex;align-items:center}
.match-card:hover:not(.match-done){border-color:var(--blue);background:rgba(232,184,122,.08)}
.match-card.match-selected{border-color:var(--accent);background:rgba(201,168,76,.12);
  box-shadow:0 0 0 3px rgba(201,168,76,.18)}
.match-card.match-correct{border-color:var(--correct)!important;
  background:rgba(155,196,176,.12)!important;cursor:default;opacity:.85}
.match-card.match-wrong{border-color:var(--wrong)!important;
  background:rgba(255,138,122,.12)!important;animation:shake .35s ease}
.match-card.match-done{cursor:default}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* ── MATCHING TYPE CARD ── */
.type-card-match{border-color:rgba(201,168,76,.4)}
.type-card-match:hover{border-color:#E8B87A!important}
.type-card-match .type-emoji{font-size:2.8rem}

/* ── 5-column type grid on wider screens ── */
.type-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;max-width:620px;margin-top:1.5rem}
@media(min-width:700px){.type-grid{grid-template-columns:repeat(3,1fr);max-width:900px}}

/* ── REVISE / WARNING BUTTON ── */
.btn-warning{background:rgba(255,138,122,.15);border:1px solid rgba(255,138,122,.35);color:var(--wrong)}
.btn-warning:hover{background:rgba(255,138,122,.25)}

/* ── REVIEW EXPLANATION ROW ── */
.review-exp{font-size:.8rem;color:var(--muted);margin-top:.25rem;
  border-left:2px solid var(--muted);padding-left:.5rem;line-height:1.5}

/* ── RESPONSIVE FIXES ── */
@media(max-width:580px){
  .match-grid{grid-template-columns:1fr}
  .match-col+.match-col{margin-top:0}
  .type-grid{grid-template-columns:1fr}
  .count-grid{flex-direction:column}
  .count-card{min-width:unset}
}
.match-legend{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:.4rem}
.ml-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:0 .5rem}
.match-badge{font-size:.75rem;margin-right:.4rem;flex-shrink:0}

/* ── SORT / SENTENCE ORDERING EXERCISE ── */
.sort-instructions{font-size:.85rem;color:var(--muted);margin-bottom:.75rem;font-style:italic}
.sort-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.35rem;font-weight:600}
.sort-answer-area{
  display:flex;flex-wrap:wrap;gap:.5rem;min-height:56px;
  background:rgba(232,184,122,.06);border:2px solid var(--blue);
  border-radius:10px;padding:.65rem .75rem;margin-bottom:.85rem;
  transition:background .2s;
}
.sort-answer-area.sa-correct{border-color:var(--correct);background:rgba(155,196,176,.08)}
.sort-answer-area.sa-wrong  {border-color:var(--wrong);background:rgba(255,138,122,.08)}
.sort-pool{
  display:flex;flex-wrap:wrap;gap:.5rem;min-height:48px;
  background:rgba(255,255,255,.03);border:2px dashed var(--border);
  border-radius:10px;padding:.65rem .75rem;
}
.sort-chip{
  background:var(--card);border:1.5px solid var(--border);
  border-radius:7px;padding:.35rem .75rem;cursor:pointer;
  font-size:.9rem;line-height:1.4;transition:background-color .15s,border-color .15s,color .15s,transform .15s;
  user-select:none;display:inline-flex;align-items:center;gap:.3rem;
}
.sort-chip:hover:not(.sc-done){border-color:var(--accent);background:rgba(201,168,76,.1);color:var(--accent)}
.sort-chip.sc-answer{border-color:var(--blue);background:rgba(232,184,122,.1)}
.sort-chip.sc-correct{border-color:var(--correct)!important;background:rgba(155,196,176,.12)!important;cursor:default}
.sort-chip.sc-wrong  {border-color:var(--wrong)!important;background:rgba(255,138,122,.12)!important;cursor:default}
.sort-chip.sc-done   {cursor:default;opacity:.5}
.sort-placeholder{font-size:.82rem;color:var(--muted);font-style:italic;align-self:center}
.sort-clear-btn{
  background:none;border:1px solid var(--border);color:var(--muted);
  font-size:.75rem;padding:.25rem .6rem;border-radius:5px;cursor:pointer;
  margin-left:auto;align-self:flex-start;transition:background-color .15s,border-color .15s,color .15s,transform .15s;
}
.sort-clear-btn:hover{border-color:var(--wrong);color:var(--wrong)}

/* ── ERROR CORRECTION & TRANSFORMATION ── */
.error-sentence{
  background:rgba(255,138,122,.07);border-left:4px solid var(--wrong);
  border-radius:8px;padding:.75rem 1rem;margin-bottom:.85rem;
  font-size:1.05rem;line-height:1.6;color:var(--text);
}
.transform-source{
  background:rgba(232,184,122,.07);border-left:4px solid var(--blue);
  border-radius:8px;padding:.75rem 1rem;margin-bottom:.85rem;
  font-size:.95rem;line-height:1.6;color:var(--text);
}
.answer-textarea{
  width:100%;background:rgba(255,255,255,.05);border:2px solid var(--border);
  border-radius:9px;padding:.7rem 1rem;color:var(--text);
  font-family:var(--font-body);font-size:.95rem;line-height:1.5;
  resize:vertical;min-height:70px;outline:none;
  transition:border-color .15s;
}
.answer-textarea:focus{border-color:var(--blue);}
.answer-textarea.ta-correct{border-color:var(--correct);background:rgba(155,196,176,.07);}
.answer-textarea.ta-wrong{border-color:var(--wrong);background:rgba(255,138,122,.07);}
.type-card-error{border-color:rgba(217,140,106,.35);}
.type-card-error:hover{border-color:#D98C6A !important;}
.type-card-transform{border-color:rgba(201,138,166,.35);}
.type-card-transform:hover{border-color:var(--dusty-rose) !important;}

/* ── 11-MODE TYPE GRID ── */
.type-grid-full{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:1rem;
  margin-top:1.5rem;
  max-width:1080px;
}
.type-grid-full .type-card{
  background:var(--card);border:2px solid var(--border);border-radius:14px;
  padding:1.5rem 1rem;cursor:pointer;transition:background-color .2s,border-color .2s,transform .2s,box-shadow .2s;text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.type-grid-full .type-card:hover{
  border-color:var(--accent);background:var(--card-hover);transform:translateY(-2px);
}
.type-grid-full .type-emoji{font-size:2.2rem;margin-bottom:.6rem}
.type-grid-full .type-name{font-family:var(--font-display);font-size:1rem;font-weight:600;margin-bottom:.3rem}
.type-grid-full .type-desc{font-size:.78rem;color:var(--muted);line-height:1.45}
.type-grid-full .type-card-error:hover{border-color:#D98C6A !important}
.type-grid-full .type-card-transform:hover{border-color:var(--dusty-rose) !important}
.type-grid-full .type-card-match:hover{border-color:#E8B87A !important}


/* ==========================================
   ENHANCED COLORS & ANIMATIONS
   ========================================== */

/* ── Extended warm palette ── */
:root {
  --gold: #C9A84C;
  --deep-gold: #A87B1A;
  --sand: #E8B87A;
  --terracotta: #D98C6A;
  --sage: #9BC4B0;
  --dusty-rose: #C98AA6;
}

/* ── Header gradient accent ── */
.header {
  border-bottom: 1px solid var(--border);
  border-image: linear-gradient(90deg, var(--gold), var(--terracotta), var(--sand)) 1;
}

/* ── Dash nav buttons styled ── */
.dash-nav-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.4rem 0.9rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.dash-nav-btn:hover {
  background: var(--card-hover);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}

/* ── Topic cards: colored borders on hover ── */
.topic-card:nth-child(4n+1):hover { border-color: var(--sage); }
.topic-card:nth-child(4n+2):hover { border-color: var(--sand); }
.topic-card:nth-child(4n+3):hover { border-color: var(--gold); }
.topic-card:nth-child(4n+4):hover { border-color: var(--dusty-rose); }

.topic-card:nth-child(4n+1)::after { background: linear-gradient(90deg, var(--sage), var(--gold)); }
.topic-card:nth-child(4n+2)::after { background: linear-gradient(90deg, var(--sand), var(--terracotta)); }
.topic-card:nth-child(4n+3)::after { background: linear-gradient(90deg, var(--gold), var(--deep-gold)); }
.topic-card:nth-child(4n+4)::after { background: linear-gradient(90deg, var(--dusty-rose), var(--terracotta)); }

/* ── Topic card entrance stagger ── */
.topic-card {
  animation: cardEntrance 0.4s ease-out backwards;
}
.topic-card:nth-child(1) { animation-delay: 0.02s; }
.topic-card:nth-child(2) { animation-delay: 0.04s; }
.topic-card:nth-child(3) { animation-delay: 0.06s; }
.topic-card:nth-child(4) { animation-delay: 0.08s; }
.topic-card:nth-child(5) { animation-delay: 0.10s; }
.topic-card:nth-child(6) { animation-delay: 0.12s; }
.topic-card:nth-child(7) { animation-delay: 0.14s; }
.topic-card:nth-child(8) { animation-delay: 0.16s; }
.topic-card:nth-child(9) { animation-delay: 0.18s; }
.topic-card:nth-child(10) { animation-delay: 0.20s; }

@keyframes cardEntrance {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Type card icons (replacing emojis) ── */
.type-emoji {
  font-size: 1.1rem !important;
  font-weight: 800;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  margin: 0 auto 0.8rem;
  letter-spacing: 0.5px;
  font-family: var(--font-body);
}
.type-icon-mcq { background: rgba(201, 168, 76, 0.12); color: var(--gold); border: 1px solid rgba(201, 168, 76, 0.25); }
.type-icon-fill { background: rgba(155, 196, 176, 0.12); color: var(--sage); border: 1px solid rgba(155, 196, 176, 0.25); }
.type-icon-sort { background: rgba(232, 184, 122, 0.12); color: var(--sand); border: 1px solid rgba(232, 184, 122, 0.25); }
.type-icon-error { background: rgba(217, 140, 106, 0.12); color: var(--terracotta); border: 1px solid rgba(217, 140, 106, 0.25); }
.type-icon-transform { background: rgba(201, 138, 166, 0.12); color: var(--dusty-rose); border: 1px solid rgba(201, 138, 166, 0.25); }
.type-icon-match { background: rgba(168, 123, 26, 0.12); color: var(--sand); border: 1px solid rgba(168, 123, 26, 0.25); }
.type-icon-shuffle { background: rgba(255, 255, 255, 0.05); color: var(--muted); border: 1px solid var(--border); }

/* ── Type cards: hover glow per type ── */
.type-card[data-basetype="mcq"]:hover { border-color: var(--gold); box-shadow: 0 8px 30px rgba(201, 168, 76, 0.1); }
.type-card[data-basetype="fill"]:hover { border-color: var(--sage); box-shadow: 0 8px 30px rgba(155, 196, 176, 0.1); }
.type-card[data-basetype="sort"]:hover { border-color: var(--sand); box-shadow: 0 8px 30px rgba(232, 184, 122, 0.1); }
.type-card-error:hover { border-color: var(--terracotta) !important; box-shadow: 0 8px 30px rgba(217, 140, 106, 0.1) !important; }
.type-card-transform:hover { border-color: var(--dusty-rose) !important; box-shadow: 0 8px 30px rgba(201, 138, 166, 0.1) !important; }
.type-card-match:hover { border-color: var(--sand) !important; box-shadow: 0 8px 30px rgba(232, 184, 122, 0.1) !important; }

/* ── Type grid: full-width responsive ── */
.type-grid-full {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

/* ── Progress bar: gradient ── */
.progress-fill {
  background: linear-gradient(90deg, var(--terracotta), var(--gold), var(--sand)) !important;
  transition: width 0.4s ease;
}

/* ── Score box ── */
.score-box {
  background: rgba(240, 165, 0, 0.08);
  border: 1px solid rgba(240, 165, 0, 0.2);
  padding: 0.5rem 1rem;
  border-radius: 10px;
  font-size: 0.9rem;
  color: var(--accent);
}

/* ── Question card: subtle glow ── */
.q-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem;
  background: var(--card);
  transition: box-shadow 0.3s ease;
}
.q-card:hover {
  box-shadow: 0 0 20px rgba(240, 165, 0, 0.05);
}

/* ── Buttons: colored variants ── */
.btn-primary {
  background: linear-gradient(135deg, var(--accent), #cc8800) !important;
  color: #000 !important;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  padding: 0.6rem 1.4rem;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-primary:hover {
  box-shadow: 0 6px 20px rgba(240, 165, 0, 0.3);
  transform: translateY(-2px);
}
.btn-secondary {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 0.6rem 1.4rem;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.btn-hint {
  background: rgba(201, 168, 76, 0.1);
  border: 1px solid rgba(201, 168, 76, 0.25);
  color: var(--gold);
  border-radius: 10px;
  padding: 0.6rem 1.4rem;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-hint:hover {
  background: rgba(201, 168, 76, 0.2);
  border-color: var(--gold);
}
.btn-warning {
  background: rgba(217, 140, 106, 0.1);
  border: 1px solid rgba(217, 140, 106, 0.25);
  color: var(--terracotta);
  border-radius: 10px;
  padding: 0.6rem 1.4rem;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-warning:hover {
  background: rgba(217, 140, 106, 0.2);
}

/* ── Screen heading: gradient text ── */
.screen-heading {
  background: linear-gradient(135deg, var(--text) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Due badge: colored ── */
.due-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: linear-gradient(135deg, var(--terracotta), #b5603a);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 50px;
  letter-spacing: 0.3px;
}

/* ── Results ring glow ── */
.results-ring-outer {
  position: relative;
}
.results-ring-outer::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 165, 0, 0.1), transparent 70%);
  pointer-events: none;
  animation: resultGlow 2s ease-in-out infinite alternate;
}
@keyframes resultGlow {
  from { opacity: 0.5; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1.05); }
}

/* ── Smooth screen transitions ── */
.screen-enter {
  animation: screenSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes screenSlideIn {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ── Count card grid ── */
.count-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.8rem;
  max-width: 500px;
  margin-top: 1rem;
}
.count-card {
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 1.2rem 0.8rem;
  text-align: center;
  cursor: pointer;
  font-size: 1.3rem;
  font-weight: 700;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.count-card:hover {
  border-color: var(--accent);
  background: var(--card-hover);
  transform: translateY(-2px);
}

/* ── Body scrollbar styled ── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── Exam timer colored ── */
.exam-timer {
  font-size: 1.4rem;
  font-weight: 800;
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  background: rgba(201, 168, 76, 0.08);
  border: 1px solid rgba(201, 168, 76, 0.2);
  padding: 0.4rem 1rem;
  border-radius: 10px;
}

/* ── Controls row ── */
.controls {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
  align-items: center;
}

/* ── Feedback box ── */
.feedback-box {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 10px;
  font-size: 0.88rem;
  line-height: 1.6;
}
.feedback-box.correct {
  background: rgba(155, 196, 176, 0.08);
  border: 1px solid rgba(155, 196, 176, 0.2);
  color: var(--correct);
}
.feedback-box.wrong {
  background: rgba(255, 138, 122, 0.08);
  border: 1px solid rgba(255, 138, 122, 0.2);
  color: var(--wrong);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .header { padding: 1rem; gap: 0.5rem; flex-wrap: wrap; }
  .header-text h1 { font-size: 1.2rem; }
  .header-right { gap: 0.4rem; }
  .dash-nav-btn { font-size: 0.7rem; padding: 0.3rem 0.6rem; }
  .type-grid-full { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .screen { padding: 1.2rem; }
}

/* ── LEVEL TABS & BADGES ── */
.level-tabs{display:flex;gap:.5rem;margin-bottom:1.5rem;flex-wrap:wrap;justify-content:center}
.level-tab{background:var(--card);border:1px solid var(--border);color:var(--muted);padding:.5rem 1.2rem;border-radius:8px;cursor:pointer;font-size:.85rem;font-weight:500;transition:background-color .2s,border-color .2s,transform .2s,box-shadow .2s;display:flex;align-items:center;gap:.4rem;font-family:var(--font-body)}
.level-tab:hover{background:var(--card-hover);color:var(--text)}
.level-tab.active{background:var(--accent);color:#1A1008;border-color:var(--accent);font-weight:700}
.level-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.level-dot.a1{background:#9BC4B0}
.level-dot.a2{background:#E8B87A}
.level-dot.b1{background:#C9A84C}
.level-dot.b2{background:#C98AA6}
.topic-level-tag{position:absolute;top:.7rem;right:.7rem;font-size:.65rem;font-weight:700;padding:.2rem .5rem;border-radius:4px;letter-spacing:.5px;text-transform:uppercase}
.topic-level-tag.level-a1{background:rgba(155,196,176,.15);color:#9BC4B0;border:1px solid rgba(155,196,176,.3)}
.topic-level-tag.level-a2{background:rgba(232,184,122,.15);color:#E8B87A;border:1px solid rgba(232,184,122,.3)}
.topic-level-tag.level-b1{background:rgba(201,168,76,.15);color:#C9A84C;border:1px solid rgba(201,168,76,.3)}
.topic-level-tag.level-b2{background:rgba(201,138,166,.15);color:#C98AA6;border:1px solid rgba(201,138,166,.3)}


/* ── REDUCED MOTION ──
   The practice app previously animated screen changes, card lifts and progress
   with no preference guard. Spatial motion is removed here; state changes that
   carry meaning are kept, shortened to a non-spatial fade. */
@media (prefers-reduced-motion: reduce) {
  .screen,
  .screen.active {
    animation: none !important;
  }

  .topic-card,
  .type-card,
  .mcq-opt,
  .vocab-pill,
  .btn,
  .level-tab,
  .opt-badge {
    transition-duration: 100ms !important;
  }

  .topic-card:hover,
  .type-card:hover,
  .mcq-opt:hover,
  .count-card:hover,
  .dash-nav-btn:hover {
    transform: none !important;
  }

  .topic-card::after {
    transition: none !important;
    transform: none !important;
  }

  .progress-fill,
  .rule-card {
    transition: none !important;
    animation: none !important;
  }
}