/* نضوج | Noudouj — styles. Design tokens from NOUDOUJ_PROJECT.md */
:root{
  --purple:#7C4DBC; --purple-dark:#5E3694; --purple-deep:#4A2A78;
  --cream:#FBF4E8; --card:#FFFDF7;
  --gold:#F5B301; --green:#4C8C4A; --green-deep:#2F5E33; --sky:#BFE3F5;
  --ink:#2E2440; --muted:#7A6F8C;
  --lo:#F49B33; --lt:#2FA6A0; --lb:#3E7CB1; --lr:#E2574C; /* logo letters */
  --r-lg:26px; --r-md:18px; --r-sm:12px;
  --shadow:0 10px 30px rgba(74,42,120,.14);
  --sat:env(safe-area-inset-top); --sab:env(safe-area-inset-bottom);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  font-family:'Baloo Bhaijaan 2',system-ui,sans-serif;
  background:var(--purple-deep); color:var(--ink);
  overscroll-behavior:none; -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer;border:none;background:none}

/* App shell — phone frame that fills the viewport */
.app{
  position:relative; width:100%; max-width:480px; margin:0 auto;
  height:100dvh; background:var(--cream); overflow:hidden;
  display:flex; flex-direction:column;
}
.stack{position:relative; flex:1; overflow:hidden}

