/* ديرتي — إدارة الألعاب، المرحلة 3: واجهات أفقية بمستوى ألعاب الصدارة.
   تُحمَّل بعد ui.css وتعيد تشكيل: النوافذ، أزرار القرية، شريط المبنى، واجهة المعركة، الحركة. */

/* ---------- windows (centre of the screen, never a sheet that hides the village) ---------- */
#veil{position:fixed;inset:0;z-index:9;background:radial-gradient(circle at 50% 45%,rgba(20,10,4,.25),rgba(20,10,4,.6));opacity:0;pointer-events:none;transition:opacity .18s}
body.win-open #veil{opacity:1;pointer-events:auto}
.sheet{left:50%;right:auto;top:50%;bottom:auto;width:min(94vw,940px);height:min(92vh,660px);max-height:none;border-radius:22px;
  transform:translate(-50%,-50%);padding-bottom:0;
  box-shadow:0 0 0 3px var(--brass),0 0 0 6px var(--wood-2),0 0 0 8px #1c1410,0 24px 70px rgba(0,0,0,.6);
  animation:winIn .28s cubic-bezier(.2,1.25,.35,1)}
@keyframes winIn{from{transform:translate(-50%,-48%) scale(.86)}to{transform:translate(-50%,-50%) scale(1)}}
.sheet>.sadu{border-radius:20px 20px 0 0}
.sh-head{padding-top:6px}
.sh-head h2{font-size:24px}
.sheet .x{width:46px;height:46px}
/* the building window is a compact card */
#sel.sheet{width:min(78vw,620px);height:auto;max-height:min(92vh,620px)}

/* shop: one horizontal row of large cards on short screens, two rows when tall */
#shop .grid{display:grid;grid-auto-flow:column;grid-auto-columns:158px;grid-template-rows:1fr;grid-template-columns:none;overflow-x:auto;overflow-y:hidden;
  gap:12px;padding:10px 4px 14px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;touch-action:pan-x;overscroll-behavior:contain}
@media (min-height:560px){#shop .grid{grid-template-rows:1fr 1fr}}
#shop .card{scroll-snap-align:start;min-height:0}
#shop .card.wide{grid-row:span 1;width:auto;min-width:300px}
#shop .sh-body{overflow:hidden;display:flex;flex-direction:column}
#shop .sh-body>.grid{flex:1}
#shopTabs .tab{min-height:40px;font-size:16px}

/* ---------- village HUD: round action buttons ---------- */
#btnAttack{width:108px;height:108px;min-width:0;border-radius:50%;padding:6px 6px 10px;font-size:25px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  box-shadow:inset 0 0 0 3px var(--brass),inset 0 6px 0 rgba(255,255,255,.32),inset 0 -6px 0 rgba(0,0,0,.22),0 6px 0 var(--lip),0 10px 18px rgba(0,0,0,.4)}
#btnAttack::before{width:46px;height:46px;margin-bottom:-2px}
#btnAttack::after{border-radius:50%}
#btnAttack small{max-width:96px;white-space:normal;text-align:center;font-size:10px;line-height:1.15}
.dock-r .gbtn{width:78px;height:78px;border-radius:50%;padding-bottom:9px;font-size:15px}
.dock-r .gbtn::before{width:42px;height:42px}
#btnTribeDock{--b1:#3f8a6a;--b2:#1f5a44;--lip:#0f3324;--rim:#0a2318}
#btnTribeDock::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16 2l12 5v9c0 8-5.5 12.5-12 15C9.5 28.5 4 24 4 16V7z' fill='%23f2b51d' stroke='%231c1410' stroke-width='1.4'/><path d='M9 13l3.5-4 3.5 4 3.5-4 3.5 4M9 19l3.5-4 3.5 4 3.5-4 3.5 4' fill='none' stroke='%239e1b1b' stroke-width='2.2'/></svg>")}
#btnTribeDock .dot{right:auto;left:-2px}

/* ---------- selected building: floating label + round action bar ---------- */
#selLabel{position:fixed;z-index:4;transform:translate(-50%,-100%);pointer-events:none;text-align:center;white-space:nowrap;
  font:400 19px/1.05 var(--f-display);color:#fff;text-shadow:0 2px 0 #1c1410,0 0 6px rgba(0,0,0,.6),1px 0 0 #1c1410,-1px 0 0 #1c1410}
#selLabel small{display:block;font:700 12px/1.2 var(--f-body);color:#ffe27a;letter-spacing:.02em}
#selBar{position:fixed;z-index:8;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 32px);transform:translateX(-50%);
  display:flex;gap:12px;align-items:flex-end;animation:barIn .22s cubic-bezier(.2,1.3,.4,1)}
