/* ===== الصفحة الرئيسية + صفحة الأوفلاين ===== */
:root{--frost:#9fc4d8;--frost-d:#16303f;--parch:#e8dcc0;--hero-h:min(94vh,860px)}
html[lang=ar] .hx{font-family:'El Messiri','Plex Arabic',serif;font-weight:700}
html[lang=en] .hx{font-family:'Cinzel',serif}

/* ---------- الغلاف: الخريطة نفسها ---------- */
.hero2{position:relative;height:var(--hero-h);min-height:560px;overflow:hidden;border-bottom:1px solid var(--line)}
.hero2 .warmap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max(100%,calc(var(--hero-h)*1.992));aspect-ratio:2560/1285;direction:ltr}
.hero2 .warmap img{position:absolute;inset:0;width:100%;height:100%;display:block;filter:saturate(1.05) brightness(.92)}
.hero2::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to left,rgba(8,11,16,.96) 0,rgba(8,11,16,.78) 34%,rgba(8,11,16,.12) 78%,rgba(8,11,16,.25) 100%),linear-gradient(to top,var(--ink) 0,transparent 26%)}
html[dir=ltr] .hero2::after{background:linear-gradient(to right,rgba(8,11,16,.96) 0,rgba(8,11,16,.78) 34%,rgba(8,11,16,.12) 78%,rgba(8,11,16,.25) 100%),linear-gradient(to top,var(--ink) 0,transparent 26%)}
.pin{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--c);border:2px solid #eef5fc;box-shadow:0 0 12px var(--c),0 0 28px var(--c);opacity:0;animation:pinon .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*.16s + .5s)}
.pin::after{content:'';position:absolute;inset:-7px;border-radius:50%;border:1.5px solid var(--c);animation:ring 2.8s ease-out infinite;animation-delay:calc(var(--i)*.16s + 1.4s)}
.pin.cs{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-width:1px;box-shadow:0 0 6px var(--c)}
.pin.cs::after{display:none}
@keyframes pinon{0%{opacity:0;transform:scale(0)}60%{opacity:1;transform:scale(1.8)}100%{opacity:1;transform:scale(1)}}
@keyframes ring{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.6);opacity:0}}
.hero2 .in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;padding-block:40px}
.hero2 .in>*{max-width:620px}
.hero2 h1{font-size:clamp(46px,7.4vw,104px);line-height:1.02;margin:0 0 .25em;color:var(--parch);text-shadow:0 4px 40px rgba(0,0,0,.8)}
html[lang=en] .hero2 h1{font-size:clamp(40px,6vw,82px);line-height:1.08}
.hero2 .lead{font-size:clamp(16px,1.6vw,19px);color:#d9cfb8;max-width:34em;margin:0 0 26px;text-shadow:0 2px 18px #000}
.hero2 .cta{display:flex;gap:12px;flex-wrap:wrap}
.btn.frost{background:linear-gradient(180deg,#b9dbec,#5f93ad);color:#06141c;border-color:#e4f4fb}
.btn.frost:hover{color:#000}
.hstats{display:flex;gap:26px;margin-top:30px;color:var(--muted);font-size:14px}
.hstats b{display:block;font-family:var(--display);font-size:24px;color:var(--parch);line-height:1.1}

/* ---------- نمطا اللعب ---------- */
.modes{position:relative;z-index:3;margin-top:-84px;display:grid;grid-template-columns:1.15fr 1fr;gap:18px}
.mode{position:relative;border-radius:22px;padding:30px 30px 26px;overflow:hidden;min-height:290px;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.mode h2{font-size:clamp(26px,3vw,36px);margin:0 0 6px;color:var(--parch)}
.mode p{margin:0 0 18px;color:#c1cad6;max-width:30em}
.mode .go{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.mode.on{background:radial-gradient(120% 90% at 0% 0%,#1d3b5f 0%,#131c28 55%,#0c1118 100%);border:1px solid rgba(143,184,227,.5)}
.mode.off{background:radial-gradient(120% 90% at 100% 0%,#24516b 0%,#10222d 55%,#0b1218 100%);border:1px solid rgba(159,196,216,.45)}
.mode.off h2{color:#e3f2f9}
.mode .tag{align-self:flex-start;font-size:12.5px;font-weight:800;padding:3px 12px;border-radius:999px;margin-bottom:12px;border:1px solid currentColor}
.mode.on .tag{color:var(--gold-l)}.mode.off .tag{color:var(--frost)}
.avstack{display:flex;margin-bottom:16px}
.avstack .avatar{margin-inline-end:-12px;border:2px solid #131c28 !important}
.ladder{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.ladder span{font-size:12.5px;font-weight:700;padding:3px 11px;border-radius:8px;background:rgba(159,196,216,.12);border:1px solid rgba(159,196,216,.3);color:#cfe6f1}
.ladder span:last-child{background:rgba(143,184,227,.18);border-color:rgba(143,184,227,.5);color:var(--gold-l)}
@media(max-width:860px){.modes{grid-template-columns:1fr;margin-top:-40px}}

/* ---------- أقسام عامة ---------- */
.s{padding:84px 0}
.s.alt{background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.15))}
.shead{max-width:640px;margin-bottom:34px}
.shead h2{font-size:clamp(30px,4vw,48px);color:var(--parch);margin:0 0 .3em}
.shead p{margin:0;color:var(--muted);font-size:16.5px}

/* ---------- الرايات ---------- */
.banners{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start}
.pennant{--c:#999;position:relative;width:134px;padding:20px 10px 40px;text-align:center;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 34%,#0e1620),#0b1017 92%);
  border-top:3px solid var(--c);clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - 20px),0 100%);transition:transform .25s}
.pennant:hover{transform:translateY(-6px)}
.pennant .sg{font-size:38px;line-height:1;filter:drop-shadow(0 3px 8px rgba(0,0,0,.6))}
.pennant h3{font-size:16px;margin:8px 0 2px;color:#fff}
.pennant small{display:block;color:#bdb29a;font-size:11.5px;line-height:1.35;min-height:30px}
.pennant .res{margin-top:6px;font-size:11.5px;color:var(--gold-l);font-weight:700}
.pennant.prem{opacity:.78}
.pennant.prem::before{content:'👑';position:absolute;top:8px;inset-inline-end:8px;font-size:14px}
.tier{width:100%;display:flex;align-items:center;gap:12px;color:var(--muted);font-weight:700;font-size:14px;margin:6px 0 2px}
.tier::after{content:'';flex:1;height:1px;background:var(--line)}
.tier.p{color:var(--gold-l)}

/* ---------- خط زمني ---------- */
.tl{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:50px;align-items:start}
.tl .shead{position:sticky;top:96px}
.steps2{position:relative;margin:0;padding:0;list-style:none}
.steps2::before{content:'';position:absolute;inset-block:10px;inset-inline-start:21px;width:2px;background:linear-gradient(var(--gold),rgba(143,184,227,.1))}
.steps2 li{position:relative;padding-inline-start:64px;padding-bottom:30px}
.steps2 li:last-child{padding-bottom:0}
.steps2 .n{position:absolute;inset-inline-start:0;top:0;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--ink2);border:2px solid var(--gold);color:var(--gold-l);font-family:var(--display);font-weight:800}
.steps2 li:last-child .n{background:var(--gold);color:#10161e}
.steps2 h3{margin:0 0 4px;font-size:21px;color:var(--parch)}
.steps2 p{margin:0;color:#c9bfa9;max-width:36em}
@media(max-width:860px){.tl{grid-template-columns:1fr}.tl .shead{position:static}}

/* ---------- الأنظمة (شبكة غير متساوية) ---------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.bt{position:relative;border-radius:18px;padding:22px;background:linear-gradient(180deg,rgba(16,24,35,.7),rgba(10,14,20,.85));border:1px solid var(--line);overflow:hidden}
.bt h3{margin:0 0 6px;font-size:20px;color:var(--parch)}
.bt p{margin:0;color:#bfb49d;font-size:14.5px}
.bt .ic{font-size:30px;margin-bottom:10px;display:block}
.bt.w3{grid-column:span 3}.bt.w2{grid-column:span 2}.bt.w4{grid-column:span 4}
.bt.big{grid-row:span 2;background:linear-gradient(160deg,#1d3b5f,#0c1118 70%);border-color:rgba(143,184,227,.45)}
.bt.cold{background:linear-gradient(160deg,#17303f,#0d1419 75%);border-color:rgba(159,196,216,.35)}
.odds{display:flex;gap:8px;margin-top:14px;align-items:center;font-size:13px;font-weight:700}
.odds i{flex:1;height:8px;border-radius:5px;background:linear-gradient(90deg,#3f9d4a var(--w),#2c5b8a 0);display:block}
.zoomdots{position:relative;height:120px;margin-top:14px;border-radius:12px;background:radial-gradient(circle at 30% 40%,rgba(143,184,227,.18),transparent 60%),rgba(0,0,0,.35);border:1px solid var(--line)}
.zoomdots i{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--c,#8fb8e3);box-shadow:0 0 8px var(--c,#8fb8e3)}
.zoomdots svg{position:absolute;inset:0;width:100%;height:100%}
@media(max-width:900px){.bento{grid-template-columns:repeat(2,1fr)}.bt.w3,.bt.w4,.bt.w2{grid-column:span 2}.bt.big{grid-row:auto}}
@media(max-width:560px){.bento{grid-template-columns:1fr}.bt.w3,.bt.w4,.bt.w2{grid-column:auto}}

/* ---------- المتصدرون (تبويبان) ---------- */
.tabs{display:inline-flex;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:14px}
.tabs button{background:transparent;color:var(--text);border:0;padding:8px 20px;font-family:inherit;font-weight:700;cursor:pointer;font-size:14px}
.tabs button.on{background:rgba(143,184,227,.18);color:var(--gold-l)}

/* ---------- مقارنة الباقات المصغرة ---------- */
.mini-plans{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:860px}
.mp{border-radius:18px;padding:24px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.mp.p{border-color:rgba(143,184,227,.55);background:linear-gradient(160deg,rgba(46,90,140,.45),rgba(10,16,24,.7))}
.mp h3{margin:0 0 8px;color:var(--parch)}
.mp ul{margin:0 0 16px;padding:0;list-style:none;color:#c1cad6;font-size:14.5px}
.mp li{padding:3px 0}
.mp li::before{content:'✔';color:var(--gold);margin-inline-end:8px}
@media(max-width:700px){.mini-plans{grid-template-columns:1fr}}

/* ---------- صفحة الأوفلاين ---------- */
.offl{padding:40px 0 70px}
.offl-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:start}
@media(max-width:940px){.offl-grid{grid-template-columns:1fr}}
.panel{border-radius:20px;padding:24px;background:linear-gradient(180deg,rgba(22,48,63,.55),rgba(11,18,24,.88));border:1px solid rgba(159,196,216,.3);box-shadow:0 14px 44px rgba(0,0,0,.45)}
.panel h2{font-size:22px;margin:0 0 14px;color:#e3f2f9}
.panel h3{font-size:16px;color:var(--frost);margin:18px 0 8px}
.hpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.hbtn{--c:#999;position:relative;cursor:pointer;text-align:center;padding:12px 6px;border-radius:14px;border:1.5px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--text);font-family:inherit;transition:border-color .2s,background .2s}
.hbtn:hover{border-color:var(--c)}
.hbtn.sel{border-color:var(--c);background:color-mix(in srgb,var(--c) 22%,#0b1218);box-shadow:0 0 0 1px var(--c),0 0 20px color-mix(in srgb,var(--c) 40%,transparent)}
.hbtn .sg{font-size:30px;display:block;line-height:1.2}
.hbtn b{font-size:13.5px;display:block}
.hbtn small{display:block;font-size:11px;color:var(--muted);line-height:1.3}
.hbtn.lock{opacity:.5;cursor:not-allowed}
.hbtn.lock::after{content:'🔒';position:absolute;top:5px;inset-inline-end:7px;font-size:13px}
.seg{display:flex;border:1px solid rgba(159,196,216,.35);border-radius:12px;overflow:hidden}
.seg button{flex:1;background:transparent;border:0;color:var(--text);padding:9px 6px;font-family:inherit;font-weight:700;cursor:pointer;font-size:14px}
.seg button+button{border-inline-start:1px solid rgba(159,196,216,.25)}
.seg button.on{background:rgba(159,196,216,.22);color:#fff}
.rng{display:flex;align-items:center;gap:12px}
.rng input{flex:1;accent-color:var(--frost)}
.rng b{min-width:28px;text-align:center;font-size:18px;color:#fff}
.inp2{width:100%;background:rgba(0,0,0,.35);border:1px solid rgba(159,196,216,.35);border-radius:10px;padding:9px 12px;color:var(--text);font-family:inherit;font-size:15px}
.inp2:focus{outline:2px solid var(--frost);outline-offset:1px}
.startbar{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;align-items:center}
.rankbox{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.bar2{height:9px;border-radius:6px;background:rgba(255,255,255,.1);overflow:hidden}
.bar2 i{display:block;height:100%;background:linear-gradient(90deg,#5f93ad,#c9e8f6)}
.kv2{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}
.kv2 div{text-align:center;background:rgba(255,255,255,.05);border-radius:10px;padding:8px 2px;font-weight:800;font-size:18px;color:#fff}
.kv2 small{display:block;font-weight:600;font-size:11px;color:var(--muted)}
.hall{width:100%;border-collapse:collapse;font-size:13.5px}
.hall td,.hall th{padding:6px 6px;text-align:start;border-bottom:1px solid rgba(255,255,255,.07)}
.hall th{color:var(--muted);font-weight:600;font-size:12px}
.achs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ach{display:flex;gap:9px;align-items:center;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.04);opacity:.45;font-size:13px}
.ach.got{opacity:1;background:rgba(143,184,227,.12);border:1px solid rgba(143,184,227,.35)}
.ach i{font-style:normal;font-size:22px}
.ach b{display:block;line-height:1.2}
.ach small{color:var(--muted);font-size:11.5px;line-height:1.25;display:block}
.resume{border:1px dashed var(--frost);border-radius:14px;padding:14px;margin-bottom:16px;background:rgba(159,196,216,.08)}
.note{font-size:12.5px;color:var(--muted)}

@media(prefers-reduced-motion:reduce){.pin,.pin::after{animation:none;opacity:1}.pennant{transition:none}}
.btn:focus-visible,.hbtn:focus-visible,.seg button:focus-visible,.tabs button:focus-visible,a:focus-visible{outline:2px solid var(--frost);outline-offset:2px}

/* ---------- الأنماط والسيناريوهات ---------- */
.book2{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;padding:24px 26px;border-radius:20px;border:1px solid rgba(143,184,227,.4);background:linear-gradient(135deg,rgba(60,92,132,.38),rgba(10,16,24,.92));box-shadow:0 18px 50px rgba(0,0,0,.45)}
.book2 .bk-ic{font-size:54px;line-height:1}
.book2 h3{margin:0 0 6px;font-size:clamp(22px,2.4vw,30px);color:var(--parch)}
.book2 p{margin:0 0 12px;color:#c9d3df;max-width:46em;line-height:1.8}
.book2 .chips{display:flex;flex-wrap:wrap;gap:8px}
.book2 .chips span{padding:4px 12px;border-radius:99px;border:1px solid rgba(143,184,227,.4);background:rgba(0,0,0,.3);font-size:13px;font-weight:700}
.scn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:16px}
.scn-card{padding:16px 18px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012))}
.scn-card .ic{font-size:26px;line-height:1;margin-bottom:6px}
.scn-card h4{margin:0 0 4px;font-size:17px;color:var(--parch)}
.scn-card p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.7}
.scn-card.dev{border-color:rgba(143,184,227,.4);background:linear-gradient(180deg,rgba(143,184,227,.12),rgba(143,184,227,.02))}

/* ---------- الجوال ---------- */
@media(max-width:560px){
  .hero2 .cta .btn{flex:1 1 100%;justify-content:center;text-align:center}
  .banners{justify-content:center;gap:10px}
  .banners .pennant{width:calc(50% - 5px);max-width:200px}
  .book2{grid-template-columns:1fr;gap:10px;padding:18px}
  .book2 .bk-ic{font-size:40px}
}
/* الجوال بالعرض: الواجهة الرئيسية لا تُقصّ */
@media(orientation:landscape) and (max-height:520px){
  .hero2{height:auto;min-height:0}
  .hero2 .in{padding-block:28px}
  .hero2 h1{font-size:clamp(34px,6vw,56px)}
  .modes{margin-top:-30px}
}