:root{
  --bg:#050912; --bg2:#0f172a; --ink:#e2e8f0; --dim:#94a3b8;
  --red:#ef4444; --blue:#3b82f6; --green:#22c55e; --amber:#f59e0b;
  --cyan:#22d3ee; --violet:#8b5cf6;
  --border:rgba(255,255,255,.10);
  --glass:rgba(255,255,255,.045);
  --font-ar:'Cairo',system-ui,-apple-system,sans-serif;
  --font-hud:'Orbitron','Cairo',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --r:16px; --shadow:0 18px 50px rgba(0,0,0,.55);
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-ar); overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit; cursor:pointer}
.hidden{display:none !important}
.row{display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:center}
.note{color:var(--dim); font-size:.92rem; line-height:1.75; margin:.4rem 0}
h1,h2,h3{margin:0 0 .35rem; line-height:1.25}
h2{font-size:clamp(1.25rem,3.2vw,1.75rem)}
h3{font-size:1.05rem; letter-spacing:.2px}
.chip{
  display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px;
  background:var(--glass); border:1px solid var(--border); font-size:.82rem; color:var(--dim);
}
.chip b{color:var(--ink)}
.chip svg{width:15px; height:15px; stroke-width:1.75}
.glass{
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--border); border-radius:var(--r);
}
#stage{position:fixed; inset:0; width:100%; height:100%; display:block; background:#050912; touch-action:none}
#app{position:fixed; inset:0}
.screen{
  position:fixed; inset:0; z-index:50; display:flex; padding:clamp(12px,3vw,32px);
  overflow-y:auto; overscroll-behavior:contain;
  background:radial-gradient(1100px 620px at 50% 8%,rgba(34,211,238,.07),transparent 60%),rgba(4,7,14,.74);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  animation:fade .3s ease both;
}
.screen.center{flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:10px}
.panel{
  width:100%; max-width:980px; margin:auto; padding:clamp(16px,3vw,26px);
  background:linear-gradient(165deg,rgba(15,23,42,.92),rgba(8,12,22,.92));
  border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow);
}
@keyframes fade{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

/* ---------- أزرار وعناصر عامة ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:12px;
  border:1px solid var(--border); background:var(--glass); color:var(--ink);
  font-size:.95rem; font-weight:600; transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn svg{width:17px; height:17px; stroke-width:1.9}
.btn:hover{transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.45)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.42; cursor:not-allowed; transform:none; box-shadow:none}
.btn.primary{background:linear-gradient(135deg,#0ea5e9,#22d3ee); color:#04121a; border-color:transparent}
.btn.primary:hover{box-shadow:0 14px 30px rgba(34,211,238,.35)}
.btn.ghost:hover{background:rgba(255,255,255,.09)}
.btn.small{padding:8px 14px; font-size:.82rem; border-radius:10px}
.icon-btn{
  width:40px; height:40px; display:grid; place-items:center; border-radius:12px;
  background:var(--glass); border:1px solid var(--border); color:var(--ink); transition:transform .18s, background .18s;
}
.icon-btn:hover{transform:translateY(-2px); background:rgba(255,255,255,.09)}
.icon-btn svg{width:19px; height:19px; stroke-width:1.85}
.tiny{font-size:.78rem; color:var(--dim)}
.narrow{max-width:520px}
.wide{max-width:760px}
.toast{
  position:fixed; z-index:80; bottom:26px; right:50%; transform:translate(50%,26px);
  padding:12px 20px; border-radius:14px; background:rgba(8,14,26,.94); border:1px solid var(--border);
  box-shadow:var(--shadow); font-size:.9rem; opacity:0; pointer-events:none; transition:all .28s ease;
}
.toast.show{opacity:1; transform:translate(50%,0)}
.toast.bad{border-color:rgba(239,68,68,.55); color:#fecaca}

/* ---------- شاشة البداية ---------- */
.mark{margin-bottom:6px; filter:drop-shadow(0 10px 30px rgba(34,211,238,.28))}
.brand{
  font-family:var(--font-hud); font-size:clamp(1.9rem,6.4vw,3.4rem); font-weight:900;
  letter-spacing:1px; background:linear-gradient(120deg,#e0f2fe,#22d3ee 45%,#8b5cf6);
  -webkit-background-clip:text; background-clip:text; color:transparent; margin:0;
}
.brand-en{font-family:var(--font-hud); letter-spacing:.42em; font-size:.72rem; color:var(--dim); margin:2px 0 10px}
.tagline{max-width:520px; color:var(--dim); line-height:1.8; margin:0 0 14px; font-size:.98rem}
.splash-stats{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:16px}

/* ---------- الحظيرة ---------- */
.hangar-wrap{width:100%; max-width:1120px; margin:auto; display:flex; flex-direction:column; gap:16px}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.topbar .left,.topbar .right{display:flex; align-items:center; gap:8px}
.grid.two{display:grid; grid-template-columns:1.05fr .95fr; gap:16px}
.panel h3{display:flex; align-items:center; gap:8px}
.panel h3 svg{width:17px; height:17px; stroke-width:1.8; color:var(--cyan)}
.bay canvas{width:100%; height:auto; border-radius:14px; background:#060a13; display:block}
.bay-meta{margin-top:14px}
.bay-meta h3{font-family:var(--font-hud); letter-spacing:.5px}
.stats-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px; margin-top:10px}
.stat{display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 12px; border-radius:11px; background:rgba(255,255,255,.035); border:1px solid var(--border); font-size:.84rem}
.stat span{color:var(--dim)}
.stat b{font-family:var(--font-mono); color:#a5f3fc}
.up-list{display:flex; flex-direction:column; gap:10px; margin-top:12px}
.up{display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center;
  padding:12px; border-radius:14px; background:rgba(255,255,255,.03); border:1px solid var(--border); transition:transform .18s}
.up:hover{transform:translateY(-2px)}
.up.maxed{opacity:.62}
.up-icon{width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:rgba(34,211,238,.10); color:var(--cyan)}
.up-icon svg{width:19px; height:19px; stroke-width:1.8}
.up-top{display:flex; align-items:center; gap:8px}
.up .note{margin:2px 0 6px}
.pips{display:flex; gap:5px}
.pip{width:22px; height:5px; border-radius:3px; background:rgba(255,255,255,.12); display:block}
.pip.on{background:linear-gradient(90deg,#22d3ee,#8b5cf6)}
.mission-list{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:12px; margin-top:12px}
.mission{display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center;
  padding:14px; border-radius:14px; background:rgba(255,255,255,.03); border:1px solid var(--border); transition:transform .18s, border-color .18s}
.mission:hover{transform:translateY(-2px); border-color:rgba(34,211,238,.35)}
.mission.locked{opacity:.55}
.m-num{font-family:var(--font-hud); font-size:1.25rem; font-weight:800; color:#22d3ee; width:34px; text-align:center}
.m-top{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.m-meta{display:flex; gap:10px; flex-wrap:wrap; font-size:.76rem; color:var(--dim); margin-top:6px}
.m-meta span{display:inline-flex; align-items:center; gap:4px}
.m-meta svg{width:13px; height:13px; stroke-width:1.9}
.m-meta .warn{color:#fca5a5}
.badge{display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:999px; font-size:.7rem; border:1px solid var(--border)}
.badge svg{width:12px; height:12px}
.badge.ok{color:#86efac; border-color:rgba(34,197,94,.4); background:rgba(34,197,94,.10)}
.badge.live{color:#a5f3fc; border-color:rgba(34,211,238,.4); background:rgba(34,211,238,.10)}
.badge.lock{color:#fca5a5; border-color:rgba(239,68,68,.3); background:rgba(239,68,68,.08)}

/* ---------- الإحاطة والنتائج ---------- */
.brief{max-width:720px; text-align:right}
.brief h2{font-family:var(--font-hud); letter-spacing:.4px; margin-top:10px}
.objectives{list-style:none; padding:0; margin:16px 0; display:flex; flex-direction:column; gap:9px}
.objectives li{padding:11px 14px; border-radius:12px; background:rgba(255,255,255,.035);
  border:1px solid var(--border); font-size:.9rem; line-height:1.7; position:relative}
.objectives li::before{content:''; position:absolute; inset-inline-start:0; top:12px; bottom:12px;
  width:3px; border-radius:3px; background:linear-gradient(#22d3ee,#8b5cf6)}
.objectives b{color:#a5f3fc}
.brief-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.mini{font-size:.82rem; color:var(--dim)}
.mini b{color:#fcd34d}
.rs-tag{display:inline-block; font-family:var(--font-hud); font-size:.68rem; letter-spacing:.32em;
  padding:5px 12px; border-radius:999px; border:1px solid var(--border)}
.rs-tag.ok{color:#86efac; border-color:rgba(34,197,94,.45); background:rgba(34,197,94,.10)}
.rs-tag.bad{color:#fca5a5; border-color:rgba(239,68,68,.45); background:rgba(239,68,68,.10)}
#scr-result .panel{max-width:680px}
.rs-unlock{margin:16px 0}
.unlock{display:flex; gap:12px; align-items:center; padding:14px; border-radius:14px;
  background:linear-gradient(135deg,rgba(34,211,238,.12),rgba(139,92,246,.12));
  border:1px solid rgba(34,211,238,.3)}
.unlock svg{width:26px; height:26px; color:#67e8f9; stroke-width:1.7}
.unlock b{display:block; margin-bottom:2px}
.unlock span{font-size:.85rem; color:var(--dim); line-height:1.65}
.keys{list-style:none; padding:0; margin:14px 0; display:flex; flex-direction:column; gap:8px; text-align:right}
.keys li{display:grid; grid-template-columns:120px 1fr; gap:10px; align-items:center;
  padding:10px 13px; border-radius:12px; background:rgba(255,255,255,.035); border:1px solid var(--border); font-size:.88rem}
.keys b{color:#a5f3fc; font-weight:700}
.keys span{color:var(--dim)}

/* ---------- HUD ---------- */
#hud{position:fixed; inset:0; z-index:30; pointer-events:none; padding:clamp(8px,1.6vw,18px);
  display:grid; grid-template-columns:1fr; grid-template-rows:auto 1fr auto}
#hud > *{pointer-events:auto}
.hud-top{display:flex; gap:12px; align-items:flex-start; justify-content:space-between}
.hud-card{padding:10px 14px; border-radius:14px; background:rgba(6,11,20,.66);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid var(--border);
  box-shadow:0 10px 26px rgba(0,0,0,.4)}
.hud-card.grow{min-width:230px; max-width:44vw}
.hud-head{display:flex; align-items:center; gap:7px; font-size:.82rem; font-weight:700; margin-bottom:7px}
.hud-head svg{width:15px; height:15px; color:var(--cyan)}
.hud-sub{font-size:.74rem; color:#a5f3fc; margin-top:6px}
.nums{display:flex; gap:16px}
.nums div{display:flex; flex-direction:column; gap:2px}
.nums span{font-size:.66rem; color:var(--dim)}
.nums b{font-family:var(--font-mono); font-size:.94rem}
.bar{height:6px; border-radius:4px; background:rgba(255,255,255,.12); overflow:hidden}
.bar i{display:block; height:100%; width:0%; border-radius:4px;
  background:linear-gradient(90deg,#22d3ee,#8b5cf6); transition:width .18s linear}
.hud-side{position:absolute; inset-inline-start:clamp(8px,1.6vw,18px); top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:12px; align-items:center}
.hud-side-block{display:flex; flex-direction:column; gap:6px; align-items:center;
  padding:10px 12px; border-radius:14px; background:rgba(6,11,20,.62); border:1px solid var(--border)}
.hud-label{display:flex; align-items:center; gap:5px; font-size:.66rem; color:var(--dim)}
.hud-label svg{width:13px; height:13px}
.hud-label b{font-family:var(--font-mono); color:#a5f3fc}
.hearts{display:flex; gap:4px}
.hp{width:11px; height:15px; display:block; clip-path:polygon(50% 0,100% 26%,100% 74%,50% 100%,0 74%,0 26%);
  background:rgba(255,255,255,.14)}
.hp.on{background:linear-gradient(180deg,#34d399,#059669); box-shadow:0 0 10px rgba(52,211,153,.55)}
.vbar{width:12px; height:96px; border-radius:7px; background:rgba(255,255,255,.12);
  display:flex; align-items:flex-end; overflow:hidden}
.vbar i{display:block; width:100%; height:60%; border-radius:7px;
  background:linear-gradient(180deg,#fbbf24,#f97316); transition:height .12s linear}
.vbar i.burn{background:linear-gradient(180deg,#fef08a,#f59e0b); box-shadow:0 0 14px rgba(251,191,36,.7)}
.vbar i.low{background:linear-gradient(180deg,#fca5a5,#dc2626)}
.radar-block canvas{width:180px; height:72px; border-radius:10px; border:1px solid var(--border); display:block}
.pause-btn{position:absolute; top:clamp(8px,1.6vw,18px); left:50%; transform:translateX(-50%)}

/* ---------- أزرار الجوال ---------- */
.hud-bottom{display:none; gap:10px; align-items:flex-end; justify-content:center; padding-bottom:6px}
.pad{
  width:64px; height:64px; border-radius:18px; display:grid; place-items:center;
  background:rgba(6,11,20,.72); border:1px solid var(--border); color:var(--ink);
  font-size:.78rem; font-weight:700; gap:2px; backdrop-filter:blur(8px); transition:transform .12s, background .12s;
}
.pad.wide{width:auto; padding:0 18px; grid-auto-flow:column}
.pad svg{width:22px; height:22px; stroke-width:2}
.pad.active{transform:scale(.94); background:rgba(34,211,238,.22); border-color:rgba(34,211,238,.5)}
.pad.fire{color:#fda4af; border-color:rgba(244,63,94,.4)}
.pad.wide{color:#fcd34d; border-color:rgba(251,191,36,.4)}
@media (hover:none),(pointer:coarse){
  .hud-bottom{display:flex}
  .radar-block{display:none}
  .hud-card.grow{max-width:60vw}
}
@media (max-width:860px){
  .grid.two{grid-template-columns:1fr}
  .nums{gap:10px}
  .nums b{font-size:.82rem}
  .hud-side{gap:8px}
  .mission-list{grid-template-columns:1fr}
  .keys li{grid-template-columns:1fr}
  .screen{padding:12px}
}
@media (max-height:520px){
  .brand{font-size:1.5rem}
  .mark svg{width:70px; height:70px}
  .hud-side-block{padding:7px 9px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}