/* =================== أنشطة المواد (الرياضيات واللغات والاجتماعيات) =================== */
.learn .sim-stage { min-height: 300px; }
.learn-score { margin: 8px 0; font-size: 14px; }
.learn-done { text-align: center; font-size: 28px; font-weight: 800; padding: 30px 0; }
.say-btn.sm { font-size: 14px; padding: 4px 12px; vertical-align: middle; }

/* اختيار من متعدد */
.lq { display: flex; flex-direction: column; gap: 12px; }
.lq-img { font-size: 64px; text-align: center; }
.lq-q { font-size: 20px; font-weight: 700; line-height: 1.8; }
.lq-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.lq-opt { font: inherit; font-size: 17px; background: #f8f9fa; border: 2px solid var(--line); border-radius: 14px; padding: 12px; cursor: pointer; transition: .12s; color: var(--ink); }
.lq-opt:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-soft); }
.lq-opt.right { background: #d3f9d8; border-color: #2f9e44; animation: pop .4s; }
.lq-opt.wrong { background: #ffe3e3; border-color: #e03131; animation: shake .4s; }
.lq-why { min-height: 30px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 15.5px; }

/* رتّب الجملة */
.ord { display: flex; flex-direction: column; gap: 14px; }
.ord-line { min-height: 64px; border: 3px dashed #74c0fc; border-radius: 16px; padding: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: #f8fbff; }
.ord-pool { display: flex; flex-wrap: wrap; gap: 8px; }
.ord-w { font: inherit; font-size: 19px; font-weight: 700; background: #fff; border: 2px solid #dee2e6; border-radius: 12px; padding: 8px 14px; cursor: pointer; box-shadow: 0 3px 0 #dee2e6; transition: transform .1s; }
.ord-w:hover { transform: translateY(-2px); border-color: #74c0fc; }
.ord-w.in { background: #e7f5ff; border-color: #74c0fc; }

/* صِل */
.match { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mcol { display: flex; flex-direction: column; gap: 10px; }
.mitem { font: inherit; font-size: 17px; background: #fff; border: 2px solid #dee2e6; border-radius: 14px; padding: 12px; cursor: pointer; min-height: 52px; color: var(--ink); }
.mitem.sel { border-color: #f59f00; background: #fff9db; box-shadow: 0 0 0 3px rgba(245, 159, 0, .2); }
.mitem.ok { background: #d3f9d8; border-color: #2f9e44; opacity: .75; cursor: default; }

/* الإعراب ونوع الكلمة */
.tagger { display: flex; flex-direction: column; gap: 10px; }
.tag-sent { font-size: 21px; line-height: 2.6; background: #fff; border-radius: 14px; padding: 10px 14px; border: 1px solid var(--line); }
.tag-w { display: inline-flex; flex-direction: column; align-items: center; vertical-align: top; margin: 0 4px; }
.tag-w b { color: #c2255c; border-bottom: 3px solid #fcc2d7; line-height: 1.6; }
.tag-w select { font: inherit; font-size: 13px; margin-top: 2px; border-radius: 8px; padding: 2px 4px; }
.tag-w.right b { color: #2b8a3e; border-color: #8ce99a; }
.tag-w.wrong b { color: #e03131; border-color: #ffa8a8; }
.tag-w small { color: #2b8a3e; font-size: 13px; line-height: 1.4; }

/* الرياضيات */
.mtask { display: flex; flex-direction: column; gap: 10px; }
.nl, .grid-svg, .angle-svg, .coord-svg, .bal-svg { width: 100%; height: auto; direction: ltr; user-select: none; }
.nl-wrap, .grid-wrap { cursor: pointer; touch-action: none; }
.grid-svg { max-width: 380px; display: block; margin: 0 auto; background: #fff; border-radius: 10px; }
.coord-svg { max-width: 380px; display: block; margin: 0 auto; background: #fff; border-radius: 10px; cursor: crosshair; }
.coord-ctl { display: grid; gap: 8px; max-width: 380px; margin: 0 auto; }
.coord-ctl label { display: flex; gap: 10px; align-items: center; }
.coord-ctl input { flex: 1; }
.coord-eq, .bal-eq { font-size: 22px; font-weight: 800; color: #c92a2a; }
.angle-svg { max-width: 420px; display: block; margin: 0 auto; }
.ang-range { width: 100%; max-width: 420px; display: block; margin: 0 auto; }
.ang-val { font-size: 18px; }
.fbar { display: flex; height: 54px; border: 3px solid #495057; border-radius: 8px; overflow: hidden; margin: 8px auto; max-width: 480px; direction: ltr; }
.fbar span { flex: 1; border-inline-end: 2px solid #495057; background: #fff; }
.fbar span:last-child { border: none; }
.fbar span.on { background: linear-gradient(180deg, #ffa94d, #f76707); }
.fbar.click span { cursor: pointer; }
.fbar.click span:hover:not(.on) { background: #fff4e6; }
.fcmp { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; text-align: center; }
.fsigns { display: flex; flex-direction: column; gap: 6px; }
.ksign-btn { font: inherit; font-size: 26px; font-weight: 800; width: 56px; height: 52px; border-radius: 12px; border: 2px solid #dee2e6; background: #fff; cursor: pointer; }
.ksign-btn:hover { border-color: #f76707; }
.prob-last { font-size: 54px; text-align: center; }
.prob-bars { display: flex; justify-content: center; align-items: flex-end; gap: 14px; height: 190px; direction: ltr; }
.pb { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; min-width: 46px; }
.pb i { display: block; width: 36px; background: linear-gradient(180deg, #74c0fc, #1971c2); border-radius: 6px 6px 0 0; transition: height .3s; }
.pb small { color: var(--muted); font-size: 13px; }

/* الخرائط والخط الزمني */
.map-svg { width: 100%; max-height: 520px; display: block; direction: ltr; }
.map-svg .rg { fill: #e9ecef; stroke: #fff; stroke-width: 1.2; cursor: pointer; transition: fill .15s; }
.map-svg .rg:hover { fill: #a5d8ff; }
.map-svg .rg.ok { fill: #8ce99a; }
.map-svg .rg.bad { fill: #ffa8a8; }
.map-svg .rg.hl { fill: #ffd43b; }

@media (max-width: 860px) {
  .lq-opts { grid-template-columns: 1fr 1fr; }
  .match { gap: 8px; }
  .mitem { font-size: 15px; padding: 8px; }
  .fcmp { grid-template-columns: 1fr; }
  .fsigns { flex-direction: row; justify-content: center; }
  .tag-sent { font-size: 18px; }
}