:root {
    --g: #1a4d2e;
    --g2: #4f6f52;
    --cream: #f5efe6;
    --sand: #d6cc99;
    --gold: #ffd700;
    --orange: #f59e0b;
    --blue: #2563eb;
    --red: #dc2626;
    --ok: #22a447;
}

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    padding: 18px;
    background: linear-gradient(145deg, var(--g), var(--g2));
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    color: #173225;
}

button {
    font: inherit;
    touch-action: manipulation;
}

.app {
    width: min(1580px, 100%);
    min-height: calc(100vh - 36px);
    margin: auto;
    padding: clamp(18px, 2vw, 34px);
    background: var(--cream);
    border: 8px solid #e8dfca;
    border-radius: 38px;
    box-shadow: 0 28px 70px #0007;
}

/* === الرأس === */
.top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
    padding: 16px 24px;
    margin-bottom: 22px;
    background: linear-gradient(145deg, var(--gold), var(--orange));
    border: 5px solid #fff;
    border-radius: 34px;
    box-shadow: 0 8px 0 #b8860b;
}

.stage-title,
.score {
    padding: 12px 24px;
    border-radius: 28px;
    font-size: clamp(24px, 2.2vw, 38px);
    font-weight: 900;
}

.stage-title {
    justify-self: start;
    background: #fff;
}

.title {
    margin: 0;
    color: var(--g);
    font-size: clamp(32px, 3.2vw, 52px);
    text-align: center;
}

.score {
    justify-self: end;
    min-width: 165px;
    color: #fff;
    background: var(--g);
    border: 4px solid var(--gold);
    text-align: center;
}

/* === أزرار المراحل === */
.stages {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    padding: 16px;
    margin-bottom: 22px;
    background: var(--sand);
    border: 5px solid #fff;
    border-radius: 32px;
}

.stage-btn {
    min-height: 78px;
    padding: 10px;
    border: 4px solid #fff;
    border-radius: 26px;
    color: #fff;
    background: var(--g);
    box-shadow: 0 7px 0 #0a2f1a;
    font-size: clamp(19px, 1.7vw, 29px);
    font-weight: 900;
    cursor: pointer;
    opacity: .35;
    pointer-events: none;
}

.stage-btn.open,
.stage-btn.active,
.stage-btn.done {
    opacity: 1;
    pointer-events: auto;
}

.stage-btn.active {
    color: var(--g);
    background: var(--gold);
    box-shadow: 0 9px 0 #b8860b;
    transform: translateY(-2px);
}

.stage-btn.done {
    background: var(--ok);
}

