cleanup counters

1 files changed, 109 insertions, 371 deletions

diff --git a/play.html b/play.html
index c022279..2182e31 100644
--- a/play.html
+++ b/play.html
@@ -39,330 +39,100 @@ main { background-color: dimgray }
 	transition-timing-function: ease;
 }
 
-.counter {
-	width: 68px;
-	height: 68px;
-	background-repeat: no-repeat;
-	background-size: 68px 68px;
-	background-position: center;
-	border-width: 2px;
-	border-style: solid;
-	box-shadow: 0 0 0 1px #222, 1px 2px 4px #0008;
-}
-
-.counter-map {
-	width: 48px;
-	height: 48px;
-	background-size: 48px 48px;
-	border-width: 1px;
-}
-
-.counter-med {
-	width: 35px;
-	height: 35px;
-	background-size: 35px 35px;
-	border-width: 1px;
-}
-
-.counter-mini {
-	width: 24px;
-	height: 24px;
-	background-size: 24px 24px;
-	border-width: 1px;
-}
+/* COUNTERS */
 
-.selected {
-	border-color: yellow;
-}
-
-/* UNITS */
-
-#map .unit {
+#map .counter {
 	position: absolute;
 }
 
-.unit {
+.counter {
 	background-size: 1000%;
 	background-repeat: no-repeat;
 	border-style: solid;
 	transition: top 200ms, left 200ms, transform 200ms;
 }
 
-.unit {
+.counter {
 	width: 39px;
 	height: 39px;
 	border-width: 3px;
 	border-radius: 8px;
+	background-image: url(counters.svg);
 }
 
-.unit.m {
+.counter.m {
 	width: 42px;
 	height: 42px;
 	border-width: 4px;
 }
 
-.unit.revealed {
-	background-image: url(counters.svg);
-}
-
-/* #mapwrap.fit .unit.revealed {
-	background-image: url(units-simple.svg);
+/* #mapwrap.fit .counter {
+	background-image: url(counters-simple.svg);
 } */
 
-.unit.axis {
-	background-color: hsl(80, 20%, 60%);
-	border-color: hsl(80, 20%, 50%);
-	box-shadow: 0 0 2px 1px hsl(80, 20%, 20%);
-}
-
-.unit.axis.eliminated,
-.unit.axis.fired,
-.unit.axis.moved:not(.disrupted):not(.unsupplied) {
-	border-color: hsl(80, 20%, 40%);
-}
-
-.unit.axis.eliminated:not(.revealed),
-.unit.axis.fired:not(.revealed),
-.unit.axis.moved:not(.revealed) {
-	background-color: hsl(80, 20%, 50%);
-}
-
-.unit.allied {
-	background-color: hsl(35, 40%, 60%);
-	border-color: hsl(35, 40%, 50%);
-	box-shadow: 0 0 2px 1px hsl(30, 40%, 20%);
-}
-
-.unit.allied.eliminated,
-.unit.allied.fired,
-.unit.allied.moved:not(.disrupted):not(.unsupplied) {
-	border-color: hsl(35, 40%, 40%);
-}
-
-.unit.allied.eliminated:not(.revealed),
-.unit.allied.fired:not(.revealed),
-.unit.allied.moved:not(.revealed) {
-	background-color: hsl(35, 40%, 50%);
-}
-
-.unit.moved:not(.revealed) {
-	background-image: url(moved.svg);
-	background-size: 75%;
-	background-position: center bottom;
-}
-
-.unit.eliminated:not(.revealed) {
-	background-image: url(eliminated.svg);
-	background-size: 60%;
-	background-position: center;
-}
-
-.unit.axis.revealed {
-	background-color: #abba8e;
-}
-
-.unit.axis.italian.revealed {
-	background-color: #f9e3b3;
-}
-
-.unit.allied.revealed {
-	background-color: #e4d1ab;
-}
-
-.unit.disrupted {
-	border-color: #222;
-	box-shadow: 0 0 2px 1px black;
-}
-
-.unit.disrupted:not(.revealed) {
-	background-image: url(disrupted.svg);
-	background-size: 75%;
-	background-position: center;
-}
-
-.unit.unsupplied {
-	border-color: #c00;
-	box-shadow: 0 0 2px 1px darkred;
-}
-
-.unit.unsupplied:not(.revealed) {
-	background-image: url(unsupplied.svg);
-	background-size: 75%;
-	background-position: center;
-}
-
-.unit.disrupted.unsupplied {
-	border-color: #222 #c00;
-}
-
-.unit.disrupted.unsupplied.r1, .unit.disrupted.unsupplied.r3 {
-	border-color: #c00 #222;
-}
-
-.unit.disrupted.unsupplied:not(.revealed) {
-	background-image: url(unsupplied.svg), url(disrupted.svg);
-	background-size: 50%, 50%;
-	background-position: 0% 90%, 90% 10%;
-}
-
-.unit.action {
+.counter.action {
 	box-shadow: 0 0 0 2px white;
 }
 
-.unit.action.hit {
-	box-shadow: 0 0 0 2px white, 0 0 0 4px black;
-}
-
-.unit.selected {
+.counter.selected {
 	box-shadow: 0 0 0 2px yellow;
 }
 
-.unit.u0{background-position:0% 0%}
-.unit.u1{background-position:11.11111111111111% 0%}
-.unit.u2{background-position:22.22222222222222% 0%}
-.unit.u3{background-position:33.33333333333333% 0%}
-.unit.u4{background-position:44.44444444444444% 0%}
-.unit.u5{background-position:55.55555555555556% 0%}
-.unit.u6{background-position:66.66666666666666% 0%}
-.unit.u7{background-position:77.77777777777777% 0%}
-.unit.u8{background-position:88.88888888888889% 0%}
-.unit.u9{background-position:100% 0%}
-.unit.u10{background-position:0% 11.11111111111111%}
-.unit.u11{background-position:11.11111111111111% 11.11111111111111%}
-.unit.u12{background-position:22.22222222222222% 11.11111111111111%}
-.unit.u13{background-position:33.33333333333333% 11.11111111111111%}
-.unit.u14{background-position:44.44444444444444% 11.11111111111111%}
-.unit.u15{background-position:55.55555555555556% 11.11111111111111%}
-.unit.u16{background-position:66.66666666666666% 11.11111111111111%}
-.unit.u17{background-position:77.77777777777777% 11.11111111111111%}
-.unit.u18{background-position:88.88888888888889% 11.11111111111111%}
-.unit.u19{background-position:100% 11.11111111111111%}
-.unit.u20{background-position:0% 22.22222222222222%}
-.unit.u21{background-position:11.11111111111111% 22.22222222222222%}
-.unit.u22{background-position:22.22222222222222% 22.22222222222222%}
-.unit.u23{background-position:33.33333333333333% 22.22222222222222%}
-.unit.u24{background-position:44.44444444444444% 22.22222222222222%}
-.unit.u25{background-position:55.55555555555556% 22.22222222222222%}
-.unit.u26{background-position:66.66666666666666% 22.22222222222222%}
-.unit.u27{background-position:77.77777777777777% 22.22222222222222%}
-.unit.u28{background-position:88.88888888888889% 22.22222222222222%}
-.unit.u29{background-position:100% 22.22222222222222%}
-.unit.u30{background-position:0% 33.33333333333333%}
-.unit.u31{background-position:11.11111111111111% 33.33333333333333%}
-.unit.u32{background-position:22.22222222222222% 33.33333333333333%}
-.unit.u33{background-position:33.33333333333333% 33.33333333333333%}
-.unit.u34{background-position:44.44444444444444% 33.33333333333333%}
-.unit.u35{background-position:55.55555555555556% 33.33333333333333%}
-.unit.u36{background-position:66.66666666666666% 33.33333333333333%}
-.unit.u37{background-position:77.77777777777777% 33.33333333333333%}
-.unit.u38{background-position:88.88888888888889% 33.33333333333333%}
-.unit.u39{background-position:100% 33.33333333333333%}
-.unit.u40{background-position:0% 44.44444444444444%}
-.unit.u41{background-position:11.11111111111111% 44.44444444444444%}
-.unit.u42{background-position:22.22222222222222% 44.44444444444444%}
-.unit.u43{background-position:33.33333333333333% 44.44444444444444%}
-.unit.u44{background-position:44.44444444444444% 44.44444444444444%}
-.unit.u45{background-position:55.55555555555556% 44.44444444444444%}
-.unit.u46{background-position:66.66666666666666% 44.44444444444444%}
-.unit.u47{background-position:77.77777777777777% 44.44444444444444%}
-.unit.u48{background-position:88.88888888888889% 44.44444444444444%}
-.unit.u49{background-position:100% 44.44444444444444%}
-.unit.u50{background-position:0% 55.55555555555556%}
-.unit.u51{background-position:11.11111111111111% 55.55555555555556%}
-.unit.u52{background-position:22.22222222222222% 55.55555555555556%}
-.unit.u53{background-position:33.33333333333333% 55.55555555555556%}
-.unit.u54{background-position:44.44444444444444% 55.55555555555556%}
-.unit.u55{background-position:55.55555555555556% 55.55555555555556%}
-.unit.u56{background-position:66.66666666666666% 55.55555555555556%}
-.unit.u57{background-position:77.77777777777777% 55.55555555555556%}
-.unit.u58{background-position:88.88888888888889% 55.55555555555556%}
-.unit.u59{background-position:100% 55.55555555555556%}
-.unit.u60{background-position:0% 66.66666666666666%}
-.unit.u61{background-position:11.11111111111111% 66.66666666666666%}
-.unit.u62{background-position:22.22222222222222% 66.66666666666666%}
-.unit.u63{background-position:33.33333333333333% 66.66666666666666%}
-.unit.u64{background-position:44.44444444444444% 66.66666666666666%}
-.unit.u65{background-position:55.55555555555556% 66.66666666666666%}
-.unit.u66{background-position:66.66666666666666% 66.66666666666666%}
-.unit.u67{background-position:77.77777777777777% 66.66666666666666%}
-.unit.u68{background-position:88.88888888888889% 66.66666666666666%}
-.unit.u69{background-position:100% 66.66666666666666%}
-.unit.u70{background-position:0% 77.77777777777777%}
-.unit.u71{background-position:11.11111111111111% 77.77777777777777%}
-.unit.u72{background-position:22.22222222222222% 77.77777777777777%}
-.unit.u73{background-position:33.33333333333333% 77.77777777777777%}
-.unit.u74{background-position:44.44444444444444% 77.77777777777777%}
-.unit.u75{background-position:55.55555555555556% 77.77777777777777%}
-.unit.u76{background-position:66.66666666666666% 77.77777777777777%}
-.unit.u77{background-position:77.77777777777777% 77.77777777777777%}
-.unit.u78{background-position:88.88888888888889% 77.77777777777777%}
-.unit.u79{background-position:100% 77.77777777777777%}
-.unit.u80{background-position:0% 88.88888888888889%}
-.unit.u81{background-position:11.11111111111111% 88.88888888888889%}
-.unit.u82{background-position:22.22222222222222% 88.88888888888889%}
-.unit.u83{background-position:33.33333333333333% 88.88888888888889%}
-.unit.u84{background-position:44.44444444444444% 88.88888888888889%}
-.unit.u85{background-position:55.55555555555556% 88.88888888888889%}
-.unit.u86{background-position:66.66666666666666% 88.88888888888889%}
-.unit.u87{background-position:77.77777777777777% 88.88888888888889%}
-.unit.u88{background-position:88.88888888888889% 88.88888888888889%}
-.unit.u89{background-position:100% 88.88888888888889%}
-.unit.u90{background-position:0% 100%}
-.unit.u91{background-position:11.11111111111111% 100%}
-.unit.u92{background-position:22.22222222222222% 100%}
-.unit.u93{background-position:33.33333333333333% 100%}
-
-.counter.fr_al_5_mob_inf { background-image: url(counters/fr_al_5_mob_inf.png) }
-.counter.fr_al_7_mob_arm { background-image: url(counters/fr_al_7_mob_arm.png) }
-.counter.fr_al_static { background-image: url(counters/fr_al_static.png) }
-.counter.fr_div_7_inf { background-image: url(counters/fr_div_7_inf.png) }
-.counter.fr_div_25 { background-image: url(counters/fr_div_25.png) }
-.counter.fr_elite_9_inf { background-image: url(counters/fr_elite_9_inf.png) }
-.counter.fr_elite_9_mar { background-image: url(counters/fr_elite_9_mar.png) }
-.counter.fr_elite_9_para { background-image: url(counters/fr_elite_9_para.png) }
-.counter.fr_elite_10 { background-image: url(counters/fr_elite_10.png) }
-.counter.fr_reg_6_inf { background-image: url(counters/fr_reg_6_inf.png) }
-
-.counter.fr_al_5_mob_inf.neutralized { background-image: url(counters/neutralized.png), url(counters/fr_al_5_mob_inf.png) }
-.counter.fr_al_7_mob_arm.neutralized { background-image: url(counters/neutralized.png), url(counters/fr_al_7_mob_arm.png) }
-.counter.fr_al_static.neutralized { background-image: url(counters/neutralized.png), url(counters/fr_al_static.png) }
-.counter.fr_div_7_inf.neutralized { background-image: url(counters/neutralized.png), url(counters/fr_div_7_inf.png) }
-.counter.fr_div_25.neutralized { background-image: url(counters/neutralized.png), url(counters/fr_div_25.png) }
-.counter.fr_elite_9_inf.neutralized { background-image: url(counters/neutralized.png), url(counters/fr_elite_9_inf.png) }
-.counter.fr_elite_9_mar.neutralized { background-image: url(counters/neutralized.png), url(counters/fr_elite_9_mar.png) }
-.counter.fr_elite_9_para.neutralized { background-image: url(counters/neutralized.png), url(counters/fr_elite_9_para.png) }
-.counter.fr_elite_10.neutralized { background-image: url(counters/neutralized.png), url(counters/fr_elite_10.png) }
-.counter.fr_reg_6_inf.neutralized { background-image: url(counters/neutralized.png), url(counters/fr_reg_6_inf.png) }
-
-.counter.front { background-image: url(counters/front.png) }
-.counter.cadre { background-image: url(counters/cadre.png) }
-.counter.company { background-image: url(counters/company.png) }
-
-.counter.front.neutralized { background-image: url(counters/neutralized.png), url(counters/front.png) }
-.counter.cadre.neutralized { background-image: url(counters/neutralized.png), url(counters/cadre.png) }
-.counter.company.neutralized { background-image: url(counters/neutralized.png), url(counters/company.png) }
-
-.counter.psl-fln { background-image: url(counters/psl.png) }
-.counter.psl-fra { background-image: url(counters/psl_fr.png) }
-.counter.ap { background-image: url(counters/ap.png) }
-
-.counter.naval-pts { background-image: url(counters/naval.png) }
-.counter.helo-pts-max { background-image: url(counters/helo_max.png) }
-.counter.helo-pts-avail { background-image: url(counters/helo_avail.png) }
-.counter.air-pts-max { background-image: url(counters/air_max.png) }
-.counter.air-pts-avail { background-image: url(counters/air_avail.png) }
-
-.counter.border_zone { background-image: url(counters/border.png)}
-.counter.remote { background-image: url(counters/remote.png)}
-.counter.terror { background-image: url(counters/terror.png)}
-
-.counter.control_fln { background-image: url(counters/control.png)}
-.counter.control_fra { background-image: url(counters/control_fr.png)}
-.counter.control_neut { background-image: url(counters/neut.png)}
-
-.counter.oas_fln { background-image: url(counters/oas_fln.png)}
-.counter.oas_fra { background-image: url(counters/oas_fr.png)}
-.counter.oas { background-image: url(counters/oas.png)}
+.counter.turn_now{background-position:0% 0%}
+.counter.fln_psl{background-position:11.11111111111111% 0%}
+.counter.fln_ap{background-position:22.22222222222222% 0%}
+.counter.gov_psl{background-position:33.33333333333333% 0%}
+.counter.fln_control{background-position:44.44444444444444% 0%}
+.counter.gov_control{background-position:55.55555555555556% 0%}
+.counter.oas_active{background-position:66.66666666666666% 0%}
+.counter.remote{background-position:77.77777777777777% 0%}
+.counter.terror{background-position:88.88888888888889% 0%}
+
+.counter.air_avail{background-position:0% 11.11111111111111%}
+.counter.air_max{background-position:11.11111111111111% 11.11111111111111%}
+.counter.helo_avail{background-position:22.22222222222222% 11.11111111111111%}
+.counter.helo_max{background-position:33.33333333333333% 11.11111111111111%}
+.counter.naval_pts{background-position:44.44444444444444% 11.11111111111111%}
+.counter.border_zone{background-position:55.55555555555556% 11.11111111111111%}
+
+.counter.fr_xx_2{background-position:0% 22.22222222222222%}
+.counter.fr_xx_4{background-position:11.11111111111111% 22.22222222222222%}
+.counter.fr_xx_9{background-position:22.22222222222222% 22.22222222222222%}
+.counter.fr_xx_12{background-position:33.33333333333333% 22.22222222222222%}
+.counter.fr_xx_13{background-position:44.44444444444444% 22.22222222222222%}
+.counter.fr_xx_14{background-position:55.55555555555556% 22.22222222222222%}
+.counter.fr_xx_19{background-position:66.66666666666666% 22.22222222222222%}
+.counter.fr_xx_20{background-position:77.77777777777777% 22.22222222222222%}
+.counter.fr_xx_21{background-position:88.88888888888889% 22.22222222222222%}
+.counter.fr_xx_29{background-position:100% 22.22222222222222%}
+
+.counter.fr_xx_27{background-position:0% 33.33333333333333%}
+.counter.fr_xx_5{background-position:11.11111111111111% 33.33333333333333%}
+.counter.fr_xx_7{background-position:22.22222222222222% 33.33333333333333%}
+.counter.fr_xx_dispersed{background-position:33.33333333333333% 33.33333333333333%}
+.counter.fr_x{background-position:44.44444444444444% 33.33333333333333%}
+.counter.fr_x_airmobile{background-position:55.55555555555556% 33.33333333333333%}
+
+.counter.fr_elite_x_para{background-position:0% 44.44444444444444%}
+.counter.fr_elite_x_inf{background-position:11.11111111111111% 44.44444444444444%}
+.counter.fr_elite_x_marine{background-position:22.22222222222222% 44.44444444444444%}
+.counter.fr_elite_x_airmobile{background-position:33.33333333333333% 44.44444444444444%}
+.counter.alg_x{background-position:44.44444444444444% 44.44444444444444%}
+.counter.alg_x_airmobile{background-position:55.55555555555556% 44.44444444444444%}
+.counter.alg_police{background-position:66.66666666666666% 44.44444444444444%}
+/* .counter.alg_neut{background-position:77.77777777777777% 44.44444444444444%} */
+
+.counter.fln_failek{background-position:0% 55.55555555555556%}
+.counter.fln_band{background-position:11.11111111111111% 55.55555555555556%}
+.counter.fln_cadre{background-position:22.22222222222222% 55.55555555555556%}
+.counter.fln_front{background-position:33.33333333333333% 55.55555555555556%}
+/* .counter.neut{background-position:44.44444444444444% 55.55555555555556%} */
+
+.counter.neutralized {
+    background-color: rgba(255,255,255,0.6);
+    background-blend-mode: lighten;
+	border-color:grey;
+}
 
 .panel {
 	max-width: 900px;
@@ -387,28 +157,6 @@ main { background-color: dimgray }
 	gap: 14px;
 }
 
-.track {
-	position: relative;
-}
-
-.track div {
-	position: absolute;
-}
-
-#psl_track {
-	width: 868px;
-	height: 821px;
-	background-size: 868px 821px;
-	background-image: url(psl_track.png);
-}
-
-#air_naval_track {
-	width: 813px;
-	height: 112px;
-	background-size: 813px 112px;
-	background-image: url(air-helo_track.png);
-}
-
 </style>
 </head>
 <body>
@@ -419,7 +167,6 @@ main { background-color: dimgray }
 		<div class="menu_title"><img src="/images/cog.svg"></div>
 		<div class="menu_popup">
 			<a class="menu_item" href="info/rules.html" target="_blank">Rules of Play</a>
-			<a class="menu_item" href="info/legend.html" target="_blank">Legend</a>
 			<a class="menu_item" href="info/charts.html" target="_blank">Charts &amp; Tables</a>
 
 			<div class="resign menu_separator"></div>
@@ -456,51 +203,30 @@ main { background-color: dimgray }
 <div id="mapwrap" class="">
 <div id="map">
 
-<div class="unit u0 revealed" style="left:3px;top:4px;"></div>
-<div class="unit u1 revealed unsupplied" style="left:53px;top:4px;"></div>
-<div class="unit u2 revealed selected" style="left:103px;top:4px;"></div>
-<div class="unit u3 revealed action hit" style="left:153px;top:4px;"></div>
-<div class="unit u4 revealed" style="left:203px;top:4px;"></div>
-<div class="unit u5 revealed" style="left:253px;top:4px;"></div>
-<div class="unit u6 revealed" style="left:303px;top:4px;"></div>
-<div class="unit u7 revealed" style="left:353px;top:4px;"></div>
-<div class="unit u8 revealed" style="left:403px;top:4px;"></div>
+<!-- scale 1.80333333333333333333 -->
+
+<div class="counter turn_now" style="left:3px;top:4px;"></div>
+<div class="counter fln_psl" style="left:53px;top:4px;"></div>
+<div class="counter fln_ap" style="left:103px;top:4px;"></div>
+<div class="counter gov_psl" style="left:153px;top:4px;"></div>
+<div class="counter fln_control" style="left:203px;top:4px;"></div>
+<div class="counter gov_control" style="left:253px;top:4px;"></div>
+<div class="counter oas_active" style="left:303px;top:4px;"></div>
+<div class="counter remote" style="left:353px;top:4px;"></div>
+<div class="counter terror" style="left:403px;top:4px;"></div>
 
 <!-- top right -->
-<div class="unit u0 revealed" style="left:1450px;top:4px;"></div>
+<div class="counter turn_now" style="left:1450px;top:4px;"></div>
 
 <!-- bottom right -->
-<div class="unit u0 revealed" style="left:1450px;top:1051px;"></div>
+<div class="counter turn_now" style="left:1450px;top:1051px;"></div>
 
 <!-- bottom left -->
-<div class="unit u0 revealed" style="left:3px;top:1051px;"></div>
-
-
-<div class="unit u1 revealed unsupplied" style="left:242px;top:330px;"></div>
-
-
-<!-- 
-<div class="counter counter-map fr_div_7_inf selected" style="left:125px;top:187px;"></div>
-<div class="counter counter-map fr_div_7_inf neutralized" style="left:184px;top:187px;"></div>
+<div class="counter turn_now" style="left:3px;top:1051px;"></div>
 
-<div class="counter counter-map oas" style="left:680px;top:85px;"></div>
-<div class="counter counter-map oas_fln" style="left:740px;top:85px;"></div>
-<div class="counter counter-map oas_fra" style="left:800px;top:85px;"></div>
+<div class="counter turn_now" style="left:242px;top:330px;"></div>
 
-<div class="counter counter-mini control_fln" style="left:200px"></div>
-<div class="counter counter-mini control_fra" style="left:240px"></div>
-<div class="counter counter-mini control_neut" style="left:280px"></div>
-<div class="counter counter-mini terror" style="left:1000px;top:10px;"></div>
-<div class="counter counter-mini remote" style="left:1000px;top:60px;"></div>
-
-<div class="counter counter-med border_zone" style="left:20px;top:530px;"></div>
-<div class="counter counter-med border_zone" style="left:1350px;top:250px;"></div>
-
-<div class="counter naval-pts" style="left:171px;top:29px"></div>
-<div class="counter helo-pts-max" style="left:338px;top:10px"></div>
-<div class="counter helo-pts-avail" style="left:478px;top:10px"></div>
-<div class="counter air-pts-max" style="left:618px;top:10px"></div>
-<div class="counter air-pts-avail" style="left:758px;top:10px"></div> -->
+<div class="counter border_zone" style="left:163px;top:223px;"></div>
 
 </div>
 </div>
@@ -509,19 +235,30 @@ main { background-color: dimgray }
 <div id="fra_supply_header" class="panel_header">French Supply</div>
 <div id="fra_supply" class="panel_body">
 
-<div class="counter fr_div_7_inf"></div>
-<div class="counter fr_div_25"></div>
-<div class="counter fr_reg_6_inf"></div>
-
-<div class="counter fr_elite_9_inf"></div>
-<div class="counter fr_elite_9_mar"></div>
-<div class="counter fr_elite_9_para"></div>
-
-<div class="counter fr_elite_10"></div>
-
-<div class="counter fr_al_5_mob_inf"></div>
-<div class="counter fr_al_7_mob_arm"></div>
-<div class="counter fr_al_static"></div>
+<div class="counter fr_xx_2"></div>
+<div class="counter fr_xx_4"></div>
+<div class="counter fr_xx_9"></div>
+<div class="counter fr_xx_12"></div>
+<div class="counter fr_xx_13"></div>
+<div class="counter fr_xx_14 neutralized"></div>
+<div class="counter fr_xx_19"></div>
+<div class="counter fr_xx_20"></div>
+<div class="counter fr_xx_21"></div>
+<div class="counter fr_xx_29"></div>
+
+<div class="counter fr_xx_27"></div>
+<div class="counter fr_xx_5 neutralized"></div>
+<div class="counter fr_xx_7 action"></div>
+<div class="counter fr_xx_dispersed"></div>
+<div class="counter fr_x selected"></div>
+<div class="counter fr_x_airmobile"></div>
+<div class="counter fr_elite_x_para"></div>
+<div class="counter fr_elite_x_inf neutralized"></div>
+<div class="counter fr_elite_x_marine"></div>
+<div class="counter fr_elite_x_airmobile"></div>
+<div class="counter alg_x"></div>
+<div class="counter alg_x_airmobile neutralized"></div>
+<div class="counter alg_police neutralized"></div>
 
 </div>
 </div>
@@ -530,9 +267,10 @@ main { background-color: dimgray }
 <div id="fln_supply_header" class="panel_header">FLN Supply</div>
 <div id="fln_supply" class="panel_body">
 
-<div class="counter front"></div>
-<div class="counter cadre"></div>
-<div class="counter company"></div>
+<div class="counter fln_failek neutralized"></div>
+<div class="counter fln_band"></div>
+<div class="counter fln_cadre"></div>
+<div class="counter fln_front neutralized"></div>
 
 </div>
 </div>