main { background-color: dimgray; }
header { background-color: silver; }
body.York header.your_turn { background-color: hsl(217, 73%, 78%); }
body.Lancaster header.your_turn { background-color: hsl(355, 83%, 72%); }
#role_York { background-color: hsl(217, 53%, 88%); }
#role_Lancaster { background-color: hsl(355, 63%, 82%); }
#turn_info { background-color: gray; }

.panel_header { background-color: hsl(34, 10%, 30%); }
body.York #event_header, body.York #hand_header, body.York #plan_header, .court_panel.york .panel_header { background-color: hsl(217, 15%, 33%); }
body.Lancaster #event_header, body.Lancaster #hand_header, body.Lancaster #plan_header, .court_panel.lancaster .panel_header { background-color: hsl(355, 15%, 33%); }

/* LOG */

#log {
	font-variant-numeric: tabular-nums;
	background-color: ghostwhite;
}

#log .h1 { font-weight: bold; padding-top:2px; padding-bottom:2px; text-align: center; }
#log .h2 { padding-top:2px; padding-bottom:2px; text-align: center; }
#log .h3 { text-decoration: underline; }
#log .h4 { text-decoration: underline; }

#log .h1 { background-color: silver }
#log .h2 { background-color: gainsboro }
#log .h2.lancaster { background-color: #fad2d3 }
#log .h2.york { background-color: #d1ddf1 }

#log .ip { float: right; padding: 0 4px 0 0; text-indent: 0; color: dimgray }

#log div { padding-left: 20px; text-indent: -12px; }
#log div.i { padding-left: 32px; text-indent: -12px; }
#log div.ii { padding-left: 44px; text-indent: -12px; }

#log .card_tip { font-style: italic; }
#log .card_tip:hover { text-decoration: underline; }
#log .lord_tip:hover { cursor: pointer; text-decoration: underline; }
#log .vassal_tip:hover { cursor: pointer; text-decoration: underline; }
#log .locale_tip:hover { cursor: pointer; text-decoration: underline; }

#log .white, #log .black {
	display: inline-block;
	vertical-align: -2px;
	width: 11px;
	height: 11px;
	border-radius: 0px;
	background-size: 600% 100%;
	background-repeat: no-repeat;
}

#log .white {
	background-image: url(images/die_black_pips.svg);
	background-color: #fff;
	border: 1px solid #555;
}

#log .black {
	background-image: url(images/die_white_pips.svg);
	background-color: #777;
	border: 1px solid #222;
}

.d0 { background-position: -100% 0 }
.d1 { background-position: 0% 0; }
.d2 { background-position: 20% 0; }
.d3 { background-position: 40% 0; }
.d4 { background-position: 60% 0; }
.d5 { background-position: 80% 0; }
.d6 { background-position: 100% 0; }

/* MAP */

#mapwrap {
	width: 1275px;
	height: 1650px;
	background-color: #999f85;
	box-shadow: 1px 2px 4px #0004;
}

#map {
	background-repeat: no-repeat;
	background-size: cover;
	width: 1275px;
	height: 1650px;
	overflow: clip;
}

#map { background-image: url(map75.jpg) }
@media (min-resolution: 97dpi) {
	#map { background-image: url(map150.jpg) }
}

/* PANELS */

.panel {
	min-width: 1271px;
	max-width: 1271px;
	background-color: hsl(34, 10%, 35%);
	background-color: #555;
	margin: 12px auto;
	box-shadow: 1px 2px 4px #0004;
	border: 2px solid #333;
}

.panel_header {
	color: white;
	user-select: none;
	font-weight: bold;
	text-align: center;
	border-bottom: 2px solid #333;
}

.panel_body {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding: 12px;
	gap: 12px;
	min-height: 260px;
}

.court_panel {
	max-width: fit-content;
}

.court_body {
	gap: 24px;
	padding: 24px 12px 18px 12px;
	min-height: 506px;
}

/* CURRENT CARD */

#turn_info {
	border-bottom: 1px solid black;
	padding: 12px;
	overflow: clip;
}

#turn_info .card {
	margin: 0 auto;
}

@media (max-height: 800px) {
	#turn_info { height: 95px; }
	#turn_info:hover { height: auto; }
}

@media (max-height: 600px) {
	#turn_info {
		display: none;
	}
}

/* PLAN */

#plan_panel {
	max-width: fit-content;
}

#plan_actions {
	background-color: #444;
	min-height: 130px;
}

#plan_actions.hide {
	display: none
}

#plan_actions .card {
	width: 93px;
	height: 130px;
	background-size: 93px 130px;
	border-radius: 3px;
}

body.York #plan_actions .lancaster { display: none }
body.Lancaster #plan_actions .york { display: none }

/* CARDS */

