/* HUD cards: generated by client/themes/cards/gen.mjs (units C5 · Banner card, buildings K3 · Blueprint card). Edit the generator, not this file. */
/* C5 · Banner card — pale stone frame without inlays, the name on a blue swallowtail ribbon across the bottom, cost chip at the top */
.btn:has(> img.unitpic) { width:100px; height:128px; padding:0; gap:0; justify-content:flex-start; border:5px solid transparent; border-radius:4px; overflow:visible;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20d%3D%22M6%20.8%2011.2%206%206%2011.2%20.8%206Z%22%20fill%3D%22%23d8d2c4%22%20stroke%3D%22%235a5448%22%20stroke-width%3D%221%22%2F%3E%3Cpath%20d%3D%22M6%202.2%209.8%206%206%206%202.2%206Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C.28%29%22%2F%3E%3C%2Fsvg%3E") left top/13px no-repeat border-box, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20d%3D%22M6%20.8%2011.2%206%206%2011.2%20.8%206Z%22%20fill%3D%22%23d8d2c4%22%20stroke%3D%22%235a5448%22%20stroke-width%3D%221%22%2F%3E%3Cpath%20d%3D%22M6%202.2%209.8%206%206%206%202.2%206Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C.28%29%22%2F%3E%3C%2Fsvg%3E") right top/13px no-repeat border-box, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20d%3D%22M6%20.8%2011.2%206%206%2011.2%20.8%206Z%22%20fill%3D%22%23d8d2c4%22%20stroke%3D%22%235a5448%22%20stroke-width%3D%221%22%2F%3E%3Cpath%20d%3D%22M6%202.2%209.8%206%206%206%202.2%206Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C.28%29%22%2F%3E%3C%2Fsvg%3E") left bottom/13px no-repeat border-box, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20d%3D%22M6%20.8%2011.2%206%206%2011.2%20.8%206Z%22%20fill%3D%22%23d8d2c4%22%20stroke%3D%22%235a5448%22%20stroke-width%3D%221%22%2F%3E%3Cpath%20d%3D%22M6%202.2%209.8%206%206%206%202.2%206Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C.28%29%22%2F%3E%3C%2Fsvg%3E") right bottom/13px no-repeat border-box, radial-gradient(ellipse at 50% 36%, #2c4474 0%, #14223d 52%, #0a1222 100%) padding-box, linear-gradient(180deg, rgba(255,255,255,.22), rgba(0,0,0,.35)) border-box, url(/client/assets/tex/stone-light.png) 0 0/90px border-box;
  box-shadow:0 0 0 1px #07090c, 0 3px 7px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.75), inset 0 0 14px rgba(0,0,0,.55); }
.btn:has(> img.unitpic)::before { content:''; position:absolute; top:-10px; left:50%; transform:translateX(-50%); width:22px; height:25px; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2044%22%3E%3Cpath%20d%3D%22M2%202H38V18C38%2030%2028%2038%2020%2042C12%2038%202%2030%202%2018Z%22%20fill%3D%22%23c9ccd2%22%20stroke%3D%22rgba%280%2C0%2C0%2C.6%29%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M6%206H34V18C34%2027.5%2026%2034%2020%2037.5C14%2034%206%2027.5%206%2018Z%22%20fill%3D%22%232f6fe8%22%2F%3E%3Cpath%20d%3D%22M6%206H34V11H6Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C.2%29%22%2F%3E%3Cg%20transform%3D%22translate%288%207%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%23ffffff%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/contain no-repeat; z-index:3; filter:drop-shadow(0 1px 1px rgba(0,0,0,.7)); pointer-events:none; }
.btn:has(> img.unitpic) img.unitpic { order:1; width:100%; height:90px; margin:-2px 0 -16px; flex:none; object-fit:cover; object-position:50% 45%; background:none; border-radius:0; filter:drop-shadow(0 3px 3px rgba(0,0,0,.65)); }
.btn:has(> img.unitpic) .lbl { order:3; margin-top:auto; width:100%; max-width:none; padding:3px 2px 4px; background:linear-gradient(#20304c, #0f1829); border-top:2px solid #d8d2c4; box-shadow:inset 0 1px 0 rgba(255,255,255,.12); color:#f1f4f8; font:700 12px/1.15 'Palatino Linotype','Book Antiqua',Palatino,Georgia,serif; letter-spacing:.02em; text-shadow:0 1px 0 #000; -webkit-line-clamp:1; border-radius:0 0 2px 2px; }
.btn:has(> img.unitpic) .cost { order:2; position:relative; z-index:2; height:18px; padding:1px 7px; margin:0 0 2px; font-size:10.5px; background:rgba(6,10,18,.82); color:#dfe8ff; border:1px solid #d8d2c4; border-radius:9px; }
.btn:has(> img.unitpic) .lvl { top:5px; left:5px; right:auto; bottom:auto; z-index:2; padding:0 4px; border-radius:3px; background:rgba(6,10,18,.8); color:#cfe0ff; font-size:9px; }
.btn:has(> img.unitpic):hover { border-color:transparent; box-shadow:0 0 0 2px #9cc2ff, 0 0 16px #9cc2ffaa, inset 0 0 0 1px rgba(0,0,0,.75); }
.btn:has(> img.unitpic).locked { filter:grayscale(.85) brightness(.8); opacity:.75; }
.btn:has(> img.unitpic).poor .cost { background:#6a1a14; color:#ffd9d2; }
@container (max-width:97px) { .btn:has(> img.unitpic) img.unitpic { height:80px; margin:0 0 -14px; } .btn:has(> img.unitpic) .lbl { font-size:11px; } }
.btn:has(> img.unitpic) .cost { order:0; margin:13px 0 -4px; height:16px; font-size:10px; } .btn:has(> img.unitpic) .lvl { top:auto; left:auto; bottom:27px; right:5px; } .btn:has(> img.unitpic) img.unitpic { margin:-2px 0 -8px; height:80px; } .btn:has(> img.unitpic) .lbl { width:112%; margin-left:-6%; background:linear-gradient(#3a78f0, #1c4ab8); border-top:none; clip-path:polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%); padding:4px 10px 5px; }
/* K3 · Blueprint card — building plans: parchment with a faint blue drafting grid, dark wood frame, hammer badge, the cost stamped at the top */
#build .btn { width:100px; height:128px; padding:0; gap:0; justify-content:flex-start; border:5px solid transparent; border-radius:4px; overflow:visible;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20d%3D%22M6%20.8%2011.2%206%206%2011.2%20.8%206Z%22%20fill%3D%22%23c9a36a%22%20stroke%3D%22%234a2e18%22%20stroke-width%3D%221%22%2F%3E%3Cpath%20d%3D%22M6%202.2%209.8%206%206%206%202.2%206Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C.28%29%22%2F%3E%3C%2Fsvg%3E") left top/13px no-repeat border-box, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20d%3D%22M6%20.8%2011.2%206%206%2011.2%20.8%206Z%22%20fill%3D%22%23c9a36a%22%20stroke%3D%22%234a2e18%22%20stroke-width%3D%221%22%2F%3E%3Cpath%20d%3D%22M6%202.2%209.8%206%206%206%202.2%206Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C.28%29%22%2F%3E%3C%2Fsvg%3E") right top/13px no-repeat border-box, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20d%3D%22M6%20.8%2011.2%206%206%2011.2%20.8%206Z%22%20fill%3D%22%23c9a36a%22%20stroke%3D%22%234a2e18%22%20stroke-width%3D%221%22%2F%3E%3Cpath%20d%3D%22M6%202.2%209.8%206%206%206%202.2%206Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C.28%29%22%2F%3E%3C%2Fsvg%3E") left bottom/13px no-repeat border-box, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20d%3D%22M6%20.8%2011.2%206%206%2011.2%20.8%206Z%22%20fill%3D%22%23c9a36a%22%20stroke%3D%22%234a2e18%22%20stroke-width%3D%221%22%2F%3E%3Cpath%20d%3D%22M6%202.2%209.8%206%206%206%202.2%206Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C.28%29%22%2F%3E%3C%2Fsvg%3E") right bottom/13px no-repeat border-box, repeating-linear-gradient(0deg, rgba(40,80,160,.16) 0 1px, transparent 1px 11px), repeating-linear-gradient(90deg, rgba(40,80,160,.16) 0 1px, transparent 1px 11px), linear-gradient(#efe2c2, #dcc8a0) padding-box, linear-gradient(180deg, rgba(255,255,255,.22), rgba(0,0,0,.35)) border-box, url(/client/assets/tex/dark-wood.png) 0 0/90px border-box;
  box-shadow:0 0 0 1px #07090c, 0 3px 7px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.75), inset 0 0 14px rgba(0,0,0,.55); }
#build .btn::before { content:''; position:absolute; top:-10px; left:50%; transform:translateX(-50%); width:22px; height:25px; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2044%22%3E%3Cpath%20d%3D%22M2%202H38V18C38%2030%2028%2038%2020%2042C12%2038%202%2030%202%2018Z%22%20fill%3D%22%23c9a36a%22%20stroke%3D%22rgba%280%2C0%2C0%2C.6%29%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M6%206H34V18C34%2027.5%2026%2034%2020%2037.5C14%2034%206%2027.5%206%2018Z%22%20fill%3D%22%232f6fe8%22%2F%3E%3Cpath%20d%3D%22M6%206H34V11H6Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C.2%29%22%2F%3E%3Cg%20transform%3D%22rotate%28-35%2020%2020%29%22%3E%3Crect%20x%3D%2218.3%22%20y%3D%2213%22%20width%3D%223.4%22%20height%3D%2220%22%20rx%3D%221.2%22%20fill%3D%22%23e8d2a8%22%20stroke%3D%22%236a4a2a%22%20stroke-width%3D%22.8%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%229%22%20width%3D%2216%22%20height%3D%226.5%22%20rx%3D%221.2%22%20fill%3D%22%23ffffff%22%20stroke%3D%22%233a3f48%22%20stroke-width%3D%22.8%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/contain no-repeat; z-index:3; filter:drop-shadow(0 1px 1px rgba(0,0,0,.7)); pointer-events:none; }
#build .btn img.ico { order:1; width:100%; height:90px; margin:-2px 0 -16px; flex:none; object-fit:cover; object-position:50% 45%; background:none; border-radius:0; filter:drop-shadow(0 3px 3px rgba(0,0,0,.65)); }
#build .btn .lbl { order:3; margin-top:auto; width:100%; max-width:none; padding:3px 2px 4px; background:linear-gradient(#4a3020, #2a1a10); border-top:2px solid #8a6a44; box-shadow:inset 0 1px 0 rgba(255,255,255,.12); color:#f1f4f8; font:700 12px/1.15 'Palatino Linotype','Book Antiqua',Palatino,Georgia,serif; letter-spacing:.02em; text-shadow:0 1px 0 #000; -webkit-line-clamp:1; border-radius:0 0 2px 2px; }
#build .btn .cost { order:2; position:relative; z-index:2; height:18px; padding:1px 7px; margin:0 0 2px; font-size:10.5px; background:rgba(6,10,18,.82); color:#dfe8ff; border:1px solid #8a6a44; border-radius:9px; }
#build .btn .lvl { top:5px; left:5px; right:auto; bottom:auto; z-index:2; padding:0 4px; border-radius:3px; background:rgba(6,10,18,.8); color:#cfe0ff; font-size:9px; }
#build .btn:hover { border-color:transparent; box-shadow:0 0 0 2px #f0d58a, 0 0 16px #f0d58aaa, inset 0 0 0 1px rgba(0,0,0,.75); }
#build .btn.locked { filter:grayscale(.85) brightness(.8); opacity:.75; }
#build .btn.poor .cost { background:#6a1a14; color:#ffd9d2; }
@container (max-width:97px) { #build .btn img.ico { height:80px; margin:0 0 -14px; } #build .btn .lbl { font-size:11px; } }
#build .btn img.ico { object-fit:contain; object-position:50% 60%; } #build .btn .cost { order:0; margin:13px 0 -2px; height:16px; font-size:10px; background:rgba(40,26,14,.85); color:#ffe6b0; } #build .btn img.ico { margin:0 0 -4px; height:74px; filter:drop-shadow(0 2px 2px rgba(60,40,20,.45)); }