/* =========================================================
   AFRICA NEXT — Design System (يُبنى مرة واحدة، يُستخدم في كل الدروس)
   طبقًا لبرومبت التصميم الشامل + دليل التسليم التقني
   ========================================================= */



:root{
  /* ---- لوحة الألوان الثابتة ---- */
  --deep-green:#173F35;
  --green:#2E6B4F;
  --gold:#D7A83E;
  --sand:#D9C39A;
  --cream:#F7F4EC;
  --blue:#3E8FA3;
  --orange:#D97941;
  --purple:#76578A;
  --slate:#48515A;

  --radius-lg:18px;
  --radius-md:12px;
  --radius-sm:8px;
  --shadow-soft:0 4px 14px rgba(23,63,53,.14);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box}
html{scroll-padding-top:var(--safe-top)}
body{
  margin:0;
  direction:rtl;
  font-family:'Tajawal',system-ui,sans-serif;
  background:var(--cream);
  color:var(--slate);
  padding-top:var(--safe-top);
  padding-bottom:var(--safe-bottom);
  min-height:100%;
}
.nums, .an-points, .an-progress-label{font-family:'IBM Plex Sans Arabic',sans-serif}

h1,h2,h3,.an-title{font-family:'Tajawal',sans-serif;font-weight:800;color:var(--deep-green)}

img{max-width:100%;display:block}

