*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Noto Sans Tamil",sans-serif;background:#f5fbfa;color:#193d3b}
.site-header{position:sticky;top:0;z-index:10;background:#0f766e;color:#fff;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{font-weight:800;font-size:16px}.brand span{display:block;font-size:11px;font-weight:500;opacity:.9}
.back-link{color:#fff;text-decoration:none;background:rgba(255,255,255,.15);padding:8px 12px;border-radius:999px;font-size:13px}
.games-page{max-width:800px;margin:auto;padding:16px}.games-hero{text-align:center;padding:18px 8px}
.eyebrow{display:inline-block;background:#fff0c7;color:#865900;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:800}
.games-hero h1{margin:12px 0 7px;color:#0f766e;font-size:clamp(27px,8vw,42px)}.games-hero p{margin:0;color:#59716f;line-height:1.7}
.game-tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:5px 0 14px}
.game-tabs a{text-align:center;text-decoration:none;padding:11px 7px;border-radius:14px;background:#e8f3f1;color:#27605b;font-size:13px;font-weight:800;border:1px solid #d2e7e3}
.game-tabs a.active{background:#0f766e;color:#fff;border-color:#0f766e}
.quiz-card{background:#fff;border:1px solid #d9ece8;border-radius:26px;padding:17px 14px 20px;box-shadow:0 10px 35px rgba(15,118,110,.12)}
.quiz-top{display:flex;justify-content:space-between;gap:10px;align-items:center;font-weight:900;color:#0f766e}.quiz-top span:first-child{font-size:16px}.scoreBadge{background:#fff5d9;color:#795500;border-radius:999px;padding:5px 10px}
.subtitle{font-size:13px;color:#607572;line-height:1.6;margin:7px 0 12px}
.progress-label{display:flex;justify-content:space-between;font-size:12px;color:#6c7d7a;margin-bottom:5px}.progress{height:8px;background:#e6efed;border-radius:999px;overflow:hidden}.progress div{height:100%;background:#f0ae38;border-radius:999px;transition:width .3s}
.question{min-height:155px;display:flex;align-items:center;justify-content:center;text-align:center;font-family:"Noto Naskh Arabic","Amiri",serif;font-size:clamp(58px,18vw,100px);font-weight:700;color:#123f3d;line-height:1.4;padding:15px 4px}.question.word,.question.phrase{font-size:clamp(38px,10vw,62px);font-family:"Noto Naskh Arabic","Amiri",serif}.question.listen{font-family:system-ui,-apple-system,"Noto Sans Tamil",sans-serif!important;font-size:15px!important;line-height:1.45!important;}
.options{display:grid;grid-template-columns:1fr;gap:9px}.option{border:2px solid #d8eae6;background:#f5fbfa;border-radius:15px;padding:12px 10px;font-family:system-ui,-apple-system,"Noto Sans Tamil",sans-serif!important;font-size:15px!important;line-height:1.35!important;font-weight:700!important;color:#275451;cursor:pointer;min-height:48px}.option:hover{border-color:#8fc9c0}.option.correct{background:#dff7e8;border-color:#42ad6b;color:#1f7142}.option.wrong{background:#ffe7e4;border-color:#e87568;color:#9b3026}
.listen-btn{display:block;margin:0 auto 13px;border:0;background:#f0ae38;color:#3d2a00;border-radius:999px;padding:11px 18px;font-weight:900;font-size:15px;cursor:pointer}
.feedback{min-height:40px;margin:11px 0 0;border-radius:13px;padding:9px;text-align:center;font-size:14px;font-weight:800}.feedback.good{background:#e4f8eb;color:#267346}.feedback.try{background:#fff4de;color:#775516}
.next-btn{width:100%;border:0;border-radius:15px;margin-top:8px;padding:13px;background:#0f766e;color:#fff;font-size:15px;font-weight:900;cursor:pointer}.next-btn:disabled{opacity:.4;cursor:not-allowed}.next-btn:not(:disabled){box-shadow:0 7px 18px rgba(15,118,110,.22)}
.game-tip{margin:15px 0 30px;background:#fff;border:1px solid #e4eeee;border-radius:22px;padding:17px}.game-tip h2{margin:0 0 11px;color:#0f766e;font-size:19px}.tip-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tip-grid div{background:#f2faf8;border-radius:13px;padding:10px;font-size:12px;line-height:1.55;color:#526967}
.result{text-align:center;padding:20px 5px 10px}.result-icon{font-size:65px}.result h2{color:#0f766e;margin:5px 0}.result-score{font-size:48px;font-weight:900;color:#a05c00}.result p{color:#5b706d;line-height:1.6}.restart-btn,.home-btn{display:block;width:100%;padding:13px;border:0;border-radius:14px;margin-top:9px;text-decoration:none;font-size:15px;font-weight:900;cursor:pointer}.restart-btn{background:#f0ae38;color:#3b2900}.home-btn{background:#e5f2f0;color:#155a55}
@media(min-width:600px){.game-tabs{grid-template-columns:repeat(4,1fr)}.options{grid-template-columns:repeat(3,1fr)}.question{min-height:190px}}

/* Stage 7 completion UI */
.completion-box{text-align:center;padding:28px 16px}.completion-icon{font-size:54px}.completion-badge{display:inline-block;margin:8px 0;padding:6px 13px;border-radius:999px;background:#dff8eb;color:#11734e;font-weight:900;font-size:13px}.completion-box h2{margin:8px 0;font-size:24px}.completion-box p{color:#64748b}.completion-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:20px}.completion-actions a,.progress-btn{display:inline-block;text-decoration:none;padding:12px 16px;border-radius:13px;font-weight:800}.next-lesson-btn{background:#1464d2;color:#fff}.progress-btn{background:#eef5ff;color:#1464d2}.finish-btn{background:#16a36b!important;color:#fff!important}.completion-inline{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;padding:10px}.completion-inline strong{color:#169a67}.completion-inline a{font-weight:800;color:#1464d2;text-decoration:none}

.letter-question{display:flex;flex-direction:column;align-items:center;gap:8px}.letter-glyph{font-family:"Noto Naskh Arabic","Amiri",serif;font-size:clamp(86px,24vw,140px);line-height:1.05}.letter-prompt{font-family:system-ui,-apple-system,"Noto Sans Tamil",sans-serif!important;font-size:14px!important;line-height:1.4!important;font-weight:700!important;color:#5b706d!important;display:block!important;max-width:90%;}.question.letter{min-height:200px}

/* Mobile Tamil text sizing refinement */
@media(max-width:599px){.option{font-size:15px!important;min-height:48px;padding:11px 10px}.letter-prompt{font-size:14px!important}.feedback{font-size:13px!important}.next-btn,.listen-btn{font-size:14px!important}}


/* Stage 12 — Listen & Choose: scoped instruction styling only */
.question.listen .listen-question{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;max-width:100%;text-align:center;font-family:system-ui,-apple-system,"Noto Sans Tamil",sans-serif !important;font-size:15px !important;line-height:1.45 !important;font-weight:700 !important;color:#28605c !important;}
.question.listen .listen-icon{font-family:system-ui,-apple-system,sans-serif !important;font-size:52px !important;line-height:1 !important;}
.question.listen .listen-question > div:not(.listen-icon){font-family:system-ui,-apple-system,"Noto Sans Tamil",sans-serif !important;font-size:15px !important;line-height:1.45 !important;font-weight:700 !important;}
@media(min-width:600px){.question.listen .listen-question,.question.listen .listen-question > div:not(.listen-icon){font-size:17px !important;}}

/* FINAL Stage 12 scoped fix: listening instruction only */
#question.question.listen { font-family:system-ui,-apple-system,"Noto Sans Tamil",sans-serif !important; font-size:15px !important; line-height:1.45 !important; }
#question.question.listen > .listen-question { font-family:system-ui,-apple-system,"Noto Sans Tamil",sans-serif !important; font-size:15px !important; line-height:1.45 !important; }
#question.question.listen > .listen-question > div:not(.listen-icon) { font-family:system-ui,-apple-system,"Noto Sans Tamil",sans-serif !important; font-size:15px !important; line-height:1.45 !important; font-weight:700 !important; }
#question.question.listen > .listen-question > .listen-icon { font-family:system-ui,-apple-system,sans-serif !important; font-size:52px !important; line-height:1 !important; }
@media(min-width:600px){#question.question.listen,#question.question.listen > .listen-question,#question.question.listen > .listen-question > div:not(.listen-icon){font-size:18px !important;}}

/* Stage 12 — Phrase quiz Tamil question fix (scoped only to the 3rd quiz) */
#question.question.phrase {
  font-family: system-ui, -apple-system, "Noto Sans Tamil", sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  font-weight: 700 !important;
  text-align: center;
  direction: ltr;
}



/* Stage 13 — Harakat Challenge: fully scoped styles; does not alter other quizzes */
.question.harakat{font-family:system-ui,-apple-system,"Noto Sans Tamil",sans-serif!important;font-size:15px!important;line-height:1.45!important;min-height:190px!important}
.question.harakat .harakat-question{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;text-align:center}
.question.harakat .harakat-glyph{font-family:"Noto Naskh Arabic","Amiri",serif!important;font-size:clamp(82px,23vw,130px)!important;line-height:1.15!important;font-weight:700!important;color:#123f3d!important}
.question.harakat .harakat-prompt{font-family:system-ui,-apple-system,"Noto Sans Tamil",sans-serif!important;font-size:15px!important;line-height:1.45!important;font-weight:700!important;color:#5b706d!important}
@media(min-width:600px){.question.harakat .harakat-prompt{font-size:17px!important}.question.harakat{min-height:210px!important}}
@media(min-width:900px){.game-tabs{grid-template-columns:repeat(5,1fr)}}




/* Stage 14 — Joining Challenge: fully scoped styles; does not alter other quizzes */
.question.joining{font-family:system-ui,-apple-system,"Noto Sans Tamil",sans-serif!important;font-size:15px!important;line-height:1.45!important;min-height:190px!important}
.question.joining .joining-question{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:100%;text-align:center}
.question.joining .joining-prompt-ar{font-family:"Noto Naskh Arabic","Amiri",serif!important;font-size:clamp(54px,15vw,86px)!important;line-height:1.2!important;font-weight:700!important;color:#123f3d!important;direction:rtl}
.question.joining .joining-prompt-ta{font-family:system-ui,-apple-system,"Noto Sans Tamil",sans-serif!important;font-size:15px!important;line-height:1.45!important;font-weight:700!important;color:#5b706d!important}
@media(min-width:600px){.question.joining{min-height:210px!important}.question.joining .joining-prompt-ta{font-size:17px!important}.question.joining .joining-prompt-ar{font-size:78px!important}}












@media (min-width:600px){
  #question.question.phrase { font-size: 18px !important; }
}


/* Mixed Arabic + Tamil prompt: keep each script visually separate. */
.question.mixed-text{
  flex-direction:column;
  gap:12px;
  font-family:system-ui,-apple-system,"Noto Sans Tamil",sans-serif!important;
  font-size:18px!important;
  line-height:1.45!important;
  font-weight:700!important;
  text-align:center;
  direction:ltr;
  min-height:190px;
}
.question.mixed-text .prompt-ta{
  display:block;
  font-family:system-ui,-apple-system,"Noto Sans Tamil",sans-serif!important;
  font-size:clamp(20px,5vw,30px)!important;
  line-height:1.45!important;
  font-weight:800!important;
  color:#174f4c!important;
}
.question.mixed-text .prompt-ar{
  display:block;
  font-family:"Noto Naskh Arabic","Amiri",serif!important;
  font-size:clamp(48px,13vw,78px)!important;
  line-height:1.25!important;
  font-weight:700!important;
  color:#123f3d!important;
  direction:rtl;
}
@media(max-width:599px){
  .question.mixed-text{gap:9px;min-height:180px!important;padding:12px 5px!important}
  .question.mixed-text .prompt-ta{font-size:20px!important}
  .question.mixed-text .prompt-ar{font-size:clamp(44px,13vw,68px)!important}
}


/* Final safeguard for mixed Arabic + Tamil prompts. */
#question.question.mixed-text{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:10px!important;font-family:system-ui,-apple-system,"Noto Sans Tamil",sans-serif!important;font-size:18px!important;line-height:1.45!important;direction:ltr!important;}
#question.question.mixed-text > .prompt-ta{display:block!important;width:100%!important;text-align:center!important;font-family:system-ui,-apple-system,"Noto Sans Tamil",sans-serif!important;font-size:clamp(19px,5vw,28px)!important;line-height:1.45!important;font-weight:700!important;direction:ltr!important;color:#5b706d!important;}
#question.question.mixed-text > .prompt-ar{display:block!important;width:100%!important;text-align:center!important;font-family:"Noto Naskh Arabic","Amiri",serif!important;font-size:clamp(46px,13vw,72px)!important;line-height:1.2!important;font-weight:700!important;direction:rtl!important;color:#123f3d!important;}