@keyframes barIn{from{transform:translate(-50%,30px);opacity:0}to{transform:translateX(-50%);opacity:1}}
.rbtn{--c1:#7a5532;--c2:#4a2d17;--lip:#24160c;position:relative;width:66px;height:66px;border-radius:50%;flex:none;color:#fff;
  background:radial-gradient(circle at 50% 28%,rgba(255,255,255,.35),rgba(255,255,255,0) 52%),linear-gradient(180deg,var(--c1),var(--c2));
  border:3px solid #1c1410;box-shadow:inset 0 0 0 2px rgba(224,184,74,.8),0 4px 0 var(--lip),0 8px 14px rgba(0,0,0,.35);
  display:flex;align-items:center;justify-content:center;transition:transform .08s}
.rbtn:active{transform:translateY(3px) scale(.94)}
.rbtn svg{width:34px;height:34px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}
.rbtn .cap{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:3px;white-space:nowrap;
  font:400 14px/1 var(--f-display);color:#fff;text-shadow:0 2px 0 #1c1410,1px 0 0 #1c1410,-1px 0 0 #1c1410}
.rbtn .cost{position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);white-space:nowrap;display:flex;align-items:center;gap:2px;
  background:#1c1410;border-radius:10px;padding:1px 7px 2px;font:700 12px/1.3 var(--f-body);color:#fff;box-shadow:0 0 0 1.5px var(--brass)}
.rbtn .cost .ico{width:14px;height:14px}
.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}
.rbtn.off{filter:saturate(.25) brightness(.85)}
body.sel-on #dock{visibility:hidden}

/* ---------- battle HUD ---------- */
#bClock{font:700 12px/1 var(--f-body);color:#fff;text-shadow:0 1px 0 #1c1410;margin-bottom:2px}
#bTimer.scout{background:linear-gradient(180deg,#1f8a8a,#0d4148)!important;color:#e9fffb}
.bbtns{left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));flex-direction:row;justify-content:space-between;pointer-events:none}
.bbtns .gbtn{pointer-events:auto}
#bNext{min-width:118px;font-size:22px;display:flex;flex-direction:column;align-items:center;line-height:1.05}
#bNext small{font:700 11px/1.2 var(--f-body);opacity:.95}

