@font-face{font-family:Cairo;src:url(../fonts/cairo.woff2) format('woff2');font-weight:200 900;font-display:swap}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#1d120a;font-family:Cairo,Tahoma,sans-serif;color:#f6e7c8;user-select:none;-webkit-user-select:none;touch-action:none}
#cv{position:fixed;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
button{font-family:inherit;cursor:pointer;border:1px solid #c9a35a;background:linear-gradient(#5a3a1e,#3b2412);color:#f8e9c8;border-radius:10px;padding:8px 12px;font-size:15px;font-weight:700}
button:active{transform:translateY(1px)}
button.gold{background:linear-gradient(#e8bf5c,#a8741f);color:#2b1a08;border-color:#ffe3a0}
button.dis,button:disabled{opacity:.5;filter:grayscale(.6);cursor:not-allowed}
button.ghost{background:rgba(0,0,0,.35)}
.ov{position:fixed;inset:0;z-index:30}
#intro{pointer-events:auto}
.introcap{position:absolute;bottom:18%;width:100%;text-align:center;font-size:26px;font-weight:800;text-shadow:0 2px 12px #000;animation:fadein 2s}
#skipIntro{position:absolute;top:calc(14px + env(safe-area-inset-top));left:14px}
@keyframes fadein{from{opacity:0}to{opacity:1}}
#menu{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:radial-gradient(ellipse at center,rgba(0,0,0,.05),rgba(20,10,4,.65))}
.logo{text-align:center;animation:fadein 1.2s}
.logo .l1{font-size:46px;font-weight:900;color:#ffd77a;text-shadow:0 3px 0 #6b3b10,0 6px 22px #000;line-height:1.1}
.logo .l2{font-size:28px;font-weight:800;color:#f3e2b8;text-shadow:0 2px 10px #000}
.logo .l3{font-size:12px;letter-spacing:4px;color:#e6c27a;direction:ltr}
.mbtns{display:flex;flex-direction:column;gap:10px;width:min(320px,86vw)}
.mbtns button{font-size:18px;padding:12px;display:flex;flex-direction:column;align-items:center}
.mbtns small{font-size:11px;font-weight:600;opacity:.9}
.ver{font-size:11px;opacity:.7}
#hud{position:fixed;inset:0;pointer-events:none;z-index:10}
#hud>*{pointer-events:auto}
#top{position:absolute;top:0;right:0;left:0;display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:calc(4px + env(safe-area-inset-top)) 6px 4px;background:linear-gradient(rgba(40,22,8,.95),rgba(40,22,8,.75));border-bottom:2px solid #a8741f}
.res{background:rgba(0,0,0,.35);border:1px solid #6b4a22;border-radius:8px;padding:1px 7px;font-size:14px;white-space:nowrap}
.res b{color:#ffe1a0}
.res.low b{color:#ff7a5a}
.spd{margin-inline-start:auto;display:flex;gap:3px}
.spd button{padding:2px 7px;font-size:13px;border-radius:7px}
.spd button.on{background:linear-gradient(#e8bf5c,#a8741f);color:#2b1a08}
#waveBar{position:absolute;top:44px;left:50%;transform:translateX(-50%);font-size:13px;background:rgba(80,10,5,.75);border:1px solid #d65a3a;border-radius:10px;padding:2px 10px;pointer-events:none;white-space:nowrap}
#waveBar:empty{display:none}
#rightTabs{position:absolute;right:6px;top:84px;display:flex;flex-direction:column;gap:6px}
#rightTabs button{width:54px;padding:6px 0;font-size:20px;display:flex;flex-direction:column;align-items:center;line-height:1.1}
#rightTabs button span{font-size:10px}
#rightTabs button.on{background:linear-gradient(#e8bf5c,#a8741f);color:#2b1a08}
#panel{position:absolute;right:66px;top:84px;width:min(300px,calc(100vw - 150px));max-height:calc(100% - 210px);overflow:auto;background:rgba(40,24,10,.94);border:2px solid #a8741f;border-radius:12px;padding:8px}
.ph{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.ph button{padding:2px 9px}
.card{display:flex;gap:8px;align-items:center;background:rgba(0,0,0,.28);border:1px solid #6b4a22;border-radius:10px;padding:6px;margin-bottom:6px}
.card .ic{font-size:26px}
.card .tx{flex:1;font-size:12px;line-height:1.35}
.card .tx b{font-size:14px;color:#ffd77a}
.card.no{opacity:.55}
.card button{padding:5px 9px;font-size:13px}
.cost{color:#ffe1a0;font-size:12px}
.cost .bad{color:#ff7a5a}
.qdone{color:#9be37a}
.note{font-size:12px;opacity:.85;line-height:1.5}
#left{position:absolute;left:6px;top:84px;display:flex;flex-direction:column;gap:6px;width:132px}
#mini{width:128px;height:128px;border:2px solid #a8741f;border-radius:8px;background:#c7a467}
#log{font-size:11px;line-height:1.35;background:rgba(0,0,0,.45);border-radius:8px;padding:4px 6px;max-height:110px;overflow:hidden;pointer-events:none}
#log div{animation:fadein .5s}
#sel{position:absolute;bottom:calc(6px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(560px,calc(100vw - 12px));background:rgba(40,24,10,.95);border:2px solid #a8741f;border-radius:12px;padding:8px;font-size:13px}
#sel .row{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:6px}
#sel .row button{padding:5px 9px;font-size:13px}
.hpbar{height:7px;background:#3a1a0a;border-radius:4px;overflow:hidden;margin:4px 0}
.hpbar i{display:block;height:100%;background:linear-gradient(90deg,#5fd35a,#c9e35a)}
.qbar{height:5px;background:#3a1a0a;border-radius:3px;overflow:hidden}.qbar i{display:block;height:100%;background:#ffd77a}
#placeBar{position:absolute;bottom:calc(8px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;gap:6px;align-items:center;background:rgba(40,24,10,.95);border:2px solid #a8741f;border-radius:12px;padding:6px 8px;font-size:13px;max-width:calc(100vw - 12px)}
#boxBtn{position:absolute;left:6px;bottom:calc(150px + env(safe-area-inset-bottom));font-size:20px;width:46px;height:46px;padding:0}
#boxBtn.on{background:linear-gradient(#e8bf5c,#a8741f);color:#2b1a08}
#boxSel{position:absolute;border:2px dashed #ffd77a;background:rgba(255,215,122,.12);display:none;pointer-events:none}
#advisor{position:absolute;left:50%;transform:translateX(-50%);top:130px;width:min(460px,calc(100vw - 140px));display:flex;gap:8px;align-items:center;background:rgba(40,24,10,.96);border:2px solid #ffd77a;border-radius:14px;padding:8px;box-shadow:0 6px 24px #000a}
#advisor .face{font-size:38px}
#advisor .atxt{flex:1;font-size:13px}#advisor p{margin:2px 0 0;line-height:1.5}
#modal{display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55)}
#modal .box{width:min(380px,90vw);background:linear-gradient(#4a2e16,#2b1a0b);border:2px solid #ffd77a;border-radius:16px;padding:14px;text-align:center}
#modal h2{margin:0 0 8px;color:#ffd77a}
#mBtns{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.setrow{display:flex;justify-content:space-between;align-items:center;margin:8px 0;font-size:15px}
#toast{position:fixed;bottom:30%;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.8);border:1px solid #ffd77a;border-radius:10px;padding:6px 14px;z-index:40;font-size:14px;opacity:0;transition:opacity .3s;pointer-events:none}
#toast.show{opacity:1}
@media (max-width:600px){
  .res{font-size:12px;padding:0 5px}
  #left{width:100px}#mini{width:96px;height:96px}#log{max-height:80px;font-size:10px}
  #panel{right:64px;width:calc(100vw - 76px - 0px);max-width:300px}
  #advisor{top:auto;bottom:calc(170px + env(safe-area-inset-bottom));width:calc(100vw - 20px)}
  .logo .l1{font-size:38px}
}
#placeInfo{flex:1;min-width:0}
@media (max-width:600px){
  #placeBar{width:calc(100vw - 16px)}
  #advisor{top:84px;bottom:auto;left:110px;right:66px;width:auto;transform:none;padding:6px}
  #advisor .face{font-size:28px}#advisor .atxt{font-size:12px}
  #sel{max-height:42vh;overflow:auto}
}
@media (max-width:600px){
  #waveBar{top:74px;font-size:12px}
  #left,#rightTabs,#panel{top:102px}
  #advisor{top:102px}
  #boxBtn{bottom:auto;top:320px}
}
#panel{z-index:5}
/* ===== v2 مرحلة 5: لوحة معلومات أوضح وأزرار أكبر للمس ===== */
#sel{font-size:14px;padding:10px}
#sel .sh{display:flex;align-items:center;gap:10px}
#sel .sic{font-size:34px;line-height:1;filter:drop-shadow(0 2px 2px #0008)}
#sel .stt{flex:1;min-width:0}
#sel .stt b{font-size:17px}
#sel .enemy{background:#8a2a1e;color:#fff;border-radius:6px;padding:0 6px;font-size:12px;margin-inline-start:4px}
#sel .x{min-width:44px;min-height:44px;padding:0;font-size:18px}
#sel .chips{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}
#sel .chip{background:#2a1808;border:1px solid #7a5428;border-radius:20px;padding:2px 9px;font-size:13px;white-space:nowrap}
#sel .sdesc{opacity:.85;font-size:13px}
#sel .scost{margin-top:4px;font-size:13px}
#sel .scost span,#sel button small span{margin-inline-end:4px}
#sel .sst{margin-top:4px}
#sel .cmdh{margin-top:8px;font-size:12px;color:#e8bf5c;font-weight:700}
#sel .cmds{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:6px;margin-top:4px}
#sel .cmds button{min-height:46px;padding:6px 8px;font-size:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.25}
#sel .cmds button small{font-size:11px;font-weight:600;opacity:.95}
#sel .cmds button .bi{font-size:20px}
#sel button.danger{background:linear-gradient(#7a2a1e,#4a1610)}
.bad{color:#ff8a6a}
#rightTabs button{width:60px;min-height:54px;font-size:22px}
#rightTabs button span{font-size:11px;font-weight:700}
.card button{min-height:40px;font-size:14px;padding:6px 12px}
@media (pointer:coarse){
  button{min-height:44px}
  .spd button{min-height:34px;min-width:34px;font-size:14px}
  #sel .cmds button{min-height:50px}
  .card button{min-height:44px}
}
@media (max-width:600px){
  #sel .cmds{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
  #sel .sic{font-size:28px}
  #sel{max-height:46vh}
}

/* ===== قائمة 3D جديدة: لوحة عربية RTL على مشهد حي ===== */
#menu{display:block;background:linear-gradient(90deg,rgba(20,10,4,.0) 35%,rgba(20,10,4,.55) 100%);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#menu .mwrap{position:absolute;top:0;bottom:0;right:0;width:min(380px,100%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:16px}
#menu .logo{text-align:center;animation:fadein 1.2s}
#menu .mpanel{width:100%;display:flex;flex-direction:column;gap:9px;background:rgba(36,20,8,.66);border:1px solid rgba(232,191,92,.55);border-radius:16px;padding:12px;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);box-shadow:0 10px 40px rgba(0,0,0,.45)}
#menu .mpanel button{min-height:48px;font-size:17px;padding:8px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.25;text-align:center;width:100%}
#menu .mpanel button small{font-size:11px;font-weight:600;opacity:.9}
#menu .mpanel button.online{border-color:#7ad0ff;background:linear-gradient(#2a5f86,#173a55)}
#menu .ver{font-size:11px;opacity:.7;text-shadow:0 1px 4px #000}
#menu.static,#intro.static{background:#3b2414 url(assets/menu_bg.jpg) center/cover no-repeat}
#intro.static .introcap{text-shadow:0 2px 12px #000}
@media (max-width:700px) and (orientation:portrait){
  #menu{background:linear-gradient(180deg,rgba(20,10,4,.0) 25%,rgba(20,10,4,.6) 100%)}
  #menu .mwrap{width:100%;justify-content:space-between;padding:calc(18px + env(safe-area-inset-top)) 12px 14px}
  #menu .logo .l1{font-size:38px}#menu .logo .l2{font-size:22px}
  #menu .mpanel{padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  #menu .mpanel button{grid-column:span 2;min-height:46px}
  #menu .mpanel #bCredits,#menu .mpanel #bExit{grid-column:span 1;font-size:14px}
}
@media (max-height:520px) and (orientation:landscape){
  #menu .mwrap{width:min(430px,56%);gap:6px;padding:6px 12px}
  #menu .logo .l1{font-size:28px}#menu .logo .l2{font-size:16px}#menu .logo .l3{display:none}
  #menu .mpanel{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px}
  #menu .mpanel button{min-height:44px;font-size:14px;padding:4px 6px}
  #menu .ver{display:none}
}

/* ===== مركز القائمة: اللوجو فوق في النص واللوحة تحت في النص، والقلعة في النص من غير ما تتغطى ===== */
#menu{background:linear-gradient(180deg,rgba(20,10,4,.45) 0%,rgba(20,10,4,0) 22%,rgba(20,10,4,0) 58%,rgba(20,10,4,.7) 100%)!important}
#menu .mwrap{right:0;left:0;margin:0 auto;width:100%;max-width:none;justify-content:space-between;padding:calc(14px + env(safe-area-inset-top)) 14px calc(12px + env(safe-area-inset-bottom))}
#menu .mpanel{width:min(820px,100%);display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px}
#menu .mpanel button{grid-column:span 1;min-height:52px;font-size:15px;padding:6px 8px}
#menu .mpanel #bCont,#menu .mpanel #bSkirm{grid-column:span 2}
#menu .logo .l1{font-size:42px}
@media (max-width:700px) and (orientation:portrait){
  #menu .mpanel{grid-template-columns:1fr 1fr;width:100%}
  #menu .mpanel button{grid-column:span 2;min-height:46px}
  #menu .mpanel #bCredits,#menu .mpanel #bExit{grid-column:span 1}
  #menu .logo .l1{font-size:38px}
}
@media (max-height:520px) and (orientation:landscape){
  #menu .mwrap{width:100%;padding:6px 12px}
  #menu .mpanel{grid-template-columns:repeat(4,1fr);width:min(760px,100%);gap:6px;padding:6px}
  #menu .mpanel button{min-height:44px;font-size:13px;padding:3px 5px}
  #menu .mpanel #bCont,#menu .mpanel #bSkirm{grid-column:span 2}
  #menu .logo .l1{font-size:26px}
}

@media (min-width:1000px) and (min-height:521px){
  #menu .mpanel{grid-template-columns:repeat(7,1fr);width:min(1040px,98%)}
  #menu .mpanel button,#menu .mpanel #bCont,#menu .mpanel #bSkirm{grid-column:span 1;min-height:54px;font-size:14px;padding:4px 6px}
  #menu .mpanel button small{display:none}
}

@media (max-height:520px) and (orientation:landscape){
  #menu .mpanel{grid-template-columns:repeat(4,1fr)}
  #menu .mpanel button,#menu .mpanel #bCont,#menu .mpanel #bSkirm{grid-column:span 1;min-height:44px;font-size:13px}
  #menu .mpanel button small{display:none}
}
#menu.static{background:linear-gradient(180deg,rgba(20,10,4,.45) 0%,rgba(20,10,4,0) 22%,rgba(20,10,4,0) 58%,rgba(20,10,4,.7) 100%),#3b2414 url(assets/menu_bg.jpg) center/cover no-repeat!important}

/* ===== menu2: زراير كبيرة فوق بعض (عمود) في نص الشاشة، والمشهد (جيش + موارد) حواليها ===== */
#menu{background:radial-gradient(ellipse 36% 70% at 50% 52%,rgba(20,10,4,.38),rgba(20,10,4,0) 100%),linear-gradient(180deg,rgba(20,10,4,.35) 0%,rgba(20,10,4,0) 18%,rgba(20,10,4,0) 82%,rgba(20,10,4,.4) 100%)!important}
#menu .mwrap{position:absolute;inset:0;margin:0;width:100%;max-width:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:calc(10px + env(safe-area-inset-top)) 14px calc(8px + env(safe-area-inset-bottom));overflow:hidden}
#menu .logo .l1{font-size:46px}
#menu .mpanel{width:min(360px,92vw);display:flex!important;flex-direction:column;grid-template-columns:none;gap:10px;padding:12px;background:rgba(36,20,8,.55);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
#menu .mpanel button,#menu .mpanel #bCont,#menu .mpanel #bSkirm,#menu .mpanel #bCredits,#menu .mpanel #bExit{grid-column:auto;width:100%;min-height:66px;font-size:19px;padding:8px 12px;border-radius:14px}
#menu .mpanel button small{display:block!important;font-size:12px}
#menu .ver{display:block}
@media (max-height:760px) and (min-width:700px){#menu .logo .l1{font-size:38px}#menu .logo .l3{display:none}#menu .mpanel{gap:7px;padding:9px}#menu .mpanel button,#menu .mpanel #bCont,#menu .mpanel #bSkirm,#menu .mpanel #bCredits,#menu .mpanel #bExit{min-height:54px;font-size:17px}#menu .mpanel button small{display:none!important}#menu .ver{display:none}}
@media (max-width:700px) and (orientation:portrait){#menu .logo .l1{font-size:36px}#menu .logo .l2{font-size:20px}#menu .logo .l3{display:none}#menu .mwrap{gap:8px}#menu .mpanel{width:min(340px,94vw);gap:7px;padding:9px}#menu .mpanel button,#menu .mpanel #bCont,#menu .mpanel #bSkirm,#menu .mpanel #bCredits,#menu .mpanel #bExit{min-height:56px;font-size:17px}#menu .mpanel button small{font-size:10.5px}}
@media (max-height:560px) and (orientation:landscape){#menu .mwrap{gap:4px;padding:4px 10px}#menu .logo .l1{font-size:26px}#menu .logo .l2{font-size:15px}#menu .logo .l3{display:none}#menu .mpanel{width:min(600px,94vw);display:grid!important;grid-template-columns:1fr 1fr;gap:6px;padding:6px}#menu .mpanel button,#menu .mpanel #bCont,#menu .mpanel #bSkirm,#menu .mpanel #bCredits,#menu .mpanel #bExit{min-height:44px;font-size:14px;padding:3px 6px}#menu .mpanel button small{display:none!important}#menu .ver{display:none}}

@media (max-width:700px) and (orientation:portrait){#menu .mpanel{background:rgba(36,20,8,.36);backdrop-filter:none;-webkit-backdrop-filter:none;gap:6px;padding:8px}#menu .mpanel button,#menu .mpanel #bCont,#menu .mpanel #bSkirm,#menu .mpanel #bCredits,#menu .mpanel #bExit{min-height:50px;font-size:16.5px;background-color:rgba(60,34,14,.82)}#menu .mpanel button small{display:none!important}#menu .mpanel button.online{background:linear-gradient(rgba(42,95,134,.88),rgba(23,58,85,.88))}#menu .ver{display:none}}
@media (max-height:560px) and (orientation:landscape){#menu .mpanel{width:min(440px,60vw);background:rgba(36,20,8,.45)}}