*{box-sizing:border-box}body{margin:0;font-family:Tahoma,Arial,sans-serif;color:#17212b;background:#eef1e9;min-height:100vh}.cosmos{position:fixed;inset:0;z-index:-2;background:radial-gradient(circle at 15% 12%,rgba(255,221,132,.9),transparent 18%),radial-gradient(circle at 82% 25%,rgba(171,210,221,.72),transparent 25%),linear-gradient(145deg,#f7efe0,#dbe8e7 45%,#efe0bd 78%,#d8c9a8)}.cosmos:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(120deg,transparent 0 70px,rgba(255,255,255,.22) 72px 74px);opacity:.45}header{display:flex;justify-content:space-between;align-items:center;padding:15px 5%;background:rgba(255,255,255,.9);border-bottom:1px solid #c8c1a8;position:sticky;top:0;z-index:5}.hud{display:flex;gap:14px}.hud span{background:#fff;padding:8px 13px;border-radius:20px;border:1px solid #d1b36a}.progress{height:6px;background:#e2ddd0}.progress i{display:block;height:100%;background:linear-gradient(90deg,#d4a934,#f0cc68);transition:.35s}main{width:min(1160px,94%);margin:25px auto 100px}.page{display:none;background:rgba(255,255,255,.95);border:1px solid #d8d1bf;border-radius:24px;padding:28px;box-shadow:0 15px 45px rgba(60,54,42,.14)}.page.active{display:block;animation:in .35s ease}@keyframes in{from{opacity:.2;transform:translateY(8px)}}h1{font-size:44px;margin:12px}h2{font-size:30px;margin:5px 0 14px}.hero{text-align:center;max-width:850px;margin:auto;font-size:21px;line-height:1.9}.tag{display:inline-block;background:#304d57;color:#fff1b8;border-radius:20px;padding:7px 14px;font-weight:bold}.warning{background:#fff7df;border-right:5px solid #d3a633;padding:13px;border-radius:12px;margin:20px}.instruction{font-size:20px;line-height:1.7}.primary,nav button,.choice,.card{border:0;border-radius:14px;padding:12px 18px;font-size:18px;font-weight:bold;cursor:pointer}.primary{background:#304d57;color:#fff}.mapwrap{position:relative;max-width:960px;margin:auto}.mapwrap img{width:100%;display:block;border-radius:15px}.node{position:absolute;width:50px;height:50px;border-radius:50%;border:3px solid #fff;background:#d3a633;color:white;font-size:20px;font-weight:bold;box-shadow:0 0 0 5px rgba(211,166,51,.25),0 0 24px #e5b83f}.activeNode{animation:pulse 1.1s infinite}@keyframes pulse{50%{transform:scale(1.18);box-shadow:0 0 0 11px rgba(211,166,51,.12),0 0 38px #e5b83f}}.a1{right:19%;top:20%}.a2{right:20%;bottom:20%}.a3{left:20%;top:31%}.b1{right:18%;top:33%}.b2{left:23%;top:18%}.b3{left:22%;bottom:22%}.explain{margin:18px auto 0;max-width:940px;background:#fff9e9;border:1px solid #dbc77e;padding:16px;border-radius:14px;font-size:20px;line-height:1.9}.lessons{display:grid;gap:10px}.lessons div{background:linear-gradient(90deg,#fff9e8,#fff);border-right:5px solid #d3a633;padding:13px 17px;border-radius:12px;font-size:19px;animation:lesson 3s ease-in-out infinite alternate}.lessons .red{color:#b12626;border-right-color:#b12626;font-weight:bold}@keyframes lesson{to{transform:translateX(-4px)}}.cards,.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}.card,.choice{background:#fff;color:#21333a;border:2px solid #c9d3d0;line-height:1.6}.track{display:flex;gap:8px;flex-wrap:wrap;background:#fff8df;border:2px dashed #c9a644;padding:15px;margin-top:14px;border-radius:15px;min-height:70px}.track .card{font-size:16px;padding:8px}.qbox{background:#f7faf8;border:1px solid #ced9d4;border-radius:16px;padding:15px;margin:11px 0}.qbox h3{font-size:20px;line-height:1.65}.good{background:#e7f5e9!important;border-color:#459354!important}.bad{animation:shake .25s;background:#fff0ee!important}@keyframes shake{50%{transform:translateX(8px)}}.fillrow{background:#f7faf8;border-radius:14px;padding:14px;margin:10px 0;font-size:20px;line-height:2}.blank{display:inline-block;min-width:120px;border-bottom:3px dashed #b08a27;text-align:center;color:#8d6a15}.special{background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(244,238,218,.97))}.gate{border:2px solid #9fada8;border-radius:18px;padding:16px;margin:13px 0}.gate.open{border-color:#c89a22;background:#fff8df}.core{text-align:center;margin:22px auto;padding:20px;border-radius:50px;max-width:520px;background:#304d57;color:#fff2bd;font-size:27px;font-weight:bold;opacity:.22;transition:.5s}.core.on{opacity:1;box-shadow:0 0 35px rgba(213,170,48,.55)}.meter{position:relative;margin:18px auto 25px;max-width:700px;height:90px;border-radius:45px;background:linear-gradient(90deg,#b65c4c,#f3d37b,#77a67b);display:flex;align-items:flex-end;justify-content:space-between;padding:12px 24px;font-weight:bold}.meter b{position:absolute;left:50%;top:10px;transform:translateX(-50%)}#needle{position:absolute;width:5px;height:48px;background:#27353a;left:50%;bottom:24px;transform-origin:bottom;transition:.5s;border-radius:4px}nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-between;padding:12px 5%;background:rgba(255,255,255,.95);border-top:1px solid #c9c4b5;z-index:6}nav button{background:#304d57;color:#fff;min-width:120px}nav button:disabled{opacity:.35}#toast{position:fixed;bottom:78px;left:50%;transform:translateX(-50%);background:#304d57;color:#fff;padding:10px 18px;border-radius:20px;opacity:0;transition:.25s;z-index:9}#toast.show{opacity:1}.finalScore{font-size:28px;margin:20px}@media(max-width:650px){.page{padding:16px}h1{font-size:34px}h2{font-size:25px}.instruction,.explain{font-size:18px}.node{width:38px;height:38px}.cards,.choices{grid-template-columns:1fr}}

/* ===== المراجعة الأخيرة للهاتف: التمرير في الخريطة ===== */
html,body{
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch;
}
.page.active{
  overflow:visible!important;
  touch-action:pan-y!important;
}
#p2{
  overflow:visible!important;
  touch-action:pan-y!important;
  padding-bottom:26px!important;
}
#p2 .mapwrap{
  margin-bottom:12px!important;
}
#p2 .explain{
  max-height:none!important;
  overflow:visible!important;
}
main{
  padding-bottom:105px!important;
}

