:root{
  --navy:#111d45;--navy2:#1b2a5e;--gold:#b8892b;--gold2:#d9b25c;--ink:#4a3216;
  --parch:#efe0bd;--parch2:#e4cf9f;--red:#9e2a2b;--green:#1f6f50;--blue:#1d4e89;
  --t0:#9e2a2b;--t1:#1f6f50;--t2:#1d4e89;
  --frame:20px;
  --ruqaa:'Aref Ruqaa','Amiri',serif;--ui:'IBM Plex Sans Arabic','Amiri',sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100dvh}
body{
  font-family:var(--ui);color:var(--ink);direction:rtl;font-variant-numeric:lining-nums;
  background:
    radial-gradient(ellipse at 22% 18%,rgba(255,246,222,.75),transparent 45%),
    radial-gradient(ellipse at 78% 70%,rgba(214,186,128,.45),transparent 50%),
    radial-gradient(circle at 60% 30%,rgba(190,150,90,.18),transparent 30%),
    radial-gradient(circle at 15% 85%,rgba(160,115,60,.22),transparent 35%),
    linear-gradient(160deg,var(--parch),var(--parch2));
  background-attachment:fixed;
}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.33;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .24 0 0 0 0 .1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(90,52,14,.32) 82%,rgba(52,26,4,.62) 100%);}
.frame i{position:fixed;z-index:50;pointer-events:none;background-color:var(--navy);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23b8892b' stroke-width='1.5'%3E%3Crect x='12' y='12' width='16' height='16'/%3E%3Crect x='12' y='12' width='16' height='16' transform='rotate(45 20 20)'/%3E%3Cpath d='M0 20h6M34 20h6M20 0v6M20 34v6'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='3' fill='%23d9b25c'/%3E%3Cpath d='M0 0l5 0 0 5zM40 40l-5 0 0-5z' fill='%23b8892b'/%3E%3C/svg%3E");
  background-size:var(--frame) var(--frame);box-shadow:0 0 0 2px var(--gold) inset}
