*{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}}
body{background:#f2eadc}.cosmos{background:radial-gradient(circle at 12% 14%,rgba(255,208,92,.52),transparent 19%),radial-gradient(circle at 82% 18%,rgba(94,171,199,.34),transparent 25%),linear-gradient(155deg,#f7ead1,#e8f0e8 46%,#f4dfb7 76%,#d9c8a4)}.cosmos:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 100%,rgba(93,69,39,.18),transparent 50%)}header,.page,nav{backdrop-filter:blur(7px)}.tag,nav button,.primary{background:#17627a}.mapwrap{max-width:1040px}.mapwrap img{object-fit:contain;max-height:68vh;background:#fff}.a1{right:15%;top:24%}.a2{left:21%;top:21%}.a3{left:22%;bottom:18%}.b1{right:17%;top:24%}.b2{left:21%;top:20%}.b3{left:20%;bottom:19%}.beacon{height:190px;max-width:560px;margin:20px auto;border-radius:26px;background:linear-gradient(#edf8fa,#fff5d5);border:2px solid #d1a93b;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:22px}.beacon:before{content:"✦";font-size:48px;z-index:2}.beacon #beam{position:absolute;bottom:0;left:0;right:0;height:0;background:linear-gradient(0deg,rgba(255,184,42,.65),rgba(255,239,161,.25));transition:.55s}.beacon b,.beacon span{z-index:2}.special{background:linear-gradient(145deg,rgba(255,251,239,.97),rgba(229,242,240,.97))}


/* التصحيح النهائي لمواضع الدوائر الذهبية في الخريطة الأولى */
.mapwrap .a2{
  left:20%!important;
  top:31%!important;
  right:auto!important;
  bottom:auto!important;
}
.mapwrap .a3{
  left:20%!important;
  bottom:14%!important;
  right:auto!important;
  top:auto!important;
}
@media(max-width:650px){
  .mapwrap .a2{
    left:22%!important;
    top:31%!important;
    right:auto!important;
    bottom:auto!important;
  }
  .mapwrap .a3{
    left:22%!important;
    bottom:12%!important;
    right:auto!important;
    top:auto!important;
  }
}