/* Screen */
.screen{
  position:absolute; inset:0; display:flex; flex-direction:column;
  background:var(--cream);
  padding-top:var(--sat);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.screen.pad-tab{padding-bottom:calc(84px + var(--sab))}
.screen-body{padding:16px 18px 24px; flex:1}

/* iOS-style push/pop transitions */
@keyframes slideIn{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@keyframes slideOut{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.screen.enter{animation:slideIn .28s cubic-bezier(.22,.61,.36,1)}
.screen.leave{animation:slideOut .28s cubic-bezier(.22,.61,.36,1)}
@media (prefers-reduced-motion:reduce){.screen.enter,.screen.leave{animation:none}}

/* Top bar for pushed screens */
.topbar{
  display:flex; align-items:center; gap:10px; padding:14px 16px;
  position:sticky; top:0; z-index:5;
  background:linear-gradient(#FBF4E8,#FBF4E8ee);
}
.topbar .back{
  width:40px;height:40px;border-radius:14px;background:var(--purple);
  color:#fff;font-size:20px;display:grid;place-items:center;
  box-shadow:0 4px 0 var(--purple-deep);
}
.topbar .title{flex:1;text-align:center}
.topbar .title b{display:block;font-size:19px;color:var(--purple-deep)}
.topbar .title span{font-size:13px;color:var(--muted)}
.pill-star{
  display:inline-flex;align-items:center;gap:6px;background:#fff;
  padding:8px 14px;border-radius:20px;font-weight:700;color:var(--ink);
  box-shadow:var(--shadow)
}

/* Chunky 3D button */
.btn{
  display:block;width:100%;padding:16px;border-radius:22px;
  background:var(--purple);color:#fff;font-size:19px;font-weight:700;
  box-shadow:0 6px 0 var(--purple-deep); transition:transform .06s, box-shadow .06s;
}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--purple-deep)}
.btn.gold{background:var(--gold);box-shadow:0 6px 0 #C98A00;color:#5a3d00}
.btn.gold:active{box-shadow:0 2px 0 #C98A00}
.btn.ghost{background:#fff;color:var(--purple-deep);box-shadow:0 6px 0 #E4D8F2}
.btn.ghost:active{box-shadow:0 2px 0 #E4D8F2}
.btn[disabled]{opacity:.5;box-shadow:0 6px 0 var(--purple-deep);pointer-events:none}

/* ===== HOME ===== */
.home{position:relative}
.home .parents-btn{
  position:absolute; top:calc(14px + var(--sat)); left:16px; z-index:6;
  display:inline-flex;align-items:center;gap:6px;background:var(--purple);
  color:#fff;padding:9px 14px;border-radius:16px;font-weight:600;font-size:14px;
  box-shadow:0 4px 0 var(--purple-deep)
}
.home .scene{position:relative;margin-top:8px}
.logo{ text-align:center; margin:14px 0 4px; }
.logo b{font-size:56px;font-weight:800;letter-spacing:1px;display:inline-block}
.logo .l1{color:var(--lo)}.logo .l2{color:var(--lt)}.logo .l3{color:var(--lb)}.logo .l4{color:var(--lr)}
.logo .sprout{font-size:26px;vertical-align:top}
.tagline{text-align:center;color:var(--muted);font-size:16px;margin:2px 20px 0}
.home .cta-wrap{padding:8px 24px 20px}

/* Scene svg */
.scene-svg{width:100%;height:auto;display:block;border-radius:var(--r-lg)}
.scene-img{width:100%;height:auto;display:block;border-radius:var(--r-lg)}
.card-scene{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);background:#fff}

/* real-image scene stage with overlays (journey) */
.scene-stage{position:relative;margin:14px 18px;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);background:#fff}
.scene-stage .scene-img{border-radius:0}
.scene-stage .audio-btn{position:absolute;bottom:1.5%;left:auto;right:4.5%;width:52px;height:52px;font-size:22px}

/* ===== Section heading ===== */
.h-screen{font-size:24px;font-weight:800;color:var(--purple-deep);margin:6px 2px 14px}
.sub{color:var(--muted);font-size:14px;margin:-8px 2px 16px}

/* Cards */
.card{background:var(--card);border-radius:var(--r-md);box-shadow:var(--shadow);padding:16px;margin-bottom:14px}

/* ===== Journey ===== */
.progress-dots{display:flex;align-items:center;gap:8px;padding:14px 18px 4px}
.dot{width:14px;height:14px;border-radius:50%;background:#E0D5F0;flex:0 0 auto;transition:.2s}
.dot.done{background:var(--purple)}
.dot.active{background:var(--purple);box-shadow:0 0 0 5px #E7DBFA;position:relative}
.dot-line{height:4px;background:#E0D5F0;flex:1;border-radius:2px}
.dot-line.done{background:var(--purple)}
.journey-card{margin:14px 18px}
.bubble{
  position:relative;background:#fff;border-radius:20px;padding:16px 18px;margin:0 18px 14px;
  box-shadow:var(--shadow);font-size:18px;line-height:1.7;color:var(--ink);min-height:64px
}
.bubble:after{content:"";position:absolute;bottom:-10px;right:36px;border:12px solid transparent;border-top-color:#fff;border-bottom:0}
/* overlay bubble: fixed box positioned over the baked-in bubble in the workshop art */
.bubble.overlay{
  position:absolute;top:2%;right:1.5%;left:auto;width:57%;margin:0;
  /* كان height:52% ثابتاً: النصّ الطويل يُخفى خلف شريط تمرير لا يلاحظه طفل.
     الآن يبدأ بارتفاع المكان المرسوم وينمو عند اللزوم، والتمرير ملاذ أخير. */
  /* ٥٢٪ ليست زينة: هي ارتفاع الفقاعة المرسومة داخل الصورة، وأيّ أقلّ منه
     يكشف نصّها المطبوع من تحتها. والنصّ الطويل لا يُحشر هنا أصلاً — يأخذ
     فقاعة عادية تحت الصورة (انظر addScene في app.js). */
  height:52%;
  padding:10px 12px;font-size:14.5px;line-height:1.5;
  display:flex;align-items:center;justify-content:center;text-align:center;
  border-radius:18px;box-shadow:0 8px 22px rgba(0,0,0,.20);overflow:auto
}
/* الذيل موضوع تحت الصندوق بـ ٩ بكسل، وداخل overflow:auto يُحسَب محتوىً قابلاً
   للتمرير — فكان كل فقاعة تُظهر شريطاً وتقتطع ٩ بكسل مهما قصر النصّ.
   والفقاعة هنا تعلو رسمَ المشهد ولا تحتاج ذيلاً أصلاً. */
.bubble.overlay:after{display:none}
@media (min-width:430px){.bubble.overlay{font-size:16px}}
.audio-btn{
  position:absolute;bottom:12px;left:12px;width:46px;height:46px;border-radius:50%;
  background:var(--purple);color:#fff;font-size:20px;display:grid;place-items:center;
  box-shadow:0 4px 0 var(--purple-deep)
}
.audio-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--purple-deep)}

/* choice options */
.options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:4px 18px 14px}
.opt{
  background:#fff;border-radius:18px;padding:18px 12px;text-align:center;
  box-shadow:0 5px 0 #E9DFF7;font-weight:600;color:var(--ink);transition:.12s
}
.opt .e{font-size:34px;display:block;margin-bottom:6px}
.opt:active{transform:translateY(3px);box-shadow:0 2px 0 #E9DFF7}
.opt.sel{background:#F0E8FC;box-shadow:0 5px 0 var(--purple);outline:3px solid var(--purple)}

/* reflect */
.reflect-area{
  width:calc(100% - 36px);margin:0 18px 14px;min-height:120px;border-radius:18px;
  border:2px solid #E4D8F2;background:#fff;padding:14px;font-family:inherit;font-size:17px;
  color:var(--ink);resize:none
}
.reflect-area:focus{outline:none;border-color:var(--purple)}

/* draw pad */
.drawpad-wrap{margin:0 18px 14px;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);background:#fff;position:relative}
#drawpad{display:block;width:100%;touch-action:none;background:#fff}
.draw-tools{display:flex;gap:8px;padding:10px;justify-content:center;background:#FAF6FF}
.swatch{width:30px;height:30px;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.swatch.sel{outline:3px solid var(--purple);outline-offset:2px}
.clear-btn{margin-inline-start:auto;background:#fff;border-radius:12px;padding:6px 12px;font-weight:600;color:var(--muted);box-shadow:0 2px 6px rgba(0,0,0,.08)}

.journey-foot{margin-top:auto;padding:14px 18px calc(16px + var(--sab));background:linear-gradient(180deg,transparent,var(--cream) 30%)}

/* ===== Badges ===== */
.badge-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.badge{background:var(--card);border-radius:20px;padding:18px 12px;text-align:center;box-shadow:var(--shadow);transition:.2s}
.badge .em{font-size:44px;display:block;filter:grayscale(1);opacity:.35}
.badge.earned .em{filter:none;opacity:1}
.badge.earned{outline:3px solid var(--gold)}
.badge .bt{font-weight:700;margin-top:8px;font-size:15px}
.badge .bh{font-size:12px;color:var(--muted);margin-top:4px}

/* ===== Stories ===== */
.story{display:flex;align-items:center;gap:14px;background:var(--card);border-radius:20px;padding:14px;box-shadow:var(--shadow);margin-bottom:12px}
.story .em{width:52px;height:52px;border-radius:16px;background:#F0E8FC;display:grid;place-items:center;font-size:26px;flex:0 0 auto}
.story .info{flex:1}
.story .info b{display:block;font-size:17px}
.story .info span{font-size:13px;color:var(--muted)}
.status-pill{font-size:12px;font-weight:700;padding:6px 12px;border-radius:14px}
.status-pill.prog{background:#FFF1CE;color:#9a6b00}
.status-pill.done{background:#DFF3E1;color:var(--green-deep)}
.status-pill.lock{background:#EEE;color:#999}

/* ===== Progress ===== */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.stat{background:var(--card);border-radius:20px;padding:16px;text-align:center;box-shadow:var(--shadow)}
.stat .n{font-size:32px;font-weight:800;color:var(--purple-deep)}
.stat .l{font-size:13px;color:var(--muted);margin-top:2px}
.skill{margin-bottom:14px}
.skill .row{display:flex;justify-content:space-between;font-size:14px;margin-bottom:6px;font-weight:600}
.bar{height:14px;border-radius:8px;background:#EDE6F6;overflow:hidden}
.bar>i{display:block;height:100%;border-radius:8px;transition:width .6s cubic-bezier(.22,.61,.36,1)}

/* ===== Settings ===== */
.setting{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:18px;padding:14px 16px;box-shadow:var(--shadow);margin-bottom:12px}
.setting .ico{font-size:22px}
.setting .lbl{flex:1;font-weight:600}
.switch{width:52px;height:30px;border-radius:16px;background:#DDD3EC;position:relative;transition:.2s;flex:0 0 auto}
.switch.on{background:var(--green)}
.switch:after{content:"";position:absolute;top:3px;right:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 2px 4px rgba(0,0,0,.2)}
.switch.on:after{right:25px}
.link-row{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:18px;padding:16px;box-shadow:var(--shadow);margin-bottom:12px;font-weight:600}
.link-row .chev{margin-inline-start:auto;color:var(--muted)}

/* ===== Parents ===== */
.pin-scene{max-width:340px;margin:0 auto;padding:20px}
.pin-dots{display:flex;gap:16px;justify-content:center;margin:24px 0}
.pin-dots i{width:18px;height:18px;border-radius:50%;background:#E0D5F0}
.pin-dots i.f{background:var(--purple)}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.key{background:#fff;border-radius:18px;padding:18px 0;font-size:26px;font-weight:700;color:var(--purple-deep);box-shadow:0 5px 0 #E4D8F2}
.key:active{transform:translateY(3px);box-shadow:0 2px 0 #E4D8F2}
.key.wide{grid-column:span 1}
.pin-err{color:var(--lr);text-align:center;min-height:22px;font-weight:600}
.screentime{height:16px;border-radius:8px;background:#EDE6F6;overflow:hidden;margin-top:8px}
.screentime>i{display:block;height:100%;background:var(--gold)}

/* time-limit stepper */
.limit-row{display:flex;align-items:center;gap:14px;margin:12px 0 4px}
.limit-val{flex:1;text-align:center;font-weight:700;font-size:18px;color:var(--purple-deep)}
.stepper{width:44px;height:44px;border-radius:14px;background:var(--purple);color:#fff;font-size:24px;font-weight:700;box-shadow:0 4px 0 var(--purple-deep)}
.stepper:active{transform:translateY(3px);box-shadow:0 1px 0 var(--purple-deep)}

/* report chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.badge-chip{display:inline-block;background:#FFF3C4;color:#8a5a00;border-radius:14px;padding:6px 12px;font-weight:600;font-size:13px}
.report-head{text-align:center}
.logo-mini{font-size:26px;font-weight:800;color:var(--purple-deep)}

/* ===== Supervisor ===== */
.stud-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #F0EAF7}
.stud-row:last-child{border-bottom:0}
.stud-row b{font-size:15px}
.stud-row .sub{margin-inline-start:auto;font-size:12px}
.stud-row .rank{width:26px;height:26px;border-radius:50%;background:var(--gold);color:#5a3d00;display:grid;place-items:center;font-weight:700;font-size:13px;flex:0 0 auto}
.stud-row.need{flex-wrap:wrap}
.nudge{background:var(--purple);color:#fff;border-radius:12px;padding:6px 12px;font-weight:600;font-size:13px;box-shadow:0 3px 0 var(--purple-deep)}
.nudge:active{transform:translateY(2px);box-shadow:0 1px 0 var(--purple-deep)}
.story.locked{opacity:.6}

/* ===== Print (weekly report / supervisor export → PDF) ===== */
@media print{
  body{background:#fff}
  .app{max-width:none;height:auto;box-shadow:none}
  .tabbar,.topbar .back,.no-print{display:none !important}
  .screen{position:static;overflow:visible;padding:0}
  .screen:not(.printable){display:none}
  .card,.stat{box-shadow:none;border:1px solid #eee}
}

/* ===== Tab bar ===== */
.tabbar{
  position:relative; z-index:20;
  display:flex; justify-content:space-around; align-items:center;
  background:#fff; padding:8px 6px calc(8px + var(--sab));
  box-shadow:0 -6px 24px rgba(74,42,120,.10);
  border-top-left-radius:22px;border-top-right-radius:22px;
}
.tabbar.hidden{transform:translateY(120%);transition:transform .28s}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 10px;border-radius:14px;color:var(--muted);min-width:56px}
.tab .tab-ico{font-size:22px;filter:grayscale(.3)}
.tab .tab-lbl{font-size:11px;font-weight:600}
.tab.active{color:var(--purple-deep)}
.tab.active .tab-ico{filter:none;transform:translateY(-2px)}
.tab.active .tab-lbl{color:var(--purple-deep)}

/* ===== Toast ===== */
.toast{
  position:absolute;left:50%;bottom:calc(96px + var(--sab));transform:translate(-50%,20px);
  background:var(--purple-deep);color:#fff;padding:12px 20px;border-radius:18px;
  font-weight:600;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.28s;z-index:40;max-width:88%
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* star burst */
@keyframes pop{0%{transform:scale(.4);opacity:0}50%{transform:scale(1.2);opacity:1}100%{transform:scale(1);opacity:1}}
.starburst{animation:pop .4s ease}

/* ============ AUTH ============ */
.auth-screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;
  background:linear-gradient(160deg,#7C4DBC,#4A2A78);overflow-y:auto;z-index:100}
.auth-card{width:100%;max-width:380px;background:var(--cream);border-radius:26px;padding:26px 22px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.auth-logo{text-align:center;font-size:0}
.auth-logo b{font-size:40px;font-weight:800}.auth-logo span{font-size:22px;vertical-align:top}
.auth-logo .l1{color:var(--lo)}.auth-logo .l2{color:var(--lt)}.auth-logo .l3{color:var(--lb)}.auth-logo .l4{color:var(--lr)}
.auth-tag{text-align:center;color:var(--muted);margin:4px 0 18px;font-size:15px}
.auth-tabs{display:flex;gap:8px;background:#EFE7F8;border-radius:16px;padding:5px;margin-bottom:16px}
.atab{flex:1;padding:10px;border-radius:12px;font-weight:700;color:var(--muted)}
.atab.on{background:#fff;color:var(--purple-deep);box-shadow:0 2px 6px rgba(0,0,0,.08)}
.fin{width:100%;padding:14px;border-radius:14px;border:2px solid #E4D8F2;background:#fff;font-family:inherit;font-size:16px;color:var(--ink);margin-bottom:10px}
.fin:focus{outline:none;border-color:var(--purple)}
textarea.fin{min-height:70px;resize:none}
.role-picker{display:flex;gap:8px;margin-bottom:12px}
.rchip{flex:1;padding:10px 4px;border-radius:12px;background:#fff;border:2px solid #E4D8F2;font-weight:600;color:var(--muted);font-size:14px}
.rchip.on{border-color:var(--purple);background:#F0E8FC;color:var(--purple-deep)}
.auth-err{color:var(--lr);text-align:center;min-height:20px;font-weight:600;margin-top:8px;font-size:14px}
.auth-demo{color:var(--muted);font-size:12px;text-align:center;line-height:1.9;margin-top:6px}

/* ============ PORTAL ============ */
.portal-root{position:fixed;inset:0;overflow-y:auto;background:var(--cream);z-index:90}
.portal{max-width:560px;margin:0 auto;min-height:100%}
.p-head{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;background:var(--purple);color:#fff;gap:8px;flex-wrap:wrap}
.p-brand{font-weight:800;font-size:20px}
.p-role{font-size:12px;background:rgba(255,255,255,.2);padding:3px 10px;border-radius:12px;margin-inline-start:6px;vertical-align:middle}
.p-user{font-size:14px;display:flex;align-items:center;gap:10px}
.p-logout{background:rgba(255,255,255,.18);color:#fff;border-radius:12px;padding:7px 12px;font-weight:600;font-size:13px}
.p-title{font-size:22px;font-weight:800;color:var(--purple-deep);padding:16px 18px 4px}
.p-body{padding:8px 18px 40px}
.p-tabs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.utab,.p-tabs .utab{padding:8px 14px;border-radius:12px;background:#EFE7F8;font-weight:600;color:var(--muted);font-size:14px}
.utab.on{background:var(--purple);color:#fff}
.urow{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid #F0EAF7}
.urow:last-child{border-bottom:0}.urow>div{flex:1}
.del{background:#FDE8E6;color:var(--lr);border-radius:10px;padding:6px 12px;font-weight:600;font-size:13px}
.lim{display:flex;align-items:center;justify-content:space-between;margin:12px 0;font-weight:600}
.stepper-row{display:flex;align-items:center;gap:12px}
.stepper-row span{min-width:34px;text-align:center;font-weight:800;color:var(--purple-deep)}
.stud-card .stud-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.eval-form{margin-top:12px;padding-top:12px;border-top:1px dashed #E4D8F2}
.stars-pick{display:flex;gap:6px;justify-content:center;margin-bottom:10px;font-size:26px}
.starp{filter:grayscale(1);opacity:.4}.starp.on{filter:none;opacity:1}
.ev-item{background:#FAF6FF;border-radius:12px;padding:10px 12px;margin-top:8px;font-size:14px}
.ev-item b{color:var(--purple-deep)}

/* ============ GAMES ============ */
.game{margin:0 18px 14px}
.game-bubble{margin-top:14px}
.game-over{text-align:center;font-size:22px;font-weight:800;color:var(--purple-deep);padding:26px 0;animation:pop .4s ease}
@keyframes shakeX{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.shake{animation:shakeX .4s ease}

/* sort game */
.sort-stage{min-height:110px;display:flex;align-items:center;justify-content:center}
.sort-item{
  display:flex;flex-direction:column;align-items:center;gap:6px;background:#fff;border-radius:20px;
  padding:16px 26px;font-weight:700;font-size:17px;color:var(--ink);box-shadow:var(--shadow);
  cursor:grab;user-select:none;position:relative;z-index:5
}
.sort-item .e{font-size:38px}
.sort-item.drag{cursor:grabbing;box-shadow:0 16px 40px rgba(74,42,120,.3);z-index:10}
.sort-count{text-align:center;color:var(--muted);font-weight:700;margin:6px 0}
.bins{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
.bin{
  display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 8px;border-radius:20px;
  background:#fff;border:3px dashed #D9CBEE;font-weight:700;font-size:16px;color:var(--purple-deep)
}
.bin .bin-e{font-size:30px}
.bin.flash{border-color:var(--green);background:#E9F6EC;transform:scale(1.04);transition:.15s}

/* memory game */
.mem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.mem-card{position:relative;aspect-ratio:3/4;border-radius:14px;perspective:400px;background:none;padding:0}
.mem-face{
  position:absolute;inset:0;display:grid;place-items:center;border-radius:14px;font-size:30px;
  backface-visibility:hidden;transition:transform .35s
}
.mem-face.front{background:var(--purple);color:#fff;font-weight:800}
.mem-face.back{background:#fff;box-shadow:var(--shadow);transform:rotateY(180deg)}
.mem-card.open .front,.mem-card.found .front{transform:rotateY(180deg)}
.mem-card.open .back,.mem-card.found .back{transform:rotateY(0)}
.mem-card.found .back{background:#E9F6EC;outline:3px solid var(--green)}

/* quiz game */
.quiz-head{display:flex;justify-content:space-between;font-weight:700;color:var(--purple-deep);margin-bottom:8px}
.quiz-clock b{color:var(--lr)}
.quiz-timer{height:10px;border-radius:6px;background:#EDE6F6;overflow:hidden;margin-bottom:12px}
.quiz-timer i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--lr));transition:width 1s linear}
.quiz-q{background:#fff;border-radius:18px;padding:16px;font-size:18px;font-weight:700;box-shadow:var(--shadow);margin-bottom:12px}
.quiz-opts{display:grid;gap:10px}
.q-opt{background:#fff;border-radius:16px;padding:14px;font-size:16px;font-weight:600;color:var(--ink);box-shadow:0 4px 0 #E9DFF7;text-align:center}
.q-opt:active{transform:translateY(2px);box-shadow:0 2px 0 #E9DFF7}
.q-opt.right{background:#E9F6EC;box-shadow:0 4px 0 var(--green);outline:3px solid var(--green)}
.q-opt.wrong{background:#FDE8E6;box-shadow:0 4px 0 var(--lr);outline:3px solid var(--lr)}

/* match game */
.match-game{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.match-col{display:grid;gap:10px;align-content:start}
.m-item{background:#fff;border-radius:16px;padding:14px 8px;font-size:14.5px;font-weight:700;color:var(--ink);box-shadow:0 4px 0 #E9DFF7;text-align:center;min-height:56px}
.m-item.sel{outline:3px solid var(--purple);background:#F0E8FC}
.m-item.done{background:#E9F6EC;outline:3px solid var(--green);opacity:.85}

/* 8 progress dots need a bit less room */
.progress-dots{gap:5px}
.dot{width:12px;height:12px}

/* ============ DESIGN POLISH v2 ============ */
/* gradient buttons */
.btn{background:linear-gradient(135deg,#8B5CD6,#6A3FB0)}
.btn.gold{background:linear-gradient(135deg,#FFC93D,#F5A800)}
.btn.ghost{background:#fff}
/* active tab pill */
.tab{transition:.18s}
.tab.active{background:#F0E8FC;border-radius:16px}
/* card entrance animation */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.screen-body>*{animation:fadeUp .32s ease both}
.screen-body>*:nth-child(2){animation-delay:.05s}
.screen-body>*:nth-child(3){animation-delay:.1s}
.screen-body>*:nth-child(4){animation-delay:.15s}
@media (prefers-reduced-motion:reduce){.screen-body>*{animation:none}}

/* category chip (الفئة العمرية) */
.cat-chip{
  display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:16px;
  background:var(--cat,#7C4DBC);color:#fff;font-weight:700;font-size:14px;
  box-shadow:0 3px 10px rgba(0,0,0,.15)
}
.cat-chip.sm{padding:2px 9px;font-size:11px;border-radius:10px;vertical-align:middle}
.home-cat{position:absolute;top:calc(14px + var(--sat));right:16px;z-index:6}
.hello{text-align:center;color:var(--purple-deep);font-weight:700;margin:2px 0 0}
.home-stats{
  display:flex;justify-content:center;gap:10px;margin:8px 20px 0
}
.home-stats span{
  background:#fff;border-radius:14px;padding:7px 14px;font-weight:700;font-size:14px;
  color:var(--purple-deep);box-shadow:var(--shadow)
}

/* story progress ring */
.ring{
  width:54px;height:54px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:conic-gradient(var(--purple) calc(var(--p,0)*1%),#EDE6F6 0)
}
.ring span{width:43px;height:43px;border-radius:50%;background:#F7F1FF;display:grid;place-items:center;font-size:21px}

/* auth polish */
@keyframes logoPop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.auth-logo b{animation:logoPop .5s ease both}
.auth-logo b:nth-child(2){animation-delay:.07s}.auth-logo b:nth-child(4){animation-delay:.14s}.auth-logo b:nth-child(5){animation-delay:.21s}
.cat-preview{min-height:20px;text-align:center;font-size:14px;color:var(--muted);margin:-4px 0 8px}

/* confetti */
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:5}
@keyframes confFall{
  0%{transform:translateY(-40px) rotate(0);opacity:1}
  100%{transform:translateY(110vh) rotate(720deg);opacity:.6}
}
.confetti i{
  position:absolute;top:-30px;width:10px;height:14px;border-radius:3px;
  left:calc(var(--i)*8.3%);
  animation:confFall calc(2.6s + var(--i)*.22s) ease-in calc(var(--i)*.12s) both;
}
.confetti i:nth-child(4n){background:#F5B301}
.confetti i:nth-child(4n+1){background:#7C4DBC}
.confetti i:nth-child(4n+2){background:#4C8C4A}
.confetti i:nth-child(4n+3){background:#E2574C}

/* ============ NEW GAMES ============ */
/* order game (رتب الخطوات) */
.order-done{display:grid;gap:8px;min-height:44px;margin-bottom:12px}
.o-slot{background:#E9F6EC;border:2px solid var(--green);border-radius:14px;padding:10px 14px;font-weight:700;color:var(--green-deep);animation:fadeUp .25s ease}
.order-pool{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.o-item{background:#fff;border-radius:16px;padding:14px 8px;font-weight:700;color:var(--ink);box-shadow:0 4px 0 #E9DFF7;font-size:14.5px}
.o-item .e{display:block;font-size:26px;margin-bottom:4px}
.o-item:active{transform:translateY(2px)}
.o-item.placed{opacity:.25;pointer-events:none}

/* catch game (الالتقاط السريع) */
.catch-hud{display:flex;justify-content:space-between;font-weight:800;color:var(--purple-deep);font-size:17px;margin-bottom:10px}
.catch-hud .ctime{color:var(--lr)}
.catch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hole{
  aspect-ratio:1;border-radius:18px;background:#F0E8FC;border:3px dashed #DCCdf2;
  font-size:38px;display:grid;place-items:center;transition:background .15s
}
@keyframes popIn{from{transform:scale(.3)}to{transform:scale(1)}}
.hole.pop{animation:popIn .18s ease}
.hole.good{background:#DFF3E1;border-color:var(--green)}
.hole.bad{background:#FDE8E6;border-color:var(--lr)}

/* word game (كوّن الكلمة) */
.word-slots{display:flex;gap:8px;justify-content:center;margin-bottom:14px}
.w-slot{
  width:46px;height:52px;border-radius:12px;background:#fff;border:3px dashed #DCCDF2;
  display:grid;place-items:center;font-size:26px;font-weight:800;color:var(--purple-deep)
}
.w-slot.f{border-style:solid;border-color:var(--green);background:#E9F6EC;animation:popIn .2s ease}
.word-pool{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:12px}
.w-letter{
  width:52px;height:52px;border-radius:14px;background:#fff;font-size:26px;font-weight:800;
  color:var(--ink);box-shadow:0 4px 0 #E9DFF7
}
.w-letter:active{transform:translateY(2px)}
.w-letter.used{opacity:.2;pointer-events:none}
.w-del{display:block;margin:0 auto;background:#FDE8E6;color:var(--lr);border-radius:12px;padding:8px 16px;font-weight:700}

/* ============ BRAND LOGO ============ */
.auth-brand{display:block;width:min(72%,300px);margin:2px auto 10px;height:auto}
.auth-logo b{font-size:30px}
.auth-logo span{font-size:16px}
.p-logo{height:32px;width:auto;background:#fff;border-radius:10px;padding:4px 10px;display:block}
.p-brand{display:flex;align-items:center;gap:8px}

/* ============ RESPONSIVE — all devices ============ */
/* very small phones */
@media (max-width:360px){
  .logo b{font-size:44px}
  .btn{font-size:17px;padding:14px}
  .home-stats span{padding:6px 10px;font-size:13px}
  .m-item{font-size:12.5px;padding:12px 6px}
  .w-letter{width:44px;height:44px;font-size:22px}
  .w-slot{width:38px;height:44px;font-size:20px}
  .hole{font-size:32px}
  .auth-card{padding:20px 16px}
}

/* tablets/desktop — frame the app like a device, centered (يشمل النوافذ المُكبّرة/الزوم) */
@media (min-width:480px){
  .app{
    max-width:520px;height:calc(100dvh - 48px);margin:24px auto;
    border-radius:28px;box-shadow:0 30px 80px rgba(0,0,0,.4);overflow:hidden
  }
  .auth-card{max-width:430px}
}

/* desktop — wider portal, two-column supervisor cards, hover comfort */
@media (min-width:900px){
  .app{max-width:560px}
  .portal{max-width:900px}
  .p-body .stat-grid{grid-template-columns:repeat(4,1fr)}
  #studs{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
  #studs .card{margin-bottom:0}
  .auth-card{max-width:440px;padding:32px 30px}
}

/* hover feedback only where a mouse exists (keeps touch clean) */
@media (hover:hover){
  .btn:hover{filter:brightness(1.07)}
  .opt:hover,.q-opt:hover,.o-item:hover,.m-item:hover,.w-letter:hover,.key:hover,.bin:hover{transform:translateY(-2px)}
  .story:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(74,42,120,.18)}
  .tab:hover .tab-lbl{color:var(--purple-deep)}
  .urow .del:hover,.p-logout:hover{filter:brightness(1.08)}
  .atab:hover,.rchip:hover{filter:brightness(1.04)}
}
.story,.opt,.q-opt,.o-item,.m-item,.w-letter,.bin{transition:transform .15s, box-shadow .15s}

/* landscape phones — cap scene art so controls stay reachable */
@media (max-height:620px) and (orientation:landscape){
  .home .scene-img{max-height:36vh;object-fit:cover;object-position:top}
  .scene-stage .scene-img{max-height:42vh;object-fit:cover}
  .logo b{font-size:38px}
}

/* keep game boards a comfortable size on wide screens */
/* الهامش الأفقي التلقائي كُتب حين كانت المنطقة كتلةً عادية، فكان يُوسّط الشبكة.
   ثم صارت #stage عمودَ flex — وفي عمود flex يجعل الهامشُ التلقائي على المحور
   العرضي العنصرَ ينكمش إلى محتواه بدل أن يتمدّد: قِسنا الشبكة ٣٠ بكسل وبطاقاتها
   صفراً، فكانت لعبتا الذاكرة والالتقاط غير قابلتين للعب أصلاً.
   width:100% يُعطيها عرضاً محدَّداً، فيعود الهامش التلقائي إلى التوسيط وحده. */
.mem-grid,.catch-grid{max-width:430px;width:100%;margin-left:auto;margin-right:auto}
.word-pool,.word-slots{max-width:460px;margin-left:auto;margin-right:auto}
/* نفس علّة شبكة الذاكرة: لوح الاختبار ابنٌ مباشر لعمود flex، والهامش
   التلقائي على المحور العرضي يُنكمِشه إلى محتواه — قِسناه ١٠٠ بكسل. */
.quiz-game{max-width:520px;width:100%;margin-left:auto;margin-right:auto}

/* comfortable touch targets everywhere */
.tab{min-height:48px}
.atab,.rchip,.key,.q-opt,.m-item,.o-item{min-height:44px}

/* admin linking UI */
.urow.ustack{display:block}
.urow-main{display:flex;align-items:center;gap:10px}
.urow-main>div:first-child{flex:1}
.row-actions{display:flex;gap:8px;flex:0 0 auto}
.link-btn{background:#F0E8FC;color:var(--purple-deep);border-radius:10px;padding:6px 12px;font-weight:600;font-size:13px}
.link-status{font-size:12px;color:var(--muted);margin-top:4px}
.link-status i{color:var(--lr);font-style:normal}
.link-form{padding:10px;background:#FAF6FF;border-radius:14px;margin-top:8px}
.link-form label{display:block;margin-bottom:4px}

/* ============ TRANSPARENT LOGO EVERYWHERE + LIGHT PORTAL HEADER ============ */
.p-head{background:#fff;color:var(--ink);box-shadow:0 2px 14px rgba(74,42,120,.10)}
.p-logo{height:36px;width:auto;background:none;border-radius:0;padding:0}
.p-role{background:var(--purple);color:#fff}
.p-user{color:var(--ink)}
.p-logout{background:var(--purple);color:#fff}
.home-brand{display:block;width:132px;height:auto;margin:4px auto 12px;opacity:.92}
.auth-brand{filter:none}

/* ============ CONTENT STUDIO (LMS) ============ */
.st-cta{border:2px solid var(--purple);background:linear-gradient(135deg,#FBF4E8,#F0E8FC)}
.st-head{display:flex;align-items:center;gap:12px;margin:4px 0 12px}
.st-head .btn{width:auto;padding:10px 16px;font-size:15px}
.st-fld{margin-bottom:12px}
.st-fld>label{display:block;font-weight:700;font-size:13.5px;color:var(--purple-deep);margin-bottom:6px}
.st-row{display:flex;gap:8px;align-items:flex-start;margin-bottom:8px}
.st-row .fin{margin-bottom:0}
.st-emoji{max-width:74px;text-align:center;font-size:20px}
.st-bin{max-width:110px}
.st-del{flex:0 0 auto;width:34px;height:34px;border-radius:10px;background:#FDE8E6;color:var(--lr);font-weight:700;margin-top:5px}
.st-add{background:#F0E8FC;color:var(--purple-deep);border-radius:12px;padding:9px 16px;font-weight:700;font-size:14px}
.st-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.st-q{flex:1;background:#FAF6FF;border-radius:14px;padding:10px}
.st-q .fin{margin-bottom:8px}
.st-jcard{display:flex;align-items:center;justify-content:space-between;gap:10px}
.st-jmain{display:flex;align-items:center;gap:12px;flex:1}
.st-jicon{font-size:34px}
.st-steprow{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #F0EAF7}
.st-steprow:last-child{border-bottom:0}
.st-stepnum{width:28px;height:28px;border-radius:50%;background:var(--purple);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;flex:0 0 auto}
.st-stepinfo{flex:1}
.st-steptools{display:flex;gap:6px;align-items:center}
.st-mini{width:30px;height:30px;border-radius:8px;background:#EFE7F8;color:var(--purple-deep);font-weight:700}
.st-mini:disabled{opacity:.3}
.st-addstep{display:flex;gap:10px;margin-top:12px;align-items:center}
.st-addstep .fin{margin-bottom:0;flex:1}

/* school manager */
.school-head{display:flex;align-items:center;gap:14px}

/* ============ v9: story pages, true/false, fill-blank, themes, password ============ */
.story-page{position:relative;background:#fff;border-radius:24px;margin:14px 18px;padding:26px 20px 20px;box-shadow:var(--shadow);text-align:center;min-height:280px;display:flex;flex-direction:column;justify-content:center}
.sp-emoji{font-size:74px;margin-bottom:12px;animation:pop .4s ease}
.sp-text{font-size:19px;line-height:1.9;color:var(--ink);font-weight:600}
.sp-dots{display:flex;gap:7px;justify-content:center;margin-top:18px}
.sp-dots i{width:9px;height:9px;border-radius:50%;background:#E0D5F0}
.sp-dots i.on{background:var(--purple);transform:scale(1.3)}
.sp-audio{position:absolute;bottom:14px;left:14px}

.tf-count,.fb-count{text-align:center;font-weight:800;color:var(--muted);margin-bottom:8px}
.tf-statement{background:#fff;border-radius:20px;padding:26px 18px;font-size:19px;font-weight:700;text-align:center;box-shadow:var(--shadow);min-height:110px;display:flex;align-items:center;justify-content:center;transition:.2s}
.tf-statement.tf-right{background:#E9F6EC;outline:3px solid var(--green)}
.tf-statement.tf-wrong{background:#FDE8E6;outline:3px solid var(--lr)}
.tf-btns{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.tf-btn{border-radius:20px;padding:18px;font-size:20px;font-weight:800}
.tf-btn.yes{background:#E9F6EC;color:var(--green-deep);box-shadow:0 5px 0 var(--green)}
.tf-btn.no{background:#FDE8E6;color:var(--lr);box-shadow:0 5px 0 var(--lr)}
.tf-btn:active{transform:translateY(3px)}

.fb-sentence{background:#fff;border-radius:20px;padding:24px 16px;font-size:19px;font-weight:700;text-align:center;box-shadow:var(--shadow);line-height:2}
.fb-blank{display:inline-block;min-width:70px;border-bottom:3px dashed var(--purple);color:var(--purple);font-weight:800;margin:0 4px}
.fb-blank.filled{border-bottom-style:solid;border-color:var(--green);color:var(--green-deep);animation:pop .3s ease}
.fb-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.fb-opt{background:#fff;border-radius:16px;padding:14px 8px;font-size:16px;font-weight:700;box-shadow:0 4px 0 #E9DFF7}
.fb-opt:active{transform:translateY(2px)}
.fb-opt:disabled{opacity:.5}

/* theme swatches (studio) */
.theme-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.theme-sw{width:34px;height:34px;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.theme-sw.on{outline:3px solid var(--ink);outline-offset:2px}
.theme-sw.none{width:auto;border-radius:12px;padding:0 12px;background:#EFE7F8;color:var(--purple-deep);font-weight:600;font-size:13px}

/* category config rows (studio) */
.cat-cfg-row{display:flex;gap:6px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.cat-cfg-row .fin{margin-bottom:0}
.cat-cfg-row .cl{flex:1;min-width:110px}
.cat-cfg-row .cmin,.cat-cfg-row .cmax{max-width:64px}
.cat-cfg-row .ccol{max-width:52px;padding:4px;height:44px}
.cat-cfg-row .ctag{flex-basis:100%;}

/* portal password panel */
.p-key{background:#F0E8FC;border-radius:12px;padding:7px 10px;font-size:15px}
.pw-panel{display:flex;gap:8px;align-items:center;padding:12px 18px;background:#FAF6FF;flex-wrap:wrap}
.pw-panel .fin{margin:0;flex:1;min-width:150px}

/* ============ EMOJI PICKER ============ */
.st-emoji{cursor:pointer;text-align:center}
.emoji-pop{
  position:fixed;z-index:200;width:300px;max-width:calc(100vw - 16px);max-height:300px;overflow-y:auto;
  background:var(--card);border:1px solid #E4D8F2;border-radius:16px;box-shadow:0 16px 44px rgba(74,42,120,.28);
  padding:10px 12px
}
.emoji-g{margin-bottom:8px}
.emoji-gt{font-size:11.5px;font-weight:700;color:var(--muted);margin:4px 2px 6px}
.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:3px}
.emoji-b{
  aspect-ratio:1;border:none;background:none;border-radius:9px;font-size:20px;line-height:1;
  display:grid;place-items:center;cursor:pointer;transition:transform .1s,background .12s
}
.emoji-b:hover{background:#F0E8FC;transform:scale(1.18)}
.emoji-b:active{transform:scale(.95)}

/* ============ VIDEO + INTERACTIVE CARDS ============ */
.video-wrap{position:relative;width:calc(100% - 36px);margin:0 18px 14px;aspect-ratio:16/9;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);background:#000}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-prev{margin-top:10px}
.vid-prev .video-wrap{width:100%;margin:0}

.flip-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 18px 14px}
.flip-card{background:none;border:none;padding:0;perspective:900px;aspect-ratio:3/4;cursor:pointer}
.fc-inner{position:relative;display:block;width:100%;height:100%;transition:transform .5s cubic-bezier(.22,.61,.36,1);transform-style:preserve-3d}
.flip-card.flipped .fc-inner{transform:rotateY(180deg)}
.fc-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  border-radius:18px;padding:14px;backface-visibility:hidden;box-shadow:var(--shadow);text-align:center}
.fc-front{background:linear-gradient(160deg,#fff,#F7F1FF);color:var(--ink)}
.fc-front .fc-ic{font-size:40px}
.fc-front b{font-size:15px}
.fc-front small{color:var(--muted);font-size:11px;font-weight:600}
.fc-back{background:var(--purple);color:#fff;transform:rotateY(180deg);font-size:14px;line-height:1.6;overflow:auto}
.flip-card.seen .fc-front{outline:3px solid var(--green);outline-offset:-3px}
@media (prefers-reduced-motion:reduce){.fc-inner{transition:none}}
@media (min-width:520px){.flip-grid{grid-template-columns:repeat(3,1fr)}}

/* ============ LANGUAGE PICKER ============ */
.lang-row{display:flex;gap:6px;justify-content:center;margin-bottom:12px}
.lang-b{padding:6px 12px;border-radius:12px;background:#EFE7F8;color:var(--purple-deep);font-weight:600;font-size:13px;border:1px solid transparent}
.lang-b.on{background:var(--purple);color:#fff}
.lang-b:hover{filter:brightness(.98)}
.lang-setting{gap:8px}
.lang-mini{display:flex;gap:5px;margin-inline-start:auto}
.lang-mini .lang-b{padding:5px 9px;font-size:12px}
/* content-studio authoring-language selector */
.lang-auth{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:6px 0 12px;font-size:13px;color:var(--muted);font-weight:700}
.lang-auth .lang-b{padding:5px 11px;font-size:12px}
/* a field being authored in a non-Arabic language: subtle tint + LTR entry */
.ml-tr{direction:ltr;text-align:left;background:#FBF6FF;border-color:var(--purple) !important}
/* keep LTR-friendly nudge for latin languages */
:root[dir="ltr"] .tagline,:root[dir="ltr"] .hello,:root[dir="ltr"] .home-greet{direction:ltr}

/* ============ INTERACTIVE HOME (v16) ============ */
/* push content below the floating corner chips (parents / category) */
.home.v2{padding-top:calc(54px + var(--sat))}
.home.v2 .scene,.home.v2 .logo,.home.v2 .tagline,.home.v2 .home-progress,
.home.v2 .home-stat-cards,.home.v2 .journey-path,.home.v2 .cta-wrap,.home.v2 .home-greet{position:relative;z-index:2}

/* floating sparkles behind everything */
.home-sky{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.home-sky span{position:absolute;top:0;font-size:18px;opacity:.5;will-change:transform;
  left:calc(8% + var(--i)*16%);animation:floatUp linear infinite;
  animation-duration:calc(9s + var(--i)*1.3s);animation-delay:calc(var(--i)*-2s)}
@keyframes floatUp{0%{transform:translateY(105vh) scale(.7) rotate(0);opacity:0}
  12%{opacity:.55}88%{opacity:.55}100%{transform:translateY(-14vh) scale(1.1) rotate(40deg);opacity:0}}

/* greeting */
.home-greet{text-align:center;color:var(--purple-deep);font-weight:700;font-size:17px;margin:2px 16px 0}
.home-greet b{color:var(--purple)}

/* interactive Risho scene — tap to react */
.home-scene{cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .15s}
.home-scene:active{transform:scale(.985)}
.home-scene .tap-hint{position:absolute;bottom:8px;inset-inline-start:50%;transform:translateX(-50%);
  background:rgba(74,42,120,.82);color:#fff;font-size:12px;font-weight:700;padding:5px 12px;border-radius:14px;
  white-space:nowrap;pointer-events:none;animation:hintPulse 2.4s ease-in-out infinite}
@keyframes hintPulse{0%,100%{opacity:.5;transform:translateX(-50%) translateY(0)}50%{opacity:1;transform:translateX(-50%) translateY(-3px)}}
@keyframes rishoBounce{0%{transform:scale(1)}30%{transform:scale(1.04) rotate(-1deg)}60%{transform:scale(.98) rotate(1deg)}100%{transform:scale(1)}}
.home-scene.bounce{animation:rishoBounce .5s ease}
/* cap the hero so the CTA + stats stay near the fold; keep the character in frame */
.home.v2 .home-scene{overflow:hidden;border-radius:var(--r-lg);margin:8px 18px 0;box-shadow:var(--shadow)}
.home.v2 .home-scene .scene-img{width:100%;height:clamp(190px,32vh,300px);object-fit:cover;object-position:center 16%;border-radius:0}
/* tighten logo + tagline on the interactive home to save vertical space */
.home.v2 .logo{margin:8px 0 2px}
.home.v2 .logo b{font-size:44px}
.home.v2 .logo .sprout{font-size:22px}
.home.v2 .tagline{margin-top:0;font-size:15px}

/* overall stage progress */
.home-progress{margin:12px 18px 2px}
.home-progress .hp-row{display:flex;justify-content:space-between;gap:8px;font-weight:700;font-size:13.5px;color:var(--purple-deep);margin-bottom:6px}
.home-progress .hp-pct{color:var(--gold);font-weight:800}
.hp-bar{height:14px;border-radius:10px;background:#EDE6F6;overflow:hidden;box-shadow:inset 0 1px 3px rgba(74,42,120,.12)}
.hp-bar>i{display:block;height:100%;width:0;border-radius:10px;
  background:linear-gradient(90deg,var(--gold),#F5B301,var(--green));transition:width 1s cubic-bezier(.22,.61,.36,1)}

/* tappable animated stat cards */
.home-stat-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 18px 2px}
.hstat{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px;border-radius:18px;
  background:var(--card);box-shadow:var(--shadow);transition:transform .12s, box-shadow .12s}
.hstat:active{transform:translateY(2px) scale(.98)}
.hstat .hs-ic{font-size:24px;line-height:1}
.hstat .hs-n,.hstat b{font-size:20px;font-weight:800;color:var(--purple-deep)}
.hstat small{font-size:11px;color:var(--muted);font-weight:600}
@media (hover:hover){.hstat:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(74,42,120,.16)}}

/* journey path preview (horizontal scroll of journey nodes) */
.journey-path{display:flex;align-items:center;gap:2px;margin:14px 10px 2px;padding:6px 8px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.journey-path::-webkit-scrollbar{display:none}
.jp-link{flex:0 0 16px;height:4px;border-radius:2px;background:#E0D5F0}
.jp-node{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:4px;width:74px;position:relative;background:none;padding:4px 2px}
.jp-node .jp-ic{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:26px;
  background:#fff;box-shadow:0 4px 12px rgba(74,42,120,.14);border:3px solid #EDE6F6;transition:transform .15s}
.jp-node small{font-size:10.5px;color:var(--muted);font-weight:600;max-width:72px;overflow:hidden;line-height:1.32}
.jp-node.done .jp-ic{border-color:var(--green);background:#EAF7EC}
.jp-node.done small{color:var(--green-deep)}
.jp-node.current .jp-ic{border-color:var(--ring,var(--purple));animation:nodePulse 1.6s ease-in-out infinite}
.jp-node.current small{color:var(--purple-deep);font-weight:800}
.jp-node.locked{opacity:.55}
.jp-node.locked .jp-ic{filter:grayscale(.5)}
.jp-node:active .jp-ic{transform:scale(.92)}
.jp-tick{position:absolute;top:0;inset-inline-end:8px;width:20px;height:20px;border-radius:50%;background:var(--green);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.jp-lock{position:absolute;top:2px;inset-inline-end:10px;font-size:14px}
@keyframes nodePulse{0%,100%{box-shadow:0 4px 12px rgba(74,42,120,.14),0 0 0 0 rgba(124,77,188,.35)}
  50%{box-shadow:0 4px 12px rgba(74,42,120,.14),0 0 0 7px rgba(124,77,188,0)}}

/* CTA gentle pulse to draw the eye */
.cta-pulse{animation:ctaPulse 2.6s ease-in-out infinite}
@keyframes ctaPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.cta-pulse:active{animation:none}

@media (prefers-reduced-motion:reduce){
  .home-sky span,.home-scene .tap-hint,.jp-node.current .jp-ic,.cta-pulse{animation:none}
  .hp-bar>i{transition:none}
}

/* ============ LANGUAGE DROPDOWN (login + settings) ============ */
.lang-row{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:12px}
.lang-ico{font-size:18px}
.lang-select{font-family:inherit;font-size:14px;font-weight:600;color:var(--purple-deep);background:#EFE7F8;border:1px solid #E4D8F2;border-radius:12px;padding:8px 12px;cursor:pointer;max-width:180px}
.lang-select:focus{outline:none;border-color:var(--purple)}
.lang-setting .lang-select{margin-inline-start:auto}

/* ============ FOLDABLES (Galaxy Z Fold & similar) ============ */
/* unfolded inner screen is large and near-square — give the framed app a roomier column */
@media (min-width:640px){ .app{max-width:560px} }
@media (min-width:820px){ .app{max-width:600px} }
/* narrow cover screen (~344px, very tall) — tighten so nothing crowds or overflows */
@media (max-width:360px){
  .home-stat-cards{gap:8px}
  .hstat{padding:10px 4px}
  .hstat .hs-ic{font-size:22px}
  .hstat .hs-n,.hstat b{font-size:18px}
  .hstat small{font-size:10px}
  .jp-node{width:66px}
  .jp-node .jp-ic{width:48px;height:48px;font-size:24px}
  .lang-select{max-width:150px}
  .options{gap:9px}
  .tab{min-width:0;padding:6px 6px}
  .tab .tab-lbl{font-size:10px}
}

/* ============ NOTIFICATIONS / LEADERBOARD / QUIZ BANK / MESSAGES / TIPS ============ */
/* bell (home, top corner opposite the parents button) */
/* sits right beside the الأهل button (the cat chip owns the other corner) */
.home .bell-btn{
  position:absolute; top:calc(14px + var(--sat)); left:16px; z-index:6;
  width:42px;height:42px;border-radius:16px;background:#fff;font-size:20px;
  box-shadow:0 4px 0 #E4D8F2;display:grid;place-items:center
}
.home .bell-btn:active{transform:translateY(2px);box-shadow:0 2px 0 #E4D8F2}
.home .bell-btn ~ .parents-btn, .home:has(.bell-btn) .parents-btn{left:66px}
.bell-n{position:absolute;top:-5px;inset-inline-end:-5px;min-width:20px;height:20px;padding:0 5px;
  border-radius:10px;background:var(--red,#E2574C);color:#fff;font-size:11px;font-weight:800;
  display:grid;place-items:center;border:2px solid #fff}

/* quick links row */
.home-links{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 18px 0;position:relative;z-index:2}
.hlink{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 6px;border-radius:16px;
  background:#fff;box-shadow:0 4px 0 #E4D8F2;font-size:20px;font-weight:700}
.hlink small{font-size:11px;color:var(--muted);font-weight:700}
.hlink:active{transform:translateY(2px);box-shadow:0 2px 0 #E4D8F2}

/* tip / story of the day */
.tip-card{display:flex;gap:12px;align-items:flex-start;margin:12px 18px 0;padding:14px;border-radius:18px;
  background:linear-gradient(135deg,#FFF7E0,#FFEFC2);box-shadow:0 4px 0 #EAD9A0;position:relative;z-index:2;text-align:start}
.tip-card .tip-em{font-size:28px;line-height:1}
.tip-card small{display:block;font-size:11px;font-weight:800;color:#A07B12;margin-bottom:3px}
.tip-card p{margin:0;font-size:14px;font-weight:600;color:#5A4A1A;line-height:1.5}

/* notifications list */
.ntf{background:#fff;border-radius:16px;padding:13px 15px;margin-bottom:10px;box-shadow:0 3px 0 #EDE4F7}
.ntf.new{background:#F6EFFF;box-shadow:0 3px 0 #DCC8F5}
.ntf .ntf-tx{font-size:14.5px;font-weight:600;line-height:1.55}
.ntf .ntf-note{margin-top:5px;padding:8px 10px;border-radius:10px;background:#F4F0FA;font-size:13px;font-weight:500;color:var(--muted)}
.ntf .ntf-t{display:block;margin-top:6px;font-size:11px;color:var(--muted)}
.empty-note{text-align:center;padding:44px 20px;font-size:44px}
.empty-note p{font-size:15px;color:var(--muted);font-weight:600;margin:10px 0 0}

/* leaderboard */
.lb-row{display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:12px 15px;margin-bottom:9px;box-shadow:0 3px 0 #EDE4F7}
.lb-row.me{background:linear-gradient(135deg,#F3E8FF,#E9DBFF);box-shadow:0 3px 0 #D4BCF2;border:2px solid var(--purple)}
.lb-rank{width:34px;text-align:center;font-size:20px;font-weight:800;color:var(--purple-deep)}
.lb-name{flex:1;font-size:15px}
.lb-name small{color:var(--purple);font-weight:700}
.lb-pts{font-weight:800;color:var(--purple-deep);font-size:14px}

/* quiz bank */
.qb-row{display:flex;align-items:center;gap:12px;width:100%;background:#fff;border-radius:16px;padding:13px 15px;
  margin-bottom:10px;box-shadow:0 3px 0 #EDE4F7;text-align:start}
.qb-row:active{transform:translateY(2px);box-shadow:0 1px 0 #EDE4F7}
.qb-ic{font-size:26px}
.qb-tx{flex:1;display:flex;flex-direction:column;gap:2px}
.qb-tx b{font-size:15px}
.qb-tx small{font-size:12px;color:var(--muted);font-weight:600}
.qb-row .chev{color:var(--muted);font-size:18px;transform:scaleX(-1)}
html[dir="ltr"] .qb-row .chev{transform:none}
.quiz-prog{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-weight:700;font-size:13px;color:var(--muted)}
.quiz-prog .bar{flex:1;height:8px;border-radius:6px;background:#EDE4F7;overflow:hidden}
.quiz-prog .bar i{display:block;height:100%;border-radius:6px;background:var(--purple);transition:width .4s}
.quiz-q b{font-size:17px;line-height:1.6}
.quiz-opts{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.qopt{background:#fff;border-radius:16px;padding:14px 16px;font-size:15px;font-weight:600;text-align:start;
  box-shadow:0 3px 0 #EDE4F7;border:2px solid transparent;transition:background .2s,border-color .2s}
.qopt:active{transform:translateY(2px)}
.qopt.ok{background:#E8F6E9;border-color:var(--green);box-shadow:0 3px 0 #BBDCBD}
.qopt.bad{background:#FDEBEA;border-color:var(--red,#E2574C);box-shadow:0 3px 0 #EFC3BF}
.quiz-result{text-align:center;padding:30px 16px}
.quiz-result .qr-em{font-size:64px;display:block}
.quiz-result h2{font-size:40px;margin:10px 0 4px;color:var(--purple-deep)}
.quiz-result .qr-stars{font-size:20px;font-weight:800;color:#C79A18;margin:8px 0}
.quiz-result .btn{margin-top:12px}

/* chat (student ↔ supervisor) */
.chat-wrap{display:flex;flex-direction:column;flex:1;min-height:0}
.chat-list{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
/* مُنطاقة بـ .chat-list: كانت هذه القواعد بلا حاوية فتطغى على فقاعة كلام ريشو في
   الرحلة وتُصغّرها من 18px إلى 14.5px وحاشيتها من 16 إلى 10 — لا أحد قصد ذلك. */
.chat-list .bubble{max-width:80%;padding:10px 14px;border-radius:18px;font-size:14.5px;font-weight:500;line-height:1.5;position:relative}
.chat-list .bubble small{display:block;font-size:10px;opacity:.7;margin-top:3px}
.chat-list .bubble.mine{align-self:flex-end;background:var(--purple);color:#fff;border-end-end-radius:6px}
.chat-list .bubble.theirs{align-self:flex-start;background:#fff;box-shadow:0 2px 0 #EDE4F7;border-end-start-radius:6px}
.chat-input{display:flex;gap:8px;padding:10px 14px calc(12px + var(--sab,0px));background:#fff;border-top:1px solid #EFE8F8}
.chat-input .fin{flex:1;margin:0}
.chat-send{width:46px;height:46px;border-radius:16px;background:var(--purple);color:#fff;font-size:18px;
  box-shadow:0 4px 0 var(--purple-deep);display:grid;place-items:center}
.chat-send:active{transform:translateY(2px);box-shadow:0 2px 0 var(--purple-deep)}
html[dir="rtl"] .chat-send{transform:scaleX(-1)}
html[dir="rtl"] .chat-send:active{transform:scaleX(-1) translateY(2px)}

/* ===== portal: notifications bell + mini chat ===== */
.p-bell{position:relative}
.pn-badge{position:absolute;top:-6px;inset-inline-end:-6px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;
  background:var(--red,#E2574C);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;border:2px solid #fff}
.pntf-panel{margin:0 16px 12px;background:#fff;border-radius:16px;padding:14px;box-shadow:0 6px 24px rgba(74,42,120,.12);max-height:340px;overflow-y:auto}
.pntf-panel .ntf{box-shadow:none;border:1px solid #F0EAF8;padding:10px 12px;margin-bottom:8px}
.pchat{margin-top:10px;background:#FAF7FE;border-radius:14px;padding:10px}
.pchat-list{max-height:240px;overflow-y:auto;display:flex;flex-direction:column;gap:7px;padding:4px 2px 8px}
.pchat-input{display:flex;gap:8px}
.pchat .bubble{max-width:85%;font-size:13.5px}
.pchat .bubble.mine{background:var(--purple);color:#fff}
/* studio: quiz editor */
.qz-qrow{align-items:flex-start}
.qz-opt{display:flex;align-items:center;gap:8px;margin-top:6px}
.qz-opt input[type=radio]{width:20px;height:20px;accent-color:var(--green)}
.qz-opt .fin{margin:0;flex:1}

/* ===== skills target hints + about screen ===== */
.skill-x{margin-bottom:14px}
.skill-hint{font-size:12px;color:var(--muted);font-weight:600;margin-top:4px;line-height:1.5}
.about-body .about-hero{text-align:center;padding:6px 0 2px}
.about-hero .logo b{font-size:40px}
.about-tag{color:var(--muted);font-weight:600;margin:6px 0 2px;font-size:14px}
.about-p{margin:6px 0 0;font-size:14px;line-height:1.7;color:#4A3F5E;font-weight:500}
.about-li{display:flex;gap:10px;align-items:flex-start;margin-top:8px;font-size:14px;line-height:1.55;font-weight:500}
.about-li span{flex:1}

/* ===== approvals + access control ===== */
.approvals-card{border:2px solid var(--gold,#F5B301);background:#FFFDF5}
.approvals-card .ok-btn{color:var(--green);font-weight:800}
.acc-form{margin-top:10px;background:#FAF7FE;border-radius:14px;padding:12px 14px}
.acc-sec{margin-bottom:10px}
.acc-sec > b{display:block;margin-bottom:6px;font-size:14px}
.acc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:4px;transition:opacity .2s}
.acc-chk{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:10px;cursor:pointer;font-size:13.5px;font-weight:600}
.acc-chk:hover{background:#F0E8FA}
.acc-chk input{width:18px;height:18px;accent-color:var(--purple)}
.acc-chk.master{background:#EFE6FA;border-radius:10px;margin-bottom:6px;font-weight:700}
.acc-chk small{color:var(--muted)}
.acc-save{width:auto;padding:10px 18px;margin-top:4px}

/* ============ GOLDEN FIVE: streak + store + mood + risho wear + certificates ============ */
/* 🔥 streak chip */
.streak-chip{display:flex;align-items:center;gap:6px;width:fit-content;margin:4px auto 0;background:linear-gradient(135deg,#FFF1D6,#FFE3B3);
  border:1px solid #F0C97A;border-radius:16px;padding:4px 14px;font-size:14px;position:relative;z-index:2}
.streak-chip b{color:#B8600B;font-size:16px}
.streak-chip small{color:#A07B12;font-weight:700;font-size:11px}
.home-greet .user-title{display:block;font-size:12.5px;color:var(--purple);font-weight:800;margin-top:2px}
/* 🐦 risho wear overlays */
.home-scene{position:relative}
.risho-wear{position:absolute;z-index:3;font-size:34px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25));pointer-events:none;animation:wearIn .5s ease}
.risho-wear.w-hat{top:4%;left:50%;transform:translateX(-50%) rotate(-8deg)}
.risho-wear.w-face{top:30%;left:50%;transform:translateX(-50%)}
.risho-wear.w-neck{top:52%;left:50%;transform:translateX(-50%)}
@keyframes wearIn{from{opacity:0;transform:translateX(-50%) scale(.4)}to{opacity:1}}
/* 😊 mood modal */
.mood-ov{position:fixed;inset:0;background:rgba(46,36,64,.55);z-index:400;display:grid;place-items:center;animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0}}
.mood-card{background:#fff;border-radius:24px;padding:26px 22px;text-align:center;max-width:340px;width:88%;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.mood-risho{font-size:44px}
.mood-card h3{color:var(--purple-deep);margin:8px 0 14px;font-size:18px}
.mood-row{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.mood-b{font-size:32px;width:54px;height:54px;border-radius:16px;background:#F7F2FC;transition:transform .15s}
.mood-b:hover,.mood-b:active{transform:scale(1.18);background:#EFE6FA}
/* هدف لمس ٤٤px على الأقل — كان ٣٧×٢٤ فأصابع الأطفال تخطئه */
.mood-skip{margin-top:8px;color:var(--muted);font-size:14px;font-weight:600;background:none;padding:12px 20px;min-height:44px}
/* 🛍️ store */
.store-balance{display:flex;align-items:center;gap:8px;justify-content:center;background:#fff;border-radius:16px;padding:12px;
  box-shadow:0 3px 0 #EDE4F7;font-size:15px;margin-bottom:14px}
.store-balance b{font-size:22px;color:#B8860B}
.store-sec{margin-bottom:16px}
.store-sec > b{display:block;margin-bottom:8px;color:var(--purple-deep);font-size:15px}
.store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.store-item{background:#fff;border-radius:16px;padding:12px 8px;text-align:center;box-shadow:0 3px 0 #EDE4F7;border:2px solid transparent;
  display:flex;flex-direction:column;align-items:center;gap:5px}
.store-item.worn{border-color:var(--gold,#F5B301);background:#FFFBEE}
.store-item .si-e{font-size:32px}
.store-item b{font-size:12px;line-height:1.3}
.si-btn{border-radius:12px;padding:5px 12px;font-size:12.5px;font-weight:800;background:var(--purple);color:#fff;box-shadow:0 3px 0 var(--purple-deep)}
.si-btn.on{background:var(--green,#4C8C4A);box-shadow:0 3px 0 #2F5C2E}
.si-btn.off{background:#B0A8C0;box-shadow:0 3px 0 #8D86A0}
.si-btn:active{transform:translateY(2px);box-shadow:none}
/* 📜 stories certificate mini-button */
.cert-mini{font-size:20px;background:#FFF7E0;border-radius:12px;width:38px;height:38px;box-shadow:0 2px 0 #EAD9A0;margin-inline-end:6px}
.cert-mini:active{transform:translateY(2px);box-shadow:none}

/* ============ WAVE 2: challenges + feed + wallet + capstone ============ */
/* ⚔️ challenge banner (student) + live board (supervisor) */
.ch-banner{display:flex;align-items:center;gap:8px;width:calc(100% - 36px);margin:12px 18px 0;padding:14px 16px;border-radius:18px;
  background:linear-gradient(135deg,#7C4DBC,#4A2A78);color:#fff;font-size:14px;text-align:start;position:relative;z-index:2;
  box-shadow:0 6px 20px rgba(74,42,120,.4);animation:chPulse 1.6s infinite}
.ch-banner b{font-size:15px}
.ch-banner span{opacity:.9;font-size:13px}
@keyframes chPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
.ch-live{margin-bottom:8px}
.ch-board{background:#FAF7FE;border-radius:12px;padding:8px 10px;margin-bottom:10px;max-height:260px;overflow-y:auto}
.ch-row{display:flex;align-items:center;gap:10px;padding:6px 4px;border-bottom:1px solid #F0EAF8;font-size:14px}
.ch-row:last-child{border-bottom:0}
.ch-row b{flex:1}
/* 📰 feed */
.post-card{background:#fff;border-radius:16px;padding:13px 15px;margin-bottom:10px;box-shadow:0 3px 0 #EDE4F7}
.post-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.post-head b{flex:1;font-size:14px}
.post-head small{color:var(--muted);font-size:11px}
.post-tx{margin:0;font-size:14.5px;line-height:1.7;white-space:pre-wrap}
.post-img{max-width:100%;border-radius:12px;margin-top:8px}
.post-m{margin-top:8px;background:#FFF7E0;border-radius:10px;padding:6px 10px;font-size:13px;font-weight:700;color:#A07B12}
.fp-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 12px}
.fp-img-btn{background:#F3EAFB;border-radius:12px;padding:9px 14px;font-size:13px;font-weight:700;cursor:pointer;color:var(--deep,#4A2A78)}
.fp-del{margin-inline-start:auto;background:none;color:#B0A8C0;font-size:14px}
.fp-list{margin-top:6px}
/* 💰 wallet */
.w-head{background:#fff;border-radius:16px;padding:14px;text-align:center;box-shadow:0 3px 0 #EDE4F7;margin-bottom:12px}
.w-coins{font-size:26px;font-weight:800;color:#B8860B;display:block}
.w-head small{color:var(--muted);font-weight:600;display:block;margin:2px 0 10px}
.w-claim{width:auto;padding:10px 22px;margin:0 auto}
.w-jars{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.w-jar{background:#fff;border-radius:16px;padding:12px 8px;text-align:center;box-shadow:0 3px 0 #EDE4F7;display:flex;flex-direction:column;gap:3px;align-items:center}
.w-jar .wj-e{font-size:28px}
.w-jar b{font-size:13px}
.w-jar .wj-n{font-weight:800;color:#B8860B;font-size:15px}
.w-jar small{font-size:10px;color:var(--muted);line-height:1.4}
.wj-btns{display:flex;gap:6px;margin-top:4px}
.wj-btns button{width:38px;height:30px;border-radius:10px;background:#F3EAFB;font-weight:800;color:var(--purple-deep)}
.wj-btns button:active{transform:translateY(1px)}
.w-causes{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.w-causes b{width:100%;font-size:14px}
.w-cause{background:#FDECf2;border-radius:12px;padding:8px 12px;font-size:13px;font-weight:700}
.w-cause:active{transform:scale(.96)}
/* 🏗️ capstone */
.cap-card{border:2px dashed var(--gold,#F5B301);background:#FFFDF5}
.cap-result{text-align:center;border:2px solid #A5D6A7;background:linear-gradient(135deg,#E8F5E9,#F1F8E9)}
@media (max-width:360px){ .w-jars{gap:6px} .w-jar{padding:10px 4px} }

/* ===== printable overlay (mobile view of certificates/reports) ===== */
.prn-ov{position:fixed;inset:0;z-index:500;background:#2E2440;display:flex;flex-direction:column;animation:fadeIn .25s ease}
.prn-bar{display:flex;align-items:center;gap:10px;padding:10px 14px calc(10px);background:#1E1730;color:#fff;padding-top:calc(10px + var(--sat,0px))}
.prn-bar .prn-x{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.14);color:#fff;font-size:16px}
.prn-hint{flex:1;font-size:12.5px;opacity:.85;font-weight:600}
.prn-share{background:var(--gold,#F5B301);color:#4A3800;border-radius:12px;padding:9px 14px;font-size:13px;font-weight:800}
.prn-frame{flex:1;border:0;width:100%;background:#fff}
/* ===== school-level registration limits ===== */
.sch-limits{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px;background:#FAF7FE;border-radius:12px;padding:8px 12px}
.sch-limits label{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--muted)}
.sch-limits .fin{margin:0;max-width:86px;text-align:center;padding:8px}
/* ===== Z Fold cover screen (~344px) extra tightening for new components ===== */
@media (max-width:360px){
  .home-links{gap:6px;margin:8px 12px 0}
  .hlink{padding:8px 2px;font-size:17px}
  .hlink small{font-size:9.5px}
  .streak-chip{font-size:12px;padding:3px 10px}
  .streak-chip b{font-size:14px}
  .tip-card{margin:10px 12px 0;padding:11px;gap:8px}
  .tip-card p{font-size:12.5px}
  .ch-banner{width:calc(100% - 24px);margin:10px 12px 0;padding:11px 12px;font-size:12.5px}
  .ch-banner b{font-size:13px}
  .store-grid{grid-template-columns:repeat(3,1fr);gap:6px}
  .store-item{padding:9px 4px}
  .store-item .si-e{font-size:26px}
  .store-item b{font-size:10.5px}
  .si-btn{padding:4px 8px;font-size:11px}
  .w-jar .wj-e{font-size:22px}
  .w-jar b{font-size:11.5px}
  .w-jar small{font-size:9px}
  .wj-btns button{width:32px;height:26px;font-size:12px}
  .w-coins{font-size:22px}
  .mood-b{width:46px;height:46px;font-size:26px}
  .risho-wear{font-size:26px}
  .acc-grid{grid-template-columns:1fr}
  .user-title{font-size:11px}
  .cap-card b{font-size:14px}
  .post-img{max-height:220px;object-fit:cover}
}
/* portal header on narrow screens (Z Fold cover 344px) */
@media (max-width:400px){
  .p-head{padding:12px 12px}
  .p-brand{font-size:17px}
  .p-role{font-size:10.5px;padding:2px 8px}
  .p-user{font-size:12.5px;gap:6px;min-width:0;flex-shrink:1}
  .p-user > span:first-child,.p-user b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:90px}
  .p-key{padding:6px 8px;font-size:13px}
  .p-logout{padding:6px 9px;font-size:12px;white-space:nowrap}
}
@media (max-width:400px){
  .urow .row-actions{flex-wrap:wrap;justify-content:flex-end;gap:6px}
  .urow .row-actions .fin{max-width:150px !important;font-size:12.5px}
  .urow .del{padding:6px 10px;font-size:12.5px}
  .urow-main{flex-wrap:wrap;gap:6px}
}

/* ===== round-2: دفتري اليومي + مؤقت التحدي + الترتيب الحي + قائمة الدعم + لغة البوابة ===== */
.streak-chip{cursor:pointer;border:0}
.streak-chip .sc-chev{opacity:.55;font-weight:800;margin-inline-start:2px}
.dp-card{max-width:340px;width:92%}
.dp-sub{margin:2px 0 10px}
.dp-row{display:flex;align-items:center;gap:10px;width:100%;background:#FAF7FE;border:2px solid #EFE8F8;
  border-radius:16px;padding:10px 12px;margin:5px 0;text-align:start;transition:transform .12s}
.dp-row:active{transform:scale(.97)}
.dp-e{font-size:26px}
.dp-tx{flex:1;display:flex;flex-direction:column;min-width:0}
.dp-tx b{font-size:14.5px;color:var(--purple-deep)}
.dp-tx small{font-size:11.5px;color:var(--muted)}
.dp-badge{font-size:14px;font-weight:800;color:#B8860B;background:#FFF6DC;border-radius:20px;padding:4px 10px;white-space:nowrap}
/* ⏱️ مؤقت السؤال (وضع التحدي) */
.qtimer{position:relative;height:26px;background:#EFE8F8;border-radius:14px;overflow:hidden;margin:0 0 10px}
.qtimer i{position:absolute;inset:0;background:linear-gradient(90deg,var(--green,#58B368),#8BC34A);transition:width 1s linear;border-radius:14px}
.qtimer i.hot{background:linear-gradient(90deg,#E53935,#FB8C00)}
.qtimer b{position:relative;z-index:1;display:grid;place-items:center;height:100%;color:#2E2440;font-size:14px}
.q-fast{font-size:14px}
.qr-fast{color:#E9930C;font-weight:800;margin:2px 0}
/* 🏁 الترتيب الحي للطالب */
.ch-live-wrap{background:#FAF7FE;border-radius:16px;padding:12px;margin:10px 0;text-align:start}
.ch-live-wrap>b{font-size:14px}
.ch-live-wrap .ch-row{display:flex;align-items:center;gap:8px;padding:6px 4px;border-bottom:1px dashed #EFE8F8;font-size:13.5px}
.ch-live-wrap .ch-row:last-of-type{border-bottom:0}
.ch-live-wrap .ch-row b{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-live-wrap .ch-row.me{background:#FFF6DC;border-radius:10px;padding:6px 8px}
.ch-count{margin:6px 0 0;font-size:11.5px}
/* 🆘 قائمة الدعم في بوابة المشرف */
.need-card{border:2px solid #FFE0B2;background:linear-gradient(135deg,#FFF8F0,#FFF)}
.need-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px dashed #F5E6D3}
.need-row:last-child{border-bottom:0}
.need-info{flex:1;min-width:0}
.need-bar{height:8px;margin:4px 0}
.need-bar i{background:linear-gradient(90deg,#FB8C00,#F5B301)}
.need-nudge{width:auto;padding:9px 14px;font-size:13px;white-space:nowrap}
.need-nudge:disabled{opacity:.6}
/* 🌐 محدد اللغة في رأس البوابة */
.p-lang{background:rgba(255,255,255,.95);border:0;border-radius:12px;padding:7px 8px;font-size:13px;font-weight:700;color:var(--purple-deep);cursor:pointer;font-family:inherit}
@media (max-width:400px){ .p-lang{font-size:11.5px;padding:6px 5px;max-width:74px} }
/* الرئيسية: مساحة سفلية كي لا يختفي آخر عنصر خلف شريط التبويبات */
.home .home-brand{margin-bottom:18px}
.home{padding-bottom:14px}
/* ===== أنواع أسئلة التحدي الجديدة: صح/خطأ + ترتيب + صورة ===== */
.tf-opts{grid-template-columns:1fr 1fr;display:grid;gap:10px}
.tf-b{font-size:20px;font-weight:900;padding:22px 10px;border-radius:20px}
.tf-b.tf-no{}
.qz-bigemoji{font-size:76px;text-align:center;line-height:1.2;margin:4px 0;animation:pop .4s ease}
.qz-img{display:block;max-width:100%;max-height:200px;margin:0 auto 8px;border-radius:16px;object-fit:contain}
.ord-hint{margin:0 0 6px;text-align:center;font-weight:700}
.ord-pool,.ord-picked{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:8px 0;min-height:44px}
.ord-picked{background:#FAF7FE;border:2px dashed #D9C8F0;border-radius:16px;padding:8px}
.ord-picked:empty::before{content:'⬇️';opacity:.4;font-size:20px;margin:auto}
.ord-chip{background:#fff;border:2px solid var(--purple);color:var(--purple-deep);border-radius:30px;padding:10px 16px;font-size:14.5px;font-weight:800;transition:transform .12s}
.ord-chip:active{transform:scale(.94)}
.ord-chip.dim{opacity:.25;pointer-events:none}
.ord-chip.picked{background:var(--purple);color:#fff;display:inline-flex;align-items:center;gap:6px}
.ord-chip.ok{background:var(--green,#58B368);border-color:var(--green,#58B368);color:#fff}
.ord-chip.bad{background:#E53935;border-color:#E53935;color:#fff}
.ord-n{background:rgba(255,255,255,.25);border-radius:50%;width:22px;height:22px;display:grid;place-items:center;font-size:12px}
/* محرر الاستوديو */
.qz-type{margin:0 0 8px;max-width:220px}
.qz-tf{display:flex;gap:16px;margin:6px 0;flex-wrap:wrap}
.qz-tf label{display:flex;align-items:center;gap:6px;font-weight:700;font-size:14px;cursor:pointer}
@media (max-width:360px){ .tf-b{font-size:17px;padding:16px 8px} .qz-bigemoji{font-size:60px} .ord-chip{font-size:13px;padding:8px 12px} }

/* ===== HOME v3 — تصميم 2a من ملف التصميم: مشهد كامل + كرت المتابعة الزجاجي ===== */
.home.v3{padding-top:0}
.home-hero{position:relative;flex:none;min-height:min(560px,72dvh);display:flex;flex-direction:column;overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(191,227,245,.55) 0 24%,transparent 46%,rgba(251,244,232,.12) 78%,rgba(251,244,232,.92))}
.home.v3 .home-sky{position:absolute;inset:0 0 40% 0;z-index:1;pointer-events:none}
.hero-topbar{position:relative;z-index:4;display:flex;align-items:center;gap:8px;padding:calc(10px + var(--sat)) 16px 0}
.home.v3 .parents-btn{position:static;box-shadow:0 4px 0 var(--purple-deep)}
.home.v3 .bell-btn{position:static;margin:0}
.hero-sp{flex:1}
.home.v3 .home-cat{position:static;margin:0}
.hero-mid{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:6px 24px 0;cursor:pointer}
.hero-logo{height:clamp(72px,12dvh,104px);width:auto;object-fit:contain;filter:drop-shadow(0 2px 10px rgba(255,255,255,.8))}
.hero-tag{font-size:16.5px;font-weight:600;color:var(--purple-deep);margin:2px 0 0;text-align:center;text-shadow:0 1px 8px rgba(255,255,255,.9)}
.hero-greet{margin:4px 0 0;font-size:14.5px;color:var(--purple-deep);text-shadow:0 1px 8px rgba(255,255,255,.85);position:static;text-align:center}
.hero-hint{position:absolute;bottom:8%;inset-inline-start:10%;background:rgba(46,36,64,.65);color:#fff;font-size:12.5px;font-weight:700;padding:7px 13px;border-radius:16px;animation:pulse 2.2s infinite}
.home.v3 .risho-wear{position:absolute;font-size:34px;z-index:2;pointer-events:none;inset-inline-start:50%;transform:translateX(50%)}
.home.v3 .risho-wear.w-hat{bottom:56%}
.home.v3 .risho-wear.w-face{bottom:47%}
.home.v3 .risho-wear.w-neck{bottom:37%}
.hero-foot{position:relative;z-index:3;padding:0 22px 18px;display:flex;flex-direction:column;gap:10px}
.home.v3 .streak-chip{align-self:center;background:rgba(255,253,247,.92);box-shadow:0 3px 10px rgba(74,42,120,.12)}
.cont-card{background:rgba(255,253,247,.92);border-radius:24px;padding:13px 16px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow)}
.cc-ic{width:44px;height:44px;border-radius:15px;background:#F0E8FC;display:grid;place-items:center;font-size:22px;flex:none}
.cc-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.cc-tx b{font-size:15.5px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-tx small{font-size:12.5px;font-weight:500;color:var(--muted)}
.cc-star{display:flex;align-items:center;gap:5px;background:#fff;padding:7px 12px;border-radius:18px;font-size:14px;font-weight:700;color:var(--ink);box-shadow:0 3px 10px rgba(74,42,120,.12);white-space:nowrap}
.home.v3 #startBtn{font-size:20px;font-weight:800;border-radius:24px}
.home.v3 .home-stat-cards{margin-top:14px}
.home.v3.bounce .hero-mid,#rishoScene.bounce{animation:bounceIn .5s}
@media (max-height:700px){ .home-hero{min-height:66dvh} .hero-logo{height:64px} }
@media (max-width:360px){ .hero-tag{font-size:14px} .cont-card{padding:11px 12px} .cc-tx b{font-size:14px} }

/* ===== HOME v4 — كل العناصر ظاهرة بوضوح في شاشة واحدة ===== */
.home.v4 .home-hero{min-height:clamp(210px,34dvh,300px)}
.home.v4 .hero-logo{height:clamp(56px,9dvh,78px)}
.home.v4 .hero-greet{font-size:15px;font-weight:700;margin-top:8px;background:rgba(255,253,247,.75);padding:3px 14px;border-radius:16px}
.home.v4 .hero-hint{bottom:46px;padding:5px 11px;font-size:11.5px}
.home.v4 .risho-wear{font-size:28px}
.home.v4 .risho-wear.w-hat{bottom:52%}
.home.v4 .risho-wear.w-face{bottom:40%}
.home.v4 .risho-wear.w-neck{bottom:28%}
/* شريط الإجراء الرئيسي — يعتلي حافة المشهد */
.home-actions{position:relative;z-index:5;margin:-34px 16px 0;display:flex;flex-direction:column;gap:9px}
.home.v4 .cont-card{background:rgba(255,253,247,.97);padding:11px 13px;border-radius:20px}
.home.v4 .cc-ic{width:40px;height:40px;font-size:20px}
.home.v4 .cc-tx b{font-size:14.5px}
.home.v4 .cc-tx small{font-size:11.5px}
.home.v4 .streak-chip{margin:0;padding:6px 11px;font-size:13px;background:#FFF6DC;box-shadow:none;border-radius:16px;flex:none}
.home.v4 .streak-chip b{font-size:15px}
.home.v4 #startBtn{padding:14px;font-size:18.5px}
/* بطاقات وروابط مدمجة وواضحة */
.home.v4 .home-stat-cards{margin:12px 16px 0;gap:8px}
.home.v4 .hstat{padding:9px 4px;border-radius:16px}
.home.v4 .hstat .hs-ic{font-size:20px}
.home.v4 .hstat .hs-n,.home.v4 .hstat b{font-size:18px}
.home.v4 .hstat small{font-size:10.5px}
.home.v4 .home-links{margin:8px 16px 0;gap:8px}
.home.v4 .hlink{padding:9px 2px;font-size:19px;border-radius:16px}
.home.v4 .hlink small{font-size:10.5px}
.home.v4 .tip-card{margin:8px 16px 0;padding:10px 12px}
.home.v4 .tip-card p{font-size:12.5px;margin:1px 0 0}
.home.v4 .journey-path{margin-top:10px;padding:6px 16px 4px}
.home.v4 .home-brand{height:26px;margin:10px auto 14px}
.home.v4 .ch-banner{margin:8px 16px 0;width:calc(100% - 32px)}
@media (max-height:760px){
  .home.v4 .home-hero{min-height:clamp(180px,28dvh,240px)}
  .home.v4 .hero-logo{height:52px}
  .home.v4 .tip-card p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}
/* ===== 📖 شاشة القصص والنصائح ===== */
.tip-open{width:calc(100% - 32px);text-align:start;cursor:pointer;transition:transform .12s;border:0;display:flex}
.tip-open:active{transform:scale(.98)}
.tips-h{font-size:19px;font-weight:800;color:var(--purple-deep);margin:6px 2px 10px}
.tipfull{padding:14px 16px}
.tipfull-story{border:2px solid #EBD9A8;background:linear-gradient(160deg,#FFFDF6,#FFF6E3)}
.tipfull-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.tipfull-em{font-size:34px}
.tipfull-say{width:40px;height:40px;border-radius:14px;background:var(--purple);color:#fff;font-size:17px;display:grid;place-items:center;box-shadow:0 4px 0 var(--purple-deep)}
.tipfull-say:active{transform:translateY(3px);box-shadow:0 1px 0 var(--purple-deep)}
.tipfull-p{margin:0;font-size:15.5px;line-height:1.9;color:var(--ink);font-weight:500}

/* ===== DESIGN PASS 2 — مواصفات dc.html: نقاط مرقمة + ألعاب + تبويبات + بوابة الأهل + احتفال ===== */
/* نقاط التقدم المرقمة (٢٦px، أرقام عربية، حلقة للحالية) */
.dot.num{width:26px;height:26px;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:700;background:#E0D5F0}
.dot.num.done,.dot.num.active{background:var(--purple)}
.dot.num.active{box-shadow:0 0 0 5px #E7DBFA}
/* شريط التبويبات: زجاجي مموّه، غير النشط رمادي خافت */
.tabbar{background:rgba(255,253,247,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid rgba(74,42,120,.08)}
.tab .tab-ico{filter:grayscale(.65) opacity(.6)}
.tab.active .tab-ico{filter:none}
.tab .tab-lbl{font-weight:700}
/* كشف إجابات الاختبار: صحيح ✓ أخضر / خاطئ ✕ وردي (مواصفة التصميم) */
.qopt.ok,.q-opt.right{background:#DFF3E1;color:#2F5E33;box-shadow:none;outline:3px solid var(--green)}
.qopt.bad,.q-opt.wrong{background:#FBE3E1;box-shadow:none;outline:3px solid var(--lr)}
.qopt.ok::after,.q-opt.right::after{content:' ✓';font-weight:900}
.qopt.bad::after,.q-opt.wrong::after{content:' ✕';font-weight:900}
/* الذاكرة: الوجه المقلوب بنفسجي بعلامة ❓ والزوج المكتمل ذهبي بإطار أخضر */
.mem-card .front{background:var(--purple);box-shadow:0 5px 0 var(--purple-deep);color:#fff}
.mem-card.found .back{background:var(--gold);outline:3px solid var(--green)}
/* صناديق التصنيف: حدود متقطعة ٣px */
.bin{border:3px dashed #D9CCEE;background:#fff}
.bin.has{background:#F5F0FC;border-color:var(--purple)}
.bin.flash{border-color:var(--green);border-style:solid}
/* الكلمة: الخانة الفارغة متقطعة والممتلئة بنفسجية */
.w-slot{border:3px dashed #D9CCEE;background:#fff;color:#D9CCEE}
.w-slot.f{border:3px solid #4A2A78;border-color:#4A2A78;background:var(--purple);color:#fff}
.w-letter{background:var(--card);box-shadow:0 5px 0 #E4D8F2}
.w-letter.used{opacity:.5;background:#EFE8F8;color:#C9B8E0;box-shadow:none}
/* الالتقاط: ساحة داكنة بنفسجية */
.catch-grid{background:var(--purple-dark);border-radius:22px;padding:12px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.1)}
.catch-grid .hole{border-color:rgba(255,255,255,.35);box-shadow:0 6px 16px rgba(0,0,0,.28)}
/* بوابة الأهل/المشرفين: شاشة داكنة كاملة (مواصفة التصميم) */
.pin-screen{background:var(--purple-deep)}
.pin-screen .topbar{background:transparent}
.pin-screen .topbar .back{background:rgba(255,255,255,.14);box-shadow:none}
.pin-screen .topbar .title b{color:#fff}
.pin-screen .topbar .title span{color:rgba(255,255,255,.6)}
.pin-lock{text-align:center;font-size:46px;margin-top:10px}
.pin-screen .pin-dots i{width:18px;height:18px;background:transparent;border:2px solid rgba(255,255,255,.4)}
.pin-screen .pin-dots i.f{background:var(--gold);border-color:var(--gold)}
.pin-screen .pin-err{color:#FFB4A8;min-height:22px;text-align:center;font-weight:700}
.pin-screen .key{background:rgba(255,255,255,.16);color:#fff;border-radius:22px;box-shadow:0 4px 0 rgba(0,0,0,.18)}
.pin-screen .key:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.18)}
.pin-screen .sub{color:rgba(255,255,255,.6)}
/* بطاقة الاحتفال البنفسجية الداكنة */
.cel-card{position:relative;background:var(--purple-deep);border-radius:28px;padding:30px 22px;overflow:hidden;text-align:center}
.cel-bubble{position:absolute;top:-70px;inset-inline-end:-50px;width:200px;height:200px;border-radius:50%;background:var(--purple);opacity:.6}
.cel-in{position:relative}
.cel-em{font-size:66px;line-height:1;animation:pop .5s}
.cel-title{font-size:24px;font-weight:800;color:#fff;margin:10px 0 0}
.cel-sub{font-size:15px;line-height:1.7;color:rgba(255,255,255,.72);margin:6px 0 0}
.cel-stats{display:flex;gap:10px;margin-top:20px}
.cel-st{flex:1;background:rgba(255,255,255,.12);border-radius:18px;padding:13px}
.cel-st b{display:block;font-size:22px;font-weight:800;color:var(--gold)}
.cel-st small{font-size:12px;color:rgba(255,255,255,.6)}

/* ===== 🪟 بوابة الدخول «النافذة المقوّسة» (تصميم 5a) =====
   ملاءمة كل الشاشات دون تمرير: تملأ الحاوية الثابتة تماماً والمقاسات تنضغط بنِسَب ارتفاع الشاشة */
.auth-screen.has-v2{padding:0;overflow:hidden;display:block}
.auth-v2{position:absolute;inset:0;background:var(--purple-deep);overflow:hidden;padding:calc(6px + var(--sat)) 0 max(8px,var(--sab));display:flex;flex-direction:column}
.av-col{position:relative;z-index:1;flex:1;min-height:0;display:flex;flex-direction:column;width:min(100%,470px);margin:0 auto}
.av-blob{position:absolute;border-radius:50%;pointer-events:none}
.av-b1{top:-70px;inset-inline-end:-80px;width:250px;height:250px;background:var(--purple);opacity:.5}
.av-b2{top:200px;inset-inline-start:-60px;width:170px;height:170px;background:var(--gold);opacity:.14}
.av-top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:8px 20px 0}
.auth-v2 .lang-row{margin:0;background:rgba(255,255,255,.13);border-radius:14px;padding:7px 12px;display:flex;align-items:center;gap:6px}
.auth-v2 .lang-ico{font-size:14px}
.auth-v2 .lang-select{background:transparent;border:0;color:#fff;font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.auth-v2 .lang-select option{color:var(--ink)}
.av-mark{height:44px;width:44px;object-fit:contain;border-radius:12px}
.av-arch-wrap{position:relative;z-index:1;padding:clamp(8px,1.6dvh,18px) 34px 0;flex:none}
.av-arch{position:relative;height:clamp(110px,22dvh,250px);max-width:440px;margin-inline:auto;border-radius:190px 190px 34px 34px;overflow:hidden;border:5px solid var(--cream);box-shadow:0 20px 46px rgba(0,0,0,.34)}
.av-arch img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.av-scrim{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 52%,rgba(74,42,120,.42))}
.av-badge{position:absolute;bottom:-26px;inset-inline:0;margin:0 auto;width:66px;height:66px;border-radius:24px;background:var(--cream);border:4px solid var(--gold);display:grid;place-items:center;font-size:31px;box-shadow:0 10px 24px rgba(0,0,0,.32);animation:floaty 3.6s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.av-title{position:relative;text-align:center;font-size:clamp(18px,2.8dvh,24px);font-weight:800;color:#fff;margin:clamp(30px,4.4dvh,40px) 30px 0}
.av-sub{position:relative;text-align:center;font-size:clamp(12.5px,1.8dvh,14.5px);font-weight:500;color:rgba(255,255,255,.62);margin:4px 30px 0}
.auth-v2 .av-card{position:relative;z-index:2;margin:clamp(10px,2dvh,20px) 18px 0;width:auto;align-self:stretch;background:var(--cream);border-radius:30px;padding:clamp(12px,2dvh,20px) 18px;box-shadow:0 20px 48px rgba(0,0,0,.3);flex:0 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.auth-v2 .auth-tabs{display:flex;gap:8px;background:#EFE7F8;border-radius:16px;padding:5px;margin-bottom:15px}
.auth-v2 .atab{flex:1;padding:11px 0;border-radius:12px;color:var(--muted);font-size:15px;font-weight:700;text-align:center;background:transparent;box-shadow:none}
.auth-v2 .atab.on{background:#fff;color:var(--purple-deep);box-shadow:0 3px 10px rgba(74,42,120,.14)}
.inp-wrap{position:relative;display:flex;align-items:center;gap:10px;background:#fff;border:2px solid #E4D8F2;border-radius:16px;padding:0 14px;margin-bottom:11px;transition:border-color .15s, box-shadow .15s}
.inp-wrap:focus-within{border-color:var(--purple);box-shadow:0 0 0 4px rgba(124,77,188,.12)}
.inp-ic{font-size:17px;opacity:.55;flex:none}
.inp-wrap .fin{flex:1;margin:0;border:0;background:transparent;padding:14px 0;box-shadow:none;outline:none}
.inp-eye{flex:none;font-size:17px;background:none;padding:4px}
.forgot-link{display:block;text-align:start;padding:2px 4px 0;font-size:13px;font-weight:600;color:var(--purple);background:none;margin-bottom:10px}
.auth-v2 .auth-err{min-height:20px;text-align:center;font-weight:700}
.auth-v2 .auth-err.info{color:var(--purple-deep);background:#F0E8FC;border-radius:12px;padding:8px 12px;font-weight:600}
.av-foot{position:relative;text-align:center;font-size:clamp(10.5px,1.4dvh,12.5px);line-height:1.8;color:rgba(255,255,255,.42);margin:clamp(6px,1.4dvh,16px) 24px 0;flex:none}
/* مبدّل اللغة — بارز وواضح على كل الشاشات */
.auth-v2 .lang-row{background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.35);padding:8px 14px}
.auth-v2 .lang-select{font-size:14.5px;font-weight:700}
/* شاشات قصيرة جداً: صغّر الشارة وقلّص المسافات */
@media (max-height:660px){
  .av-badge{width:50px;height:50px;font-size:23px;bottom:-20px;border-width:3px}
  .av-sub{display:none}
  .inp-wrap{margin-bottom:8px}
  .inp-wrap .fin{padding:11px 0}
  .auth-v2 .auth-tabs{margin-bottom:10px}
  .auth-v2 .atab{padding:9px 0}
  .forgot-link{margin-bottom:6px}
}
/* الوضع الأفقي (موبايل بالعرض): القوس جنب النموذج بدل فوقه */
@media (orientation:landscape) and (max-height:560px){
  .av-col{flex-direction:row;align-items:center;gap:18px;width:min(100%,900px);padding:0 24px}
  .av-top{position:absolute;top:calc(6px + var(--sat));inset-inline:16px;padding:0}
  .av-side{display:contents}
  .av-arch-wrap{flex:1;padding:0;align-self:center}
  .av-arch{height:min(52dvh,220px);border-radius:120px 120px 26px 26px}
  .av-badge{display:none}
  .av-title{position:absolute;opacity:0;pointer-events:none}
  .av-sub{display:none}
  .auth-v2 .av-card{flex:1.2;margin:0;max-height:82dvh}
  .av-mark{display:none}
  .av-foot{position:absolute;bottom:4px;inset-inline:0}
}
/* تابلت وشاشات كبيرة: عمود مركزي مريح */
@media (min-width:700px){
  .av-col{width:min(94%,500px)}
  .av-arch{height:clamp(160px,24dvh,280px)}
}
/* ضغط مرن إضافي — نموذج الدخول لا يُظهر شريط تمرير أبداً على أي ارتفاع */
.inp-wrap .fin{padding:clamp(9px,1.7dvh,14px) 0}
.auth-v2 .av-card .btn{padding:clamp(11px,1.9dvh,16px);font-size:clamp(16px,2.2dvh,19px)}
.auth-v2 .atab{padding:clamp(7px,1.4dvh,11px) 0}
.auth-v2 .auth-tabs{margin-bottom:clamp(8px,1.5dvh,15px)}
.inp-wrap{margin-bottom:clamp(7px,1.3dvh,11px)}
.forgot-link{margin-bottom:clamp(4px,1dvh,10px);padding-top:0}
.auth-v2 .auth-err{min-height:clamp(10px,1.4dvh,20px)}
.auth-v2 .role-picker{gap:6px;margin-bottom:clamp(6px,1.2dvh,10px)}
.auth-v2 .rchip{padding:clamp(7px,1.3dvh,10px) 10px;font-size:13px}
@media (max-height:720px){
  .av-arch{height:clamp(84px,15dvh,150px)}
  .av-title{margin-top:clamp(24px,3.4dvh,32px)}
}
/* شاشة قصيرة عمودياً (نافذة مكبّرة/زوم): أخفِ القوس — النموذج كامل بلا تمرير */
@media (max-height:620px) and (orientation:portrait){
  .av-arch-wrap{display:none}
  .av-title{margin-top:8px}
}
@media (min-height:561px) and (max-height:660px) and (orientation:landscape){
  .av-arch-wrap{display:none}
  .av-title{margin-top:6px}
  .av-sub{display:none}
}
@media (max-width:360px){ .av-arch{height:clamp(96px,19dvh,220px)} .av-title{margin-top:clamp(24px,3.2dvh,34px)} }
/* شارة اللغة «ع/A» — أوضح من إيموجي الكرة الأرضية */
.lang-badge{display:inline-flex;align-items:baseline;gap:1px;background:#fff;color:var(--purple-deep);border-radius:9px;padding:3px 7px;line-height:1;font-style:normal}
.lang-badge b{font-size:13px;font-weight:800}
.lang-badge i{font-size:11px;font-weight:800;font-style:normal;opacity:.65}

/* ===== v38 — إصلاح تمرير الشاشات ومقاسها على كل الهواتف =====
   .home كانت تُلغي position:absolute في .screen (نفس القوة، ترتيب متأخر)،
   فيخرج المحتوى عن #stack المقصوص ويتعذّر الوصول لأسفل الصفحة.
   القاعدة أدناه أقوى تحديداً (0,1,1) فلا يمكن تجاوزها بالخطأ لاحقاً. */
.stack > .screen{
  position:absolute; inset:0;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain;
}
/* منع انضغاط العناصر بدل التمرير (flex-shrink الافتراضي كان يسحق البطاقات) */
.stack > .screen > *{flex-shrink:0}
.home{padding-bottom:10px}

/* مؤشر «تابع للأسفل» — يظهر فقط إن كان هناك محتوى مخفي ويختفي عند التمرير */
/* يُضاف كطفل مباشر لـ .app (وهي position:relative) كي لا يتحرك مع التمرير */
.scroll-cue{
  position:absolute; inset-inline:0; bottom:6px; z-index:14;
  display:flex; justify-content:center; pointer-events:none;
  transition:opacity .25s;
}
.scroll-cue button{
  pointer-events:auto; display:inline-flex; align-items:center; gap:6px;
  background:var(--purple); color:#fff; font-weight:700; font-size:12.5px;
  padding:7px 14px; border-radius:20px; box-shadow:0 4px 14px rgba(74,42,120,.34);
  animation:cueBob 1.5s ease-in-out infinite;
}
.scroll-cue button:active{transform:translateY(2px)}
.scroll-cue.gone{opacity:0; pointer-events:none}
@keyframes cueBob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){ .scroll-cue button{animation:none} }

/* مقاسات مرنة للهواتف القصيرة/الصغيرة — يعمل الآن مع التمرير بلا قصّ */
@media (max-height:700px){
  .home.v4 .home-hero{min-height:clamp(160px,26dvh,210px)}
  .home.v4 .hero-logo{height:clamp(44px,7dvh,56px)}
  .home.v4 #startBtn{padding:12px;font-size:17px}
  .home.v4 .home-stat-cards{margin-top:10px}
}
@media (max-height:600px){
  .home.v4 .home-hero{min-height:150px}
  .home.v4 .hero-greet{font-size:13.5px;margin-top:4px}
  .home.v4 .home-brand{display:none}
}
@media (max-width:340px){
  .home.v4 .home-links,.home.v4 .home-stat-cards{gap:6px;margin-inline:12px}
  .home.v4 .hlink small,.home.v4 .hstat small{font-size:9.5px}
  .home-actions{margin-inline:12px}
}

/* ===== v42: تنقّل أقسام البوابات · تعديل المستخدم · فلاتر · فئات متعددة ===== */
/* شريط أقسام ثابت أعلى البوابة — يحوّل الصفحة الطويلة إلى أقسام */
.p-secnav{position:sticky;top:0;z-index:6;display:flex;gap:6px;overflow-x:auto;padding:8px 2px 10px;
  margin:0 0 6px;background:var(--cream,#fdf8ef);-webkit-overflow-scrolling:touch;scrollbar-width:none}
.p-secnav::-webkit-scrollbar{display:none}
.p-secnav .snav{flex:0 0 auto;border:1.5px solid rgba(124,77,188,.28);background:#fff;color:var(--purple,#7c4dbc);
  font:inherit;font-size:13px;font-weight:700;padding:8px 14px;border-radius:999px;cursor:pointer;white-space:nowrap}
.p-secnav .snav.on{background:var(--purple,#7c4dbc);border-color:var(--purple,#7c4dbc);color:#fff}
.p-secnav .snav:focus-visible{outline:3px solid rgba(244,155,51,.6);outline-offset:2px}

/* فلاتر الطلاب: مدرسة · مدير · مشرف · فئة · بحث */
.u-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:10px 0 4px}
.u-filters .fin{margin:0}
@media (max-width:520px){.u-filters{grid-template-columns:1fr 1fr}}

/* نموذج تعديل معلومات المستخدم */
.uedit{border-top:1px dashed rgba(124,77,188,.3);margin-top:10px;padding-top:10px}
.uedit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.uedit-grid label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:700;color:#6b5b78}
.uedit-grid .fin{margin:0}
@media (max-width:520px){.uedit-grid{grid-template-columns:1fr}}

/* قائمة تغيير الفئة عند النقر على الشريحة */
.edit-cat{cursor:pointer;border:1.5px dashed currentColor;background:transparent;font:inherit;font-size:11px}
.cat-menu{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0;padding:8px;border-radius:14px;
  background:rgba(124,77,188,.07);border:1px solid rgba(124,77,188,.22)}
.cat-menu .rchip{font-size:12px;padding:7px 12px}

/* شرائح فئات المحتوى في الاستوديو + منتقي الفئات المتعدد */
.cat-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.cat-chip.ro{background:rgba(0,0,0,.06);color:#6b5b78}
.cat-multi{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:6px}
.cat-multi .acc-chk{display:flex;align-items:center;gap:7px;font-size:13px;padding:7px 9px;border-radius:12px;
  background:rgba(124,77,188,.06);cursor:pointer}
.cat-multi .acc-chk small{opacity:.65;font-size:11px}
.cat-multi-hint{grid-column:1/-1;margin:2px 0 0;font-size:11.5px}

/* ===== v44: أبعاد بوابات الإدارة على الهاتف ===== */
/* الفلاتر: شبكة داخل غلاف، والغلاف يُطوى على الهاتف */
.u-filters{display:block;margin:10px 0 4px}
.u-filters .u-fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.u-filters .fin{margin:0}
.u-filters .f-toggle{display:none}                 /* زر الطيّ للهاتف فقط */
.u-filters .f-count{background:var(--gold,#f49b33);color:#fff;border-radius:999px;padding:1px 7px;margin-inline-start:6px;font-size:12px}

@media (max-width:560px){
  /* الرأس: أهداف لمس مريحة */
  .p-head .p-key,.p-head .p-logout,.p-head .p-lang{min-height:40px}
  /* صفوف المستخدمين/المدارس: الاسم في سطر والأزرار في سطر — فلا يُدفع زرّ خارج الشاشة */
  .p-body .urow-main{flex-direction:column;align-items:stretch;gap:8px}
  .p-body .urow-main>div{min-width:0}
  .p-body .row-actions{flex-wrap:wrap;gap:8px;width:100%}
  .p-body .row-actions>*{flex:1 1 auto;min-width:0;min-height:40px}
  .p-body .row-actions .fin{max-width:none!important;width:100%;margin:0}
  /* الشرائح والتبويبات تلتف بدل أن تتجاوز العرض */
  .role-picker,.cat-picker,.cat-menu,.p-tabs{flex-wrap:wrap}
  .cat-menu .rchip,.role-picker .rchip,.cat-picker .rchip{min-height:40px}
  .p-body .link-btn,.p-body .del,.p-body .switch{min-height:40px}
  .cat-chip.edit-cat{min-height:36px;padding:8px 11px;font-size:12px}
  /* شريط الأقسام: تمرير أفقي مع تلميح بصري أنه يُمرَّر */
  .p-secnav{padding-inline-end:24px;
    -webkit-mask-image:linear-gradient(to left,transparent 0,#000 20px);
    mask-image:linear-gradient(to left,transparent 0,#000 20px)}
  .p-secnav .snav{min-height:40px;padding:8px 12px;font-size:12.5px}
  /* الفلاتر: مطويّة افتراضياً وعمودان عند الفتح */
  .u-filters .f-toggle{display:block;width:100%;min-height:44px;text-align:start}
  .u-filters .u-fgrid{grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
  .u-filters .u-fgrid .f-q{grid-column:1/-1}
  .u-filters.collapsed .u-fgrid{display:none}
  /* نصّ طويل لا يكسر البطاقة */
  .p-body .card,.p-body .urow{overflow-wrap:anywhere}
}

/* ===== v45: أداة التقارير والإحصاءات ===== */
.rp-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:8px;margin:10px 0}
.rp-filters .fin{margin:0}
.rp-actions{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
/* بطاقات الأرقام */
.rp-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-bottom:12px}
.rp-stat{background:#fff;border:1.5px solid rgba(124,77,188,.16);border-radius:16px;padding:12px 14px;text-align:center}
.rp-stat .n{font-size:24px;font-weight:800;color:var(--purple,#7c4dbc);line-height:1.1}
.rp-stat .l{font-size:12.5px;font-weight:700;color:#4a3d55;margin-top:2px}
.rp-stat .h{font-size:11px;color:#6b5b78;margin-top:2px}
.rp-card{margin-bottom:12px}
.rp-card>b{display:block;margin-bottom:8px}
/* الرسوم */
.rp-svg{width:100%;height:auto;display:block;margin-top:6px;overflow:visible}
.rp-donut{max-width:260px;margin-inline:auto}
.rp-legend{display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:center;margin-top:8px;font-size:12.5px}
.rp-lg{display:inline-flex;align-items:center;gap:6px;color:#4a3d55}
.rp-lg i{width:11px;height:11px;border-radius:3px;display:inline-block}
.rp-lg small{color:#6b5b78}
/* أشرطة أفقية */
.rp-hbars{display:flex;flex-direction:column;gap:7px;margin-top:6px}
.rp-hb{display:grid;grid-template-columns:minmax(74px,34%) 1fr auto;align-items:center;gap:8px;font-size:12.5px}
.rp-hb-l{color:#4a3d55;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-hb-t{background:rgba(124,77,188,.1);border-radius:999px;height:12px;overflow:hidden}
.rp-hb-t i{display:block;height:100%;border-radius:999px}
.rp-hb-v{font-weight:800;color:#4a3d55;min-width:44px;text-align:end}
/* الجدول التفصيلي */
.rp-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:6px}
.rp-table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:640px}
.rp-table th,.rp-table td{border-bottom:1px solid rgba(124,77,188,.14);padding:7px 8px;text-align:start;white-space:nowrap}
.rp-table th{background:rgba(124,77,188,.07);font-weight:800;color:#4a3d55;position:sticky;top:0}
.rp-mini{display:inline-block;width:46px;height:8px;background:rgba(124,77,188,.12);border-radius:999px;overflow:hidden;vertical-align:middle}
.rp-mini i{display:block;height:100%;background:var(--green,#4c8c4a)}
@media (max-width:560px){
  .rp-stats{grid-template-columns:1fr 1fr;gap:6px}
  .rp-stat{padding:10px}
  .rp-stat .n{font-size:20px}
  .rp-filters{grid-template-columns:1fr 1fr;gap:6px}
  .rp-filters .rf-reset{grid-column:1/-1;min-height:44px}
  .rp-hb{grid-template-columns:minmax(62px,40%) 1fr auto;font-size:12px}
  .rp-actions .btn{width:100%}
}

/* ===== v47: إصلاحات تجربة خطوة الرحلة ===== */

/* ١) زرّ الصوت كان يجلس فوق نصّ الفقاعة ويقطع أوّل الكلمات.
   نحجز له ممراً جانبياً بخصائص منطقية فيصحّ في العربية والإنجليزية معاً. */
.bubble.has-audio{ padding-inline-end:74px; min-height:78px; display:flex; align-items:center }
.bubble.has-audio .audio-btn{
  inset-inline-end:12px; inset-inline-start:auto;
  top:50%; bottom:auto; transform:translateY(-50%)
}
.bubble.has-audio .audio-btn:active{ transform:translateY(-50%) translateY(3px) }
@media (max-width:360px){
  .bubble.has-audio{ padding-inline-end:64px }
  .bubble.has-audio .audio-btn{ width:40px; height:40px; font-size:17px }
}

/* ٢) زرّ «التالي» المعطّل كان يبدو كالعادي تماماً — فيُضغط ولا يحدث شيء.
   الآن يُرى معطّلاً بوضوح، ونصّه يقول المطلوب. */
.journey-foot .btn:disabled{
  /* كان opacity:.5 فوق لون باهت على كريمي: يُقرأ زخرفةً لا زرّاً ينتظر فعلاً.
     الآن حدٌّ واضح ونصٌّ مقروء يقول المطلوب، والتباين يكفي طفلاً. */
  opacity:1; box-shadow:none; transform:none; cursor:not-allowed;
  background:#F3EDFA; color:#5B4A6B; border:2px dashed #B9A6D4
}
.journey-foot .btn:disabled:active{ transform:none; box-shadow:none }
.journey-foot .btn:not(:disabled){ animation:nextReady .35s ease-out }
@keyframes nextReady{ from{ transform:scale(.97) } to{ transform:scale(1) } }

/* ٣) ورقة التأكيد قبل الخروج من رحلة جارية */
.cnf-back{
  position:fixed; inset:0; z-index:120; background:rgba(43,34,51,.55);
  display:grid; place-items:center; padding:22px;
  animation:cnfIn .14s ease-out
}
@keyframes cnfIn{ from{ opacity:0 } to{ opacity:1 } }
.cnf{
  background:#fff; border-radius:22px; padding:22px 20px; width:100%; max-width:330px;
  box-shadow:0 18px 40px rgba(0,0,0,.28); text-align:center
}
.cnf-t{ margin:0 0 8px; font-size:19px; color:var(--ink) }
.cnf-b{ margin:0 0 18px; font-size:14.5px; line-height:1.6; color:#6B5B78 }
.cnf-row{ display:flex; flex-direction:column; gap:10px }
.cnf-row .btn{ width:100%; margin:0 }
.cnf-ok{ background:#fff; color:#6B5B78; box-shadow:0 3px 0 #E3D9EE }

/* ===== v49 — هويّة بصرية لكل نوع خطوة ===== */
/* شريط صغير يسبق محتوى الخطوة: أيقونة النوع + اسمه.
   كان التطبيق يعرض رمزاً واحداً ومشهداً واحداً في 261 خطوة. */
.step-kind{
  display:flex; align-items:center; justify-content:center; gap:7px;
  margin:2px 0 8px; padding:5px 13px; align-self:center;
  background:#F1EAFA; border:1px solid #E4D8F2; border-radius:999px;
  font-size:12.5px; font-weight:700; color:var(--purple-deep);
  max-width:calc(100% - 32px)
}
.step-kind:empty{ display:none }
.sk-ic{ font-size:15px; line-height:1 }
.sk-tx{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* المشاهد الجديدة SVG — تُقيَّد رأسياً على الهواتف كما تُقيَّد الصور،
   وإلّا دفعت الفقاعة وزرّ «التالي» خارج الشاشة على الشاشات القصيرة. */
@media (max-width:430px){
  .card-scene .scene-svg{ max-height:31vh }
  .step-kind{ font-size:12px; padding:4px 11px }
}
@media (max-height:640px){
  .card-scene .scene-svg{ max-height:26vh }
  .step-kind{ margin:0 0 6px }
}

/* شريط مشهد مضغوط لخطوات الألعاب والأسئلة (62% من الخطوات كانت بلا صورة).
   الارتفاع مقيّد بصرامة: اللعبة تحتاج مساحتها، والشريط زينة لا محتوى. */
.scene-strip{ margin-bottom:10px; flex:0 0 auto }
.scene-strip .scene-svg{ height:104px; width:100%; border-radius:var(--r-lg) }
@media (max-width:430px){ .scene-strip .scene-svg{ height:92px } }
/* شاشات قصيرة: الشريط أول ما يُختصر، ثم يختفي — الأزرار أهمّ من الزينة */
@media (max-height:700px){ .scene-strip .scene-svg{ height:74px } }
@media (max-height:600px){ .scene-strip{ display:none } }

/* ============================================================
   v50 — واجهة لكل نطاق عمري
   الصنف يُوضع على #app من app.js ويُشتقّ من عمر الفئة لا من معرّفها،
   فأي فئة جديدة تُنشأ من اللوحة تأخذ واجهتها تلقائياً:
     band-kid   12 وأقلّ   · band-teen  13–17
     band-young 18–24      · band-adult 25 وأكثر
   band-teen هو الأساس فلا قواعد له. المُحدِّد #app لأن بعض القواعد
   المتأخّرة في هذا الملف غير مُنطاقة وتطغى على قواعد الشاشات.
   ============================================================ */

/* لون الفئة يصير لهجة الواجهة — يميّز الفئات بصرياً بلا نسخ تصميم كامل */
#app[style*="--cat-color"] .step-kind{ border-color:var(--cat-color) }
#app[style*="--cat-color"] .pill-star{ box-shadow:inset 0 0 0 1.5px var(--cat-color) }

/* ---------- طفل: أكبر، أكثر استدارة، أوسع مساحة لمس ---------- */
#app.band-kid{ --r-lg:30px; --r-md:22px; --r-sm:14px; --ui-scale:1.1; --ui-radius:26px }
#app.band-kid .btn{ padding:18px }
/* :not(.overlay) ضروري — فقاعة الورشة صندوق ثابت 57%×52% فوق البالون المرسوم في
   الصورة، وتكبير خطّها يُحدث تمريراً داخلها. تأخذ زيادة محسوبة أدناه بدلاً من ذلك. */
#app.band-kid .journey .bubble:not(.overlay){ line-height:1.8; padding:18px 20px }
#app.band-kid .journey .bubble.overlay{ font-size:15.5px }
#app.band-kid .q-opt{ padding:17px }
#app.band-kid .sp-text{ font-size:21px; line-height:2 }
#app.band-kid .step-kind{ font-size:13.5px; padding:6px 15px }
#app.band-kid .sk-ic{ font-size:17px }
#app.band-kid .card{ padding:18px }
#app.band-kid .tab-lbl{ font-size:11.5px }

/* ---------- شاب: أهدأ قليلاً وأكثف ---------- */
#app.band-young .btn{ padding:15px }
#app.band-young .journey .bubble:not(.overlay){ line-height:1.65; padding:15px 17px }
/* حزمتا الفئة أعلاه تُعيدان padding المختصر، فتمحوان المساحة التي يحجزها
   has-audio لزرّ الصوت (٧٤ بكسل) وترجعانها إلى ٢٠ — فيجلس الزرّ على أوّل
   سطر بمقدار ١١ بكسل، وتحديداً عند الأصغر سنّاً. نُعيد الحجز بعدهما. */
#app.band-kid .journey .bubble.has-audio,
#app.band-young .journey .bubble.has-audio{ padding-inline-end:74px }
@media (max-width:360px){
  #app.band-kid .journey .bubble.has-audio,
  #app.band-young .journey .bubble.has-audio{ padding-inline-end:64px }
}
#app.band-young .q-opt{ padding:13px }
#app.band-young .sp-text{ font-size:18px }
#app.band-young .card{ padding:15px }
#app.band-young{ --r-lg:22px; --r-md:16px; --ui-scale:.95; --ui-radius:18px }

/* ---------- راشد: واجهة عمل لا واجهة لعب ---------- */
#app.band-adult{ --r-lg:18px; --r-md:14px; --r-sm:10px; --ui-scale:.9; --ui-radius:14px }
#app.band-adult .btn{ padding:14px; box-shadow:0 3px 0 var(--purple-deep) }
#app.band-adult .journey .bubble:not(.overlay){ line-height:1.7; padding:14px 16px; min-height:0 }
#app.band-adult .q-opt{ padding:12px; box-shadow:0 2px 0 #E9DFF7 }
#app.band-adult .sp-text{ font-size:17px; line-height:1.8 }
#app.band-adult .card{ padding:14px; margin-bottom:11px }
#app.band-adult .step-kind{ font-size:12px; padding:4px 11px; font-weight:600 }
/* الرموز التعبيرية الكبيرة تُصغَّر: مقبولة لطفل، طفولية لمن عمره 40 */
#app.band-adult .sp-emoji{ font-size:44px }
#app.band-adult .sk-ic{ font-size:13.5px }
#app.band-adult .jp-ic{ font-size:20px }
/* الحركات الزخرفية تهدأ — الحركات الوظيفية (دخول الشاشة) تبقى */
#app.band-adult .bounce,
#app.band-adult .risho-hint,
#app.band-adult .sp-emoji{ animation:none }
#app.band-adult .screen-body>*{ animation-duration:.18s }

/* ===== v51 — بوّابة المحتوى: سبب الإقفال على البطاقة ===== */
/* «مقفلة» الصامتة لا تُعلّم الطفل شيئاً — البطاقة تقول السبب والموعد،
   فالنصّ أطول من الحالات الأخرى ويحتاج التفافاً لا قطعاً. */
.status-pill.locked-why,
.status-pill.expired{
  background:#F1EAFA; color:#6B5B78; font-weight:700;
  white-space:normal; text-align:center; line-height:1.35;
  max-width:9.5rem; padding:5px 9px
}
.status-pill.expired{ background:#F8E4E1; color:#A8443B }
@media (max-width:360px){
  .status-pill.locked-why, .status-pill.expired{ max-width:7.5rem; font-size:11px }
}

/* ===== v52 — إيقاع صفّي (جدولة المعلّم لطلابه) ===== */
.pace-head{ margin:14px 0 6px; font-weight:800; color:var(--purple-deep); font-size:14px }
.pace-head:first-child{ margin-top:4px }
.pace-row{
  display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center;
  padding:10px 12px; margin-bottom:8px;
  background:var(--card); border:1px solid #EFE6DA; border-radius:14px;
}
.pace-name{ font-weight:700; font-size:14px; color:var(--ink); overflow-wrap:anywhere }
.pace-dates{ display:flex; gap:8px; align-items:flex-end }
.pace-dates label{ display:flex; flex-direction:column; gap:3px; font-size:11px; color:var(--muted); font-weight:700 }
.pace-dates .fin{ margin:0; padding:8px 10px; font-size:13px; min-width:9.5rem }
.pace-row .pace-save{ width:auto; padding:10px 16px; font-size:14px; margin:0 }
.pace-state{ grid-column:1 / -1; font-size:12px; margin-top:-2px }

/* الهاتف: العمود الواحد — ثلاثة أعمدة على 375px تدفع الأزرار خارج الشاشة */
@media (max-width:560px){
  .pace-row{ grid-template-columns:1fr; gap:8px }
  .pace-dates{ flex-wrap:wrap }
  .pace-dates label{ flex:1 1 8rem }
  .pace-dates .fin{ min-width:0; width:100% }
  .pace-row .pace-save{ width:100% }
}

/* ===== v53 — الجوائز الحقيقية ===== */
/* بطاقة جائزة في متجر الطفل: رمز · اسم وشريط تقدّم · إجراء */
.prize-list{ display:flex; flex-direction:column; gap:9px }
.prize-card{
  display:grid; grid-template-columns:auto 1fr auto; gap:11px; align-items:center;
  background:var(--card); border:1px solid #EFE6DA; border-radius:16px; padding:11px 13px;
}
.prize-card.goal{ border-color:var(--purple); box-shadow:0 0 0 1.5px var(--purple) inset }
.pz-e{ font-size:30px; line-height:1 }
.pz-mid{ min-width:0 }
.pz-mid b{ display:block; font-size:14.5px; overflow-wrap:anywhere }
.pz-mid small{ display:block; font-size:11.5px; color:var(--muted) }
.pz-bar{ height:7px; background:#EFE7F8; border-radius:99px; overflow:hidden; margin:6px 0 3px }
.pz-bar > i{ display:block; height:100%; background:var(--gold); border-radius:99px; transition:width .3s ease }
@media (prefers-reduced-motion:reduce){ .pz-bar > i{ transition:none } }
.pz-num{ font-weight:700; color:var(--purple-deep) }
.pz-act{ display:flex; flex-direction:column; gap:4px; align-items:flex-end }
.pz-state{ font-size:11.5px; font-weight:700; text-align:center; max-width:7.5rem; line-height:1.4 }
.pz-state.requested{ color:#B8860B } .pz-state.approved{ color:#1F7A75 } .pz-state.delivered{ color:var(--green) }
.pz-cert{ font-size:10px; letter-spacing:.06em; color:var(--muted) }

/* بطاقة طلب في بوّابة الراشد — الدليل الموثوق أوّلاً وأبرز */
.claim-card{ background:var(--card); border:1px solid #EFE6DA; border-radius:16px; padding:13px; margin-bottom:10px }
.claim-card.requested{ border-color:#E8C266 }
.claim-card.delivered{ opacity:.82 }
.cl-top{ display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; margin-bottom:9px }
.cl-top b{ font-size:15.5px }
.cl-prize{ font-size:13px; color:var(--purple-deep); font-weight:700 }
.cl-status{ font-size:12px; font-weight:700; margin-inline-start:auto; white-space:nowrap }
.cl-ev{ display:grid; grid-template-columns:1fr 1fr; gap:9px }
.ev-strong{ background:#DFF0EE; border-radius:12px; padding:9px 11px; display:flex; flex-direction:column; gap:2px }
.ev-strong b{ font-size:13.5px; color:#1F5F5B }
.ev-strong span{ font-size:12.5px; color:#1F5F5B; font-weight:700 }
.ev-strong small,.ev-soft small{ font-size:10.5px; color:var(--muted); line-height:1.5; margin-top:3px }
.ev-soft{ background:#F5F0E6; border-radius:12px; padding:9px 11px; display:flex; flex-direction:column; gap:1px }
.ev-soft span{ font-size:12.5px; color:#6B5B78 }
.ev-flag{ color:#A8443B }
.cl-cert{ margin-top:9px; font-size:12.5px; color:var(--purple-deep); background:#F1EAFA; border-radius:10px; padding:7px 10px }
.cl-note{ margin:7px 0 0; font-size:12.5px }
.cl-act{ display:flex; flex-wrap:wrap; gap:8px; margin-top:11px }
.cl-act .btn{ margin:0 }
@media (max-width:520px){
  .cl-ev{ grid-template-columns:1fr }
  .prize-card{ grid-template-columns:auto 1fr }
  .pz-act{ grid-column:1 / -1; flex-direction:row; justify-content:flex-end; align-items:center }
  .pz-state{ max-width:none; text-align:end }
  .cl-act .btn{ width:100% }
}
.cl-noteIn{ margin:0; flex:1 1 12rem; min-width:0; padding:10px 12px; font-size:13.5px }
@media (max-width:520px){ .cl-noteIn{ flex:1 1 100% } }

/* ===== v54 — محرّر الجوائز في الاستوديو ===== */
.prize-cfg-row{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  padding:9px 10px; margin-bottom:8px;
  background:var(--card); border:1px solid #EFE6DA; border-radius:14px;
}
.prize-cfg-row .fin{ margin:0; padding:9px 11px; font-size:13.5px }
.prize-cfg-row .pe{ width:3.4rem; text-align:center }
.prize-cfg-row .pl{ flex:1 1 9rem; min-width:0 }
.prize-cfg-row .ps{ width:6rem }
.prize-cfg-row .pn{ flex:1 1 10rem; min-width:0 }
.pz-onoff{ display:flex; align-items:center; gap:5px; font-size:12.5px; font-weight:700; color:var(--muted); white-space:nowrap }
.pz-onoff input{ width:1.05rem; height:1.05rem; accent-color:var(--purple); margin:0 }
@media (max-width:520px){
  .prize-cfg-row .pl,.prize-cfg-row .pn{ flex:1 1 100% }
  .prize-cfg-row .ps{ flex:1 1 6rem; width:auto }
}

/* ===== v55 — لعبة الحروف بالإنجليزية ===== */
/* الكلمة اللاتينية تُملأ من اليسار: بلا هذا يظهر أوّل حرف يميناً داخل حاوية RTL
   فتُبنى الكلمة مقلوبة بصرياً. المحرّك نفسه لا يتغيّر. */
.word-game.ltr-word .word-slots,
.word-game.ltr-word .word-pool{ direction:ltr }
.word-game.ltr-word .w-slot,
.word-game.ltr-word .w-letter{ font-family:"Segoe UI",Tahoma,system-ui,sans-serif; letter-spacing:.02em }

/* ===== v56 — اللعبة على شاشة واحدة ===== */
/* المشكلة: شاشة الرحلة كلّها كانت تُمرَّر، فإن طالت اللعبة قليلاً نزل زرّ «التالي»
   تحت الحدّ واحتاج الطفل أن يُمرّر الصفحة ليجده — وهو أصعب ما يكون على طفل يلعب.
   الحلّ: الصفحة لا تُمرَّر إطلاقاً. الترويسة والنقاط ونوع الخطوة وزرّ «التالي» ثابتة،
   ومنطقة اللعبة تأخذ ما بقي وتُمرَّر داخلها وحدها إن اضطرّت. فالطفل يرى اللعبة
   والزرّ معاً دائماً على شاشة واحدة. */
.screen.journey{ overflow:hidden }
.screen.journey > .topbar,
.screen.journey > .progress-dots,
.screen.journey > .step-kind,
.screen.journey > .journey-foot{ flex:0 0 auto }
.screen.journey > #stage{
  flex:1 1 auto; min-height:0;              /* min-height:0 ضروري في flex وإلّا رفض الانضغاط */
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column;
}
/* اللعبة تتمدّد لتُعبّئ المساحة المتاحة بدل أن تدفع ما بعدها */
.screen.journey > #stage > .game{ flex:0 0 auto }
/* خطوة الحوار قصيرة، فكان بين المشهد والزرّ ٢٦٧ بكسل فراغاً ميتاً على شاشة ٨٤٤.
   الهامش التلقائي يُوسّط ما يقصر ويتلاشى إلى صفر حين يطول المحتوى — بخلاف
   justify-content:center الذي يقتطع أعلى المحتوى عند التمرير. */
.screen.journey > #stage > *:first-child{ margin-block-start:auto }
.screen.journey > #stage > *:last-child{ margin-block-end:auto }
/* سؤال خطوة الكتابة: يبقى ملاصقاً للصندوق فلا يضيع الموضوع مع لوحة المفاتيح */
.write-q{
  margin:0 18px 8px; padding:10px 14px; border-radius:14px;
  background:#fff; box-shadow:var(--shadow);
  font-size:15.5px; font-weight:700; line-height:1.6; color:var(--ink)
}

/* شاشات قصيرة: نضغط الزخرفة قبل أن نضغط اللعبة */
@media (max-height:700px){
  .screen.journey > .progress-dots{ padding-top:2px; padding-bottom:2px }
  .screen.journey > .journey-foot{ padding-top:8px }
}
@media (max-height:620px){
  .screen.journey > .step-kind{ display:none }   /* الزخرفة تُخفى، اللعبة تبقى */
}

/* ضغط تدريجي للعبة حين لا تكفي المساحة — يُطبَّق بالقياس بعد الرسم لا بالتخمين.
   الترتيب: تُزال الزخرفة، ثم tight، ثم tighter. الهدف أن يرى الطفل اللعبة كاملة
   بلا تمرير، فالتمرير داخل لعبة أصعب ما يكون على طفل. */
#stage.tight .bubble{ font-size:15.5px; padding:11px 13px; min-height:0; margin-bottom:9px }
#stage.tight .q-opt{ padding:10px 12px; font-size:15px }
#stage.tight .quiz-q{ font-size:16px; margin:6px 0 8px }
#stage.tight .game{ gap:7px }
#stage.tight .qsec,#stage.tight .quiz-head{ font-size:12.5px }
#stage.tight .mem-card,#stage.tight .w-letter{ font-size:17px }
#stage.tight .sp-emoji{ font-size:52px; margin-bottom:7px }
#stage.tight .sp-text{ font-size:17px; line-height:1.7 }

#stage.tighter .bubble{ font-size:14.5px; padding:9px 11px; margin-bottom:7px }
#stage.tighter .q-opt{ padding:8px 10px; font-size:14px }
#stage.tighter .quiz-q{ font-size:15px; margin:4px 0 6px }
#stage.tighter .game{ gap:5px }
#stage.tighter .audio-btn{ width:38px; height:38px; font-size:16px }
#stage.tighter .sp-emoji{ font-size:40px; margin-bottom:5px }
#stage.tighter .sp-text{ font-size:16px; line-height:1.6 }

/* وضع اللعب: شريط التبويبات يشغل مساحة حقيقية (position:relative) فـ hidden لا
   تستعيدها — الإخفاء الحقيقي يُعيد ٨٩ بكسل للّعبة على هاتف ٥٦٨. */
#app.in-journey #tabbar{ display:none }

/* الشاشات القصيرة: نضغط الأطر قبل أن نضغط اللعبة — الترويسة والقاعدة كانتا
   تستهلكان ١٨٤ بكسل من ٥٦٨ لزرّ واحد وعنوان. */
@media (max-height:640px){
  .screen.journey > .topbar{ padding-top:6px; padding-bottom:6px }
  .screen.journey > .topbar .title b{ font-size:15px }
  .screen.journey > .topbar .title span{ font-size:11.5px }
  .screen.journey > .journey-foot{ padding:8px 14px calc(8px + var(--sab)) }
  .screen.journey > .journey-foot .btn{ padding:12px; font-size:17px }
  /* مقاس النقاط لم يبقَ هنا: app.js يحسبه من العرض وعدد الخطوات ويطبّق حدّ
     الشاشة القصيرة (٢٢px) بنفسه. قاعدتان تتنازعان على المقاس تعني أن
     إحداهما تفوز بالتخصيص لا بالصواب. */
}

/* ============================================================
   v57 — مظهر الفئة: قيم تضبطها الإدارة من اللوحة
   الأصناف والمتغيّرات تُوضع على #app من app.js بحسب ui في الفئة.
   الفئة بلا مظهر تعمل بالافتراضي (band-*) كما كانت.
   ============================================================ */
#app{ --ui-scale:1; --ui-radius:22px }

/* مقياس النصّ — يضرب أحجام العناصر الرئيسية */
#app .btn{ font-size:calc(19px * var(--ui-scale)) }
#app .journey .bubble:not(.overlay){ font-size:calc(18px * var(--ui-scale)) }
#app .q-opt{ font-size:calc(16px * var(--ui-scale)) }
#app .card b{ font-size:calc(15px * var(--ui-scale)) }
#app .step-kind{ font-size:calc(12.5px * var(--ui-scale)) }

/* الاستدارة */
#app .btn{ border-radius:var(--ui-radius) }
#app .card,#app .prize-card,#app .claim-card{ border-radius:calc(var(--ui-radius) * .8) }

/* الكثافة */
#app.ui-density-roomy .card{ padding:19px; margin-bottom:15px }
#app.ui-density-roomy .screen-body{ padding:18px 20px 26px }
#app.ui-density-tight .card{ padding:12px; margin-bottom:9px }
#app.ui-density-tight .screen-body{ padding:12px 14px 18px }

/* هدوء الحركة — الحركات الزخرفية تُوقَف والوظيفية تبقى */
#app.ui-motion-calm .screen-body>*,
#app.ui-motion-calm .sp-emoji,
#app.ui-motion-calm .bounce,
#app.ui-motion-calm .risho-hint{ animation:none }

/* ── مسار الرحلات ── */
#app.ui-pplace-hidden .jp-path,#app.ui-pplace-hidden .journey-path{ display:none }
#app.ui-pplace-bottom .jp-path,#app.ui-pplace-bottom .journey-path{ order:9 }
#app.ui-pshape-column .jp-path,#app.ui-pshape-column .journey-path{ flex-direction:column; align-items:stretch }
#app.ui-pshape-column .jp-link{ width:2px; height:14px; margin:0 auto }
#app.ui-pshape-snake .jp-node:nth-child(4n+3){ transform:translateY(14px) }
#app.ui-pshape-snake .jp-node:nth-child(4n+1){ transform:translateY(-6px) }
#app.ui-psize-sm .jp-ic{ font-size:20px }
#app.ui-psize-sm .jp-node small{ font-size:10px }
#app.ui-psize-lg .jp-ic{ font-size:30px }
#app.ui-psize-lg .jp-node small{ font-size:13px }

/* ── بطاقة القصة اليومية ── */
#app.ui-splace-hidden .tip-card{ display:none }
#app.ui-splace-above .tip-card{ order:-1 }
#app.ui-scard-compact .tip-card{ padding:9px 11px }
#app.ui-scard-compact .tip-card .tip-em{ font-size:22px }
#app.ui-scard-compact .tip-card p{ font-size:13px; -webkit-line-clamp:2 }
#app.ui-ssize-sm .tip-card p{ font-size:12.5px }
#app.ui-ssize-lg .tip-card p{ font-size:15.5px }
#app.ui-ssize-lg .tip-card .tip-em{ font-size:34px }

/* ── صفحة القصة داخل الرحلة ── */
#app.ui-spimg-sm .sp-emoji{ font-size:48px }
#app.ui-spimg-md .sp-emoji{ font-size:62px }
#app.ui-spimg-lg .sp-emoji{ font-size:78px }
#app.ui-sptext-sm .sp-text{ font-size:16px }
#app.ui-sptext-md .sp-text{ font-size:19px }
#app.ui-sptext-lg .sp-text{ font-size:22px }
#app.ui-sporder-text-first .story-page{ display:flex; flex-direction:column }
#app.ui-sporder-text-first .story-page .sp-emoji{ order:2 }
#app.ui-sporder-text-first .story-page .sp-text{ order:1 }
#app.ui-sporder-text-first .story-page .sp-dots{ order:3 }

/* محرّر مظهر الفئة في الاستوديو */
.ui-cfg{ display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:9px }
.ui-sec{ grid-column:1 / -1; font-weight:800; font-size:13px; color:var(--purple-deep);
  margin:8px 0 -2px; padding-top:8px; border-top:1px solid #EFE6DA }
.ui-sec:first-child{ margin-top:0; padding-top:0; border-top:0 }
.ui-fld{ display:flex; flex-direction:column; gap:3px; font-size:11.5px; font-weight:700; color:var(--muted) }
.ui-fld .fin{ margin:0; padding:9px 11px; font-size:13.5px }
.ui-cfg .btn{ grid-column:1 / -1 }

/* شعار الشخصية في الشاشة الرئيسية — يظهر فقط إن ضبطتها الإدارة للفئة */
.char-badge{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.92); border-radius:999px;
  padding:4px 11px 4px 5px; margin-top:6px;
  box-shadow:0 4px 14px rgba(74,42,120,.16);
  font-size:calc(12.5px * var(--ui-scale)); font-weight:800; color:var(--purple-deep);
  max-width:11rem;
}
.char-badge b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.char-badge .cb-em{ font-size:calc(19px * var(--ui-scale)); line-height:1 }
.char-badge .cb-img{
  width:26px; height:26px; border-radius:50%; object-fit:cover;
  border:1.5px solid var(--gold); background:#FFF3C4;
}

/* زرّ الشاشة الرئيسية كان يتجاوز حجم النصّ المضبوط لأنه مُحدَّد بمعرّف
   (‎.home.v4 #startBtn‎). نرفع تحديدنا فوقه ليستجيب لضبط الإدارة. */
#app.app #startBtn{ font-size:calc(19px * var(--ui-scale)); border-radius:var(--ui-radius) }

/* ============================================================
   v58 — شريط الخطوات يقيس نفسه
   كان دوائر ٢٦px ثابتة: رحلة ١٦ خطوة تطلب ٦٠٢ بكسل، فعلى هاتف ٤١٢
   بكسل تُقطَع ست نقاط بصمت لأن الحاوية overflow:hidden. المقاس الآن
   يأتي من app.js في --dsize/--dgap، فالعرض المتاح وعدد الخطوات لا
   يُعرفان في CSS. ودون ٢٠px لا يُقرأ رقم الدائرة، فتصير شريط تقدّم.
   ============================================================ */
.progress-dots{ --dsize:26px; --dgap:3px; gap:var(--dgap) }
.dot.num{ width:var(--dsize); height:var(--dsize); font-size:calc(var(--dsize) * .46) }
.dot.num.active{ box-shadow:0 0 0 calc(var(--dsize) * .17) #E7DBFA }
.dot-line{ min-width:4px }

/* الوضع المضغوط: شريط ورقم بدل نقاط لا تُقرأ */
.progress-dots.compact{ gap:10px }
.progress-dots.compact .db-track{
  flex:1 1 auto; height:8px; border-radius:99px; background:#E0D5F0; overflow:hidden
}
.progress-dots.compact .db-fill{
  height:100%; border-radius:99px; background:var(--purple); transition:width .3s
}
.progress-dots.compact .db-label{
  flex:0 0 auto; font-size:13px; font-weight:700; color:var(--purple);
  font-variant-numeric:tabular-nums; white-space:nowrap
}
@media (prefers-reduced-motion:reduce){ .progress-dots.compact .db-fill{ transition:none } }

/* تلميح «اضغط عليّ» كان position:absolute بـ bottom ثابت، والترويسة تقصر على
   الهواتف القصيرة (قاعدة max-height:700) فيهبط الشعار ويصطدم به التلميح:
   ٤٠×١٣ بكسل فوق الشعار و٣٥×١٠ فوق التحية على ٣٦٠×٦٤٠ — قِيست لا خُمّنت.
   الحلّ أن يجري في التدفّق أسفل التحية: التخطيط يتولّى المسافة، فلا تقاطع
   ممكن على أي مقاس بدل إزاحة سحرية تصحّ على مقاس واحد. */
/* البطاقة التالية (.home-actions) تُسحَب ٣٤px فوق الترويسة بـ z-index:5، فأي
   شيء في هذا الشريط يُغطّى. لذلك نحجز الشريط أسفل التلميح بدل تخمين إزاحة:
   الترويسة تنمو، والتغطية تقع على فراغ لا على نصّ. */
.home.v3 .hero-hint,
.home.v4 .hero-hint{
  position:static; bottom:auto; inset-inline-start:auto;
  margin:7px auto 34px; align-self:center
}
/* وعلى الترويسة القصيرة لا مكان له أصلاً: الشعار والتحية يستهلكانها، وحجز
   الشريط يدفع صفّ الاختصارات تحت شريط التبويبات. التلميح زخرفة لا وظيفة —
   فيُخفى كما تُخفى .step-kind على الشاشات القصيرة، ويعود حيث تُوجد مساحة. */
@media (max-height:700px){
  .home.v3 .hero-hint,
  .home.v4 .hero-hint{ display:none }
}

/* ============================================================
   v59 — تجربة الفئة: ماذا يظهر، وكيف يُعرَض، وبأي حكاية
   الأصناف يضعها app.js على #app من ui.show/ui.layout في الفئة.
   الإخفاء هنا لا في كود الرسم: عنصر واحد = قاعدة واحدة، بدل
   شرطٍ يتسلّل إلى كل شاشة ويتكرّر.
   ============================================================ */
#app.ui-no-greet    .hero-greet,
#app.ui-no-hint     .hero-hint,
#app.ui-no-streak   .streak-chip,
#app.ui-no-statrow .home-stat-cards,
#app.ui-no-tips     #tipCard,
#app.ui-no-capstone #capCard,
#app.ui-no-stepKind .step-kind,
#app.ui-no-audio    .audio-btn{ display:none !important }

/* الاختصارات فردياً — كل واحد يُخفى وحده */
#app.ui-no-sc-board .hlink[data-l="board"],
#app.ui-no-sc-quiz  .hlink[data-l="quiz"],
#app.ui-no-sc-msg   .hlink[data-l="msg"],
#app.ui-no-sc-store .hlink[data-l="store"],
#app.ui-no-sc-wallet .hlink[data-l="wallet"],
#app.ui-no-sc-feed  .hlink[data-l="feed"]{ display:none !important }

/* طريقة العرض — بطاقات الأرقام */
#app.ui-tiles-grid2 .home-stat-cards,
#app.ui-tiles-grid2 .home-links{ grid-template-columns:repeat(2,1fr) }
#app.ui-tiles-list .home-stat-cards,
#app.ui-tiles-list .home-links{ grid-template-columns:1fr }
#app.ui-tiles-list .hstat,
#app.ui-tiles-list .hlink{
  flex-direction:row; display:flex; align-items:center; gap:12px; text-align:start
}
#app.ui-tiles-list .hstat small,
#app.ui-tiles-list .hlink small{ margin:0 }

/* صفّ الاختصارات أفقياً بدل شبكة — لمرحلة تألف التمرير الأفقي */
#app.ui-scs-row .home-links{
  display:flex; grid-template-columns:none; overflow-x:auto;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  padding-bottom:4px; scrollbar-width:thin
}
#app.ui-scs-row .home-links .hlink{ flex:0 0 auto; min-width:96px; scroll-snap-align:start }

/* الترويسة: كاملة (الرسم) · مضغوطة · سادة (بلا رسم — للمراحل الأكبر) */
#app.ui-hero-compact .home-hero{ min-height:auto }
#app.ui-hero-compact .hero-logo{ height:clamp(40px,6dvh,54px) }
#app.ui-hero-plain .hero-img,
#app.ui-hero-plain .home-sky{ display:none }
#app.ui-hero-plain .home-hero{ background:linear-gradient(160deg,var(--purple-deep,#3A2A5E),var(--purple,#7C4DBC)) }
#app.ui-hero-plain .hero-greet{ background:rgba(255,255,255,.14); color:#fff; text-shadow:none }
#app.ui-hero-plain .hero-scrim{ display:none }
#app.ui-hero-plain .cat-chip.home-cat{ box-shadow:none }

/* 📖 بطاقة الحكاية — تُعرّف الطفل بعالم مرحلته */
.tale-card{
  margin:0 18px 14px; padding:15px 17px; border-radius:var(--ui-radius,18px);
  background:var(--card,#fff); box-shadow:var(--shadow);
  position:relative; z-index:2
}
.tale-t{
  display:block; font-size:calc(15.5px * var(--ui-scale,1)); font-weight:800;
  color:var(--purple-deep,#3A2A5E); margin-bottom:5px
}
.tale-x{
  margin:0; font-size:calc(14.5px * var(--ui-scale,1)); line-height:1.75;
  color:var(--muted,#6B6280)
}

/* مربّعات «ما يظهر» في محرّر المظهر — تأخذ عرض الشبكة كاملاً وتتوزّع بنفسها */
.ui-chks{
  grid-column:1 / -1; display:grid; gap:7px 14px;
  grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr))
}
.ui-chk{
  display:flex; align-items:center; gap:9px; font-size:13px; font-weight:700;
  color:var(--ink); background:var(--bg,#F7F5FA); border-radius:10px;
  padding:9px 11px; cursor:pointer; min-height:40px
}
.ui-chk input{ width:17px; height:17px; accent-color:var(--purple); flex:0 0 auto; margin:0 }
.ui-cfg textarea.fin{ resize:vertical; min-height:66px; line-height:1.6; font-family:inherit }

/* بطاقات الرئيسية فُصلت واحدةً واحدةً — الإدارة تختار ما يراه الطفل بالضبط */
#app.ui-no-stars  .hstat[data-go="progress"],
#app.ui-no-badges .hstat[data-go="badges"],
#app.ui-no-jrn    .hstat[data-go="stories"]{ display:none !important }

/* الترويسة السادة: اسم الطالب كان بنفسجياً على بنفسجي فلا يُقرأ —
   على أرضية ملوّنة يرث النصّ لونها الفاتح لا لون الهوية. */
#app.ui-hero-plain .hero-greet b,
#app.ui-hero-plain .home-greet b,
#app.ui-hero-plain .home-greet .user-title{ color:#FFF3C4 }
#app.ui-hero-plain .hero-greet{ text-shadow:none }

/* ============================================================
   مسار الرحلات — أهمّ ما على الشاشة الرئيسية
   كان اسم الرحلة يُقطع بثلاث نقاط: سطر واحد بعرض ٧٢ بكسل لا يسع
   اسماً عربياً («أمانة مهنية ون…»). فالطفل لا يعرف إلى أين يذهب.
   الافتراضي الآن سطران كاملان، والإدارة تختار: سطران · سطر · بلا اسم.
   ============================================================ */
.jp-node small{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  white-space:normal; text-align:center; word-break:break-word;
  /* نزول الحروف العربية (ي ج ح) يُقصّ بلا هذه — قياساً: يحتاج ٢px فوق الصندوق */
  padding-bottom:3px
}
#app.ui-plabel-one .jp-node small{
  -webkit-line-clamp:1; white-space:nowrap; text-overflow:ellipsis
}
#app.ui-plabel-off .jp-node small{ display:none }
/* المسار الكبير يحتمل اسماً أعرض */
#app.ui-psize-lg .jp-node{ width:84px }
#app.ui-psize-lg .jp-node small{ max-width:82px }
#app.ui-psize-sm .jp-node{ width:64px }
#app.ui-psize-sm .jp-node small{ max-width:62px; font-size:9.5px }

/* قائمة ترتيب الأقسام في محرّر المظهر */
.ui-order{ grid-column:1 / -1; display:flex; flex-direction:column; gap:6px }
.uo-row{
  display:flex; align-items:center; gap:9px; background:var(--bg,#F7F5FA);
  border-radius:10px; padding:8px 11px; font-size:13px; font-weight:700; color:var(--ink)
}
.uo-n{
  flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--purple); color:#fff;
  display:grid; place-items:center; font-size:11.5px; font-variant-numeric:tabular-nums
}
.uo-t{ flex:1 1 auto; min-width:0 }
.uo-b{
  flex:0 0 auto; width:34px; height:34px; border-radius:9px; border:0; cursor:pointer;
  background:#fff; color:var(--purple-deep); font-size:14px; font-weight:800
}
.uo-b:disabled{ opacity:.32; cursor:default }

/* ============================================================
   📜 سجلّ الشهادات — من نالها
   صفٌّ يتكيّف: على الشاشة الضيّقة يلتفّ إلى سطرين بدل أن يُقصّ،
   ورقم الشهادة يبقى LTR لأنه معرّف لا نصّ عربي.
   ============================================================ */
.cr-row{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--bg,#F7F5FA); border-radius:12px; padding:10px 12px; margin-bottom:7px
}
.cr-main{ flex:1 1 150px; min-width:0 }
.cr-main b{ display:block; font-size:14.5px; font-weight:800; color:var(--ink) }
.cr-main small{ display:block; font-size:12px; color:var(--muted); margin-top:2px }
.cr-meta{ flex:0 1 auto; min-width:0; text-align:start }
.cr-no{
  display:inline-block; font-family:Consolas,"Cascadia Mono",monospace; font-size:11.5px;
  direction:ltr; background:#fff; border:1px solid var(--line,#E2DCEF);
  border-radius:6px; padding:2px 7px; color:var(--purple-deep,#4A2A78)
}
.cr-meta small{ display:block; font-size:11.5px; color:var(--muted); margin-top:3px }
.cr-row .cr-p{
  flex:0 0 auto; width:auto; padding:9px 12px; font-size:14px; min-height:38px
}
.cr-q{ width:100% }
@media (max-width:340px){
  .cr-row{ gap:7px; padding:9px 10px }
  .cr-main{ flex:1 1 100% }
  .cr-meta{ flex:1 1 auto }
}

/* أهداف لمس في البوابات — المفتاح والشارة كانا ٣٠ و٢٥ بكسل ارتفاعاً،
   وإصبعٌ على لوح أو هاتف يحتاج ٣٢ فأكثر. الشكل كما هو والمنطقة تتّسع. */
.switch{ min-height:32px; height:32px }
.switch:after{ width:26px; height:26px }
.cat-chip.sm{ min-height:30px; display:inline-flex; align-items:center; padding:4px 10px }

/* شرح تحذير النقاط — يشرح ولا يَصِم، وينتهي بنفسه */
.ev-warn{
  background:#FBECEE; border-radius:12px; padding:11px 13px; margin-top:8px
}
.ev-warn b{ display:block; font-size:13.5px; color:#B03A48; margin-bottom:5px }
.ev-warn small{ display:block; font-size:12.5px; line-height:1.75; color:#7A4B54; margin-bottom:5px }
.ev-warn .ev-how{ color:#1F5C48; background:#E7F4EE; border-radius:9px; padding:8px 10px; margin:7px 0 5px }
.ev-warn .ev-when{ font-size:11.5px; opacity:.85; margin:0 }

/* ⏳ جدولة القصة في المحرّر — صفّ يلتفّ على الشاشة الضيّقة */
.tip-gate{
  display:flex; flex-wrap:wrap; gap:8px 12px; align-items:end;
  background:var(--bg,#F7F5FA); border-radius:10px; padding:9px 11px; margin-top:7px; width:100%
}
.tg-lbl{ font-size:12px; font-weight:800; color:var(--purple-deep); align-self:center }
.tip-gate label{ display:flex; flex-direction:column; gap:3px; font-size:11px; font-weight:700; color:var(--muted) }
.tip-gate .fin{ margin:0; padding:7px 9px; font-size:12.5px; min-width:8.5rem }

/* 🛒 شراء الجوائز — قائمة ما يجب شراؤه */
.buy-row{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--bg,#F7F5FA); border-radius:12px; padding:10px 12px; margin-bottom:7px
}
.buy-main{ flex:1 1 160px; min-width:0 }
.buy-main b{ display:block; font-size:14.5px; font-weight:800; color:var(--ink) }
.buy-main small{ display:block; font-size:12px; color:var(--muted); margin-top:2px }
.buy-cost{ flex:0 0 auto; font-weight:800; color:var(--purple-deep); font-variant-numeric:tabular-nums; font-size:14px }
.buy-link{
  flex:0 0 auto; display:inline-flex; align-items:center; min-height:36px; padding:8px 13px;
  border-radius:9px; background:#fff; color:var(--purple-deep); font-size:13px; font-weight:800;
  text-decoration:none; border:1px solid var(--line,#E2DCEF)
}
.buy-sum{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  background:var(--ok-bg,#E7F4EE); color:var(--ok,#1F7A5C); border-radius:12px;
  padding:11px 14px; margin-top:9px; font-weight:800; font-size:14px
}

/* مربّع «لها الأولوية» + كشف التعارض في محرّر الفئات */
.cat-prio{
  display:inline-flex; align-items:center; gap:7px; min-height:36px;
  background:var(--bg,#F7F5FA); border-radius:9px; padding:6px 11px;
  font-size:12.5px; font-weight:700; color:var(--ink); cursor:pointer; white-space:nowrap
}
.cat-prio input{ width:17px; height:17px; accent-color:var(--purple); margin:0; flex:0 0 auto }
.cat-clash{
  flex:1 1 100%; font-size:12px; line-height:1.7; color:#8A5A2B;
  background:#FDF3E3; border-radius:9px; padding:7px 10px; margin-top:6px
}

/* ============================================================
   v64 — شاشة الدخول على حاسوب بنافذة قصيرة
   القاعدة القديمة تحوّل الشاشة إلى صفّين (نموذج بجانب الرسم) عند
   ارتفاع ≤560، وقد صُمّمت لهاتف مقلوب: قصير وضيّق معاً. أمّا لابتوب
   عريض بنافذة قصيرة (أو بتكبير الصفحة) فالعرض متوفّر والارتفاع وحده
   شحيح — فكانت النتيجة بطاقة ممطوطة ورسماً معلّقاً بجانبها بلا عنوان.
   الحلّ: الصفّ للضيّق فقط، والعريض يبقى عموداً مركزياً مضغوطاً.
   ============================================================ */
@media (orientation:landscape) and (max-height:560px) and (min-width:1001px){
  .auth-screen.has-v2{ display:flex; align-items:center; justify-content:center }
  /* نُلغي تحويل الصفّ ونُعيد العمود المركزي */
  /* الشريط العلوي مُطلَق الموضع، فبلا هذه المساحة يصطدم العنوان بمبدّل اللغة */
  .av-col{ flex-direction:column; align-items:center; width:min(94%,460px);
    /* الشريط العلوي (الشعار + مبدّل اللغة) يرتفع ٦١ بكسل ويبدأ عند ١٢،
       فالعنوان يحتاج تجاوز ٧٣ — قِيست على 1280×501 فعلياً لا تقديراً. */
    padding:80px 0 0; margin:auto; }
  .av-side{ display:contents }
  .av-arch-wrap{ display:none }          /* الارتفاع شحيح: الرسم أوّل ما يُستغنى عنه */
  .av-badge{ display:none }
  .av-title{ position:static; opacity:1; pointer-events:auto; margin:6px 0 2px; font-size:20px }
  .av-sub{ display:none }
  .auth-v2 .av-card{ flex:0 0 auto; align-self:center; margin:0; max-height:none; width:100% }
  .av-top{ position:absolute; top:calc(6px + var(--sat)); inset-inline:16px; padding:0 }
  .av-foot{ position:absolute; bottom:4px; inset-inline:0 }
}
/* نافذة قصيرة على شاشة عريضة بلا اشتراط الاتجاه (تكبير المتصفّح مثلاً) */
@media (min-width:1001px) and (min-height:561px) and (max-height:700px){
  .av-arch{ height:clamp(80px,12dvh,120px) }
  .av-title{ margin-top:10px }
  .auth-v2 .av-card{ max-height:none }
}