/* ===== غرفة القرار: إبقاء الميزان ظاهرًا مع أول قرار ودليل ===== */
@media(max-width:650px){
  #p11{
    padding:14px 11px 24px!important;
  }
  #p11 h2{
    font-size:clamp(20px,5.7vw,25px)!important;
    line-height:1.35!important;
    margin:7px 0 6px!important;
  }
  #p11 > .instruction{
    font-size:clamp(13px,3.7vw,16px)!important;
    line-height:1.5!important;
    margin:6px 0 8px!important;
  }

  /* الميزان يبقى أمام الطفل أثناء الإجابة */
  #p11 .meter{
    position:sticky!important;
    top:82px!important;
    z-index:4!important;
    height:64px!important;
    margin:7px auto 10px!important;
    padding:7px 15px!important;
    border-radius:32px!important;
    font-size:clamp(10px,3vw,13px)!important;
    box-shadow:0 5px 16px rgba(0,0,0,.12)!important;
  }
  #p11 .meter b{
    top:5px!important;
    font-size:clamp(11px,3.2vw,14px)!important;
  }
  #p11 #needle{
    height:35px!important;
    bottom:15px!important;
    width:4px!important;
  }

  #p11 .gate{
    padding:10px 9px!important;
    margin:8px 0!important;
    border-radius:14px!important;
  }
  #p11 .gate h3{
    font-size:clamp(14px,4vw,17px)!important;
    margin:4px 0 5px!important;
  }
  #p11 .gate p{
    font-size:clamp(12px,3.5vw,15px)!important;
    line-height:1.45!important;
    margin:5px 0 7px!important;
  }
  #p11 .gate .choices{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
  }
  #p11 .gate .choice{
    font-size:clamp(10px,2.9vw,12px)!important;
    line-height:1.3!important;
    padding:7px 5px!important;
    min-width:0!important;
  }
  #p11 .proof p{
    margin-top:7px!important;
  }
  #p11 .core{
    font-size:clamp(16px,4.5vw,20px)!important;
    padding:12px!important;
    margin:10px auto!important;
  }
}