/* تحدّي المعرفة — ألوان مرحة للأطفال */
:root{
  --blue:#2563eb; --blue-d:#1e40af; --sky:#e0f2fe; --orange:#ff8a3d; --orange-d:#e86a17;
  --green:#22b573; --green-l:#dcfce7; --red:#ef4444; --red-l:#fee2e2; --yellow:#fbbf24;
  --ink:#1e293b; --muted:#64748b; --line:#e2e8f0; --bg:#f0f7ff; --card:#fff;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Baloo Bhaijaan 2','Tajawal',Tahoma,Arial,sans-serif;background:var(--bg);color:var(--ink);direction:rtl}
a{text-decoration:none;color:inherit}
h1,h2,p{margin:0}
.wrap{max-width:1100px;margin:0 auto;padding:0 18px}

/* الشريط العلوي */
.top{background:#fff;box-shadow:0 2px 12px rgba(37,99,235,.08);position:sticky;top:0;z-index:20}
.top .wrap{display:flex;align-items:center;gap:16px;min-height:70px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:48px;height:48px;border-radius:16px;background:linear-gradient(135deg,var(--yellow),var(--orange));display:grid;place-items:center;font-size:26px;box-shadow:0 4px 0 var(--orange-d)}
.brand b{display:block;font-size:22px;color:var(--blue-d);line-height:1.1}
.brand small{color:var(--orange-d);font-weight:700;font-size:13px}
.nav{display:flex;gap:4px;flex:1;justify-content:center;flex-wrap:wrap}
.nav a{padding:6px 14px;border-radius:999px;font-weight:700;color:var(--blue-d)}
.nav a:hover,.nav a.on{background:var(--sky)}
.stars-total{background:#fff7e0;border:2px solid var(--yellow);border-radius:999px;padding:4px 14px;font-weight:800;font-size:18px}

/* عام */
.view{display:none;padding:26px 0 50px}
.view.on{display:block}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:16px;padding:10px 22px;font:inherit;font-weight:800;font-size:17px;cursor:pointer;color:#fff;background:var(--blue);box-shadow:0 4px 0 var(--blue-d);transition:transform .08s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--blue-d)}
.btn.big{font-size:20px;padding:14px 28px}
.btn.sm{font-size:14px;padding:6px 14px;box-shadow:none}
.btn.orange{background:var(--orange);box-shadow:0 4px 0 var(--orange-d)}
.btn.green{background:var(--green);box-shadow:0 4px 0 #15803d}
.btn.ghost{background:#fff;color:var(--blue-d);box-shadow:0 4px 0 var(--line);border:2px solid var(--line)}
.page-title{font-size:32px;color:var(--blue-d)}
.lead{color:var(--muted);font-size:18px;margin:6px 0 22px}
.sec-title{font-size:24px;color:var(--blue-d);margin:30px 0 14px}

/* البطل */
.hero{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;align-items:center;background:linear-gradient(135deg,var(--blue),#4f8bff);color:#fff;border-radius:28px;padding:34px;overflow:hidden;position:relative}
.hero h1{font-size:38px}
.hero p{font-size:20px;opacity:.95;margin:10px 0 20px}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.hero-art{position:relative;height:200px}
.bubble{position:absolute;width:78px;height:78px;border-radius:24px;background:rgba(255,255,255,.95);color:var(--blue-d);display:grid;place-items:center;font-size:30px;font-weight:800;box-shadow:0 6px 0 rgba(0,0,0,.08);animation:float 4s ease-in-out infinite}
.b1{top:0;right:10%}.b2{top:30%;left:6%;animation-delay:.6s}.b3{bottom:0;right:28%;animation-delay:1.2s}.b4{top:8%;left:40%;animation-delay:1.8s}.b5{bottom:12%;left:28%;animation-delay:.3s;color:var(--orange)}
@keyframes float{50%{transform:translateY(-10px) rotate(-4deg)}}
@media(prefers-reduced-motion:reduce){.bubble{animation:none}}

/* البطاقات */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:22px 14px;border-radius:24px;background:#fff;border:3px solid var(--line);cursor:pointer;transition:transform .15s}
.tile:hover{transform:translateY(-4px)}
.tile .ic{font-size:44px}
.tile b{font-size:21px}
.tile small{color:var(--muted);font-size:15px}
.tile.blue{border-color:#bfdbfe;background:#eff6ff}.tile.green{border-color:#bbf7d0;background:#f0fdf4}
.tile.orange{border-color:#fed7aa;background:#fff7ed}.tile.gray{opacity:.6;cursor:default}
.tile .best{font-size:14px;color:var(--orange-d);font-weight:800}
.note-box{margin-top:24px;background:#fff;border:2px dashed #bfdbfe;border-radius:20px;padding:16px 20px;font-size:17px}

/* المستويات */
.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.level{background:#fff;border:3px solid #bfdbfe;border-radius:24px;padding:20px;text-align:center;cursor:pointer;transition:transform .15s;font:inherit;color:inherit}
.level:hover{transform:translateY(-4px)}
.level b{display:block;font-size:24px;color:var(--blue-d)}
.level small{color:var(--muted);font-size:15px}
.level .best{display:block;color:var(--orange-d);font-weight:800;margin-top:6px}

/* اللعب */
.play{background:#fff;border-radius:28px;padding:22px;box-shadow:0 10px 30px rgba(37,99,235,.08);max-width:820px;margin:0 auto}
.play-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.play-title{font-weight:800;color:var(--blue-d);font-size:18px}
.play-score{font-weight:800;font-size:20px}
.progress,.timer{height:12px;background:var(--line);border-radius:999px;overflow:hidden;margin-top:14px}
.progress div{height:100%;background:var(--green);width:0;transition:width .3s}
.timer{height:8px}
.timer div{height:100%;background:var(--orange);width:100%}
.q-num{color:var(--muted);font-weight:700;margin-top:18px}
.q-text{font-size:30px;font-weight:800;text-align:center;margin:12px 0 22px;line-height:1.5;min-height:60px}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.choice{font:inherit;font-size:22px;font-weight:800;padding:16px;border-radius:20px;border:3px solid #bfdbfe;background:#eff6ff;color:var(--blue-d);cursor:pointer;transition:transform .1s}
.choice:hover:not(:disabled){transform:scale(1.02)}
.choice.ok{background:var(--green-l);border-color:var(--green);color:#166534}
.choice.bad{background:var(--red-l);border-color:var(--red);color:#991b1b}
.choice:disabled{cursor:default}
.feedback{text-align:center;font-size:22px;font-weight:800;min-height:36px;margin-top:14px}
.feedback.ok{color:var(--green)}.feedback.bad{color:var(--red)}
.play-actions{display:flex;justify-content:center;gap:12px;margin-top:10px}
#revealBtn{display:none}

/* وضع القسم: خط أكبر وبدون تصحيح تلقائي */
body.class-mode .q-text{font-size:52px}
body.class-mode .choice{font-size:32px;padding:22px}
body.class-mode #revealBtn{display:inline-flex}
body.class-mode .play{max-width:1050px}

/* النتيجة */
.result{background:#fff;border-radius:28px;padding:40px 20px;text-align:center;max-width:680px;margin:0 auto}
.result-stars{font-size:64px;letter-spacing:6px}
.result h1{color:var(--blue-d);font-size:34px;margin:10px 0}
.result p{font-size:20px;color:var(--muted);margin-bottom:22px}

/* احتفال */
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:50}
.confetti i{position:absolute;top:-20px;width:10px;height:16px;border-radius:3px;animation:fall 1.8s linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(540deg)}}

.foot{text-align:center;color:var(--muted);padding:20px;font-size:15px}

@media(max-width:900px){
  .cards{grid-template-columns:1fr 1fr}
  .hero{grid-template-columns:1fr}
  .hero-art{display:none}
  .levels{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .nav{order:5;flex-basis:100%}
  .hero{padding:24px 18px}.hero h1{font-size:30px}
  .choices{grid-template-columns:1fr}
  .q-text{font-size:24px}
  body.class-mode .q-text{font-size:34px}
  .page-title{font-size:26px}
}