/* Styl HUD: zakładki i karty budowy (ilustracja, granatowa tabliczka z nazwą, pasek kosztu) oraz panel zaznaczenia. */
#build { padding: 10px 12px 12px; }
#tabs { gap: 6px; margin-bottom: 10px; }
.tab {
  padding: 6px 4px; color: var(--gold); border: 2px solid #6b4a26; border-radius: 4px; text-transform: uppercase; letter-spacing: 1px; font-size: 13px;
  background: linear-gradient(#3a2616, #22150c); box-shadow: inset 0 1px 0 #d9ae5a33, 0 2px 0 #0b0604;
}
.tab:hover { color: var(--gold-hi); border-color: var(--gold); background: linear-gradient(#4a301b, #2a1a0f); }
.tab.on, .tab.on:hover {
  color: #eef3ff; border-color: var(--gold); text-shadow: 0 1px 2px #030a1c;
  background: linear-gradient(#2b5cb8, #1a418c 50%, #112b66); box-shadow: inset 0 0 0 1px #07142e, 0 0 8px #f5c85a44;
}

.cb {
  width: 120px; padding: 0; overflow: hidden; display: flex; flex-direction: column; border: 2px solid var(--gold); border-radius: 5px; background: #0b0f18;
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #3a2a14, 0 3px 6px #0009;
}
.cb img {
  width: 100%; height: 84px; margin: 0; padding: 6px 8px 4px;
  background: radial-gradient(ellipse at 50% 75%, #36522f 0, #1a2a1d 42%, #0c121b 100%);
}
.cb b {
  height: 32px; padding: 0 3px; line-height: 1.1; text-align: center; color: #eef3ff; font: 700 11.5px/1.1 Georgia, serif; letter-spacing: .3px; text-transform: uppercase; text-shadow: 0 1px 2px #030a1c;
  background: linear-gradient(#245099, #14367a 55%, #0e2a60); border-block: 1px solid #07142e;
}
.cb .cost { margin: 0; padding: 6px 2px 7px; gap: 5px; font: 700 12px Georgia, serif; letter-spacing: -.2px; color: #fff1d0; background: #090c13; white-space: nowrap; }
.cb .cost span { gap: 1px; }
.cb .cost .ic { width: 12px; height: 12px; } /* trzy koszty (drewno, kamień, złoto) mieszczą się na karcie */
.cb:hover { border-color: var(--gold-hi); background: #0b0f18; box-shadow: 0 0 0 1px #000, 0 0 14px #f5c85a77, 0 3px 6px #0009; transform: translateY(-2px); }
.cb.on { border-color: var(--gold-hi); background: #0b0f18; box-shadow: 0 0 0 1px #000, 0 0 16px #f5c85acc, inset 0 0 0 2px #f5c85a66; }
.cb.no { border-color: #5a4a30; background: #0b0f18; box-shadow: 0 0 0 1px #000, 0 3px 6px #0009; }
.cb.no img { filter: grayscale(.85) brightness(.6); }
.cb.no b { color: #9aa0ad; background: linear-gradient(#3b3f49, #262930); border-block-color: #111; }
.cb.no:hover { border-color: #a58a55; background: #0b0f18; transform: none; box-shadow: 0 0 0 1px #000, 0 3px 6px #0009; }
.cb .key { left: 4px; top: 4px; z-index: 1; border: 1px solid var(--gold); border-radius: 3px; background: #0b0f18cc; color: var(--gold-hi); }

/* Panel zaznaczenia: portret w złotej ramce, nazwa złotem, czerwone serce przy pasku życia. */
#sel { padding: 13px 13px 12px; }
.sel-head { gap: 12px; padding-bottom: 9px; margin-bottom: 9px; border-bottom: 1px solid #6b4a26; }
.sel-head img {
  width: 66px; height: 66px; padding: 3px; border: 2px solid var(--gold); border-radius: 4px; box-shadow: 0 0 0 1px #000, inset 0 0 8px #000a;
  background: radial-gradient(ellipse at 50% 70%, #2d4a8a, #101a30 70%);
}
.sel-head h3 { color: var(--gold-hi); font: 800 18px Georgia, serif; text-transform: uppercase; letter-spacing: .6px; text-shadow: 0 2px 2px #000; }
.sel-head em { color: #9fc4ff; font-family: Georgia, serif; }
.bar {
  height: 22px; margin-left: 20px; border: 2px solid var(--gold); border-radius: 4px; background: #070a0f;
  box-shadow: 0 0 0 1px #000, inset 0 2px 4px #000c; overflow: visible;
}
.bar::before { content: '♥'; position: absolute; left: -22px; top: 50%; transform: translateY(-50%); font-size: 20px; color: #e8453a; text-shadow: 0 0 6px #e8453a88, 0 1px 2px #000; }
.bar i { border-radius: 2px; background: linear-gradient(#8bea62, #3ea72a 55%, #2a7a1c); }
.bar span { font-family: Georgia, serif; }
.mini .bar { margin-left: 0; overflow: hidden; }
.mini .bar::before { display: none; }
.row { padding: 4px 0; border-color: #3a2a18; font-size: 15px; }
.row span { color: var(--muted); }
.hint, .hero-status { font-family: Georgia, serif; }
.mini { border: 2px solid var(--gold); background: radial-gradient(ellipse at 50% 70%, #2d4a8a, #101a30 70%); }
.act .btn { padding: 10px; font-size: 16px; }

/* Limit jednostek na zakładce Wojsko (hud/build-menu.js): liczba/limit, czerwona przy pełnym limicie. */
.tab .pop { margin-left: 6px; padding: 0 5px; border-radius: 3px; background: #0b0f18aa; color: #cfe3ff; font: 700 11px Georgia, serif; letter-spacing: 0; text-transform: none; }
.tab .pop.full { color: #ff8a7a; background: #3a0e0acc; }
/* Badania kuźni w panelu zaznaczenia (hud/forge-panel.js) */
.act.forge { display: flex; flex-direction: column; gap: 6px; }
.act.forge .btn { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; font-size: 14px; }
.act.forge .btn .cost { margin: 0; gap: 6px; font-size: 12px; }