1 files changed, 41 insertions, 0 deletions

diff --git a/play.css b/play.css
index 922bc69..0b4186e 100644
--- a/play.css
+++ b/play.css
@@ -29,6 +29,47 @@ body {
 
 .role.active span { font-weight: bold }
 
+.role_stat {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: start;
+	gap: 4px;
+	padding-right: 3px;
+}
+
+.role_marker {
+	display: inline-block;
+	width: 30px;
+	height: 22px;
+	background-size: 24px 24px;
+	background-position: center;
+	background-repeat: no-repeat;
+	border: 1px solid black;
+}
+
+.role_marker.france { background-color: #ed1c24 }
+.role_marker.prussia { background-color: #005988 }
+.role_marker.pragmatic { background-color: #5f5c5c }
+.role_marker.austria { background-color: #ffffff }
+.role_marker.saxony { background-color: #157d36 }
+.role_marker.bavaria { background-color: #ffc825 }
+
+.role_marker.france { background-image: url(images/role_france.1x.png) }
+.role_marker.prussia { background-image: url(images/role_prussia.1x.png) }
+.role_marker.pragmatic { background-image: url(images/role_pragmatic.1x.png) }
+.role_marker.austria { background-image: url(images/role_austria.1x.png) }
+.role_marker.saxony { background-image: url(images/role_saxony.1x.png) }
+.role_marker.bavaria { background-image: url(images/role_bavaria.1x.png) }
+
+@media (min-resolution: 97dpi) {
+.role_marker.france { background-image: url(images/role_france.2x.png) }
+.role_marker.prussia { background-image: url(images/role_prussia.2x.png) }
+.role_marker.pragmatic { background-image: url(images/role_pragmatic.2x.png) }
+.role_marker.austria { background-image: url(images/role_austria.2x.png) }
+.role_marker.saxony { background-image: url(images/role_saxony.2x.png) }
+.role_marker.bavaria { background-image: url(images/role_bavaria.2x.png) }
+}
+
 #mapwrap {
 	width: 2485px;
 	height: 1654px;