.card.disabled { filter: brightness(80%); }
.card { box-shadow: 0 0 0 1px #333; }
.card.action { box-shadow: 0 0 0 1px #333, 0 0 0 4px white; }
.card.selected { box-shadow: 0 0 0 1px #333, 0 0 0 4px yellow; }

/* MARKERS */

.seat {
	pointer-events: none;
	position: absolute;
	background-size: 74px 74px;
	border-radius: 50%;
	width: 74px;
	height: 74px;
}

.marker {
	border: 2px solid transparent;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	box-shadow: 0 0 0 1px #333;
}

.marker.square {
	border-radius: 8px;
	width: 46px;
	height: 46px;
}

.marker.small {
	width: 35px;
	height: 35px;
}

.marker.circle {
	width: 50px;
	height: 50px;
	background-size: 50px 50px;
	border-radius: 50%;
}

.box {
	box-sizing: border-box;
	position: absolute;
	border: 3px solid transparent;
	border-radius: 15px 0 50% 50% / 15px 0 20px 20px;
}

.box.box16 {
	border-radius: 0
}

.box.action {
	border-color: white;
	background-color: #fff6;
}

.marker.rose {
	border-radius: 0px;
	position: absolute;
}

.marker.exile_rose {
	border-radius: 50%;
	position: absolute;
}

.marker.depexh { position: absolute; border-radius: 0px; }
.marker.depleted { position: absolute; border-radius: 0px; }
.marker.exhausted { position: absolute; border-radius: 0px; }

.locale {
	box-sizing: border-box;
	position: absolute;
	border: 3px solid transparent;
	border-radius: 50% 50% 0 0;
}

.locale.fortress { border-radius: 25% 25% 0 0 }
.locale.sea { border-radius: 50% }
.locale.exile_box { border-radius: 0 0 50% 50% }

/*
.locale.action.south { background-color: steelblue }
.locale.action.north { background-color: darkgoldenrod }
.locale.action.wales { background-color: olivedrab }
.locale.action.england { background-color: gray }
*/

.locale.action.south { background-color: #4682b480 }
.locale.action.north { background-color: #b8860b80 }
.locale.action.wales { background-color: #6b8e2380 }
.locale.action.england { background-color: #80808080 }
.locale.action.sea { background-color: #b0c4de80 }

.locale.selected.south { background-color: #4682b480 }
.locale.selected.north { background-color: #b8860b80 }
.locale.selected.wales { background-color: #6b8e2380 }
.locale.selected.england { background-color: #80808080 }
.locale.selected.sea { background-color: #b0c4de80 }

.locale.action.south { border-color: powderblue }
.locale.action.north { border-color: navajowhite }
.locale.action.wales { border-color: palegreen }
.locale.action.england { border-color: whitesmoke }
.locale.action.sea { border-color: lightblue }

.locale.action.exile_box.scotland { border-color: lemonchiffon }
.locale.action.exile_box.burgundy { border-color: wheat }
.locale.action.exile_box.france { border-color: lightblue }
.locale.action.exile_box.ireland { border-color: lightgreen }

.locale.action {
	border-color: white;
}

.locale.selected {
	border-color: yellow;
}

.locale.tip {
	background-color: #0ff8;
	border-color: #0ff;
}

.locale_markers {
	position: absolute;
	pointer-events: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 4px;
}

#map .marker {
	position: absolute;
}

/* PIECES */

.cylinder, .marker, #map .vassal {
	transition-property: top, left;
	transition-duration: 700ms;
	transition-timing-function: ease;
}

.cylinder {
	position: absolute;
	width: 44px;
	height: 48px;
	background-size: 44px 48px;
}

.cylinder.action {
	filter:
		drop-shadow(2px 0px 0px white)
		drop-shadow(0px 2px 0px white)
		drop-shadow(0px -2px 0px white)
		drop-shadow(-2px 0px 0px white);
}

.cylinder.selected {
	filter:
		drop-shadow(2px 0px 0px yellow)
		drop-shadow(0px 2px 0px yellow)
		drop-shadow(0px -2px 0px yellow)
		drop-shadow(-2px 0px 0px yellow);
}

.cylinder.command {
	filter:
		drop-shadow(2px 0px 0px gold)
		drop-shadow(0px 2px 0px gold)
		drop-shadow(0px -2px 0px gold)
		drop-shadow(-2px 0px 0px gold);
}

.cylinder.tip {
	filter:
		drop-shadow(2px 0px 0px cyan)
		drop-shadow(0px 2px 0px cyan)
		drop-shadow(0px -2px 0px cyan)
		drop-shadow(-2px 0px 0px cyan);
}

.marker.exile {
	position: absolute;
	/* transform: rotate(45deg); */
}

/* ASSETS */

.asset {
	width: 46px;
	height: 46px;
	background-size: cover;
	border: 2px solid transparent;
	border-radius: 8px;
	box-shadow: 0 0 0 1px #333;
	margin: 3px;
}

.asset.action {
	box-shadow: 0 0 0 1px #333, 0 0 0 4px white !important;
}

.prov + .prov { margin-bottom: -30px; }
.coin + .coin { margin-bottom: -30px; }
.cart + .cart { margin-bottom: -30px; }

/* UNITS */

.unit {
	background-size: contain;
	background-repeat: no-repeat;
}

.unit.shape {
	width: 43px;
	height: 35px;
	margin: -20px 0 0px 0px;
}

.unit.men_at_arms { background-image: url(images/unit_men_at_arms.svg) }
.unit.longbowmen { background-image: url(images/unit_longbowmen.svg) }
.unit.militia { background-image: url(images/unit_militia.svg) }
.unit.mercenaries { background-image: url(images/unit_mercenaries.svg) }
.unit.burgundians { background-image: url(images/unit_handgunners.svg) }

.unit.retinue {
	border: 2px solid gray;
	width: 46px;
	height: 46px;
	border-radius: 8px;
	box-shadow: 0 0 0 1px #333;
}

.unit.vassal {
	border: 2px solid #d1cfa1;
	width: 46px;
	height: 46px;
	border-radius: 8px;
	box-shadow: 0 0 0 1px #333;
}

.unit.retinue.action {
	box-shadow: 0 0 0 1px #333, 0 0 0 4px white !important;
}

.unit.vassal.action {
	box-shadow: 0 0 0 1px #333, 0 0 0 4px white !important;
}

.unit.vassal.selected {
	box-shadow: 0 0 0 1px #333, 0 0 0 4px yellow !important;
}

.routed_retinue_vassal_area .unit.retinue.action {
	box-shadow: 0 0 0 1px #333, 0 0 0 4px red !important;
}

.routed_retinue_vassal_area .unit.vassal.action {
	box-shadow: 0 0 0 1px #333, 0 0 0 4px red !important;
}

.unit.shape.action {
	filter:
		drop-shadow(2px 0px 0px white)
		drop-shadow(0px 2px 0px white)
		drop-shadow(0px -2px 0px white)
		drop-shadow(-2px 0px 0px white);
}

/* LORD MAT */

.mat {
	position: relative;
	width: 379px;
	height: 506px;
	z-index: 1;
}

.mat .board {
	position: absolute;
	width: 375px;
	height: 375px;
	border-radius: 12px;
	border-width: 2px;
	border-style: solid;
	background-size: 375px 375px;
	background-repeat: no-repeat;
	z-index: 4;
}

.mat .board { background-image: url(images/lord_mat_75.jpg); }
@media (min-resolution: 97dpi) {
	.mat .board { background-image: url(images/lord_mat_150.jpg); }
}

.mat.selected .board { box-shadow: 0 0 0 1px #333, 0 0 0 4px yellow; }
.mat.command .board { box-shadow: 0 0 0 1px #333, 0 0 0 4px gold; }
.mat.engaged .board { box-shadow: 0 0 0 1px #333, 0 0 0 4px indianred; }

#court1 .mat.hidden .board,
#court2 .mat.hidden .board,
.mat.ravine .board
{
	background-image: url(images/lord_mat_75_gray.jpg);
	background-color: #999;
	border-color: #aaa #666 #666 #aaa;
}

.defender .att #court1 .mat.hidden .board,
.defender .att #court2 .mat.hidden .board,
.defender .att .mat.ravine .board,
.attacker .def #court1 .mat.hidden .board,
.attacker .def #court2 .mat.hidden .board,
.attacker .def .mat.ravine .board
{
	border-color: #666 #aaa #aaa #666;
}

@media (min-resolution: 97dpi) {
	#court1 .mat.hidden .board,
	#court2 .mat.hidden .board,
	.mat.ravine .board
	{
		background-image: url(images/lord_mat_150_gray.jpg);
	}
}

.mat .capabilities {
	position: absolute;
	width: 372px;
	height: 260px;
	z-index: 2;
	top: 246px;
	left: 3px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0px;
}

body.shift .mat .capabilities {
	z-index: 200;
}

.mat .board .card {
	position: absolute;
	top: 96px;
	left: 16px;
}

.mat .board .mask {
	pointer-events: none;
	position: absolute;
	top: calc(96px + 135px);
	left: 21px;
	width: 176px;
	height: 120px;
}

#court1 .mat .mask {
	display: none;
}

#court2 .mat .mask {
	display: none;
}

.mat .board .mask.york {
	background-color: #eef7fc;
}

.mat .board .mask.lancaster {
	background-color: #fef0d3;
}

.mat .board .retinue_area {
	position: absolute;
	top: 38px;
	left: 24px;
	height: 50px;
width: 50px;
	max-width: 50px;
}

.mat .board .vassal_area {
	position: absolute;
	top: 38px;
	left: 79px;
	height: 50px;
width:105px;
	max-width: 170px;
	display: flex;
	align-content: center;
	flex-wrap: wrap;
	gap: 5px;
}

.mat .board .routed_retinue_vassal_area {
	position: absolute;
	top: 240px;
	left: 24px;
	height: 50px;
	max-width: 170px;
	display: flex;
	align-content: center;
	flex-wrap: wrap;
	gap: 5px;
}

.break {
	flex-basis: 100%;
	width: 0;
	height: 0;
}

.mat .board .troops {
	position: absolute;
	top: 50px;
	right: 0px;
	width: 170px;
	height: 90px;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column-reverse;
	justify-content: end;
	align-content: center;
	gap: 0px;
}

.mat .board .routed_troops {
	position: absolute;
	top: 145px;
	right: 0px;
	width: 170px;
	height: 90px;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column-reverse;
	justify-content: end;
	align-content: center;
	gap: 0px;
}

.mat .board .marker_area {
	pointer-events: none;
	position: absolute;
	top: -18px;
	right: 18px;
	height: 50px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 5px;
}

.mat .board .valour_area {
	pointer-events: none;
	position: absolute;
	top: 305px;
	left: 24px;
	width: 170px;
	height: 40px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 4px;
}

.mat .board .assets {
	position: absolute;
	bottom: 20px;
	right: 0px;
	width: 170px;
	height: 150px;
	display: flex;
	justify-content: end;
	align-content: center;
	flex-direction: column-reverse;
	flex-wrap: wrap;
}

.defender .att .assets,
.attacker .def .assets {
	justify-content: start;
}

.defender .att .retinue_vassals,
.attacker .def .retinue_vassals,
.defender .att .routed_retinue_vassals,
.attacker .def .routed_retinue_vassals {
	flex-direction: row-reverse;
}

/* BATTLE GRID WITH LORD MATS */

/* 1275px x 3 mats @375px */

#battle_grid {
	display: grid;
	grid-template-columns: 380px 380px 380px;
	grid-template-rows: 510px 510px;
	margin: 0 auto;
	justify-content: space-evenly;
	align-content: space-evenly;
	padding: 20px 0;
	gap: 80px 0px;

	width: 1275px;

	background-image: url(images/battle_background_dark.jpg);
	background-size: 1275px;
	background-position: center;
}

#battle_grid .grid_array {
	width: 380px;
	height: 510px;
}

.grid_array { background-repeat: no-repeat }

.grid_array.action {
	background-image: url(images/battle_array_action.svg);
	background-position: top center;
}

#battle_grid {
	background-repeat: no-repeat;
}

.defender .att,
.attacker .def,
.defender .att .retinue_area,
.attacker .def .retinue_area,
.defender .att .vassal_area,
.attacker .def .vassal_area,
.defender .att .routed_retinue_vassal_area,
.attacker .def .routed_retinue_vassal_area,
.defender .att .assets,
.attacker .def .assets,
.defender .att .troops,
.attacker .def .troops,
.defender .att .routed_troops,
.attacker .def .routed_troops,
.defender .att .valour,
.attacker .def .valour,
.defender .att .fled,
.attacker .def .fled,
.defender .att .moved_fought,
.attacker .def .moved_fought,
.defender .att .feed,
.attacker .def .feed
{
	transform: rotate(180deg)
}

.defender #grid_a1 { grid-row: 1; grid-column: 1; }
.defender #grid_a2 { grid-row: 1; grid-column: 2; }
.defender #grid_a3 { grid-row: 1; grid-column: 3; }
.defender #grid_d1 { grid-row: 2; grid-column: 1; }
.defender #grid_d2 { grid-row: 2; grid-column: 2; }
.defender #grid_d3 { grid-row: 2; grid-column: 3; }

.attacker #grid_a1 { grid-row: 2; grid-column: 3; }
.attacker #grid_a2 { grid-row: 2; grid-column: 2; }
.attacker #grid_a3 { grid-row: 2; grid-column: 1; }
.attacker #grid_d1 { grid-row: 1; grid-column: 3; }
.attacker #grid_d2 { grid-row: 1; grid-column: 2; }
.attacker #grid_d3 { grid-row: 1; grid-column: 1; }

/* IMAGES */

.marker.levy { background-image: url(images/levy.png) }
.marker.campaign { background-image: url(images/campaign.png) }
.marker.battle { background-image: url(images/battle.png) }
.marker.towns.york { background-image: url(images/towns_york.png) }
.marker.cities.york { background-image: url(images/cities_york.png) }
.marker.fortresses.york { background-image: url(images/fortresses_york.png) }
.marker.ip.york { background-image: url(images/ip_york.png) }
.marker.towns.lancaster { background-image: url(images/towns_lancaster.png) }
.marker.cities.lancaster { background-image: url(images/cities_lancaster.png) }
.marker.fortresses.lancaster { background-image: url(images/fortresses_lancaster.png) }
.marker.ip.lancaster { background-image: url(images/ip_lancaster.png) }
.marker.moved_fought { background-image: url(images/moved_fought.png) }
.marker.feed.x2 { background-image: url(images/feed_x2.png) }
.marker.feed.x3 { background-image: url(images/feed_x3.png) }
.unit.retinue.fled { background-image: url(images/fled.png) }
.marker.exile { background-image: url(images/exile.png) }
.marker.exile_rose.lancaster { background-image: url(images/exile_lancaster.png) }
.marker.exile_rose.york { background-image: url(images/exile_york.png) }
.marker.exhausted { background-image: url(images/exhausted.png) }
.marker.end { background-image: url(images/end.png) }
.marker.depleted { background-image: url(images/depleted.png) }
.marker.victory_check { background-image: url(images/victory_check.png) }
.marker.valour { background-image: url(images/valour.png) }
.marker.rose.york { background-image: url(images/rose_york.png) }
.marker.rose.lancaster { background-image: url(images/rose_lancaster.png) }
.marker.source { background-image: url(images/source.png) }
.unit.retinue { background-image: url(images/retinue.png) }

.unit.men_at_arms { background-image: url(images/unit_men_at_arms.svg) }
.unit.longbowmen { background-image: url(images/unit_longbowmen.svg) }
.unit.militia { background-image: url(images/unit_militia.svg) }
.unit.mercenaries { background-image: url(images/unit_mercenaries.svg) }
.unit.burgundians { background-image: url(images/unit_handgunners.svg) }

.asset.cart.x1 { background-image: url(images/cart_x1.png); }
.asset.cart.x2 { background-image: url(images/cart_x2.png) }
.asset.cart.x3 { background-image: url(images/cart_x3.png) }
.asset.cart.x4 { background-image: url(images/cart_x4.png) }
.asset.coin.x1 { background-image: url(images/coin_x1.png); }
.asset.coin.x2 { background-image: url(images/coin_x2.png) }
.asset.coin.x3 { background-image: url(images/coin_x3.png) }
.asset.coin.x4 { background-image: url(images/coin_x4.png) }
.asset.prov.x1 { background-image: url(images/prov_x1.png); }
.asset.prov.x2 { background-image: url(images/prov_x2.png) }
.asset.prov.x3 { background-image: url(images/prov_x3.png) }
.asset.prov.x4 { background-image: url(images/prov_x4.png) }
.asset.ship.x1 { background-image: url(images/ship_x1.png); }
.asset.ship.x2 { background-image: url(images/ship_x2.png) }

.cylinder.york.lord_devon { background-image:url(images/lord_york_devon.svg) }
.cylinder.york.lord_edward_iv { background-image:url(images/lord_york_edward_iv.svg) }
.cylinder.york.lord_gloucester_1 { background-image:url(images/lord_york_gloucester_1.svg) }
.cylinder.york.lord_gloucester_2 { background-image:url(images/lord_york_gloucester_2.svg) }
.cylinder.york.lord_march { background-image:url(images/lord_york_march.svg) }
.cylinder.york.lord_norfolk { background-image:url(images/lord_york_norfolk.svg) }
.cylinder.york.lord_northumberland_y1 { background-image:url(images/lord_york_northumberland.svg) }
.cylinder.york.lord_northumberland_y2 { background-image:url(images/lord_york_northumberland.svg) }
.cylinder.york.lord_pembroke { background-image:url(images/lord_york_pembroke.svg) }
.cylinder.york.lord_richard_iii { background-image:url(images/lord_york_gloucester_2.svg) }
.cylinder.york.lord_rutland { background-image:url(images/lord_york_rutland.svg) }
.cylinder.york.lord_salisbury { background-image:url(images/lord_york_salisbury.svg) }
.cylinder.york.lord_warwick_y { background-image:url(images/lord_york_warwick.svg) }
.cylinder.york.lord_york { background-image:url(images/lord_york_york.svg) }

.cylinder.lancaster.lord_buckingham { background-image:url(images/lord_lancaster_buckingham.svg) }
.cylinder.lancaster.lord_clarence { background-image:url(images/lord_lancaster_clarence.svg) }
.cylinder.lancaster.lord_exeter_1 { background-image:url(images/lord_lancaster_exeter.svg) }
.cylinder.lancaster.lord_exeter_2 { background-image:url(images/lord_lancaster_exeter.svg) }
.cylinder.lancaster.lord_henry_tudor { background-image:url(images/lord_lancaster_henry_tudor.svg) }
.cylinder.lancaster.lord_henry_vi { background-image:url(images/lord_lancaster_henry_vi.svg) }
.cylinder.lancaster.lord_jasper_tudor_1 { background-image:url(images/lord_lancaster_jasper_tudor.svg) }
.cylinder.lancaster.lord_jasper_tudor_2 { background-image:url(images/lord_lancaster_jasper_tudor.svg) }
.cylinder.lancaster.lord_margaret { background-image:url(images/lord_lancaster_margaret.svg) }
.cylinder.lancaster.lord_northumberland_l { background-image:url(images/lord_lancaster_northumberland.svg) }
.cylinder.lancaster.lord_oxford { background-image:url(images/lord_lancaster_oxford.svg) }
.cylinder.lancaster.lord_somerset_1 { background-image:url(images/lord_lancaster_somerset_1.svg) }
.cylinder.lancaster.lord_somerset_2 { background-image:url(images/lord_lancaster_somerset_2.svg) }
.cylinder.lancaster.lord_warwick_l { background-image:url(images/lord_lancaster_warwick.svg) }

.seat.york.lord_devon { background-image: url(images/seat_york_devon.png) }
.seat.york.lord_edward_iv { background-image: url(images/seat_york_edward_iv.png) }
.seat.york.lord_gloucester_1 { background-image: url(images/seat_york_gloucester.png) }
.seat.york.lord_gloucester_2 { background-image: url(images/seat_york_gloucester.png) }
.seat.york.lord_march { background-image: url(images/seat_york_march.png) }
.seat.york.lord_norfolk { background-image: url(images/seat_york_norfolk.png) }
.seat.york.lord_northumberland_y1 { background-image: url(images/seat_york_northumberland.png) }
.seat.york.lord_northumberland_y2 { background-image: url(images/seat_york_northumberland.png) }
.seat.york.lord_pembroke { background-image: url(images/seat_york_pembroke.png) }
.seat.york.lord_richard_iii { background-image: url(images/seat_york_gloucester.png) }
.seat.york.lord_rutland { background-image: url(images/seat_york_rutland.png) }
.seat.york.lord_salisbury { background-image: url(images/seat_york_salisbury.png) }
.seat.york.lord_warwick_y { background-image: url(images/seat_york_warwick.png) }
.seat.york.lord_york { background-image: url(images/seat_york_york.png) }

.seat.lancaster.lord_buckingham { background-image: url(images/seat_lancaster_buckingham.png) }
.seat.lancaster.lord_clarence { background-image: url(images/seat_lancaster_clarence.png) }
.seat.lancaster.lord_exeter_1 { background-image: url(images/seat_lancaster_exeter.png) }
.seat.lancaster.lord_exeter_2 { background-image: url(images/seat_lancaster_exeter.png) }
.seat.lancaster.lord_henry_tudor { background-image: url(images/seat_lancaster_henry_tudor.png) }
.seat.lancaster.lord_henry_vi { background-image: url(images/seat_lancaster_henry_vi.png) }
.seat.lancaster.lord_jasper_tudor_1 { background-image: url(images/seat_lancaster_jasper_tudor.png) }
.seat.lancaster.lord_jasper_tudor_2 { background-image: url(images/seat_lancaster_jasper_tudor.png) }
.seat.lancaster.lord_margaret { background-image: url(images/seat_lancaster_margaret.png) }
.seat.lancaster.lord_northumberland_l { background-image: url(images/seat_lancaster_northumberland.png) }
.seat.lancaster.lord_oxford { background-image: url(images/seat_lancaster_oxford.png) }
.seat.lancaster.lord_somerset_1 { background-image: url(images/seat_lancaster_somerset.png) }
.seat.lancaster.lord_somerset_2 { background-image: url(images/seat_lancaster_somerset.png) }
.seat.lancaster.lord_warwick_l { background-image: url(images/seat_lancaster_warwick.png) }

.vassal.vassal_beaumont { background-image: url(images/vassal_beaumont.png) }
.vassal.vassal_bonville { background-image: url(images/vassal_bonville.png) }
.vassal.vassal_devon { background-image: url(images/vassal_devon.png) }
.vassal.vassal_dudley { background-image: url(images/vassal_dudley.png) }
.vassal.vassal_essex { background-image: url(images/vassal_essex.png) }
.vassal.vassal_fauconberg { background-image: url(images/vassal_fauconberg.png) }
.vassal.vassal_norfolk { background-image: url(images/vassal_norfolk.png) }
.vassal.vassal_oxford { background-image: url(images/vassal_oxford.png) }
.vassal.vassal_shrewsbury { background-image: url(images/vassal_shrewsbury.png) }
.vassal.vassal_stanley { background-image: url(images/vassal_stanley.png) }
.vassal.vassal_suffolk { background-image: url(images/vassal_suffolk.png) }
.vassal.vassal_westmoreland { background-image: url(images/vassal_westmoreland.png) }
.vassal.vassal_worcester { background-image: url(images/vassal_worcester.png) }

.vassal.vassal_hastings { background-image: url(images/vassal_hastings.png) }
.vassal.vassal_clifford { background-image: url(images/vassal_clifford.png) }
.vassal.vassal_edward { background-image: url(images/vassal_edward.png) }
.vassal.vassal_montagu { background-image: url(images/vassal_montagu.png) }
.vassal.vassal_thomas_stanley { background-image: url(images/vassal_thomas_stanley.png) }
.vassal.vassal_trollope { background-image: url(images/vassal_trollope.png) }

.vassal.back.vassal_beaumont { background-image: url(images/vassal_beaumont_b.png) }
.vassal.back.vassal_bonville { background-image: url(images/vassal_bonville_b.png) }
.vassal.back.vassal_devon { background-image: url(images/vassal_devon_b.png) }
.vassal.back.vassal_dudley { background-image: url(images/vassal_dudley_b.png) }
.vassal.back.vassal_essex { background-image: url(images/vassal_essex_b.png) }
.vassal.back.vassal_fauconberg { background-image: url(images/vassal_fauconberg_b.png) }
.vassal.back.vassal_norfolk { background-image: url(images/vassal_norfolk_b.png) }
.vassal.back.vassal_oxford { background-image: url(images/vassal_oxford_b.png) }
.vassal.back.vassal_shrewsbury { background-image: url(images/vassal_shrewsbury_b.png) }
.vassal.back.vassal_stanley { background-image: url(images/vassal_stanley_b.png) }
.vassal.back.vassal_suffolk { background-image: url(images/vassal_suffolk_b.png) }
.vassal.back.vassal_westmoreland { background-image: url(images/vassal_westmoreland_b.png) }
.vassal.back.vassal_worcester { background-image: url(images/vassal_worcester_b.png) }

.vassal.back.vassal_hastings { background-image: url(images/vassal_hastings_b.png) }
.vassal.back.vassal_clifford { background-image: url(images/vassal_clifford_b.png) }
.vassal.back.vassal_edward { background-image: url(images/vassal_edward_b.png) }
.vassal.back.vassal_montagu { background-image: url(images/vassal_montagu_b.png) }
.vassal.back.vassal_thomas_stanley { background-image: url(images/vassal_thomas_stanley_b.png) }
.vassal.back.vassal_trollope { background-image: url(images/vassal_trollope_b.png) }

/* COLORS */

.mat .board {
	background-color: hsl(37,28%,56%);
	border-color: hsl(37,28%,66%) hsl(37,28%,46%) hsl(37,28%,46%) hsl(37,28%,66%);
	box-shadow: 0 0 0 1px #333, 0px 0px 4px #0008;
}

.defender .att .mat .board,
.attacker .def .mat .board {
	border-color: hsl(37,28%,46%) hsl(37,28%,66%) hsl(37,28%,66%) hsl(37,28%,46%);
}

.marker.battle { background-color: hsl(34,16%,49%); border-color: hsl(34,16%,59%) hsl(34,16%,39%) hsl(34,16%,39%) hsl(34,16%,59%); }
.marker.campaign { background-color: hsl(198,33%,38%); border-color: hsl(198,33%,48%) hsl(198,33%,28%) hsl(198,33%,28%) hsl(198,33%,48%); }
.marker.levy { background-color: hsl(33,35%,44%); border-color: hsl(33,35%,54%) hsl(33,35%,34%) hsl(33,35%,34%) hsl(33,35%,54%); }
.asset.cart.x1 { background-color: hsl(36,52%,70%); border-color: hsl(36,52%,80%) hsl(36,52%,60%) hsl(36,52%,60%) hsl(36,52%,80%); }
.asset.cart.x2 { background-color: hsl(34,51%,64%); border-color: hsl(34,51%,74%) hsl(34,51%,54%) hsl(34,51%,54%) hsl(34,51%,74%); }
.asset.cart.x3 { background-color: hsl(34,47%,56%); border-color: hsl(34,47%,66%) hsl(34,47%,46%) hsl(34,47%,46%) hsl(34,47%,66%); }
.asset.cart.x4 { background-color: hsl(26,32%,50%); border-color: hsl(26,32%,60%) hsl(26,32%,40%) hsl(26,32%,40%) hsl(26,32%,60%); }
.asset.coin.x1 { background-color: hsl(160,3%,83%); border-color: hsl(160,3%,93%) hsl(160,3%,73%) hsl(160,3%,73%) hsl(160,3%,93%); }
.asset.coin.x2 { background-color: hsl(120,1%,74%); border-color: hsl(120,1%,84%) hsl(120,1%,64%) hsl(120,1%,64%) hsl(120,1%,84%); }
.asset.coin.x3 { background-color: hsl(300,1%,65%); border-color: hsl(300,1%,75%) hsl(300,1%,55%) hsl(300,1%,55%) hsl(300,1%,75%); }
.asset.coin.x4 { background-color: hsl(0,0%,56%); border-color: hsl(0,0%,66%) hsl(0,0%,46%) hsl(0,0%,46%) hsl(0,0%,66%); }
.asset.prov.x1 { background-color: hsl(44,100%,79%); border-color: hsl(44,100%,89%) hsl(44,100%,69%) hsl(44,100%,69%) hsl(44,100%,89%); }
.asset.prov.x2 { background-color: hsl(42,100%,75%); border-color: hsl(42,100%,85%) hsl(42,100%,65%) hsl(42,100%,65%) hsl(42,100%,85%); }
.asset.prov.x3 { background-color: hsl(40,100%,70%); border-color: hsl(40,100%,80%) hsl(40,100%,60%) hsl(40,100%,60%) hsl(40,100%,80%); }
.asset.prov.x4 { background-color: hsl(39,82%,63%); border-color: hsl(39,82%,73%) hsl(39,82%,53%) hsl(39,82%,53%) hsl(39,82%,73%); }
.asset.ship.x1 { background-color: hsl(209,61%,74%); border-color: hsl(209,61%,84%) hsl(209,61%,64%) hsl(209,61%,64%) hsl(209,61%,84%); }
.asset.ship.x2 { background-color: hsl(205,52%,60%); border-color: hsl(205,52%,70%) hsl(205,52%,50%) hsl(205,52%,50%) hsl(205,52%,70%); }
.unit.retinue { background-color: hsl(0,0%,67%); border-color: hsl(0,0%,77%) hsl(0,0%,57%) hsl(0,0%,57%) hsl(0,0%,77%); }
.marker.cities.york { background-color: hsl(0,0%,96%); border-color: hsl(0,0%,100%) hsl(0,0%,86%) hsl(0,0%,86%) hsl(0,0%,100%); }
.marker.fortresses.york { background-color: hsl(0,0%,96%); border-color: hsl(0,0%,100%) hsl(0,0%,86%) hsl(0,0%,86%) hsl(0,0%,100%); }
.marker.ip.york { background-color: hsl(0,0%,96%); border-color: hsl(0,0%,100%) hsl(0,0%,86%) hsl(0,0%,86%) hsl(0,0%,100%); }
.marker.towns.york { background-color: hsl(0,0%,96%); border-color: hsl(0,0%,100%) hsl(0,0%,86%) hsl(0,0%,86%) hsl(0,0%,100%); }
.marker.cities.lancaster { background-color: hsl(359,85%,53%); border-color: hsl(359,85%,63%) hsl(359,85%,43%) hsl(359,85%,43%) hsl(359,85%,63%); }
.marker.fortresses.lancaster { background-color: hsl(359,85%,53%); border-color: hsl(359,85%,63%) hsl(359,85%,43%) hsl(359,85%,43%) hsl(359,85%,63%); }
.marker.ip.lancaster { background-color: hsl(359,85%,53%); border-color: hsl(359,85%,63%) hsl(359,85%,43%) hsl(359,85%,43%) hsl(359,85%,63%); }
.marker.towns.lancaster { background-color: hsl(359,85%,53%); border-color: hsl(359,85%,63%) hsl(359,85%,43%) hsl(359,85%,43%) hsl(359,85%,63%); }
.marker.depleted { background-color: hsl(204,6%,85%); border-color: hsl(204,6%,95%) hsl(204,6%,75%) hsl(204,6%,75%) hsl(204,6%,95%); }
.marker.end { background-color: hsl(33,35%,44%); border-color: hsl(33,35%,54%) hsl(33,35%,34%) hsl(33,35%,34%) hsl(33,35%,54%); }
.marker.exhausted { background-color: hsl(283,4%,31%); border-color: hsl(283,4%,41%) hsl(283,4%,21%) hsl(283,4%,21%) hsl(283,4%,41%); }
.marker.exile { background-color: hsl(86,41%,39%); border-color: hsl(86,41%,49%) hsl(86,41%,29%) hsl(86,41%,29%) hsl(86,41%,49%); }
.marker.exile_rose.lancaster { background-color: hsl(358,83%,91%); border-color: hsl(358,83%,100%) hsl(358,83%,81%) hsl(358,83%,81%) hsl(358,83%,100%); }
.marker.exile_rose.york { background-color: hsl(217,53%,88%); border-color: hsl(217,53%,98%) hsl(217,53%,78%) hsl(217,53%,78%) hsl(217,53%,98%); }
.marker.feed.x2 { background-color: hsl(204,100%,37%); border-color: hsl(204,100%,47%) hsl(204,100%,27%) hsl(204,100%,27%) hsl(204,100%,47%); }
.marker.feed.x3 { background-color: hsl(200,100%,29%); border-color: hsl(200,100%,39%) hsl(200,100%,19%) hsl(200,100%,19%) hsl(200,100%,39%); }
.unit.retinue.fled { background-color: hsl(347,47%,4%); border-color: hsl(347,47%,14%) hsl(347,47%,0%) hsl(347,47%,0%) hsl(347,47%,14%); }
.marker.hits.lancaster { background-color: hsl(358,83%,91%); border-color: hsl(358,83%,100%) hsl(358,83%,81%) hsl(358,83%,81%) hsl(358,83%,100%); }
.marker.hits.york { background-color: hsl(217,53%,88%); border-color: hsl(217,53%,98%) hsl(217,53%,78%) hsl(217,53%,78%) hsl(217,53%,98%); }
.marker.rose.lancaster { background-color: hsl(358,83%,91%); border-color: hsl(358,83%,100%) hsl(358,83%,81%) hsl(358,83%,81%) hsl(358,83%,100%); }
.marker.rose.york { background-color: hsl(217,53%,88%); border-color: hsl(217,53%,98%) hsl(217,53%,78%) hsl(217,53%,78%) hsl(217,53%,98%); }
.marker.source { background-color: hsl(41,30%,71%); border-color: hsl(41,30%,81%) hsl(41,30%,61%) hsl(41,30%,61%) hsl(41,30%,81%); }
.marker.valour { background-color: hsl(288,29%,51%); border-color: hsl(288,29%,61%) hsl(288,29%,41%) hsl(288,29%,41%) hsl(288,29%,61%); }
.marker.victory_check { background-color: hsl(51,97%,53%); border-color: hsl(51,97%,63%) hsl(51,97%,43%) hsl(51,97%,43%) hsl(51,97%,63%); }
.marker.moved_fought { background-color: hsl(204,100%,37%); border-color: hsl(204,100%,47%) hsl(204,100%,27%) hsl(204,100%,27%) hsl(204,100%,47%); }
.marker.number.lancaster { background-color: hsl(358,83%,91%); border-color: hsl(358,83%,100%) hsl(358,83%,81%) hsl(358,83%,81%) hsl(358,83%,100%); }
.marker.number.york { background-color: hsl(0,0%,100%); border-color: hsl(0,0%,100%) hsl(0,0%,90%) hsl(0,0%,90%) hsl(0,0%,100%); }
.marker.vassal { background-color: hsl(58,34%,73%); border-color: hsl(58,34%,83%) hsl(58,34%,63%) hsl(58,34%,63%) hsl(58,34%,83%); }
.marker.vassal.back { background-color: hsl(57,48%,75%); border-color: hsl(57,48%,85%) hsl(57,48%,65%) hsl(57,48%,65%) hsl(57,48%,85%); }
.marker.vassal.vassal_hastings { background-color: hsl(217,53%,88%); border-color: hsl(217,53%,98%) hsl(217,53%,78%) hsl(217,53%,78%) hsl(217,53%,98%); }
.marker.vassal.vassal_clifford { background-color: hsl(358,83%,91%); border-color: hsl(358,83%,100%) hsl(358,83%,81%) hsl(358,83%,81%) hsl(358,83%,100%); }
.marker.vassal.vassal_edward { background-color: hsl(358,83%,91%); border-color: hsl(358,83%,100%) hsl(358,83%,81%) hsl(358,83%,81%) hsl(358,83%,100%); }
.marker.vassal.vassal_montagu { background-color: hsl(358,83%,91%); border-color: hsl(358,83%,100%) hsl(358,83%,81%) hsl(358,83%,81%) hsl(358,83%,100%); }
.marker.vassal.vassal_thomas_stanley { background-color: hsl(358,83%,91%); border-color: hsl(358,83%,100%) hsl(358,83%,81%) hsl(358,83%,81%) hsl(358,83%,100%); }
.marker.vassal.vassal_trollope { background-color: hsl(358,83%,91%); border-color: hsl(358,83%,100%) hsl(358,83%,81%) hsl(358,83%,81%) hsl(358,83%,100%); }
.unit.vassal { background-color: hsl(58,34%,73%); border-color: hsl(58,34%,83%) hsl(58,34%,63%) hsl(58,34%,63%) hsl(58,34%,83%); }
.unit.vassal.back { background-color: hsl(57,48%,75%); border-color: hsl(57,48%,85%) hsl(57,48%,65%) hsl(57,48%,65%) hsl(57,48%,85%); }
.unit.vassal.vassal_hastings { background-color: hsl(217,53%,88%); border-color: hsl(217,53%,98%) hsl(217,53%,78%) hsl(217,53%,78%) hsl(217,53%,98%); }
.unit.vassal.vassal_clifford { background-color: hsl(358,83%,91%); border-color: hsl(358,83%,100%) hsl(358,83%,81%) hsl(358,83%,81%) hsl(358,83%,100%); }
.unit.vassal.vassal_edward { background-color: hsl(358,83%,91%); border-color: hsl(358,83%,100%) hsl(358,83%,81%) hsl(358,83%,81%) hsl(358,83%,100%); }
.unit.vassal.vassal_montagu { background-color: hsl(358,83%,91%); border-color: hsl(358,83%,100%) hsl(358,83%,81%) hsl(358,83%,81%) hsl(358,83%,100%); }
.unit.vassal.vassal_thomas_stanley { background-color: hsl(358,83%,91%); border-color: hsl(358,83%,100%) hsl(358,83%,81%) hsl(358,83%,81%) hsl(358,83%,100%); }
.unit.vassal.vassal_trollope { background-color: hsl(358,83%,91%); border-color: hsl(358,83%,100%) hsl(358,83%,81%) hsl(358,83%,81%) hsl(358,83%,100%); }

/* ULTRA-WIDE SCREEN LAYOUTS */

@media (min-width: 2800px) {
	#pan_zoom_main { display: grid; gap: 0 12px; }
	#pan_zoom_main { grid-template-columns: 0 1275px auto 0; }
	#sec_map { grid-row: 1; grid-column: 2 }
	#sec_battle { grid-row: 2; grid-column: 2 }
	#sec_lords { grid-row: 1 / 3; grid-column: 3 }
}

@media (min-width: 3200px) {
	#pan_zoom_main { grid-template-columns: 36px 1275px auto 0; }
}

@media (min-width: 4100px) {
	#pan_zoom_main { grid-template-columns: 0 1275px 1fr 1275px 0; }
	#sec_map { grid-row: 1; grid-column: 2 }
	#sec_lords { grid-row: 1; grid-column: 3 }
	#sec_battle { grid-row: 1; grid-column: 4 }
}