/* Lion Fun English Quiz — clear, mobile-first layout */
.quiz-page{background:#fffdf9}

/* Compact quiz header: the learner sees the question much sooner. */
.quiz-hero{background:linear-gradient(135deg,#fff8df 0%,#fffdf9 55%,#eaf7ff 100%);border-bottom:1px solid var(--line);overflow:hidden}
.quiz-hero-compact .quiz-hero-inner{min-height:205px;display:grid;grid-template-columns:minmax(0,1fr) 145px;align-items:center;gap:18px;padding:22px 0}
.quiz-hero h1{font-size:clamp(30px,4.2vw,48px);line-height:1.05;letter-spacing:-.045em;color:var(--navy);margin:7px 0 9px}
.quiz-lead{font-size:16px;line-height:1.45;color:var(--muted);max-width:720px;margin:0}
.quiz-mascot{height:175px;display:flex;align-items:flex-end;justify-content:center}
.quiz-mascot img{height:170px;width:auto;object-fit:contain;filter:drop-shadow(0 12px 10px rgba(31,43,51,.10))}
.quiz-meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.quiz-meta span,.quiz-list-tags span{padding:5px 9px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:11px;font-weight:800;color:var(--navy)}

/* The actual activity starts immediately after the compact title area. */
.quiz-section{padding:20px 0 48px}
.quiz-container{max-width:900px}
.quiz-status{max-width:900px;margin:0 auto 12px;padding:10px 14px;border-radius:12px;font-size:14px}
.quiz-status.loading{background:#eef8ff;color:#355d72}
.quiz-status.error{background:#fff0ed;color:#a33f35}
.quiz-app{max-width:900px;margin:0 auto}

.quiz-progress-wrap{position:sticky;top:0;z-index:20;margin:0 -4px 12px;padding:10px 4px 8px;background:rgba(255,253,249,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.quiz-progress-top{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:13px;font-weight:800;margin-bottom:7px}
.quiz-progress{height:9px;background:#edf0ef;border-radius:999px;overflow:hidden}
.quiz-progress span{display:block;height:100%;width:0;background:#f4c84a;border-radius:999px;transition:width .25s ease}

.quiz-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px 30px;box-shadow:0 12px 34px rgba(31,43,51,.065)}
.quiz-card.is-correct{border-color:#b9ddbd}
.quiz-card.is-incorrect{border-color:#f0b7af}
.question-number{text-transform:capitalize;color:#9a6b00;font-size:12px;font-weight:900;letter-spacing:.08em;margin-bottom:7px}
.quiz-card h2{font-size:30px;line-height:1.25;color:var(--navy);margin:0 0 22px;letter-spacing:-.02em}
.option-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.option-grid.two{grid-template-columns:1fr 1fr}
.quiz-option{min-height:62px;border:1px solid #dfe5e2;border-radius:15px;background:#fff;font:inherit;font-weight:800;color:var(--navy);cursor:pointer;padding:13px 16px;text-align:left;transition:.15s;touch-action:manipulation}
.quiz-option:hover:not(:disabled){transform:translateY(-1px);border-color:#bfcac5;box-shadow:0 7px 16px rgba(31,43,51,.06)}
.quiz-option:focus-visible,.word-chip:focus-visible,.btn:focus-visible{outline:3px solid rgba(244,200,74,.45);outline-offset:2px}
.quiz-option.correct,.word-chip.correct{border-color:#77b77e;background:#eaf8ec}
.quiz-option.incorrect{border-color:#e49a91;background:#fff0ed}
.quiz-option:disabled{cursor:default;opacity:.92}
.feedback{display:grid;gap:8px;margin-top:14px;padding:14px 16px;border-radius:15px;line-height:1.45}
.feedback.correct{background:#eaf8ec;color:#286a30}
.feedback.incorrect{background:#fff0ed;color:#9d3d34}
.feedback small,.feedback span{display:block}
.feedback-expl{padding:8px 11px;border-radius:10px;font-size:13px;line-height:1.45;margin-top:4px}
.feedback-expl.user-expl{background:rgba(217,83,79,.1);border-left:3px solid #d9534f;color:#782622}
.feedback-expl.correct-expl{background:rgba(40,167,69,.1);border-left:3px solid #28a745;color:#1e5e29}
.feedback-expl strong{display:block;margin-bottom:2px;font-size:12px;text-transform:uppercase;letter-spacing:.02em}
.fill-wrap{display:flex;gap:10px;align-items:center}
.quiz-input{flex:1;min-height:54px;border:1px solid #dfe5e2;border-radius:15px;padding:0 15px;font:inherit;font-size:17px;outline:none}
.quiz-input:focus{border-color:#b6c8c0;box-shadow:0 0 0 4px rgba(180,200,192,.2)}
.reorder-area{display:grid;gap:16px}
.answer-line{min-height:62px;border:2px dashed #d8dfdc;border-radius:15px;padding:15px;font-size:19px;font-weight:800;color:var(--navy);background:#fbfcfb}
.word-bank{display:flex;flex-wrap:wrap;gap:9px}
.word-chip{border:1px solid #dfe5e2;border-radius:999px;background:#fff;padding:11px 16px;font:inherit;font-weight:800;color:var(--navy);cursor:pointer;touch-action:manipulation}
.word-chip:disabled{opacity:.45;cursor:default}
.quiz-actions{display:flex;justify-content:flex-end;margin-top:13px}
.quiz-actions .btn{min-height:48px}

.quiz-result{max-width:520px;margin:18px auto 0;text-align:center;background:#fff;border:1px solid var(--line);border-radius:28px;padding:32px 24px;box-shadow:0 14px 38px rgba(31,43,51,.08)}
.result-icon{font-size:50px}
.result-teacher-wrap{display:flex;justify-content:center;align-items:center;margin:0 auto 10px}
.result-teacher-img{width:320px;height:320px;max-width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:26px;box-shadow:0 16px 36px rgba(31,43,51,.16);border:4px solid #fff;display:block;animation:teacherPop .4s cubic-bezier(.16,1,.3,1);transition:transform .25s ease}
.result-teacher-img:hover{transform:scale(1.02)}
@keyframes teacherPop{0%{transform:scale(.88);opacity:0}100%{transform:scale(1);opacity:1}}
.quiz-result h2{font-size:26px;color:var(--navy);margin:8px 0}
.result-score{font-size:26px;font-weight:800;color:#d48b0a;letter-spacing:.5px;margin:12px 0 18px;line-height:1.2}
.quiz-result p{color:var(--muted);font-weight:800}
.result-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:0}
.result-actions .btn{min-width:130px}

.quiz-filter-container{max-width:950px;margin:0 auto 20px;display:flex;flex-direction:column;gap:10px}
.quiz-filter-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 16px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 6px 18px rgba(31,43,51,.03)}
.quiz-filter-label{font-size:12px;font-weight:900;color:var(--navy);margin-right:4px;letter-spacing:.02em;text-transform:uppercase}
.quiz-filter-btn{background:#f8faf9;border:1px solid #dfe5e2;color:var(--navy);font-size:13px;font-weight:800;padding:7px 15px;border-radius:999px;cursor:pointer;transition:all .18s ease;display:inline-flex;align-items:center;gap:6px}
.quiz-filter-btn:hover{background:#edf3f0;border-color:#b9c8c0}
.quiz-filter-btn.active{background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:0 3px 10px rgba(31,43,51,.25)}
.quiz-filter-btn.filter-cefr{border-color:#fedc79}
.quiz-filter-btn.filter-cefr.active{background:#b47d00;border-color:#b47d00;color:#fff}
.quiz-filter-btn.filter-ielts{border-color:#bae6fd}
.quiz-filter-btn.filter-ielts.active{background:#0284c7;border-color:#0284c7;color:#fff}
.quiz-filter-btn.filter-vstep{border-color:#bbf7d0}
.quiz-filter-btn.filter-vstep.active{background:#16a34a;border-color:#16a34a;color:#fff}

.quiz-subfilter-bar{display:flex;flex-wrap:wrap;gap:7px;align-items:center;padding:10px 16px;background:#fbfdfc;border:1px dashed #cfdad4;border-radius:16px;animation:subFilterFade .2s ease-out}
@keyframes subFilterFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.quiz-subfilter-label{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;margin-right:2px}
.quiz-subfilter-chip{background:#fff;border:1px solid #d4dfd9;color:var(--navy);font-size:12px;font-weight:800;padding:5px 12px;border-radius:999px;cursor:pointer;transition:all .15s ease}
.quiz-subfilter-chip:hover{background:#edf4f1;border-color:#9fb6ab;transform:translateY(-1px)}
.quiz-subfilter-chip.active{background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:0 2px 7px rgba(31,43,51,.2)}
.quiz-subfilter-chip.chip-cefr.active{background:#d48b0a;border-color:#d48b0a;color:#fff}
.quiz-subfilter-chip.chip-ielts.active{background:#0284c7;border-color:#0284c7;color:#fff}
.quiz-subfilter-chip.chip-vstep.active{background:#16a34a;border-color:#16a34a;color:#fff}

.quiz-search-bar{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.quiz-search-inner{position:relative;flex:1 1 280px;max-width:440px;display:flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px 14px 3px 18px;box-shadow:0 4px 16px rgba(31,43,51,.03);transition:border-color .18s ease,box-shadow .18s ease}
.quiz-search-inner:focus-within{border-color:#b6c8c0;box-shadow:0 0 0 4px rgba(180,200,192,.25)}
.quiz-search-icon{font-size:14px;color:var(--muted);margin-right:8px;user-select:none;display:inline-flex;align-items:center}
.quiz-search-input{width:100%;height:40px;border:none;outline:none;background:transparent;font:inherit;font-size:13px;font-weight:600;color:var(--navy);letter-spacing:.01em}
.quiz-search-input::placeholder{color:#64748b;font-weight:400;font-size:12.5px}
.quiz-search-clear{background:#edf2f0;border:none;color:var(--muted);width:24px;height:24px;border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;padding:0;margin-left:8px;transition:all .15s ease}
.quiz-search-clear:hover{background:#dfe7e3;color:var(--navy);transform:scale(1.08)}

.quiz-pagination{display:inline-flex;align-items:center;gap:10px;margin-left:auto;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 8px 4px 14px;box-shadow:0 4px 16px rgba(31,43,51,.03);user-select:none}
.quiz-page-info{font-size:13px;font-weight:700;color:#475569;white-space:nowrap;letter-spacing:.01em}
.quiz-page-nav{display:inline-flex;align-items:center;gap:4px}
.quiz-page-btn{width:34px;height:34px;border-radius:50%;border:none;background:transparent;color:var(--navy);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s ease,color .15s ease,transform .15s ease;padding:0}
.quiz-page-btn:hover:not(:disabled){background:#f1f5f9;color:var(--navy)}
.quiz-page-btn:active:not(:disabled){transform:scale(.95)}
.quiz-page-btn:disabled{color:#cbd5e1;cursor:not-allowed;opacity:.65}
.quiz-page-btn svg{width:18px;height:18px;display:block}
.quiz-bottom-pagination{max-width:950px;margin:18px auto 0;display:flex;justify-content:flex-end}

.quiz-list-grid{max-width:950px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.quiz-list-card{display:grid;grid-template-columns:112px 1fr;gap:18px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:20px;box-shadow:0 10px 32px rgba(31,43,51,.05);transition:transform .18s ease,box-shadow .18s ease}
.quiz-list-card:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(31,43,51,.08)}
.quiz-list-media{display:flex;flex-direction:column;align-items:center;gap:7px}
.quiz-list-icon{width:104px;height:104px;border-radius:26px;background:#fff7d9;display:grid;place-items:center;font-size:44px;overflow:hidden}
.quiz-list-icon img{width:92%;height:92%;object-fit:contain;display:block;user-select:none;pointer-events:none}
.quiz-card-history{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%}
.quiz-history-pill{display:inline-flex;align-items:center;justify-content:center;gap:4px;background:#e6f9ed;color:#15803d;border:1px solid #bbf7d0;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap;letter-spacing:.01em}
.quiz-history-pill svg{width:12px;height:12px;fill:currentColor;flex-shrink:0}
.quiz-history-last{font-size:11px;color:#64748b;font-weight:600;text-align:center;white-space:nowrap}
.quiz-history-last strong{color:#0f172a;font-weight:800}
.quiz-list-tags{display:flex;gap:6px;flex-wrap:wrap}
.quiz-list-tags span,.quiz-tag{font-size:10px;padding:4px 8px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:800;color:var(--navy);display:inline-flex;align-items:center}
.quiz-tag.clickable{cursor:pointer;transition:all .15s ease}
.quiz-tag.clickable:hover{background:#edf3f0;border-color:#99b0a4;transform:scale(1.04)}
.quiz-tag.tag-cefr{background:#fff9e6;border-color:#fedc79;color:#855d00}
.quiz-tag.tag-ielts{background:#f0f9ff;border-color:#bae6fd;color:#0369a1}
.quiz-tag.tag-vstep{background:#f0fdf4;border-color:#bbf7d0;color:#15803d}
.quiz-tag.tag-history{background:#e6f9ed;border-color:#bbf7d0;color:#15803d}
.quiz-list-card h2{font-size:20px;color:var(--navy);margin:9px 0 6px}
.quiz-list-card h2 a{color:inherit;text-decoration:none;transition:color .15s ease}
.quiz-list-card h2 a:hover{color:var(--orange)}
.quiz-list-card p{font-size:13px;color:var(--muted);margin:0 0 14px}
.quiz-list-card .btn{font-size:13px;padding:10px 14px}
.quiz-list-actions{display:flex;gap:8px;flex-wrap:wrap}
.quiz-list-actions .btn{min-width:100px;text-align:center}
.quiz-error{color:#a33f35}

/* Quiz completion history card */
.quiz-history-card{display:flex;align-items:flex-start;gap:14px;background:#f0f7ff;border:1px solid #dbeafe;border-radius:20px;padding:16px 20px;margin:14px auto 16px;max-width:440px;text-align:left;box-shadow:0 4px 16px rgba(30,58,138,.04);animation:historyCardFade .35s ease-out}
@keyframes historyCardFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.quiz-history-icon-wrap{width:42px;height:42px;border-radius:50%;background:#dbeafe;display:flex;align-items:center;justify-content:center;color:#1d4ed8;flex-shrink:0;margin-top:2px}
.quiz-history-icon-wrap svg{width:22px;height:22px;display:block}
.quiz-history-body{display:flex;flex-direction:column;gap:3px;flex:1 1 auto}
.quiz-history-title{font-size:15.5px;font-weight:800;color:#0f172a;letter-spacing:-.01em;margin:0 0 2px}
.quiz-history-line{font-size:13px;color:#475569;margin:0;line-height:1.45}
.quiz-history-line strong{color:#0f172a;font-weight:800}

/* Tablet */
@media(max-width:900px){
  .quiz-section{padding-top:16px}
  .quiz-card{padding:24px}
}

/* Mobile: no large hero, no mascot, no long scroll before Question 1. */
@media(max-width:760px){
  .quiz-page .site-header .nav{min-height:58px}
  .quiz-page .site-header .brand-name{font-size:15px}
  .quiz-page .site-header .brand-mark{width:28px;height:28px}
  .quiz-page .site-header .site-lang{display:none}
  .quiz-page .site-header .mobile-quiz-lang{display:flex}

  .quiz-hero-compact .quiz-hero-inner{display:block;min-height:0;padding:14px 0 13px}
  .quiz-hero-compact .eyebrow{font-size:10px}
  .quiz-hero h1{font-size:27px;line-height:1.08;margin:5px 0 5px}
  .quiz-lead{font-size:14px;line-height:1.3}
  .quiz-meta{margin-top:9px;gap:5px}
  .quiz-meta span{font-size:10px;padding:4px 8px}
  .quiz-mascot{display:none}

  .quiz-section{padding:8px 0 28px}
  .quiz-status{margin-bottom:7px;padding:8px 10px;font-size:12px}
  .quiz-progress-wrap{margin:0 -2px 8px;padding:7px 2px 7px}
  .quiz-progress-top{font-size:12px;margin-bottom:5px}
  .quiz-progress{height:7px}

  .quiz-card{padding:18px 16px;border-radius:18px;box-shadow:0 8px 24px rgba(31,43,51,.055)}
  .question-number{font-size:10px;margin-bottom:6px}
  .quiz-card h2{font-size:22px;line-height:1.28;margin-bottom:17px}
  .option-grid,.option-grid.two,.quiz-list-grid{grid-template-columns:1fr}
  .quiz-search-bar{max-width:100%;gap:8px;flex-wrap:nowrap}
  .quiz-search-inner{flex:1 1 auto;min-width:0;max-width:none;padding:2px 10px 2px 12px}
  .quiz-search-input{height:36px;font-size:12.5px}
  .quiz-pagination{padding:2px 5px 2px 10px;gap:6px;flex-shrink:0}
  .quiz-page-info{font-size:11.5px}
  .quiz-page-btn{width:30px;height:30px}
  .quiz-option{min-height:54px;padding:12px 14px;font-size:16px;border-radius:13px}
  .fill-wrap{align-items:stretch;flex-direction:column}
  .quiz-input{min-height:52px;font-size:16px}
  .reorder-area{gap:13px}
  .answer-line{min-height:56px;font-size:17px;padding:13px}
  .word-chip{padding:10px 14px;font-size:15px}
  .feedback{margin-top:10px;padding:10px 13px;border-radius:12px;font-size:14px}
  .quiz-actions{justify-content:stretch;margin-top:10px}
  .quiz-actions .btn{width:100%;min-height:50px}
  .quiz-result{padding:24px 16px;border-radius:24px}
  .result-teacher-img{width:min(100%, 280px);height:min(100%, 280px);border-radius:22px}
  .result-score{font-size:24px;margin:10px 0 16px}
  .quiz-list-card{grid-template-columns:104px 1fr;gap:14px;padding:16px}
  .quiz-history-card{padding:14px 16px;gap:12px;border-radius:16px}
  .quiz-history-icon-wrap{width:38px;height:38px}
  .quiz-history-icon-wrap svg{width:19px;height:19px}
  .quiz-history-title{font-size:14.5px}
  .quiz-history-line{font-size:12.5px}
}

/* Very small phones */
@media(max-width:390px){
  .quiz-list-card{grid-template-columns:94px 1fr;gap:10px;padding:14px}
  .quiz-list-icon{width:94px;height:94px;border-radius:20px}
  .quiz-history-pill{font-size:10px;padding:2px 7px}
  .quiz-history-last{font-size:10px}
  .quiz-page .site-header .brand-name{font-size:13px}
  .quiz-hero h1{font-size:24px}
  .quiz-lead{font-size:13px}
  .quiz-card{padding:16px 13px}
  .quiz-card h2{font-size:15px;margin-bottom:10px}
  .quiz-option{font-size:13.5px;min-height:38px;padding:7px 10px}
  .result-teacher-img{width:min(100%, 240px);height:min(100%, 240px);border-radius:20px}
  .result-score{font-size:22px}
}


/* FINAL V3 interaction/alignment fixes */
.quiz-app{width:100%}
.quiz-actions{width:100%;max-width:900px;margin:12px auto 0}
.quiz-actions .btn{box-sizing:border-box}

@media(max-width:760px){
  .quiz-page{overflow-x:hidden}
  .quiz-page .container{width:min(calc(100% - 28px),900px)}
  .quiz-section{padding-top:6px}
  .quiz-progress-wrap{position:sticky;top:0}
  .quiz-card{width:100%;box-sizing:border-box}
  .quiz-actions{width:100%;margin:10px auto 0}
  .quiz-actions .btn{width:100%;box-sizing:border-box}
  .quiz-option{width:100%;box-sizing:border-box}
}

@media(max-width:390px){
  .quiz-page .container{width:calc(100% - 24px)}
  .quiz-card{padding-left:13px;padding-right:13px}
}

/* Make the mobile navigation dropdown clear and keep it above page content. */
@media(max-width:900px){
  .site-header{position:relative;z-index:1000}
  .site-header .nav{position:relative}
  .site-header .nav-links{
    z-index:1100;
    max-height:calc(100vh - 78px);
    overflow-y:auto;
  }
}

/* V4: quiz hero mascot removed from markup. */
.quiz-mascot { display: none !important; }

/* V6.1: keep a compact VI/EN switch visible on mobile quiz pages. */
.mobile-quiz-lang{display:none;align-items:center;gap:0;margin-left:auto;margin-right:8px;border:1px solid var(--line);border-radius:999px;background:#fff;padding:3px;}
.mobile-quiz-lang .lang-btn{border:0;background:transparent;display:flex;align-items:center;gap:4px;padding:5px 7px;border-radius:999px;color:var(--muted);font:inherit;cursor:pointer;}
.mobile-quiz-lang .lang-btn.active{background:#fff4cf;color:var(--navy);font-weight:800;}
.mobile-quiz-lang img{width:16px;height:16px;object-fit:cover;border-radius:50%;}
@media(max-width:760px){
  .mobile-quiz-lang{display:flex;}
  .quiz-page .site-header .nav{gap:6px;}
  .quiz-page .site-header .menu-btn{flex:0 0 auto;}
}

/* V2.3 optimized interactive states */
.matching-wrap{
  display:grid;
  grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);
  gap:18px;
  align-items:start;
}
.matching-column{min-width:0}
.matching-heading{
  font-weight:800;
  color:var(--navy);
  margin:0 0 10px;
}
.matching-column .quiz-option{
  width:100%;
  display:block;
  margin:0 0 9px;
  white-space:normal;
  overflow-wrap:anywhere;
}
.matching-column .quiz-option.selected{
  border-color:#8aa7c8;
  background:#eef5ff;
  box-shadow:0 0 0 2px rgba(138,167,200,.16);
}
.matching-column .quiz-option.correct{
  border-color:#77b77e;
  background:#eaf8ec;
}
.matching-column .quiz-option.incorrect{
  border-color:#e49a91;
  background:#fff0ed;
}
.matching-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:12px;
}
.matching-actions .btn{
  min-height:44px;
}
.answer-line{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.selected-word{
  border:1px solid #cbd7d1;
  border-radius:999px;
  background:#f7faf8;
  color:var(--navy);
  padding:9px 13px;
  font:inherit;
  font-weight:800;
  cursor:pointer;
  touch-action:manipulation;
}
.selected-word:hover:not(:disabled){
  border-color:#b8c7c0;
  transform:translateY(-1px);
}
.selected-word.locked{
  cursor:default;
  background:#eaf8ec;
  border-color:#77b77e;
}
.reorder-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
@media(max-width:520px){
  .matching-wrap{
    grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
    gap:10px;
  }
  .matching-column .quiz-option{
    min-height:50px;
    padding:10px 11px;
    font-size:14px;
  }
  .matching-heading{font-size:14px}
}

/* =========================================================
   v2.5.13 Lesson + Quiz / Web + Mobile responsive viewer
   Production lesson profiles:
   - Web/Mobile: 1080x1350 (4:5)
   - Social:      1080x1920 (9:16)
   ========================================================= */
.lesson-quiz-tabs{display:flex;gap:8px;margin:0 0 18px;padding:5px;border:1px solid var(--line);border-radius:14px;background:#f7faf8;max-width:360px}
.lesson-quiz-tab{flex:1;border:0;background:transparent;border-radius:10px;padding:10px 16px;color:var(--muted);font:inherit;font-weight:800;cursor:pointer;touch-action:manipulation}
.lesson-quiz-tab.active{background:#fff;color:var(--navy);box-shadow:0 1px 5px rgba(0,0,0,.08)}
.lesson-quiz-tab:disabled,.lesson-quiz-tab.disabled,.lesson-quiz-tab[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:none}
.lesson-panel{width:100%}
.lesson-viewer{width:100%;max-width:760px;margin:0 auto;text-align:center}
.lesson-viewer-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 10px;color:var(--muted);font-weight:800}
.lesson-image-wrap{--lesson-source-ratio:.8;position:relative;width:min(100%,460px);height:auto;aspect-ratio:4/5;margin:0 auto;border-radius:18px;overflow:visible;background:#f3f5f4;box-shadow:0 8px 28px rgba(0,0,0,.08);touch-action:pan-y}
.lesson-image{display:block;width:100%;height:100%;object-fit:contain;object-position:center;border-radius:18px;background:#f3f5f4;user-select:none;-webkit-user-drag:none;opacity:1;transition:opacity .18s ease}
.lesson-image-wrap.is-loading .lesson-image{opacity:.72}
.lesson-image-wrap.is-ready .lesson-image{opacity:1}
.lesson-loading{position:absolute;inset:0;display:grid;place-items:center;border-radius:18px;background:rgba(255,255,255,.72);font-weight:800;color:var(--navy);z-index:40;transition:opacity .18s ease}
.lesson-loading[hidden],.lesson-image-wrap.is-ready .lesson-loading{display:none !important}
.lesson-audio-row{display:flex;justify-content:center;gap:10px;margin:12px 0 8px;flex-wrap:wrap}
.lesson-play-btn,.lesson-replay-btn{min-width:110px;min-height:44px;touch-action:manipulation}
.lesson-dots{display:flex;justify-content:center;align-items:center;gap:5px;flex-wrap:wrap;margin:8px auto 12px;max-width:520px}
.lesson-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:#cbd4d0;cursor:pointer;touch-action:manipulation}
.lesson-dot.active{width:22px;border-radius:99px;background:var(--navy)}

/* Previous/Next overlay the image edges. The engine moves the existing row into the frame. */
.lesson-nav-row{position:absolute;left:0;right:0;top:50%;width:100%;margin:0;padding:0;transform:translateY(-50%);display:flex;align-items:center;justify-content:space-between;pointer-events:none;z-index:35}
.lesson-nav-btn{width:54px;height:54px;flex:0 0 54px;border:2px solid #052f5c;border-radius:50%;background:#063b73;color:#fff;font-size:29px;line-height:1;font-weight:900;cursor:pointer;touch-action:manipulation;pointer-events:auto;box-shadow:0 5px 14px rgba(0,0,0,.24);display:flex;align-items:center;justify-content:center;transition:transform .12s ease,background-color .12s ease,box-shadow .12s ease}
.lesson-nav-btn:first-child{transform:translateX(-58px)}
.lesson-nav-btn:last-child{transform:translateX(58px)}
.lesson-nav-btn:hover:not(:disabled){background:#052f5c;box-shadow:0 6px 16px rgba(0,0,0,.28)}
.lesson-nav-btn:active:not(:disabled){transform:translateX(-58px) scale(.95)}
.lesson-nav-btn:last-child:active:not(:disabled){transform:translateX(58px) scale(.95)}
.lesson-nav-btn:disabled{opacity:.38;cursor:not-allowed}

.lesson-image-wrap[data-aspect="4x5"]{width:min(100%,460px);aspect-ratio:4/5;max-height:calc(100vh - 250px)}
.lesson-image-wrap[data-aspect="9x16"]{width:min(100%,390px);aspect-ratio:9/16;max-height:calc(100vh - 220px)}
.lesson-image-wrap[data-aspect="custom"]{max-height:calc(100vh - 220px)}
.lesson-image-wrap[data-aspect="custom"] .lesson-image{object-fit:contain}
.lesson-complete{padding:16px;border:1px solid var(--line);border-radius:16px;background:#fbfdfc;margin:4px auto 10px;max-width:520px}
.lesson-complete-title{font-weight:900;color:var(--navy);margin-bottom:12px}
.lesson-complete .btn{min-width:180px}
#lessonAudio{display:none}

/* Quiz interaction sizing */
.quiz-card,.quiz-option,.quiz-input,.word-chip,.selected-word,.btn{box-sizing:border-box}
.quiz-card{overflow-wrap:anywhere;word-break:normal}
.quiz-card h2{overflow-wrap:anywhere}
.quiz-option{white-space:normal;overflow-wrap:anywhere;line-height:1.35}
.quiz-input{width:100%;max-width:100%}
.fill-wrap{width:100%;max-width:100%}
.reorder-area,.answer-line,.word-chip{max-width:100%}
.matching-wrap{width:100%;max-width:100%}
.matching-column{min-width:0}
.matching-column .quiz-option{white-space:normal;overflow-wrap:anywhere}
.quiz-actions{width:100%;max-width:900px;margin:12px auto 0}
.quiz-actions .btn{min-height:48px}

@media(max-width:900px){
  .quiz-section{padding-top:16px}
  .quiz-card{padding:24px}
  .lesson-viewer{max-width:100%}
  .lesson-image-wrap[data-aspect="4x5"]{width:min(100%,420px);max-height:calc(100vh - 220px)}
  .lesson-image-wrap[data-aspect="9x16"]{width:min(100%,350px);max-height:calc(100vh - 210px)}
  .lesson-nav-row{display:none}
}

@media(max-width:760px){
  .quiz-page{overflow-x:hidden}
  .quiz-page .container{width:min(calc(100% - 28px),900px)}
  .quiz-section{padding:8px 0 28px}
  .quiz-progress-wrap{margin:0 -2px 8px;padding:7px 2px}
  .quiz-card{width:100%;padding:14px 14px;border-radius:16px}
  .quiz-card h2{font-size:17px;line-height:1.28;margin-bottom:12px}
  .quiz-option{width:100%;min-height:44px;padding:9px 12px;font-size:14.5px;border-radius:11px}
  .fill-wrap{align-items:stretch;flex-direction:column}
  .quiz-input{min-height:52px;font-size:16px}
  .answer-line{min-height:56px;font-size:17px;padding:13px}
  .word-chip{padding:10px 14px;font-size:15px}
  .quiz-actions{margin:10px auto 0}
  .quiz-actions .btn{width:100%;min-height:50px}

  .lesson-quiz-tabs{max-width:none;margin-bottom:12px}
  .lesson-viewer-top{font-size:14px;margin-bottom:8px}
  .lesson-image-wrap{border-radius:14px}
  .lesson-image{border-radius:14px}
  .lesson-image-wrap[data-aspect="4x5"]{width:min(calc(100vw - 72px),360px);max-height:calc(100dvh - 245px);aspect-ratio:4/5}
  .lesson-image-wrap[data-aspect="9x16"]{width:min(calc(100vw - 76px),330px);max-height:calc(100dvh - 220px);aspect-ratio:9/16}
  .lesson-audio-row{gap:8px;margin:10px 0 7px}
  .lesson-play-btn,.lesson-replay-btn{min-width:105px;min-height:42px}
  .lesson-dots{margin-top:7px;margin-bottom:9px}
  .lesson-viewer{touch-action:pan-y}
  .lesson-panel,.lesson-viewer,.lesson-image-wrap{overscroll-behavior-x:contain}

  .matching-wrap{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:10px}
  .matching-column .quiz-option{min-height:50px;padding:10px 11px;font-size:14px}
  .matching-heading{font-size:14px}
  .selected-word{padding:9px 11px;font-size:14px}
}

@media(max-width:480px){
  .quiz-list-card{grid-template-columns:84px 1fr;gap:14px;padding:16px;border-radius:20px}
  .quiz-list-icon{width:84px;height:84px;font-size:36px;border-radius:22px}
  .quiz-list-actions{display:flex;gap:8px;width:100%}
  .quiz-list-actions .btn{flex:1;min-width:0;padding:10px 8px;text-align:center}
  .quiz-search-inner{padding:2px 10px 2px 14px;border-radius:999px}
  .quiz-search-input{height:38px;font-size:12px}
  .quiz-search-input::placeholder{font-size:11.5px}
  .quiz-search-icon{font-size:13px;margin-right:6px}
}

@media(max-width:390px){
  .quiz-page .container{width:calc(100% - 24px)}
  .quiz-card{padding-left:13px;padding-right:13px}
  .quiz-card h2{font-size:15px;margin-bottom:10px}
  .quiz-option{font-size:13.5px;min-height:38px;padding:7px 10px}
  .lesson-image-wrap[data-aspect="4x5"]{width:min(calc(100vw - 64px),320px);max-height:calc(100dvh - 225px)}
  .lesson-image-wrap[data-aspect="9x16"]{width:min(calc(100vw - 68px),300px);max-height:calc(100dvh - 210px)}
}

/* Vietnamese / Audio Quiz Option Speaker Button */
.quiz-option.has-audio{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.quiz-option.has-audio .quiz-option-text{
  flex:1;
  text-align:left;
}
.quiz-option-audio-btn{
  width:36px;
  height:36px;
  border-radius:50%;
  background:#eff6ff;
  border:1.5px solid #bfdbfe;
  color:#2563eb;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  flex-shrink:0;
  cursor:pointer;
  transition:all .18s ease;
  box-shadow:0 2px 5px rgba(37,99,235,.08);
}
.quiz-option-audio-btn:hover{
  background:#dbeafe;
  border-color:#60a5fa;
  transform:scale(1.1);
}
.quiz-option.is-playing-audio .quiz-option-audio-btn{
  background:#2563eb;
  border-color:#1d4ed8;
  color:#fff;
  transform:scale(1.12);
  box-shadow:0 0 0 4px rgba(59,130,246,.25);
}
.quiz-option.is-locked{
  opacity:.95;
}



/* Quiz Card Level Switcher on learn-vietnamese.html */
.quiz-card-level-switch {
  display: inline-flex;
  align-items: center;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  padding: 1px 2px;
  gap: 2px;
  vertical-align: middle;
}
.level-switch-btn {
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.2;
}
.level-switch-btn:hover {
  color: #0f172a;
}
.level-switch-btn.is-active[data-level="1"] {
  background: #7e22ce;
  color: #fff;
  box-shadow: 0 1px 3px rgba(126, 34, 206, 0.35);
}
.level-switch-btn.is-active[data-level="2"] {
  background: #1d4ed8;
  color: #fff;
  box-shadow: 0 1px 3px rgba(29, 78, 216, 0.35);
}

/* Interactive Badge (Click to Level Up) on learn-vietnamese.html */
button.quiz-tag.quiz-card-interactive-badge {
  cursor: pointer;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 10px;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
button.quiz-tag.quiz-card-interactive-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
  filter: brightness(0.97);
}
button.quiz-tag.quiz-card-interactive-badge:active {
  transform: translateY(0);
}
button.quiz-tag.quiz-card-interactive-badge .badge-type-label {
  display: inline-flex;
  align-items: center;
}
button.quiz-tag.quiz-card-interactive-badge .badge-action-hint {
  font-size: 9px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.07);
  letter-spacing: 0.2px;
  transition: all 0.15s ease;
}
button.quiz-tag.quiz-card-interactive-badge:hover .badge-action-hint {
  background: rgba(0, 0, 0, 0.13);
}