/* Game HUD theme: generated by client/themes/medieval/gen.mjs (M9c · Night Watch). Edit the generator, not this file. */
/* M9c · Night Watch — darker slate throughout, banners in the team blue instead of red, cold silver trim */
:root { --portrait-bg:#1c2230; }
#top, #topright, #sel, #actions, #build, #mm, #title { backdrop-filter:none; }
#top { border:9px solid transparent; border-radius:6px; background:linear-gradient(rgba(8,12,20,.45), rgba(0,0,6,.62)) padding-box, url(/client/assets/tex/slate-dark.png) 0 0/200px padding-box, linear-gradient(180deg, rgba(255,255,255,0.2), rgba(0,0,0,0.3)) border-box, url(/client/assets/tex/slate-dark.png) 0 0/140px border-box; box-shadow:0 0 0 1px rgba(0,0,0,.7), 0 10px 22px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.6), inset 0 2px 12px rgba(0,0,0,0.35); color:#eef2f6; left:14px; top:12px; padding:5px 6px; gap:0; }
#top::after, #topright::after, #sel::after, #actions::after, #build::after, #mm::after { content:''; position:absolute; inset:-13px; pointer-events:none; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2030%2030%22%3E%3Cg%20transform%3D%22rotate%280%2015%2015%29%22%3E%3Cpath%20d%3D%22M1.5%201.5H26V10H10V26H1.5Z%22%20fill%3D%22%238a929c%22%20stroke%3D%22%232a2e34%22%20stroke-width%3D%221.2%22%2F%3E%3Cpath%20d%3D%22M3%203H24.5V4.6H4.6V24.5H3Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C.28%29%22%2F%3E%3Cg%20fill%3D%22%232a2e34%22%3E%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%222.1%22%2F%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%226%22%20r%3D%221.7%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2221%22%20r%3D%221.7%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22rgba%28255%2C255%2C255%2C.55%29%22%3E%3Ccircle%20cx%3D%225.4%22%20cy%3D%225.4%22%20r%3D%22.8%22%2F%3E%3Ccircle%20cx%3D%2220.5%22%20cy%3D%225.5%22%20r%3D%22.6%22%2F%3E%3Ccircle%20cx%3D%225.5%22%20cy%3D%2220.5%22%20r%3D%22.6%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") left top/30px no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2030%2030%22%3E%3Cg%20transform%3D%22rotate%2890%2015%2015%29%22%3E%3Cpath%20d%3D%22M1.5%201.5H26V10H10V26H1.5Z%22%20fill%3D%22%238a929c%22%20stroke%3D%22%232a2e34%22%20stroke-width%3D%221.2%22%2F%3E%3Cpath%20d%3D%22M3%203H24.5V4.6H4.6V24.5H3Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C.28%29%22%2F%3E%3Cg%20fill%3D%22%232a2e34%22%3E%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%222.1%22%2F%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%226%22%20r%3D%221.7%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2221%22%20r%3D%221.7%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22rgba%28255%2C255%2C255%2C.55%29%22%3E%3Ccircle%20cx%3D%225.4%22%20cy%3D%225.4%22%20r%3D%22.8%22%2F%3E%3Ccircle%20cx%3D%2220.5%22%20cy%3D%225.5%22%20r%3D%22.6%22%2F%3E%3Ccircle%20cx%3D%225.5%22%20cy%3D%2220.5%22%20r%3D%22.6%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") right top/30px no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2030%2030%22%3E%3Cg%20transform%3D%22rotate%28270%2015%2015%29%22%3E%3Cpath%20d%3D%22M1.5%201.5H26V10H10V26H1.5Z%22%20fill%3D%22%238a929c%22%20stroke%3D%22%232a2e34%22%20stroke-width%3D%221.2%22%2F%3E%3Cpath%20d%3D%22M3%203H24.5V4.6H4.6V24.5H3Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C.28%29%22%2F%3E%3Cg%20fill%3D%22%232a2e34%22%3E%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%222.1%22%2F%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%226%22%20r%3D%221.7%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2221%22%20r%3D%221.7%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22rgba%28255%2C255%2C255%2C.55%29%22%3E%3Ccircle%20cx%3D%225.4%22%20cy%3D%225.4%22%20r%3D%22.8%22%2F%3E%3Ccircle%20cx%3D%2220.5%22%20cy%3D%225.5%22%20r%3D%22.6%22%2F%3E%3Ccircle%20cx%3D%225.5%22%20cy%3D%2220.5%22%20r%3D%22.6%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") left bottom/30px no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2030%2030%22%3E%3Cg%20transform%3D%22rotate%28180%2015%2015%29%22%3E%3Cpath%20d%3D%22M1.5%201.5H26V10H10V26H1.5Z%22%20fill%3D%22%238a929c%22%20stroke%3D%22%232a2e34%22%20stroke-width%3D%221.2%22%2F%3E%3Cpath%20d%3D%22M3%203H24.5V4.6H4.6V24.5H3Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C.28%29%22%2F%3E%3Cg%20fill%3D%22%232a2e34%22%3E%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%222.1%22%2F%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%226%22%20r%3D%221.7%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2221%22%20r%3D%221.7%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22rgba%28255%2C255%2C255%2C.55%29%22%3E%3Ccircle%20cx%3D%225.4%22%20cy%3D%225.4%22%20r%3D%22.8%22%2F%3E%3Ccircle%20cx%3D%2220.5%22%20cy%3D%225.5%22%20r%3D%22.6%22%2F%3E%3Ccircle%20cx%3D%225.5%22%20cy%3D%2220.5%22%20r%3D%22.6%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") right bottom/30px no-repeat; }
.res { padding:3px 14px; gap:10px; } .res + .res { border-left:2px solid rgba(0,0,0,.38); box-shadow:inset 1px 0 0 rgba(255,255,255,0.12); }
.res .ic { width:38px; height:38px; background:radial-gradient(circle at 35% 30%, #3a64c0, #0e1f48); border:2px solid #cfd8e3; box-shadow:inset 0 2px 4px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.15); }
.res .ic svg { width:23px; height:23px; filter:drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.res b { color:#ffffff; font-size:21px; font-weight:900; text-shadow:0 2px 0 rgba(0,0,0,.75); }
.res small { color:#a9b4c2; opacity:1; font:700 10px/1.1 'Palatino Linotype','Book Antiqua',Palatino,Constantia,Georgia,serif; letter-spacing:.1em; text-transform:uppercase; }
.res.pop.full b { color:#ff6a55; }
#title { top:10px; border:9px solid transparent; border-radius:6px; background:linear-gradient(rgba(8,12,20,.45), rgba(0,0,6,.62)) padding-box, url(/client/assets/tex/slate-dark.png) 0 0/200px padding-box, linear-gradient(180deg, rgba(255,255,255,0.2), rgba(0,0,0,0.3)) border-box, url(/client/assets/tex/slate-dark.png) 0 0/140px border-box; box-shadow:0 0 0 1px rgba(0,0,0,.7), 0 10px 22px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.6), inset 0 2px 12px rgba(0,0,0,0.35); color:#eef2f6; background:linear-gradient(rgba(255,255,255,.12), rgba(0,0,0,.25)) padding-box, linear-gradient(#c43a2e, #8a1c14) padding-box, linear-gradient(180deg, rgba(255,255,255,0.2), rgba(0,0,0,0.3)) border-box, url(/client/assets/tex/slate-dark.png) 0 0/140px border-box; padding:6px 30px 8px 18px; gap:10px; font:700 30px/1.1 'Palatino Linotype','Book Antiqua',Palatino,Constantia,Georgia,serif; letter-spacing:.05em; text-shadow:0 2px 0 rgba(0,0,0,.8), 0 0 10px rgba(0,0,0,.4); border:none !important; border-radius:0; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22c%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%233a78f0%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23173c9a%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22f%22%20x1%3D%220%22%20x2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23000%22%20stop-opacity%3D%22.22%22%2F%3E%3Cstop%20offset%3D%22.18%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.08%22%2F%3E%3Cstop%20offset%3D%22.35%22%20stop-color%3D%22%23000%22%20stop-opacity%3D%22.1%22%2F%3E%3Cstop%20offset%3D%22.55%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.1%22%2F%3E%3Cstop%20offset%3D%22.78%22%20stop-color%3D%22%23000%22%20stop-opacity%3D%22.12%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23000%22%20stop-opacity%3D%22.25%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M8%207%20H392%20V76%20L200%20100%20L8%2076%20Z%22%20fill%3D%22url%28%23c%29%22%2F%3E%3Cpath%20d%3D%22M8%207%20H392%20V76%20L200%20100%20L8%2076%20Z%22%20fill%3D%22url%28%23f%29%22%2F%3E%3Cpath%20d%3D%22M8%207%20H392%20V76%20L200%20100%20L8%2076%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23cfd8e3%22%20stroke-width%3D%223%22%20vector-effect%3D%22non-scaling-stroke%22%2F%3E%3Cpath%20d%3D%22M8%207%20H392%20V76%20L200%20100%20L8%2076%20Z%22%20fill%3D%22none%22%20stroke%3D%22rgba%280%2C0%2C0%2C.55%29%22%20stroke-width%3D%221%22%20vector-effect%3D%22non-scaling-stroke%22%20transform%3D%22translate%280%200%29%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22400%22%20height%3D%228%22%20rx%3D%224%22%20fill%3D%22%232a2c30%22%20stroke%3D%22%230a0b0d%22%20stroke-width%3D%221%22%20vector-effect%3D%22non-scaling-stroke%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%221.5%22%20width%3D%22396%22%20height%3D%222%22%20fill%3D%22rgba%28255%2C255%2C255%2C.25%29%22%2F%3E%3C%2Fsvg%3E") 0 0/100% 100% no-repeat !important; box-shadow:none !important; padding:14px 50px 34px 32px; filter:drop-shadow(0 6px 8px rgba(0,0,0,.45));  }
#title::before { content:''; width:36px; height:42px; flex:none; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2046%22%3E%3Cpath%20d%3D%22M3%203H37V20C37%2032%2027%2040%2020%2043C13%2040%203%2032%203%2020Z%22%20fill%3D%22%23cfd8e3%22%20stroke%3D%22rgba%280%2C0%2C0%2C.55%29%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M7%207H33V20C33%2029.5%2025.5%2036%2020%2038.6C14.5%2036%207%2029.5%207%2020Z%22%20fill%3D%22%232f6fe8%22%2F%3E%3Cpath%20d%3D%22M7%207H33V12H7Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C.18%29%22%2F%3E%3Cg%20transform%3D%22translate%288%208%29%20scale%281%29%22%3E%3Cpath%20d%3D%22M12%203C10%206%2010%209%2012%2012C14%209%2014%206%2012%203ZM12%2012C9%209%205%209%205%2013C5%2015%207%2016%208.5%2015C7.5%2014%208%2012.5%209.5%2012.8C10.5%2013%2011%2014%2012%2015ZM12%2012C15%209%2019%209%2019%2013C19%2015%2017%2016%2015.5%2015C16.5%2014%2016%2012.5%2014.5%2012.8C13.5%2013%2013%2014%2012%2015ZM8%2015.5H16V17H8ZM11%2017H13L12.6%2021H11.4Z%22%20fill%3D%22%23f6ecd2%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/contain no-repeat; margin-right:4px; filter:drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
#title::after { content:none; width:auto; height:auto; }
#title .t1 { color:#fff4e0; } #title .t2 { color:#9cc2ff; }
#topright { border:9px solid transparent; border-radius:6px; background:linear-gradient(rgba(8,12,20,.45), rgba(0,0,6,.62)) padding-box, url(/client/assets/tex/slate-dark.png) 0 0/200px padding-box, linear-gradient(180deg, rgba(255,255,255,0.2), rgba(0,0,0,0.3)) border-box, url(/client/assets/tex/slate-dark.png) 0 0/140px border-box; box-shadow:0 0 0 1px rgba(0,0,0,.7), 0 10px 22px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.6), inset 0 2px 12px rgba(0,0,0,0.35); color:#eef2f6; top:12px; right:14px; padding:4px 6px 4px 14px; }
#clock { color:#ffffff; font-size:20px; font-weight:900; text-shadow:0 2px 0 rgba(0,0,0,.75); }
.gear { width:34px; height:34px; border-radius:5px; background:linear-gradient(rgba(255,255,255,.04), rgba(0,0,0,.4)), url(/client/assets/tex/slate.png) 0 0/130px; border:2px solid #7a8494; color:#f2f3f5; box-shadow:inset 0 1px 0 rgba(255,255,255,.2), inset 0 -2px 0 rgba(0,0,0,.35); font-size:17px; }
.gear:hover { border-color:#cfd8e3; color:#cfd8e3; }
#bottom { height:206px; gap:14px; padding:0 0 14px 18px; }
#sel { border:9px solid transparent; border-radius:6px; background:linear-gradient(rgba(8,12,20,.45), rgba(0,0,6,.62)) padding-box, url(/client/assets/tex/slate-dark.png) 0 0/200px padding-box, linear-gradient(180deg, rgba(255,255,255,0.2), rgba(0,0,0,0.3)) border-box, url(/client/assets/tex/slate-dark.png) 0 0/140px border-box; box-shadow:0 0 0 1px rgba(0,0,0,.7), 0 10px 22px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.6), inset 0 2px 12px rgba(0,0,0,0.35); color:#eef2f6; height:162px; width:448px; position:relative; overflow:visible; }
#portrait { width:134px; height:auto; align-self:stretch; margin:6px; border:3px solid #7a8494; border-radius:4px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.6), inset 0 0 18px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.12); background:transparent; }
#multisel { border-right:2px solid rgba(0,0,0,.4); background:rgba(0,0,0,.15); }
#selinfo { background:transparent; color:#eef2f6; padding:8px 14px 8px 8px; }
#selinfo h2 { color:#eef2f6; font:700 23px/1.15 'Palatino Linotype','Book Antiqua',Palatino,Constantia,Georgia,serif; letter-spacing:.02em; text-shadow:0 2px 0 rgba(0,0,0,.6); }
#selinfo .sub { color:#a9b4c2; opacity:1; } #selinfo .stats, #selinfo .desc { color:#a9b4c2; opacity:1; } #selinfo .hp { color:#eef2f6; }
.bar { height:11px; background:rgba(0,0,0,.5); border:1px solid rgba(0,0,0,.8); border-radius:3px; box-shadow:0 1px 0 rgba(255,255,255,.12), inset 0 1px 2px rgba(0,0,0,.6); }
.bar i { background:linear-gradient(#b8f08a, #4aa032 60%, #3a8a26); box-shadow:inset 0 1px 0 rgba(255,255,255,.35); }
.bar.prog i { background:linear-gradient(#ffe68a, #d9a13a); }
#actions, #build { border:9px solid transparent; border-radius:6px; background:linear-gradient(rgba(8,12,20,.45), rgba(0,0,6,.62)) padding-box, url(/client/assets/tex/slate-dark.png) 0 0/200px padding-box, linear-gradient(180deg, rgba(255,255,255,0.2), rgba(0,0,0,0.3)) border-box, url(/client/assets/tex/slate-dark.png) 0 0/140px border-box; box-shadow:0 0 0 1px rgba(0,0,0,.7), 0 10px 22px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.6), inset 0 2px 12px rgba(0,0,0,0.35); color:#eef2f6; height:162px; padding:7px 9px; gap:8px; position:relative; }
#actions::before { content:'Commands'; position:absolute; top:-34px; left:50%; transform:translateX(-50%); padding:3px 22px 4px; border-radius:6px; font:700 15px/1.2 'Palatino Linotype','Book Antiqua',Palatino,Constantia,Georgia,serif; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; color:#fff4e0; border:3px solid transparent; background:linear-gradient(rgba(255,255,255,.14), rgba(0,0,0,.22)) padding-box, linear-gradient(#3a78f0, #1c4ab8) padding-box, linear-gradient(180deg, rgba(255,255,255,0.2), rgba(0,0,0,0.3)) border-box, url(/client/assets/tex/slate-dark.png) 0 0/140px border-box; box-shadow:0 0 0 1px rgba(0,0,0,.7), 0 4px 10px rgba(0,0,0,.4); text-shadow:0 1px 0 rgba(0,0,0,.8);  } #build::before { content:'Build'; position:absolute; top:-34px; left:50%; transform:translateX(-50%); padding:3px 22px 4px; border-radius:6px; font:700 15px/1.2 'Palatino Linotype','Book Antiqua',Palatino,Constantia,Georgia,serif; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; color:#fff4e0; border:3px solid transparent; background:linear-gradient(rgba(255,255,255,.14), rgba(0,0,0,.22)) padding-box, linear-gradient(#3a78f0, #1c4ab8) padding-box, linear-gradient(180deg, rgba(255,255,255,0.2), rgba(0,0,0,0.3)) border-box, url(/client/assets/tex/slate-dark.png) 0 0/140px border-box; box-shadow:0 0 0 1px rgba(0,0,0,.7), 0 4px 10px rgba(0,0,0,.4); text-shadow:0 1px 0 rgba(0,0,0,.8);  }
.btn { background:linear-gradient(rgba(255,255,255,.04), rgba(0,0,0,.4)), url(/client/assets/tex/slate.png) 0 0/130px; border:2px solid #7a8494; border-radius:5px; color:#f2f3f5; box-shadow:inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -3px 0 rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.45); }
.btn:hover { border-color:#cfd8e3; box-shadow:0 0 0 2px #cfd8e355, 0 0 16px #cfd8e388, inset 0 1px 0 rgba(255,255,255,.25); }
.btn .ico { color:#f2f3f5; filter:drop-shadow(0 1px 1px rgba(0,0,0,.55)); }
.btn .lbl { color:#f2f3f5; font-weight:800; text-shadow:0 1px 0 rgba(0,0,0,.7); }
.btn .cost { background:rgba(0,0,0,.6); color:#cfe0ff; border:1px solid rgba(0,0,0,.6); font-weight:800; }
.btn.poor .cost { background:#7a1f16; color:#ffd9d2; border-color:#3a0a06; }
.btn .lvl { color:#cfd8e3; opacity:.9; }
.qi, #multisel .mini { background:linear-gradient(rgba(255,255,255,.04), rgba(0,0,0,.4)), url(/client/assets/tex/slate.png) 0 0/130px; border:1.5px solid #7a8494; color:#f2f3f5; } .qi i { background:#cfd8e3; } #multisel .mini b { color:#f2f3f5; }
.warn { color:#ff7a60; }
#mm { border:12px solid transparent; border-radius:6px; background:linear-gradient(rgba(8,12,20,.45), rgba(0,0,6,.62)) padding-box, url(/client/assets/tex/slate-dark.png) 0 0/200px padding-box, linear-gradient(180deg, rgba(255,255,255,0.2), rgba(0,0,0,0.3)) border-box, url(/client/assets/tex/slate-dark.png) 0 0/140px border-box; box-shadow:0 0 0 1px rgba(0,0,0,.7), 0 10px 22px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.6), inset 0 2px 12px rgba(0,0,0,0.35); color:#eef2f6; width:236px; height:236px; padding:3px; right:14px; bottom:14px; }
#mm::before { content:'N'; position:absolute; top:-24px; left:50%; transform:translateX(-50%); width:26px; height:26px; border-radius:50%; font:700 14px/22px 'Palatino Linotype','Book Antiqua',Palatino,Constantia,Georgia,serif; text-align:center; color:#fff4e0; border:2px solid #cfd8e3; background:radial-gradient(circle at 35% 30%, #3a64c0, #0e1f48); box-shadow:0 2px 5px rgba(0,0,0,.6); z-index:2; }
#minimap { border:2px solid rgba(0,0,0,.75); border-radius:3px; box-shadow:0 0 0 1px #cfd8e366; }
#tip { background:rgba(20,14,8,.95); border:2px solid #7a8494; border-radius:6px; color:#f3e6c8; }
.toast { background:rgba(20,14,8,.95); border:2px solid #7a8494; color:#f3e6c8; }
.btn img.unitpic { width:78px; height:78px; margin:-12px 0 -8px; border-radius:50%; background:radial-gradient(circle at 50% 46%, rgba(255,236,200,.34), rgba(255,236,200,.08) 52%, rgba(255,236,200,0) 68%); filter:drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.qi img.unitpic, #multisel .mini img.unitpic { width:100%; height:100%; margin:0; object-fit:cover; }
.qi { width:34px; height:34px; }
#actions::before, #build::before { clip-path:polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%); padding:3px 30px 4px; }

/* HUD size: every panel is scaled from its own screen corner by --hud (Vinchi: "o hud está muito grande") */
:root { --hud:.78; }
@media (max-width:1500px) { :root { --hud:.68; } }
@media (max-width:1200px) { :root { --hud:.6; } }
#top { transform-origin:0 0; transform:scale(var(--hud)); }
#topright { transform-origin:100% 0; transform:scale(var(--hud)); }
#title { left:50%; transform-origin:50% 0; transform:translateX(-50%) scale(var(--hud)); }
#mm { transform-origin:100% 100%; transform:scale(var(--hud)); }
/* the bottom bar is laid out wider and scaled down, so after scaling it ends just left of the minimap */
#bottom, #bottom[style] { zoom:1 !important; right:auto; width:calc((100vw - 250px * var(--hud) - 34px) / var(--hud)); transform-origin:0 100%; transform:scale(var(--hud)); }
/* top-right: just the game time and the ⚙ button, no panel around them (Vinchi); FPS, when switched on, is a small line underneath */
#topright { border:none !important; background:none !important; box-shadow:none !important; padding:0 !important; gap:10px; }
#topright::after { content:none !important; }
#clock { font-size:24px; letter-spacing:.02em; text-shadow:0 2px 2px rgba(0,0,0,.9), 0 0 10px rgba(0,0,0,.65), 0 0 2px #000; }
#fpsline { top:58px; right:18px; font:800 12px/1 Nunito, 'Segoe UI', sans-serif; color:rgba(255,255,255,.85); text-shadow:0 1px 2px #000, 0 0 6px rgba(0,0,0,.7); pointer-events:none; transform-origin:100% 0; transform:scale(var(--hud)); }
/* the build bar (shown while nothing is selected) sits centred at the bottom of the screen; 50vw is converted into the scaled bar's own units */
#build { position:absolute; left:calc(50vw / var(--hud)); bottom:14px; transform:translateX(-50%); }
.btn img.unitpic { width:78px; height:78px; }
@container (max-width:97px) { .btn img.unitpic { width:60px; height:60px; margin:-6px 0 -4px; } }
#portrait canvas.pcv { position:absolute; inset:0; width:100%; height:100%; display:block; border-radius:inherit; }
#portrait { position:relative; overflow:hidden; }