/* ---------- motion: every press answers ---------- */
.gbtn,.card,.tab,.mitem,.tchip,.chip{transition:transform .08s ease-out,filter .08s}
.gbtn:active,.tab:active,.mitem:active,.tchip:active,button.chip:active{transform:translateY(2px) scale(.95)}
button.card:active{transform:scale(.96)}
@media (prefers-reduced-motion:reduce){.sheet,#selBar{animation:none}}
.stat .nxt{font-style:normal;color:#2f8a3a;font-weight:800;margin-inline-start:4px}
#shop .grid::-webkit-scrollbar{display:none}#shop .grid{scrollbar-width:none}
/* short landscape: slimmer troop bar, centred like the reference */
@media (max-height:500px){
  #tbar{left:50%;right:auto;transform:translateX(-50%);max-width:calc(100% - 300px);padding:8px 8px 6px;bottom:calc(env(safe-area-inset-bottom,0px) + 6px)}
  .tchip{width:62px;height:76px}.tchip img{width:48px;height:48px}.tchip .n{font-size:12px}
  .bbtns{bottom:calc(env(safe-area-inset-bottom,0px) + 10px)}
  .bbtns .gbtn{min-height:52px;font-size:18px}
  .bhint{font-size:12px}
}
/* ---------- phase 4: juice ---------- */
.flyc{position:fixed;z-index:30;width:26px;height:26px;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))}
.flyc svg{width:100%;height:100%}
.res.bump .rb{animation:bump .28s cubic-bezier(.3,1.8,.5,1)}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
.mcard.result{max-width:440px}
.mcard.result h2{font-size:42px;color:#fff;padding:6px 52px 9px;margin:6px 0 4px;
  background:linear-gradient(180deg,#5fbf45,#2f7f23);text-shadow:0 3px 0 #164a0f,0 0 12px rgba(0,0,0,.25);animation:ribbon .5s cubic-bezier(.2,1.4,.4,1)}
.mcard.result.lose h2{background:linear-gradient(180deg,#8a7a6a,#4a3f36);text-shadow:0 3px 0 #2a221c}
@keyframes ribbon{from{transform:scaleX(.2);opacity:0}to{transform:none;opacity:1}}
.mcard.result .big span{display:inline-block}
.mcard.result .big .on{animation:starpop .45s cubic-bezier(.2,1.6,.4,1) both}
.mcard.result .big .on:nth-child(1){animation-delay:.35s}.mcard.result .big .on:nth-child(2){animation-delay:.75s}.mcard.result .big .on:nth-child(3){animation-delay:1.15s}
@keyframes starpop{0%{transform:scale(0) rotate(-40deg);opacity:0}70%{transform:scale(1.35) rotate(8deg);opacity:1}100%{transform:none;opacity:1}}
@media (max-height:500px){
  .mcard{max-height:94%}
  .mcard .mbody{padding-top:8px;padding-bottom:10px}
  .mcard.result h2{font-size:32px;padding:4px 44px 6px;margin:4px 0 2px}
  .mcard.result .big{font-size:40px;line-height:1.1;margin:0}
  .mcard.result .desc{margin:2px 0}
  .mcard.result .rows{margin:4px 0}
  .mcard .mbody::-webkit-scrollbar{display:none}
}
.rbtn .cost .ico,.rbtn .cost .ico svg,.rbtn .cost img{width:15px!important;height:15px!important;min-width:0;margin:0}
.rbtn .cost{bottom:-7px;font-size:13px;gap:3px}
#cv{filter:saturate(1.1) contrast(1.06)}

/* ================= المراجعة: شاشة نظيفة (أصغر، أقل، أوضح) ================= */
.resbox{transform:scale(.78);transform-origin:top right}
#top .profile{transform:scale(.84);transform-origin:top left}
#top .pn{font:400 15px var(--f-display);color:#fff;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline-end:6px}
#top .pn:empty{display:none}
.chip.gear{width:40px;height:40px;padding:5px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.chip.gear svg{width:28px;height:28px}
#top .profile{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start;max-width:360px}
#btnAttack{width:86px;height:86px;font-size:20px;padding:4px 4px 8px}
#btnAttack::before{width:36px;height:36px}
#btnAttack small{font-size:9px;max-width:76px}
.dock-r{gap:8px}
.dock-r .gbtn{width:60px;height:60px;font-size:12px;padding-bottom:7px}
.dock-r .gbtn::before{width:30px;height:30px}
#dock #btnArmy small{font-size:10px}
#btnMore{--b1:#7a5532;--b2:#4a2d17;--lip:#24160c;--rim:#1c1410}
#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.3'><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>")}
#btnMore .dot{right:auto;left:-2px;top:-2px}
#menu{display:none!important}
/* selected building: small, never covers the village */
#selBar{gap:9px;bottom:calc(env(safe-area-inset-bottom,0px) + 22px)}
.rbtn{width:50px;height:50px;border-width:2.5px}
.rbtn svg{width:26px;height:26px}
.rbtn .cap{font-size:12px;margin-top:2px}
.rbtn .cost{font-size:11px;padding:0 6px 1px;bottom:-8px}
#selLabel{font-size:15px}#selLabel small{font-size:11px}
body.sel-on #dock{visibility:visible}
#sel.sheet{width:min(64vw,520px)}
/* menu tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;padding:6px 2px 10px}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px 9px;border-radius:14px;color:var(--panel-ink);
  background:radial-gradient(circle at 50% 35%,#fffaf0,#efdcb4 75%);border:2.5px solid #6b4a2b;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7),0 3px 0 #1c1410}
.tile .ti svg{width:38px;height:38px}.tile .tn{font:400 15px var(--f-display);color:#4e2a12}
.tile .dot{position:absolute;top:-6px;left:-6px}
/* profile */
.prof{display:flex;gap:12px;align-items:center;background:#fff7e6;border:1.5px solid #e3cfa8;border-radius:14px;padding:10px 12px}
.prof .pbadge{width:54px;height:62px;flex:none}.prof .pbadge svg{width:100%;height:100%}
.prof .body{flex:1;min-width:0}.prof .pnm{font:400 22px var(--f-display);color:#4e2a12}
.pstats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.pstats div{background:#fff7e6;border:1px solid #e3cfa8;border-radius:12px;padding:7px 4px;text-align:center}
.pstats b{display:block;font:400 19px var(--f-display);color:#4e2a12}.pstats span{font-size:12px;color:#7d6047}
/* settings */
.tracks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.trk{text-align:start;padding:8px 10px;border-radius:12px;background:#fff7e6;border:2px solid #e3cfa8;color:var(--panel-ink)}
.trk b{display:block;font:400 16px var(--f-display);color:#4e2a12}.trk span{font-size:12px;color:#7d6047}
.trk.on{border-color:#d99a14;background:#fff1c9;box-shadow:0 0 0 2px rgba(217,154,20,.35)}
.setrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.setrow .gbtn{font-size:15px;min-height:40px}

/* ---------- المراجعة (ب): بطاقات صغيرة تنقلب ---------- */
#shop .grid{grid-auto-columns:116px;gap:10px}
#shop .card{padding:6px 4px 8px;border-radius:14px}
#shop .card img{width:84px!important;height:auto!important}
#shop .card .nm{font-size:14px}#shop .card .ct{font-size:11px}
.fcard{perspective:700px;overflow:visible}
.fcard .fin{position:relative;width:100%;height:100%;transition:transform .32s cubic-bezier(.3,1.3,.5,1);transform-style:preserve-3d}
.fcard.flipped .fin{transform:rotateY(180deg)}
.fcard .front,.fcard .back{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.fcard .front{display:flex;flex-direction:column;align-items:center;gap:2px}
.fcard .back{position:absolute;inset:-6px -4px -8px;transform:rotateY(180deg);border-radius:14px;background:linear-gradient(180deg,#4a2d17,#2c190c);color:#f6ecd8;padding:8px 7px;text-align:start;overflow:hidden}
.bk b{display:block;font:400 15px var(--f-display);color:#ffd75a}.bk p{margin:2px 0 4px;font-size:11px;line-height:1.35}
.bk ul{margin:0;padding:0;list-style:none;font-size:11px;line-height:1.55}.bk li i{font-style:normal;font-weight:800;color:#ffe27a;margin-inline-start:4px}
.flipq{position:absolute;top:4px;right:4px;z-index:2;width:22px;height:22px;border-radius:50%;background:#1d6f9a;color:#fff;font:800 14px/22px var(--f-body);text-align:center;box-shadow:0 0 0 2px #fff,0 2px 0 rgba(0,0,0,.35)}
.fcard.flipped .flipq{background:#c0392b}
/* army: compact cards with counters and a minus */
.tgrid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))!important;gap:9px!important}
.tcard{min-height:128px;padding:6px 4px 8px!important}
.tcard img{width:62px;height:62px}
.tcard .nm{font-size:13px}
.tcard .cnt{position:absolute;top:-8px;left:-6px;z-index:3;background:#2f7f23;color:#fff;border-radius:10px;padding:0 7px;font:400 15px/22px var(--f-display);box-shadow:0 0 0 2px #fff,0 2px 0 rgba(0,0,0,.35);direction:ltr}
.tcard .cnt i{font-style:normal;color:#ffe27a;margin-inline-start:3px}
.tcard .minus{position:absolute;bottom:-8px;left:-6px;z-index:3;width:30px;height:30px;border-radius:50%;background:#c0392b;color:#fff;font:800 22px/28px var(--f-body);text-align:center;box-shadow:0 0 0 2px #fff,0 2px 0 rgba(0,0,0,.35)}
.tcard.flipped .cnt,.tcard.flipped .minus{visibility:hidden}
.qbox{background:#fff7e6;border:1.5px solid #e3cfa8;border-radius:12px;padding:8px 10px;margin:6px 0}
.qbox .acts{margin-top:6px}
/* saved armies */
.presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px;margin-bottom:8px}
.pslot{display:flex;flex-direction:column;gap:5px;background:#fff7e6;border:2px solid #e3cfa8;border-radius:14px;padding:7px 8px;color:var(--panel-ink)}
.pslot.empty{align-items:center;justify-content:center;border-style:dashed;min-height:96px;color:#7d6047}
.pslot.empty b{font:400 26px/1 var(--f-display)}.pslot.empty span{font-size:12px}
.pslot .ph{display:flex;justify-content:space-between;align-items:baseline}.pslot .ph b{font:400 16px var(--f-display);color:#4e2a12}.pslot .ph span{font-size:11px;color:#7d6047}
.pmini{display:flex;flex-wrap:wrap;gap:3px}.pmini span{display:flex;align-items:center;font:700 11px var(--f-body);background:#efdcb4;border-radius:8px;padding:0 4px 0 2px}.pmini img{width:20px;height:20px}
.pa{display:flex;gap:6px}.pa .gbtn{flex:1;min-height:34px;font-size:14px;padding:4px 8px}
.qbox{display:flex;align-items:center;gap:10px;padding:5px 8px;margin:4px 0}
.qbox .s{flex:none;font-size:12px;max-width:42%}
.qbox .prog{flex:1;margin:0}
.qbox .acts{margin:0;flex:none}.qbox .gbtn{min-height:34px;font-size:13px;padding:4px 10px}
#army .armyline{margin:2px 0}
#army .tabs{padding-bottom:4px!important}
/* ---------- المراجعة (د): مكسبك، المعلّم ---------- */
.bloot .bn{font-size:14px}.bloot .ab{font:700 11px var(--f-body);color:#ffb3a0}
.bloot .lr,.bloot .gr{display:flex;align-items:center;gap:4px;font-size:13px;direction:rtl}
.bloot .lr span,.bloot .gr span{font:700 10px var(--f-body);opacity:.8;margin-inline-end:4px}
.bloot .gr b{font:400 17px var(--f-display);color:#ffe27a;display:inline-block}
.bloot .gr b.bump{animation:bump .28s cubic-bezier(.3,1.8,.5,1)}
#bCoach{min-width:118px;font-size:16px;display:flex;flex-direction:column;align-items:center;line-height:1.1}#bCoach small{font:700 10px var(--f-body);opacity:.95}
#coachCap{position:absolute;left:50%;top:calc(env(safe-area-inset-top,0px) + 74px);transform:translateX(-50%);max-width:min(70vw,560px);text-align:center;background:rgba(28,20,16,.86);color:#fff;border:1.5px solid var(--brass);border-radius:14px;padding:6px 14px;font:600 14px/1.45 var(--f-body);pointer-events:none}
#coachCap.in{animation:barIn .3s cubic-bezier(.2,1.3,.4,1)}
.mjup ul{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:5px;text-align:start}
.mjup li{display:flex;align-items:center;gap:6px;background:#fff7e6;border:1px solid #e3cfa8;border-radius:10px;padding:5px 8px;font-size:13px;color:var(--panel-ink)}
.mjup li img{width:30px;height:30px;flex:none}
.mjup li::before{content:"";width:8px;height:8px;border-radius:50%;background:#2f7f23;flex:none}
.mjup li.dhow::before{background:#1d6f9a}.mjup li.cap::before{background:#d99a14}
.mcard .mjup{max-height:52vh;overflow:auto}
#bCoach{position:absolute;right:0;bottom:64px;pointer-events:auto}
#coachCap{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 18px)}

/* ================= ملاحظات 2026-10-21 (2): أصغر وأنظف ================= */
/* attack: no pulsing glow ("liquid shadow"), one crisp lip */
#btnAttack::after{display:none!important;animation:none!important}
#btnAttack{width:70px;height:70px;font-size:16px;padding:3px 3px 7px;border-width:2.5px;
  box-shadow:inset 0 0 0 2px var(--brass),inset 0 4px 0 rgba(255,255,255,.3),0 4px 0 var(--lip)}
#btnAttack::before{width:28px;height:28px}
#btnAttack small{font-size:8px;max-width:62px;margin-top:1px}
.dock-r .gbtn{width:50px;height:50px;font-size:10px;padding-bottom:5px;border-width:2px}
.dock-r .gbtn::before{width:24px;height:24px}
#dock #btnArmy small{font-size:9px}
#dock{bottom:calc(env(safe-area-inset-bottom,0px) + 8px)}
/* resources: compact bars top-right */
.resbox{transform:scale(.64);gap:5px}
/* top-left: profile chip and shield side by side, nothing else */
#top .profile{transform:scale(.74);flex-wrap:nowrap;max-width:none}
#top .profile .chip{height:34px}
#btnStatus.shieldchip{display:flex;height:34px;padding:0 10px;gap:5px}
#evChip{display:none}
/* builders: one clear button, top centre */
#btnBuilders{position:fixed;z-index:5;top:calc(env(safe-area-inset-top,0px) + 6px);left:50%;transform:translateX(-50%) scale(.86);height:34px;padding:0 12px;gap:6px;
  background:linear-gradient(180deg,#d99a14,#8a5a00);border:2px solid #1c1410;box-shadow:inset 0 0 0 1.5px rgba(255,226,122,.7),0 3px 0 #1c1410}
#btnBuilders .bl{font:400 15px var(--f-display);color:#fff}
#btnBuilders b{background:#1c1410;color:#ffe27a;border-radius:9px;padding:0 7px;font:400 15px/22px var(--f-display);direction:ltr}
#btnBuilders .dot{position:absolute;top:-6px;left:-6px}
body.battle-on #btnBuilders,#app[hidden] #btnBuilders{display:none}
/* building bar even smaller */
.rbtn{width:44px;height:44px;border-width:2px}.rbtn svg{width:22px;height:22px}
.rbtn .cap{font-size:11px}.rbtn .cost{font-size:10px}
#selBar{gap:8px;bottom:calc(env(safe-area-inset-bottom,0px) + 18px)}
/* profile buttons */
.prof .pbtns{display:flex;flex-direction:column;gap:6px}.prof .pbtns .gbtn{font-size:14px;min-height:36px;display:flex;align-items:center;gap:4px}
.prof .pbtns svg{width:18px;height:18px}
/* builder panel rows */
.brow img{width:46px;height:40px;object-fit:contain}.brow.off{opacity:.62}.brow .gbtn{min-width:96px;font-size:14px}
/* battle speed */
#btnSpeed{min-width:56px;font:400 20px var(--f-display);pointer-events:auto}
.bbtns{align-items:flex-end}
#top .profile{flex-direction:row!important;align-items:center;gap:6px}
.brow{padding:4px 8px!important;min-height:0}.brow .t{font-size:15px}.brow .gbtn{min-height:34px;padding:3px 10px}
#builders,.brow img{flex:none}