:root{
  --primary:#0984e3;
  --primary-dark:#0a6bc0;
  --green:#00b894;
  --green-dark:#00a381;
  --orange:#e17055;
  --yellow:#fdcb6e;
  --purple:#a29bfe;
  --red:#d63031;
  --ink:#2d3436;
  --muted:#636e72;
  --bg:linear-gradient(160deg,#dfe8f5 0%,#cfe3f7 45%,#c9f0e0 100%);
  --card:#ffffff;
  --radius:22px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:'Cairo','Baloo Bhaijaan 2',Tahoma,'Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--ink);
  overflow-x:hidden;
}
#app{min-height:100vh;max-width:640px;margin:0 auto;position:relative;padding-bottom:20px;}
.screen{display:none;padding:16px;min-height:100vh;animation:fadeIn .35s ease;}
.screen.active{display:block;}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

/* ===== Boot ===== */
#screen-boot{display:none;align-items:center;justify-content:center;text-align:center;background:linear-gradient(160deg,#0a6bc0,#0984e3 55%,#00b894);}
#screen-boot.active{display:flex;}
.boot-inner{color:#fff;width:80%;max-width:340px;}
.boot-logo{font-size:64px;animation:bob 1.4s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.boot-title{font-size:34px;margin:8px 0 4px;font-weight:900;text-shadow:0 3px 10px rgba(0,0,0,.25);}
.boot-sub{opacity:.92;margin:0 0 22px;}
.boot-loader{height:10px;background:rgba(255,255,255,.25);border-radius:99px;overflow:hidden;margin-bottom:18px;}
.boot-bar{height:100%;width:0;background:#fff;border-radius:99px;animation:load 1.6s ease forwards;}
@keyframes load{to{width:100%;}}
.boot-copy{font-size:12px;opacity:.85;}

/* ===== Home ===== */
.home-top{display:flex;justify-content:space-between;align-items:center;margin:6px 2px 14px;}
.home-profile{display:flex;align-items:center;gap:10px;}
.home-avatar{width:48px;height:48px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:0 4px 10px rgba(0,0,0,.12);}
.home-name{font-weight:700;}
.home-level{font-size:12px;color:var(--muted);}
.home-stats{display:flex;gap:8px;}
.stat-chip{background:#fff;border-radius:14px;padding:6px 10px;font-size:13px;box-shadow:0 3px 8px rgba(0,0,0,.08);display:flex;align-items:center;gap:5px;}
.home-hello{text-align:center;font-size:24px;font-weight:900;margin:4px 0 18px;}
.home-hello small{display:block;font-size:14px;font-weight:400;color:var(--muted);margin-top:4px;}
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.menu-card{background:var(--card);border-radius:var(--radius);padding:20px 14px;text-align:center;cursor:pointer;box-shadow:0 8px 18px rgba(0,0,0,.10);border:none;transition:transform .12s ease,box-shadow .12s;position:relative;overflow:hidden;}
.menu-card:active{transform:scale(.96);}
.menu-card.locked{filter:grayscale(.9);opacity:.75;cursor:not-allowed;}
.menu-card .m-emoji{font-size:42px;display:block;margin-bottom:8px;}
.menu-card .m-title{font-weight:800;font-size:17px;}
.menu-card .m-desc{font-size:12px;color:var(--muted);margin-top:4px;}
.menu-card .m-lock{position:absolute;top:10px;left:10px;font-size:18px;}
.home-footer{text-align:center;margin-top:22px;}
.btn-ghost{background:none;border:2px dashed #fff;color:#fff;padding:10px 22px;border-radius:99px;font-size:15px;font-weight:700;cursor:pointer;background:rgba(255,255,255,.22);}

/* ===== Setup ===== */
#screen-setup{background:linear-gradient(160deg,#dfe8f5,#c9f0e0);}
.setup-title{font-size:28px;font-weight:900;margin:8px 0 6px;}
.setup-intro{color:var(--muted);margin:0 0 16px;line-height:1.7;}
.setup-steps{display:flex;align-items:center;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 16px;}
.setup-steps>span{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#fff;color:var(--muted);font-weight:900;font-size:14px;box-shadow:0 2px 6px rgba(0,0,0,.08);}
.setup-steps>span.on{background:var(--green);color:#fff;}
.setup-steps>span.lbl{width:auto;border-radius:99px;padding:0 10px;color:var(--primary);font-size:13px;background:#eef6ff;}
.avatar-options{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;}
.avatar-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:26px;background:#f4f8fd;border:2px solid #e1e8f0;border-radius:12px;cursor:pointer;transition:.12s;}
.avatar-cell.selected{border-color:var(--green);background:#e7fbf4;transform:scale(1.08);box-shadow:0 4px 10px rgba(0,184,148,.25);}
.country-options{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px;}
.country-cell{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;border:2px solid #e1e8f0;border-radius:12px;cursor:pointer;font-size:22px;transition:.12s;background:#f7fafd;}
.country-cell i{font-size:10px;font-style:normal;color:var(--muted);font-weight:700;}
.country-cell.selected{border-color:var(--green);background:#e7fbf4;transform:scale(1.05);box-shadow:0 3px 8px rgba(0,184,148,.2);}
.setup-card{background:#fff;border-radius:18px;padding:16px;margin-bottom:14px;box-shadow:0 4px 12px rgba(0,0,0,.07);}
.field-label{display:block;font-weight:700;margin-bottom:10px;font-size:15px;}
.field-input{width:100%;padding:12px 14px;border:2px solid #e1e8f0;border-radius:12px;font-size:17px;font-family:inherit;}
.field-input:focus{outline:none;border-color:var(--primary);}
.lang-options,.time-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.voice-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.opt{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;border:2.5px solid #e1e8f0;border-radius:14px;cursor:pointer;font-weight:700;font-size:14px;transition:.12s;}
.opt .o-emoji{font-size:26px;}
.opt.selected{border-color:var(--green);background:#e7fbf4;transform:scale(1.02);box-shadow:0 4px 10px rgba(0,184,148,.2);}
.hint{font-size:13px;color:var(--muted);margin-top:10px;line-height:1.6;}
.btn-primary{border:none;background:var(--green);color:#fff;padding:13px 26px;border-radius:14px;font-size:17px;font-weight:800;cursor:pointer;box-shadow:0 6px 14px rgba(0,184,148,.35);transition:transform .1s;}
.btn-primary:active{transform:scale(.97);}
.btn-primary.big{width:100%;padding:16px;font-size:19px;margin-top:8px;}
.btn-primary.green{background:var(--green);}
.btn-primary.blue{background:var(--primary);box-shadow:0 6px 14px rgba(9,132,227,.35);}
.btn-primary.orange{background:var(--orange);box-shadow:0 6px 14px rgba(225,112,85,.35);}
.btn-back-mini{border:2px solid #e1e8f0;background:#fff;color:var(--muted);border-radius:99px;padding:6px 14px;font-size:13px;font-weight:800;cursor:pointer;}

/* ===== ركن الأصدقاء ===== */
#screen-friends{background:linear-gradient(160deg,#fff7e6,#ffe8f4);}
.fr-hero{background:linear-gradient(120deg,#ffeaa7,#fdcb6e);border-radius:18px;padding:16px;display:flex;gap:12px;align-items:center;margin-bottom:14px;box-shadow:0 6px 16px rgba(253,203,110,.45);}
.fr-hero-emoji{font-size:40px;background:#fff;width:60px;height:60px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.fr-hero b{font-size:18px;color:#6b3f00;}
.fr-hero p{margin:4px 0 0;font-size:13px;color:#7a5a1e;line-height:1.6;}
.fr-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.fr-card{background:#fff;border-radius:18px;padding:14px;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,.07);border:2px solid transparent;display:flex;flex-direction:column;}
.fr-card.fr-friend{border-color:#a3e9cc;background:#f4fdf9;}
.fr-avatar{font-size:52px;margin:4px auto 6px;}
.fr-name{font-weight:900;font-size:19px;color:var(--primary);}
.fr-tag{font-size:12px;color:var(--muted);margin-top:2px;}
.fr-line{font-size:13px;color:#5b6b7c;line-height:1.6;margin:10px 0;}
.fr-status{background:#dff7ea;color:#00825f;font-weight:800;font-size:13px;border-radius:99px;padding:6px 12px;display:inline-block;margin:0 auto 8px;}
.fr-stats{display:flex;justify-content:center;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
.fr-stats span{background:#eef6ff;color:var(--primary);font-size:12px;font-weight:800;border-radius:99px;padding:5px 10px;}
.fr-btns{display:flex;flex-direction:column;gap:8px;margin-top:auto;}
.fr-btns .btn-primary{padding:11px;font-size:15px;}
.fr-safety{margin-top:14px;background:#eafaf4;border:2px dashed #7bd8b5;border-radius:14px;padding:12px;text-align:center;font-size:13px;color:#007a5e;line-height:1.7;}

/* اختبار الأصدقاء */
.fr-quiz{background:#fff;border-radius:18px;padding:16px;box-shadow:0 4px 12px rgba(0,0,0,.08);text-align:center;}
.fr-qhead{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--muted);margin-bottom:12px;}
.fr-qhead b{color:var(--primary);}
.fr-qimg{width:150px;height:150px;margin:0 auto 10px;border-radius:16px;overflow:hidden;border:3px solid #ffeaa7;box-shadow:0 6px 16px rgba(0,0,0,.12);}
.fr-qimg img{width:100%;height:100%;object-fit:cover;}
.fr-qtext{font-size:17px;font-weight:800;color:#2d3436;margin:0 0 14px;}
.fr-opts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.fr-opt{width:74px;height:74px;border-radius:18px;border:3px solid #e1e8f0;background:#f4f8fd;font-size:34px;font-weight:900;color:var(--primary);cursor:pointer;transition:.12s;box-shadow:0 4px 8px rgba(0,0,0,.06);}
.fr-opt:active{transform:scale(.95);}
.fr-opt.ok{border-color:var(--green);background:#dff7ea;color:#00825f;transform:scale(1.05);}
.fr-opt.bad{border-color:#ff7675;background:#ffecec;color:#c0392b;animation:shake .3s;}
.fr-qrow{display:flex;justify-content:space-between;align-items:center;margin-top:14px;}
.fr-qscore{font-weight:900;color:#e17055;font-size:16px;}
@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-6px);}75%{transform:translateX(6px);}}

/* ===== الزمن والاتجاهات ===== */
#screen-time{background:linear-gradient(160deg,#eaf4ff,#fff0f6);}

/* ===== الإيقاظ العلمي ===== */
#screen-science{background:linear-gradient(160deg,#e8f8f5,#fff3e0);}
.sc-hero{background:linear-gradient(120deg,#1abc9c,#16a085);border-radius:18px;padding:16px;display:flex;gap:12px;align-items:center;margin-bottom:12px;box-shadow:0 6px 16px rgba(26,188,156,.4);}
.sc-hero>div:first-child{font-size:44px;background:rgba(255,255,255,.92);width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sc-hero b{color:#fff;font-size:20px;}
.sc-hero p{margin:4px 0 0;color:#e0f7f1;font-size:13px;line-height:1.6;}
.sc-tri{margin-top:16px;}
.sc-tri-title{font-size:18px;font-weight:900;color:var(--primary);margin-bottom:8px;}
.sc-topics{display:flex;flex-direction:column;gap:8px;}
.sc-topic{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid #e1e8f0;border-radius:14px;padding:10px 12px;cursor:pointer;box-shadow:0 3px 8px rgba(0,0,0,.05);text-align:right;}
.sc-topic.done{border-color:var(--green);background:#eafaf4;}
.sc-topic-emoji{font-size:28px;}
.sc-topic-info{flex:1;display:flex;flex-direction:column;align-items:flex-start;}
.sc-topic-title{font-weight:800;font-size:15px;}
.sc-topic-prog{font-size:12px;color:var(--muted);font-weight:700;margin-top:2px;}
.sc-topic-go{font-size:14px;color:var(--muted);}
.sc-detail .su-back{margin-top:14px;}

/* ===== الملصق الإعلاني والحرطة الجرافيكية ===== */
#screen-poster{background:linear-gradient(160deg,#eafaf1,#eaf2fb);}
.ps-poster{background:linear-gradient(135deg,#27ae60,#f1c40f);border-radius:22px;padding:22px 18px;color:#fff;text-align:center;box-shadow:0 10px 25px rgba(0,0,0,.3);}
.ps-badge{display:inline-block;background:rgba(0,0,0,.2);padding:4px 14px;border-radius:20px;font-size:11px;font-weight:800;}
.ps-title{font-size:22px;font-weight:900;margin:10px 0 6px;text-shadow:2px 2px 4px rgba(0,0,0,.3);}
.ps-desc{font-size:13px;line-height:1.7;margin:0 0 14px;color:#fff;}
.ps-cta{background:#fff;color:#27ae60;border:none;padding:12px 26px;font-size:15px;font-weight:800;border-radius:30px;cursor:pointer;box-shadow:0 5px 15px rgba(0,0,0,.25);font-family:inherit;}
.ps-cta:active{transform:scale(.95);}
.ps-charter{margin-top:14px;}
.ps-swatches{display:flex;flex-direction:column;gap:8px;margin-top:10px;}
.ps-swatch{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid #e1e8f0;border-radius:14px;padding:10px 12px;cursor:pointer;box-shadow:0 3px 8px rgba(0,0,0,.05);text-align:right;font-family:inherit;}
.ps-swatch:active{transform:scale(.98);}
.ps-dot{width:22px;height:22px;border-radius:50%;flex-shrink:0;box-shadow:inset 0 0 0 2px rgba(0,0,0,.08);}
.ps-sname{font-weight:800;font-size:14px;flex:1;}
.ps-stag{font-size:12px;color:var(--muted);font-weight:700;}

/* ===== رسم وتلوين جسم الإنسان ===== */
#screen-body{background:linear-gradient(160deg,#e8f8ff,#ffeef2);}
.bd-dialogue{background:#f1f2f6;padding:10px 14px;border-radius:12px;margin:8px 0;font-weight:800;font-size:14px;color:#2d3436;min-height:42px;display:flex;align-items:center;justify-content:center;text-align:center;border-right:4px solid var(--primary);}
.bd-toolbar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:8px;}
.bd-color{width:44px;height:44px;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.25);cursor:pointer;font-size:21px;display:flex;align-items:center;justify-content:center;}
.bd-color:active{transform:scale(.9);}
.tool-btn{padding:9px 13px;border:none;border-radius:10px;background:#636e72;color:#fff;font-weight:800;font-size:12px;cursor:pointer;font-family:inherit;box-shadow:0 3px 8px rgba(0,0,0,.2);}
.tool-btn:active{transform:scale(.95);}
.tool-btn.danger{background:#e74c3c;}
.tool-btn.ok{background:#27ae60;}
.bd-canvas{width:100%;height:60vh;background:#fff;border:3px solid #00b894;border-radius:14px;cursor:crosshair;touch-action:none;display:block;margin-top:10px;box-shadow:0 6px 16px rgba(0,0,0,.15);}

/* ===== أغنية الألفباء ===== */
#screen-music{background:linear-gradient(160deg,#fdf2f8,#f0e7ff);}
.mu-player{background:#fff;border:2px solid #e9d5ff;border-radius:18px;padding:14px;margin-bottom:12px;box-shadow:0 6px 16px rgba(0,0,0,.08);}
.mu-now{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:8px;}
.mu-btn{width:46px;height:46px;border:none;border-radius:50%;background:#e9d5ff;font-size:19px;cursor:pointer;}
.mu-btn:active{transform:scale(.9);}
.mu-play{background:linear-gradient(120deg,#7c3aed,#a855f7);color:#fff;border:none;padding:12px 22px;font-size:15px;font-weight:800;border-radius:30px;cursor:pointer;font-family:inherit;box-shadow:0 4px 12px rgba(124,58,237,.4);}
.mu-play:active{transform:scale(.95);}
.mu-track{margin:6px 0;}
.mu-track input{width:100%;accent-color:#7c3aed;height:8px;}
.mu-time{text-align:center;font-size:12px;color:var(--muted);font-weight:700;margin-top:2px;}
.mu-title{text-align:center;font-weight:800;font-size:14px;color:#7c3aed;min-height:20px;}
.mu-songs{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;}
.mu-song{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid #e9d5ff;border-radius:14px;padding:12px;cursor:pointer;text-align:right;font-family:inherit;box-shadow:0 3px 8px rgba(0,0,0,.05);}
.mu-song.on{background:#f5f3ff;border-color:#7c3aed;}
.mu-song.playing .mu-sname{color:#7c3aed;}
.mu-state{font-size:20px;}
.mu-sname{font-weight:800;font-size:14px;}
.mu-lyrics{background:#fff;border:2px solid #fde68a;border-radius:18px;padding:12px;box-shadow:0 6px 16px rgba(0,0,0,.06);}
.mu-lyrhead{font-weight:900;font-size:14px;color:#b45309;text-align:center;margin-bottom:8px;}
.mu-verse{display:flex;align-items:center;gap:10px;width:100%;background:#fffbeb;border:1.5px solid #fde68a;border-radius:12px;padding:9px 10px;margin-bottom:6px;cursor:pointer;text-align:right;font-family:inherit;color:#7c2d12;}
.mu-verse:active{transform:scale(.98);}
.mu-verse b{background:#f59e0b;color:#fff;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;box-shadow:0 2px 6px rgba(245,158,11,.4);}
.mu-verse span{flex:1;font-weight:800;font-size:14px;line-height:1.5;}
.mu-verse em{font-style:normal;font-size:15px;flex-shrink:0;}
.mu-verse.speaking{background:#fde68a;border-color:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.25);}
.mu-nolyr{text-align:center;color:var(--muted);font-weight:700;padding:14px;}
.su-card.ec-yellow{background:#fcf3cf;border:2.5px solid #f1c40f;}
.su-card.ec-green{background:#d4efdf;border:2.5px solid #27ae60;}
.su-card.ec-orange{background:#fdebd0;border:2.5px solid #e67e22;}
.su-card.ec-yellow.done,.su-card.ec-green.done,.su-card.ec-orange.done{border:2.5px solid var(--green);box-shadow:0 0 0 3px rgba(39,174,96,.3);}

/* ===== الموسوعة الثقافية ===== */
#screen-culture{background:linear-gradient(160deg,#fef3d7,#ffe8f0);}
.cu-hero{background:linear-gradient(120deg,#16a085,#0abf92);border-radius:18px;padding:16px;display:flex;gap:12px;align-items:center;margin-bottom:12px;box-shadow:0 6px 16px rgba(22,160,133,.4);}
.cu-hero>div:first-child{font-size:44px;background:rgba(255,255,255,.9);width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cu-hero b{color:#fff;font-size:20px;}
.cu-hero p{margin:4px 0 0;color:#e0f7f1;font-size:13px;line-height:1.6;}
.cu-tabs{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.cu-tab{display:flex;align-items:center;gap:8px;background:#fff;border:2px solid #e1e8f0;border-radius:14px;padding:8px 14px;cursor:pointer;font-weight:800;color:var(--muted);position:relative;}
.cu-tab.on{border-color:#16a085;background:#eafaf4;color:#00825f;box-shadow:0 4px 10px rgba(22,160,133,.2);}
.cu-tab.locked{opacity:.65;}
.cu-tab-flag{font-size:22px;}
.cu-tab-name{font-size:14px;}
.cu-soon-tag{position:absolute;top:-9px;left:-6px;background:var(--orange);color:#fff;font-size:9px;font-weight:900;border-radius:99px;padding:2px 8px;font-style:normal;}
.cu-soon{background:#fff;border:2px dashed #fdcb6e;border-radius:16px;padding:18px;text-align:center;font-size:16px;color:var(--muted);font-weight:800;line-height:1.8;}
.cu-section{margin-bottom:16px;}
.cu-sec-title{font-weight:900;font-size:17px;color:#2d3436;margin:0 0 10px;}
.cu-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.cu-item{background:#fff;border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:8px;box-shadow:0 4px 12px rgba(0,0,0,.07);}
.cu-emoji{font-size:40px;text-align:center;}
.cu-info{text-align:center;}
.cu-name{font-weight:900;font-size:16px;color:var(--primary);}
.cu-tag{font-size:12px;color:var(--muted);font-weight:700;}
.cu-desc{font-size:12.5px;color:#5b6b7c;line-height:1.7;margin:6px 0 0;text-align:center;}
.cu-btns{display:flex;gap:8px;margin-top:auto;}
.cu-btns .btn-primary{flex:1;padding:9px;font-size:13px;}
@media (max-width:380px){.cu-grid{grid-template-columns:1fr;}}

/* ===== Screen head ===== */
.screen-head{display:flex;align-items:center;gap:12px;margin:6px 2px 16px;}
.btn-back{width:44px;height:44px;border-radius:14px;border:none;background:#fff;font-size:20px;cursor:pointer;box-shadow:0 3px 8px rgba(0,0,0,.1);font-weight:700;}
.screen-title{font-size:22px;font-weight:900;margin:0;flex:1;}
.head-stars{font-weight:800;background:#fff;padding:6px 12px;border-radius:99px;box-shadow:0 3px 8px rgba(0,0,0,.08);}

/* ===== Levels map ===== */
.levels-map{display:flex;flex-direction:column;gap:14px;}
.level-card{display:flex;gap:14px;align-items:center;background:#fff;border-radius:20px;padding:16px;cursor:pointer;box-shadow:0 6px 14px rgba(0,0,0,.08);border:none;text-align:right;}
.level-card:active{transform:scale(.98);}
.level-card.locked{opacity:.6;filter:grayscale(.7);cursor:not-allowed;}
.level-card .lv-emoji{font-size:40px;background:var(--bg);border-radius:16px;width:64px;height:64px;display:flex;align-items:center;justify-content:center;flex:none;}
.level-card .lv-info{flex:1;}
.level-card .lv-title{font-weight:900;font-size:18px;}
.level-card .lv-desc{font-size:13px;color:var(--muted);margin-top:2px;}
.level-card .lv-progress{font-size:13px;font-weight:700;color:var(--green);}

/* ===== Letter grid ===== */
.letter-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.letter-tile{background:#fff;border-radius:16px;padding:10px 4px;text-align:center;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.08);border:none;}
.letter-tile .lt-char{font-size:30px;font-weight:900;display:block;}
.letter-tile .lt-word{font-size:12px;color:var(--muted);}
.letter-tile .lt-status{font-size:11px;font-weight:800;}
.letter-tile .lt-status.mastered{color:var(--green);}
.letter-tile .lt-status.learning{color:var(--orange);}
.letter-tile .lt-status.locked{color:var(--muted);}
.letter-tile.locked{opacity:.55;}
.letter-tile.mastered{border:2.5px solid var(--green);}
.letter-tile.learning{border:2.5px solid var(--yellow);}

/* ===== 3D World (Model3D) ===== */
.m3d-play .activity-head{margin-bottom:6px;}
.m3d-stage{width:100%;height:380px;max-width:520px;margin:10px auto 0;border-radius:20px;background:radial-gradient(circle at 50% 30%,#eaf4ff,#dbeafe);box-shadow:inset 0 0 0 3px #fff,0 10px 24px rgba(9,132,227,.18);overflow:hidden;position:relative;touch-action:none;}
.m3d-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:120px;animation:bob 1.6s ease-in-out infinite;}
.m3d-fallback::after{content:"";position:absolute;bottom:18%;left:50%;transform:translateX(-50%);width:70%;height:18px;border-radius:50%;background:rgba(0,0,0,.12);animation:bob 1.6s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ===== Activity screens ===== */
.activity{background:#fff;border-radius:var(--radius);padding:16px;box-shadow:0 6px 16px rgba(0,0,0,.08);}
.activity-head{text-align:center;margin-bottom:12px;}
.activity-head .ah-letter{font-size:64px;font-weight:900;color:var(--primary);line-height:1;}
.activity-head .ah-word{font-size:22px;font-weight:800;margin-top:2px;}
.activity-head .ah-sec{font-size:15px;color:var(--muted);}
.activity-tabs{display:flex;gap:8px;justify-content:center;margin:12px 0;}
.tab-btn{border:none;padding:10px 16px;border-radius:12px;font-size:14px;font-weight:800;cursor:pointer;background:#edf2f9;color:var(--muted);}
.tab-btn.active{background:var(--primary);color:#fff;}
.trace-wrap{position:relative;width:100%;max-width:420px;margin:0 auto;}
.trace-canvas{width:100%;height:auto;background:#fff;border-radius:18px;border:3px dashed #b6c7dd;touch-action:none;cursor:crosshair;display:block;}
.progress-wrap{display:flex;align-items:center;gap:10px;margin-top:10px;}
.progress-label{font-size:13px;font-weight:700;color:var(--muted);}
.progress-bar{flex:1;height:14px;background:#edf2f9;border-radius:99px;overflow:hidden;}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--yellow),var(--green));width:0;border-radius:99px;transition:width .2s;}
.action-row{display:flex;gap:10px;margin-top:12px;}
.action-row .btn-primary{flex:1;font-size:15px;padding:12px;}
.color-palette{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:12px 0;}
.swatch{width:36px;height:36px;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.2);cursor:pointer;}
.swatch.active{border-color:var(--ink);transform:scale(1.15);}

/* ===== Words level ===== */
.word-wrap{max-width:440px;margin:0 auto;}
.word-slots{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;min-height:64px;padding:10px;background:#edf2f9;border-radius:16px;margin-bottom:14px;}
.word-slot{width:52px;height:60px;border:2.5px dashed #aab8cc;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:900;background:#fff;}
.word-slot.filled{border-style:solid;border-color:var(--green);background:#e7fbf4;animation:pop .25s ease;}
@keyframes pop{0%{transform:scale(.5)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
.word-bank{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;min-height:70px;}
.tile{width:54px;height:60px;background:linear-gradient(160deg,#fff,#f3f8ff);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:900;box-shadow:0 5px 12px rgba(0,0,0,.15);cursor:grab;transition:transform .12s;}
.tile.dragging{opacity:.5;transform:scale(1.1);z-index:10;}
.tile.used{opacity:.15;pointer-events:none;}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-4px)}}
.shake{animation:shake .4s ease;border-color:var(--red)!important;}
.word-hint{text-align:center;margin:10px 0;font-size:16px;}
.word-hint .h-emoji{font-size:40px;display:block;margin-bottom:4px;}
.word-hint .h-sec{color:var(--muted);font-size:14px;}
.word-result{text-align:center;font-size:34px;font-weight:900;min-height:44px;margin:6px 0;color:var(--primary);}
.pick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px;}
.pick-card{background:#fff;border-radius:16px;padding:14px;text-align:center;border:none;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.08);}
.pick-card .pc-emoji{font-size:34px;display:block;}
.pick-card .pc-word{font-weight:800;margin-top:4px;font-size:16px;}
.pick-card .pc-sec{font-size:12px;color:var(--muted);}

/* المستوى الخامس: الأعداد والأرقام */
.num-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px;}
.num-card{background:#fff;border-radius:16px;padding:12px 4px;text-align:center;border:none;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.08);}
.num-card.done{border:2.5px solid var(--green);}
.num-card .nc-digit{font-size:28px;font-weight:900;display:block;color:#0984e3;}
.num-card .nc-emoji{font-size:34px;display:block;margin-top:2px;min-height:44px;line-height:44px;}
.num-card .nc-word{font-size:14px;font-weight:800;display:block;margin-top:4px;}
.num-card .nc-status{font-size:11px;font-weight:800;display:block;color:var(--green);}
.num-emoji-big{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;background:#fff;border-radius:18px;padding:18px 10px;margin:12px 0;box-shadow:0 4px 10px rgba(0,0,0,.08);min-height:80px;}
.num-emoji-big .nb-fallback{font-size:34px;}
.num-emoji-big .nb-img{width:52px;height:52px;object-fit:contain;border-radius:12px;}
.num-dialogue{background:#ffeaa7;border-radius:14px;padding:12px;font-size:15px;font-weight:700;text-align:center;line-height:1.6;color:#2d3436;margin-bottom:12px;}
.col-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px;}
.col-card{background:#fff;border-radius:16px;padding:12px 4px;text-align:center;border:none;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.08);}
.col-card.done{border:2.5px solid var(--green);}
.col-swatch{display:block;width:34px;height:34px;border-radius:50%;margin:0 auto;box-shadow:inset 0 -3px 6px rgba(0,0,0,.12);border:2px solid rgba(255,255,255,.7);}
.col-card .cc-emoji{font-size:28px;display:block;margin-top:4px;min-height:34px;line-height:34px;}
.col-card .cc-word{font-size:13px;font-weight:800;display:block;margin-top:4px;}
.col-card .cc-status{font-size:11px;font-weight:800;display:block;color:var(--green);}
.col-big{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#fff;border-radius:18px;padding:20px 10px;margin:12px 0;box-shadow:0 4px 10px rgba(0,0,0,.08);min-height:120px;}
.col-big-swatch{width:90px;height:90px;border-radius:50%;box-shadow:inset 0 -6px 14px rgba(0,0,0,.15);border:3px solid rgba(255,255,255,.8);}
.col-big-name{font-size:24px;font-weight:900;color:#2d3436;}
.action-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:10px;}
.action-row .btn-primary{flex:1;min-width:130px;padding:12px 8px;font-size:15px;margin:0;}

/* ركن تدريب النطق SUONO */
.su-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px;}
.su-card{background:#fff;border-radius:16px;padding:14px;text-align:center;border:none;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.08);}
.su-card.done{border:2.5px solid var(--green);}
.su-card .su-emoji{font-size:34px;display:block;}
.su-card .su-word{font-weight:800;margin-top:4px;font-size:16px;display:block;}
.su-card .su-status{font-size:11px;font-weight:800;display:block;color:var(--green);margin-top:2px;}
.su-card .su-sec{font-size:12px;color:var(--muted);display:block;margin-top:2px;}
.tm-clock-card{text-align:center;}
.tm-clock{font-size:44px;line-height:1;}
.tm-time{font-size:46px;font-weight:900;color:var(--primary);margin-top:4px;line-height:1;}
.tm-date{font-size:18px;font-weight:800;margin-top:6px;}
.tm-cat{margin-top:18px;}
.tm-cat-title{font-size:19px;font-weight:900;color:var(--primary);margin-bottom:4px;}
.tm-cat-title small{font-size:12px;color:var(--muted);font-weight:800;margin-inline-start:6px;}
.su-play .su-big{font-size:44px;font-weight:900;text-align:center;color:var(--primary);margin:10px 0;}
.su-actions{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;}
.su-mic{width:82px;height:82px;font-size:38px;margin:0;}
.su-back{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.su-back .btn-primary{flex:1;min-width:140px;margin:0;}

/* ===== الكاتب الناطق ===== */
.writer-input{width:100%;min-height:110px;font-size:26px;font-weight:800;padding:16px;border:3px solid var(--primary);border-radius:16px;background:#fff;color:var(--primary);font-family:inherit;box-sizing:border-box;text-align:right;line-height:1.7;}
.writer-input::placeholder{color:#9db4cc;font-weight:400;font-size:18px;}
.writer-actions{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:12px;}
.writer-mic{width:60px;height:60px;font-size:28px;margin:0;}
.writer-output{margin-top:14px;text-align:center;}
.writer-empty{color:var(--muted);font-size:15px;padding:18px;border:2px dashed #c4d3e4;border-radius:14px;background:#f7fafd;}
.writer-result{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;line-height:1.8;}
.writer-chip{font-size:26px;font-weight:900;color:#fff;background:var(--primary);border:none;border-radius:14px;padding:8px 14px;cursor:pointer;box-shadow:0 5px 12px rgba(9,132,227,.35);transition:.15s;position:relative;}
.writer-chip:active{transform:scale(.94);}
.writer-chip .writer-src{display:block;font-size:10px;font-weight:700;opacity:.85;margin-top:2px;}
.writer-keep{font-size:24px;font-weight:800;color:var(--muted);padding:8px 2px;}
.writer-meta{font-size:12px;color:var(--muted);margin-top:12px;}
.writer-samples{margin-top:20px;text-align:center;}
.writer-sample-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:8px;}
.writer-sample{font-size:18px;font-weight:800;color:#0a6bc0;background:#dff0ff;border:2px solid #b8d8f7;border-radius:99px;padding:8px 14px;cursor:pointer;transition:.15s;}
.writer-sample:active{transform:scale(.95);}

/* ===== Sentences ===== */
.sentence-type-tabs{display:flex;gap:8px;justify-content:center;margin-bottom:14px;}
.train-wrap{margin:10px 0;min-height:120px;}
.train{display:flex;align-items:flex-end;justify-content:center;gap:6px;flex-wrap:wrap;}
.train-wagon{background:#fff;border-radius:16px;padding:12px;text-align:center;box-shadow:0 5px 12px rgba(0,0,0,.12);cursor:pointer;min-width:90px;position:relative;transition:transform .12s;}
.train-wagon .w-wheel{display:flex;gap:6px;justify-content:center;margin-top:8px;}
.train-wagon .w-wheel i{width:12px;height:12px;background:var(--primary);border-radius:50%;display:inline-block;}
.train-wagon.slot{border:2.5px dashed #aab8cc;background:#f7fafd;cursor:pointer;}
.train-wagon.slot.filled{border-style:solid;border-color:var(--green);background:#e7fbf4;animation:pop .25s ease;}
.train-wagon .w-remove{position:absolute;top:-8px;left:-8px;background:var(--red);color:#fff;border-radius:50%;width:22px;height:22px;font-size:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.train-wagon .w-word{font-size:17px;font-weight:800;}
.train-wagon .w-type{font-size:11px;font-weight:700;border-radius:99px;padding:2px 8px;margin-top:4px;display:inline-block;}
.w-type.verb{background:#ffd9d0;color:#b33939;}
.w-type.noun{background:#d0e9ff;color:#0a6bc0;}
.w-type.other{background:#dff7ea;color:#00825f;}
.bank-words{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;min-height:70px;}
.sentence-text{text-align:center;font-size:28px;font-weight:900;margin:14px 0;line-height:1.8;color:var(--primary);}
.sentence-sec{text-align:center;color:var(--muted);font-size:15px;margin-bottom:8px;}
.sentence-gram{text-align:center;font-size:13px;color:var(--muted);margin-top:6px;}

/* ===== Reading level ===== */
.read-wrap{text-align:center;}
.read-sentence{font-size:32px;font-weight:900;line-height:2;margin:14px 0;background:#fff;border-radius:18px;padding:18px 10px;box-shadow:0 5px 12px rgba(0,0,0,.08);}
.read-words{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;}
.rw-word{font-size:26px;font-weight:800;padding:2px 8px;border-radius:10px;transition:.3s;}
.rw-word.good{color:var(--green);}
.rw-word.bad{color:var(--orange);}
.rw-word.current{background:#fde9c9;}
.mic-btn{width:96px;height:96px;border-radius:50%;background:var(--red);border:none;color:#fff;font-size:44px;cursor:pointer;box-shadow:0 8px 20px rgba(214,48,49,.4);margin:10px auto;display:flex;align-items:center;justify-content:center;transition:.15s;}
.mic-btn.listening{background:var(--green);animation:pulse 1s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,184,148,.5)}70%{box-shadow:0 0 0 24px rgba(0,184,148,0)}100%{box-shadow:0 0 0 0 rgba(0,184,148,0)}}
.read-hint{color:var(--muted);font-size:14px;margin:8px 0;}
.read-nav{display:flex;gap:10px;justify-content:center;margin-top:14px;}

/* ===== مُدرّب القراءة: التهجئة والسباق ===== */
.ph-display{background:#fff;border-radius:18px;padding:18px 10px;margin:12px 0;box-shadow:0 5px 12px rgba(0,0,0,.08);}
.ph-emoji{font-size:46px;line-height:1.2;}
.ph-word{font-size:40px;font-weight:900;color:var(--primary);}
.ph-chunks{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:14px 0;}
.ph-chip{min-width:64px;font-size:28px;font-weight:800;padding:14px 18px;border:3px solid #0984e3;background:#fff;color:#0984e3;border-radius:16px;cursor:pointer;transition:.15s;}
.ph-chip.current{background:#0984e3;color:#fff;transform:scale(1.12);box-shadow:0 6px 16px rgba(9,132,227,.4);}
.racer-card{background:linear-gradient(135deg,#fdf6e3,#fff);border:3px solid var(--orange);border-radius:22px;padding:26px 10px;margin:12px 0;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.1);}
.racer-emoji{font-size:54px;line-height:1.2;}
.racer-word{font-size:56px;font-weight:900;color:#d63031;letter-spacing:1px;}

/* ===== Parental dashboard ===== */
.pd-card{background:#fff;border-radius:18px;padding:16px;margin-bottom:14px;box-shadow:0 4px 12px rgba(0,0,0,.07);}
.pdb-card{background:#fff;border-radius:18px;padding:16px;margin-bottom:14px;box-shadow:0 4px 12px rgba(0,0,0,.07);}
.pdb-card .pdb-title{font-weight:900;font-size:17px;margin:0 0 10px;}
.pdb-top{display:flex;align-items:center;gap:12px;background:#fff;border-radius:18px;padding:16px;margin-bottom:14px;box-shadow:0 4px 12px rgba(0,0,0,.07);}
.pdb-avatar{font-size:44px;line-height:1;}
.pdb-name{font-size:20px;font-weight:900;color:var(--primary);}
.pdb-last{font-size:12px;color:var(--muted);margin-top:2px;}
.pdb-member{font-size:12px;font-weight:800;background:#ffeaa7;color:#6d4c00;border-radius:20px;padding:5px 12px;text-align:center;margin-bottom:10px;}
.pdb-live{font-size:12px;font-weight:800;padding:6px 10px;border-radius:20px;background:#f1f2f6;color:var(--muted);white-space:nowrap;}
.pdb-live.on{background:#d5f5e3;color:#1e8449;}
.pdb-refresh{text-align:center;padding:6px 0 16px;}
.pdb-refresh .hint{margin:8px 0 0;}
.fam-row{display:flex;align-items:center;gap:10px;background:#f7fafd;border-radius:12px;padding:10px;margin-bottom:8px;}
.fam-row small{display:block;color:var(--muted);font-size:11px;direction:ltr;text-align:right;}
.fam-emoji{font-size:28px;}
.btn-ghost.small{padding:4px 10px;font-size:14px;}
.btn-ghost.danger{border-color:#e17055;color:#e17055;background:none;}
.fam-roles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;}
.fam-role{background:#f7fafd;border:2px solid #e6edf5;border-radius:12px;padding:10px 6px;font-size:13px;font-weight:800;cursor:pointer;color:var(--primary);}
.fam-role.sel{border-color:var(--green);background:#d5f5e3;}
.pd-title{font-weight:900;font-size:17px;margin:0 0 10px;display:flex;align-items:center;gap:8px;}
.pd-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed #e6edf5;font-size:14px;}
.pd-row:last-child{border-bottom:none;}
.pd-row b{color:var(--primary);}
.pd-list{list-style:none;padding:0;margin:0;}
.pd-list li{padding:7px 0;border-bottom:1px dashed #e6edf5;font-size:14px;line-height:1.6;color:#2d3436;}
.pd-list li:last-child{border-bottom:none;}
.pd-list b{color:var(--primary);}
.pd-safety{background:linear-gradient(160deg,#eafaf4,#e3f6ef);border:2.5px solid #7bd8b5;box-shadow:0 6px 18px rgba(0,184,148,.18);}
.pd-safety .pd-title{color:#007a5e;}
.pd-safety .pd-list li{border-bottom-color:#c9ecdd;}
.pd-safety .pd-list b{color:#00825f;}
.pd-seal{margin-top:10px;background:#fff;border-radius:12px;padding:10px;text-align:center;font-size:13px;font-weight:800;color:#00825f;box-shadow:0 2px 8px rgba(0,184,148,.15);}
.pd-profile{display:flex;gap:14px;align-items:center;}
.pd-avatar{width:64px;height:64px;border-radius:18px;background:linear-gradient(160deg,#ffeaa7,#fdcb6e);display:flex;align-items:center;justify-content:center;font-size:38px;flex-shrink:0;box-shadow:0 4px 10px rgba(253,203,110,.4);}
.progress-track.low>div{background:linear-gradient(90deg,#ff7675,#e17055);}
.session-log{display:flex;flex-direction:column;gap:4px;}
.slog-row{display:flex;justify-content:space-between;align-items:center;background:#f7fafd;border-radius:10px;padding:8px 10px;font-size:13px;}
.slog-row span{color:var(--muted);}
.slog-row b{color:var(--primary);}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.stat-box{background:#f7fafd;border-radius:14px;padding:12px;text-align:center;}
.stat-box .sb-num{font-size:24px;font-weight:900;color:var(--primary);}
.stat-box .sb-label{font-size:12px;color:var(--muted);}
.progress-track{height:12px;background:#edf2f9;border-radius:99px;overflow:hidden;margin:6px 0;}
.progress-track>div{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--yellow),var(--green));}
.letter-matrix{display:flex;flex-wrap:wrap;gap:6px;}
.letter-matrix span{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:10px;font-weight:800;font-size:16px;background:#edf2f9;color:var(--muted);}
.letter-matrix span.mastered{background:#dff7ea;color:#00825f;}
.letter-matrix span.learning{background:#fde9c9;color:#b33939;}
.switch-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;}
.switch{position:relative;width:52px;height:30px;background:#d5dee8;border-radius:99px;cursor:pointer;transition:.2s;}
.switch.on{background:var(--green);}
.switch::after{content:"";position:absolute;top:3px;right:3px;width:24px;height:24px;background:#fff;border-radius:50%;transition:.2s;}
.switch.on::after{transform:translateX(-22px);}
.chart-bar{display:flex;align-items:flex-end;gap:4px;height:90px;}
.chart-bar>div{flex:1;background:linear-gradient(180deg,var(--primary),var(--green));border-radius:6px 6px 0 0;position:relative;min-height:2px;}
.chart-bar>div i{position:absolute;top:-20px;right:0;left:0;text-align:center;font-size:10px;font-style:normal;font-weight:700;}
.chart-labels{display:flex;gap:4px;margin-top:4px;}
.chart-labels span{flex:1;text-align:center;font-size:10px;color:var(--muted);}

/* ===== Live watch (child banner + parent controls) ===== */
#liveBanner{position:fixed;left:0;right:0;bottom:0;z-index:999;padding:12px;display:flex;justify-content:center;pointer-events:none;}
#liveBanner>*{pointer-events:auto;}
.live-banner{display:flex;align-items:center;gap:10px;width:100%;max-width:520px;background:#fff;border:2px solid var(--green);border-radius:18px;padding:12px 14px;box-shadow:0 8px 30px rgba(0,0,0,.22);}
.live-banner .lb-ico{font-size:26px;flex-shrink:0;}
.live-banner .lb-txt{flex:1;min-width:0;}
.live-banner .lb-txt b{display:block;font-size:14px;color:#2d3436;}
.live-banner .lb-txt small{display:block;font-size:11px;color:var(--muted);margin-top:2px;line-height:1.5;}
.live-banner .lb-btns{display:flex;gap:8px;flex-shrink:0;}
.lb-yes,.lb-no,.lb-stop{border:none;border-radius:12px;padding:10px 14px;font-size:13px;font-weight:900;cursor:pointer;color:#fff;}
.lb-yes{background:var(--green);}
.lb-no{background:#b2bec3;}
.live-banner.connecting{background:#fffdf0;border-color:#fdcb6e;}
.live-banner.live{border-color:#e17055;background:#fff5f3;}
.live-banner.live .lb-ico{animation:pulse 1.4s ease-in-out infinite;}
.lb-stop{background:#e17055;}
.live-banner .lb-txt b{color:var(--primary);}
.live-banner.live .lb-txt b{color:#b33939;}
.live-opt{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
.live-opt .btn-primary{font-size:13px;padding:10px 4px;}
@media(max-width:480px){.live-opt{grid-template-columns:1fr 1fr;}.live-opt .btn-primary:last-child{grid-column:1/3;}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ===== Sleep screen ===== */
#screen-sleep{display:none;background:linear-gradient(180deg,#0f2447 0%,#2d4a7c 60%,#31456b 100%);color:#fff;text-align:center;min-height:100vh;flex-direction:column;align-items:center;justify-content:center;padding:24px;}
#screen-sleep.active{display:flex;}
.sleep-scene{position:relative;width:200px;height:180px;margin:0 auto 16px;}
.sleep-moon{font-size:70px;position:absolute;top:0;right:0;animation:glow 3s ease-in-out infinite;}
@keyframes glow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.4)}}
.sleep-animal{font-size:80px;position:absolute;bottom:10px;right:40px;animation:sleepy 2.4s ease-in-out infinite;}
@keyframes sleepy{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px) rotate(3deg)}}
.sleep-cloud{position:absolute;font-size:40px;opacity:.5;animation:drift 9s linear infinite;}
.c1{top:30px;left:-20px;}
.c2{top:90px;left:120px;animation-delay:4s;}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-180px)}}
.sleep-title{font-size:28px;font-weight:900;margin:6px 0;}
.sleep-text{max-width:400px;line-height:1.8;color:#c6d6f0;margin:0 0 18px;}
.sleep-stats{display:flex;gap:10px;justify-content:center;margin-bottom:20px;flex-wrap:wrap;}
.sleep-stats .stat-chip{background:rgba(255,255,255,.12);color:#fff;}

/* ===== Modal & toast ===== */
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:100;align-items:center;justify-content:center;padding:20px;}
.modal.show{display:flex;}
.modal-box{background:#fff;border-radius:22px;padding:24px;max-width:360px;width:100%;text-align:center;animation:fadeIn .25s ease;}
.modal-box .m-emoji{font-size:54px;}
.modal-box h3{margin:8px 0;font-size:22px;}
.modal-box p{color:var(--muted);font-size:15px;line-height:1.7;}
.modal-box .btn-primary{margin-top:10px;}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--ink);color:#fff;padding:12px 22px;border-radius:99px;font-weight:700;z-index:200;transition:.3s;opacity:0;max-width:90%;text-align:center;font-size:14px;}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1;}

.session-chip{position:fixed;top:12px;left:12px;background:rgba(45,52,54,.82);color:#fff;padding:7px 14px;border-radius:99px;font-size:13px;font-weight:800;z-index:150;box-shadow:0 4px 12px rgba(0,0,0,.25);}
@media (max-width:380px){.session-chip{font-size:11px;padding:5px 10px;}}

/* ===== عالم الشخصيات ===== */
.char-picker{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:14px;}
.char-pick{width:38px;height:38px;border-radius:12px;border:2px solid #e1e8f0;background:#fff;font-size:18px;font-weight:900;cursor:pointer;transition:.12s;}
.char-pick.sel{background:var(--primary);color:#fff;border-color:var(--primary-dark);transform:scale(1.1);}
.char-cards{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:12px;}
.char-card{background:linear-gradient(160deg,#fff,#fff7e6);border:2.5px solid #f6c453;border-radius:18px;padding:14px 10px;min-width:104px;cursor:pointer;box-shadow:0 5px 12px rgba(0,0,0,.10);transition:.12s;text-align:center;position:relative;overflow:hidden;}
.char-card:active{transform:scale(.94);}
.char-card .cc-emoji{font-size:40px;display:block;margin-bottom:6px;}
.char-card .cc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:16px;z-index:2;}
.activity-head .ah-img{position:relative;display:inline-flex;align-items:center;justify-content:center;width:118px;height:118px;margin:0 auto 6px;border-radius:16px;overflow:hidden;background:#eef3fa;}
.activity-head .ah-img .ah-emoji{font-size:70px;line-height:1;}
.activity-head .ah-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.char-card .cc-name{font-weight:900;font-size:16px;display:block;}
.char-card .cc-sec{font-size:12px;color:var(--muted);display:block;margin-top:2px;}
.dialogue-box{background:#f1f2f6;border-radius:14px;padding:12px 14px;margin:6px 0 12px;font-size:16px;color:var(--ink);min-height:52px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.7;box-shadow:inset 0 2px 6px rgba(0,0,0,.05);}
.dialogue-box b{color:var(--primary);}

/* ===== لعبة القائد الآمر ===== */
.dg-intro{text-align:center;padding:20px 16px;}
.dg-lion{font-size:64px;line-height:1.2;transition:transform .15s;}
.dg-intro-text{color:#5b7fa3;line-height:2;font-size:15px;margin:10px 0 16px;}
.dg-head{display:flex;justify-content:space-between;align-items:center;padding:6px 4px 12px;}
.dg-score{font-weight:900;font-size:16px;color:var(--yellow-dark);}
.dg-mode{font-size:13px;color:#5b7fa3;display:flex;align-items:center;gap:6px;}
.dg-dot{width:10px;height:10px;border-radius:50%;background:var(--green);display:inline-block;animation:blink 1.2s infinite;}
.dg-dot.tap{background:#feca57;}
@keyframes blink{50%{opacity:.3;}}
.dg-stage{background:#fff;border-radius:20px;padding:22px 16px;text-align:center;box-shadow:0 8px 22px rgba(0,0,0,.08);}
.dg-bubble{background:#f1f2f6;border-radius:14px;padding:10px 14px;font-size:17px;min-height:44px;display:flex;align-items:center;justify-content:center;margin:10px 0;}
.dg-bubble b{color:var(--primary);font-size:20px;}
.dg-arrow{font-size:64px;line-height:1;margin:8px 0;transition:transform .15s;}
.dg-arrow.r{color:var(--green);}
.dg-arrow.l{color:var(--primary);}
.dg-meter{height:14px;border-radius:99px;background:#eef2f7;overflow:hidden;margin:14px auto 6px;max-width:300px;}
.dg-meter-fill{height:100%;width:0;border-radius:99px;background:var(--primary);transition:width .08s linear;}
.dg-meter-label{font-size:13px;color:#8aa0b8;}
.dg-tap-zone{display:flex;gap:12px;margin-top:16px;}
.dg-tap-btn{flex:1;padding:22px 0;border:none;border-radius:16px;font-size:20px;font-weight:900;color:#fff;cursor:pointer;}
.dg-tap-btn.left{background:var(--primary);}
.dg-tap-btn.right{background:var(--green);}
.dg-tap-btn:active{transform:scale(.95);}

/* ===== Celebration ===== */.confetti{position:fixed;top:-12px;width:10px;height:14px;z-index:300;pointer-events:none;animation:fall linear forwards;}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg);}}

/* ===== AR ===== */
#screen-ar{background:#0b1220;color:#fff;min-height:100vh;}
@keyframes arPulse{
  0%{transform:scale(1);box-shadow:0 0 0 0 rgba(116,185,255,.5);}
  50%{transform:scale(1.05);box-shadow:0 0 0 18px rgba(116,185,255,0);}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(116,185,255,0);}
}
.ar-help{font-size:14px;color:#9fb3d1;text-align:center;margin:10px 0;}

/* ===== AR (Oovoo): كاميرا حية + حيوان ===== */
.ar-body{display:flex;flex-direction:column;gap:10px;padding:0 14px 20px;}
.ar-stage{position:relative;width:100%;height:50vh;min-height:300px;background:#0b1220;border-radius:18px;overflow:hidden;}
.ar-stage canvas{width:100% !important;height:100% !important;display:block;border-radius:18px;}
.ar-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:10px;max-height:36vh;overflow-y:auto;padding:4px;}
.ar-chip{display:flex;flex-direction:column;align-items:center;gap:2px;background:#16233a;border:2px solid transparent;border-radius:14px;padding:10px 4px;color:#fff;cursor:pointer;}
.ar-chip .ar-chip-letter{font-size:22px;font-weight:800;line-height:1;}
.ar-chip .ar-chip-emoji{font-size:20px;line-height:1.1;}
.ar-chip .ar-chip-word{font-size:12px;color:#9fb3d1;}
.ar-chip.sel{border-color:#74b9ff;background:#1e3a5f;}
.ar-chip:active{transform:scale(.94);}
.ar-dialogue{position:absolute;left:10px;right:10px;bottom:12px;z-index:6;background:rgba(0,0,0,.74);border:2px solid #00b894;border-radius:18px;padding:12px;box-shadow:0 6px 20px rgba(0,0,0,.4);}
.ar-dialogue-text{font-size:15px;color:#ffeaa7;margin-bottom:10px;line-height:1.55;max-height:82px;overflow-y:auto;}
.ar-talk-btn{width:100%;background:#00b894;border:none;color:#fff;padding:12px;border-radius:14px;font-size:16px;font-weight:800;cursor:pointer;box-shadow:0 4px 15px rgba(0,184,148,.45);}
.ar-talk-btn.listening{background:#e17055;animation:arPulse 1.1s ease-in-out infinite;}
.ar-talk-btn:active{transform:scale(.97);}
.ar-actions{position:absolute;top:10px;left:10px;z-index:6;display:flex;flex-wrap:wrap;gap:8px;max-width:calc(100% - 20px);}
.ar-fx-btn{background:rgba(0,0,0,.55);border:2px solid rgba(255,255,255,.5);color:#fff;padding:8px 14px;border-radius:99px;font-size:14px;font-weight:800;cursor:pointer;backdrop-filter:blur(3px);}
.ar-fx-btn:active{transform:scale(.94);}
.ar-fx-btn.on{background:#feca57;color:#2d3436;border-color:#feca57;animation:arPulse 1.1s ease-in-out infinite;}
.ar-song-lg{background:rgba(124,58,237,.7);border-color:#a855f7;}

/* لوحة أغنية الألفباء في الكاميرا */
.ar-song-panel{position:absolute;left:8px;right:8px;bottom:8px;z-index:12;background:rgba(15,8,32,.92);border:2px solid #a855f7;border-radius:18px;padding:12px;max-height:74%;display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(0,0,0,.5);}
.ars-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
.ars-title{font-weight:900;font-size:14px;color:#f0abfc;}
.ars-close{background:rgba(255,255,255,.15);border:none;color:#fff;width:30px;height:30px;border-radius:50%;font-size:14px;cursor:pointer;}
.ars-close:active{transform:scale(.9);}
.ars-controls{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:8px;}
.ars-btn{background:rgba(255,255,255,.15);border:none;color:#fff;width:42px;height:42px;border-radius:50%;font-size:17px;cursor:pointer;}
.ars-play{background:linear-gradient(120deg,#7c3aed,#a855f7);border:none;color:#fff;padding:10px 22px;font-size:15px;font-weight:800;border-radius:30px;cursor:pointer;font-family:inherit;}
.ars-btn:active,.ars-play:active{transform:scale(.94);}
.ars-cur{text-align:center;font-size:13px;color:#ffeaa7;font-weight:800;min-height:18px;margin-bottom:8px;line-height:1.5;}
.ars-list{overflow-y:auto;display:flex;flex-direction:column;gap:5px;padding:2px;min-height:0;}
.ars-verse{display:flex;align-items:center;gap:9px;width:100%;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.15);border-radius:11px;padding:8px 10px;cursor:pointer;text-align:right;font-family:inherit;color:#fff;}
.ars-verse:active{transform:scale(.98);}
.ars-verse b{background:#a855f7;color:#fff;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
.ars-verse span{flex:1;font-weight:700;font-size:13px;line-height:1.5;}
.ars-verse em{font-style:normal;font-size:14px;flex-shrink:0;}
.ars-verse.on{background:#a855f7;border-color:#f0abfc;box-shadow:0 0 0 3px rgba(168,85,247,.35);}
.ars-empty{color:#ffd6a5;text-align:center;padding:14px;font-weight:700;}

/* ===== أغنية الألفباء في الكاميرا (Karaoke AR) ===== */
#screen-arsong{background:#1a1029;color:#fff;}
.arsg-body{position:relative;height:calc(100vh - 62px);overflow:hidden;}
.arsg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.arsg-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;background:linear-gradient(rgba(20,10,40,.35),rgba(20,10,40,.8));padding:8px 10px 12px;}
.arsg-status{font-size:14px;font-weight:800;color:#ffeaa7;text-align:center;line-height:1.5;min-height:20px;margin-bottom:6px;text-shadow:0 1px 4px rgba(0,0,0,.5);}
.arsg-carousel{flex:1;width:100%;max-width:520px;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:6px 2px;overflow:hidden;}
.arsg-slot{display:flex;align-items:center;gap:12px;border-radius:16px;padding:12px 14px;cursor:pointer;color:#fff;transition:transform .25s,opacity .25s,background .25s;}
.arsg-slot b{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;}
.arsg-slot span{flex:1;font-weight:800;line-height:1.6;text-shadow:0 1px 3px rgba(0,0,0,.6);}
.arsg-slot.prev,.arsg-slot.next{opacity:.45;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.16);font-size:14px;transform:scale(.94);}
.arsg-slot.prev b,.arsg-slot.next b{background:rgba(168,85,247,.5);font-size:14px;}
.arsg-slot.cur{background:#a855f7;border:2px solid #f0abfc;box-shadow:0 0 0 4px rgba(168,85,247,.35),0 8px 22px rgba(0,0,0,.45);font-size:17px;transform:scale(1);}
.arsg-slot.cur b{background:#f0abfc;color:#4c1d95;}
.arsg-slot.speaking{animation:arsgPulse 1s ease-in-out infinite;}
@keyframes arsgPulse{0%,100%{box-shadow:0 0 0 4px rgba(168,85,247,.35),0 8px 22px rgba(0,0,0,.45);}50%{box-shadow:0 0 0 10px rgba(240,171,252,.7),0 8px 22px rgba(0,0,0,.45);}}
.arsg-controls{display:flex;gap:10px;margin-top:10px;}
.arsg-btn{background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.5);color:#fff;padding:9px 16px;font-size:14px;font-weight:800;border-radius:30px;cursor:pointer;font-family:inherit;backdrop-filter:blur(3px);}
.arsg-btn:active{transform:scale(.95);}
.arsg-hint{font-size:12px;color:#cdb6ff;font-weight:700;margin-top:8px;text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.5);}

/* ===== حرّك الحروف بيدك (كاميرا بدون فلتر) ===== */
#screen-handgame{background:#0b1e18;color:#fff;}
.hg-body{position:relative;height:calc(100vh - 62px);overflow:hidden;}
.hg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);}
.hg-ui{position:absolute;inset:0;display:flex;flex-direction:column;background:linear-gradient(rgba(0,60,50,.25),rgba(0,40,35,.55));}
.hg-top{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px;}
.hg-status{font-size:13px;font-weight:800;color:#d5fff3;text-align:center;line-height:1.5;min-height:18px;text-shadow:0 1px 4px rgba(0,0,0,.6);}
.hg-controls{display:flex;gap:10px;}
.hg-btn{background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.5);color:#fff;padding:8px 16px;font-size:14px;font-weight:800;border-radius:30px;cursor:pointer;font-family:inherit;backdrop-filter:blur(3px);}
.hg-btn:active{transform:scale(.95);}
#hgArea{flex:1;position:relative;overflow:hidden;}
.hg-cursor{position:absolute;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.25);border:3px solid #ffeaa7;display:none;align-items:center;justify-content:center;font-size:28px;pointer-events:none;z-index:30;box-shadow:0 0 0 8px rgba(255,234,167,.25),0 4px 16px rgba(0,0,0,.4);transform:translate(-50%,-50%);}
.hg-tile{position:absolute;width:56px;height:56px;background:rgba(255,255,255,.92);border:3px solid #00cec9;border-radius:16px;display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:none;user-select:none;box-shadow:0 4px 12px rgba(0,0,0,.35);z-index:10;transition:transform .15s;}
.hg-tile b{font-size:26px;color:#0b3d35;font-weight:900;}
.hg-tile.held{background:#ffeaa7;border-color:#f39c12;transform:scale(1.18);z-index:20;box-shadow:0 0 0 5px rgba(243,156,18,.4),0 8px 20px rgba(0,0,0,.5);}
.hg-lyric{position:absolute;width:300px;min-height:54px;background:rgba(20,10,40,.85);border:2px solid #a855f7;border-radius:16px;padding:10px 12px;display:flex;align-items:center;gap:10px;cursor:grab;touch-action:none;user-select:none;z-index:15;box-shadow:0 6px 18px rgba(0,0,0,.45);}
.hg-lyric b{background:#a855f7;color:#fff;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.hg-lyric span{flex:1;font-weight:800;font-size:14px;line-height:1.55;}
.hg-lyric.held{background:#a855f7;border-color:#f0abfc;transform:scale(1.05);}
.hg-hint{font-size:12px;color:#d5fff3;font-weight:700;text-align:center;padding:8px;text-shadow:0 1px 3px rgba(0,0,0,.6);}

/* ===== المستوى السابع: أشكال الحروف ===== */
#screen-level7{background:linear-gradient(160deg,#e8f4ff,#fff0f6);}
.sh-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px;}
.sh-card{background:#fff;border-radius:16px;padding:12px 4px;text-align:center;border:none;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.08);}
.sh-card.done{border:2.5px solid var(--green);}
.sh-iso{display:block;font-size:34px;font-weight:900;color:var(--primary);line-height:1.1;}
.sh-name{font-size:13px;font-weight:800;display:block;margin-top:4px;}
.sh-forms{display:block;margin-top:4px;min-height:24px;}
.sh-forms i{font-style:normal;font-size:15px;font-weight:800;color:#6c5ce7;margin:0 2px;}
.sh-big{display:flex;flex-direction:column;gap:10px;margin:12px 0;}
.sh-pos{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border-radius:16px;padding:14px;box-shadow:0 4px 10px rgba(0,0,0,.08);border-right:6px solid var(--primary);}
.sh-pos-glyph{font-size:36px;font-weight:900;color:var(--primary);min-width:70px;text-align:center;}
.sh-pos-label{font-size:15px;font-weight:800;color:#2d3436;}
.quiz-opts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:12px 0;}
.quiz-2x2{display:grid;grid-template-columns:1fr 1fr;}
.q-opt{background:#fff;border-radius:16px;padding:12px 6px;text-align:center;border:2px solid #eee;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.08);}
.q-opt:active{transform:scale(.96);}
.q-opt.ok{border-color:var(--green);background:#eaffe8;}
.q-glyph{display:block;font-size:38px;font-weight:900;color:var(--primary);}
.q-name{font-size:13px;font-weight:800;display:block;margin-top:4px;}
.q-sym{display:block;font-size:40px;font-weight:900;color:var(--primary);line-height:1.2;}
.quiz-big{display:flex;justify-content:center;align-items:center;background:#fff;border-radius:18px;padding:18px;margin:12px 0;box-shadow:0 4px 10px rgba(0,0,0,.08);}
.q-big-glyph{font-size:64px;font-weight:900;color:var(--primary);}
.quiz-question{font-size:18px;font-weight:800;color:#2d3436;text-align:center;margin-top:6px;}

/* ===== المستوى الثامن: الحروف بالتشكيل ===== */
#screen-level8{background:linear-gradient(160deg,#fdf3e3,#ffe8f0);}
.ha-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px;}
.ha-card{background:#fff;border-radius:16px;padding:12px 4px;text-align:center;border:none;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.08);}
.ha-card.done{border:2.5px solid var(--green);}
.ha-card.legend{background:linear-gradient(135deg,#ffeaa7,#fdcb6e);}
.ha-glyph{display:block;font-size:32px;font-weight:900;color:var(--orange);line-height:1.2;min-height:38px;}
.ha-name{font-size:13px;font-weight:800;display:block;margin-top:4px;}
.ha-latin{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-top:2px;letter-spacing:.5px;}
.ha-big{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:12px 0;}
.ha-pos{background:#fff;border-radius:16px;padding:14px;text-align:center;box-shadow:0 4px 10px rgba(0,0,0,.08);border:none;cursor:pointer;border-bottom:4px solid var(--green);}
.ha-pos.sukun{border-bottom:4px solid var(--muted);}
.ha-pos-glyph{display:block;font-size:38px;font-weight:900;color:var(--primary);line-height:1.2;}
.ha-pos-name{font-size:14px;font-weight:800;display:block;margin-top:4px;}
.ha-pos-latin{display:block;font-size:13px;font-weight:800;color:var(--orange);margin-top:2px;letter-spacing:.5px;}
.ha-pos-hint{font-size:11px;color:var(--muted);display:block;margin-top:4px;line-height:1.5;}
.ha-card .cc-status{font-size:11px;font-weight:800;display:block;color:var(--green);}

@media (max-width:380px){
  .letter-grid{grid-template-columns:repeat(4,1fr);}
  .num-grid{grid-template-columns:repeat(2,1fr);}
  .col-grid{grid-template-columns:repeat(2,1fr);}
  .sh-grid{grid-template-columns:repeat(2,1fr);}
  .ha-grid{grid-template-columns:repeat(2,1fr);}
  .su-grid{grid-template-columns:repeat(2,1fr);}
  .menu-grid{grid-template-columns:1fr 1fr;}
  .read-sentence{font-size:26px;}
}