/* ================= الهيدر الثابت ================= */
.an-header{
  position:sticky;top:0;z-index:40;
  background:var(--deep-green);color:#fff;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;padding-top:calc(10px + var(--safe-top));
  gap:10px;
}
.an-logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px;color:var(--gold)}
.an-logo .leaf{color:var(--green)}
.an-header-mid{flex:1;text-align:center;overflow:hidden}
.an-unit-name{font-size:11px;color:#cfe3da;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.an-lesson-name{font-size:15px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.an-header-left{display:flex;align-items:center;gap:10px;font-size:13px}
.an-screen-count{opacity:.9}
.an-leaderboard-btn{background:none;border:none;color:#fff;font-size:18px;cursor:pointer}
.an-menu-btn{background:none;border:none;color:#fff;font-size:20px;cursor:pointer}

.an-progressbar{height:4px;background:rgba(255,255,255,.18)}
.an-progressbar > span{display:block;height:100%;background:var(--gold);transition:width .4s}

/* ================= أزرار ================= */
.an-btn{
  border:none;border-radius:999px;padding:12px 26px;font-family:'Tajawal';
  font-weight:700;font-size:15px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  transition:transform .15s, filter .15s;
}
.an-btn:hover{transform:scale(1.03)}
.an-btn:active{transform:scale(.97);filter:brightness(.92)}
.an-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

.an-btn-next{
  background:linear-gradient(180deg,#E4BE5E,var(--gold));color:var(--deep-green);
  box-shadow:0 3px 0 #a97f22, var(--shadow-soft);
}
.an-btn-prev{
  background:var(--deep-green);color:#fff;
  box-shadow:0 3px 0 #0c231d;
}
.an-btn-flat{background:transparent;border:1.5px solid var(--sand);color:var(--slate)}
.an-btn-action{
  background:linear-gradient(180deg,#3a7d5c,var(--green));color:#fff;
  box-shadow:0 4px 0 #1c4432, var(--shadow-soft);
}

.an-footer-nav{
  position:sticky;bottom:0;background:linear-gradient(0deg,var(--cream) 60%,transparent);
  padding:14px 16px calc(14px + var(--safe-bottom));
  display:flex;justify-content:space-between;gap:10px;
}

/* ================= بطاقة المحتوى ================= */
.an-card{
  background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);
  padding:20px;position:relative;margin:14px 16px;
}
.an-card-beige{background:var(--cream);border:1.5px dashed var(--sand)}
.an-listen-btn{
  position:absolute;top:12px;left:12px;background:var(--blue);color:#fff;border:none;
  border-radius:999px;width:38px;height:38px;font-size:16px;cursor:pointer;box-shadow:var(--shadow-soft);
}
.an-listen-btn.playing{background:var(--orange)}

/* ================= HUD الجانبية (تظهر فقط للتصميم الثلاثي) ================= */
.an-hud{
  margin:14px 16px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-soft);
}
.an-hud-leaderboard{background:#fff;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;font-weight:700}
.an-hud-triple-extra{background:linear-gradient(135deg,#fff, #fbf3df);padding:12px 16px;border-top:1px dashed var(--sand);
  display:flex;gap:14px;flex-wrap:wrap;font-size:13px}
.an-badge-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.an-badge{width:30px;height:30px;border-radius:50%;background:var(--sand);display:flex;align-items:center;justify-content:center;font-size:15px;opacity:.35}
.an-badge.earned{opacity:1;background:linear-gradient(135deg,#fff2cf,var(--gold))}

/* التصميم الأحادي: لا نقاط ولا شارات ظاهرة، فقط الترتيب */
body[data-variant="single"] .an-hud-triple-extra,
body[data-variant="single"] .an-points,
body[data-variant="single"] .an-badge-row{display:none !important}

/* ================= بطاقة تغذية راجعة موحّدة ================= */
.an-feedback{border-radius:var(--radius-md);padding:14px 16px;margin:10px 16px;font-weight:700;display:none;gap:8px;align-items:flex-start}
.an-feedback.show{display:flex}
.an-feedback.correct{background:#e8f5ee;color:#1f6b45;border:1.5px solid #bfe3cf}
.an-feedback.partial{background:#fdf1e4;color:#a15a1d;border:1.5px solid #f3d3ac}
.an-feedback.incorrect{background:#fdecec;color:#a53232;border:1.5px solid #f3c2c2}
.an-feedback-points{background:var(--gold);color:var(--deep-green);border-radius:999px;padding:4px 12px;font-size:13px;display:inline-block;margin-top:6px}

/* ================= راوي ريان ================= */
.an-rayan{
  display:flex;gap:10px;align-items:flex-end;margin:10px 16px;
}
.an-rayan-avatar{
  width:52px;height:52px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 35% 30%, #eafff2, var(--green) 70%);
  box-shadow:var(--shadow-soft);position:relative;
}
.an-rayan-avatar::before,.an-rayan-avatar::after{content:"";position:absolute;top:20px;width:6px;height:6px;background:#173F35;border-radius:50%}
.an-rayan-avatar::before{right:16px}.an-rayan-avatar::after{left:16px}
.an-rayan-bubble{
  background:#fff;border-radius:16px 16px 16px 4px;padding:10px 14px;font-size:14px;
  box-shadow:var(--shadow-soft);max-width:82%;
}

/* ================= إمكانية الوصول ================= */
.an-a11y-bar{display:flex;gap:8px;justify-content:flex-end;padding:6px 16px}
.an-a11y-bar button{background:#fff;border:1px solid var(--sand);border-radius:8px;padding:4px 10px;font-size:13px;cursor:pointer}
body.an-contrast-high{filter:contrast(1.15) saturate(1.1)}
body.an-font-lg .an-card{font-size:19px}

@media (max-width:420px){
  .an-lesson-name{font-size:13px}
  .an-card{padding:16px;margin:10px}
}

/* ================= خلفية فوتوغرافية معبرة (تُستخدم متطابقة في النسختين) ================= */
body.an-bg-farm{
  background:
    linear-gradient(180deg, rgba(23,63,53,.55), rgba(247,244,236,.15) 30%, var(--cream) 78%),
    url('../../shared/images/bg-farm.jpg') top center/cover no-repeat fixed;
}
body.an-bg-farm .an-header{background:rgba(23,63,53,.85);backdrop-filter:blur(3px)}
body.an-bg-farm .an-card:first-of-type{margin-top:22px}
.an-logo img{height:26px;vertical-align:middle;margin-inline-end:4px}

/* ================= التنقل الحر بين الشاشات (نقاط قابلة للنقر دائمًا) ================= */
.an-dots{display:flex;justify-content:center;gap:8px;padding:10px 0;flex-wrap:wrap}
.an-dot{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  text-decoration:none;font-weight:800;font-size:13px;background:#fff;color:var(--slate);
  border:2px solid var(--sand)}
.an-dot.visited{background:var(--green);color:#fff;border-color:var(--green)}
.an-dot.active{background:var(--gold);color:var(--deep-green);border-color:var(--gold);transform:scale(1.15)}

.crop-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:14px 0}
.crop-card{background:#fff;border-radius:14px;padding:12px;box-shadow:var(--shadow-soft);position:relative;text-align:center}
.crop-photo-slot{width:64px;height:64px;border-radius:50%;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-size:30px}
.crop-name{font-weight:800;color:var(--deep-green);font-size:14px}
.crop-bar-wrap{background:var(--cream);border-radius:6px;height:10px;margin:8px 0 4px;overflow:hidden}
.crop-bar{height:100%;border-radius:6px}
.crop-pct{font-weight:800;font-size:13px}
.crop-note{font-size:11px;color:var(--slate);margin-top:6px;min-height:14px}
.crop-listen{position:absolute;top:8px;left:8px;background:none;border:none;font-size:13px;cursor:pointer;opacity:.6}

/* خلفيات الأقسام (نفس الصور في النسختين) */
body.an-bg-fishing-river{background:linear-gradient(180deg,rgba(23,63,53,.55),rgba(247,244,236,.15) 30%,var(--cream) 78%),url('../../shared/images/photos/fishing-river.jpg') top center/cover no-repeat fixed}
body.an-bg-fishing-river .an-header{background:rgba(23,63,53,.85)}
body.an-bg-cattle{background:linear-gradient(180deg,rgba(23,63,53,.55),rgba(247,244,236,.15) 30%,var(--cream) 78%),url('../../shared/images/photos/cattle.jpg') top center/cover no-repeat fixed}
body.an-bg-cattle .an-header{background:rgba(23,63,53,.85)}
body.an-bg-drought{background:linear-gradient(180deg,rgba(23,63,53,.55),rgba(247,244,236,.15) 30%,var(--cream) 78%),url('../../shared/images/photos/drought.jpg') top center/cover no-repeat fixed}
body.an-bg-drought .an-header{background:rgba(23,63,53,.85)}
body.an-bg-camels{background:linear-gradient(180deg,rgba(23,63,53,.55),rgba(247,244,236,.15) 30%,var(--cream) 78%),url('../../shared/images/photos/camels.jpg') top center/cover no-repeat fixed}
body.an-bg-camels .an-header{background:rgba(23,63,53,.85)}
body.an-bg-pasture{background:linear-gradient(180deg,rgba(23,63,53,.55),rgba(247,244,236,.15) 30%,var(--cream) 78%),url('../../shared/images/photos/pasture.jpg') top center/cover no-repeat fixed}
body.an-bg-pasture .an-header{background:rgba(23,63,53,.85)}
body.an-bg-fish-market{background:linear-gradient(180deg,rgba(23,63,53,.55),rgba(247,244,236,.15) 30%,var(--cream) 78%),url('../../shared/images/photos/fish-market.jpg') top center/cover no-repeat fixed}
body.an-bg-fish-market .an-header{background:rgba(23,63,53,.85)}
body.an-bg-coop-meeting{background:linear-gradient(180deg,rgba(23,63,53,.55),rgba(247,244,236,.15) 30%,var(--cream) 78%),url('../../shared/images/photos/coop-meeting.jpg') top center/cover no-repeat fixed}
body.an-bg-coop-meeting .an-header{background:rgba(23,63,53,.85)}
body.an-bg-transport{background:linear-gradient(180deg,rgba(23,63,53,.55),rgba(247,244,236,.15) 30%,var(--cream) 78%),url('../../shared/images/photos/transport.jpg') top center/cover no-repeat fixed}
body.an-bg-transport .an-header{background:rgba(23,63,53,.85)}
body.an-bg-harvest-women{background:linear-gradient(180deg,rgba(23,63,53,.55),rgba(247,244,236,.15) 30%,var(--cream) 78%),url('../../shared/images/photos/harvest-women.jpg') top center/cover no-repeat fixed}
body.an-bg-harvest-women .an-header{background:rgba(23,63,53,.85)}
body.an-bg-irrigation{background:linear-gradient(180deg,rgba(23,63,53,.55),rgba(247,244,236,.15) 30%,var(--cream) 78%),url('../../shared/images/photos/irrigation.jpg') top center/cover no-repeat fixed}
body.an-bg-irrigation .an-header{background:rgba(23,63,53,.85)}
body.an-bg-hero-farm{background:linear-gradient(180deg,rgba(23,63,53,.55),rgba(247,244,236,.15) 30%,var(--cream) 78%),url('../../shared/images/photos/hero-farm.jpg') top center/cover no-repeat fixed}
body.an-bg-hero-farm .an-header{background:rgba(23,63,53,.85)}
body.an-bg-sheep-goats{background:linear-gradient(180deg,rgba(23,63,53,.55),rgba(247,244,236,.15) 30%,var(--cream) 78%),url('../../shared/images/photos/sheep-goats.jpg') top center/cover no-repeat fixed}
body.an-bg-sheep-goats .an-header{background:rgba(23,63,53,.85)}
body.an-bg-fish-farm{background:linear-gradient(180deg,rgba(23,63,53,.55),rgba(247,244,236,.15) 30%,var(--cream) 78%),url('../../shared/images/photos/fish-farm.jpg') top center/cover no-repeat fixed}
body.an-bg-fish-farm .an-header{background:rgba(23,63,53,.85)}

.ph-card{background:#fff;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-soft);text-align:center}
.ph-card img{width:100%;height:120px;object-fit:cover}
.ph-card .ph-t{padding:8px 6px}
.ph-name{font-weight:800;color:var(--deep-green);font-size:14px}
.stat-row{display:flex;align-items:center;gap:8px;margin:8px 0;font-size:14px}
.stat-row .lbl{width:88px;font-weight:700}
.stat-row .bar{flex:1;background:var(--cream);border-radius:8px;height:16px;overflow:hidden}
.stat-row .bar i{display:block;height:100%;border-radius:8px}
.stat-row .val{width:54px;font-weight:800;font-family:'IBM Plex Sans Arabic',sans-serif}
.an-vid{width:100%;border-radius:12px;margin-top:10px;background:#000}

/* ===== ريان (متحرك) ===== */
@keyframes an-float{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-9px) rotate(1.5deg)}}
@keyframes an-glow{0%,100%{opacity:.55;transform:scaleX(1)}50%{opacity:.95;transform:scaleX(1.18)}}
@keyframes an-pop{0%{transform:scale(.4) rotate(-8deg);opacity:0}70%{transform:scale(1.12) rotate(3deg);opacity:1}100%{transform:scale(1) rotate(0)}}
@keyframes an-fadeup{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
.an-rayan-avatar{width:68px;height:68px;border-radius:0;flex:none;box-shadow:none;background:url('../../shared/images/rayan/wave.png') center bottom/contain no-repeat;animation:an-float 3.2s ease-in-out infinite}
.an-rayan-avatar::before,.an-rayan-avatar::after{display:none}
.an-rayan-bubble{animation:an-fadeup .5s ease both}
.an-fb-rayan{width:56px;height:56px;object-fit:contain;flex:none;animation:an-pop .5s ease both}
.an-feedback.show{align-items:center}

/* ===== لوحة المتصدرين في الشاشة ===== */
.an-hud-list{background:#fff;padding:4px 12px 10px}
.an-hud-row,.bd-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:10px;font-size:14px}
.an-hud-row.me,.bd-row.me{background:#fff4d6;font-weight:800}
.an-hud-row .rk,.bd-row .rk{width:28px;text-align:center;font-weight:800}
.av{width:28px;height:28px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:none}
.an-hud-row .nm,.bd-row .nm{flex:1}
.an-hud-row .pt,.bd-row .pt{font-weight:800;color:var(--deep-green)}
.an-hud-bar{height:8px;background:#e8e2d0;border-radius:6px;margin-top:6px;overflow:hidden}
.an-hud-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--gold));border-radius:6px}

/* ===== النوافذ والقوائم ===== */
.an-ov{position:fixed;inset:0;background:rgba(10,30,24,.55);z-index:100;display:flex;align-items:center;justify-content:center;padding:14px;backdrop-filter:blur(2px)}
.an-modal{background:var(--cream);border-radius:20px;padding:20px;max-width:440px;width:100%;max-height:88vh;overflow:auto;position:relative;box-shadow:0 12px 40px rgba(0,0,0,.35);animation:an-pop .35s ease both}
.an-modal-lg{max-width:560px}
.an-modal-rayan{width:84px;height:84px;object-fit:contain;animation:an-float 3s ease-in-out infinite}
.an-x{position:absolute;top:10px;left:10px;background:#fff;border:none;border-radius:50%;width:34px;height:34px;font-size:15px;cursor:pointer;box-shadow:var(--shadow-soft);z-index:2}
.bd-list{margin-top:8px}
.gd-head{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.gd-row{display:flex;gap:12px;align-items:flex-start;background:#fff;border-radius:12px;padding:10px 12px;margin:8px 0;font-size:14px;line-height:1.7}
.gd-ic{min-width:44px;height:44px;border-radius:12px;background:var(--deep-green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800}
.an-ov.menu{justify-content:flex-start;align-items:stretch;padding:0}
.an-menu{background:var(--cream);width:min(90vw,380px);height:100%;overflow:auto;box-shadow:-8px 0 30px rgba(0,0,0,.3);animation:an-slide .28s ease both;padding-bottom:20px}
@keyframes an-slide{from{transform:translateX(100%)}to{transform:none}}
.an-ov.menu{flex-direction:row}
.mh{position:sticky;top:0;background:var(--deep-green);color:#fff;padding:16px;display:flex;justify-content:space-between;align-items:center;z-index:3}
.mh .an-x{position:static}
.mtools{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:12px}
.mtools a,.mtools button,.mlogout{background:#fff;border:1.5px solid var(--sand);border-radius:12px;padding:10px;font-family:Tajawal;font-weight:700;font-size:14px;color:var(--deep-green);cursor:pointer;text-align:center;text-decoration:none}
.mlogout{display:block;width:calc(100% - 24px);margin:14px 12px 0;color:#a53232}
.msec{margin:8px 12px;background:#fff;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-soft)}
.msec>summary,.msec.tool{padding:13px 14px;font-weight:800;color:#fff;background:var(--green);cursor:pointer;list-style:none;display:block;text-decoration:none}
.msec.tool{display:flex;justify-content:space-between;align-items:center;background:var(--purple)}
.msec.tool small{font-weight:500;opacity:.85}
.msec:nth-of-type(1)>summary{background:var(--blue)}
.mg{border-top:1px solid #eee}
.mg>summary{padding:10px 14px;font-weight:700;color:var(--deep-green);background:#e8f2ec;cursor:pointer}
.mi{display:flex;gap:8px;align-items:center;padding:9px 14px;text-decoration:none;color:var(--slate);font-size:14px;border-top:1px solid #f3efe2}
.mi .mt{flex:1}.mi .mk{color:var(--green);font-weight:800}
.mi.vis{background:#f2faf5}
.mi.cur{background:var(--gold);color:var(--deep-green);font-weight:800}

/* ===== شاشة الترحيب ===== */
.wl-hero{display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:rgba(255,255,255,.93)}
.wl-rayan{position:relative;width:190px;flex:none;margin:0 auto;padding-bottom:14px}
.wl-glow{position:absolute;bottom:0;left:50%;margin-left:-60px;width:120px;height:20px;border-radius:50%;background:radial-gradient(ellipse,rgba(62,200,255,.75),transparent 70%);animation:an-glow 2.6s ease-in-out infinite}
.wl-rayan-img{width:100%;position:relative;animation:an-float 3.4s ease-in-out infinite;filter:drop-shadow(0 8px 10px rgba(0,0,0,.18))}
.wl-text{flex:1;min-width:230px;position:relative;padding-top:6px}
.wl-book{display:inline-block;background:var(--gold);color:var(--deep-green);font-weight:800;border-radius:999px;padding:4px 14px;font-size:13px}
.wl-title{font-size:23px;line-height:1.5;margin:8px 0 4px;color:var(--deep-green)}
.wl-unit{font-weight:700;color:var(--green);line-height:1.7;font-size:15px}
.wl-grade{margin-top:6px;font-size:14px;color:var(--slate);font-weight:700}
.wl-bubble{margin-top:10px;max-width:100%;border:1.5px solid #dcebe3}
.wl-cta{display:flex;gap:10px;flex-wrap:wrap}
.wl-cta .an-btn{flex:1;justify-content:center;min-width:150px}
.an-btn.dis{opacity:.45;pointer-events:none;filter:grayscale(.4)}
.wl-tools h3{margin:0 0 2px}
.wl-tools .sub{color:var(--slate);font-size:13px;margin:0 0 12px}
.wl-toolgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.tool-card{border-radius:18px;padding:16px;color:#fff;text-decoration:none;position:relative;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.18);transition:transform .2s;display:flex;flex-direction:column;gap:6px}
.tool-card:hover{transform:translateY(-3px)}
.tool-card .ti{font-size:34px;width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center}
.tool-card b{font-size:16px}.tool-card small{opacity:.9;font-size:12.5px;line-height:1.6}
.tool-card .go{margin-top:6px;background:#fff;color:var(--deep-green);border-radius:999px;padding:7px 14px;font-weight:800;font-size:13px;align-self:flex-start}
.tool-card::after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.12);left:-30px;top:-30px}
.tc1{background:linear-gradient(135deg,#173F35,#2E6B4F)}
.tc2{background:linear-gradient(135deg,#D97941,#D7A83E)}
.tc3{background:linear-gradient(135deg,#3E8FA3,#76578A)}
.wl-guide{display:flex;gap:12px;align-items:center;cursor:pointer;background:linear-gradient(135deg,#e8f2ec,#fff)}
.wl-guide img{width:70px;animation:an-float 3s ease-in-out infinite}
.an-footer-nav .an-btn{flex:1;justify-content:center}

/* ===== إصلاحات: شريط تنقل أفقي قابل للتمرير + إفساح مكان لزر الاستماع ===== */
.an-dots{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding:10px 14px;scrollbar-width:thin}
.an-dot{flex:none}
.an-card > .an-title:first-of-type,.an-card > h2:first-of-type{padding-left:46px}
.tool-card::after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.12);left:-30px;top:-30px}
.tc1{background:linear-gradient(135deg,#173F35,#2E6B4F)}
.tc2{background:linear-gradient(135deg,#D97941,#D7A83E)}
.tc3{background:linear-gradient(135deg,#3E8FA3,#76578A)}
.wl-guide{display:flex;gap:12px;align-items:center;cursor:pointer;background:linear-gradient(135deg,#e8f2ec,#fff)}
.wl-guide img{width:70px;animation:an-float 3s ease-in-out infinite}
.an-footer-nav .an-btn{flex:1;justify-content:center}

/* ===== احتفال النقاط ===== */
@keyframes an-toast-up{0%{opacity:0;transform:translate(-50%,10px) scale(.7)}15%{opacity:1;transform:translate(-50%,0) scale(1.15)}30%{transform:translate(-50%,0) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-40px) scale(1)}}
.an-points-toast{position:fixed;top:22%;left:50%;z-index:300;background:linear-gradient(135deg,#fff7e0,var(--gold));color:var(--deep-green);
  font-weight:900;font-size:26px;padding:10px 26px;border-radius:999px;box-shadow:0 10px 26px rgba(0,0,0,.25);
  animation:an-toast-up 1.4s ease forwards;pointer-events:none}

/* ===== احتفال الشارة: كونفيتي + بطاقة ملء الشاشة ===== */
.an-badge-cel{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;
  background:rgba(10,30,24,0);transition:background .35s;overflow:hidden}
.an-badge-cel.show{background:rgba(10,30,24,.65)}
.an-confetti{position:absolute;inset:0;overflow:hidden}
.an-confetti i{position:absolute;top:-5%;width:9px;height:14px;opacity:.95;border-radius:2px;animation:an-confetti-fall linear forwards}
@keyframes an-confetti-fall{to{top:110%;transform:translateY(0) rotate(720deg)}}
.an-badge-cel-card{position:relative;background:#fff;border-radius:24px;padding:34px 26px;text-align:center;
  max-width:320px;width:88%;box-shadow:0 20px 50px rgba(0,0,0,.4);transform:scale(.5);opacity:0;transition:transform .5s cubic-bezier(.34,1.56,.64,1), opacity .4s}
.an-badge-cel.show .an-badge-cel-card{transform:scale(1);opacity:1}
.an-badge-cel-emoji{font-size:88px;line-height:1;animation:an-pop .6s ease .1s both, an-float 2.4s ease-in-out 1s infinite}
.an-badge-cel-title{color:var(--gold);font-weight:900;font-size:19px;margin-top:8px}
.an-badge-cel-name{color:var(--deep-green);font-weight:800;font-size:22px;margin:4px 0 18px}

/* ===== رسم بياني تفاعلي للنسب (أعمدة 3D قابلة للنقر) ===== */
.an-chart{display:flex;align-items:flex-end;gap:14px;height:190px;padding:0 6px 10px;margin:16px 0 4px;position:relative}
.an-chart::before{content:"";position:absolute;left:0;right:0;bottom:26px;height:1px;background:#e3dcc8}
.an-bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;cursor:pointer;min-width:0}
.an-bar-val{font-weight:900;font-size:13px;color:var(--deep-green);margin-bottom:4px;white-space:nowrap}
.an-bar{width:100%;max-width:52px;border-radius:10px 10px 4px 4px;position:relative;
  background:linear-gradient(155deg, var(--bc,#2E6B4F) 0%, var(--bc,#2E6B4F) 60%, rgba(0,0,0,.22) 100%);
  box-shadow:inset -4px 0 6px rgba(0,0,0,.18), inset 3px 0 4px rgba(255,255,255,.35), 0 6px 10px rgba(0,0,0,.18);
  transition:transform .2s, filter .2s; transform-origin:bottom}
.an-bar-col:hover .an-bar, .an-bar-col.active .an-bar{transform:scaleX(1.08) translateY(-2px);filter:brightness(1.08)}
.an-bar-col.active .an-bar{outline:3px solid var(--gold);outline-offset:2px}
.an-bar-lbl{font-size:12px;font-weight:700;color:var(--slate);margin-top:8px;text-align:center;line-height:1.3}
.an-chart-detail{display:none;margin-top:12px}
.an-chart-detail.show{display:flex;gap:10px;align-items:center;animation:an-fadeup .35s ease both}
.an-chart-detail img{width:74px;height:74px;object-fit:cover;border-radius:12px;flex:none}
.an-chart-detail .txt{font-size:13.5px;line-height:1.7;color:var(--slate)}
.an-chart-detail .txt b{color:var(--deep-green)}

/* ===== نظام البطاقات/الخرائط الذهنية الموحّد ===== */
.an-hint{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--slate);background:#f3efe2;
  border-radius:999px;padding:5px 12px;width:fit-content;margin:0 0 10px}
.an-cardset{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:10px 0}
.an-pick-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-soft);cursor:pointer;
  border:3px solid transparent;transition:transform .2s, border-color .2s;text-align:center}
.an-pick-card:hover{transform:translateY(-3px)}
.an-pick-card.active{border-color:var(--nc,var(--gold))}
.an-pick-card img{width:100%;height:88px;object-fit:cover}
.an-pick-card .nm{padding:8px 4px;font-weight:800;font-size:13.5px;color:var(--nc,var(--deep-green))}
.an-pick-detail{display:none;border-radius:16px;padding:14px;margin-top:6px;gap:10px}
.an-pick-detail.show{display:flex;flex-wrap:wrap;animation:an-fadeup .35s ease both}
.an-pick-detail img{width:90px;height:90px;object-fit:cover;border-radius:12px;flex:none}
.an-pick-detail .body{flex:1;min-width:160px}
.an-pick-detail .ttl{font-weight:900;font-size:15px;margin-bottom:4px}
.an-pick-detail video{width:100%;border-radius:10px;margin-top:8px}
.an-term-box{border-radius:16px;padding:16px;margin:14px 0;position:relative;overflow:hidden;border:2px dashed var(--purple)}
.an-term-tag{display:inline-block;background:var(--purple);color:#fff;font-weight:800;font-size:11.5px;
  border-radius:999px;padding:3px 12px;margin-bottom:8px}
.an-stat-hero{text-align:center;margin:18px 0;padding:20px 14px;border-radius:20px;
  background:linear-gradient(135deg,var(--deep-green),var(--green));color:#fff;position:relative;overflow:hidden}
.an-stat-hero .num{font-size:44px;font-weight:900;color:var(--gold);text-shadow:0 3px 10px rgba(0,0,0,.3);animation:an-pop .6s ease both}
.an-stat-hero .lbl{font-size:15px;font-weight:700;margin-top:4px}
.an-stat-hero::after{content:"🌍";position:absolute;font-size:90px;opacity:.12;left:-10px;top:-10px}
.an-stat-hero::after{content:"🌍";position:absolute;font-size:90px;opacity:.12;left:-10px;top:-10px}

/* ===== نافذة الرسم البياني المنبثقة أعلى الشاشة ===== */
.an-ov-top{align-items:flex-start !important;padding-top:calc(16px + env(safe-area-inset-top,0px)) !important}
.an-chart-modal{max-width:340px;text-align:center}
.an-chart-modal img{width:100%;height:120px;object-fit:cover;border-radius:12px;margin-bottom:10px}
.an-chart-modal .ttl{font-weight:900;font-size:17px;margin-bottom:6px}
.an-chart-modal .txt{font-size:14px;line-height:1.8;color:var(--slate)}
.an-chart-modal{padding-top:6px}.an-chart-modal .ttl{padding-left:34px}

/* ====== Batch generator additions ====== */
.an-txt{font-size:16px;line-height:1.95;margin:6px 0}
.an-txt ol,.an-txt ul{padding-inline-start:22px;margin:6px 0}.an-txt li{margin:3px 0}
.an-note{margin:10px 0;font-size:15px;line-height:1.8}
.an-sub{margin:14px 0 4px;font-size:16px;color:var(--deep-green)}
.an-fig{margin:10px 0}.an-fig img{width:100%;border-radius:12px;display:block;max-height:340px;object-fit:cover}
.an-fig figcaption{font-size:12px;color:var(--slate);text-align:center;margin-top:4px}
.an-src{font-size:11.5px;color:var(--slate);margin-top:4px}
.an-blk{margin:6px 0}
.an-actions{text-align:center;margin:12px 0 4px}
.an-pick-ic{height:88px;display:flex;align-items:center;justify-content:center;font-size:40px;background:linear-gradient(135deg,#fff,var(--cream))}
.an-picto{display:flex;gap:10px;justify-content:center;margin:12px 0}
.an-picto .pg{width:clamp(48px,15vw,74px);aspect-ratio:1;border-radius:14px;border:2px solid #cfd6d2;background:#eef1ef;font-size:28px;cursor:pointer;filter:grayscale(1);opacity:.8;transition:transform .2s}
.an-picto .pg.on{background:linear-gradient(135deg,#fff2cf,var(--gold));border-color:var(--gold);filter:none;opacity:1}
.an-picto .pg:hover{transform:translateY(-3px)}
/* classify */
.cl-pool{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0;min-height:48px}
.cl-card{background:#fff;border:2px solid var(--sand);border-radius:12px;padding:10px 12px;font-size:14.5px;line-height:1.6;cursor:pointer;box-shadow:var(--shadow-soft);flex:1 1 220px}
.cl-card.selected{border-color:var(--gold);background:#fff8e6;transform:scale(1.02)}
.cl-zones{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:10px 0}
.cl-zone{border:2.5px dashed var(--zc);border-radius:14px;padding:8px;background:color-mix(in srgb,var(--zc) 8%,#fff);cursor:pointer;min-height:110px}
.cl-zh{font-weight:900;color:var(--zc);text-align:center;margin-bottom:6px}
.cl-zb .filled{display:block;font-size:13px;line-height:1.5;background:#fff;border-radius:8px;padding:6px 8px;margin:4px 0;border:1.5px solid var(--zc)}
.cl-zb .filled.ok{background:#e8f5ee}
/* mcq */
.mq-q{font-weight:800;font-size:16.5px;line-height:1.8;margin:6px 0}
.mq-opts{display:grid;gap:8px;margin:8px 0}
.mq-o,.ev-s{font-family:inherit;text-align:right;background:#fff;border:2px solid var(--sand);border-radius:12px;padding:11px 14px;font-size:15px;line-height:1.7;cursor:pointer}
.mq-o.sel,.ev-s.sel{border-color:var(--blue);background:#eaf5f8}
.mq-o.right,.ev-s.right{border-color:#2E6B4F;background:#e8f5ee}.mq-o.bad,.ev-s.bad{border-color:#c0392b;background:#fdecec}
.ev-list{display:grid;gap:8px;margin:8px 0}
.mq-conf{margin:10px 0}.mq-cl{font-weight:700;font-size:14px;margin-bottom:6px}
.mq-cb{display:flex;gap:8px;flex-wrap:wrap}.mq-cb button{font-family:inherit;flex:1;min-width:100px;border:2px solid var(--sand);background:#fff;border-radius:999px;padding:8px;cursor:pointer;font-weight:700}
.mq-cb button.sel{background:var(--gold);border-color:var(--gold);color:var(--deep-green)}
.mq-rev{margin-top:10px}
/* write/fill */
.an-ta{width:100%;min-height:130px;border-radius:12px;border:2px solid var(--sand);background:var(--cream);padding:12px;font-family:'Tajawal',sans-serif;font-size:15.5px;line-height:1.8}
.an-wc{font-size:12px;color:var(--slate);text-align:left}
.rb{font-size:14px;line-height:1.9}.rb.n{color:#7b8791}
.fl-line{font-size:16px;line-height:2.4}.fl-in{width:90px;border:none;border-bottom:3px solid var(--gold);text-align:center;font-weight:800;font-size:18px;background:transparent;font-family:inherit}
.fl-sel{font-family:inherit;font-size:15px;border:2px solid var(--gold);border-radius:10px;padding:6px 8px;background:#fff;max-width:100%}
/* map */
.an-map{height:min(62vh,440px);min-height:300px;border-radius:14px;border:2px solid var(--sand);background:#cfe6ee;direction:ltr}
.mp-leg{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.mp-leg button{font-family:inherit;display:flex;align-items:center;gap:6px;border:2px solid var(--sand);background:#fff;border-radius:999px;padding:6px 12px;font-weight:700;font-size:13.5px;cursor:pointer}
.mp-leg button .n{background:var(--deep-green);color:#fff;border-radius:50%;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;font-size:12px}
.mp-leg button.sel{border-color:var(--orange);background:#fff1e8}.mp-leg button.placed{border-color:var(--blue)}.mp-leg button.ok{border-color:#2E6B4F;background:#e8f5ee}
.mp-pin span{display:flex;width:28px;height:28px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--orange);color:#fff;align-items:center;justify-content:center;font-weight:800;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.mp-pin span{font-size:0}.mp-pin span::after{content:attr(data-n);font-size:13px;display:block;transform:rotate(45deg)}
.eq-lbl{background:var(--orange);color:#fff;border:0;font-family:'Tajawal';font-weight:800}
.eq-lbl::before{display:none}
.mp-detail{margin-top:10px;line-height:1.9;font-size:14px}
/* narrators */
.an-narr-wrap{display:flex;flex-direction:column;align-items:center;flex:none}
.an-narr-name{font-size:11px;font-weight:800;background:var(--deep-green);color:#fff;border-radius:999px;padding:1px 9px;margin-top:-2px}
.an-mab{width:92px;height:auto;max-height:110px;object-fit:contain;animation:an-float 3.4s ease-in-out infinite;filter:drop-shadow(0 6px 8px rgba(0,0,0,.2))}
.an-rayan.mabrouk .an-rayan-bubble{border-inline-start:4px solid var(--orange)}
.an-rayan.rayan .an-rayan-bubble{border-inline-start:4px solid var(--green)}
.an-rayan-bubble{font-size:15px;line-height:1.8}
.an-pend{text-align:center;padding:30px 10px;color:var(--slate)}
.an-cardset{grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}

/* ====== Batch generator additions ====== */
.an-txt{font-size:16px;line-height:1.95;margin:6px 0}
.an-txt ol,.an-txt ul{padding-inline-start:22px;margin:6px 0}.an-txt li{margin:3px 0}
.an-note{margin:10px 0;font-size:15px;line-height:1.8}
.an-sub{margin:14px 0 4px;font-size:16px;color:var(--deep-green)}
.an-fig{margin:10px 0}.an-fig img{width:100%;border-radius:12px;display:block;max-height:340px;object-fit:cover}
.an-fig figcaption{font-size:12px;color:var(--slate);text-align:center;margin-top:4px}
.an-src{font-size:11.5px;color:var(--slate);margin-top:4px}
.an-blk{margin:6px 0}
.an-actions{text-align:center;margin:12px 0 4px}
.an-pick-ic{height:88px;display:flex;align-items:center;justify-content:center;font-size:40px;background:linear-gradient(135deg,#fff,var(--cream))}
.an-picto{display:flex;gap:10px;justify-content:center;margin:12px 0}
.an-picto .pg{width:clamp(48px,15vw,74px);aspect-ratio:1;border-radius:14px;border:2px solid #cfd6d2;background:#eef1ef;font-size:28px;cursor:pointer;filter:grayscale(1);opacity:.8;transition:transform .2s}
.an-picto .pg.on{background:linear-gradient(135deg,#fff2cf,var(--gold));border-color:var(--gold);filter:none;opacity:1}
.an-picto .pg:hover{transform:translateY(-3px)}
/* classify */
.cl-pool{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0;min-height:48px}
.cl-card{background:#fff;border:2px solid var(--sand);border-radius:12px;padding:10px 12px;font-size:14.5px;line-height:1.6;cursor:pointer;box-shadow:var(--shadow-soft);flex:1 1 220px}
.cl-card.selected{border-color:var(--gold);background:#fff8e6;transform:scale(1.02)}
.cl-zones{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:10px 0}
.cl-zone{border:2.5px dashed var(--zc);border-radius:14px;padding:8px;background:color-mix(in srgb,var(--zc) 8%,#fff);cursor:pointer;min-height:110px}
.cl-zh{font-weight:900;color:var(--zc);text-align:center;margin-bottom:6px}
.cl-zb .filled{display:block;font-size:13px;line-height:1.5;background:#fff;border-radius:8px;padding:6px 8px;margin:4px 0;border:1.5px solid var(--zc)}
.cl-zb .filled.ok{background:#e8f5ee}
/* mcq */
.mq-q{font-weight:800;font-size:16.5px;line-height:1.8;margin:6px 0}
.mq-opts{display:grid;gap:8px;margin:8px 0}
.mq-o,.ev-s{font-family:inherit;text-align:right;background:#fff;border:2px solid var(--sand);border-radius:12px;padding:11px 14px;font-size:15px;line-height:1.7;cursor:pointer}
.mq-o.sel,.ev-s.sel{border-color:var(--blue);background:#eaf5f8}
.mq-o.right,.ev-s.right{border-color:#2E6B4F;background:#e8f5ee}.mq-o.bad,.ev-s.bad{border-color:#c0392b;background:#fdecec}
.ev-list{display:grid;gap:8px;margin:8px 0}
.mq-conf{margin:10px 0}.mq-cl{font-weight:700;font-size:14px;margin-bottom:6px}
.mq-cb{display:flex;gap:8px;flex-wrap:wrap}.mq-cb button{font-family:inherit;flex:1;min-width:100px;border:2px solid var(--sand);background:#fff;border-radius:999px;padding:8px;cursor:pointer;font-weight:700}
.mq-cb button.sel{background:var(--gold);border-color:var(--gold);color:var(--deep-green)}
.mq-rev{margin-top:10px}
/* write/fill */
.an-ta{width:100%;min-height:130px;border-radius:12px;border:2px solid var(--sand);background:var(--cream);padding:12px;font-family:'Tajawal',sans-serif;font-size:15.5px;line-height:1.8}
.an-wc{font-size:12px;color:var(--slate);text-align:left}
.rb{font-size:14px;line-height:1.9}.rb.n{color:#7b8791}
.fl-line{font-size:16px;line-height:2.4}.fl-in{width:90px;border:none;border-bottom:3px solid var(--gold);text-align:center;font-weight:800;font-size:18px;background:transparent;font-family:inherit}
.fl-sel{font-family:inherit;font-size:15px;border:2px solid var(--gold);border-radius:10px;padding:6px 8px;background:#fff;max-width:100%}
/* map */
.an-map{height:min(62vh,440px);min-height:300px;border-radius:14px;border:2px solid var(--sand);background:#cfe6ee;direction:ltr}
.mp-leg{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.mp-leg button{font-family:inherit;display:flex;align-items:center;gap:6px;border:2px solid var(--sand);background:#fff;border-radius:999px;padding:6px 12px;font-weight:700;font-size:13.5px;cursor:pointer}
.mp-leg button .n{background:var(--deep-green);color:#fff;border-radius:50%;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;font-size:12px}
.mp-leg button.sel{border-color:var(--orange);background:#fff1e8}.mp-leg button.placed{border-color:var(--blue)}.mp-leg button.ok{border-color:#2E6B4F;background:#e8f5ee}
.mp-pin span{display:flex;width:28px;height:28px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--orange);color:#fff;align-items:center;justify-content:center;font-weight:800;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.mp-pin span{font-size:0}.mp-pin span::after{content:attr(data-n);font-size:13px;display:block;transform:rotate(45deg)}
.eq-lbl{background:var(--orange);color:#fff;border:0;font-family:'Tajawal';font-weight:800}
.eq-lbl::before{display:none}
.mp-detail{margin-top:10px;line-height:1.9;font-size:14px}
/* narrators */
.an-narr-wrap{display:flex;flex-direction:column;align-items:center;flex:none}
.an-narr-name{font-size:11px;font-weight:800;background:var(--deep-green);color:#fff;border-radius:999px;padding:1px 9px;margin-top:-2px}
.an-mab{width:92px;height:auto;max-height:110px;object-fit:contain;animation:an-float 3.4s ease-in-out infinite;filter:drop-shadow(0 6px 8px rgba(0,0,0,.2))}
.an-rayan.mabrouk .an-rayan-bubble{border-inline-start:4px solid var(--orange)}
.an-rayan.rayan .an-rayan-bubble{border-inline-start:4px solid var(--green)}
.an-rayan-bubble{font-size:15px;line-height:1.8}
.an-pend{text-align:center;padding:30px 10px;color:var(--slate)}
.an-cardset{grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}

.od-list{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.od-row{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--sand);border-radius:12px;padding:8px 12px;box-shadow:var(--shadow-soft)}
.od-n{flex:0 0 30px;height:30px;border-radius:50%;background:var(--gold);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
.od-t{flex:1;font-size:15px;line-height:1.7}
.od-b{display:flex;flex-direction:column;gap:3px}
.od-b button{font-family:inherit;border:1px solid var(--sand);background:var(--cream);border-radius:8px;padding:2px 10px;cursor:pointer;font-size:13px}
.od-b button:disabled{opacity:.35;cursor:default}

.an-leg2{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;margin:6px 0}
.an-leg2 i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-inline-end:5px;vertical-align:middle}
.an-chart2{display:flex;gap:6px;align-items:flex-end;overflow-x:auto;border-bottom:2px solid var(--sand);padding:8px 4px 0}
.an-g2{flex:1;min-width:48px;display:flex;flex-direction:column;align-items:center;cursor:pointer;border-radius:8px;padding:2px}
.an-g2.active{background:rgba(215,168,62,.18)}
.an-g2 .bars{display:flex;gap:3px;align-items:flex-end;height:190px}
.an-g2 .bar{position:relative;width:17px;border-radius:5px 5px 0 0;background:var(--c)}
.an-g2 .bar::before{content:attr(data-v);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font-size:10px;white-space:nowrap}
.an-g2 .lbl{font-size:12px;margin-top:4px}
.an-venn{width:100%;max-width:380px;display:block;margin:8px auto}
.an-venn .vn{cursor:pointer}
.an-venn .vn:hover circle{fill-opacity:.8}
.wp-box{background:#fff;border:2px dashed var(--sand);border-radius:12px;padding:10px 12px;margin-bottom:10px}

.mp-pickbox{margin:8px 0;font-size:15px}
.tf-b{display:flex;gap:8px;margin:8px 0}
.tf-b button{flex:1;border:2px solid var(--sand);background:#fff}
.tf-b button.sel{border-color:var(--gold);background:#fff8e6}
.tf-it.tf-ok{border:2px solid #2E6B4F}
.tf-it.tf-bad{border:2px solid #B8472D}

.fin-pts{font-size:18px;margin:10px 0;text-align:center}
/* ===== AFRICA NEXT — professional theme layer ===== */
.ic{display:inline-flex;width:1.15em;height:1.15em;vertical-align:-.2em;flex:none}
.ic svg{width:100%;height:100%}
.ic-num{display:inline-flex;align-items:center;justify-content:center;min-width:1.4em;height:1.4em;border-radius:50%;background:var(--deep-green);color:#fff;font-size:.8em;font-weight:800;font-family:'IBM Plex Sans Arabic',sans-serif}
.an-stat-hero::after{content:none!important}
body{font-size:16.5px;line-height:1.75}
body>header,body>main,body>footer,.an-header,.an-shell,.an-footer-nav,.an-zoomrail,.an-dots,.an-progressbar{position:relative;z-index:2}
.an-header{position:sticky;top:0;z-index:30}
.an-footer-nav{position:sticky;bottom:0;z-index:30}
.an-shell{max-width:800px;margin:0 auto;padding:0 8px}
.an-zoomable{transform-origin:top center}
.an-card{border-radius:20px;margin:10px 4px;padding:18px;box-shadow:0 2px 10px rgba(23,63,53,.08),0 1px 2px rgba(23,63,53,.06)}
.an-unit-name{display:none}
@media(min-width:640px){.an-unit-name{display:block}}
h2,.an-title{font-size:20px}h3.an-sub{font-size:16px}
/* HUD */
.an-hud{margin:8px 4px;box-shadow:none;background:none;overflow:visible}
.hud-row,.an-hud-triple-extra,.an-hud-prog-wrap{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:none;border:0;padding:0}
.hud-chip,.hud-pts,.hud-bd,.hud-prog,.hud-rank{display:inline-flex;align-items:center;gap:6px;background:#fff;border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:700;color:var(--deep-green);box-shadow:0 1px 4px rgba(23,63,53,.1)}
/* narrator */
/* dots */
body .an-dots{gap:4px;padding:8px 10px}
body .an-dot{width:auto;min-width:14px;height:5px;border-radius:3px;font-size:0;border:0;background:#d9d2bd;padding:0;position:relative;flex:1 0 10px;max-width:26px}
body .an-dot::after{content:"";position:absolute;inset:-10px -2px}
body .an-dot.visited{background:var(--green)}
body .an-dot.active{background:var(--gold);transform:none;height:7px}
/* zoom rail */
.an-zoomrail{position:fixed;left:8px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;align-items:center;gap:6px}
.an-zoomrail button{width:38px;height:38px;border-radius:12px;border:0;background:#fff;color:var(--deep-green);box-shadow:0 2px 8px rgba(0,0,0,.18);cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:800;font-family:inherit}
.an-zoomrail .zbody{display:none;flex-direction:column;align-items:center;gap:6px;background:rgba(255,255,255,.92);padding:6px;border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,.15)}
.an-zoomrail.open .zbody{display:flex}
.an-zoomrail .zl{font-size:11px;font-weight:800;color:var(--deep-green)}
/* image frames */
.img-frame{position:relative;border-radius:14px;overflow:hidden;background:#e9e4d3;width:100%}
.img-frame .fbg{position:absolute;inset:-20px;background-size:cover;background-position:center;filter:blur(18px) brightness(.92);transform:scale(1.1)}
.img-frame img{position:relative;width:100%;height:100%;object-fit:contain;max-height:none;border-radius:0}
.img-frame.r43{aspect-ratio:4/3}.img-frame.r32{aspect-ratio:3/2}.img-frame.r169{aspect-ratio:16/9}
.an-fig{margin:10px 0}.an-fig .img-frame{max-height:380px}
.an-fig figcaption{font-size:12px;color:#5d6b66;margin-top:6px}
/* video */
.vid-wrap{position:relative;margin-top:10px;border-radius:14px;overflow:hidden;background:#000}
.vid-wrap video{width:100%;display:block;margin:0;border-radius:0;max-height:420px}
.vid-err{padding:16px;color:#fff;background:#2a3a35;display:flex;gap:10px;align-items:center;font-size:13px}
.vid-err[hidden]{display:none}
/* node cards */
.nd-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:2px 0 10px;flex-wrap:wrap}
.nd-top .an-hint{margin:0}
.nd-prog{font-size:12px;font-weight:700;color:#5d6b66}.nd-prog b{color:var(--deep-green);font-size:14px}
.nd-root{margin:0 auto;max-width:300px;text-align:center;background:var(--deep-green);color:#fff;border-radius:16px;padding:10px 16px;font-weight:800}
.nd-conn{height:14px;width:2px;background:#cfc7ad;margin:0 auto}
.nd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:12px;margin:6px 0 12px}
.nd-grid.n2{grid-template-columns:repeat(2,1fr)}
.nd-grid.n3{grid-template-columns:repeat(3,1fr)}
@media(max-width:480px){.nd-grid.n3{grid-template-columns:repeat(2,1fr)}}
 background:linear-gradient(160deg,color-mix(in srgb,var(--nc) 82%,#fff),var(--nc));
 box-shadow:0 5px 0 color-mix(in srgb,var(--nc) 65%,#000),0 8px 14px rgba(0,0,0,.12);transition:transform .15s,box-shadow .15s}
.nd-media{width:100%;display:block}.nd-media .img-frame{border-radius:12px}
.nd-chk{position:absolute;top:6px;left:6px;width:22px;height:22px;border-radius:50%;background:#fff;color:var(--nc);display:none;align-items:center;justify-content:center;z-index:2}
.nd-chk .ic{width:14px;height:14px}
.nd.seen .nd-chk{display:flex}
.nd-detail .img-frame{margin-bottom:10px}
/* chart */
.an-chart{padding:8px 4px 0}
.an-bar{border-radius:12px 12px 4px 4px;background:linear-gradient(180deg,color-mix(in srgb,var(--bc) 78%,#fff),var(--bc))!important;box-shadow:0 3px 8px rgba(0,0,0,.12)}
.an-bar-val{background:#fff;border-radius:999px;padding:1px 8px;box-shadow:0 1px 4px rgba(0,0,0,.1)}
/* classify */
.cl-card{position:relative;padding-inline-start:26px;border-radius:14px;border:1.5px solid #e1dac4;box-shadow:0 2px 0 #e1dac4}
.cl-card::before{content:"";position:absolute;inset-inline-start:9px;top:50%;width:6px;height:16px;transform:translateY(-50%);background:radial-gradient(circle,#b9b09a 1.5px,transparent 2px) 0 0/6px 6px}
.cl-zone{border-style:solid;border-width:2px;border-top:6px solid var(--zc);border-radius:16px}
.cl-zb:empty::before{content:"اضغط هنا لوضع البطاقة";color:#8d8872;font-size:12px;display:block;text-align:center;padding:22px 4px}
.an-hint{border-radius:999px;padding:6px 14px}
.an-bar-val{direction:ltr;unicode-bidi:isolate}
.an-zoomrail{top:auto;bottom:88px;transform:none;left:6px;opacity:.9}
.an-zoomrail .zt{width:34px;height:34px;font-size:13px}
.hud-chip,.hud-pts,.hud-bd,.hud-prog,.hud-rank{white-space:nowrap}
.nd-grid.n2,.nd-grid.n3{max-width:560px;margin-inline:auto}
.nd-grid.n3{max-width:700px}
.an-footer-nav{max-width:800px;margin:0 auto;width:100%}

/* ===== الخطوط المرفقة ===== */
@font-face{font-family:'Tajawal';font-weight:400;src:url('../../shared/fonts/DINNextLTArabic-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Tajawal';font-weight:500;src:url('../../shared/fonts/tajawal-500.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Tajawal';font-weight:700;src:url('../../shared/fonts/tajawal-700.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Tajawal';font-weight:800;src:url('../../shared/fonts/tajawal-800.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Tajawal';font-weight:900;src:url('../../shared/fonts/tajawal-900.woff2') format('woff2');font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:400;src:url('../../shared/fonts/IBMPlexArabic-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:500 600;src:url('../../shared/fonts/plex-600.woff2') format('woff2');font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:700 900;src:url('../../shared/fonts/plex-700.woff2') format('woff2');font-display:swap}
html{-webkit-text-size-adjust:100%}

/* ===== المذيع: كبير على جانب الشاشة ===== */
.an-rayan{display:flex;align-items:flex-end;gap:10px;margin:8px 6px 4px;position:relative;z-index:3}
.an-rayan .nr-full{display:none}
.an-rayan .nr-bust{display:block;width:112px;height:auto;max-height:130px;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,0,0,.28));animation:an-float 3.4s ease-in-out infinite}
.an-narr-wrap{display:flex;flex-direction:column;align-items:center;flex:none}
.an-rayan-bubble{flex:1;background:#fff;border-radius:18px;padding:12px 16px;font-size:15.5px;line-height:1.85;box-shadow:0 3px 12px rgba(0,0,0,.14);position:relative;color:var(--slate)}
.an-rayan-bubble::before{content:"";position:absolute;inset-inline-start:-8px;bottom:22px;width:16px;height:16px;background:#fff;transform:rotate(45deg);border-radius:3px}
@media(min-width:960px){
  :root{--nw:clamp(210px,20vw,310px)}
  .an-rayan{position:fixed;z-index:6;bottom:78px;inset-inline-start:max(10px,calc((100vw - (820px + var(--nw)))/2 - 10px));width:var(--nw);flex-direction:column-reverse;align-items:center;gap:6px;margin:0;pointer-events:none}
  .an-rayan .nr-bust{display:none}
  .an-rayan .nr-full{display:block;height:min(50vh,470px);width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(0,0,0,.35));animation:an-float 4s ease-in-out infinite}
  .an-rayan-bubble{flex:none;width:100%;max-height:28vh;overflow:auto;font-size:15px;pointer-events:auto}
  .an-rayan-bubble::before{inset-inline-start:auto;inset-inline-end:46%;bottom:-8px}
  .an-shell,.an-footer-nav{max-width:calc(820px + var(--nw));padding-inline-start:var(--nw);margin-inline:auto;width:100%}
  .an-footer-nav{padding-inline-end:12px}
}
@media(min-width:960px) and (max-height:620px){ .an-rayan .nr-full{height:34vh} .an-rayan-bubble{max-height:24vh;font-size:14px} }
.an-narr-name{margin-top:-4px}

/* ===== بطاقات العقد: لوحة التفاصيل بنفس لون البطاقة ===== */
.nd{position:relative;border:0;border-radius:20px;padding:12px 10px 14px;font-family:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:9px;color:var(--fg,#fff);
 background:linear-gradient(160deg,color-mix(in srgb,var(--nc) 84%,#fff),var(--nc));
 box-shadow:0 5px 0 color-mix(in srgb,var(--nc) 62%,#000),0 8px 14px rgba(0,0,0,.14);transition:transform .15s,box-shadow .15s}
.nd:hover{transform:translateY(-2px)}
.nd:active,.nd.active{transform:translateY(3px);box-shadow:0 2px 0 color-mix(in srgb,var(--nc) 62%,#000),0 3px 6px rgba(0,0,0,.14)}
.nd.active{outline:3px solid #fff;outline-offset:-7px}
.nd-ic,.nd-num{width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.26);display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:900;font-family:'IBM Plex Sans Arabic',sans-serif}
.nd-name{font-weight:800;font-size:16px;line-height:1.4;text-align:center;color:var(--fg,#fff)}
.nd-media .img-frame{box-shadow:0 0 0 3px rgba(255,255,255,.7)}
.nd-detail{display:none;border-radius:20px;padding:16px;margin-top:6px;color:var(--fg,#fff);
 background:linear-gradient(160deg,var(--pc1,var(--nc)),var(--pc2,var(--nc)));border:2px solid color-mix(in srgb,var(--nc) 55%,#fff);box-shadow:0 6px 16px rgba(0,0,0,.12)}
.nd-detail.show{display:block;animation:an-fadeup .3s ease both}
.nd-lbl{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:13px;margin-bottom:10px;background:var(--nc);padding:3px 14px;border-radius:999px;color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.nd-detail .ttl{font-weight:900;font-size:19px;margin-bottom:6px;color:var(--fg,#fff)}
.nd-detail .body,.nd-detail p,.nd-detail li,.nd-detail small,.nd-detail b{color:var(--fg,#fff);font-size:16px;line-height:1.85}
.nd-detail .img-frame{margin-bottom:12px;box-shadow:0 0 0 3px rgba(255,255,255,.75)}
.nd-chk{background:#fff;color:var(--nc)}
/* بطاقات دائرية بالصور */
.nc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px 12px;margin:10px 0 14px;justify-items:center}
.nc-grid.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:640px){.nc-grid.n4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.nc{border:0;background:none;font-family:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:200px;padding:0}
.nc-ring{position:relative;display:block;width:100%;aspect-ratio:1;border-radius:50%;border:7px solid var(--nc);background:#fff;overflow:hidden;box-shadow:0 6px 14px rgba(0,0,0,.2);transition:transform .2s}
.nc-ring img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.nc-fb{display:flex;width:100%;height:100%;align-items:center;justify-content:center;font-size:48px;color:var(--nc)}
.nc:hover .nc-ring{transform:scale(1.04)}
.nc.active .nc-ring{box-shadow:0 0 0 5px #fff,0 0 0 9px var(--nc),0 8px 18px rgba(0,0,0,.25)}
.nc-name{background:#fff;border-radius:14px;padding:7px 16px;font-weight:800;font-size:16px;color:#173F35;box-shadow:0 2px 8px rgba(0,0,0,.14);border-bottom:4px solid var(--nc);text-align:center;line-height:1.35}
.nc .nd-chk{position:absolute;top:8px;inset-inline-end:8px;display:none;z-index:2;width:26px;height:26px;border-radius:50%;align-items:center;justify-content:center}
.nc.seen .nd-chk{display:flex}
.nd-grid{gap:14px}
/* مصطلح مميز */
.term-box{position:relative;margin:16px 0;border-radius:18px;padding:22px 18px 16px;color:#fff;background:linear-gradient(135deg,color-mix(in srgb,var(--tc) 82%,#fff),var(--tc));box-shadow:0 6px 0 color-mix(in srgb,var(--tc) 60%,#000),0 10px 18px rgba(0,0,0,.16)}
.term-tag{position:absolute;top:-13px;inset-inline-start:18px;background:#D7A83E;color:#173F35;font-weight:900;font-size:13px;padding:4px 16px;border-radius:999px;box-shadow:0 3px 8px rgba(0,0,0,.25)}
.term-name{font-size:23px;font-weight:900;margin-bottom:6px;color:#fff}
.term-def{font-size:16.5px;line-height:1.9;color:#fff}
/* كرة أرضية */
.earth-wrap{position:relative;width:min(100%,340px);aspect-ratio:1;margin:8px auto}
.earth-globe{position:absolute;inset:11%;border-radius:50%;background-repeat:no-repeat;background-position:57% 45%;background-size:430% auto;box-shadow:inset -22px -14px 40px rgba(0,0,30,.55),inset 8px 6px 22px rgba(255,255,255,.18),0 10px 24px rgba(0,0,0,.35)}
.earth-ring{position:absolute;inset:0;width:100%;height:100%}
.earth-ring .er{cursor:pointer;transition:stroke-width .15s,filter .15s}
.earth-ring .er:hover{stroke-width:32;filter:brightness(1.08)}
.earth-lbl{position:absolute;background:#fff;border-radius:999px;padding:4px 12px;font-weight:800;font-size:14px;color:#173F35;box-shadow:0 2px 8px rgba(0,0,0,.2);white-space:nowrap}
.earth-lbl.on{top:2%;inset-inline-end:2%;border-bottom:3px solid #D7A83E}
.earth-lbl.off{bottom:2%;inset-inline-start:2%;border-bottom:3px solid #3E8FA3}
/* تصنيف: صور للأنواع */
.cl-zh{display:flex;align-items:center;gap:8px;font-weight:800}
.cl-zimg{width:44px;height:44px;border-radius:50%;overflow:hidden;border:3px solid var(--zc);flex:none}
.cl-zimg img{width:100%;height:100%;object-fit:cover}
/* رسم بياني: أرقام واضحة */
.an-bar-val{font-size:17px;font-weight:900;padding:2px 10px}
.an-bar-lbl{font-size:14.5px;font-weight:800;line-height:1.35}
.an-chart{min-height:260px}
.an-hint{font-size:14px}
.nd-prog{font-size:14px}
body,button,input,textarea,select,h1,h2,h3,.an-btn,.an-title{font-family:'Tajawal','IBM Plex Sans Arabic',system-ui,sans-serif}
.nums,.an-points,.an-progress-label{font-family:'IBM Plex Sans Arabic','Tajawal',sans-serif}

/* نواتج التعلم */
.oc-box{border-radius:20px;overflow:hidden;background:#fff;border:2px solid #2E6B4F;box-shadow:0 6px 0 #1f4d38,0 10px 18px rgba(0,0,0,.12);margin:14px 0}
.oc-head{background:linear-gradient(135deg,#2E6B4F,#173F35);color:#fff;font-weight:900;font-size:20px;padding:12px 18px}
.oc-main{background:#FFF6DC;border-bottom:2px dashed #D7A83E;padding:12px 18px}
.oc-main b{color:#9a6b00;font-size:15px}.oc-main p{margin:4px 0 0;font-size:16px;line-height:1.9;color:#2b3a36}
.oc-lead{padding:12px 18px 2px;font-weight:800;color:#173F35;font-size:16.5px}
.oc-list{list-style:none;counter-reset:oc;margin:0;padding:6px 18px 16px;display:grid;gap:8px}
.oc-list li{counter-increment:oc;position:relative;padding:10px 52px 10px 12px;background:#F4F7F4;border-radius:12px;font-size:16px;line-height:1.8;color:#2b3a36}
.oc-list li::before{content:counter(oc);position:absolute;inset-inline-start:auto;right:10px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:#D7A83E;color:#173F35;font-weight:900;display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Sans Arabic',sans-serif}

/* شرائح داخل شاشة واحدة (شاشة 36): لون مميّز لكل شريحة */
.sd-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px}
.sd-tab{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--sc);background:#fff;color:var(--deep-green);border-radius:14px;padding:8px 14px;font:inherit;font-weight:800;font-size:14px;cursor:pointer;min-height:44px}
.sd-tab .sd-n{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--sc);color:var(--sfg);font-size:13px}
.sd-tab.active{background:var(--sc);color:var(--sfg)}
.sd-tab.active .sd-n{background:var(--sfg);color:var(--sc)}
.sd-panel{border:2px solid var(--sc);background:var(--sc-soft);border-radius:18px;padding:14px 14px 6px}
.sd-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;color:var(--deep-green);font-size:16px}
.sd-badge{background:var(--sc);color:var(--sfg);border-radius:999px;padding:3px 12px;font-size:13px;font-weight:800}
.sd-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.sd-nav .an-btn[disabled]{opacity:.4;cursor:default}
.sd-pos{font-weight:800;color:var(--deep-green)}

/* ردّ المعلم */
.hud-reply{display:inline-flex;align-items:center;gap:6px;background:#D7A83E;color:#173F35;border:0;border-radius:999px;padding:5px 12px;font:inherit;font-size:12.5px;font-weight:800;cursor:pointer;white-space:nowrap;box-shadow:0 1px 4px rgba(23,63,53,.2)}
.rp-row{border:1px solid #d9d3c2;border-radius:12px;padding:10px 12px;margin:8px 0;background:#faf8f1}
.rp-note{margin-top:4px;background:#fff;border-radius:8px;padding:6px 10px}
.an-reply:empty{display:none}

/* ===== شاشة شاراتي ===== */
.bg-intro{margin:4px 0 10px;font-size:14.5px;line-height:1.8;color:var(--slate)}
.bg-list{display:flex;flex-direction:column;gap:9px;margin:6px 0 14px;max-height:52vh;overflow:auto}
.bg-row{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:16px;background:#f4efe3;opacity:.82}
.bg-row.got{background:#e5f3e2;opacity:1}
.bg-img{flex:none;width:54px;height:54px;border-radius:14px;overflow:hidden;filter:grayscale(1)}
.bg-row.got .bg-img{filter:none}
.bg-img img{width:100%;height:100%;object-fit:cover;display:block}
.bg-tx{flex:1;font-size:14px;line-height:1.7}.bg-tx b{font-size:15.5px}
.bg-st{flex:none;font-size:12.5px;font-weight:700}

/* ============ v22: بطاقات بدرجات هادئة (كل شاشات الوحدة) ============ */
:root{--ink:#1F4A3D}
.nd{color:var(--ink);border:1.5px solid color-mix(in srgb,var(--nc) 26%,#fff);
 background:linear-gradient(160deg,color-mix(in srgb,var(--nc) 13%,#fff),color-mix(in srgb,var(--nc) 30%,#fff));
 box-shadow:0 5px 0 color-mix(in srgb,var(--nc) 24%,#e4dccb),0 9px 16px rgba(40,55,45,.08)}
.nd:active,.nd.active{box-shadow:0 2px 0 color-mix(in srgb,var(--nc) 24%,#e4dccb),0 3px 6px rgba(40,55,45,.08)}
.nd .nd-name,.nd .nd-ic,.nd .nd-num{color:var(--ink)}
.nd-chk{background:#fff;color:color-mix(in srgb,var(--nc) 70%,#1d3b34)}
.nd-lbl{background:color-mix(in srgb,var(--nc) 24%,#fff);color:var(--ink);box-shadow:none;border:1px solid color-mix(in srgb,var(--nc) 30%,#fff)}
.nc-ring{border:5px solid color-mix(in srgb,var(--nc) 38%,#fff);box-shadow:0 6px 14px rgba(40,55,45,.12)}
.nc.active .nc-ring{box-shadow:0 0 0 4px #fff,0 0 0 7px color-mix(in srgb,var(--nc) 50%,#fff),0 8px 18px rgba(40,55,45,.16)}
.nc-name{border-bottom:3px solid color-mix(in srgb,var(--nc) 45%,#fff);box-shadow:0 2px 8px rgba(40,55,45,.08)}
.nc-fb{color:color-mix(in srgb,var(--nc) 75%,#1d3b34)}
.sd-tab{border-color:color-mix(in srgb,var(--sc) 40%,#fff)}
.sd-tab.active,.sd-tab .sd-n,.sd-badge{background:color-mix(in srgb,var(--sc) 30%,#fff);color:var(--ink)}
.sd-tab.active{border-color:color-mix(in srgb,var(--sc) 55%,#fff)}
.sd-tab.active .sd-n{background:#fff;color:var(--ink)}
.sd-panel{border-color:color-mix(in srgb,var(--sc) 35%,#fff)}

/* ============ v22: شريط الحالة (HUD) ============ */
.an-hud{margin:8px 4px}
.hud-bar{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;background:#fff;border-radius:18px;box-shadow:0 2px 10px rgba(31,74,61,.10);padding:4px;border:1px solid rgba(31,74,61,.06)}
.hud-bar .an-hud-triple-extra,.hud-bar .an-hud-prog-wrap{display:contents}
.hud-seg{display:inline-flex;align-items:center;gap:8px;background:none;border:0;border-radius:14px;padding:6px 12px;font:inherit;color:var(--ink);cursor:pointer;box-shadow:none;white-space:nowrap}
.hud-seg+.hud-seg,.hud-bar>.hud-seg+.an-hud-triple-extra .hud-seg:first-child{border-inline-start:1px solid rgba(31,74,61,.08);border-radius:0}
.hud-seg:hover{background:#f6f2e8}
.hs-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:#F3E7CC;font-size:15px}
.hud-pts .hs-ic{background:#FBE3CF}
.hs-tx{display:inline-flex;flex-direction:column;line-height:1.15}
.hs-tx small{font-size:10.5px;font-weight:700;color:#6a7a72}
.hs-tx b{font-size:17px;font-weight:900;color:var(--ink)}
.hud-rank .hs-tx{flex-direction:row;align-items:baseline;gap:4px}
.hud-rank .hs-tx{flex-wrap:wrap}
.hud-meds{display:inline-flex;gap:3px;margin-top:3px}
.hud-meds i{width:10px;height:10px;border-radius:50%;background:#e6e1d3;display:block}
.hud-meds i.on{background:#D7A83E;box-shadow:0 0 0 2px #F8EBC7}
.hud-prog{flex:1;min-width:120px;display:inline-flex;align-items:center;gap:8px}
.hp-bar{flex:1;height:8px;border-radius:99px;background:#ece7d9;overflow:hidden;min-width:48px}
.hp-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#7FB99C,#2E6B4F)}
.hud-prog b{font-size:13px;font-weight:900}
.hud-prog i:not(.hp-bar i){background:none}
@media(max-width:520px){ .hud-seg{padding:5px 8px;gap:6px} .hs-ic{width:26px;height:26px} .hud-bar{border-radius:16px} .hud-prog{min-width:100%;border-inline-start:0!important;border-top:1px solid rgba(31,74,61,.08);border-radius:0 0 12px 12px} }

/* ============ v22: قائمة المتصدرين ============ */
.lb-modal{max-width:520px}
.av{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;font-weight:900;font-size:15px;color:var(--ink);flex:none;border:2px solid #fff;box-shadow:0 1px 4px rgba(31,74,61,.15)}
.av.lg{width:48px;height:48px;font-size:20px}
.lb-sum{display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(160deg,#E6F1E8,#F3EBD4);border-radius:20px;padding:14px 16px;margin:6px 0 14px}
.lb-rank{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.lb-rank b{font-size:38px;line-height:1;color:var(--ink);font-weight:900}
.lb-rank small{font-size:12.5px;font-weight:700;color:#5d6e66}
.lb-me{display:flex;align-items:center;gap:10px}
.lb-me span{display:flex;flex-direction:column;line-height:1.3}.lb-me b{font-size:14px}.lb-me small{color:#5d6e66;font-weight:700}
.lb-podium{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;gap:8px;margin:4px 0 14px;text-align:center}
.lb-pod{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.lb-pod .lb-n{font-size:12.5px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.lb-pod .pt{font-weight:800;color:#6a7a72;font-size:11.5px}
.lb-medal{font-size:20px;min-height:24px}
.lb-base{width:100%;border-radius:14px 14px 0 0;display:grid;place-items:center;font-weight:900;font-size:22px;color:var(--ink)}
.p1 .lb-base{height:78px;background:#F6E7B8}.p2 .lb-base{height:56px;background:#DDE6EA}.p3 .lb-base{height:42px;background:#F1D9C4}
.lb-pod.me .av{box-shadow:0 0 0 3px #D7A83E}
.lb-list{display:flex;flex-direction:column;gap:6px;max-height:38vh;overflow:auto}
.lb-row{display:flex;align-items:center;gap:10px;background:#faf7ef;border-radius:14px;padding:7px 12px}
.lb-row .rk{width:22px;text-align:center;font-weight:900;color:#6a7a72}
.lb-row .nm{flex:1;font-weight:700;font-size:14px}
.lb-row .pt{font-weight:800;color:#6a7a72;font-size:12px}
.lb-row.me{background:#F6E7B8;box-shadow:inset 0 0 0 1.5px #D7A83E}
.lb-empty{color:#6a7a72;text-align:center}

/* ============ v22: شاراتي والتقدم ============ */
.bg-head{display:flex;align-items:center;gap:14px;margin-bottom:10px;position:relative}
.bg-head .ring{flex:none}
.bg-cnt{position:absolute;inset-inline-start:0;width:74px;text-align:center;font-weight:900;font-size:17px;color:var(--ink)}
.bg-head .an-title{margin:0 0 4px}.bg-intro{margin:0;font-size:13.5px;line-height:1.7;color:#4b5d55}
.bg-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 14px;max-height:52vh;overflow:auto;padding:2px}
.bg-tile{background:linear-gradient(160deg,color-mix(in srgb,var(--bt) 55%,#fff),var(--bt));border-radius:18px;padding:12px 10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;opacity:.78}
.bg-tile.got{opacity:1;box-shadow:0 0 0 2px #D7A83E}
.bg-tile .bg-img{width:76px;height:76px;border-radius:50%;overflow:hidden;filter:grayscale(1);border:3px solid #fff;box-shadow:0 2px 8px rgba(31,74,61,.14)}
.bg-tile.got .bg-img{filter:none}
.bg-tile .bg-img img{width:100%;height:100%;object-fit:cover}
.bg-tile b{font-size:14px;color:var(--ink);line-height:1.35}
.bg-tile p{margin:0;font-size:12px;line-height:1.55;color:#4b5d55}
.bg-tile .bg-st{margin-top:auto;font-size:11.5px;font-weight:800;padding:2px 10px;border-radius:99px;background:#fff;color:#6a7a72}
.bg-tile.got .bg-st{background:#2E6B4F;color:#fff}
@media(max-width:380px){.bg-grid{grid-template-columns:1fr}}
.pg-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:6px 0 12px}
.pg-tile{background:var(--pt);border-radius:18px;padding:12px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;font-size:12.5px;font-weight:800;color:var(--ink);line-height:1.35}
.pg-ringw{position:relative;width:78px;height:78px}.pg-ringw b{position:absolute;inset:0;display:grid;place-items:center;font-size:16px;font-weight:900}
.pg-tile small{font-weight:700;color:#5d6e66}

.sfx{font-size:.78em;font-weight:800;color:#8a9890;background:#f0ece0;border-radius:8px;padding:0 6px;margin-inline-start:2px}
.you{font-style:normal;font-size:.75em;font-weight:900;color:#fff;background:#2E6B4F;border-radius:99px;padding:1px 8px;margin-inline-start:4px}
/* v22: بطاقة المصطلح بدرجة هادئة */
.term-box{color:var(--ink);background:linear-gradient(135deg,color-mix(in srgb,var(--tc) 12%,#fff),color-mix(in srgb,var(--tc) 26%,#fff));border:1.5px solid color-mix(in srgb,var(--tc) 30%,#fff);box-shadow:0 5px 0 color-mix(in srgb,var(--tc) 24%,#e4dccb),0 9px 16px rgba(40,55,45,.08)}
.term-name,.term-def{color:var(--ink)}
.term-tag{box-shadow:none;background:color-mix(in srgb,var(--tc) 30%,#fff);color:var(--ink)}
/* ===== مؤثرات العرض (هادئة، وتُعطَّل مع تفضيل تقليل الحركة) ===== */
@keyframes an-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes an-pop{0%{opacity:0;transform:scale(.86)}60%{opacity:1;transform:scale(1.035)}100%{transform:scale(1)}}
@keyframes an-slide-in{from{opacity:0;transform:translateX(var(--sx,-60px))}to{opacity:1;transform:none}}
@keyframes an-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes an-shake{0%,100%{transform:none}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@keyframes an-glow{0%,100%{box-shadow:0 0 0 0 rgba(215,168,62,.0)}50%{box-shadow:0 0 0 8px rgba(215,168,62,.28)}}
@keyframes an-panel{from{opacity:0;transform:translateY(-10px) scale(.97);clip-path:inset(0 0 100% 0 round 20px)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 20px)}}
@keyframes an-shine{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes an-vt-out{to{opacity:0;transform:translateX(-26px)}}
@keyframes an-vt-in{from{opacity:0;transform:translateX(26px)}}

@keyframes an-take-out-next{0%{transform:none}18%{transform:translateX(18px) scale(.97)}100%{transform:translateX(-125vw) rotate(-5deg)}}
@keyframes an-take-out-prev{0%{transform:none}18%{transform:translateX(-18px) scale(.97)}100%{transform:translateX(125vw) rotate(5deg)}}
@keyframes an-take-in-next{from{transform:translateX(125vw) rotate(5deg)}to{transform:none}}
@keyframes an-take-in-prev{from{transform:translateX(-125vw) rotate(-5deg)}to{transform:none}}
@keyframes an-pg-out-next{to{opacity:0;transform:translateX(-70px)}}
@keyframes an-pg-out-prev{to{opacity:0;transform:translateX(70px)}}
@keyframes an-pg-in-next{from{opacity:0;transform:translateX(70px)}}
@keyframes an-pg-in-prev{from{opacity:0;transform:translateX(-70px)}}
@media (prefers-reduced-motion:no-preference){
  /* ريان يصحب الطالب من شاشة لأخرى */
  body.an-go-next .an-rayan{animation:an-take-out-next .6s cubic-bezier(.5,0,.8,.4) both!important}
  body.an-go-prev .an-rayan{animation:an-take-out-prev .6s cubic-bezier(.5,0,.8,.4) both!important}
  body.an-go-next .an-shell{animation:an-pg-out-next .5s .08s ease-in both!important}
  body.an-go-prev .an-shell{animation:an-pg-out-prev .5s .08s ease-in both!important}
  body.an-in-next .an-rayan{animation:an-take-in-next .75s cubic-bezier(.2,.8,.2,1) both!important}
  body.an-in-prev .an-rayan{animation:an-take-in-prev .75s cubic-bezier(.2,.8,.2,1) both!important}
  body.an-in-next .an-shell{animation:an-pg-in-next .6s .2s cubic-bezier(.2,.8,.2,1) both}
  body.an-in-prev .an-shell{animation:an-pg-in-prev .6s .2s cubic-bezier(.2,.8,.2,1) both}
  body.an-in-next .an-rayan-bubble,body.an-in-prev .an-rayan-bubble{animation:an-pop .5s 1s both}
  /* انتقال سلس بين الشاشات */

  /* دخول المحتوى */
  .an-title{animation:an-rise .6s cubic-bezier(.2,.8,.2,1) both}
  .an-listen-btn{animation:an-pop .6s .2s both}
  .an-blk{animation:an-rise .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(min(var(--i,0),7)*90ms + 120ms)}
  @supports (animation-timeline:view()){
    .an-blk:nth-child(n+4){animation:an-rise linear both;animation-timeline:view();animation-range:entry 0% entry 35%;animation-delay:0s}
  }
  .an-footer-nav .an-btn{animation:an-pop .5s .5s both}

  /* الشخصية المرشدة تدخل من جانب الشاشة ثم تطفو */
  .an-rayan{--sx:-70px;animation:an-slide-in .8s .15s cubic-bezier(.2,.8,.2,1) both}
  [dir=rtl] .an-rayan{--sx:70px}
  .an-rayan-bubble{animation:an-pop .55s .75s both}

  /* البطاقات */
  .nd,.nc{transition:transform .22s cubic-bezier(.3,1.4,.5,1),box-shadow .22s,filter .22s}
  .nd:hover,.nc:hover{transform:translateY(-5px) scale(1.025);filter:saturate(1.08)}
  .nd:active,.nc:active{transform:scale(.97)}
  .nd:not(.seen),.nc:not(.seen){animation:an-glow 2.8s ease-in-out 1.2s 2}
  .nd-grid .nd,.nc-grid .nc{animation-fill-mode:both}
  .nd-detail.show{animation:an-panel .45s cubic-bezier(.2,.8,.2,1) both}
  .nd-detail.show .body,.nd-detail.show .img-frame{animation:an-rise .5s .12s both}
  .nd-chk{animation:an-pop .4s both}

  /* الرسوم البيانية */
  .an-bar{transform-origin:bottom;animation:an-grow .9s cubic-bezier(.2,.9,.2,1) both}
  .an-bar-col:nth-child(2) .an-bar{animation-delay:.1s}.an-bar-col:nth-child(3) .an-bar{animation-delay:.2s}
  .an-bar-col:nth-child(4) .an-bar{animation-delay:.3s}.an-bar-col:nth-child(5) .an-bar{animation-delay:.4s}
  .an-bar-col{transition:transform .2s}.an-bar-col:hover{transform:translateY(-4px)}

  /* أزرار وتغذية راجعة */
  .an-btn{transition:transform .18s cubic-bezier(.3,1.4,.5,1),box-shadow .2s}
  .an-btn:hover{transform:translateY(-2px)}.an-btn:active{transform:scale(.96)}
  .an-feedback.show{animation:an-pop .45s both}
  .an-feedback.show.incorrect{animation:an-shake .5s both}
  .term-box{animation:an-pop .7s .1s both;background-size:200% 100%}
  .term-box::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%) 200% 0/200% 100%;animation:an-shine 3.4s 1s ease-in-out 2;pointer-events:none}
  .img-frame{transition:transform .35s}.img-frame:hover{transform:scale(1.012)}
  .an-dots .on,.an-dots .cur{animation:an-glow 2.4s ease-in-out infinite}
  .an-points-toast{animation-timing-function:cubic-bezier(.2,1.2,.3,1)}
}

/* مشغّل الصوت الهادئ */
.amb{position:fixed;z-index:60;inset-inline-end:14px;bottom:300px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;font-family:inherit}
.amb-btn{width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;background:linear-gradient(145deg,#2E6B4F,#173F35);color:#fff;box-shadow:0 5px 14px rgba(0,0,0,.28);display:grid;place-items:center;font-size:20px;transition:transform .2s}
.amb-btn:hover{transform:scale(1.08)}
.amb-btn.on::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(215,168,62,.7);animation:an-amb-ring 2.6s ease-out infinite}
.amb-btn{position:relative}
@keyframes an-amb-ring{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.amb-pop{display:none;background:#fff;border-radius:16px;padding:12px 16px;box-shadow:0 8px 24px rgba(0,0,0,.25);min-width:210px;color:#173F35}
.amb.open .amb-pop{display:block}
.amb-pop b{display:block;font-size:14px;margin-bottom:8px}
.amb-row{display:flex;align-items:center;gap:10px}
.amb-row button{border:0;background:#F1EBD8;border-radius:999px;width:34px;height:34px;cursor:pointer;font-size:16px}
.amb-row input[type=range]{flex:1;accent-color:#2E6B4F;min-width:110px}
.amb-note{font-size:12px;color:#5b6b64;margin-top:6px}
@media (max-width:959px){.amb{bottom:370px;inset-inline-end:10px}.amb-btn{width:42px;height:42px}}

/* لوحة التقدم */
.hud-prog[role=button]{cursor:pointer}
.pg-sum{display:grid;gap:12px;margin:10px 0 14px}
.pg-row{display:grid;gap:5px}
.pg-l{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;font-weight:700;color:#173F35}
.pg-bar{height:11px;border-radius:99px;background:#E7E1CC;overflow:hidden}
.pg-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#2E6B4F,#D7A83E);transition:width .6s}
.pg-det{margin-top:10px;background:#FAF7EC;border-radius:12px;padding:8px 12px}
.pg-det summary{cursor:pointer;font-weight:800;color:#173F35;padding:4px 0}
.pg-det .pg-row{margin:10px 0}
.pg-note{font-size:12px;color:#5b6b64;margin-top:6px}

/* ===== حركة الشخصيات (مبروك / ريّان / كريمة): دخول بمشية، تنفّس، كلام، تفاعل ===== */
@keyframes an-walk-in{0%{transform:translateX(var(--wx,-120%))}100%{transform:translateX(0)}}
@keyframes an-step{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-9px) rotate(-3.5deg)}50%{transform:translateY(0) rotate(0)}75%{transform:translateY(-9px) rotate(3.5deg)}}
@keyframes an-breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.012,1.028)}}
@keyframes an-talk{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-4px) rotate(-1.6deg)}65%{transform:translateY(-1px) rotate(1.6deg)}}
@keyframes an-hop{0%,100%{transform:translateY(0)}30%{transform:translateY(-26px) rotate(-4deg)}60%{transform:translateY(0)}80%{transform:translateY(-9px) rotate(3deg)}}
@keyframes an-sway-no{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
@media (prefers-reduced-motion:no-preference){
  .an-rayan .an-narr-wrap{transform-origin:50% 100%;animation:an-walk-in 1.15s cubic-bezier(.3,.7,.3,1) both}
  .an-rayan.mabrouk .an-narr-wrap,.an-rayan.karima .an-narr-wrap{--wx:120%}
  .an-rayan .nr-bust,.an-rayan .nr-full{transform-origin:50% 100%;animation:an-step .46s ease-in-out 3, an-breathe 4.2s ease-in-out 1.4s infinite}
  .an-rayan.walked .nr-bust,.an-rayan.walked .nr-full{animation:an-breathe 4.2s ease-in-out infinite}
  .an-rayan.talk .nr-bust,.an-rayan.talk .nr-full{animation:an-talk .62s ease-in-out infinite}
  .an-rayan.talk .an-rayan-bubble{box-shadow:0 0 0 3px rgba(215,168,62,.45),0 3px 12px rgba(0,0,0,.14)}
  .an-rayan.react-cheer .nr-bust,.an-rayan.react-cheer .nr-full{animation:an-hop .8s ease-out 1}
  .an-rayan.react-sad .nr-bust,.an-rayan.react-sad .nr-full{animation:an-sway-no .6s ease-in-out 1}
}
/* ===== v24 المسرح: شاشة بلا سكرول، قطاعات ملوّنة، متحدثون، أنشطة، مستكشف يمشي ===== */
:root{--sp-rayan:#2F7DB5;--sp-mabrouk:#2E8B57;--sp-karima:#7B5EA7;--task:#E0902A;--task-bg:#FFF4DF;--notice:#3B7FB0;--notice-bg:#E8F2FA}
body.an-stage{min-height:100dvh}
/* --- بطاقة المسرح --- */
.an-card.st-card{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"hd" "rg" "bd" "fb";gap:8px;padding:14px 16px}
.st-card>.an-title{grid-area:hd;margin:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-left:46px}
.st-card>.st-ring{grid-area:rg}
.st-card>#an-body{grid-area:bd;min-width:0;min-height:0}
.st-card>.an-feedback{grid-area:fb;margin:0}
.act-tag{display:inline-flex;align-items:baseline;gap:6px;background:var(--task);color:#fff;border-radius:999px;padding:3px 12px;font-size:13px;font-weight:800;order:-1;box-shadow:0 2px 6px rgba(224,144,42,.35)}
.act-tag span{font-weight:600;opacity:.9;font-size:12px}
body.an-activity .st-card{border-top:5px solid var(--task)}
/* --- الحلقة (شاشة عريضة) والأزرار (هاتف) --- */
.st-ring svg{display:none;width:100%;height:auto;max-width:200px;margin:0 auto}
.st-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none}
.st-chips::-webkit-scrollbar{display:none}
.st-chip{flex:none;display:flex;align-items:center;gap:6px;border:2px solid var(--c);background:color-mix(in srgb,var(--c) 14%,#fff);color:#1F4A3D;border-radius:999px;padding:6px 12px;font:700 14px/1 Tajawal,system-ui;cursor:pointer;transition:background .2s,transform .2s}
.st-chip.on{background:var(--c);color:#fff;transform:scale(1.04);box-shadow:0 3px 10px color-mix(in srgb,var(--c) 45%,transparent)}
.st-chip .ck{display:none;font-size:12px}.st-chip.vis:not(.on) .ck{display:inline}
.st-seg{animation:st-in .35s ease both}
.st-seg[hidden]{display:none!important}
@keyframes st-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.st-next{display:flex;margin:14px 0 2px auto;align-items:center;gap:8px;border:0;border-radius:999px;background:var(--c,#2E6B4F);color:#fff;padding:10px 20px;font:800 15px Tajawal,system-ui;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.15)}
.st-next:hover{filter:brightness(1.06)}
/* --- المحتوى مقابل المطلوب مقابل التنبيه --- */
.an-blk-mcq,.an-blk-tf,.an-blk-classify,.an-blk-order,.an-blk-fill,.an-blk-sentence,.an-blk-plan,.an-blk-write,.an-blk-evidence,.an-blk-venn,.an-blk-final{background:var(--task-bg);border:2px solid color-mix(in srgb,var(--task) 40%,#fff);border-inline-start:8px solid var(--task);border-radius:16px;padding:12px 14px 14px;margin-block:10px;position:relative}
.an-blk-mcq::before,.an-blk-tf::before,.an-blk-classify::before,.an-blk-order::before,.an-blk-fill::before,.an-blk-sentence::before,.an-blk-plan::before,.an-blk-write::before,.an-blk-evidence::before,.an-blk-venn::before,.an-blk-final::before{content:"✍️ المطلوب منك";display:inline-block;background:var(--task);color:#fff;font:800 13px Tajawal,system-ui;border-radius:999px;padding:3px 12px;margin-bottom:8px}
.an-blk-note .an-note{background:var(--notice-bg)!important;border:2px solid color-mix(in srgb,var(--notice) 35%,#fff)!important;border-inline-start:8px solid var(--notice)!important;color:#1d3d57}
.an-blk-note .an-note::before{content:"💡 تنبيه  ";font-weight:800;color:var(--notice)}
.an-blk-text .an-txt{background:#fff;border-radius:14px;padding:10px 14px}
/* --- المتحدث: لون واسم وصورة --- */
.an-rayan{--sp:var(--sp-rayan)}
.an-rayan.mabrouk{--sp:var(--sp-mabrouk)}
.an-rayan.karima{--sp:var(--sp-karima)}
.an-rayan .an-rayan-bubble{background:color-mix(in srgb,var(--sp) 12%,#fff);border:2px solid var(--sp);border-inline-start:2px solid var(--sp)!important;color:#1b2f3a}
.an-rayan .an-rayan-bubble::before{background:color-mix(in srgb,var(--sp) 12%,#fff);border:2px solid var(--sp);border-top:0;border-inline-end:0}
.an-rayan .sp-tag{display:inline-block;background:var(--sp);color:#fff;font:800 13px Tajawal,system-ui;border-radius:999px;padding:2px 12px;margin-inline-end:8px;vertical-align:baseline}
.an-rayan .an-narr-name{background:var(--sp);font-size:13px;padding:2px 12px}
.an-rayan .nr-bust,.an-rayan .nr-full{border-bottom:0}
.an-rayan.talk .nr-bust,.an-rayan.talk .nr-full{filter:drop-shadow(0 0 0 var(--sp)) drop-shadow(0 8px 10px rgba(0,0,0,.3))}
/* لا قفز ولا طفو: ثبات + تنفس خفيف فقط */
.an-rayan .nr-bust,.an-rayan .nr-full{animation:st-breathe 4.6s ease-in-out infinite!important}
.an-rayan .an-narr-wrap{animation:st-fade .5s ease both!important}
body[class*="an-go-"] .an-rayan,body[class*="an-in-"] .an-rayan{animation:none!important}
@keyframes st-breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.012)}}
@keyframes st-fade{from{opacity:0}to{opacity:1}}
/* --- زر التنقل بالمستكشف --- */
.an-footer-nav{align-items:flex-end;gap:10px}
.an-footer-nav .walker{flex:none;width:92px;height:56px;position:relative;pointer-events:none;z-index:4}
.an-footer-nav .walker img{position:absolute;bottom:2px;left:50%;height:84px;width:auto;transform:translateX(-50%);filter:drop-shadow(0 3px 3px rgba(0,0,0,.25))}
/* --- شاشات عريضة: أزرار الأقسام بالأعلى (بلا حلقة)، والراوي مدمج بالترويسة، المحتوى بكامل العرض --- */
@media(min-width:960px){
  body.an-stage{height:100dvh;overflow:hidden;display:flex;flex-direction:column}
  body.an-stage>.an-header,body.an-stage>.an-progressbar,body.an-stage>.an-dots,body.an-stage>.an-footer-nav{flex:none}
  body.an-stage>.an-shell{flex:1;min-height:0;display:flex}
  body.an-stage .an-shell,body.an-stage .an-footer-nav{max-width:min(1280px,100%);padding-inline-start:10px;padding-inline-end:10px}
  body.an-stage .an-zoomable{display:flex;flex-direction:column;width:100%;min-height:0}
  body.an-stage .an-hud{flex:none;margin:4px 4px 2px}
  body.an-stage .an-card.st-card{flex:1;min-height:0;margin:4px;grid-template-columns:minmax(0,1fr) minmax(0,560px);grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:"hd nr" "rg rg" "bd bd" "fb fb";column-gap:14px;row-gap:6px}
  body.an-stage .st-card>#an-body{overflow-y:auto;overflow-x:hidden;padding:2px 8px 8px 2px;scrollbar-width:thin}
  .st-ring svg{display:none!important}
  .st-ring .st-chips{display:flex;flex-wrap:wrap;overflow:visible}
  body.an-stage .an-dots{padding:4px 10px}
  body.an-stage .an-listen-btn{top:12px;left:12px}
  .st-card>.an-rayan{grid-area:nr;position:static!important;width:auto!important;flex-direction:row!important;align-items:flex-end;gap:10px;margin:0;pointer-events:auto;z-index:3}
  .st-card>.an-rayan .nr-full{display:none!important}
  .st-card>.an-rayan .nr-bust{display:block!important;width:74px;height:84px;max-height:none;object-fit:cover;object-position:50% 0;border-radius:14px 14px 0 0}
  .st-card>.an-rayan .an-narr-wrap{flex:none}
  .st-card>.an-rayan .an-rayan-bubble{flex:1;width:auto;max-height:92px;overflow:auto;font-size:14px;line-height:1.7;padding:7px 12px;border-radius:14px}
  .st-card>.an-rayan .an-rayan-bubble::before{inset-inline-start:-8px!important;inset-inline-end:auto!important;bottom:24px!important}
  .st-card>.an-title{padding-left:58px}
}
.st-ring .arc{cursor:pointer;transition:transform .25s}
.st-ring .arc path{transition:fill .25s}
.st-ring .arc:hover{transform:scale(1.03);transform-origin:100px 100px}
.st-ring .arc text{pointer-events:none;font-size:22px;text-anchor:middle;dominant-baseline:central}
.st-ring .ctr-t{font:800 14px Tajawal,system-ui;fill:#1F4A3D;text-anchor:middle}
.st-ring .ctr-s{font:600 11px Tajawal,system-ui;fill:#5b6f66;text-anchor:middle}
.st-ring .ck{font-size:13px;fill:#fff;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.st-ring .ckbg{fill:#2E8B57;stroke:#fff;stroke-width:2}
/* --- هاتف --- */
@media(max-width:959px){
  .st-card>.st-ring{position:sticky;top:0;z-index:5;background:linear-gradient(#fff 75%,transparent);margin:0 -4px;padding:2px 4px}
  .an-footer-nav .walker{width:70px}.an-footer-nav .walker img{height:70px}
}
@media(prefers-reduced-motion:reduce){.st-seg{animation:none}.an-rayan .nr-bust,.an-rayan .nr-full{animation:none!important}}
.an-rayan .an-narr-name{display:none}

/* شريط بيانات الدراسة والجهة (في كل صفحة) */
.an-study{display:flex;align-items:center;gap:8px;background:#173F35;color:#E9F3EE;font-size:12px;line-height:1.3;padding:3px 12px;min-height:24px;flex:none}
.an-study .as-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;opacity:.92}
.an-study .as-b{flex:none;border:0;background:rgba(255,255,255,.14);color:#fff;font:700 12px Tajawal,system-ui;border-radius:999px;padding:2px 10px;cursor:pointer}
.an-study .as-b:hover{background:rgba(255,255,255,.26)}
body.an-stage>.an-study{flex:none}
.an-about{max-width:640px}
.an-about .ab-uni{font-weight:800;color:#2E6B4F;margin:4px 0}
.an-about .ab-t{font-weight:800;font-size:1.05em;line-height:1.8;margin:6px 0}
.an-about .ab-en{font:600 .85em/1.6 Georgia,serif;color:#46574f;margin:0 0 10px}
.an-about .ab-row{display:grid;grid-template-columns:90px 1fr;gap:8px;padding:8px 0;border-top:1px solid #D9E6DF}
.an-about .ab-row small{display:block;color:#5a6f66;font-size:.82em;line-height:1.6}
.an-about .ab-note{margin:10px 0 0;font-size:.85em;color:#5a6f66}
.an-menu .mlessons{padding:8px 12px;border-bottom:1px solid #D9E6DF;display:grid;gap:4px}
.an-menu .mlessons>b{font-size:.9em;color:#2E6B4F}
.an-menu .ml{display:flex;flex-direction:column;border-radius:10px;padding:5px 10px;background:#F1F6F3}
.an-menu .ml.on{background:#DCEFE3;border-inline-start:4px solid #2E9D68;font-weight:800}
.an-menu .ml.off{opacity:.55}.an-menu .ml small{font-weight:500;color:#566d63}

/* صندوق المصطلح الجغرافي: بطاقة بارزة بشريط علوي وأيقونة */
.term-box{position:relative;margin:22px 0 10px!important;padding:30px 20px 16px!important;border-radius:20px!important;background:linear-gradient(160deg,#fff 0%,color-mix(in srgb,var(--tc) 10%,#fff) 100%)!important;border:3px solid var(--tc)!important;box-shadow:0 7px 0 color-mix(in srgb,var(--tc) 55%,#000),0 14px 24px rgba(40,30,70,.18)!important;color:#2b2540!important;overflow:visible}
.term-box::before{content:"💡";position:absolute;top:-22px;inset-inline-end:16px;width:46px;height:46px;border-radius:50%;background:#FFD45E;border:3px solid var(--tc);display:grid;place-items:center;font-size:24px;box-shadow:0 4px 0 rgba(0,0,0,.18)}
.term-box .term-tag{top:-15px!important;inset-inline-start:18px!important;background:var(--tc)!important;color:#fff!important;font-size:14px!important;padding:5px 18px!important;box-shadow:0 3px 0 rgba(0,0,0,.2)!important}
.term-box .term-name{font-size:25px!important;color:var(--tc)!important;margin:2px 0 8px!important}
.term-box .term-def{color:#2b2540!important;font-size:16px!important;line-height:1.85}
.term-box .term-def ul{margin:6px 0 0;padding-inline-start:22px}
.an-menu .mles{border-radius:14px;margin:8px 10px;background:#fff;border:2px solid #D9E6DF;overflow:hidden}
.an-menu .mles>summary{list-style:none;display:flex;flex-direction:column;gap:2px;padding:10px 14px;cursor:pointer;background:#F1F6F3}
.an-menu .mles>summary::-webkit-details-marker{display:none}
.an-menu .mles.cur>summary{background:linear-gradient(135deg,#1F5A45,#2E6B4F);color:#fff}
.an-menu .mles>summary small{font-weight:500;opacity:.85}
.an-menu .mles>summary::after{content:"▾";position:absolute;inset-inline-start:26px;margin-top:8px}
.an-menu .mles .msec{margin:6px}
.an-menu .msec.off{opacity:.5}.an-menu .msec.off .msum{padding:8px 12px;background:#F1F6F3;border-radius:10px;font-weight:700}
.an-menu .msoon{margin:4px 12px 10px;font-size:.85em;color:#5a6f66}
.an-menu .mles>summary{position:relative}
.an-menu .mles>summary::after{top:14px;inset-inline-start:14px!important;margin-top:0!important}
.an-menu .mles[open]>summary::after{content:"▴"}
@media(max-width:959px){ .an-rayan .nr-bust{width:76px!important;max-height:96px!important} .an-rayan-bubble{font-size:14px!important;padding:8px 12px!important} }

/* المحفزات: ثلاثة أقسام بألوان هادئة، وكل قسم يوضّح ما يرتبط به */
.hud-bar.hud-n3,.hud-bar.hud-n1{display:grid!important;gap:6px!important;padding:6px!important}
.hud-bar.hud-n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hud-bar.hud-n1{grid-template-columns:minmax(0,1fr)}
.hud-bar .hud-seg{border-inline-start:0!important;border-radius:14px!important;padding:6px 10px!important;display:flex;align-items:center;gap:8px;min-width:0;white-space:normal}
.hud-bar .hud-prog{grid-column:1/-1;min-width:0!important;border-top:0!important;background:#F4F7F5;border-radius:12px!important}
.hud-bar .hud-reply{grid-column:1/-1}
.hud-bar .hs-cap{display:block;font:600 10.5px/1.3 Tajawal,system-ui;font-style:normal;color:#5d6f67;margin-top:1px}
.hud-bar .hud-seg .hs-tx{min-width:0}
.hud-bar .hud-rank{background:#FBF1D8;box-shadow:inset 0 0 0 1.5px #E6CF93}
.hud-bar .hud-rank .hs-ic{background:#F1DDA3}
.hud-bar .hud-pts{background:#E4F0F6;box-shadow:inset 0 0 0 1.5px #A9CDDC}
.hud-bar .hud-pts .hs-ic{background:#C9E1EC}
.hud-bar .hud-bd{background:#EDE7F6;box-shadow:inset 0 0 0 1.5px #C8B9E0}
.hud-bar .hud-bd .hud-meds{flex-wrap:wrap}
.hud-bar .hud-rank .hs-tx{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px}
.hud-bar .hud-rank .hs-cap,.hud-bar .hud-pts .hs-cap,.hud-bar .hud-bd .hs-cap{flex-basis:100%;width:100%}
.hud-bar .hud-rank,.hud-bar .hud-pts,.hud-bar .hud-bd{flex-wrap:wrap}
@media(max-width:520px){
  .hud-bar .hud-seg{flex-direction:column;align-items:flex-start;gap:3px;padding:6px 8px!important}
  .hud-bar .hs-cap{font-size:10px}
  .hud-bar .hs-ic{width:24px;height:24px}
}
html,body{overflow-x:clip;max-width:100%}
.img-frame{overflow:hidden}
.hud-bar .hud-seg{overflow:hidden}
.hud-bar .hs-tx,.hud-bar .hs-tx small,.hud-bar .hs-cap{white-space:normal!important;overflow-wrap:anywhere;max-width:100%}
.hud-bar .hud-meds{display:flex;flex-wrap:wrap;gap:3px}
@media(max-width:520px){ .hud-bar .hud-seg{width:100%} .hud-bar .hud-rank .hs-tx{flex-direction:column;align-items:flex-start;gap:0} .hud-bar .hs-ic{display:none} }
.hud-bar .hud-seg>*{min-width:0;max-width:100%}
.hud-bar .hud-seg .hs-tx{display:flex;flex:1 1 0;width:auto}
.hud-bar .hud-meds i{width:9px;height:9px}
@media(max-width:520px){ .hud-bar .hud-seg .hs-tx{width:100%;flex:none} .hud-bar .hud-bd .hs-tx{align-items:flex-start} .hud-bar .hud-meds{max-width:100%} }
.hud-bar .hud-rank .hs-cap,.hud-bar .hud-pts .hs-cap,.hud-bar .hud-bd .hs-cap{flex:0 0 auto!important;width:100%!important;max-width:100%}
@media(max-width:520px){ .hud-bar .hud-seg{flex-wrap:nowrap!important} }

/* خلفيات واضحة بلا غطاء */
body.an-bg-farm{background:url('../../shared/images/bg-farm.jpg') center top/cover no-repeat fixed !important}
body.an-bg-fishing-river{background:url('../../shared/images/photos/fishing-river.jpg') center top/cover no-repeat fixed !important}
body.an-bg-cattle{background:url('../../shared/images/photos/cattle.jpg') center top/cover no-repeat fixed !important}
body.an-bg-drought{background:url('../../shared/images/photos/drought.jpg') center top/cover no-repeat fixed !important}
body.an-bg-camels{background:url('../../shared/images/photos/camels.jpg') center top/cover no-repeat fixed !important}
body.an-bg-pasture{background:url('../../shared/images/photos/pasture.jpg') center top/cover no-repeat fixed !important}
body.an-bg-fish-market{background:url('../../shared/images/photos/fish-market.jpg') center top/cover no-repeat fixed !important}
body.an-bg-coop-meeting{background:url('../../shared/images/photos/coop-meeting.jpg') center top/cover no-repeat fixed !important}
body.an-bg-transport{background:url('../../shared/images/photos/transport.jpg') center top/cover no-repeat fixed !important}
body.an-bg-harvest-women{background:url('../../shared/images/photos/harvest-women.jpg') center top/cover no-repeat fixed !important}
body.an-bg-irrigation{background:url('../../shared/images/photos/irrigation.jpg') center top/cover no-repeat fixed !important}
body.an-bg-hero-farm{background:url('../../shared/images/photos/hero-farm.jpg') center top/cover no-repeat fixed !important}
body.an-bg-sheep-goats{background:url('../../shared/images/photos/sheep-goats.jpg') center top/cover no-repeat fixed !important}
body.an-bg-fish-farm{background:url('../../shared/images/photos/fish-farm.jpg') center top/cover no-repeat fixed !important}