/* Последний бастион — рисованный рубеж: командная панель, вкладки, журнал боя.
 * Селекторы ограничены .lb-app, см. last-bastion.css. */

/* A compact RTS command deck; existing controls are moved, not duplicated. */
body.painted-ui {
	background: #101514;
}
.painted-ui .lb-app {
	color: #d9d4bf;
	font-family: Georgia,serif;
}
.painted-ui .lb-app {
	width: 100%;
	max-width: none;
	padding: 14px 24px 20px;
}
.painted-ui .lb-app header {
	padding: 0 4px 10px;
}
.painted-ui .lb-app h1 {
	font-size: 24px;
	letter-spacing: 1px;
}
.painted-ui .lb-app .sigil {
	font-size: 35px;
}
.painted-ui .lb-app .brand small {
	font-size: 8px;
	letter-spacing: 2px;
}
.painted-ui .lb-app .resources b {
	font-size: 22px;
}
.painted-ui .lb-app .campaign {
	margin: 0;
	padding: 8px 14px;
	background: #1b221f;
	border: 1px solid #63583c;
	border-bottom: 0;
	font-size: 9px;
	color: #b7ac87;
}
.painted-ui .lb-app .arena {
	border: 1px solid #88754d;
	box-shadow: none;
}
.painted-ui .lb-app #field {
	image-rendering: auto;
	width: 100%;
	height: auto;
}
/* На desktop поле занимает ровно рабочую высоту экрана; canvas масштабируется вместе с ним. */
@media (min-width:1001px) {
	.painted-ui .lb-app .arena {
		height: 60vh;
	}
	.painted-ui .lb-app #field {
		height: 100%;
	}
}
.painted-ui .lb-app .battle-top {
	top: 12px;
	left: 18px;
	right: 18px;
	text-shadow: 0 2px 4px #000;
}
.painted-ui .lb-app .battle-top h2 {
	font-size: 25px;
}
.painted-ui .lb-app .fort {
	background: #111b18bd;
	border: 1px solid #6d674b;
	padding: 10px 12px;
}
.painted-ui .lb-app .battle-bottom {
	min-height: 42px;
	padding: 8px 15px;
	background: linear-gradient(transparent,#101611db);
	font-size: 11px;
}
.painted-ui .lb-app .lb-battle-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	flex: 0 0 auto;
	white-space: nowrap;
}
.painted-ui .lb-app .lb-battle-actions button {
	height: 32px;
	min-height: 32px;
	padding: 0 10px;
	font: 11px/30px Arial,sans-serif;
	border: 1px solid #8a7750;
	border-radius: 8px;
	box-shadow: inset 0 0 0 1px #151d18;
}
.painted-ui .lb-app .lb-battle-actions #speed,
.painted-ui .lb-app .lb-battle-actions #wave-batch,
.painted-ui .lb-app .lb-battle-actions #pause {
	padding: 0 10px;
	font: 11px/30px Arial,sans-serif;
}
.painted-ui .lb-app .lb-battle-actions #start {
	position: relative;
	min-width: 126px;
	padding: 0 42px 0 10px;
	font-size: 11px;
}
.painted-ui .lb-app .lb-battle-actions #start kbd,
.painted-ui .lb-app .lb-battle-actions .lb-ability-mini kbd {
	position: absolute;
	right: 2px;
	bottom: 2px;
	float: none;
	margin: 0;
	padding: 0 3px;
	border: 1px solid #514b36;
	border-radius: 3px;
	background: #101c20;
	color: #b9c0af;
	font: 9px/11px Arial,sans-serif;
}
.painted-ui .lb-app .lb-battle-actions .lb-ability-mini {
	flex: 0 0 32px;
	width: 32px;
	padding: 0 0 5px;
	font: 15px/1 Georgia,serif;
}
.painted-ui .lb-app button {
	border-color: #665e44;
	background: linear-gradient(#30362c,#202720);
	box-shadow: inset 0 0 0 1px #151d18;
	color: #e2d6b3;
}
.painted-ui .lb-app button:hover:not(:disabled) {
	border-color: #bea971;
	background: linear-gradient(#46503a,#303c2b);
	transform: none;
}
.painted-ui .lb-app .resources button {
	background: #19292ddd;
}
.painted-ui .lb-app .primary {
	background: linear-gradient(#485d70,#253e54);
	border-color: #b4a071;
	color: #f1dfb1;
	text-shadow: 0 1px 2px #000;
}
.painted-ui .lb-app .primary:hover:not(:disabled) {
	background: linear-gradient(#59718a,#334f67);
}
.lb-app .command-deck {
	display: grid;
	grid-template-columns: 280px minmax(0,1fr);
	min-height: 156px;
	background: linear-gradient(135deg,#2b3028,#171f1c);
	border: 1px solid #8a7750;
	border-top: 3px solid #6f6040;
	box-shadow: inset 0 0 0 3px #111b17,0 10px 35px #0004;
}
.lb-app .commander-card {
	display: flex;
	align-items: center;
	gap: 12px;
	border-right: 1px solid #675d40;
	padding: 14px;
}
.lb-app .commander-card canvas {
	width: 84px;
	height: 96px;
	flex-shrink: 0;
	border: 2px solid #96825a;
	image-rendering: auto;
	background: radial-gradient(#414433,#18231e);
}
.lb-app .commander-card-body {
	flex: 1 1 auto;
	min-width: 0;
}
.lb-app .commander-name-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}
.lb-app .commander-card h3 {
	font-size: 19px;
	margin: 4px 0;
	font-weight: normal;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.lb-app #selected-level {
	flex: 0 0 auto;
	font: 10px Arial, sans-serif;
	font-variant-numeric: tabular-nums;
	color: #d0bf8b;
	white-space: nowrap;
}
.lb-app .commander-card small {
	font-size: 9px;
	color: #bdad7d;
	letter-spacing: 1px;
}
.lb-app .commander-card p {
	font: 10px/1.5 Arial;
	color: #aeb5a1;
}
.lb-app .commander-meters {
	display: grid;
	gap: 4px;
	width: 100%;
	margin: 4px 0 7px;
}
.lb-app .commander-meters[hidden] {
	display: none;
}
.lb-app .commander-meter {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	min-width: 0;
	height: 18px;
	padding: 0 5px;
	overflow: hidden;
	background: #101916;
	border: 1px solid #4f573f;
	font: 8px/16px Arial, sans-serif;
	font-variant-numeric: tabular-nums;
}
.lb-app .commander-meter i {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	transition: width .2s ease;
}
.lb-app .commander-meter.xp i {
	background: #8d7841;
}
.lb-app .commander-meter.hp i {
	background: #496b50;
}
.lb-app .commander-meter-label,
.lb-app .commander-meter strong {
	position: relative;
	z-index: 1;
}
.lb-app .commander-meter-label {
	color: #d4c797;
	text-transform: uppercase;
	letter-spacing: .5px;
}
.lb-app .commander-meter strong {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	font-weight: 600;
	color: #f0ead6;
	text-shadow: 0 1px 2px #000;
	white-space: nowrap;
}
.lb-app .commander-card button {
	font: 10px Arial;
	padding: 6px;
}
.lb-app .army-overview {
	padding: 12px 14px;
	min-width: 0;
}
.lb-app .army-heading {
	display: flex;
	justify-content: space-between;
	font: 10px Arial;
	letter-spacing: 1px;
	color: #c5b589;
	margin-bottom: 8px;
}
.lb-app #group-grid {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	/* Два полных ряда плиток (2 × 106 + зазор + поля): все 16 групп без прокрутки. */
	max-height: 222px;
	overflow: auto;
	padding: 2px;
}
/* Плитка группы: жёсткая раскладка по строкам, чтобы плитки не «плясали»
   от длины подписи и наличия бейджей. Портрет → подпись → опыт → бейдж обучения;
   уровень, ранг и численность лежат поверх портрета. */
.lb-app .group-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 3px;
	width: 77px;
	height: 106px;
	flex-shrink: 0;
	text-align: center;
}
.lb-app .group-tile canvas {
	flex: none;
	width: 66px;
	height: 60px;
	margin: 0 auto;
	image-rendering: auto;
}
.lb-app .group-level,
.lb-app .group-tile .rank-pips {
	position: absolute;
	top: 5px;
	padding: 1px 3px;
	background: #131b15e6;
	font: bold 9px/11px Arial, sans-serif;
	color: #edda9c;
	white-space: nowrap;
}
.lb-app .group-level {
	left: 5px;
}
.lb-app .group-tile .rank-pips {
	right: 5px;
	font-weight: normal;
	letter-spacing: 1px;
	color: #e9c77a;
}
.lb-app .group-tile .xp-bar {
	flex: none;
	margin: 0;
}
.lb-app .group-tile .train-badge {
	display: block;
	margin: auto 0 0;
	padding: 0 2px;
	font: 9px/13px Arial, sans-serif;
	white-space: nowrap;
	overflow: hidden;
}
.lb-app .group-count {
	position: absolute;
	right: 5px;
	top: 44px;
	background: #131b15e6;
	color: #edda9c;
	font: bold 15px Georgia;
	padding: 0 4px;
}
.lb-app .group-label {
	display: block;
	flex: none;
	height: 12px;
	font: 9px/12px Arial;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.lb-app .group-tile.selected {
	outline: 1px solid #b5a05c;
	border-color: #c9b676;
}
.lb-app .empty-army {
	font: 12px/1.6 Arial;
	color: #919d88;
	margin: 20px 6px;
}
.painted-ui .lb-app .command {
	display: none!important;
}
.painted-ui .lb-app .command>small,
.painted-ui .lb-app .command>p {
	display: none;
}
.painted-ui .lb-app #start {
	padding: 13px 7px;
	font-size: 13px;
}
.painted-ui .lb-app #spell {
	padding: 9px 5px;
	font-size: 12px;
}
.painted-ui .lb-app #start kbd {
	font-size: 8px;
}
.lb-app .workbench-tabs {
	display: flex;
	gap: 0;
	margin-top: 12px;
	border-bottom: 1px solid #6e6241;
}
.lb-app .workbench-tabs button {
	padding: 10px 25px;
	font-size: 12px;
	border-bottom: 0;
}
.lb-app .workbench-tabs button.active {
	background: #3c4431;
	color: #f0deb0;
	box-shadow: inset 0 3px #b8a268;
}
.lb-app .workbench-tabs .demo-button {
	margin-left: auto;
	font-size: 10px;
	color: #b2c7be;
}
.lb-app .workbench {
	border: 1px solid #5a533b;
	border-top: 0;
	background: #1a231e;
	min-height: 130px;
}
.lb-app .workbench-pane[hidden] {
	display: none;
}
.painted-ui .lb-app .workbench .panel {
	border: 0;
	background: none;
	padding: 16px;
}
.painted-ui .lb-app .panel h3 {
	font-size: 17px;
	font-weight: normal;
	margin: 0 0 12px;
}
.painted-ui .lb-app .panel p {
	font: 12px/1.6 Arial;
}
.painted-ui .lb-app .cards {
	display: grid;
	grid-template-columns: repeat(4,minmax(0,1fr));
	max-width: 900px;
	gap: 10px;
}
.painted-ui .lb-app .unit {
	display: grid;
	grid-template-columns: 72px 1fr;
	grid-template-rows: 22px auto 22px;
	min-height: 100px;
	column-gap: 12px;
	padding: 8px;
	align-items: center;
}
.lb-app .recruit-portrait {
	grid-row: 1/4;
	width: 72px;
	height: 78px!important;
	border: 1px solid #6e6747;
	image-rendering: auto;
}
.painted-ui .lb-app .unit strong {
	font-size: 14px;
}
.painted-ui .lb-app .unit small {
	font-size: 10px;
	margin: 0;
}
.painted-ui .lb-app .price {
	grid-column: 2;
}
.painted-ui .lb-app #personal {
	margin-top: 10px;
	border-color: #514b36;
}
.painted-ui .lb-app #personal>button {
	padding: 6px 12px;
	margin-right: 8px;
}
.painted-ui .lb-app #personal p {
	color: #a5b09a;
}
.painted-ui .lb-app #roster {
	max-height: 100px;
	margin-bottom: 8px;
}
.painted-ui .lb-app #roster button {
	padding: 7px 12px;
	margin: 2px;
	font-size: 11px;
}
.lb-app .branch-grid {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 12px;
	margin-top: 14px;
}
.lb-app .branch-grid .branch {
	margin: 0;
	padding: 12px;
	text-align: left;
	display: grid;
	grid-template-columns: 68px 1fr;
	gap: 6px 12px;
	align-items: start;
}
.lb-app .branch canvas {
	grid-row: 1/5;
	width: 64px;
	height: 72px;
	border: 1px solid #726745;
}
.lb-app .branch strong {
	font: 15px Georgia;
	color: #e7d59d;
}
.lb-app .branch span {
	font: 11px/1.5 Arial;
}
.lb-app .branch small {
	font: 10px Arial;
	letter-spacing: 0;
}
.lb-app .branch b {
	font: 10px Arial;
	color: #ccbc8e;
}
.lb-app .chosen-branch {
	border-color: #b9ac77!important;
}
.lb-app .chosen-rank-control {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 12px;
	padding: 10px 12px;
	background: #141f19;
	border: 1px solid #514b36;
}
.lb-app .chosen-rank-control .rank-pips {
	margin: 0;
	font-size: 12px;
}
.lb-app .chosen-rank-control button {
	margin: 0;
	padding: 7px 12px;
}
/* Королевство: «Укрепить бастион», «Запасы и гарнизон», «Вознесение» со способностями — в один ряд. */
.lb-app .kingdom-columns {
	display: grid;
	grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr);
}
.lb-app .kingdom-columns>.panel+.panel {
	border-left: 1px solid #514b36!important;
}
.painted-ui .lb-app .extra-upgrades {
	display: grid;
}
.lb-app .extra-upgrades button,
.lb-app .tower-row button {
	padding: 10px;
}
.lb-app .tower-row {
	display: flex;
	gap: 12px;
	margin: 8px 0;
	align-items: center;
	flex-wrap: wrap;
}
.lb-app .tower-row span {
	min-width: 70px;
	color: #b9ab84;
	font: 12px Arial;
}
.lb-app .tower-row button {
	min-width: 150px;
}
.painted-ui .lb-app #ascend,
.painted-ui .lb-app #permanent {
	padding: 10px;
	font-size: 12px;
}
.lb-app .locked-tree {
	padding: 12px;
	background: #121c18;
	border-left: 2px solid #a18a50;
}
.painted-ui .lb-app footer {
	margin-top: 12px;
	font-size: 8px;
}
.in-demo .lb-app #asset-status {
	color: #a5d4ca;
}
.lb-app .overlay-demo-exit {
	padding: 10px;
	margin-top: 10px;
}
.lb-app .overlay-demo-exit[hidden] {
	display: none;
}

