@font-face{font-family:"Comic Neue";src:url("fonts/ComicNeue-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Comic Neue";src:url("fonts/ComicNeue-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Rubik";src:url("fonts/Rubik.ttf") format("truetype");font-weight:300 900;font-display:swap}

:root{
  --ink:#17324d; --ink-2:#475569; --muted:#5b6b7f;
  --brand:#0f766e; --brand-d:#115e59; --brand-l:#ccfbf1;
  --bg:#f1f7f6; --card:#fff; --line:#cbd5e1; --soft:#e2eceb;
  --ok:#15803d; --ok-bg:#bbf7d0; --bad:#b91c1c; --bad-bg:#fecaca; --warn:#c2410c; --warn-bg:#fff7ed; --prog:#fde68a;
  --r:16px; --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Comic Neue","Rubik","Comic Sans MS",Tahoma,sans-serif;background:var(--bg);color:var(--ink);font-size:18px;line-height:1.6}
#app{max-width:720px;margin:0 auto;padding:var(--s4)}
h1{font-size:34px;line-height:1.25;margin:0 0 var(--s2);font-weight:700}
h2{font-size:26px;line-height:1.3;margin:0 0 var(--s2);font-weight:700}
p{margin:var(--s2) 0}
.card{background:var(--card);border-radius:var(--r);padding:var(--s4) var(--s4) var(--s3);margin:var(--s3) 0;box-shadow:0 1px 2px #0f172a14,0 4px 14px #0f172a0d}
.card:focus{outline:none}
@media (prefers-reduced-motion:no-preference){
  .card{animation:rise .22s ease-out}
  @keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .btn,.opt,.tile{transition:background-color .15s,border-color .15s,transform .1s}
  .bar i{transition:width .3s}
}
/* أزرار */
.btn{font:inherit;font-weight:700;font-size:20px;min-height:56px;min-width:56px;padding:10px 24px;border:0;border-radius:14px;background:var(--brand);color:#fff;cursor:pointer;margin:var(--s2) var(--s1)}
.btn:hover{background:var(--brand-d)}
.btn:active{transform:scale(.97)}
.btn.alt{background:var(--soft);color:var(--ink)}
.btn.alt:hover{background:#d3e2e0}
.btn:disabled{opacity:.5;cursor:default}
:where(button,input,select,canvas):focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 6px #fff}
.row{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center;align-items:center}
/* حروف */
.big{font-size:104px;line-height:1.1;direction:ltr;text-align:center;font-weight:700}
.mid{font-size:56px;line-height:1.2;direction:ltr;text-align:center}
.ltr{direction:ltr;unicode-bidi:isolate}
/* خريطة الحروف */
.grid{direction:ltr;display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:var(--s2)}
.tile{border-radius:12px;padding:var(--s2) var(--s1) var(--s2);text-align:center;background:#e5e7eb;direction:ltr}
.tile b{font-size:30px;line-height:1.2;display:block;font-weight:400}
.tile.prog{background:var(--prog)}
.tile.done{background:var(--ok-bg)}
.pips{display:flex;gap:5px;justify-content:center;margin-top:6px}
.pips i{width:10px;height:10px;border-radius:50%;border:2px solid #64748b;background:transparent}
.pips i.on{background:var(--ok);border-color:var(--ok)}
.legend{display:flex;flex-wrap:wrap;gap:var(--s3);font-size:15px;color:var(--muted);margin-top:var(--s3)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend .sw{width:14px;height:14px;border-radius:4px;display:inline-block}
/* الأسئلة */
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-top:var(--s4)}
.opt{font:inherit;font-size:54px;min-height:96px;border-radius:var(--r);border:3px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;direction:ltr}
.opt:hover:not(:disabled){border-color:var(--brand);background:#f0fdfa}
.opt:active:not(:disabled){transform:scale(.97)}
.opt.ok{background:var(--ok-bg);border-color:var(--ok)}
.opt.bad{background:var(--bad-bg);border-color:var(--bad)}
.opt:disabled{cursor:default}
.bar{height:12px;background:#dfe7e6;border-radius:8px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--brand)}
.step{display:flex;justify-content:space-between;color:var(--muted);font-size:16px;margin-bottom:var(--s2)}
.tip{background:var(--warn-bg);border-inline-start:6px solid #f97316;padding:var(--s3);border-radius:10px;margin-top:var(--s3)}
.good{color:var(--ok);font-weight:700}
.badc{color:var(--bad);font-weight:700}
canvas{width:100%;max-width:360px;aspect-ratio:1;background:#fff;border:3px solid var(--brand);border-radius:var(--r);touch-action:none;display:block;margin:var(--s2) auto}
.muted{color:var(--muted);font-size:16px}
input,select{font:inherit;padding:10px;border-radius:10px;border:2px solid var(--line)}
label{display:block;font-weight:700;margin-bottom:var(--s1)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.box{background:var(--bg);border-radius:14px;padding:10px;text-align:center}
.box b{display:block}
/* المستوى */
.dots{display:flex;gap:var(--s2);margin:var(--s2) 0;direction:ltr;justify-content:center}
.dots span{width:40px;height:40px;border-radius:50%;background:#e2e8f0;color:#64748b;display:flex;align-items:center;justify-content:center;font-weight:700}
.dots span.on{background:var(--brand);color:#fff}
.hero{text-align:center}
.steps{display:grid;gap:var(--s2);margin:var(--s4) 0;text-align:start}
.steps div{display:flex;gap:var(--s3);align-items:center;background:var(--bg);border-radius:12px;padding:var(--s3)}
.steps b{flex:none;width:36px;height:36px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center}
@media (max-width:380px){.big{font-size:88px}.opt{font-size:46px}h1{font-size:30px}}
.foot{max-width:720px;margin:0 auto;padding:var(--s4) var(--s4) var(--s5);text-align:center;color:var(--muted);font-size:15px}
.foot p{margin:var(--s1) 0}
.foot .small{font-size:13px}
.foot a{color:var(--brand-d);font-weight:700}
.foot a:hover{text-decoration:underline}
.cp{font:inherit;font-size:14px;min-height:44px;min-width:72px;padding:6px 14px;border:2px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);cursor:pointer}
.cp:hover{border-color:var(--brand)}
.topbar{margin:0 0 var(--s1)}.topbar .btn{margin:0;min-height:48px;font-size:18px;padding:6px 18px}