/* Territories: the screen and the building card */
.tr-head { margin: 8px 12px; padding: 12px; border-radius: 14px; background: linear-gradient(#22321f, #141b14); border: 1px solid rgba(73,210,138,.4); display: grid; gap: 6px; }
.tr-big b { font-size: 30px; color: #49d28a; } .tr-big small { opacity: .8; }
.tr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 6px 12px 10px; }
.tr-chip { --c: #6d6a55; display: grid; gap: 1px; padding: 7px 2px; border-radius: 10px; border: 2px solid var(--c); background: color-mix(in srgb, var(--c) 22%, #12170f); color: #eef2ea; text-align: center; }
.tr-chip b { font-size: 12px; } .tr-chip small { font-size: 10px; opacity: .75; }
.tr-chip.mine { box-shadow: 0 0 0 1px #49d28a inset, 0 0 10px rgba(73,210,138,.35); }
.tr-item { display: grid; grid-template-columns: 36px 1fr auto; gap: 8px; align-items: center; margin: 4px 12px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.05); }
.tr-item .ic { font-size: 24px; text-align: center; } .tr-item .mid { display: grid; } .tr-item small { opacity: .8; font-size: 12px; }
.tr-go { border: 0; background: rgba(255,255,255,.08); border-radius: 10px; padding: 6px 10px; font-size: 16px; }
.tr-owner { --c: #d8d2b4; display: grid; gap: 2px; padding: 10px 12px; margin-bottom: 8px; border-radius: 12px; border-left: 6px solid var(--c); background: color-mix(in srgb, var(--c) 16%, #12170f); }
.tr-owner small { opacity: .8; }
.tr-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 2px; border-top: 1px solid rgba(255,255,255,.06); font-size: 13px; }
.tr-row b { text-align: right; }
.tr-odds { --c: var(--c-amber); margin: 8px 0 2px; padding: 6px; border-radius: 10px; text-align: center; font-weight: 900; color: var(--c); border: 1px solid var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.tr-why { margin: 8px 0 0; padding: 7px 10px; border-radius: 10px; background: rgba(224,87,76,.12); border: 1px solid rgba(224,87,76,.45); color: #ffb3aa; font-size: 13px; text-align: center; }
/* garrison health (v0.163): the bar on the card, and the latest hits by anyone */
.tr-hp { --c: #7fd36a; display: grid; gap: 4px; margin: 0 0 6px; padding: 9px 11px; border-radius: 12px; background: rgba(0,0,0,.25); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.tr-hp-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; } .tr-hp-top b { color: var(--c); font-size: 15px; }
.tr-hp-bar { height: 10px; border-radius: 6px; background: #0e1110; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.tr-hp-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, #000), var(--c)); }
.tr-hp small { opacity: .75; font-size: 11px; line-height: 1.3; }
.tr-hits { display: grid; gap: 3px; }
.tr-hit { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: baseline; padding: 5px 8px; border-radius: 9px; background: rgba(255,255,255,.04); font-size: 12px; }
.tr-hit span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tr-hit b { color: #ffb3aa; } .tr-hit.fell b { color: #9ff0c4; } .tr-hit small { opacity: .65; white-space: nowrap; }