/* ديرتي — إدارة الألعاب: النمط المسطّح (Flat). يُحمَّل آخر شيء ويغطي ui.css و ui2.css.
   ألوان سادة متباينة، أزرار مستطيلة بحواف ناعمة، تدرّج خفيف جداً، خط Changa واضح بلا ظلال ثقيلة. */
:root{
 --f-red:#e5483b;--f-red-d:#c3362b;--f-gold:#f4b400;--f-gold-d:#d79c00;--f-blue:#2e86de;--f-blue-d:#1f6fbf;--f-green:#2ea44f;--f-green-d:#238a40;
 --f-purple:#7e57c2;--f-purple-d:#6440a8;--f-teal:#13a3a3;--f-dark:#2b211b;--f-dark-2:#3d2f26;--f-ink:#2b211b;--f-paper:#fffaf2;--f-line:#e8dcc8;--f-mute:#8a7563;
 --f-display:'Changa','Segoe UI',Tahoma,sans-serif;
}
/* ---------- buttons ---------- */
.gbtn{--fc:var(--f-dark-2);--fd:var(--f-dark);border:0!important;border-radius:10px;color:#fff;text-shadow:none!important;font:600 15px/1.2 var(--f-display)!important;
 background:linear-gradient(180deg,var(--fc),var(--fd))!important;box-shadow:0 2px 0 rgba(0,0,0,.22)!important;padding:8px 14px;min-height:40px}
.gbtn:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(0,0,0,.22)!important}
.gbtn::after{inset:-3px}
.gbtn.green{--fc:var(--f-green);--fd:var(--f-green-d)}.gbtn.red{--fc:var(--f-red);--fd:var(--f-red-d)}.gbtn.blue{--fc:var(--f-blue);--fd:var(--f-blue-d)}
.gbtn.gold{--fc:var(--f-gold);--fd:var(--f-gold-d);color:#2b211b!important}.gbtn.purple{--fc:var(--f-purple);--fd:var(--f-purple-d)}
.gbtn[disabled]{filter:none;opacity:.45}
.gbtn .ico{filter:none}
.gbtn small{font-weight:600!important}
/* ---------- village dock: rectangles with white glyphs ---------- */
#dock .gbtn::before{filter:none!important}
#btnAttack{--fc:var(--f-red);--fd:var(--f-red-d);width:auto!important;min-width:112px;height:52px!important;border-radius:12px!important;padding:4px 14px 4px 12px!important;
 display:grid!important;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:8px;align-items:center;justify-items:start;font:700 19px/1 var(--f-display)!important}
#btnAttack::before{grid-row:1/3;width:28px!important;height:28px!important;margin:0!important;
 background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='white'><path d='M5 4l15 15-2 2L3 6z'/><path d='M27 4L12 19l2 2L29 6z'/><path d='M6 22l4 4-3 3-4-4zM26 22l-4 4 3 3 4-4z'/><rect x='9' y='19' width='4' height='3' transform='rotate(45 11 20.5)'/><rect x='19' y='19' width='4' height='3' transform='rotate(-45 21 20.5)'/></svg>")!important}
