/* ============================================================
   بَرّيّة الحُرّية — ISLA LIBRE · style.css
   ============================================================ */
:root{
  --bg:#0b1016;
  --panel:rgba(11,17,25,.74);
  --panel2:rgba(15,23,33,.92);
  --line:rgba(255,255,255,.09);
  --line2:rgba(255,255,255,.16);
  --amber:#d97706; --amber2:#f59e0b; --amber3:#ffd08a;
  --teal:#14b8a6; --indigo:#6366f1; --red:#dc2626;
  --ink:#eaf0f7; --mut:#93a2b4;
  --head:'Orbitron','Cairo',sans-serif;
  --body:'Cairo','JetBrains Mono',system-ui,sans-serif;
  --mono:'JetBrains Mono','Cairo',monospace;
  --r:14px;
  --sh:0 14px 40px rgba(0,0,0,.6);
  --glow:0 0 12px rgba(245,158,11,.45);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--body)}
body{-webkit-user-select:none;user-select:none}
canvas#game{position:fixed;inset:0;display:block;width:100vw;height:100vh}
.hidden{display:none !important}
b,strong{font-weight:800}
small{font-size:11px}

/* ---------- boot ---------- */
#boot{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;gap:10px;
  align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#152232,#070b10 70%)}
#boot .bl{font-family:var(--head);font-size:38px;letter-spacing:.3em;color:var(--amber2);text-shadow:var(--glow)}
#boot small{color:var(--mut);letter-spacing:.2em}
#boot.gone{opacity:0;pointer-events:none;transition:opacity .5s}

/* ---------- HUD shell ---------- */
#hud{position:fixed;inset:0;z-index:50;pointer-events:none;direction:rtl;
  font-family:var(--body);text-shadow:0 1px 3px rgba(0,0,0,.8)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:var(--sh)}
.plabel{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--mut);letter-spacing:.08em}
.plabel svg{width:13px;height:13px;color:var(--amber2)}
.plabel.sub{font-family:var(--mono);letter-spacing:.04em}

.p-mission{position:absolute;top:16px;right:16px;width:290px;padding:12px 14px}
.p-mission .objtitle{font-size:16px;font-weight:800;margin:7px 0 9px;line-height:1.35}
.prog{height:6px;border-radius:6px;background:rgba(255,255,255,.09);overflow:hidden}
.prog span{display:block;height:100%;width:0;border-radius:6px;
  background:linear-gradient(90deg,var(--amber),var(--amber3));transition:width .3s ease}
.p-mission #objMeta{margin-top:8px}

.p-res{position:absolute;top:16px;left:16px;display:flex;gap:0;padding:8px 4px}
.res{display:flex;flex-direction:column;align-items:center;gap:2px;padding:0 14px;min-width:78px;
  border-left:1px solid var(--line)}