/* === اللوحة === */
.panel {
    min-height: 580px;
    padding: clamp(20px, 2.4vw, 38px);
    background: linear-gradient(145deg, #b5c18e, #c7b7a3);
    border: 7px solid #fff;
    border-radius: 38px;
    box-shadow: inset 0 0 28px #fff8;
}

.instruction {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 24px;
    padding: 13px 30px;
    color: #fff;
    background: var(--g);
    border: 4px solid var(--gold);
    border-radius: 999px;
    font-size: clamp(23px, 2.2vw, 38px);
    font-weight: 900;
    text-align: center;
}

/* === التعلم === */
.learn-grid {
    display: grid;
    grid-template-columns: 1.6fr .8fr 1.25fr;
    gap: 24px;
}

.card {
    min-height: 365px;
    padding: 24px;
    background: #fff;
    border: 7px solid var(--gold);
    border-radius: 34px;
    box-shadow: 0 10px 0 #37412359;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.label {
    margin-bottom: 14px;
    font-size: clamp(20px, 1.6vw, 28px);
    font-weight: 900;
}

.objects {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 255px;
    font-size: clamp(48px, 5.2vw, 82px);
    line-height: 1;
}

.zero {
    font-size: clamp(80px, 8vw, 130px);
}

.digit {
    font-size: clamp(130px, 15vw, 230px);
    font-weight: 1000;
    color: var(--g2);
    line-height: 1;
    text-shadow: 5px 5px 0 var(--sand);
}

/* === أزرار الصوت === */
.sound {
    width: 100%;
    min-height: 210px;
    padding: 18px;
    border: 6px solid var(--gold);
    border-radius: 30px;
    color: var(--g);
    background: #fffdf3;
    box-shadow: 0 9px 0 #b8860b;
    cursor: pointer;
    transition: .18s;
}

.sound:hover {
    transform: translateY(-3px);
}

.sound.armed,
.sound.listening {
    color: #fff;
    background: var(--blue);
    border-color: #bfdbfe;
    box-shadow: 0 9px 0 #1e3a8a;
    animation: pulse 1s infinite;
}

.sound.correct {
    color: #fff;
    background: var(--ok);
    box-shadow: 0 9px 0 #166534;
    animation: none;
}

.sound.wrong,
.option.wrong,
.verify.wrong {
    color: #fff;
    background: var(--red);
    animation: shake .35s;
}

.speaker {
    display: block;
    margin-bottom: 8px;
    font-size: clamp(55px, 5.8vw, 88px);
    line-height: 1;
}

.tf {
    display: block;
    font-size: clamp(43px, 4.8vw, 76px);
    font-weight: 900;
    line-height: 1.2;
    direction: ltr;
}

.note {
    display: block;
    margin-top: 8px;
    font-size: clamp(16px, 1.3vw, 22px);
    font-weight: 800;
}

/* === التنقل === */
.learn-nav {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
    margin-top: 28px;
}

.nav {
    width: 94px;
    height: 94px;
    border: 6px solid #fff;
    border-radius: 50%;
    color: var(--g);
    background: linear-gradient(145deg, var(--gold), var(--orange));
    box-shadow: 0 9px 0 #b8860b;
    font-size: 52px;
    font-weight: 1000;
    cursor: pointer;
}

.nav:disabled {
    filter: grayscale(1);
    opacity: .35;
}

.dots {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #1a4d2e40;
}

.dot.seen {
    background: var(--ok);
}

.dot.now {
    outline: 5px solid #fff;
    background: var(--gold);
    transform: scale(1.18);
}

/* === أزرار عامة === */
.start,
.verify,
.restart {
    min-height: 78px;
    padding: 14px 38px;
    border: 5px solid #fff;
    border-radius: 28px;
    color: #fff;
    background: var(--g);
    box-shadow: 0 8px 0 #0a2f1a;
    font-size: clamp(24px, 2vw, 34px);
    font-weight: 900;
    cursor: pointer;
}

.center {
    text-align: center;
}

.start-wrap {
    margin-top: 28px;
    text-align: center;
}

/* === رأس التمارين === */
.ex-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px;
}

.counter {
    min-width: 155px;
    padding: 10px 18px;
    border-radius: 24px;
    background: #fff;
    border: 4px solid var(--gold);
    font-size: clamp(22px, 1.8vw, 30px);
    font-weight: 900;
    text-align: center;
}

/* === التمرين 1 و 2 === */
.question {
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 25px;
    padding: 22px;
    border: 6px solid #fff;
    border-radius: 30px;
    background: #ffffff80;
}

.q-objects {
    font-size: clamp(55px, 6.4vw, 100px);
    line-height: 1;
    text-align: center;
}

