/* ============================================================
   طيران في الظلام 3D — Flight in the Dark
   Dark-mode HUD design system: deep space blue + cyan + amber
   ============================================================ */
:root{
  --bg:#04070d;
  --bg-2:#070c17;
  --ink:#e8f1ff;
  --ink-dim:#9fb3cf;
  --ink-mute:#66799a;
  --cyan:#22d3ee;
  --cyan-deep:#0891b2;
  --amber:#f5b942;
  --green:#3ddc84;
  --red:#ff5252;
  --violet:#8b5cf6;
  --line:rgba(140,190,255,.14);
  --line-2:rgba(140,190,255,.28);
  --glass:rgba(12,22,38,.62);
  --glass-2:rgba(9,16,29,.86);
  --shadow:0 24px 60px rgba(0,0,0,.62);
  --r-lg:20px;
  --r-md:14px;
  --r-sm:10px;
  --ff:"Cairo",system-ui,"Segoe UI",Tahoma,sans-serif;
  --ff-mono:"JetBrains Mono",ui-monospace,monospace;
  --ff-display:"Orbitron","Cairo",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--ff);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
.hidden{display:none!important}
.dim{color:var(--ink-dim)}
.tiny{font-size:11.5px;line-height:1.7}

/* ---------- WebGL canvas ---------- */
#gl{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  touch-action:none;
  background:radial-gradient(120% 90% at 50% 110%,#0a1524 0%,#03060b 60%,#000 100%);
}

/* ---------- full-screen effects ---------- */
#fx{position:fixed;inset:0;pointer-events:none;z-index:5}
#fx .vig{
  position:absolute;inset:0;
  background:radial-gradient(120% 95% at 50% 50%,transparent 42%,rgba(0,0,0,.55) 78%,rgba(0,0,0,.86) 100%);
}
#boost{
  position:absolute;inset:0;opacity:0;transition:opacity .25s ease;
  background:
    radial-gradient(60% 60% at 50% 50%,transparent 38%,rgba(34,211,238,.10) 62%,transparent 78%),
    repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.055) 0deg 1.1deg,transparent 1.1deg 6deg);
  mix-blend-mode:screen;
}
#boost.on{opacity:1;animation:spinSlow 8s linear infinite}
@keyframes spinSlow{to{transform:rotate(360deg)}}
#dmg{
  position:absolute;inset:0;opacity:0;transition:opacity .18s ease;
  background:radial-gradient(100% 80% at 50% 55%,transparent 40%,rgba(255,40,40,.42) 100%);
}
#flash{
  position:absolute;inset:0;opacity:0;background:radial-gradient(70% 60% at 50% 45%,rgba(214,236,255,.95),rgba(120,170,220,.35) 60%,transparent 80%);
  transition:opacity .09s linear;
}

