/* درس الحرف — نفس تصميم النسخة التجريبية */
.fl .msg{min-height:26px;font-weight:700;margin-top:6px;text-align:center}
.fl .hint{color:var(--mut);font-size:14px;text-align:center;margin-top:6px}
.fl .row{justify-content:center;gap:4px}
.fl .btn{border:0;border-radius:16px;padding:11px 18px;font-size:17px;font-weight:700;color:#fff;cursor:pointer;background:var(--pink);box-shadow:0 6px 0 #1f6b52;margin:5px 3px}
.fl .btn:active{transform:translateY(5px);box-shadow:0 1px 0 #1f6b52}
.fl .btn.g{background:var(--ok);box-shadow:0 6px 0 #15803d}.fl .btn.o{background:var(--acc);box-shadow:0 6px 0 #c2571a}
.fl .btn.y{background:var(--yellow);color:#5a3b00;box-shadow:0 6px 0 #c99200}.fl .btn.b{background:#3b6cf5;box-shadow:0 6px 0 #2447b0}
.fl .btn:disabled{opacity:.6}
.fl .pill{background:rgba(120,110,200,.15);border-radius:14px;padding:6px 12px;font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:6px}
.fl .pill input{width:110px;min-height:auto;padding:0}
.fl .stage3d{perspective:900px;display:flex;justify-content:center;pointer-events:none}
.fl .cube{position:relative;width:300px;height:210px;transform-style:preserve-3d}
.fl .cube span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:170px;font-weight:700;line-height:1;white-space:nowrap}
.fl .cube .front{color:var(--pink);z-index:2}.fl .cube .layer{color:#14584a}
.fl .shadow{width:200px;height:18px;margin:0 auto;border-radius:50%;background:rgba(0,0,0,.18);filter:blur(6px)}
.fl .cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.fl .flip{perspective:700px;height:170px;cursor:pointer}
.fl .flip .in{position:relative;width:100%;height:100%;transition:transform .6s;transform-style:preserve-3d}
.fl .flip.on .in{transform:rotateY(180deg)}
.fl .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;box-shadow:0 8px 0 rgba(0,0,0,.15)}
.fl .face .e{font-size:68px}.fl .face .e.sm{font-size:34px}.fl .face .w{font-size:26px;font-weight:700;direction:ltr}
.fl .hl{color:#ffe066;font-size:1.25em}
.fl .face.back{transform:rotateY(180deg)}
.fl .c0 .face{background:linear-gradient(135deg,#ff7b7b,#ff3d6e)}.fl .c1 .face{background:linear-gradient(135deg,#34d3b0,#0d9488)}.fl .c2 .face{background:linear-gradient(135deg,#6db3ff,#3b6cf5)}
.fl .tabs{justify-content:center}
.fl .tab{padding:6px 26px;border-radius:14px;border:3px solid #cfe3da;background:transparent;color:var(--tx);font-size:26px;font-weight:700}
.fl .tab.on{background:var(--bg1);color:#fff;border-color:var(--bg1)}
.fl .board{border-radius:18px;overflow:hidden;background:#fffdf5;border:3px solid #cfe3da;margin-top:10px}
.fl .board canvas{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair}
.fl .big{font-size:34px;text-align:center;min-height:44px}
.fl .chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.fl .chip{padding:8px 16px;border-radius:30px;border:3px solid #cfe3da;background:transparent;color:var(--tx);font-size:18px;font-weight:700;cursor:pointer;font-family:Andika,sans-serif}
.fl .chip.on{background:var(--acc);border-color:var(--acc);color:#fff}
.fl audio{width:100%;margin-top:8px}
@media(max-width:520px){.fl .cards3{gap:6px}.fl .face .e{font-size:48px}.fl .face .w{font-size:19px}.fl .cube{transform-scale:.8}}
/* ===== أوراق العمل التفاعلية ===== */
.fl .wsbar{position:relative;height:18px;background:#dcefe7;border-radius:99px;margin-bottom:10px;overflow:hidden;text-align:center;font-size:12px;font-weight:700;line-height:18px;color:#1d4d3f}
.fl .wsfill{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#34d3b0,#22c55e);transition:width .4s}
.fl .wsbar span{position:relative}
.fl .wsopts{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px;margin-top:10px}
.fl .wsopt{font:inherit;background:var(--card);border:3px solid #cfe3da;border-radius:18px;padding:14px 8px;cursor:pointer;box-shadow:0 6px 0 rgba(0,0,0,.1);color:var(--tx);display:flex;flex-direction:column;align-items:center;gap:4px;min-height:90px;justify-content:center}
.fl .wsopt .emo{font-size:48px;line-height:1.1}.fl .wsopt .w{font-weight:700;font-size:20px}
.fl .wsopt.sel{border-color:var(--acc);background:#fff4e8}
.fl .wsopt.ok{border-color:#22c55e;background:#dcfce7}
.fl .wsopt.bad{border-color:#ef4444;background:#fee2e2;animation:shake .35s}
.fl .wsopt:disabled{opacity:.7}
.fl .wsbig{font-size:80px;font-weight:700;text-align:center;color:var(--p);line-height:1.1}
.fl .wsmatch{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fl .wscol{display:flex;flex-direction:column;gap:10px}
.fl h2{text-align:center}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
/* ===== الكتابة بخط اليد ===== */
.hwboard{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 6px 0 rgba(0,0,0,.08);border:3px solid #cfe3da}
.hwcanvas{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair;background:#fff;-webkit-user-select:none;user-select:none}
.hwlist{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.hwitem{display:flex;gap:12px;align-items:center;background:var(--field);border-radius:14px;padding:8px}
.hwitem img{width:150px;max-width:40%;border-radius:10px;background:#fff;border:2px solid #dcefe7}
.hwfb{background:#fff7d6;border-radius:10px;padding:6px 10px;margin-top:4px;color:#5b4300}

.backbtn{margin-bottom:10px}
/* شريط الإنجاز الثابت */
.fl .ckbar{position:sticky;top:calc(env(safe-area-inset-top,0px) + 6px);z-index:30;height:30px;border-radius:99px;background:#dcefe7;box-shadow:0 6px 16px rgba(20,10,60,.28);overflow:hidden;cursor:pointer;margin:0 0 12px;text-align:center;line-height:30px;font-weight:800;font-size:15px;color:#1d4d3f}
.fl .ckfill{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#34d3b0,#22c55e);transition:width .6s cubic-bezier(.3,1.4,.5,1)}
.fl .cktxt{position:relative;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.fl .ckbar.pop{animation:ckpop .55s ease}
.fl .ckbar.done .cktxt{color:#064e24}
@keyframes ckpop{0%{transform:scale(1)}35%{transform:scale(1.07)}100%{transform:scale(1)}}
.fl .flash{outline:4px solid #ff8a3d;outline-offset:3px;transition:outline-color .3s}
.fl .pts{font-weight:800;text-align:center;margin:4px 0 8px;padding:6px 12px;border-radius:12px}
.fl .pts.red{background:#fff1f2;color:#9f1239}.fl .pts.ok{background:#dcfce7;color:#166534}
@media(prefers-reduced-motion:reduce){.fl .ckbar.pop{animation:none}.fl .ckfill{transition:none}}
/* تنبيه الخطوة المطلوبة: يهتز ويحمر */
.fl .nudge{outline:4px solid #ef4444;outline-offset:3px;animation:nudgeshake .9s ease-in-out 4}
@keyframes nudgeshake{0%,100%{transform:translateX(0) scale(1)}25%{transform:translateX(-6px) scale(1.04)}75%{transform:translateX(6px) scale(1.04)}}
@media(prefers-reduced-motion:reduce){.fl .nudge{animation:none}}
/* حجب غير مرئي للمربعات التي لم يحن دورها */
.fl .gated{position:relative}
.fl .gateov{position:absolute;inset:0;z-index:6;background:transparent;border-radius:20px}
.fl .gateov[hidden]{display:none}
/* القراءة */
.fl .rcard{margin-bottom:14px}
.fl .rtiles{display:flex;justify-content:center;gap:10px;margin:10px 0}
.fl .rtile{min-width:64px;height:76px;border-radius:18px;border:3px solid #cfe3da;background:#fff;color:#1d4d3f;font-size:44px;font-weight:800;font-family:Andika,sans-serif;cursor:pointer;box-shadow:0 5px 0 #cfe3da}
.fl .rtile.on{background:var(--ok);border-color:var(--ok);color:#fff;box-shadow:0 5px 0 #15803d}
.fl .ropts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:10px 0}
.fl .ropt{min-width:96px;min-height:84px;padding:8px 14px;border-radius:20px;border:3px solid #cfe3da;background:#fff;color:#1d4d3f;font-size:30px;font-weight:800;font-family:Andika,sans-serif;cursor:pointer}
.fl .ropt .emi{width:64px;height:64px}
.fl .ropt.ok{border-color:var(--ok);background:#dcfce7}.fl .ropt.bad{border-color:#ef4444;background:#fee2e2}
.fl .flashred{animation:flashred .8s ease}
@keyframes flashred{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}30%{box-shadow:0 0 0 8px rgba(239,68,68,.75)}}
@media(prefers-reduced-motion:reduce){.fl .flashred{animation:none;outline:4px solid #ef4444}}
.fl #sec-sheet.gated{display:block}
.hwboard.hwfocus{position:relative;overflow:hidden}
.hwboard.hwfocus canvas{position:absolute}
.fl .hwnav{justify-content:space-between;align-items:center;gap:6px}
.fl .hwnav .btn{margin:2px;padding:8px 12px;font-size:15px}
.fl .hwnavlbl{flex:1;text-align:center;font-weight:800;font-size:14px;color:var(--mut)}
.fl .hwnav[hidden]{display:none}
.fl .ckbar{position:sticky}
.fl .hwbtns{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.fl .hwbtns .hwsend{grid-column:1/-1;font-size:17px;padding:12px 6px}
.fl .hwbtns .btn,.fl .hwbtns a.btn{display:block;margin:0;padding:9px 4px;font-size:13px;white-space:nowrap;text-align:center;box-shadow:0 4px 0 rgba(0,0,0,.18)}
.fl .hwbtns .btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.18)}
.fl .hwbtns .btn.g{box-shadow:0 4px 0 #15803d}.fl .hwbtns .btn.y{box-shadow:0 4px 0 #c99200}.fl .hwbtns .btn.o{box-shadow:0 4px 0 #c2571a}.fl .hwbtns .btn.b{box-shadow:0 4px 0 #2447b0}
.hwcanvas{-webkit-touch-callout:none}
/* صور الكلمات الحقيقية: تملأ البطاقة */
.fl .face.front{padding:0;overflow:hidden}
.fl .wph.big{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:68px}
.fl .wph .emi{width:1.1em;height:1.1em}
.fl .wphoto{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;pointer-events:none;user-select:none}
.fl .wph.sm{width:56px;height:56px;font-size:34px;border-radius:50%;overflow:hidden;margin-top:6px;display:flex;align-items:center;justify-content:center}
.fl .wphoto.sm{width:56px;height:56px;border-radius:50%;border:3px solid #fff}
@media(max-width:520px){.fl .wph.big{font-size:48px}}
/* صورة الكلمة كبيرة وتملأ البطاقة */
.fl .wph.big{font-size:118px}
.fl .wph.big .emi{width:1em;height:1em;filter:drop-shadow(0 6px 6px rgba(20,10,60,.25))}
@media(max-width:520px){.fl .wph.big{font-size:92px}}

/* خيارات الاختبار في سطر واحد، والمربع على قد الصورة */
.fl .wsopts{gap:8px}
.fl .wsopt{padding:10px 4px;min-height:72px}
.fl .wsopt .emo{font-size:44px;display:flex}
.fl .wsopt .emi{width:1em;height:1em}
.fl .wsopt .w{font-size:17px}
@media(max-width:520px){.fl .wsopt .emo{font-size:40px}}

/* قطعة القراءة */
.fl .stbox{display:flex;flex-direction:column;gap:10px;margin:10px 0}
.fl .stline{display:flex;gap:10px;align-items:center;background:var(--field);border-radius:14px;padding:10px 12px}
.fl .stplay{font:inherit;border:0;background:#fff;border-radius:50%;width:44px;height:44px;font-size:22px;cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.12);flex:none}
.fl .sttxt{font-size:24px;font-weight:700;line-height:1.4;flex:1;text-align:left;color:var(--p)}
.fl .sttimer{text-align:center;font-weight:700;font-size:22px;margin:6px 0;color:#d32f2f}
.fl .btn.rec{background:#d32f2f;color:#fff;animation:recpulse 1.2s infinite}
@keyframes recpulse{50%{opacity:.7}}
.hwitem audio{width:100%;max-width:260px}
.fl .btn[hidden],.fl .sttimer[hidden]{display:none!important}
/* «اختبار»: زر أخضر منسدل بعرض البطاقات */
.tb{padding:0;overflow:hidden}
.tb-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;border:0;background:linear-gradient(135deg,#2fa37f,#1b8a4f);color:#fff;font:inherit;font-weight:800;font-size:1.25em;padding:16px 20px;cursor:pointer;border-radius:0}
.tb-caret{font-size:.8em;opacity:.9}
.tb-body{padding:14px}
.tb-body[hidden]{display:none}
.tb-body>.card{box-shadow:none;border:0;margin:0;padding:0;background:transparent}
.tb.todo .tb-btn{background:linear-gradient(135deg,#e5484d,#b42318);animation:tbpulse 1.6s ease-in-out infinite}
.tb.done .tb-btn{background:linear-gradient(135deg,#2fa37f,#1b8a4f)}
.tb-tag{font-size:.75em;font-weight:700;margin-inline-start:8px;opacity:.95}
.testnote{background:#fff0ee;color:#b42318;border:2px solid #e5484d;font-weight:800;text-align:center;border-radius:14px;padding:10px 12px;margin:10px 0;cursor:pointer}
@keyframes tbpulse{50%{filter:brightness(1.12)}}
@media (prefers-reduced-motion:reduce){.tb.todo .tb-btn{animation:none}}