/* ===== أربعة رايات — نظام التصميم ===== */
:root{
  --bg:#0a0c10; --bg2:#0d1016; --bg3:#111621;
  --panel:rgba(255,255,255,.045); --panel2:rgba(255,255,255,.07);
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.16);
  --red:#dc2626; --red2:#8d0613; --gold:#d9a441; --gold2:#f2d9a0;
  --text:#eef2f7; --muted:#94a3b8; --steel:#1b2430;
  --r:16px; --r-lg:22px;
  --shadow:0 18px 50px -18px rgba(0,0,0,.75);
  --f-head:'Noto Naskh Arabic','Amiri',serif;
  --f-body:'Noto Sans Arabic',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--f-body); font-weight:400; line-height:1.85;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{font-family:var(--f-head); font-weight:700; line-height:1.25; margin:0}
h1{font-size:clamp(3rem,9vw,7rem)}
h2{font-size:clamp(1.6rem,3.6vw,2.7rem)}
h3{font-size:1.16rem}
p{margin:.5rem 0}
em{font-style:normal; color:var(--red)}
::selection{background:var(--red); color:#fff}
.scanline{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.35;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;
}

/* ===== أزرار ===== */
.btn{
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  border-radius:999px; padding:.62rem 1.35rem; font:600 .95rem var(--f-body);
  border:1px solid transparent; transition:transform .22s, box-shadow .22s, background .22s, border-color .22s;
  color:var(--text); background:transparent; white-space:nowrap;
}
.btn-lg{padding:.85rem 1.9rem; font-size:1.05rem}
.btn-solid{background:linear-gradient(135deg,var(--red),var(--red2)); box-shadow:0 10px 30px -12px rgba(220,38,38,.85)}
.btn-solid:hover{transform:translateY(-2px); box-shadow:0 16px 40px -14px rgba(220,38,38,.95)}
.btn-gold{background:linear-gradient(135deg,var(--gold),#a97a22); color:#1a1206}
.btn-gold:hover{transform:translateY(-2px)}
.btn-ghost{border-color:var(--line2); background:rgba(255,255,255,.03)}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold2); transform:translateY(-2px)}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

/* ===== شريط التنقّل ===== */
.nav{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:1rem;
  padding:.7rem clamp(1rem,4vw,2.4rem);
  background:rgba(10,12,16,.62); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:.6rem; font-family:var(--f-head); font-size:1.15rem}
.brand-txt b{color:var(--red)}
.nav-links{display:flex; gap:.35rem; margin-inline-start:auto; flex-wrap:wrap}
.nav-links a{padding:.4rem .8rem; border-radius:999px; font-size:.94rem; color:var(--muted); transition:.2s}
.nav-links a:hover{color:var(--text); background:var(--panel2)}
.nav-cta{display:flex; gap:.5rem; margin-inline-start:.5rem}

/* ===== الواجهة الافتتاحية ===== */
.hero{position:relative; overflow:hidden; padding:clamp(3rem,8vw,6rem) clamp(1rem,4vw,2.6rem) clamp(2.5rem,6vw,5rem);
  display:grid; grid-template-columns:1.4fr .9fr; gap:2rem; align-items:center; min-height:88vh}
.hero-bg{position:absolute; inset:0; background:url('../images/hero-scene.svg') center/cover no-repeat; transform:scale(1.04); filter:saturate(1.05)}
.hero-veil{position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,12,16,.55),rgba(10,12,16,.72) 60%,var(--bg)); }
.hero-inner{position:relative; z-index:2}
.eyebrow{display:inline-flex; align-items:center; gap:.55rem; font-size:.85rem; letter-spacing:.5px;
  color:var(--gold2); border:1px solid var(--line2); padding:.35rem .9rem; border-radius:999px; background:rgba(0,0,0,.35)}