/* ---------- screens / panels ---------- */
.screen{
  position:fixed;inset:0;z-index:20;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:
    radial-gradient(90% 70% at 50% 0%,rgba(10,22,38,.52),rgba(3,6,12,.80) 72%),
    linear-gradient(180deg,rgba(3,6,12,.42),rgba(3,6,12,.72));
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  animation:fadeUp .45s cubic-bezier(.2,.8,.2,1) both;
  overflow:auto;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.screen.hidden{display:none}
.screen > .hangar-grid, .screen > .mission-grid{width:min(1180px,100%)}
.screen.flexcol{flex-direction:column}

.panel{
  width:min(760px,100%);
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  padding:30px 32px;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  position:relative;
}
.panel::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.07),transparent 42%);
}
.panel.narrow{width:min(460px,100%);text-align:center}
.panel.hero{width:min(820px,100%);text-align:center}
.brand{
  font-family:var(--ff-display);letter-spacing:.30em;font-size:10.5px;color:var(--cyan);
  display:flex;align-items:center;justify-content:center;gap:9px;opacity:.9;margin-bottom:14px;
}
.brand i{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan);animation:pulse 1.9s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25;transform:scale(.8)}}
.panel h1{
  font-size:clamp(30px,6vw,52px);line-height:1.14;font-weight:800;letter-spacing:-.01em;
  background:linear-gradient(180deg,#fff,#9fd8ff 58%,#3fa9d6);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.panel h2{font-size:clamp(20px,3.4vw,28px);font-weight:800;margin-bottom:8px}
.panel h3{font-size:15px;font-weight:800;color:var(--cyan);margin-bottom:12px;letter-spacing:.02em}
.panel h4{font-size:14px;font-weight:800;margin-bottom:6px;color:var(--cyan)}
.lead{color:var(--ink-dim);font-size:15px;line-height:2;margin:12px 0 6px}

/* ---------- buttons ---------- */
.btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}
.btns.col{flex-direction:column;align-items:stretch}
.btn{
  border:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(24,42,68,.86),rgba(12,22,38,.86));
  color:var(--ink);
  padding:12px 20px;
  border-radius:var(--r-md);
  font-size:14.5px;font-weight:600;
  transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .22s,border-color .22s,background .22s;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.btn:hover{transform:translateY(-2px);border-color:var(--cyan);box-shadow:0 14px 30px rgba(0,0,0,.45),0 0 0 1px rgba(34,211,238,.35) inset}
.btn:active{transform:translateY(0) scale(.985)}
.btn.primary{
  background:linear-gradient(180deg,#1fb6d4,#0e7490);
  border-color:rgba(180,245,255,.5);color:#031018;font-weight:800;
  text-shadow:0 1px 0 rgba(255,255,255,.22);
}
.btn.primary:hover{box-shadow:0 16px 34px rgba(14,116,144,.5)}
.btn.big{padding:15px 30px;font-size:16px}
.btn.ghost{background:rgba(255,255,255,.02);border-color:var(--line)}
.btn.gold{background:linear-gradient(180deg,#f5b942,#b07c14);border-color:rgba(255,225,170,.5);color:#1a1204;font-weight:800}
.btn:disabled{opacity:.42;cursor:not-allowed;transform:none!important}
.btn.back{position:absolute;inset-inline-start:26px;top:22px}
.btn.mini{padding:7px 13px;font-size:12.5px;border-radius:9px}

.bar{
  width:100%;display:flex;align-items:center;gap:14px;
  padding:22px 26px 14px;position:relative;
}
.bar h2{font-size:clamp(18px,2.6vw,24px);font-weight:800}
.spacer{flex:1}
.stars-pill{
  font-size:12.5px;color:var(--amber);border:1px solid rgba(245,185,66,.34);
  background:rgba(245,185,66,.08);padding:7px 14px;border-radius:999px;
}
.stars-pill b{font-family:var(--ff-mono)}
.loadbar{height:7px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;margin:16px 0 12px}
.loadbar i{display:block;height:100%;width:6%;border-radius:99px;background:linear-gradient(90deg,var(--cyan-deep),var(--cyan));box-shadow:0 0 14px rgba(34,211,238,.6);transition:width .3s ease}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;z-index:10;pointer-events:none;font-family:var(--ff)}
.hud-top{position:absolute;top:0;inset-inline:0;display:flex;gap:18px;justify-content:space-between;padding:16px 20px;align-items:flex-start}
.hud-mission{min-width:230px;max-width:46vw}
.hm-name{display:flex;align-items:center;gap:9px;font-weight:800;font-size:15px;text-shadow:0 2px 10px rgba(0,0,0,.9)}
.hm-tier{font-family:var(--ff-mono);font-size:11px;color:var(--cyan);border:1px solid var(--line-2);padding:2px 8px;border-radius:99px;background:rgba(34,211,238,.08)}
.hud-bar{position:relative;height:9px;border-radius:99px;background:rgba(6,12,22,.72);border:1px solid var(--line);overflow:hidden;margin-top:8px}
.hud-bar i{position:absolute;inset:0 auto 0 0;width:0;display:block;border-radius:99px;transition:width .18s linear}
.hud-bar.dist i{background:linear-gradient(90deg,var(--cyan-deep),var(--cyan));box-shadow:0 0 14px rgba(34,211,238,.55)}
.hud-bar.hull i{background:linear-gradient(90deg,#2f8f5b,var(--green))}
.hud-bar.hull.low i{background:linear-gradient(90deg,#8c1d1d,var(--red))}
.hud-bar.nitro i{background:linear-gradient(90deg,#7c5c12,var(--amber))}
.hud-bar b{position:absolute;inset-inline-end:8px;top:-1px;font-family:var(--ff-mono);font-size:10px;color:var(--ink-dim);text-shadow:0 1px 4px #000}
.hud-sub{display:flex;gap:14px;font-family:var(--ff-mono);font-size:11px;color:var(--ink-mute);margin-top:7px}
.hud-sub span{text-shadow:0 1px 4px #000}
.hud-hull{min-width:190px;text-align:end}
.hud-hull .lbl,.hud-left .lbl{font-size:11px;color:var(--ink-dim);letter-spacing:.04em;text-shadow:0 1px 4px #000}
.hud-hull .lbl b,.hud-left b{font-family:var(--ff-mono);color:var(--ink)}
.hud-hull .lbl.mt{margin-top:10px}
.hud-left{position:absolute;inset-inline-start:20px;top:50%;transform:translateY(-50%);display:grid;gap:10px}
.hud-left .stat{
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:8px 12px;min-width:132px;backdrop-filter:blur(8px);
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.hud-left .stat b{font-family:var(--ff-mono);font-size:14px}
.hud-right{position:absolute;inset-inline-end:20px;bottom:22px}
.radar-wrap{position:relative;background:rgba(5,11,20,.55);border:1px solid var(--line);border-radius:var(--r-md);padding:8px;backdrop-filter:blur(8px)}
#radar{display:block;border-radius:8px}
.radar-lbl{font-family:var(--ff-mono);font-size:9.5px;color:var(--ink-mute);text-align:center;margin-top:5px;letter-spacing:.08em}

.warn{
  position:absolute;inset-inline:0;top:31%;text-align:center;
  font-size:clamp(20px,4.4vw,38px);font-weight:800;color:#ffd7d7;opacity:0;
  text-shadow:0 0 26px rgba(255,60,60,.85),0 2px 10px #000;transition:opacity .2s ease;
}
.warn.on{opacity:1;animation:warnPulse .55s ease-in-out infinite}
@keyframes warnPulse{50%{opacity:.42;transform:scale(1.03)}}
.hud-hint{
  position:absolute;inset-inline:0;bottom:16px;text-align:center;
  font-size:11.5px;color:var(--ink-mute);opacity:.6;font-family:var(--ff-mono);
  transition:opacity .6s ease;
}
.hud-hint.fade{opacity:0}
.touch{display:none;position:absolute;inset-inline:0;bottom:0;padding:16px;justify-content:space-between;align-items:flex-end;pointer-events:none}
.touch .tright{display:flex;gap:12px;align-items:flex-end}
.tbtn{
  pointer-events:auto;width:86px;height:86px;border-radius:50%;
  border:1px solid rgba(180,225,255,.34);background:rgba(10,20,34,.62);
  color:var(--ink);font-weight:800;font-size:12.5px;backdrop-filter:blur(8px);
  box-shadow:0 12px 26px rgba(0,0,0,.45);
}
.tbtn.fire{background:rgba(120,26,26,.55);border-color:rgba(255,140,140,.42)}
.tbtn.nitro{background:rgba(96,70,8,.55);border-color:rgba(255,208,120,.42)}
.tbtn.small{width:64px;height:64px;font-size:11px}
.tbtn:active{transform:scale(.94)}
@media (pointer:coarse){.touch{display:flex}.hud-right{bottom:auto;top:84px}}

/* ---------- toasts ---------- */
#toasts{position:fixed;top:86px;inset-inline-start:0;inset-inline-end:auto;z-index:30;padding:0 20px;display:grid;gap:8px;justify-items:start}
.toast{
  background:var(--glass-2);border:1px solid var(--line-2);border-radius:12px;
  padding:10px 16px;font-size:13.5px;font-weight:600;box-shadow:var(--shadow);
  animation:toastIn .3s cubic-bezier(.2,.8,.2,1) both;display:flex;align-items:center;gap:9px;
}
.toast i{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px currentColor}
.toast.good i{background:var(--green)}
.toast.bad i{background:var(--red)}
.toast.gold i{background:var(--amber)}
.toast.out{animation:toastOut .35s ease forwards}
@keyframes toastIn{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(-16px)}}

/* ---------- mission grid ---------- */
.mission-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
  gap:14px;padding:6px 26px 34px;align-self:flex-start;margin:0 auto;width:min(1180px,100%);
}
.mcard{
  position:relative;text-align:start;padding:16px 17px;border-radius:var(--r-md);
  border:1px solid var(--line);background:linear-gradient(165deg,rgba(18,32,54,.82),rgba(8,14,26,.82));
  box-shadow:0 12px 30px rgba(0,0,0,.4);overflow:hidden;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),border-color .2s,box-shadow .25s;
  display:flex;flex-direction:column;gap:9px;
}
.mcard:hover{transform:translateY(-3px);border-color:var(--cyan);box-shadow:0 20px 44px rgba(0,0,0,.5)}
.mcard.locked{opacity:.55;cursor:not-allowed}
.mcard.locked:hover{transform:none;border-color:var(--line)}
.mcard .idx{font-family:var(--ff-display);font-size:11px;letter-spacing:.2em;color:var(--cyan);opacity:.85}
.mcard h3{font-size:16.5px;font-weight:800}
.mcard .mv{font-size:12.5px;color:var(--ink-dim);line-height:1.85;min-height:44px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:10.5px;font-family:var(--ff-mono);padding:3px 8px;border-radius:99px;border:1px solid var(--line-2);color:var(--ink-dim)}
.chip.hot{border-color:rgba(255,90,90,.42);color:#ffbcbc;background:rgba(255,60,60,.09)}
.chip.cy{border-color:rgba(34,211,238,.4);color:#b7f2ff;background:rgba(34,211,238,.09)}
.chip.am{border-color:rgba(245,185,66,.4);color:#ffe0a3;background:rgba(245,185,66,.09)}
.mcard .foot{display:flex;justify-content:space-between;align-items:center;margin-top:2px}
.mstars{font-size:13px;letter-spacing:2px;color:var(--amber)}
.mstars .off{color:rgba(255,255,255,.16)}
.mcard .lock{position:absolute;inset-inline-end:14px;top:14px;font-size:10.5px;color:var(--ink-mute);font-family:var(--ff-mono)}
.mcard .diff{display:flex;gap:3px}
.mcard .diff i{width:14px;height:3px;border-radius:2px;background:rgba(255,255,255,.14)}
.mcard .diff i.on{background:linear-gradient(90deg,var(--cyan),var(--amber))}

/* ---------- hangar ---------- */
.hangar-grid{
  display:grid;gap:14px;align-self:start;margin:0 auto;
  grid-template-columns:minmax(232px,1fr) minmax(250px,1.25fr) minmax(232px,1fr);
  padding:4px 26px 34px;width:min(1180px,100%);
}
.card{
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r-md);
  padding:16px 17px;box-shadow:0 14px 34px rgba(0,0,0,.4);backdrop-filter:blur(12px);
  align-self:start;
}
.plane-list{display:grid;gap:7px;max-height:52vh;overflow:auto;padding-inline-end:4px}
.pitem{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;
  border:1px solid var(--line);background:rgba(255,255,255,.02);text-align:start;
  transition:transform .15s,border-color .2s,background .2s;
}
.pitem:hover{transform:translateX(-3px);border-color:var(--cyan)}
.pitem.on{border-color:var(--cyan);background:rgba(34,211,238,.11);box-shadow:0 0 0 1px rgba(34,211,238,.24) inset}
.pitem.locked{opacity:.5}
.pitem .swatch{width:22px;height:22px;border-radius:7px;border:1px solid rgba(255,255,255,.22);flex:0 0 auto}
.pitem .nm{flex:1;font-size:13.5px;font-weight:700}
.pitem .lv{font-family:var(--ff-mono);font-size:10.5px;color:var(--ink-mute)}
.spec-tier{font-family:var(--ff-mono);font-size:11px;color:var(--cyan);letter-spacing:.14em;margin-bottom:10px}
.poly{display:grid;gap:9px;margin-top:12px}
.poly .row{display:grid;grid-template-columns:74px 1fr 38px;gap:9px;align-items:center;font-size:11.5px}
.poly .track{height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.poly .track i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--cyan-deep),var(--cyan));transition:width .4s ease}
.poly .val{font-family:var(--ff-mono);color:var(--ink-dim);font-size:10.5px;text-align:end}
.unlock{margin-top:14px;font-size:12.5px;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.02);color:var(--ink-dim);line-height:1.8}
.unlock.ok{border-color:rgba(61,220,132,.4);color:#bdffdb;background:rgba(61,220,132,.08)}
.unlock.no{border-color:rgba(255,90,90,.36);color:#ffc4c4;background:rgba(255,60,60,.07)}
.upitem{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:9px 0;border-bottom:1px dashed var(--line)}
.upitem:last-child{border-bottom:0}
.upitem .t{font-size:13px;font-weight:700}
.upitem .d{font-size:11px;color:var(--ink-mute);font-family:var(--ff-mono)}
.pips{display:flex;gap:4px;margin-top:5px}
.pips i{width:16px;height:4px;border-radius:2px;background:rgba(255,255,255,.12)}
.pips i.on{background:linear-gradient(90deg,var(--cyan),var(--green))}
.rs-body{display:grid;gap:8px;margin:14px 0 4px}
.rs-line{display:flex;justify-content:space-between;font-size:13.5px;padding:9px 12px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.rs-line b{font-family:var(--ff-mono)}
.stars{font-size:30px;letter-spacing:6px;color:var(--amber);text-align:center;margin:6px 0 4px}
.stars .off{color:rgba(255,255,255,.15)}
.specs{list-style:none;display:grid;gap:8px;margin:14px 0 0}
.specs li{font-size:13.5px;color:var(--ink-dim);padding-inline-start:16px;position:relative;line-height:1.85}
.specs li::before{content:"";position:absolute;inset-inline-start:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 9px var(--cyan)}
.stats-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.stats-row .s{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:9px 16px;font-size:12px;color:var(--ink-dim)}
.stats-row .s b{display:block;font-family:var(--ff-mono);font-size:19px;color:var(--ink);margin-top:3px}
.how-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:14px;margin-top:10px}
.how-grid p{font-size:13px;color:var(--ink-dim);line-height:1.95}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .hangar-grid{grid-template-columns:1fr 1fr}
  .hangar-grid .ups{grid-column:1/-1}
  .plane-list{max-height:none}
}
@media (max-width:768px){
  .screen{padding:14px;align-items:flex-start}
  .panel{padding:22px 18px}
  .hangar-grid,.mission-grid{padding:4px 12px 26px;grid-template-columns:1fr}
  .bar{padding:18px 16px 10px}
  .btn.back{inset-inline-start:14px;top:16px;padding:8px 12px;font-size:12.5px}
  .hud-hint{display:none}
  .hud-left{top:auto;bottom:118px;transform:none;gap:7px}
  .hud-left .stat{min-width:104px;padding:6px 10px}
  .hud-left .stat b{font-size:12.5px}
  .hud-top{padding:11px 12px;gap:10px}
  .hud-mission{min-width:0;max-width:52vw}
  .hud-sub{display:none}
  #radar{width:132px;height:99px}
  .radar-wrap{padding:5px}
  .how-grid{grid-template-columns:1fr}
}
@media (max-width:420px){
  .hud-left .stat:nth-child(3){display:none}
  .stars{font-size:24px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
}

/* ---------- عمود المسرح ثلاثي الأبعاد في الحظيرة ---------- */
.stage-col{display:flex;flex-direction:column;gap:12px;min-height:74vh;padding:8px 2px;pointer-events:none;align-self:start}
.stage-name,.stage-spec{
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r-md);
  padding:12px 15px;backdrop-filter:blur(12px);box-shadow:0 14px 34px rgba(0,0,0,.35);
}
.stage-name span{display:block}
.stage-name #spName{font-weight:800;font-size:16.5px}
.stage-name #spTier{font-family:var(--ff-mono);font-size:10.5px;color:var(--cyan);letter-spacing:.14em;margin-top:5px}
.stage-fill{flex:1;min-height:110px}
.stage-spec p{font-size:12px;line-height:1.85;margin-bottom:10px}
.stage-spec .unlock{margin-top:10px}
@media (max-width:1024px){.stage-col{min-height:auto}.stage-fill{display:none}}