/* ديرتي — إدارة الألعاب: النمط المدموج (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,")!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,")!important;filter:drop-shadow(0 1px 0 rgba(0,0,0,.3))!important}
#btnArmy::before{background-image:url("data:image/svg+xml;utf8,")!important;filter:drop-shadow(0 1px 0 rgba(0,0,0,.3))!important}
#btnMore::before{background-image:url("data:image/svg+xml;utf8,")!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"]{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 */
/* 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 «!» */
/* 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}
/* 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}
/* ================= v0.16.0 ================= */
/* result: plain text on the card, no boxes */
.mcard.result .rhead{font:400 44px/1.1 var(--f-display,Changa);color:#2f7f23;text-shadow:0 2px 0 #fff,0 3px 6px rgba(0,0,0,.18);margin:4px 0 0}
.mcard.result.lose .rhead{color:#8a5a3a}
.mcard.result h2{display:none}
.mcard.result .rsub{font:600 15px var(--f-body);color:#5b4330;margin:2px 0 6px}.mcard.result .rsub b{color:#2b1a0e}
.mcard.result .rloot{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin:4px 0}
.mcard.result .rloot span{display:inline-flex;align-items:center;gap:5px;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;font:800 20px var(--f-display,Changa);color:#2b1a0e}
.mcard.result .rloot .ico,.mcard.result .rloot svg{width:24px!important;height:24px!important}
.mcard.result .rnote{font:600 12.5px var(--f-body);color:#7d6047;margin:2px 0}
.mcard.result .rsec{font:800 13px var(--f-display,Changa);color:#9e1b1b;margin:8px 0 2px}
.mcard.result .rarmy{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:0 0 6px}
.mcard.result .rarmy span{display:flex;flex-direction:column;align-items:center;min-width:46px}
.mcard.result .rarmy img,.mcard.result .rarmy .ico{width:36px;height:36px}
.mcard.result .rarmy b{font:800 13px var(--f-display,Changa);color:#2b1a0e;line-height:1}
.mcard.result .rarmy small{font:600 10px var(--f-body);color:#7d6047}
/* v0.16.0: every shop tab has the same card — fixed width, two rows whenever they fit, image shrinks with the row */
#shop .grid{grid-auto-columns:118px!important;grid-template-rows:minmax(0,1fr)!important;align-content:stretch}
@media (min-height:520px){#shop .grid{grid-template-rows:repeat(2,minmax(0,1fr))!important}}
#shop .grid .card:not(.wide){min-width:0!important;width:auto;justify-content:center;overflow:visible}
#shop .grid .card:not(.wide) img{width:auto!important;max-width:72px!important;max-height:42%!important;object-fit:contain}
#shop .card.tz .tim{width:54px!important;max-height:42%}
#shop .card .nm{font-size:13.5px!important;line-height:1.15;white-space:normal;text-align:center}
#shop .card .ct{font-size:10.5px!important;line-height:1.2;text-align:center}
/* back faces: readable, inside the card */
.fcard .back{inset:-3px -3px -4px!important;padding:7px 7px 6px!important;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.bk b{font-size:13px!important;line-height:1.2;margin-bottom:2px}
.bk p{font-size:10.5px!important;line-height:1.35!important;color:#fff3dc;margin:0 0 3px!important}
.bk ul{font-size:10.5px!important;line-height:1.45!important;color:#f3e2c4}
.bk li{display:flex;justify-content:space-between;gap:4px}
.bk li i{color:#ffd75a!important;white-space:nowrap}
.fcard .back.fit .bk b{font-size:calc(13px * var(--bk,1))!important}
.fcard .back.fit .bk p,.fcard .back.fit .bk ul{font-size:calc(10.5px * var(--bk,1))!important}
#shop.sheet{height:min(90vh,560px)!important}
#shop .sh-body{flex:1 1 auto!important;min-height:0!important}
#shop .fcard .front{height:100%;justify-content:center;gap:3px}
#shop .grid .card:not(.wide) img{max-width:80px!important;max-height:46%!important}
#shop .card.tz .tim{width:60px!important;max-height:46%}
#shop .card .nm{font-size:14px!important}#shop .card .ct{font-size:11px!important}
/* bigger back text; fitBack() scales it down only when a card is short */
#shop .bk b{font-size:15px!important}
#shop .bk p,#shop .bk ul{font-size:12.5px!important;line-height:1.4!important}
#shop .fcard .back.fit .bk b{font-size:calc(15px * var(--bk,1))!important}
#shop .fcard .back.fit .bk p,#shop .fcard .back.fit .bk ul{font-size:calc(12.5px * var(--bk,1))!important}
#shop .card.off.flipped{opacity:1!important;filter:none!important}
@media (max-height:430px){
.mcard.result .rhead{font-size:32px;margin:0}
.mcard.result .big{font-size:34px!important;line-height:1!important;margin:0!important}
.mcard.result .rsub{margin:0 0 2px;font-size:13.5px}
.mcard.result .rloot{margin:2px 0;gap:14px}.mcard.result .rloot span{font-size:17px}
.mcard.result .rsec{margin:4px 0 0}
.mcard.result .rarmy img,.mcard.result .rarmy .ico{width:28px;height:28px}
.mcard.result .rnote,.mcard.result .desc{margin:1px 0!important;font-size:12px!important}
.mcard.result .acts{margin-top:4px!important}
}
/* layout mode */
body.lay-on #dock,body.lay-on #top,body.lay-on #selBar,body.lay-on #selLabel,body.lay-on #btnBuilders,body.lay-on #attackBtn{display:none!important}
#layBar{position:fixed;z-index:9;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);transform:translateX(-50%);display:flex;align-items:center;gap:10px;
background:rgba(43,26,14,.92);border:1.5px solid #1c1410;border-radius:14px;padding:6px 10px;box-shadow:0 6px 18px rgba(0,0,0,.35);color:#f6ecd8}
#layBar .lt{font:800 12px var(--f-display,Changa);max-width:90px;line-height:1.2}
#layBar .ls{display:flex;gap:6px}
#layBar .lslot{display:flex;flex-direction:column;align-items:center;justify-content:center;width:64px;height:44px;border-radius:10px;border:1.5px dashed #b98543;background:transparent;color:#e7d3ac;cursor:pointer}
#layBar .lslot.full{border-style:solid;background:#4a2d17;color:#ffd75a}
#layBar .lslot b{font:800 14px var(--f-display,Changa);line-height:1}#layBar .lslot span{font:600 10px var(--f-body);max-width:60px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#layBar .la{display:flex;gap:6px}#layBar .gbtn{min-height:0!important;padding:6px 12px!important;font-size:13px!important}
/* owner panel */
.oseg{display:flex;gap:6px;margin-bottom:8px}.oseg button{flex:1;padding:7px 4px;border-radius:10px;border:1.5px solid #d6bf94;background:#fff8ea;font:800 13px var(--f-display,Changa);color:#5b4330;cursor:pointer}
.oseg button.on{background:#2b1a0e;color:#ffd75a;border-color:#1c1410}
.oform{display:flex;flex-wrap:wrap;gap:6px;align-items:end;margin:4px 0 8px}.oform input{flex:1;min-width:110px;font:14px var(--f-body);padding:6px 8px;border-radius:8px;border:1px solid #d6bf94}
.oform label{display:flex;flex-direction:column;font:700 11px var(--f-body);color:#7d6047;flex:1;min-width:90px}.oform label input{min-width:0}
.orow{display:flex;align-items:center;gap:8px;padding:7px 4px;border-bottom:1px solid #eadbbd}.orow .body{flex:1;display:flex;flex-direction:column;min-width:0}
.orow b{font:800 14px var(--f-display,Changa)}.orow small{font-weight:400;opacity:.6}.orow span{font:600 11.5px var(--f-body);color:#7d6047}.orow span.t{color:#2b1a0e;font-size:13px}
.orow .gbtn{min-height:0!important;padding:4px 10px!important;font-size:12px!important}
#layBar .lt{max-width:none;white-space:nowrap;font-size:14px}#layBar .lt small{display:block;font:600 10.5px var(--f-body);color:#e7d3ac}
/* layout editor tray */
#layTray{position:fixed;z-index:9;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 8px);transform:translateX(-50%);width:min(96vw,900px);display:flex;align-items:center;gap:8px;
background:rgba(43,26,14,.94);border:1.5px solid #1c1410;border-radius:14px;padding:6px 8px;box-shadow:0 6px 18px rgba(0,0,0,.35);color:#f6ecd8}
#layTray .lh{display:flex;flex-direction:column;gap:2px;flex:none;width:96px}
#layTray .lh input{width:100%;font:800 12px var(--f-display,Changa);padding:3px 6px;border-radius:7px;border:1px solid #7d6047;background:#2b1a0e;color:#ffd75a}
#layTray .lh span{font:600 10.5px var(--f-body);color:#e7d3ac}
#layTray .lbox{flex:1;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;min-width:0}#layTray .lbox::-webkit-scrollbar{display:none}
#layTray .lbox .desc{color:#e7d3ac;margin:0;font-size:12px}
#layTray .ltile{position:relative;flex:none;width:58px;height:50px;border-radius:10px;border:1.5px solid #7d6047;background:#4a2d17;cursor:pointer;padding:2px}
#layTray .ltile img{width:100%;height:100%;object-fit:contain}
#layTray .ltile b{position:absolute;bottom:1px;left:3px;font:800 11px var(--f-display,Changa);color:#fff;text-shadow:0 1px 2px #000}
#layTray .la{display:flex;gap:5px;flex:none}#layTray .gbtn{min-height:0!important;padding:6px 10px!important;font-size:12.5px!important}
#layBar .lslot i{font:700 9px var(--f-body);font-style:normal;color:#ff9b7a}
.accl{display:block;font:700 12px var(--f-body);color:#7d6047;text-align:start}
.pcoast{max-width:460px;margin:0 auto}
/* event greeting: the picture never pushes the button off a landscape phone */
#modal .mcard{max-height:calc(100vh - 16px)!important;overflow-y:auto!important}
#modal .evbanner img{max-height:min(34vh,180px)!important;width:auto!important;max-width:100%;object-fit:contain;display:block;margin:0 auto}
/* the page itself never scrolls; only windows scroll inside */
html,body{overflow:hidden!important;overscroll-behavior:none}
/* cinematic moment: dark edges and thin letterbox bars while time slows */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:7;opacity:0;transition:opacity .2s;
background:radial-gradient(ellipse 70% 62% at 50% 50%,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%),linear-gradient(#000 0 0) top/100% 7% no-repeat,linear-gradient(#000 0 0) bottom/100% 7% no-repeat}
body.cine-on::after{opacity:1}
body.cine-on #tbar,body.cine-on #bhud .tbar{opacity:.35;transition:opacity .2s}