@media (max-width:1000px) {
	.lb-app .command-deck {
		grid-template-columns: 220px minmax(0,1fr);
	}
	.lb-app .commander-card {
		padding: 9px;
		gap: 8px;
	}
	.lb-app .commander-card canvas {
		width: 66px;
		height: 82px;
	}
	.lb-app .commander-card h3 {
		font-size: 16px;
	}
	.painted-ui .lb-app .unit {
		grid-template-columns: 55px 1fr;
		gap: 6px;
	}
	.lb-app .recruit-portrait {
		width: 55px;
		height: 64px!important;
	}
	.lb-app .kingdom-columns {
		grid-template-columns: 1fr 1fr;
	}
	.lb-app .kingdom-columns>.panel:last-child {
		grid-column: 1/-1;
	}
	.lb-app .workbench-tabs button {
		padding: 9px 15px;
	}
	.lb-app .branch-grid {
		gap: 6px;
	}
	.lb-app .branch-grid .branch {
		grid-template-columns: 1fr;
	}
	.lb-app .branch canvas {
		grid-row: auto;
	}
}

@media (max-width:650px) {
	.painted-ui .lb-app {
		padding: 8px;
	}
	.painted-ui .lb-app h1 {
		font-size: 17px;
	}
	.lb-app .command-deck {
		grid-template-columns: 1fr;
	}
	.lb-app .commander-card {
		display: none;
	}
	.lb-app .army-overview {
		padding: 9px;
	}
	.lb-app .group-tile {
		width: 61px;
		height: 94px;
	}
	.lb-app .group-tile canvas {
		width: 53px;
		height: 49px;
	}
	.lb-app .group-count {
		top: 34px;
		font-size: 13px;
	}
	.lb-app .group-label {
		height: 11px;
		font-size: 8px;
		line-height: 11px;
	}
	.lb-app .group-level,
	.lb-app .group-tile .rank-pips {
		font-size: 8px;
	}
	.painted-ui .lb-app .cards {
		grid-template-columns: repeat(2,1fr);
	}
	.lb-app .workbench-tabs {
		flex-wrap: wrap;
	}
	.lb-app .workbench-tabs button {
		padding: 9px 12px;
	}
	.lb-app .workbench-tabs .demo-button {
		margin-left: 0;
		flex: 1;
	}
	.lb-app .branch-grid {
		grid-template-columns: 1fr;
	}
	.lb-app .branch-grid .branch {
		grid-template-columns: 60px 1fr;
	}
	.lb-app .branch canvas {
		grid-row: 1/5;
	}
	.lb-app .kingdom-columns {
		grid-template-columns: 1fr;
	}
	.lb-app .kingdom-columns>.panel:last-child {
		grid-column: auto;
	}
	.painted-ui .lb-app .fort {
		width: 140px;
		font-size: 9px;
		padding: 6px;
	}
	.painted-ui .lb-app .battle-top h2 {
		font-size: 19px;
	}
	.lb-app .tower-row button {
		min-width: 110px;
	}
	.painted-ui .lb-app .battle-bottom {
		font-size: 9px;
		padding: 5px;
	}
	.painted-ui .lb-app #message {
		display: none;
	}
	.painted-ui .lb-app .battle-bottom {
		justify-content: flex-end;
	}
	.painted-ui .lb-app .lb-battle-actions {
		max-width: 100%;
		overflow-x: auto;
	}
}
.lb-app .battle-journal {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: min(420px,calc(100vw - 24px));
	height: min(440px,65vh);
	z-index: 20;
	display: flex;
	flex-direction: column;
	background: #17211ff5;
	border: 1px solid #b09b65;
	box-shadow: 0 12px 45px #0009;
	padding: 14px;
	color: #dfd7be;
}
.lb-app .battle-journal[hidden] {
	display: none;
}
.lb-app .journal-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.lb-app .journal-head button,
.lb-app .journal-filters button {
	padding: 5px 8px;
	font-size: 11px;
}
.lb-app .journal-summary {
	font: 12px Arial;
	color: #d6bd80;
}
.lb-app .journal-filters {
	display: flex;
	gap: 4px;
	margin-bottom: 9px;
	flex-wrap: wrap;
}
.lb-app .journal-entries {
	overflow: auto;
	flex: 1;
	min-height: 0;
	overflow-anchor: none;
}
.lb-app .journal-row {
	padding: 8px 3px;
	border-bottom: 1px solid #354037;
	font: 12px/1.5 Arial;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.lb-app .journal-row small {
	font-size: 9px;
	letter-spacing: 0;
	color: #95a28b;
}
.lb-app .journal-loss span {
	color: #e2a08c;
}
.lb-app .journal-gold span {
	color: #daca87;
}
.lb-app .journal-xp span {
	color: #b1cba1;
}
.lb-app .journal-note {
	font: 9px/1.5 Arial;
	letter-spacing: 0;
	margin-top: 10px;
	color: #a5ac96;
}
.lb-app .workbench-tabs .journal-toggle {
	color: #e1c990;
	font-size: 11px;
	padding: 9px 12px;
}
.lb-app .unit-stat-grid {
	display: grid;
	grid-template-columns: repeat(6,minmax(0,1fr));
	gap: 8px;
	margin: 10px 0;
}
.lb-app .unit-stat-grid>div {
	padding: 9px;
	background: #141f19;
	border: 1px solid #454c36;
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.lb-app .unit-stat-grid small {
	font: 10px Arial;
	letter-spacing: 0;
}
.lb-app .unit-stat-grid strong {
	font: 15px Georgia;
	color: #d9c897;
}
.lb-app .unit-stat-grid p {
	grid-column: 1/-1;
	margin: 0;
}

@media (max-width:700px) {
	.lb-app .unit-stat-grid {
		grid-template-columns: repeat(3,1fr);
	}
}