.dot{width:8px; height:8px; border-radius:50%; background:var(--red); box-shadow:0 0 12px var(--red); animation:pulse 1.8s infinite}
@keyframes pulse{50%{opacity:.35}}
.hero h1{margin:.7rem 0 .3rem; text-shadow:0 6px 40px rgba(0,0,0,.85)}
.lede{max-width:60ch; color:#cbd5e1; font-size:clamp(1rem,1.5vw,1.14rem)}
.hero-actions{display:flex; gap:.8rem; flex-wrap:wrap; margin:1.4rem 0}
.hero-stats{list-style:none; display:flex; flex-wrap:wrap; gap:1.6rem; margin:2rem 0 0; padding:1.2rem 0 0; border-top:1px solid var(--line)}
.hero-stats b{display:block; font-family:var(--f-head); font-size:1.7rem; color:var(--gold2)}
.hero-stats span{font-size:.85rem; color:var(--muted)}

.hero-card{position:relative; z-index:2; display:flex; justify-content:center}
.flagchip{position:relative; border:1px solid var(--line2); border-radius:var(--r-lg); overflow:hidden;
  background:var(--panel); box-shadow:var(--shadow); padding:.6rem}
.flagchip span{position:absolute; top:.9rem; right:1rem; z-index:2; font-size:.8rem; color:var(--gold2);
  background:rgba(0,0,0,.55); padding:.2rem .7rem; border-radius:999px; border:1px solid var(--line2)}
.flagchip img{border-radius:calc(var(--r-lg) - 6px); animation:sway 6s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-.6deg)}50%{transform:rotate(.6deg)}}

/* ===== الأقسام ===== */
.sec{padding:clamp(3rem,7vw,5.5rem) clamp(1rem,4vw,2.6rem); max-width:1240px; margin-inline:auto; position:relative}
.sec-alt{background:linear-gradient(180deg,var(--bg2),var(--bg)); border-block:1px solid var(--line);
  max-width:none; border-radius:0}
.sec-alt > *{max-width:1240px; margin-inline:auto}
.sec-head{max-width:74ch; margin-bottom:2rem}
.kicker{display:inline-block; font-size:.8rem; letter-spacing:2px; color:var(--red); font-weight:700; margin-bottom:.4rem}
.sub{color:var(--muted)}
.grid{display:grid; gap:1.1rem}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:1.4rem;
  backdrop-filter:blur(12px); transition:transform .25s, box-shadow .25s, border-color .25s;
  box-shadow:0 8px 30px -20px rgba(0,0,0,.9);
}
.card:hover{transform:translateY(-4px); border-color:var(--line2); box-shadow:var(--shadow)}
.card h3{color:var(--gold2); margin-bottom:.3rem}
.card p{color:#c3ccd9; font-size:.95rem}
.lore{margin-top:1.6rem; display:grid; gap:.5rem}
.lore-line{padding:.85rem 1.1rem; border-inline-start:3px solid var(--red); background:var(--panel); border-radius:0 var(--r) var(--r) 0; font-size:.95rem}
.lore-line span{color:var(--gold); font-weight:700; margin-inline-end:.5rem}
.note{margin-top:1rem; font-size:.85rem; color:var(--muted); border-top:1px dashed var(--line2); padding-top:.9rem}

/* ===== تبويب الشخصيات ===== */
.tabs{display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1.2rem}
.tab{cursor:pointer; font:600 .95rem var(--f-body); color:var(--muted); background:var(--panel);
  border:1px solid var(--line); border-radius:999px; padding:.6rem 1.15rem; transition:.22s}
.tab:hover{color:var(--text); transform:translateY(-2px)}
.tab.is-on{color:#fff; background:linear-gradient(135deg,var(--red),var(--red2)); border-color:transparent;
  box-shadow:0 10px 28px -14px rgba(220,38,38,.9)}
.char-panel{display:grid; grid-template-columns:.85fr 1.4fr; gap:1.4rem; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--r-lg); padding:1.3rem; backdrop-filter:blur(12px)}
.char-art{min-height:320px; border-radius:var(--r); position:relative; overflow:hidden;
  background:radial-gradient(120% 90% at 70% 15%,rgba(217,164,65,.18),transparent 60%),linear-gradient(160deg,#161b24,#0b0e13);
  border:1px solid var(--line); display:flex; align-items:flex-end; justify-content:center}
.char-art svg{width:82%; height:auto; filter:drop-shadow(0 20px 30px rgba(0,0,0,.6))}
.role{display:inline-block; font-size:.78rem; letter-spacing:1px; color:#0f0a04; background:var(--gold);
  padding:.15rem .7rem; border-radius:999px; font-weight:700}
.char-body h3{margin:.5rem 0 .3rem; font-size:1.5rem; color:var(--gold2)}
.cdesc{color:#c3ccd9; font-size:.96rem}
.stats{margin:1rem 0; display:grid; gap:.55rem}
.stat{display:grid; grid-template-columns:7rem 1fr 2.4rem; align-items:center; gap:.6rem; font-size:.85rem; color:var(--muted)}
.bar{height:9px; background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden; display:block}
.bar b{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--red),var(--gold));
  transition:width .7s cubic-bezier(.2,.8,.2,1)}