.res:first-child{border-left:none}
.res svg{width:15px;height:15px;color:var(--amber2);opacity:.9}
.res b{font-family:var(--mono);font-size:17px}
.res small{color:var(--mut)}
.res.chaos svg,.res.chaos b{color:#ff8b6b}
.res.chaos b{text-shadow:0 0 12px rgba(255,90,60,.5)}

/* ---------- minimap ---------- */
.p-minimap{position:absolute;bottom:16px;left:16px;width:212px;height:212px}
#minimap{width:212px;height:212px;border-radius:50%;border:1px solid var(--line2);
  box-shadow:var(--sh),inset 0 0 22px rgba(0,0,0,.75);background:#0a1017}
.mmring{position:absolute;inset:-5px;border-radius:50%;border:1px dashed rgba(255,255,255,.14);
  animation:spin 26s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.compass{position:absolute;left:0;right:0;bottom:-8px;text-align:center;font-family:var(--mono);font-size:12px}
.compass b{color:var(--amber2)}
.compass span{margin-inline-start:8px;color:var(--mut)}

/* ---------- kill feed ---------- */
.p-feed{position:absolute;bottom:242px;left:16px;width:250px;display:flex;flex-direction:column;gap:6px}
.p-feed .fi{background:rgba(8,13,19,.7);border:1px solid var(--line);border-right:3px solid var(--amber);
  border-radius:8px;padding:6px 10px;font-size:12.5px;animation:fadeup .3s ease both}
.p-feed .fi.kill{border-right-color:var(--red)}
.p-feed .fi.good{border-right-color:var(--teal)}
.p-feed .fi.info{border-right-color:var(--indigo)}
@keyframes fadeup{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}

/* ---------- vitals ---------- */
.p-vitals{position:absolute;bottom:16px;right:16px;width:290px;display:flex;flex-direction:column;gap:9px;align-items:flex-end}
.chips{display:flex;gap:8px}
.chip{display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:5px 10px;backdrop-filter:blur(8px)}
.chip svg{width:15px;height:15px;color:var(--amber2)}
.chip b{font-family:var(--mono);font-size:13px}
.chip.ab svg{color:var(--indigo)}
.chip.ab.ready{border-color:rgba(99,102,241,.6);box-shadow:0 0 14px rgba(99,102,241,.35)}
.chip.ab.cd{opacity:.55}
.bar{position:relative;width:100%;height:20px;border-radius:10px;background:rgba(4,8,12,.72);
  border:1px solid var(--line);overflow:hidden}
.bar span{position:absolute;inset:0;width:100%;transform-origin:right center;transition:width .18s linear}
.bar b{position:absolute;right:9px;top:1px;font-family:var(--mono);font-size:12.5px;line-height:18px}
.bar small{position:absolute;left:9px;top:2px;color:var(--mut);font-size:10.5px}
.bar.hp span{background:linear-gradient(90deg,#7f1d1d,#ef4444)}
.bar.ar span{background:linear-gradient(90deg,#1e3a8a,#60a5fa);width:100%}
.bar.st{height:12px}
.bar.st span{background:linear-gradient(90deg,#065f46,#34d399)}
.bar.st small{top:0;font-size:10px}
.p-vitals.low .bar.hp{animation:pulse .9s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 rgba(220,38,38,0)}50%{box-shadow:0 0 18px rgba(220,38,38,.7)}}

/* ---------- weapon ---------- */
.p-weapon{position:absolute;bottom:96px;right:16px;display:flex;align-items:flex-end;gap:14px;direction:rtl}
.p-weapon .wmain{text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:8px 14px;backdrop-filter:blur(10px);min-width:172px}
#wName{font-size:12px;color:var(--mut);letter-spacing:.02em}
.ammo{display:flex;align-items:baseline;gap:7px;justify-content:flex-start}
.ammo b{font-family:var(--mono);font-size:32px;line-height:1.05;color:#fff}
.ammo span{font-family:var(--mono);font-size:15px;color:var(--mut)}
#wReload{color:var(--amber2);min-height:13px}
.wslots{display:flex;gap:6px}
.wsl{width:52px;height:40px;border-radius:9px;background:rgba(6,10,15,.6);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;color:var(--mut)}
.wsl.on{border-color:var(--amber2);color:#fff;box-shadow:0 0 14px rgba(245,158,11,.3)}
.wsl i{font-size:10px;opacity:.6}

/* ---------- crosshair / prompt / toasts ---------- */
#crosshair{position:absolute;left:50%;top:50%;width:38px;height:38px;transform:translate(-50%,-50%);--g:6px}
#crosshair i{position:absolute;background:rgba(255,255,255,.86);box-shadow:0 0 4px rgba(0,0,0,.9)}
#crosshair .d{width:3px;height:3px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%}
#crosshair .t,#crosshair .b{width:2px;height:9px;left:50%;transform:translateX(-50%)}
#crosshair .l,#crosshair .r{height:2px;width:9px;top:50%;transform:translateY(-50%)}
#crosshair .t{top:calc(50% - 19px - var(--g))}
#crosshair .b{top:calc(50% + 10px + var(--g))}
#crosshair .l{left:calc(50% - 19px - var(--g))}
#crosshair .r{left:calc(50% + 10px + var(--g))}
#crosshair.aim .t,#crosshair.aim .b,#crosshair.aim .l,#crosshair.aim .r{background:var(--amber2)}
#crosshair.reload{opacity:.35;animation:spin 1s linear infinite}
#hitmark{position:absolute;left:50%;top:50%;width:26px;height:26px;transform:translate(-50%,-50%) rotate(45deg);opacity:0}
#hitmark.on{animation:hm .28s ease-out}
#hitmark:before,#hitmark:after{content:'';position:absolute;background:#fff;box-shadow:0 0 6px rgba(255,80,60,.9)}
#hitmark:before{left:50%;top:0;width:2px;height:100%;transform:translateX(-50%)}
#hitmark:after{top:50%;left:0;height:2px;width:100%;transform:translateY(-50%)}
@keyframes hm{0%{opacity:1;transform:translate(-50%,-50%) rotate(45deg) scale(.6)}100%{opacity:0;transform:translate(-50%,-50%) rotate(45deg) scale(1.5)}}

#prompt{position:absolute;left:50%;bottom:23%;transform:translateX(-50%);background:var(--panel);
  border:1px solid var(--line2);border-radius:11px;padding:9px 16px;font-size:14px;backdrop-filter:blur(10px);white-space:nowrap}
#prompt kbd{font-family:var(--mono);background:rgba(255,255,255,.12);border:1px solid var(--line2);
  border-radius:6px;padding:1px 7px;margin-inline-start:8px;color:#fff}
#alertBar{position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--red),transparent);
  animation:pulse 1s infinite}
#toasts{position:absolute;top:74px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;align-items:center;width:520px}
.tst{background:linear-gradient(90deg,rgba(11,17,25,.7),rgba(20,30,42,.94),rgba(11,17,25,.7));
  border:1px solid var(--line2);border-top:2px solid var(--amber2);border-radius:12px;padding:9px 20px;
  font-size:14px;text-align:center;animation:tin .35s ease both;backdrop-filter:blur(8px)}
.tst.ok{border-top-color:var(--teal)} .tst.bad{border-top-color:var(--red)} .tst.gold{border-top-color:var(--amber3)}
@keyframes tin{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
#vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,transparent 42%,rgba(0,0,0,.42) 88%,rgba(0,0,0,.7) 100%)}
#hurt{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .18s ease;
  background:radial-gradient(ellipse at 50% 50%,transparent 35%,rgba(160,12,12,.6) 100%)}
#hurt.on{opacity:1}

/* ---------- overlays / cards / buttons ---------- */
.overlay{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;
  padding:24px;overflow:auto;direction:rtl}
.overlay.show{display:flex;flex-direction:column}
.ov-bg{position:fixed;inset:0;background:radial-gradient(circle at 30% 20%,rgba(24,38,54,.86),rgba(5,8,12,.95));
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);z-index:-1}
.ov-bg.dim{background:rgba(4,7,11,.55)}
.ov-bg.dead{background:radial-gradient(circle at 50% 50%,rgba(70,8,8,.75),rgba(5,4,6,.97))}
.card{position:relative;width:min(620px,94vw);background:var(--panel2);border:1px solid var(--line2);
  border-radius:20px;padding:26px 28px;box-shadow:var(--sh);animation:cpop .28s ease both}
.card.wide{width:min(880px,95vw)}
@keyframes cpop{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.card-top{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--mut);letter-spacing:.1em;
  text-transform:uppercase;padding-bottom:12px;border-bottom:1px solid var(--line)}
.card-top svg{width:16px;height:16px;color:var(--amber2)}
.card-top.danger svg,.card-top.danger{color:#ff6b6b}
.card-top.gold svg,.card-top.gold{color:var(--amber3)}
.card h2{margin:14px 0 8px;font-size:24px;font-weight:900}
.card p{margin:0 0 16px;line-height:1.85;color:#cdd8e6;font-size:14.5px}
.muted{color:var(--mut)}
.rowbtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:var(--body);
  font-size:14px;font-weight:700;color:var(--ink);background:rgba(255,255,255,.06);
  border:1px solid var(--line2);border-radius:12px;padding:11px 18px;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.btn svg{width:16px;height:16px}
.btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.1);box-shadow:0 10px 24px rgba(0,0,0,.45)}
.btn:active{transform:translateY(0)}
.btn.primary{background:linear-gradient(180deg,var(--amber2),var(--amber));border-color:transparent;color:#1a1005;
  box-shadow:0 8px 26px rgba(217,119,6,.35)}
.btn.primary svg{color:#1a1005}
.btn.primary:hover{box-shadow:0 12px 34px rgba(245,158,11,.5)}
.btn.big{font-size:17px;padding:15px 34px;border-radius:14px}
.btn.sm{font-size:12px;padding:7px 12px}
.btn:disabled{opacity:.42;cursor:not-allowed;transform:none!important}
button:focus-visible,.chip:focus-visible,.pick:focus-visible{outline:2px solid var(--amber2);outline-offset:2px}

/* ---------- menu ---------- */
#menu .ov-scroll{width:min(1000px,95vw);margin:auto;padding:30px 4px}
.brand{text-align:center;margin-bottom:26px}
.brand .tag{font-family:var(--mono);font-size:11px;letter-spacing:.32em;color:var(--amber2)}
.brand h1{margin:10px 0 6px;font-size:clamp(38px,7vw,74px);font-family:var(--head);letter-spacing:.02em;
  text-shadow:0 6px 40px rgba(0,0,0,.7)}
.brand h1 span{color:var(--amber2);text-shadow:0 0 26px rgba(245,158,11,.45)}
.brand .sub{max-width:660px;margin:0 auto;color:#c3cede;line-height:1.9;font-size:15px}
.sect{margin:22px 0}
.sect-head{display:flex;align-items:center;gap:8px;font-size:12.5px;letter-spacing:.14em;color:var(--mut);margin-bottom:12px}
.sect-head svg{width:15px;height:15px;color:var(--amber2)}
.chargrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px}
.pick{position:relative;cursor:pointer;text-align:right;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:15px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  backdrop-filter:blur(9px);overflow:hidden;font-family:var(--body);color:var(--ink)}
.pick:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.5)}
.pick.on{border-color:var(--amber2);box-shadow:0 0 0 1px var(--amber2),0 16px 40px rgba(217,119,6,.28)}
.pick .ptop{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.pick .face{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  font-weight:900;font-size:17px;color:#0d1218;font-family:var(--head)}
.pick .pn{font-size:17px;font-weight:900}
.pick .pr{font-size:11.5px;color:var(--mut);letter-spacing:.06em}
.pick .pp{font-size:12.5px;color:#bccbdc;line-height:1.75;margin:6px 0 10px}
.pick .pstats{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;font-family:var(--mono);font-size:11px;color:#a9b8c9}
.pick .pstats i{opacity:.65}
.pick .ab{margin-top:9px;font-size:11.5px;border-top:1px dashed var(--line);padding-top:8px;color:var(--amber3)}
.diffrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.diff{cursor:pointer;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px;
  transition:transform .18s ease,border-color .18s ease;font-family:var(--body);color:var(--ink);text-align:right}
.diff:hover{transform:translateY(-2px)}
.diff.on{border-color:var(--amber2);background:rgba(217,119,6,.12)}
.diff b{display:block;font-size:15px;margin-bottom:3px}
.diff small{color:var(--mut);line-height:1.6}
.menu-actions{display:flex;gap:12px;justify-content:center;margin:26px 0 12px;flex-wrap:wrap}
.hint{text-align:center;color:var(--mut);font-size:12px}

/* ---------- weapon wheel ---------- */
#wheel{background:transparent}
.wheel-wrap{position:relative;width:min(560px,90vw);height:min(560px,90vw);display:grid;place-items:center}
.wheel-center{position:absolute;width:170px;height:170px;border-radius:50%;background:var(--panel2);
  border:1px solid var(--line2);display:grid;place-items:center;text-align:center;gap:4px;
  box-shadow:0 0 50px rgba(0,0,0,.7),inset 0 0 30px rgba(255,255,255,.03);z-index:2}
.wheel-center small{color:var(--mut);font-size:11px}
.wheel-center b{font-size:19px;font-family:var(--head)}
.wheel-center span{font-size:10.5px;color:var(--mut);font-family:var(--mono)}
.wheel-slots{position:absolute;inset:0}
.witem{position:absolute;width:158px;padding:12px;border-radius:14px;background:var(--panel);
  border:1px solid var(--line);text-align:center;backdrop-filter:blur(8px);transition:.16s}
.witem .n{font-family:var(--mono);font-size:10px;color:var(--mut)}
.witem .t{font-size:14px;font-weight:800;margin:4px 0 3px}
.witem .a{font-family:var(--mono);font-size:12px;color:var(--amber2)}
.witem.on{border-color:var(--amber2);box-shadow:0 0 24px rgba(245,158,11,.3);transform:scale(1.06)}
.witem.empty{opacity:.35;border-style:dashed}
.witem.pos0{left:50%;top:6px;transform:translateX(-50%)}
.witem.pos1{right:6px;top:50%;transform:translateY(-50%)}
.witem.pos2{left:50%;bottom:6px;transform:translateX(-50%)}
.witem.pos3{left:6px;top:50%;transform:translateY(-50%)}
.witem.pos0.on{transform:translateX(-50%) scale(1.06)}
.witem.pos1.on{transform:translateY(-50%) scale(1.06)}
.witem.pos2.on{transform:translateX(-50%) scale(1.06)}
.witem.pos3.on{transform:translateY(-50%) scale(1.06)}

/* ---------- map ---------- */
.mapbox{width:min(1240px,96vw);background:var(--panel2);border:1px solid var(--line2);border-radius:18px;
  padding:16px;box-shadow:var(--sh)}
.map-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px;flex-wrap:wrap}
.map-head .mt{display:flex;align-items:center;gap:9px;font-weight:800;font-size:16px}
.map-head svg{width:17px;height:17px;color:var(--amber2)}
.map-legend{display:flex;gap:14px;font-size:12px;color:var(--mut)}
.map-legend i.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-inline-end:5px}
.dot.teal{background:var(--teal)} .dot.amber{background:var(--amber2)}
.dot.red{background:var(--red)} .dot.white{background:#fff}
#mapCanvas{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);background:#070c11;
  cursor:crosshair;display:block}
.map-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;gap:14px;flex-wrap:wrap}
.map-foot span{font-size:12.5px;color:var(--mut)}

/* ---------- shop ---------- */
.shoplist{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin:6px 0 18px}
.srow{display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:13px;padding:12px 14px;transition:.16s}
.srow:hover{border-color:var(--line2);background:rgba(255,255,255,.06)}
.srow .si{display:flex;gap:10px;align-items:center}
.srow .si svg{width:17px;height:17px;color:var(--amber2)}
.srow b{display:block;font-size:14px}
.srow small{color:var(--mut);font-size:11.5px}
.srow .lv{font-family:var(--mono);font-size:11px;color:var(--teal)}
.srow .pr{font-family:var(--mono);font-size:12px;color:var(--amber3);white-space:nowrap}

/* ---------- stats & help ---------- */
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.st{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:11px 13px}
.st b{display:block;font-family:var(--mono);font-size:22px;color:#fff}
.st small{color:var(--mut);font-size:11.5px}
.steps{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.stp{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:#c9d5e3}
.stp svg{width:15px;height:15px;color:var(--amber2);flex:0 0 auto;margin-top:2px}
.helpgrid{display:grid;grid-template-columns:1fr;gap:0;margin:8px 0 20px}
.hrow{display:flex;justify-content:space-between;gap:16px;padding:9px 4px;border-bottom:1px dashed var(--line);font-size:13.5px}
.hrow kbd{font-family:var(--mono);font-size:12px;background:rgba(255,255,255,.08);border:1px solid var(--line2);
  border-radius:7px;padding:3px 9px;color:#fff;white-space:nowrap}
.hrow span{color:#b9c6d5}
@media (max-width:820px){
  .p-mission{width:210px}
  .p-feed{display:none}
  .p-vitals{width:230px}
  .p-weapon .wmain{min-width:130px}
  .ammo b{font-size:24px}
  .chargrid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}