/* صولة الممالك */
:root{
  --ink:#0B1719; --ink2:#13262A; --ink3:#1A3236; --sand:#F2E3C2; --sand2:#E3CC9C; --cream:#F4E6C8; --gold:#E2B572; --gold2:#F2D9A8;
  --teal:#1F8A87; --teal2:#2BB3AC; --tealD:#127572; --mint:#7FE0D6; --muted:#8FB5AE; --red:#B23A26; --redL:#FF8A6A; --brown:#2A1A12;
  --kufi:'Noto Kufi Arabic','IBM Plex Sans Arabic',sans-serif; --body:'IBM Plex Sans Arabic',system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#05080A;font-family:var(--body);color:var(--cream)}
button,input,select,textarea{font-family:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
::-webkit-scrollbar{width:0;height:0}
*{scrollbar-width:none}
#frame{position:fixed;inset:0;display:flex;align-items:flex-start;justify-content:center;overflow:hidden;background:radial-gradient(circle at 50% 30%,#13262A,#05080A)}
#stage{position:relative;width:390px;transform-origin:top center;overflow:hidden;background:var(--ink)}
#view{position:absolute;inset:0;overflow:hidden}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;animation:enter .28s ease-out both}
@keyframes enter{from{opacity:0;transform:translateY(8px) scale(.99);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
.scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;position:relative}
.scroll>*{flex-shrink:0}
.head,.tabs{position:relative}
.kufi{font-family:var(--kufi)}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.row{display:flex;align-items:center;gap:10px}
.col{display:flex;flex-direction:column;gap:6px}
.grow{flex:1;min-width:0}
.muted{color:var(--muted)}
.ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* أزرار */
.btn{height:52px;border-radius:26px;border:0;display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--kufi);font-weight:700;font-size:17px;color:#FFF6E2;background:linear-gradient(180deg,#2BB3AC,#127572);box-shadow:0 6px 16px rgba(18,117,114,.3);width:100%;padding:0 18px;transition:transform .1s,filter .15s}
.btn:active{transform:scale(.97)}
.btn[disabled],.btn.off{background:#3A4A48;color:#9AA8A6;box-shadow:none;cursor:default}
.btn.gold{background:linear-gradient(180deg,#F2D58A,#B8862F);color:#2A1A12;box-shadow:0 6px 16px rgba(226,181,114,.3)}
.btn.red{background:linear-gradient(180deg,#C8452C,#8E1E12);box-shadow:0 6px 16px rgba(178,58,38,.3)}
.btn.ghost{background:transparent;border:1.5px solid rgba(242,217,168,.45);color:var(--gold2);box-shadow:none}
.btn.sm{height:42px;font-size:14px;border-radius:21px;width:auto}
.icon-btn{width:44px;height:44px;border-radius:14px;background:rgba(143,214,204,.08);border:1px solid rgba(143,214,204,.25);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#BFEDE6}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:8px;font-size:12px;font-weight:700}
.badge{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#C2321E;color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--ink)}

/* كروت */
.card{border-radius:16px;background:var(--ink2);border:1px solid rgba(143,214,204,.16);padding:14px}
.parch{border-radius:18px;background:linear-gradient(180deg,#F2E3C2,#E3CC9C);color:var(--brown);padding:14px}
.tile{padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.06);display:flex;flex-direction:column;gap:2px}
.parch .tile{background:rgba(255,251,240,.7)}
.bar{height:6px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.bar>span{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#1F8A87,#7FE0D6);transition:width .9s linear}

/* ترويسة الشاشات */
.head{flex-shrink:0;padding:12px 12px 0;display:flex;align-items:center;gap:8px}
.head h1{margin:0;font-family:var(--kufi);font-weight:800;font-size:24px;color:var(--gold2)}
.tabs{flex-shrink:0;margin:12px 16px 0;padding:4px;display:grid;gap:4px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(143,214,204,.2)}
.tabs button{height:42px;border-radius:10px;border:0;background:transparent;color:#BFEDE6;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px}
.tabs button.on{background:var(--gold2);color:#1A120C;font-weight:700}

/* الشريط السفلي */
.nav{position:absolute;left:0;right:0;bottom:0;height:calc(72px + var(--safe-b,0px));z-index:20;background:#0B1719;border-top:1px solid rgba(226,181,114,.35);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:6px 4px calc(8px + var(--safe-b,0px))}
.nav button{background:transparent;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted);font-size:11px;font-weight:600;position:relative}
.nav button.on{color:var(--gold2);font-weight:700}
.nav button.on svg{stroke:var(--gold2)}
.nav .dot{position:absolute;top:4px;right:calc(50% - 18px);width:8px;height:8px;border-radius:4px;background:#E0573A}
.pad-nav{padding-bottom:calc(92px + var(--safe-b,0px)) !important}

/* الموارد */
.hud{flex-shrink:0;padding:10px 10px 12px;background:linear-gradient(180deg,rgba(8,14,16,.96),rgba(8,14,16,.86) 75%,rgba(8,14,16,0));display:flex;flex-direction:column;gap:8px;z-index:5;position:relative}
.res-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.res{height:40px;padding:0 7px;border-radius:10px;background:rgba(255,255,255,.07);border:1px solid rgba(143,214,204,.22);display:flex;align-items:center;gap:6px}
.res b{font-size:13px;display:block;line-height:1.1}
.res small{font-size:10px;color:var(--muted);display:block}
.res.full b{color:#FFB08A}

/* اللوحات المنبثقة */
#sheet-root{position:absolute;inset:0;z-index:50;pointer-events:none}
.sheet-wrap{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;pointer-events:auto;background:rgba(5,8,10,.55);animation:fade .2s ease-out}
.sheet-wrap.center{justify-content:center;padding:24px}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{border-radius:24px 24px 0 0;background:linear-gradient(180deg,#F2E3C2,#E3CC9C);color:var(--brown);padding:16px 16px calc(22px + var(--safe-b,0px));display:flex;flex-direction:column;gap:12px;box-shadow:0 -10px 30px rgba(0,0,0,.5);max-height:88%;overflow-y:auto;animation:up .25s ease-out}
.sheet.dark{background:#10201F;color:var(--cream);border-top:1.5px solid var(--gold)}
.center .sheet{border-radius:22px;animation:pop .25s ease-out}
@keyframes up{from{transform:translateY(40px);opacity:.5}to{transform:none;opacity:1}}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:none;opacity:1}}
.sheet h2{margin:0;font-family:var(--kufi);font-weight:800;font-size:19px}
.x-btn{width:44px;height:44px;border-radius:22px;background:rgba(42,26,18,.08);border:0;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sheet.dark .x-btn{background:rgba(255,255,255,.08)}

/* نماذج */
.field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}
.input{height:52px;padding:0 14px;border-radius:14px;border:1.5px solid rgba(143,214,204,.3);background:rgba(255,255,255,.06);color:var(--cream);font-size:16px;outline:none;width:100%}
.input:focus{border-color:var(--mint)}
.parch .input,.sheet:not(.dark) .input{background:#FBF4E2;border-color:#CBA86E;color:var(--brown)}
.stepper{display:flex;align-items:center;gap:8px}
.stepper button{width:44px;height:44px;border-radius:12px;font-size:22px;font-weight:700;border:1px solid rgba(42,26,18,.2);background:rgba(42,26,18,.08);color:var(--brown);flex-shrink:0}
.stepper .val{flex:1;height:44px;border-radius:12px;background:#FBF4E2;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:700;border:0;text-align:center;color:var(--brown);width:100%;min-width:0}
.dark .stepper button{border-color:rgba(242,217,168,.3);background:rgba(255,255,255,.08);color:var(--gold2)}
.dark .stepper .val{background:rgba(0,0,0,.3);color:#FFF1D2}

/* تنبيه */
#toast{position:absolute;left:16px;right:16px;top:calc(14px + var(--safe-t,0px));z-index:60;pointer-events:none;display:flex;justify-content:center}
#toast .t{padding:12px 16px;border-radius:14px;background:#10201F;border:1.5px solid var(--gold);color:var(--cream);font-size:14px;font-weight:600;box-shadow:0 10px 24px rgba(0,0,0,.45);animation:pop .2s ease-out;max-width:100%}
#toast .t.err{border-color:var(--redL);background:#2A1210}

/* المباني على الخريطة */
.plaque{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:5px;height:26px;padding:0 4px 0 9px;border-radius:13px;background:rgba(10,16,18,.86);border:1px solid rgba(226,181,114,.55);box-shadow:0 3px 8px rgba(0,0,0,.35);white-space:nowrap}
.plaque b{font-size:12px;color:var(--cream)}
.plaque i{font-style:normal;min-width:20px;height:20px;padding:0 4px;border-radius:10px;background:var(--gold);color:var(--brown);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.hot{position:absolute;z-index:2;background:transparent;border:0;border-radius:14px;padding:0}
.hot.sel{background:rgba(255,246,226,.2);outline:2px dashed #FFF6E2}

/* الحركات */
@keyframes flicker{0%,100%{opacity:1}45%{opacity:.75}60%{opacity:.95}}
@keyframes wave{0%,100%{transform:skewY(0)}50%{transform:skewY(-7deg)}}
@keyframes sway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
@keyframes ripple{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes ember{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translate(24px,-380px);opacity:0}}
@keyframes ember2{0%{transform:translateY(0);opacity:0}20%{opacity:.9}100%{transform:translate(-30px,-320px);opacity:0}}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes breathe{0%,100%{box-shadow:0 8px 24px rgba(31,138,135,.35)}50%{box-shadow:0 8px 34px rgba(60,200,190,.65)}}
@keyframes smoke{0%{transform:translate(0,0) scale(.6);opacity:0}20%{opacity:.55}100%{transform:translate(-14px,-60px) scale(1.6);opacity:0}}
@keyframes fly{0%{transform:translateX(0)}100%{transform:translateX(-460px)}}
@keyframes flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.4)}}
@keyframes cloud{0%{transform:translateX(0)}100%{transform:translateX(-80px)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes ring{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.6);opacity:0}}
@keyframes dash{to{stroke-dashoffset:-40}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes spin{to{transform:rotate(360deg)}}
.fl{animation:flicker 1.6s ease-in-out infinite}
.wv{animation:wave 2.2s ease-in-out infinite;transform-box:fill-box;transform-origin:left center}
.sw{animation:sway 4.5s ease-in-out infinite;transform-box:fill-box;transform-origin:center bottom}
.rp{animation:ripple 2.4s ease-in-out infinite}
.e1{animation:ember 6s linear infinite}
.e2{animation:ember2 7.5s linear infinite}
.tw{animation:twinkle 3s ease-in-out infinite}
.br{animation:breathe 3s ease-in-out infinite}
.smk{animation:smoke 4s ease-out infinite;transform-box:fill-box;transform-origin:center}
.fly{animation:fly 22s linear infinite}
.flap{animation:flap .5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.cl{animation:cloud 30s ease-in-out infinite alternate}
.bob{animation:bob 1.2s ease-in-out infinite}
.ring{animation:ring 2s ease-out infinite}
.march{animation:dash 1.6s linear infinite}
.pl{animation:pulse 1.4s ease-in-out infinite}
.spin{animation:spin 1s linear infinite}
@media (prefers-reduced-motion:reduce){*{animation:none !important}}