.frame i:nth-child(1){top:0;left:0;right:0;height:var(--frame)}
.frame i:nth-child(2){bottom:0;left:0;right:0;height:var(--frame)}
.frame i:nth-child(3){top:0;bottom:0;left:0;width:var(--frame)}
.frame i:nth-child(4){top:0;bottom:0;right:0;width:var(--frame)}
.frame b{position:fixed;inset:var(--frame);border:2px solid var(--gold);outline:1px solid rgba(17,29,69,.6);outline-offset:3px;pointer-events:none;z-index:49}
.page{position:relative;z-index:3}
.logo{mix-blend-mode:multiply;display:block}
.title{font-family:var(--ruqaa);color:var(--gold);font-weight:700;margin:0;line-height:1.1;
  text-shadow:0 1px 0 #6b4a12,0 3px 0 rgba(42,26,6,.85),0 6px 14px rgba(42,26,6,.35)}
.subtitle{font-family:var(--ruqaa);color:var(--navy);margin:0}
.btn{font-family:var(--ui);font-weight:700;border:0;cursor:pointer;border-radius:4px;color:var(--parch);
  background:linear-gradient(180deg,var(--navy2),var(--navy));box-shadow:inset 0 0 0 2px var(--gold),inset 0 0 0 4px var(--navy),0 3px 0 #070c22;
  padding:.7em 1.2em;font-size:18px;transition:transform .12s,opacity .2s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.4em}
.btn:active{transform:translateY(2px)}
.btn:disabled{opacity:.42;cursor:not-allowed}
.btn.gold{background:linear-gradient(180deg,var(--gold2),var(--gold));color:var(--navy);box-shadow:inset 0 0 0 2px #7a5813,0 3px 0 #6b4a12}
.btn.ghost{background:rgba(239,224,189,.6);color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}
.btn.ok{background:linear-gradient(180deg,#2a8a64,var(--green));box-shadow:inset 0 0 0 2px var(--gold2),0 3px 0 #0e3a29}
.btn.bad{background:linear-gradient(180deg,#b93a3a,var(--red));box-shadow:inset 0 0 0 2px var(--gold2),0 3px 0 #4f1414}
.num{font-family:var(--ui);direction:ltr;unicode-bidi:isolate}

/* ---------- MAP (geographic SVG) ---------- */
.map{position:relative;direction:ltr;width:100%;height:100%}
.map svg.geo{display:block;width:100%;height:100%;overflow:hidden}
.geo .sea{fill:#bdc7b5}
.geo .coastline path{fill:none;stroke:#3f5f78;stroke-linejoin:round}
.geo .coastline .w1{stroke-width:22;stroke-opacity:.06}
.geo .coastline .w2{stroke-width:12;stroke-opacity:.09}
.geo .coastline .w3{stroke-width:5;stroke-opacity:.16}
.geo .coastline .landfill{fill:#f3e7c7;stroke:#5a3b17;stroke-width:1.4;stroke-opacity:.9}
.geo .rhumb line{stroke:#5a3b17;stroke-opacity:.1;stroke-width:.8}
.geo .rhumb.onland line{stroke-opacity:.06}
.geo .terr{filter:blur(5px)}
.geo .rivers path{fill:none;stroke:#46708f;stroke-width:2.2;stroke-opacity:.75;stroke-linecap:round;stroke-linejoin:round}
.geo .rivers text{font:400 15px var(--ruqaa);fill:#33526b;fill-opacity:.85;text-anchor:middle}
.geo .labels text{text-anchor:middle;dominant-baseline:central}
.geo .labels .reg{font:700 30px var(--ruqaa);fill:#5a3b17;fill-opacity:.32;letter-spacing:3px}
.geo .labels .sea{font:400 24px var(--ruqaa);fill:#2c4a63;fill-opacity:.5;letter-spacing:2px}
.geo .rose{opacity:.55}
.geo .holy text{font:700 17px var(--ruqaa);fill:#111d45;text-anchor:end;paint-order:stroke;stroke:#f1e4c3;stroke-width:3px}
.geo .routes path{fill:none;stroke:#4a3216;stroke-opacity:.5;stroke-width:2.2;stroke-dasharray:1 7;stroke-linecap:round}
.geo .routes path.hot{stroke:#9e2a2b;stroke-opacity:.95;stroke-width:3.4;stroke-dasharray:2 7}
.geo .leaders line{stroke:#4a3216;stroke-opacity:.55;stroke-width:1.2}
.geo .leaders circle{fill:#4a3216;fill-opacity:.7}
.geo .city .nm{font:700 25px var(--ruqaa);fill:#3b2610;text-anchor:middle;paint-order:stroke;stroke:#f3e7c8;stroke-width:5px;stroke-linejoin:round}
.geo .city .nm.cap{font-size:29px}
.geo .city .nm.town{font:500 15px var(--ui);fill:#4a3216;fill-opacity:.8;stroke-width:3px}
.geo .city .sealg{transform-box:fill-box;transform-origin:center;transition:transform .25s}
.geo .city .sealg svg{filter:drop-shadow(0 3px 2px rgba(60,35,8,.4))}
.geo .city .ring{fill:none;stroke:none;transform-box:fill-box;transform-origin:center}
.geo .city.tap{cursor:pointer}
.geo .city.tap:focus{outline:none}
.geo .city.sel .ring{stroke:#b8892b;stroke-width:3.5;stroke-dasharray:7 6;animation:spin 9s linear infinite}
.geo .city.sel .sealg{animation:pulse 1.4s ease-in-out infinite}
.geo .city.can .ring{stroke:#d9b25c;stroke-width:4;filter:drop-shadow(0 0 4px #d9b25c)}
.geo .city.target .ring{stroke:#9e2a2b;stroke-width:4.5;animation:pulse 1s ease-in-out infinite}
.geo .city.dim{opacity:.35}
.seal-val{font-family:var(--ui);font-weight:700;font-size:38px}
@keyframes pulse{50%{transform:scale(1.1)}}
@keyframes spin{to{transform:rotate(360deg)}}
.geo .city.stamp .sealg{animation:stamp .7s cubic-bezier(.3,1.6,.5,1) both}
@keyframes stamp{0%{transform:scale(1.8) rotate(-8deg);opacity:0}45%{opacity:1;transform:scale(.92)}70%{transform:scale(1.04)}100%{transform:scale(1)}}
.geo .splash{fill:none;stroke-width:5;transform-box:fill-box;transform-origin:center;opacity:0;animation:splash .9s .25s ease-out forwards}
@keyframes splash{0%{transform:scale(.6);opacity:.85}100%{transform:scale(2.4);opacity:0;stroke-width:1}}
.geo .shatter{transform-box:fill-box;transform-origin:center;animation:shatter .7s ease-in forwards}
@keyframes shatter{30%{transform:scale(1.05)}100%{transform:scale(1.5) rotate(25deg);opacity:0}}
.geo .city.restamp .sealg{animation:stamp .7s .65s cubic-bezier(.3,1.6,.5,1) both}
.geo .swords{transform-box:fill-box;transform-origin:center;animation:clash .8s cubic-bezier(.3,1.6,.5,1) both;filter:drop-shadow(0 3px 2px rgba(60,10,10,.45))}
@keyframes clash{from{transform:scale(2.2) rotate(-30deg);opacity:0}}

.toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%) translateY(20px);opacity:0;z-index:200;background:var(--red);color:var(--parch);padding:12px 18px;border-radius:4px;box-shadow:inset 0 0 0 2px var(--gold2),0 6px 20px rgba(0,0,0,.3);font-weight:700;max-width:90vw;transition:.25s;pointer-events:none;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%)}
.toast.info{background:var(--navy)}