.kv{display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin-top:.6rem}
.kv > div{background:rgba(0,0,0,.28); border:1px solid var(--line); border-radius:var(--r); padding:.75rem .95rem}
.kv-wide{grid-column:1 / -1}
.kv span{font-size:.76rem; letter-spacing:1px; color:var(--red); font-weight:700}
.kv p{margin:.15rem 0 0; font-size:.92rem; color:#d5dde8}

/* ===== بطاقات المراحل ===== */
.missions{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem}
.mission{position:relative; background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:1.3rem 1.2rem 1.1rem; transition:transform .25s, box-shadow .25s, border-color .25s; overflow:hidden}
.mission::before{content:""; position:absolute; inset-inline-start:0; top:0; height:100%; width:3px;
  background:linear-gradient(180deg,var(--red),transparent)}
.mission:hover{transform:translateY(-5px); border-color:var(--line2); box-shadow:var(--shadow)}
.mission-final{border-color:rgba(217,164,65,.5); background:linear-gradient(160deg,rgba(217,164,65,.09),var(--panel))}
.mnum{font-family:var(--f-head); font-size:2rem; color:rgba(255,255,255,.14); position:absolute; top:.4rem; inset-inline-start:1rem}
.mission h3{margin:.2rem 0 .35rem; color:var(--gold2); font-size:1.12rem; padding-inline-start:0}
.mloc{font-size:.85rem; color:var(--muted)}
.mobj{margin:.7rem 0; padding-inline-start:1.1rem; font-size:.9rem; color:#cbd5e1}
.mobj li{margin:.25rem 0}
.mobj b{color:var(--gold)}
.mdiff{display:grid; grid-template-columns:4.6rem 1fr; align-items:center; gap:.6rem; font-size:.8rem; color:var(--muted); margin:.5rem 0 .9rem}
.mplay{width:100%; justify-content:center}

/* ===== قسم الراية ===== */
.banner-sec{border-block:1px solid var(--line);
  background:radial-gradient(90% 120% at 80% 20%,rgba(141,6,19,.35),transparent 55%),var(--bg2)}
.banner-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:2rem; align-items:center}
.banner-text .kicker{color:var(--gold)}
.banner-text h2{color:var(--gold2)}
.banner-text p{color:#cbd5e1}
.msg-mock{margin:1.2rem 0; display:grid; gap:.2rem; text-align:center; padding:1.1rem; border-radius:var(--r);
  border:1px solid rgba(217,164,65,.35); background:rgba(0,0,0,.35)}
.mm-line1{font-family:var(--f-head); font-size:1.5rem; color:var(--gold2); letter-spacing:1px}
.mm-line2{font-size:.85rem; color:var(--muted)}
.banner-fx{list-style:none; padding:0; display:grid; gap:.4rem; font-size:.9rem; color:#c3ccd9}
.banner-fx li{padding-inline-start:1.2rem; position:relative}
.banner-fx li::before{content:""; position:absolute; inset-inline-start:0; top:.62em; width:7px; height:7px;
  background:var(--red); border-radius:2px; transform:rotate(45deg)}
.banner-fx b{color:var(--gold2)}
.banner-art{position:relative; border:1px solid var(--line2); border-radius:var(--r-lg); overflow:hidden;
  background:var(--panel); padding:.7rem; box-shadow:var(--shadow)}
.banner-art img{border-radius:calc(var(--r-lg) - 8px); animation:sway 7s ease-in-out infinite}
.banner-caption{font-size:.8rem; color:var(--muted); text-align:center; padding:.5rem}

/* ===== واجهة اللعب والزعماء ===== */
.feature{min-height:150px}
.hud{margin-top:1.6rem; border:1px solid var(--line); border-radius:var(--r-lg); padding:1.2rem;
  background:linear-gradient(160deg,rgba(27,36,48,.55),rgba(10,12,16,.7)); backdrop-filter:blur(12px)}
.hud-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.8rem; margin-top:.9rem}
.hud-box{background:rgba(0,0,0,.4); border:1px solid var(--line); border-radius:var(--r); padding:.7rem .85rem; font-size:.85rem}
.hud-box b{display:block; color:var(--gold2); font-size:.78rem; letter-spacing:.5px; margin-bottom:.35rem}
.hud-box .bar{height:7px}
.bar.hp b{background:linear-gradient(90deg,#22c55e,#86efac)}
.bar.xp b{background:linear-gradient(90deg,#3b82f6,#a5b4fc)}
.ammo{font-family:var(--f-head); font-size:1.2rem; color:#fff; letter-spacing:1px}
.wname,.persp,.cd{color:#e2e8f0}
.persp{color:var(--gold2)}

/* ===== خارطة الطريق والخاتمة ===== */
.roadmap{margin-top:1.4rem; padding-inline-start:1.2rem; display:grid; gap:.55rem; color:#c3ccd9}
.roadmap b{color:var(--gold2)}
.cta-final{text-align:center; border-top:1px solid var(--line)}
.cta-final .hero-actions{justify-content:center}
.foot{border-top:1px solid var(--line); padding:2.4rem clamp(1rem,4vw,2.6rem); text-align:center; background:var(--bg2)}
.foot-brand{display:inline-flex; align-items:center; gap:.6rem; font-family:var(--f-head); font-size:1.2rem; margin-bottom:.6rem}
.foot p{color:var(--muted); font-size:.88rem; max-width:70ch; margin:.4rem auto}
.foot-fine{opacity:.7; font-size:.8rem}

/* ===== التنبيه والظهور ===== */
.toast{position:fixed; inset-block-end:1.4rem; inset-inline-start:1.4rem; z-index:80;
  background:linear-gradient(135deg,var(--red),var(--red2)); color:#fff; padding:.8rem 1.2rem; border-radius:999px;
  box-shadow:var(--shadow); opacity:0; transform:translateY(16px); pointer-events:none; transition:.3s; font-size:.92rem; font-weight:600}
.toast.show{opacity:1; transform:translateY(0)}
.reveal{opacity:0; transform:translateY(22px); transition:opacity .6s, transform .6s}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}.reveal{opacity:1; transform:none}}

/* ===== الاستجابة ===== */
@media (max-width:1024px){
  .hero{grid-template-columns:1fr; min-height:auto}
  .hero-card{order:-1}
  .char-panel{grid-template-columns:1fr}
  .banner-grid{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .nav-links{display:none}
  .grid-3,.grid-4{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr}
  .hero-stats{gap:1rem}
}