#btnAttack small{grid-column:2;font:600 10px/1.2 var(--f-display)!important;opacity:.92;max-width:none!important;white-space:nowrap}
#btnAttack.truce{--fc:#3e8e6a;--fd:#2d6e51}
.dock-r{gap:6px!important}
.dock-r .gbtn{width:62px!important;height:52px!important;border-radius:12px!important;padding:5px 2px 5px!important;font:600 11px/1 var(--f-display)!important;justify-content:center!important;gap:3px!important}
.dock-r .gbtn::before{width:22px!important;height:22px!important;margin:0!important}
#btnShop{--fc:var(--f-gold);--fd:var(--f-gold-d);color:#2b211b!important}
#btnShop::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%232b211b'><path d='M4 12l3-7h18l3 7z'/><rect x='6' y='14' width='20' height='14' rx='2'/><rect x='13' y='19' width='6' height='9' fill='%23f4b400'/></svg>")!important}
#btnArmy{--fc:var(--f-blue);--fd:var(--f-blue-d)}
#btnArmy::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='white'><path d='M16 3l11 5v8c0 7-5 11.5-11 13.5C10 27.5 5 23 5 16V8z'/><path d='M11 15l4 4 7-8' stroke='%232e86de' stroke-width='3' fill='none' stroke-linecap='round'/></svg>")!important}
#btnMore{--fc:var(--f-dark-2);--fd:var(--f-dark)}
#btnMore::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='white'><rect x='4' y='4' width='10' height='10' rx='2.5'/><rect x='18' y='4' width='10' height='10' rx='2.5'/><rect x='4' y='18' width='10' height='10' rx='2.5'/><rect x='18' y='18' width='10' height='10' rx='2.5'/></svg>")!important}
#dock #btnArmy small{font:600 9px/1 var(--f-display)!important;opacity:.9}
/* ---------- top bar ---------- */
.resbox{transform:scale(.78)!important}
.rb{background:rgba(25,18,13,.62)!important;border:0!important;box-shadow:none!important;border-radius:8px!important;height:24px!important}
.rf{border-radius:0 8px 8px 0!important;box-shadow:none!important}
#resGold .rf{background:linear-gradient(180deg,#ffcc33,#f4b400)!important}
#resDates .rf{background:linear-gradient(180deg,#c06a3c,#a1522b)!important}
#resOud .rf{background:linear-gradient(180deg,#9a6bc9,#7e57c2)!important}
#resPearls .rf{background:linear-gradient(180deg,#38b2e8,#1e96d4)!important}
.rv{font:700 14px/24px var(--f-display)!important;text-shadow:0 1px 2px rgba(0,0,0,.55)!important}
.res>.ico{filter:none!important;width:30px!important;height:30px!important}
.plus{background:var(--f-green)!important;border:0!important;border-radius:8px!important;box-shadow:0 2px 0 rgba(0,0,0,.25)!important;text-shadow:none!important;font:700 20px/26px var(--f-display)!important}
.chip{background:rgba(25,18,13,.66)!important;border:0!important;box-shadow:none!important;border-radius:9px!important;font:600 14px/34px var(--f-display)!important;color:#fff!important}
.chip b{color:#ffd23f!important;font:700 15px var(--f-display)!important}
#top .profile{transform:scale(.86)!important}
#btnBuilders{background:var(--f-gold)!important;border:0!important;box-shadow:0 2px 0 rgba(0,0,0,.22)!important;border-radius:10px!important}
#btnBuilders .bl{color:#2b211b!important;font:700 14px var(--f-display)!important}
#btnBuilders b{background:#2b211b!important;color:#ffd23f!important;font:700 14px/22px var(--f-display)!important}
.dot{background:var(--f-red)!important;border:2px solid #fff!important;box-shadow:none!important;font:700 11px/16px var(--f-display)!important}
/* ---------- building action bar ---------- */
.rbtn{--c1:var(--f-dark-2);--c2:var(--f-dark);border:0!important;border-radius:11px!important;background:linear-gradient(180deg,var(--c1),var(--c2))!important;box-shadow:0 2px 0 rgba(0,0,0,.25)!important;width:46px!important;height:46px!important}
.rbtn svg *{stroke:none!important}.rbtn svg{filter:none!important}
.rbtn.green{--c1:var(--f-green);--c2:var(--f-green-d)}.rbtn.gold{--c1:var(--f-gold);--c2:var(--f-gold-d)}.rbtn.blue{--c1:var(--f-blue);--c2:var(--f-blue-d)}
.rbtn.red{--c1:var(--f-red);--c2:var(--f-red-d)}.rbtn.purple{--c1:var(--f-purple);--c2:var(--f-purple-d)}
.rbtn .cap{font:600 11px var(--f-display)!important;text-shadow:0 1px 2px rgba(0,0,0,.8)!important}
.rbtn .cost{background:var(--f-dark)!important;box-shadow:none!important;font:700 11px/1.5 var(--f-display)!important;border-radius:6px!important}
#selLabel{font:700 15px var(--f-display)!important;text-shadow:0 1px 3px rgba(0,0,0,.85)!important}#selLabel small{font:600 11px var(--f-display)!important}
/* ---------- windows ---------- */
.sheet{background:var(--f-paper)!important;box-shadow:0 18px 50px rgba(0,0,0,.45)!important;border-radius:16px!important;animation-duration:.18s}
.sheet>.sadu,.mcard>.sadu{height:5px!important;border:0!important;box-shadow:none!important}
.sh-head h2{font:700 20px var(--f-display)!important;color:var(--f-ink)!important;text-shadow:none!important}
.sh-head h2::before{display:none}
.x{background:var(--f-red)!important;border:0!important;box-shadow:none!important;border-radius:10px!important;width:36px!important;height:36px!important;color:#fff!important;font:700 22px/36px var(--f-display)!important}
.x::before,.x::after{display:none!important}
.tab{background:#efe5d4!important;border:0!important;box-shadow:none!important;border-radius:9px!important;color:var(--f-ink)!important;font:600 14px var(--f-display)!important;text-shadow:none!important}
.tab.on{background:var(--f-dark-2)!important;color:#fff!important}
.sec{font:700 14px var(--f-display)!important;color:var(--f-mute)!important}.sec::before,.sec::after{display:none!important}
.pill{background:var(--f-dark-2)!important;color:#fff!important;border:0!important;box-shadow:none!important;font:600 12px/22px var(--f-display)!important;border-radius:8px!important}
.stat{background:#f3ebdd!important;border:0!important;box-shadow:none!important;border-radius:8px!important}
.row{background:#fff!important;border:1px solid var(--f-line)!important;box-shadow:none!important;border-radius:10px!important}
.prog{background:#eadfcd!important;border:0!important;box-shadow:none!important;border-radius:6px!important}.prog i{background:var(--f-green)!important;box-shadow:none!important;border-radius:6px!important}
.desc{color:#5b4a3d!important}
/* ---------- cards (shop, army, menu tiles, troop bar) ---------- */
.card{background:#fff!important;border:1px solid var(--f-line)!important;box-shadow:0 1px 2px rgba(60,40,20,.08)!important;border-radius:11px!important}
button.card:active{transform:scale(.97)!important;box-shadow:none!important}
.card .nm{font:700 13px var(--f-display)!important;color:var(--f-ink)!important}.card .ct{color:var(--f-mute)!important}
.card .pr{background:var(--f-dark-2)!important;color:#fff!important;border:0!important;box-shadow:none!important;border-radius:7px!important;font:700 12px/20px var(--f-display)!important;text-shadow:none!important}
.card .price{background:var(--f-green)!important;color:#fff!important;border:0!important;box-shadow:none!important;border-radius:7px!important;text-shadow:none!important}
.card .lock{background:#efe5d4!important;color:var(--f-mute)!important;border:0!important;box-shadow:none!important;border-radius:7px!important}
.card.off{opacity:.55;filter:none!important}
.card .tag{background:var(--f-red)!important;border:0!important;box-shadow:none!important;border-radius:6px!important}
.card.hot::after{display:none}
.fcard .back{background:var(--f-dark)!important;border-radius:11px!important}
.flipq{background:var(--f-blue)!important;box-shadow:none!important;border:2px solid #fff;width:22px!important;height:22px!important;line-height:18px!important}
.tcard .cnt{background:var(--f-green)!important;box-shadow:none!important;border:2px solid #fff}.tcard .minus{background:var(--f-red)!important;box-shadow:none!important;border:2px solid #fff;line-height:25px!important}
.tile{background:#fff!important;border:1px solid var(--f-line)!important;box-shadow:none!important;border-radius:11px!important}.tile .tn{font:600 13px var(--f-display)!important}
.tile .ti svg *{stroke:none!important}
.pslot{background:#fff!important;border:1px solid var(--f-line)!important;border-radius:11px!important}.pslot.empty{border:1.5px dashed #d7c7ad!important}
.trk{background:#fff!important;border:1.5px solid var(--f-line)!important;border-radius:10px!important}.trk.on{border-color:var(--f-gold)!important;background:#fff8e1!important;box-shadow:none!important}
.prof,.pstats div,.qbox,.mjup li{background:#fff!important;border:1px solid var(--f-line)!important}
.tchip{background:#fff!important;border:0!important;box-shadow:0 1px 3px rgba(0,0,0,.25)!important;border-radius:10px!important}
.tchip.sel{box-shadow:0 0 0 3px var(--f-gold),0 2px 4px rgba(0,0,0,.25)!important}
.tchip .c{background:var(--f-dark)!important;border:0!important;box-shadow:none!important}.tchip .lv{background:var(--f-teal)!important;border:0!important}
#tbar{background:rgba(25,18,13,.55)!important;border:0!important;box-shadow:none!important;border-radius:12px!important}
/* ---------- modals ---------- */
.mcard{background:var(--f-paper)!important;border:0!important;box-shadow:0 18px 50px rgba(0,0,0,.45)!important;border-radius:16px!important}
.mcard h2{background:none!important;clip-path:none!important;color:var(--f-ink)!important;text-shadow:none!important;font:700 21px var(--f-display)!important;padding:4px 0!important;margin:10px 0 6px!important}
.mcard.result h2{background:var(--f-green)!important;color:#fff!important;border-radius:10px!important;padding:4px 28px!important}
.mcard.result.lose h2{background:#6d625a!important}
.mcard .rows>span{background:#fff!important;border:1px solid var(--f-line)!important;box-shadow:none!important;border-radius:9px!important}
/* attack chooser: small, flat */
.mcard.atkm{max-width:300px!important}
.atklist{display:flex;flex-direction:column;gap:8px;margin:8px 0 4px}
.atklist .gbtn{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px;font:700 16px var(--f-display)!important;text-align:start}
.atklist .gbtn small{font:600 11px var(--f-display)!important;opacity:.9}
/* ---------- battle HUD ---------- */
.bloot{background:rgba(25,18,13,.66)!important;border:0!important;box-shadow:none!important;border-radius:10px!important;font-family:var(--f-display)!important}
.bloot .gr b,.bloot .bn{font-weight:700!important}
#bTimer{background:rgba(25,18,13,.66)!important;border:0!important;box-shadow:none!important;border-radius:10px!important;font:700 26px/1 var(--f-display)!important;text-shadow:none!important}
#bTimer.scout{background:var(--f-teal)!important}
#bStars{font-size:24px!important}
.bhint{background:rgba(25,18,13,.66)!important;border:0!important;border-radius:9px!important;font:600 12px var(--f-display)!important}
#coachCap{border:0!important;border-radius:10px!important;font:600 13px/1.45 var(--f-display)!important}
/* ---------- builder menu (drop-down under the button; the village stays visible) ---------- */
#bmenu{position:fixed;z-index:12;top:calc(env(safe-area-inset-top,0px) + 46px);left:50%;transform:translateX(-50%);width:min(340px,92vw);max-height:min(62vh,300px);
 display:flex;flex-direction:column;background:var(--f-paper);border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.42);overflow:hidden;animation:bmIn .16s ease-out}
@keyframes bmIn{from{transform:translateX(-50%) translateY(-8px)}to{transform:translateX(-50%)}}
#bmenu .bmh{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 6px;background:var(--f-gold);color:#2b211b;font:700 14px var(--f-display)}
#bmenu .bmh button{background:#2b211b;color:#fff;border:0;border-radius:8px;width:28px;height:28px;font:700 16px/28px var(--f-display)}
#bmenu .bml{overflow:auto;padding:6px 8px 8px;display:flex;flex-direction:column;gap:5px;-webkit-overflow-scrolling:touch;touch-action:pan-y}
#bmenu .bmi{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--f-line);border-radius:10px;padding:4px 8px;text-align:start;color:var(--f-ink);width:100%}
#bmenu .bmi img{width:36px;height:32px;object-fit:contain;flex:none}
#bmenu .bmi .t{flex:1;min-width:0;font:700 13px/1.25 var(--f-display)}#bmenu .bmi .t span{display:block;font:600 11px var(--f-display);color:var(--f-mute)}
#bmenu .bmi .c{flex:none;display:flex;align-items:center;gap:3px;font:700 12px var(--f-display);background:#f3ebdd;border-radius:7px;padding:2px 7px}
#bmenu .bmi.off{opacity:.55}#bmenu .bmi.busy .c{background:var(--f-blue);color:#fff}
#bmenu .bms{font:700 11px var(--f-display);color:var(--f-mute);padding:4px 2px 0}