/* ديرتي — إدارة الألعاب: النمط المدموج (v0.12). يُحمَّل بعد flat.css.
   ألوان الستايل الأول وتدرّجاته وحواف النحاس، لكن بروز وإطار وظلال أخف (قريب من المسطّح).
   المقاسات والأشكال من flat.css تبقى كما وافق عليها المالك. */
:root{--s-rim:1.5px;--s-lip:2px}
/* ---------- buttons: original wood/lacquer gradients, thin rim, one short lip ---------- */
.gbtn{background:var(--gloss),linear-gradient(180deg,var(--b1),var(--b2))!important;border:var(--s-rim) solid var(--rim)!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 var(--s-lip) 0 var(--lip)!important;text-shadow:0 1px 0 rgba(0,0,0,.35)!important;color:#fff}
.gbtn:active{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 var(--lip)!important;transform:translateY(2px)}
.gbtn.gold{color:#fff!important}
.gbtn[disabled]{opacity:.5;filter:grayscale(.6)}
/* dock: original illustrated glyphs, softened frame */
#btnAttack{--b1:#ff7a5c;--b2:#b3241a;--lip:#5e1210;--rim:#3a0a08;box-shadow:inset 0 0 0 1.5px rgba(224,184,74,.85),inset 0 1px 0 rgba(255,255,255,.35),0 var(--s-lip) 0 var(--lip)!important}
#btnAttack::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g stroke='%231c1410' stroke-width='1.2' stroke-linejoin='round'><path d='M4.5 3.5c8.5 3 15.5 10.5 19.5 19.5l-2.6 1.4C17.6 15 11.6 8.6 4.5 3.5z' fill='%23f1f4f6'/><path d='M27.5 3.5c-8.5 3-15.5 10.5-19.5 19.5l2.6 1.4C14.4 15 20.4 8.6 27.5 3.5z' fill='%23d5dde3'/><path d='M18.8 22.4l6-3.6 1.4 2.2-6 3.6zM13.2 22.4l-6-3.6-1.4 2.2 6 3.6z' fill='%23e0b84a'/><path d='M22.4 23.6l3.4 4.8 2-1.4-3.4-4.8zM9.6 23.6l-3.4 4.8-2-1.4 3.4-4.8z' fill='%236b4a2b'/></g></svg>")!important;filter:drop-shadow(0 1px 0 rgba(0,0,0,.35))!important}
#btnShop{--b1:#ffe27a;--b2:#e09a14;--lip:#8a5206;--rim:#5e3a04;color:#fff!important}
#btnArmy{--b1:#5cc4d4;--b2:#1f7486;--lip:#0d3f4a;--rim:#0a2f38}
#btnMore{--b1:#a0703f;--b2:#5a3a20;--lip:#2c190c;--rim:#24160c}
#btnShop::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g stroke='%231c1410' stroke-width='1.2' stroke-linejoin='round'><rect x='6' y='15' width='20' height='13' rx='1.4' fill='%23c9955b'/><path d='M4 13L8 4h16l4 9z' fill='%239e1b1b'/><path d='M4 13h24v2.6a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3z' fill='%23f3e6cf'/><rect x='13' y='19' width='6' height='9' fill='%236b4a2b'/></g></svg>")!important;filter:drop-shadow(0 1px 0 rgba(0,0,0,.3))!important}
#btnArmy::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g stroke='%231c1410' stroke-width='1.2' stroke-linejoin='round'><path d='M16 3l11 5v8c0 7-5 11.5-11 13.5C10 27.5 5 23 5 16V8z' fill='%23e0b84a'/><path d='M16 6l8 3.6V16c0 5.2-3.7 8.6-8 10.2z' fill='%239e1b1b'/><path d='M16 6L8 9.6V16c0 5.2 3.7 8.6 8 10.2z' fill='%23f3e6cf'/></g></svg>")!important;filter:drop-shadow(0 1px 0 rgba(0,0,0,.3))!important}
#btnMore::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g fill='%23f2b51d' stroke='%231c1410' stroke-width='1.2'><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'/></g></svg>")!important}
/* ---------- top bar: original plates and bars, thin brass ring ---------- */
.rb{background:linear-gradient(180deg,#160e08,#2e1b0e)!important;border:0!important;box-shadow:inset 0 2px 3px rgba(0,0,0,.5),0 0 0 1px var(--brass-d)!important;border-radius:10px!important}
.rf{border-radius:0 9px 9px 0!important}
#resGold .rf{background:var(--gloss),linear-gradient(180deg,#ffe27a,#f2b51d 55%,#c07a0a)!important}
#resDates .rf{background:var(--gloss),linear-gradient(180deg,#e2894f,#b4552a 55%,#6e2a10)!important}
#resPearls .rf{background:var(--gloss),linear-gradient(180deg,#7fd6cf,#1f8a8a 55%,#0d4f55)!important}
#resOud .rf{background:var(--gloss),linear-gradient(180deg,#b07ab0,#6a3a6a 55%,#3a1a3a)!important}
.rv{text-shadow:0 1px 0 #1c1410,1px 0 0 #1c1410,-1px 0 0 #1c1410!important}
.res>.ico{filter:drop-shadow(0 1px 0 rgba(28,20,16,.5))!important}
.plus{background:var(--gloss),linear-gradient(180deg,#8fd85a,#3f8a3a)!important;border:1px solid #1f4a1a!important;box-shadow:0 2px 0 #1f4a1a!important}
.chip{background:var(--plate)!important;border:1px solid #1c1410!important;box-shadow:inset 0 0 0 1px rgba(224,184,74,.45),0 2px 0 rgba(0,0,0,.3)!important;color:#f3e6cf!important}
.chip b{color:var(--brass-hi)!important}
#btnBuilders{background:var(--gloss),linear-gradient(180deg,#ffe27a,#e09a14)!important;border:1px solid #5e3a04!important;box-shadow:0 2px 0 #8a5206!important}
#btnBuilders .bl{color:#3a2412!important}
.dot{border:1.5px solid #fff!important}
/* ---------- building bar ---------- */
.rbtn{border:1.5px solid #1c1410!important;background:radial-gradient(circle at 50% 28%,rgba(255,255,255,.3),rgba(255,255,255,0) 55%),linear-gradient(180deg,var(--c1),var(--c2))!important;
 box-shadow:inset 0 0 0 1px rgba(224,184,74,.6),0 2px 0 var(--lip)!important}
.rbtn svg *{stroke:revert!important}
.rbtn.green{--c1:#5fbf45;--c2:#2f7f23;--lip:#164a0f}.rbtn.gold{--c1:#ffd15a;--c2:#d08a10;--lip:#6b4508}.rbtn.blue{--c1:#4aa6d6;--c2:#1d6f9a;--lip:#0d3a52}
.rbtn.red{--c1:#e5604a;--c2:#a8271c;--lip:#5e1210}.rbtn.purple{--c1:#a67ad8;--c2:#6a3fa8;--lip:#371e5e}
/* ---------- windows: parchment + sadu, one soft shadow ---------- */
.sheet,.mcard{background:radial-gradient(120% 50% at 50% 0%,rgba(255,252,240,.7),rgba(255,252,240,0) 70%),var(--linen),linear-gradient(180deg,#f9eed5,#efdcb4)!important;
 box-shadow:0 0 0 2px var(--brass-d),0 14px 34px rgba(0,0,0,.4)!important}
.sheet>.sadu,.mcard>.sadu{height:9px!important;background:var(--sadu-img) center top/18px 12px repeat-x,#1c1410!important}
.sh-head h2,.mcard h2{color:#4e2a12!important}
.x{background:var(--gloss),linear-gradient(180deg,#f0705a,#b02a20)!important;border:1px solid #4a0e0c!important;box-shadow:0 2px 0 #5e1210!important}
.tab{background:linear-gradient(180deg,#fff5e0,#efdcb4)!important;border:1px solid var(--parch-line)!important;color:#5a3a20!important}
.tab.on{background:var(--plate)!important;color:var(--brass-hi)!important;border-color:#1c1410!important}
.pill{background:var(--plate)!important;color:var(--brass-hi)!important}
.row,.prof,.pstats div,.qbox,.mjup li,.trk,.tile,.pslot{background:linear-gradient(180deg,#fffaf0,#f6e8cc)!important;border:1px solid var(--parch-line)!important}
.mcard.result h2{background:linear-gradient(180deg,#5fbf45,#2f7f23)!important}
/* ---------- cards: parchment, thin line, short lip ---------- */
.card{background:linear-gradient(180deg,var(--parch-1),var(--parch-2))!important;border:1px solid var(--parch-line)!important;box-shadow:0 2px 0 var(--parch-lip)!important}
.card .pr{background:var(--plate)!important;color:var(--brass-hi)!important}
.card .price{background:linear-gradient(180deg,#8fd85a,#3a8a36)!important}
.tchip{background:radial-gradient(circle at 50% 42%,#fffaf0,#efdcb4 70%)!important;border:1.5px solid #6b4a2b!important;box-shadow:0 2px 0 #1c1410!important}
#tbar{background:linear-gradient(180deg,rgba(74,45,23,.82),rgba(44,25,12,.88))!important;box-shadow:inset 0 0 0 1px rgba(224,184,74,.4)!important}
.bloot,#bTimer,.bhint{background:linear-gradient(180deg,rgba(74,45,23,.82),rgba(44,25,12,.88))!important;box-shadow:inset 0 0 0 1px rgba(224,184,74,.4)!important}

/* ================= المتجر: بطاقات صغيرة ملتصقة بالمحتوى، الاسم أوضح ================= */
#shop .grid{grid-auto-columns:auto!important;gap:8px!important}
#shop .card{padding:5px 8px 6px!important;gap:1px!important;min-width:92px}
#shop .card img{width:64px!important;height:auto!important}
#shop .card .nm{font-size:15px!important;line-height:1.15}
#shop .card .ct{font-size:11px!important}
#shop .card .pr,#shop .card .lock{font-size:12px!important;padding:0 7px!important;line-height:20px!important}
/* wide cards (offers, shield, treasure fills) were forced into the horizontal row and overlapped: give those tabs a wrapping grid */
#shop .grid[data-tab="offers"],#shop .grid[data-tab="shield"]{grid-auto-flow:row!important;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))!important;grid-template-rows:none!important;
 grid-auto-rows:auto!important;overflow-x:hidden!important;overflow-y:auto!important;align-content:start;touch-action:pan-y!important}
#shop .card.wide{display:flex!important;flex-direction:row!important;align-items:center!important;text-align:start!important;gap:8px!important;min-width:0!important;padding:6px 9px!important}
#shop .card.wide>svg,#shop .card.wide>.ico{width:42px!important;height:42px!important;flex:none}
#shop .card.wide .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
#shop .card.wide .nm{font-size:15px!important}#shop .card.wide .ct{font-size:11px!important;line-height:1.35}
#shop .card.wide .price{flex:none;font-size:13px!important;padding:2px 9px!important}
#shop .card[data-shield]{min-width:104px}
/* ================= الإعدادات وملفي: أزرار صغيرة متجانبة ملتصقة بالحروف ================= */
.chips{display:flex;flex-wrap:wrap;gap:5px;margin:2px 0 6px}
.chips button{padding:2px 9px 3px;border-radius:999px;font:600 13px/1.5 var(--f-body);color:#5a3a20;background:linear-gradient(180deg,#fffaf0,#efdcb4);border:1px solid var(--parch-line);box-shadow:0 1.5px 0 var(--parch-lip)}
.chips button.on{background:var(--plate);color:var(--brass-hi);border-color:#1c1410;box-shadow:inset 0 1px 2px rgba(0,0,0,.5);transform:translateY(1px)}
.chips button.ok.on{background:linear-gradient(180deg,#5fbf45,#2f7f23);color:#fff}.chips button.no.on{background:linear-gradient(180deg,#e5604a,#a8271c);color:#fff}
.setgrid{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:center}
.setgrid>span{font:700 13px var(--f-body);color:#7d6047;white-space:nowrap}
.setgrid .chips{margin:0}
.prof .pbtns{flex-direction:row!important;gap:5px!important}
.prof .pbtns .gbtn{min-height:0!important;padding:3px 10px 4px!important;font-size:13px!important;border-radius:999px!important}
.prof .pbtns svg{width:14px;height:14px}
/* shield tab: status row on top, the three shields as small cards side by side */
#shop .grid[data-tab="shield"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
#shop .grid[data-tab="shield"] .card.wide{grid-column:1/-1}
#shop .grid[data-tab="shield"] .card[data-shield]{min-width:0;padding:6px 6px 8px!important;flex-direction:column!important}
#shop .grid[data-tab="shield"] .card[data-shield] .ico{width:34px!important;height:34px!important}
/* windows hug their content instead of a fixed tall frame */
.sheet{height:auto!important;max-height:min(92vh,660px)!important}
#shop.sheet{height:min(92vh,660px)!important}
/* toasts never sit on top of an open window */
body.win-open #toast{top:auto!important;bottom:calc(env(safe-area-inset-bottom,0px) + 10px)!important}
/* search screen: instant feedback while the server answers */
#seek{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 45%,rgba(196,149,90,.55),rgba(43,26,14,.82))}
#seek .sk{display:flex;flex-direction:column;align-items:center;gap:10px;background:linear-gradient(180deg,rgba(74,45,23,.92),rgba(44,25,12,.95));box-shadow:inset 0 0 0 1px rgba(224,184,74,.5);border-radius:14px;padding:14px 22px}
#seek i{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,226,122,.25);border-top-color:#ffe27a;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#seek b{font:700 15px var(--f-body);color:#ffe27a}

/* ================= v0.13: نوافذ أصغر، بطاقات ملتصقة بالمحتوى ================= */
/* every window: narrower and shorter, tight inner padding (like the builder menu) */
.sheet{width:min(80vw,700px)!important;max-height:min(86vh,560px)!important}
#shop.sheet{width:min(86vw,760px)!important;height:min(86vh,560px)!important}
.sh-head{padding:5px 12px 3px!important}.sh-head h2{font-size:19px!important}
.sh-body{padding:4px 12px 10px!important}
.sheet .x{width:32px!important;height:32px!important;font-size:19px!important;line-height:30px!important}
#shopTabs{padding:2px 10px 4px!important;gap:5px!important}#shopTabs .tab{min-height:0!important;padding:3px 10px 4px!important;font-size:13px!important}
/* offers: short cards, two side by side, text stays inside */
#shop .grid[data-tab="offers"]{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;padding:4px 2px 8px!important}
#shop .grid[data-tab="offers"] .card.wide{padding:4px 8px!important;gap:7px!important}
#shop .grid[data-tab="offers"] .card.wide>svg{width:34px!important;height:34px!important}
#shop .grid[data-tab="offers"] .card.wide .nm{font-size:14px!important;line-height:1.2!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#shop .grid[data-tab="offers"] .card.wide .ct{font-size:10.5px!important;line-height:1.3!important;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
#shop .grid[data-tab="offers"] .card.wide .ct+.ct{-webkit-line-clamp:1;opacity:.8}
#shop .grid[data-tab="offers"] .card.wide .price{font-size:12px!important;padding:1px 7px!important;white-space:nowrap}
/* buildings / troops cards: trim top & bottom, hug the words */
#shop .card:not(.wide){padding:3px 7px 4px!important}
#shop .card:not(.wide) img{width:58px!important;margin:-2px 0 -3px}
#shop .card:not(.wide) .nm{line-height:1.1!important}
#shop .card:not(.wide) .ct{line-height:1.25!important}
#shop .grid{padding-top:6px!important}
/* defence log + campaign: thin borders that separate each entry */
#panel .row{border:1px solid #c9a86a!important;padding:5px 8px!important;margin-bottom:5px!important;min-height:0}
#panel .row .t{font-size:14px!important}#panel .row .s{font-size:11.5px!important}
.cgrid{gap:6px!important}
.cstage{border:1px solid #c9a86a!important;background:linear-gradient(180deg,#fffaf0,#f1e2c4)!important;min-height:0!important;padding:5px 4px 6px!important}
.cstage.done{border-color:#d99a14!important}.cstage .no{font-size:18px!important}
#shop .grid[data-tab="offers"] .card.wide{grid-column:auto!important;width:auto!important}
#shop .card .lock{white-space:nowrap;font-size:10.5px!important;padding:0 6px!important}
.cstage{gap:0!important;padding:3px 4px 4px!important}.cstage .nm{font-size:12px!important}.cstage .s{font-size:10.5px!important;line-height:1.3}.cstage .stars3{font-size:12px;line-height:1.1}
#panel .desc{margin:2px 0 6px!important;font-size:12.5px!important}

/* ================= v0.13.1 ================= */
/* offers: price is plain big text on the card */
#shop .grid[data-tab="offers"] .card.wide .price{background:none!important;box-shadow:none!important;border:0!important;padding:0!important;color:#2f7f23!important;font:800 17px/1 var(--f-display,Changa)!important;text-shadow:none!important}
/* shields: same cards as defences, a bit larger, name only, details behind «!» */
#shop .grid[data-tab="shield"]{grid-auto-flow:column!important;grid-auto-columns:128px!important;grid-template-columns:none!important;grid-template-rows:auto 1fr!important;overflow-x:auto!important;overflow-y:hidden!important}
#shop .grid[data-tab="shield"] .card.wide{grid-row:1;grid-column:1/span 3!important}
#shop .grid[data-tab="shield"] .card[data-shield]{grid-row:2;min-width:0;padding:4px 7px 6px!important}
#shop .grid[data-tab="shield"] .card[data-shield] .ico{width:56px!important;height:56px!important}
#shop .grid[data-tab="shield"] .card[data-shield] .nm{font-size:17px!important}
#shop .grid[data-tab="shield"] .card[data-shield] .ct{display:none}
/* achievements: one short line per achievement, two per row */
.achg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.achg .row.ach{margin:0!important;padding:4px 8px!important;gap:6px}
.achg .row.ach .t{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-size:14px!important}
.achg .row.ach .t b{font:800 14px var(--f-display,Changa)}
.achg .row.ach .ad{font:300 11.5px var(--f-body);color:#7d6047}
.achg .row.ach .stars3{font-size:12px;margin-inline-start:auto}
.achg .row.ach .prog{height:5px;margin:3px 0 0}
.achg .row.ach .gbtn{min-height:0!important;padding:3px 8px!important;font-size:12px!important}
#shop .grid[data-tab="shield"] .card[data-shield] .pr .ico,#shop .grid[data-tab="shield"] .card[data-shield] .pr svg{width:14px!important;height:14px!important}
#shop .grid[data-tab="shield"] .card[data-shield] .pr{font-size:12px!important;padding:0 7px!important;line-height:20px!important}
#shop .grid[data-tab="shield"]{grid-template-rows:auto auto!important;align-content:start}

/* battery: the colour grade was a full-screen GPU filter on every frame */
#cv{filter:none!important}
/* ================= v0.13.2 ================= */
/* treasure (pearl packs): name, value and tag as plain text, stacked, nothing boxed */
/* «!» info marker: rounded square, white mark, clearly a button — same size */
.flipq{border-radius:6px!important;background:#1f6f9a!important;border:1.5px solid #fff!important;box-shadow:0 1px 2px rgba(0,0,0,.45)!important;font:900 15px/19px var(--f-display,Changa)!important;color:#fff!important;text-shadow:none!important}
.fcard.flipped .flipq{background:#c0392b!important}

/* building bar: icons read at a glance, captions bold with a dark outline */
.rbtn .cap{font:800 12px var(--f-display,Changa)!important;color:#fff!important;text-shadow:0 0 2px #1c1410,0 1px 2px #1c1410,0 0 3px rgba(0,0,0,.8)!important;letter-spacing:0}
.rbtn svg{filter:drop-shadow(0 1px 0 rgba(0,0,0,.35))!important}
#selBar{bottom:calc(env(safe-area-inset-bottom,0px) + 24px)!important}

/* ================= v0.14.0 ================= */
/* account */
.accwrap{max-width:420px;margin:0 auto}
.accids{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:6px 0}
.accids span{background:#eaf5e4;color:#2f7f23;border:1px solid #9fcf8f;border-radius:8px;padding:2px 8px;font:700 12px var(--f-body)}
.accbtns{display:flex;flex-direction:column;gap:7px;margin:10px auto;max-width:300px}
.accbtn{display:flex;align-items:center;justify-content:center;gap:8px;height:42px;border-radius:10px;border:1.5px solid #1c1410;font:800 14px var(--f-display,Changa);cursor:pointer}
.accbtn.acc-apple{background:#000;color:#fff}.accbtn.acc-google{background:#fff;color:#1c1410}.accbtn.acc-email{background:#f6ecd8;color:#1c1410}
.accbtn.acc-email b{font:900 17px var(--f-display,Changa)}
.accbtn.done{opacity:.6}
.accin{width:100%;font:18px var(--f-body);padding:8px 10px;border-radius:10px;border:1px solid #d6bf94;text-align:center;margin:6px 0}
/* chat report / block */
.tmsg{position:relative}
.tflag{position:absolute;top:2px;left:4px;border:0;background:none;color:#7d6047;font:900 16px/1 var(--f-body);padding:2px 6px;cursor:pointer}

/* v0.14.1: treasure cards are the same cards as defences/army; the icon sits in a thumbnail-sized box */
#shop .card.tz .tim{width:50px;max-width:100%;aspect-ratio:96/80;display:flex;align-items:center;justify-content:center;flex:none}
#shop .card.tz .tim svg,#shop .card.tz .tim img,#shop .card.tz .tim .ico{width:68%!important;height:auto!important;max-height:100%}
#shop .card.tz .pr.rs{font-size:12.5px!important;direction:rtl;white-space:nowrap}