/* ===== Bé Học Tin Học — kid-friendly theme ===== */
:root{
  --pink:#ff6fae; --purple:#8a5cff; --blue:#36c5ff; --green:#34d399;
  --yellow:#ffd23f; --red:#ff5d6c; --ink:#2d2150; --soft:#fff;
  --shadow:0 8px 0 rgba(0,0,0,.12);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  font-family:"Baloo 2","Comic Sans MS","Segoe UI Rounded","Nunito",system-ui,sans-serif;
  color:var(--ink);
  background:linear-gradient(160deg,#ffe6f2 0%,#e7ecff 50%,#e0f7ff 100%);
  background-attachment:fixed;
  overflow-x:hidden;
  user-select:none;
}

/* ---- screens ---- */
.screen{display:none;min-height:100vh;animation:fade .35s ease}
.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---- HOME ---- */
.home-hero{text-align:center;padding:34px 16px 10px}
.mascot{font-size:84px;line-height:1;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(3deg)}}
.home-hero h1{
  margin:6px 0 2px;font-size:34px;font-weight:800;
  background:linear-gradient(90deg,var(--pink),var(--purple),var(--blue));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.subtitle{margin:0;font-size:18px;color:#6a5e92;font-weight:600}

.mode-tabs{display:flex;gap:12px;justify-content:center;margin:20px auto;max-width:520px;padding:0 16px}
.tab{
  flex:1;border:none;border-radius:20px;padding:14px 8px;font-size:18px;font-weight:800;
  font-family:inherit;cursor:pointer;color:#7b6fae;background:#fff;box-shadow:var(--shadow);
  transition:transform .12s;
}
.tab:active{transform:translateY(3px) scale(.98)}
.tab.active{color:#fff;background:linear-gradient(135deg,var(--purple),var(--pink))}

.lesson-list{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:18px;max-width:760px;margin:0 auto;padding:8px 18px 40px;
}
.lesson-card{
  background:#fff;border-radius:26px;padding:22px;cursor:pointer;
  box-shadow:var(--shadow);transition:transform .14s;position:relative;overflow:hidden;
}
.lesson-card:active{transform:translateY(4px) scale(.98)}
.lesson-card .lc-emoji{font-size:46px}
.lesson-card h3{margin:8px 0 2px;font-size:23px}
.lesson-card .lc-sub{color:#8a7fb0;font-weight:600;font-size:15px}
.lesson-card .lc-best{margin-top:10px;font-size:18px;min-height:24px}
.lesson-card .lc-go{
  position:absolute;right:16px;bottom:16px;font-size:24px;
  background:linear-gradient(135deg,var(--blue),var(--green));color:#fff;
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;box-shadow:var(--shadow)
}
.lc-1{background:linear-gradient(160deg,#fff,#fff4fb)}
.lc-2{background:linear-gradient(160deg,#fff,#f3f0ff)}
.lc-3{background:linear-gradient(160deg,#fff,#eafaff)}
.home-foot{text-align:center;color:#9a8fbf;font-weight:600;padding:0 0 26px}

/* ---- QUIZ TOP ---- */
.quiz-top{
  display:flex;align-items:center;gap:10px;padding:14px 16px;position:sticky;top:0;z-index:5;
  background:rgba(255,255,255,.7);backdrop-filter:blur(8px);
}
.icon-btn{
  border:none;background:#fff;border-radius:14px;width:46px;height:46px;font-size:22px;
  cursor:pointer;box-shadow:var(--shadow);flex:none
}
.icon-btn:active{transform:translateY(3px)}
.progress-wrap{flex:1;height:18px;background:#fff;border-radius:20px;overflow:hidden;box-shadow:inset 0 2px 5px rgba(0,0,0,.08)}
.progress-bar{height:100%;width:0;border-radius:20px;background:linear-gradient(90deg,var(--green),var(--blue));transition:width .4s}
.q-counter{font-weight:800;color:#6a5e92;min-width:46px;text-align:center}
.score-pill{font-weight:800;background:var(--yellow);color:#7a5a00;padding:8px 12px;border-radius:14px;box-shadow:var(--shadow)}

/* ---- QUIZ MAIN ---- */
.quiz-main{max-width:680px;margin:0 auto;padding:16px 18px 8px}
.q-text{font-size:23px;font-weight:800;line-height:1.35;margin:6px 2px 18px;white-space:pre-line}
.q-illus{display:block;max-width:100%;max-height:240px;margin:0 auto 18px;border-radius:18px;box-shadow:var(--shadow)}
.q-hint{font-size:15px;font-weight:700;color:#8a7fb0;margin:-8px 2px 14px}

/* options */
.options{display:flex;flex-direction:column;gap:12px}
.opt{
  display:flex;align-items:center;gap:12px;background:#fff;border:3px solid transparent;
  border-radius:20px;padding:16px 18px;font-size:19px;font-weight:700;cursor:pointer;
  box-shadow:var(--shadow);transition:transform .1s,border-color .15s,background .15s;
}
.opt:active{transform:translateY(3px) scale(.99)}
.opt .bullet{
  width:30px;height:30px;border-radius:50%;flex:none;background:#eee;display:grid;place-items:center;
  font-weight:800;color:#9a8fbf;font-size:16px
}
.opt.selected{border-color:var(--purple);background:#f6f2ff}
.opt.selected .bullet{background:var(--purple);color:#fff}
.opt.correct{border-color:var(--green);background:#e9fff5}
.opt.correct .bullet{background:var(--green);color:#fff}
.opt.wrong{border-color:var(--red);background:#fff0f1}
.opt.wrong .bullet{background:var(--red);color:#fff}
.opt.disabled{pointer-events:none;opacity:.97}

/* match */
.match-wrap{display:flex;gap:14px}
.match-col{flex:1;display:flex;flex-direction:column;gap:12px}
.match-item{
  background:#fff;border:3px solid transparent;border-radius:18px;padding:14px;font-size:17px;
  font-weight:700;cursor:pointer;box-shadow:var(--shadow);min-height:62px;display:flex;align-items:center;
  transition:transform .1s,border-color .15s;position:relative
}
.match-item:active{transform:scale(.98)}
.match-item.picked{border-color:var(--purple);background:#f6f2ff}
.match-item.done{cursor:default}
.match-item .tag{
  position:absolute;top:-10px;right:-8px;width:26px;height:26px;border-radius:50%;
  color:#fff;font-size:14px;font-weight:800;display:grid;place-items:center;box-shadow:var(--shadow)
}
.match-item.correct{border-color:var(--green);background:#e9fff5}
.match-item.wrong{border-color:var(--red);background:#fff0f1}
.match-head{text-align:center;font-weight:800;color:#8a7fb0;margin-bottom:4px;font-size:15px}

/* hotspot */
.hs-wrap{position:relative;display:inline-block;max-width:100%;margin:0 auto;border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.hs-wrap img{display:block;max-width:100%;height:auto}
.hs-mark{position:absolute;width:54px;height:54px;margin:-27px 0 0 -27px;font-size:40px;pointer-events:none;
  display:grid;place-items:center;animation:pop .25s ease}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
.hs-zone{position:absolute;border-radius:10px;border:3px dashed rgba(52,211,153,.0)}
.hs-zone.reveal{border-color:rgba(52,211,153,.9);background:rgba(52,211,153,.18)}
.hs-center{text-align:center}

/* ---- FEEDBACK ---- */
.feedback{position:fixed;left:0;right:0;bottom:96px;display:flex;flex-direction:column;align-items:center;
  pointer-events:none;z-index:8}
.feedback.hidden{display:none}
.feedback-emoji{font-size:70px;animation:pop .3s ease}
.feedback-text{font-size:26px;font-weight:800;padding:8px 22px;border-radius:18px;color:#fff;box-shadow:var(--shadow)}
.feedback.good .feedback-text{background:var(--green)}
.feedback.bad .feedback-text{background:var(--red)}

/* ---- FOOTER BUTTONS ---- */
.quiz-foot{position:sticky;bottom:0;padding:14px 18px 22px;max-width:680px;margin:0 auto;display:flex;gap:12px}
.big-btn{
  flex:1;border:none;border-radius:22px;padding:18px;font-size:21px;font-weight:800;font-family:inherit;
  color:#fff;cursor:pointer;box-shadow:var(--shadow);transition:transform .1s,opacity .2s
}
.big-btn:active{transform:translateY(4px)}
.big-btn.check{background:linear-gradient(135deg,var(--purple),var(--pink))}
.big-btn.next{background:linear-gradient(135deg,var(--blue),var(--green))}
.big-btn:disabled{opacity:.4;cursor:not-allowed}
.hidden{display:none!important}

/* ---- RESULT ---- */
#screen-result{display:none;place-items:center}
#screen-result.active{display:grid}
.result-card{
  background:#fff;border-radius:32px;padding:38px 30px;text-align:center;max-width:420px;margin:20px;
  box-shadow:0 14px 0 rgba(0,0,0,.12);animation:pop .4s ease
}
.result-emoji{font-size:86px;animation:bob 2s ease-in-out infinite}
.result-card h2{font-size:32px;margin:6px 0}
.result-stars{font-size:46px;letter-spacing:6px;margin:8px 0}
.result-score{font-size:20px;font-weight:700;color:#6a5e92;margin:6px 0 22px}
.result-btns{display:flex;gap:12px}

/* ---- buttons: extra variants ---- */
.big-btn.warn{background:linear-gradient(135deg,#ff9f43,#ff6fae)}
.big-btn.ghost{background:#b9b0d6}

/* ---- lesson card actions / progress ---- */
.lc-set{display:inline-block;margin:2px 0 4px;font-size:12px;font-weight:800;color:#8a7fb0;
  background:#efeaff;border-radius:10px;padding:3px 9px}
.lc-prog{margin-top:8px;font-size:14px;font-weight:800;color:#7a5acf;background:#f1ecff;
  border-radius:12px;padding:6px 10px;display:inline-block}
.lc-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.mini-btn{border:none;border-radius:14px;padding:11px 14px;font-size:15px;font-weight:800;font-family:inherit;
  color:#fff;cursor:pointer;box-shadow:var(--shadow);flex:1;min-width:90px;transition:transform .1s}
.mini-btn:active{transform:translateY(3px)}
.mini-btn.go{background:linear-gradient(135deg,var(--blue),var(--green))}
.mini-btn.cont{background:linear-gradient(135deg,var(--purple),var(--pink))}
.mini-btn.redo{background:#ffb02e;color:#7a4d00}

/* ---- pause modal ---- */
.modal{position:fixed;inset:0;z-index:30;display:grid;place-items:center;
  background:rgba(45,33,80,.45);backdrop-filter:blur(4px);animation:fade .25s ease}
.modal.hidden{display:none}
.modal-card{background:#fff;border-radius:30px;padding:28px 24px;text-align:center;max-width:360px;
  width:86%;box-shadow:0 14px 0 rgba(0,0,0,.15);animation:pop .3s ease}
.modal-emoji{font-size:60px;animation:bob 2.4s ease-in-out infinite}
.modal-card h3{font-size:24px;margin:6px 0 18px}
.modal-btns{display:flex;flex-direction:column;gap:11px}
.modal-btns .big-btn{font-size:19px;padding:15px}

/* ---- toast ---- */
.toast{position:fixed;left:50%;bottom:40px;transform:translateX(-50%);z-index:40;
  background:var(--ink);color:#fff;font-weight:800;font-size:18px;padding:14px 24px;border-radius:18px;
  box-shadow:var(--shadow);animation:pop .25s ease}
.toast.hidden{display:none}

/* ---- confetti ---- */
#confetti{position:fixed;inset:0;pointer-events:none;z-index:20;display:none}

@media(max-width:520px){
  .home-hero h1{font-size:28px}
  .q-text{font-size:21px}
  .match-item{font-size:15px}
  .opt{font-size:17px;padding:14px}
}