/* app.css — طبقة العرض (0.9). ملف واحد يستخدمه التطبيق وصفحة الإثبات، فاللقطات صادقة.
   ألوان دلالية ثابتة: أزرق = المعطى · ذهبي = الإجابة · أخضر = صح. مفيش أحمر ولا ✗ خالص. */

:root {
  --bg:#f7f3ea; --ink:#25373f; --muted:#7c8b90; --line:#d7ddd2;
  --card:#ffffff; --given:#2f6d8c; --answer:#e8990c; --ok:#41a05a; --btn:#2f6d8c;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--ink);
  font-family:"Segoe UI", Tahoma, Arial, sans-serif; overflow:hidden;
  user-select:none; -webkit-user-select:none; touch-action:manipulation; }
#app { height:100dvh; display:flex; flex-direction:column; }
#context { flex:0 0 auto; text-align:center; padding:14px; font-size:19px; color:var(--muted); font-weight:600; }
#stage { flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:30px; padding:6px 18px 28px; position:relative; }
#stage.enter { animation:slideIn .34s ease both; }
@keyframes slideIn { from { opacity:0; transform:translateX(26px); } to { opacity:1; transform:none; } }

/* ---------- بطاقة السؤال: الشخصية بتسأل، والمعادلة جنبها ---------- */
.qcard { display:flex; flex-direction:column; align-items:center; gap:26px; }
.qhead { display:flex; align-items:center; gap:18px; }
.ch { flex:0 0 auto; line-height:0; }        /* ساكنة تماماً — بنقيس الزمن */
.qbody { display:flex; justify-content:center; }