.choices {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.audio-choice {
    min-height: 190px;
}

.audio-choice .speaker {
    font-size: clamp(48px, 4.7vw, 72px);
}

.audio-choice .tf {
    font-size: clamp(34px, 3.6vw, 58px);
}

.option {
    min-height: 175px;
    border: 7px solid #fff;
    border-radius: 32px;
    color: var(--g);
    background: var(--gold);
    box-shadow: 0 10px 0 #b8860b;
    font-size: clamp(75px, 8vw, 120px);
    font-weight: 1000;
    cursor: pointer;
}

.option.correct {
    color: #fff;
    background: var(--ok);
    box-shadow: 0 10px 0 #166534;
}

.prompt {
    width: min(440px, 100%);
    min-height: 205px;
}

/* === التمرين 3: المطابقة === */
.match {
    display: grid;
    grid-template-columns: 1fr 1.45fr;
    gap: 35px;
    direction: ltr;
}

.match-col {
    display: grid;
    gap: 15px;
    direction: rtl;
}

.match-num {
    min-height: 112px;
    border: 6px solid #fff;
    border-radius: 28px;
    color: var(--g);
    background: var(--gold);
    box-shadow: 0 7px 0 #b8860b;
    font-size: 68px;
    font-weight: 1000;
    cursor: pointer;
}

.match-num.selected {
    color: #fff;
    background: var(--blue);
    box-shadow: 0 7px 0 #1e3a8a;
}

.match-num.matched,
.match-audio.matched {
    color: #fff;
    background: var(--ok);
    box-shadow: 0 7px 0 #166534;
    pointer-events: none;
    animation: none;
}

.match-audio {
    min-height: 112px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 15px;
    padding: 10px 22px;
}

.match-audio .speaker {
    margin: 0;
    font-size: 50px;
}

.match-audio .tf {
    font-size: clamp(34px, 3.5vw, 55px);
}

/* === التمرين 4: بناء الكمية === */
.builder {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
    margin: 20px 0;
}

.count-btn {
    width: 115px;
    height: 115px;
    border: 7px solid #fff;
    border-radius: 50%;
    color: #fff;
    background: var(--g);
    box-shadow: 0 9px 0 #0a2f1a;
    font-size: 68px;
    font-weight: 1000;
    cursor: pointer;
}

.built {
    min-height: 245px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    border: 7px dashed var(--g);
    border-radius: 30px;
    background: #fff;
    font-size: clamp(48px, 5.3vw, 85px);
}

.built-count {
    width: fit-content;
    min-width: 110px;
    margin: 15px auto;
    padding: 7px 20px;
    border-radius: 24px;
    color: #fff;
    background: var(--g);
    font-size: 46px;
    font-weight: 1000;
    text-align: center;
}

/* === التغذية الراجعة === */
.feedback {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    background: #0a2f1a52;
    pointer-events: none;
}

.feedback.show {
    display: flex;
}

.feedback-box {
    min-width: 360px;
    padding: 34px 55px;
    border: 8px solid #fff;
    border-radius: 40px;
    color: #fff;
    background: var(--ok);
    box-shadow: 0 16px 0 #166534;
    font-size: 55px;
    font-weight: 1000;
    text-align: center;
}

.feedback.error .feedback-box {
    background: var(--red);
    box-shadow: 0 16px 0 #7f1d1d;
}

/* === شاشة النهاية === */
.final {
    min-height: 580px;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 45px;
    border: 8px solid #fff;
    border-radius: 42px;
    background: linear-gradient(145deg, var(--gold), var(--orange));
    text-align: center;
}

.final.show {
    display: flex;
    animation: pop .45s;
}

.final h2 {
    margin: 0;
    font-size: clamp(55px, 6vw, 90px);
}

.final-score {
    margin: 25px;
    color: #fff;
    font-size: clamp(85px, 10vw, 150px);
    font-weight: 1000;
    text-shadow: 5px 5px 0 var(--g);
}

.stars {
    max-width: 1200px;
    margin-bottom: 25px;
    font-size: clamp(38px, 4vw, 62px);
}

.footer {
    margin-top: 18px;
    color: #fff;
    font-size: 25px;
    font-weight: 800;
    text-align: center;
}

/* === أنيميشن === */
@keyframes pulse {
    50% {
        transform: scale(1.025);
    }
}

@keyframes shake {
    25% {
        transform: translateX(-12px);
    }
    50% {
        transform: translateX(12px);
    }
    75% {
        transform: translateX(-7px);
    }
}

@keyframes pop {
    from {
        transform: scale(.7);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* === استجابة === */
@media (max-width: 1050px) {
    .top {
        grid-template-columns: 1fr 1fr;
    }
    .title {
        grid-column: 1 / -1;
        grid-row: 1;
    }
    .stage-title,
    .score {
        grid-row: 2;
    }
    .stages {
        grid-template-columns: repeat(3, 1fr);
    }
    .learn-grid {
        grid-template-columns: 1fr 1fr;
    }
    .visual {
        grid-column: 1 / -1;
    }
    .choices {
        grid-template-columns: repeat(2, 1fr);
    }
}

.verify.correct {
    color: #fff;
    background: var(--ok);
    box-shadow: 0 8px 0 #166534;
}
/* === النتيجة النهائية: الاسم ثم النقطة من اليسار إلى اليمين === */
.result-ltr {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    flex-wrap: wrap;
}
.student-name, .student-mark {
    direction: ltr;
    unicode-bidi: isolate;
}

.level-tag{
    display:block;
    margin-top:5px;
    font-size:clamp(16px,1.2vw,22px);
    font-weight:900;
    color:var(--g);
}

/* === المستوى الثالث: تمرين الكتابة === */
.write-prompt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;margin-bottom:22px}
.write-sound{width:min(330px,100%);min-height:150px}
.write-number{min-width:220px;padding:18px 45px;border:7px solid #fff;border-radius:34px;background:var(--gold);color:var(--g);box-shadow:0 10px 0 #b8860b;font-size:clamp(100px,12vw,180px);font-weight:1000;text-align:center;line-height:1}
.answer-boxes{display:flex;direction:ltr;justify-content:center;flex-wrap:wrap;gap:12px;min-height:100px;margin:20px auto 26px}
.answer-box{width:78px;height:88px;display:flex;align-items:center;justify-content:center;border:5px solid var(--g);border-radius:18px;background:#fff;color:var(--g);font-size:50px;font-weight:1000;box-shadow:0 6px 0 #8c9670}
.letter-keys{display:flex;direction:ltr;justify-content:center;flex-wrap:wrap;gap:15px;margin:20px auto 28px;max-width:1100px}
.letter-key{min-width:88px;height:88px;padding:8px 18px;border:6px solid #fff;border-radius:22px;background:var(--gold);color:var(--g);box-shadow:0 8px 0 #b8860b;font-size:48px;font-weight:1000;cursor:pointer}
.letter-key:disabled{opacity:.32;transform:translateY(5px);box-shadow:0 3px 0 #b8860b}
.write-actions{display:flex;justify-content:center;align-items:center;gap:24px;margin-top:18px}
.clear-write{width:84px;height:78px;border:5px solid #fff;border-radius:25px;background:var(--orange);color:#fff;box-shadow:0 8px 0 #b8860b;font-size:40px;font-weight:1000;cursor:pointer}


/* Responsive layout and locally bundled Tifinagh glyphs. */
@font-face{font-family:Tifinagh;src:url('fonts/NotoSansTifinagh-Regular.ttf') format('truetype');font-weight:100 1000;font-display:swap;unicode-range:U+2D30-2D7F}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:Tifinagh,"Segoe UI",Tahoma,Arial,sans-serif;min-height:100svh;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
.app{min-height:calc(100svh - 16px)}
.top{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.top>*,.learn-grid>*,.choices>*,.match>*,.builder>*{min-width:0}
.stages{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.stage-btn{width:100%;min-width:0;font-size:clamp(15px,1.6vw,23px);line-height:1.6;overflow-wrap:normal}
.stage-title,.instruction,.label,.footer,.stage-btn{direction:ltr;unicode-bidi:isolate;line-height:1.65;overflow-wrap:break-word}
.level-tag{direction:rtl;unicode-bidi:isolate}
.tf,.answer-boxes,.letter-keys{direction:ltr;unicode-bidi:isolate}
.score,.counter,.score-ltr{direction:ltr;unicode-bidi:isolate;white-space:nowrap}
.score-ltr{display:inline-block}
.dots{flex-wrap:wrap;min-width:0}
.dot{flex:0 0 14px;height:14px;width:14px}
.feedback{padding:12px}.feedback-box{min-width:0;max-width:100%;padding:24px;font-size:clamp(23px,5vw,55px);overflow-wrap:break-word}
.ex-head .instruction{margin:0;flex:1}.ex-head{flex-wrap:wrap}
.footer{color:var(--g)}
.audio-status{padding:12px;background:#fff4ca;border:2px solid #b8860b;border-radius:14px;line-height:1.7}
button:focus-visible{outline:4px solid #2563eb;outline-offset:4px}
button:disabled{cursor:default}
@media(min-width:1250px){.stages{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:1050px){.top{grid-template-columns:minmax(0,1fr) auto}.learn-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stage-title{font-size:22px;padding:10px}.score{min-width:0;padding:10px}}
@media(max-width:600px){
 .app{padding:10px;border-width:3px;border-radius:20px}.top{padding:12px;gap:10px;border-width:3px;border-radius:20px;margin-bottom:18px}
 .title{font-size:32px}.stage-title{font-size:16px}.score{font-size:20px;border-width:2px}.level-tag{font-size:16px}
 .stages{grid-template-columns:repeat(2,minmax(0,1fr));padding:9px;gap:12px 8px;border-width:3px;border-radius:18px}
 .stage-btn{font-size:15px;min-height:66px;padding:8px 5px;border-width:2px;border-radius:14px}
 .panel{padding:12px 8px;min-height:0;border-width:3px;border-radius:20px}.instruction{padding:10px 12px;font-size:19px;border-width:2px;border-radius:18px}
 .learn-grid{grid-template-columns:minmax(0,1fr);gap:16px}.visual{grid-column:auto}.card{min-height:0;padding:16px;border-width:3px;border-radius:20px}
 .objects{min-height:110px;font-size:45px;gap:8px}.label{font-size:18px}.digit{font-size:110px}.sound{min-height:120px;padding:12px;border-width:3px;border-radius:18px}
 .speaker{font-size:44px}.tf{font-size:36px}.learn-nav{grid-template-columns:52px minmax(0,1fr) 52px;gap:12px}.nav{width:52px;height:52px;border-width:3px;font-size:30px}.dots{gap:9px}
 .start,.verify,.restart{min-height:52px;max-width:100%;padding:12px 18px;font-size:21px;border-width:3px;border-radius:18px}
 .ex-head{gap:12px;flex-direction:column}.counter{min-width:0;font-size:20px;padding:8px 14px}.question{padding:12px;min-height:130px;border-width:3px}.q-objects{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;font-size:44px}
 .choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px}.audio-choice{min-height:125px}.audio-choice .tf{font-size:27px}.audio-choice .speaker{font-size:38px}.option{min-height:100px;font-size:65px;border-width:3px;border-radius:18px}
 .match{grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);gap:12px}.match-col{gap:14px}.match-num{min-height:104px;font-size:45px;border-width:3px;border-radius:18px}.match-audio{min-height:104px;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:8px 4px}.match-audio .speaker{font-size:30px}.match-audio .tf{font-size:27px}
 .builder{grid-template-columns:56px minmax(0,1fr) 56px;gap:10px}.built{grid-column:1/-1;grid-row:1;min-height:150px;padding:12px;font-size:44px;border-width:3px}.count-btn{width:56px;height:56px;font-size:34px;border-width:3px}.count-btn:first-child{grid-column:1}.count-btn:last-child{grid-column:3}.built-count{font-size:30px}
 .write-number{min-width:0;padding:16px 30px;font-size:95px;border-width:3px}.answer-boxes{gap:6px;min-height:60px}.answer-box{width:39px;height:54px;border-width:2px;border-radius:10px;font-size:29px}.letter-keys{gap:10px}.letter-key{min-width:48px;height:56px;padding:6px 10px;font-size:30px;border-width:3px;border-radius:12px}.write-actions{gap:12px;flex-wrap:wrap}.clear-write{width:56px;height:54px;border-width:3px;font-size:28px}
 .final{min-height:350px;padding:20px 12px;border-width:3px;border-radius:20px}.final h2{font-size:32px}.final-score{font-size:48px;margin:20px 0}.stars{font-size:26px;overflow-wrap:anywhere}.footer{font-size:16px}.result-ltr{gap:12px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}