.qhead { max-width:100%; }
.eq { font-size:clamp(30px, 7vw, 54px); font-weight:800; display:flex; gap:12px; align-items:center; }
.eq.mini { font-size:clamp(28px, 6vw, 42px); }
.eq .given-n { color:var(--given); }
.eq .box { display:inline-flex; min-width:78px; height:78px; padding:0 12px; align-items:center; justify-content:center;
  border-radius:16px; background:#eef3f5; border:3px dashed #b9c6cb; color:var(--muted); }
.eq .box.filled { background:var(--answer); border-style:solid; border-color:var(--answer); color:#fff; }
.eq .box.tried { background:#eef3f5; border-style:solid; border-color:#b9c6cb; color:var(--muted); }
.gaphint .eq .box { animation:gap 1.1s ease-in-out infinite; border-color:var(--answer); }
@keyframes gap { 0%,100% { opacity:.42; } 50% { opacity:1; } }

/* ---------- إطارات العشرة (تجسيد بعد الإجابة، وسؤال العدّ) ---------- */
/* الإطار بيتملي من الشمال لليمين زي الكتاب بالظبط (الأرقام لاتينية والاتجاه LTR) */
.frames { display:flex; flex-direction:column; gap:12px; direction:ltr; }
.frame { display:grid; grid-template-columns:repeat(5, 1fr); gap:10px; direction:ltr; }
.cell { width:clamp(38px, 9.5vw, 62px); height:clamp(38px, 9.5vw, 62px); border-radius:50%;
  border:4px solid var(--line); background:#fbfbf9; transition:transform .16s ease, background .16s ease, opacity .25s ease; }
.cell.given { background:var(--given); border-color:var(--given); }
.cell.answer { background:var(--answer); border-color:var(--answer); }
.cell.gone { background:#fbfbf9; border-color:var(--line); opacity:.16; }
/* علامة التلميح: مكان الناقص (جمع) أو اللي هيتشال (طرح) — بلا رقم، بلا إجابة */
.cell.mark { border-color:var(--answer); border-style:dashed; animation:gap 1.1s ease-in-out infinite; }
.cell.given.mark { background:var(--given); border-color:var(--answer); border-style:dashed; }
.cell.pop { animation:pop .28s ease; }
.cell.lifting { opacity:.3; }
@keyframes pop { 0% { transform:scale(.2); } 60% { transform:scale(1.15); } 100% { transform:scale(1); } }

.frameCard { background:var(--card); border:1px solid var(--line); border-radius:26px; padding:20px 22px;
  transition:box-shadow .3s ease; }
.frameCard.win, .qcard.win { box-shadow:0 0 0 6px rgba(65,160,90,.35); border-radius:26px; }

/* ---------- مخطط التقسيم (المكونات — أرقام مش نقط، عشان مانقيسش سرعة العدّ) ---------- */
.bond { display:flex; flex-direction:column; align-items:center; gap:14px; }
.bond .total { width:104px; height:104px; border-radius:50%; background:var(--given); color:#fff;
  font-size:52px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.legs { display:flex; gap:56px; }
.leg { width:92px; height:92px; border-radius:20px; font-size:50px; font-weight:800;
  display:flex; align-items:center; justify-content:center; border:4px solid var(--line); background:var(--card); }
.leg.given { background:var(--given); color:#fff; border-color:var(--given); }
.leg.blank { background:#eef3f5; border-style:dashed; color:var(--muted); }
.leg.blank.gap { border-color:var(--answer); color:var(--answer); animation:gap 1.1s ease-in-out infinite; }
.leg.answer { background:var(--answer); color:#fff; border-color:var(--answer); }

/* ---------- لوحة الإجابة: عشرة أزرار كبيرة متباعدة، نفس الشكل دايماً ---------- */
/* خمسة في الصف — نفس بنية إطار العشرة، وتصاعدي من الشمال زي الكتاب */
.choices { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; max-width:512px; direction:ltr; }
.choice { width:84px; height:84px; border-radius:22px; border:4px solid var(--btn);
  background:var(--card); color:var(--btn); font-size:42px; font-weight:800; }
.choice:active, .choice.picked { background:var(--btn); color:#fff; transform:scale(.95); }

.cont { height:84px; padding:0 40px; border-radius:22px; border:0; background:var(--btn); color:#fff;
  font-size:30px; font-weight:800; }
.btnrow { display:flex; gap:18px; }

/* ---------- إشارة الصح: لازم تبان بوضوح ---------- */
/* ✓ تحت فوق لوحة الإجابة (مش فوق المعادلة) — عشان تفضل شايفة إجابتها الصح مكتملة */
.check { position:absolute; bottom:7%; width:124px; height:124px; border-radius:50%; background:var(--ok); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:78px; animation:checkIn .32s ease both; z-index:3; }
@keyframes checkIn { from { transform:scale(.3); opacity:0; } to { transform:scale(1); opacity:1; } }
.wash { position:absolute; inset:0; background:radial-gradient(circle at 50% 30%, rgba(65,160,90,.20), transparent 62%);
  animation:washIn .9s ease both; pointer-events:none; z-index:1; }
@keyframes washIn { from { opacity:0; } 40% { opacity:1; } to { opacity:.55; } }

/* ---------- التشجيع لازم يبان (شغّال وهو مكتوم) ---------- */
.enc { position:absolute; top:4%; z-index:4; display:flex; align-items:center; gap:16px;
  background:var(--card); border:4px solid var(--answer); border-radius:26px; padding:14px 26px;
  box-shadow:0 8px 26px rgba(0,0,0,.12); animation:encIn .34s ease both; max-width:92%; }
.encText { font-size:clamp(24px, 5.4vw, 34px); font-weight:800; color:var(--ink); }
@keyframes encIn { from { transform:translateY(-18px) scale(.9); opacity:0; } to { transform:none; opacity:1; } }

/* ---------- نشاط السحب ---------- */
.tray { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; min-height:74px; align-items:center;
  background:#efeade; border:3px dashed #c8cfc0; border-radius:22px; padding:12px 20px; min-width:240px; }
.chip { width:clamp(38px, 9.5vw, 62px); height:clamp(38px, 9.5vw, 62px); border-radius:50%;
  background:var(--answer); border:4px solid var(--answer); touch-action:none; }
.chip.ghost { opacity:.9; transform:scale(1.1); }
.chip.out { opacity:.35; }

#done { text-align:center; }
#done .check2 { width:96px; height:96px; margin:0 auto 14px; border-radius:50%; background:var(--ok); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:60px; }
#done .big { font-size:34px; font-weight:800; }
#done ul { list-style:none; padding:0; margin:18px 0 0; font-size:22px; font-weight:600; color:var(--btn);
  display:flex; flex-direction:column; gap:6px; }