flip the star

5 files changed, 194 insertions, 100 deletions

diff --git a/cards.css b/cards.css
index 2c79bbb..f5cd39b 100644
--- a/cards.css
+++ b/cards.css
@@ -36,6 +36,11 @@
 	padding: 5px 0 5px 20px;
 }
 
+.flip  .dice_area .star {
+	float: left;
+	margin: 0 -48px 0 0;
+}
+
 .name.with_symbol {
 	padding: 5px 0;
 }
@@ -115,16 +120,17 @@
 .dice_area::before { content: " ~ " }
 .dice_area::after { content: " ~ " }
 
-.dice_area .star {
+.star {
 	position: absolute;
 	right: 0px;
-	top: 0px;
+	top: 51px;
 	font-size: 24px;
 	line-height: 24px;
+	text-align: left;
 	padding: 0 12px;
 }
 
-.link.right + .dice_area .star {
+.link.right + .star {
 	right: 24px;
 }
 
diff --git a/create.html b/create.html
index e1bb4f4..ce909e8 100644
--- a/create.html
+++ b/create.html
@@ -11,7 +11,7 @@
 </style>
 <div style="display:none">
 <div class="card exp0" data-scenario="Random"></div>
-<div class="card exp0" data-scenario="Random - Table Battles"></div>
+<div class="card exp0" data-scenario="Random - Base Game"></div>
 <div class="card exp1" data-scenario="Random - Wars of the Roses"></div>
 <div class="card exp2" data-scenario="Random - Age of Alexander"></div>
 <div class="card exp3" data-scenario="Random - Gettysburg"></div>
diff --git a/info/all-cards.html b/info/all-cards.html
index 4313c8a..fde4f84 100644
--- a/info/all-cards.html
+++ b/info/all-cards.html
@@ -100,7 +100,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name pink">Tiefenbach</div>
 <div class="strength">4</div>
-<div class="dice_area">(4)<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">(4)</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -146,7 +147,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name blue">Hohenlohe</div>
 <div class="strength">6</div>
-<div class="dice_area">5<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">5</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -640,7 +642,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name blue">Villars</div>
 <div class="strength">6</div>
-<div class="dice_area">5/6<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">5/6</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -722,7 +725,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name pink">Marlborough</div>
 <div class="strength">6</div>
-<div class="dice_area">(5)/(6)<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">(5)/(6)</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement">Pair</div>
@@ -880,7 +884,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name blue">Henri IV</div>
 <div class="strength">6</div>
-<div class="dice_area">5/6<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">5/6</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -947,7 +952,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name red">Mayenne</div>
 <div class="strength">6</div>
-<div class="dice_area">5/6<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">5/6</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -965,7 +971,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name pink">Mercenaries</div>
 <div class="strength">6</div>
-<div class="dice_area">Triples<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">Triples</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement">Triplet</div>
@@ -1658,7 +1665,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name blue">Neville's Center</div>
 <div class="strength">4</div>
-<div class="dice_area">5/6<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">5/6</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -2510,7 +2518,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name red">Somerset</div>
 <div class="strength">6</div>
-<div class="dice_area">5/6<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">5/6</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -2627,7 +2636,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name red">Oxford</div>
 <div class="strength">8</div>
-<div class="dice_area">5/6<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">5/6</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -2879,7 +2889,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name blue">Ponthieu</div>
 <div class="strength">4</div>
-<div class="dice_area">5/6<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">5/6</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -2897,7 +2908,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name blue">Philip Augustus</div>
 <div class="strength">6</div>
-<div class="dice_area">3/4<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">3/4</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -2917,7 +2929,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name blue">Burgundy</div>
 <div class="strength">4</div>
-<div class="dice_area">5/6<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">5/6</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -2935,7 +2948,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name dkblue">French Knights</div>
 <div class="strength">6</div>
-<div class="dice_area">Doubles<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">Doubles</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement">Pair</div>
@@ -3062,7 +3076,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name pink">Left Phalanx</div>
 <div class="strength">4</div>
-<div class="dice_area">(1-3)<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">(1-3)</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -3081,7 +3096,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name red">Center Phalanx</div>
 <div class="strength">4</div>
-<div class="dice_area">(2-4)<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">(2-4)</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -3100,7 +3116,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name red">Right Phalanx</div>
 <div class="strength">4</div>
-<div class="dice_area">(3-5)<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">(3-5)</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -3386,7 +3403,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name pink">Left Phalanx</div>
 <div class="strength">4</div>
-<div class="dice_area">(2)/(3)<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">(2)/(3)</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -3405,7 +3423,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name pink">Center Phalanx</div>
 <div class="strength">4</div>
-<div class="dice_area">(3)/(4)<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">(3)/(4)</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -3424,7 +3443,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name pink">Right Phalanx</div>
 <div class="strength">4</div>
-<div class="dice_area">(4)/(5)<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">(4)/(5)</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -3578,7 +3598,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name dkblue">The Immortals</div>
 <div class="strength">2</div>
-<div class="dice_area">Doubles<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">Doubles</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement">Pair</div>
@@ -3629,7 +3650,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name pink">Left Phalanx</div>
 <div class="strength">3</div>
-<div class="dice_area">(1)/(2)<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">(1)/(2)</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -3648,7 +3670,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name pink">Center Phalanx</div>
 <div class="strength">3</div>
-<div class="dice_area">(2-4)<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">(2-4)</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -3667,7 +3690,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name pink">Right Phalanx</div>
 <div class="strength">3</div>
-<div class="dice_area">(4)/(5)<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">(4)/(5)</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -3686,7 +3710,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name red">Hoplite Reserve</div>
 <div class="strength">8</div>
-<div class="dice_area">(6)<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">(6)</div>
 <div class="action_row">
 <div class="action_type">Absorb</div>
 <div class="action_requirement">Voluntary</div>
@@ -3758,7 +3783,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name pink">Thessalians</div>
 <div class="strength">4</div>
-<div class="dice_area">5/6<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">5/6</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -3776,7 +3802,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name pink">Phalanx</div>
 <div class="strength">6</div>
-<div class="dice_area">(1-3)<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">(1-3)</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -3795,7 +3822,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name red">Hoplites</div>
 <div class="strength">6</div>
-<div class="dice_area">(4-6)<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">(4-6)</div>
 <div class="action_row">
 <div class="action_type">Absorb</div>
 <div class="action_requirement">Voluntary</div>
@@ -3809,7 +3837,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name red">Hypaspists</div>
 <div class="strength">4</div>
-<div class="dice_area">(5)/(6)<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">(5)/(6)</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -3828,7 +3857,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name red">Companions</div>
 <div class="strength">4</div>
-<div class="dice_area">Doubles<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">Doubles</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement">Pair</div>
@@ -3955,7 +3985,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name dkblue">Left Reserve</div>
 <div class="strength">6</div>
-<div class="dice_area">(6)<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">(6)</div>
 <div class="action_row">
 <div class="action_type">Counterattack</div>
 <div class="action_requirement">Pair</div>
@@ -3969,7 +4000,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name dkblue">Right Reserve</div>
 <div class="strength">6</div>
-<div class="dice_area">(6)<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">(6)</div>
 <div class="action_row">
 <div class="action_type">Counterattack</div>
 <div class="action_requirement">Pair</div>
@@ -3985,7 +4017,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name pink">Left Phalanx</div>
 <div class="strength">3</div>
-<div class="dice_area">(2)/(3)<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">(2)/(3)</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -4004,7 +4037,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name pink">Center Phalanx</div>
 <div class="strength">4</div>
-<div class="dice_area">(3)/(4)<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">(3)/(4)</div>
 <div class="action_row">
 <div class="action_type">Absorb</div>
 <div class="action_requirement">Voluntary</div>
@@ -4018,7 +4052,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name pink">Right Phalanx</div>
 <div class="strength">3</div>
-<div class="dice_area">(4)/(5)<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">(4)/(5)</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -4259,7 +4294,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name pink">The Silver Shields</div>
 <div class="strength">2</div>
-<div class="dice_area">(5)/(6)<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">(5)/(6)</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement">Pair</div>
@@ -4351,7 +4387,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name blue">A. Phalanx</div>
 <div class="strength">8</div>
-<div class="dice_area">(4)/(5)<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">(4)/(5)</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -4431,7 +4468,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name blue">Antigonus</div>
 <div class="strength">4</div>
-<div class="dice_area">Doubles<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">Doubles</div>
 <div class="action_row">
 <div class="action_type">Screen</div>
 <div class="action_requirement">Pair</div>
@@ -4612,7 +4650,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name dkblue">20th Maine</div>
 <div class="strength">4</div>
-<div class="dice_area">(5)/(6)<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">(5)/(6)</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -4650,7 +4689,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name dkblue">44th New York</div>
 <div class="strength">4</div>
-<div class="dice_area">(3)<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">(3)</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -4669,7 +4709,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name dkblue">16th Michigan</div>
 <div class="strength">4</div>
-<div class="dice_area">(2)<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">(2)</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -4701,7 +4742,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name blue">Weed's Brigade</div>
 <div class="strength">8</div>
-<div class="dice_area">Any<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">Any</div>
 <div class="action_row">
 <div class="action_type">Absorb</div>
 <div class="action_requirement">Voluntary</div>
@@ -5637,7 +5679,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name dkblue">Greene's Left</div>
 <div class="strength">3</div>
-<div class="dice_area">6<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">6</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -5656,7 +5699,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name dkblue">Greene's Center</div>
 <div class="strength">3</div>
-<div class="dice_area">5<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">5</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -5675,7 +5719,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name dkblue">Greene's Right</div>
 <div class="strength">3</div>
-<div class="dice_area">4<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">4</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -5695,7 +5740,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name dkblue">Reserves</div>
 <div class="strength">4</div>
-<div class="dice_area">Doubles<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">Doubles</div>
 <div class="action_row">
 <div class="action_type">Absorb</div>
 <div class="action_requirement">Voluntary</div>
@@ -5814,7 +5860,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name dkblue">Sickles</div>
 <div class="strength">6</div>
-<div class="dice_area">(5)<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">(5)</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -5833,7 +5880,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name dkblue">Hancock</div>
 <div class="strength">8</div>
-<div class="dice_area">(4)<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">(4)</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -5852,7 +5900,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name blue">Howard</div>
 <div class="strength">6</div>
-<div class="dice_area">(3)<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">(3)</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -5871,7 +5920,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name blue">Slocum</div>
 <div class="strength">6</div>
-<div class="dice_area">(2)<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">(2)</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -5890,7 +5940,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name blue">Sykes</div>
 <div class="strength">4</div>
-<div class="dice_area">Doubles<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">Doubles</div>
 <div class="action_row">
 <div class="action_type">Absorb</div>
 <div class="action_requirement">Voluntary</div>
@@ -6281,7 +6332,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name blue">Fortescue</div>
 <div class="strength">6</div>
-<div class="dice_area">(3)/(4)<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">(3)/(4)</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -6319,7 +6371,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name dkblue">Essex</div>
 <div class="strength">6</div>
-<div class="dice_area">(5)/(6)<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">(5)/(6)</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -6338,7 +6391,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name dkblue">Stapleton</div>
 <div class="strength">4</div>
-<div class="dice_area">Doubles<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">Doubles</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -6356,7 +6410,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name dkblue">London Trained Bands</div>
 <div class="strength">4</div>
-<div class="dice_area">3/4<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">3/4</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -6777,7 +6832,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name red">Bluecoats</div>
 <div class="strength">4</div>
-<div class="dice_area">5/6<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">5/6</div>
 <div class="action_row">
 <div class="action_type">Absorb</div>
 <div class="action_requirement"></div>
@@ -7414,7 +7470,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name red">Pompey</div>
 <div class="strength">6</div>
-<div class="dice_area">(5)/(6)<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">(5)/(6)</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -7471,7 +7528,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name blue">Antony</div>
 <div class="strength">4</div>
-<div class="dice_area">5/6<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">5/6</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -7490,7 +7548,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name blue">Domitius</div>
 <div class="strength">4</div>
-<div class="dice_area">3/4<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">3/4</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -7509,7 +7568,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name dkblue">Sulla</div>
 <div class="strength">4</div>
-<div class="dice_area">(5)/(6)<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">(5)/(6)</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -7634,7 +7694,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name red">Home Ridge</div>
 <div class="strength">4</div>
-<div class="dice_area">5/6<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">5/6</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -7672,7 +7733,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name red">British Troops</div>
 <div class="strength">4</div>
-<div class="dice_area">1/2<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">1/2</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -7692,7 +7754,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name pink">French Troops</div>
 <div class="strength">6</div>
-<div class="dice_area">4-6<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">4-6</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -7729,7 +7792,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name blue">Gournay's Horse</div>
 <div class="strength">4</div>
-<div class="dice_area">5/6<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">5/6</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -7748,7 +7812,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name blue">French Left</div>
 <div class="strength">6</div>
-<div class="dice_area">3/4<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">3/4</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -7781,7 +7846,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name dkblue">French Center</div>
 <div class="strength">6</div>
-<div class="dice_area">1-3<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">1-3</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -7801,7 +7867,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name dkblue">French Right</div>
 <div class="strength">6</div>
-<div class="dice_area">3/4<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">3/4</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -7820,7 +7887,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name dkblue">Luxembourg's Horse</div>
 <div class="strength">6</div>
-<div class="dice_area">4-6<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">4-6</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -7917,7 +7985,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name pink">Waldeck</div>
 <div class="strength">2</div>
-<div class="dice_area">Doubles<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">Doubles</div>
 <div class="action_row">
 <div class="action_type">Absorb</div>
 <div class="action_requirement">Voluntary</div>
@@ -8438,7 +8507,8 @@ h1{color: white}
 <div class="name red">Horn</div>
 <div class="strength">5</div>
 <div class="link left"></div>
-<div class="dice_area">(1)/(2)<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">(1)/(2)</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -8506,7 +8576,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name pink">Anhalt-Dessau</div>
 <div class="strength">6</div>
-<div class="dice_area">5/6<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">5/6</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -8559,7 +8630,8 @@ h1{color: white}
 <div class="name blue">Lutzingen</div>
 <div class="strength">4</div>
 <div class="link right"></div>
-<div class="dice_area">(5)/(6)<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">(5)/(6)</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -8601,7 +8673,8 @@ h1{color: white}
 <div class="strength">4</div>
 <div class="link left"></div>
 <div class="link right"></div>
-<div class="dice_area">1/2<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">1/2</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -8660,7 +8733,8 @@ h1{color: white}
 <div class="strength">6</div>
 <div class="link left"></div>
 <div class="link right"></div>
-<div class="dice_area">4<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">4</div>
 <div class="action_row">
 <div class="action_type">Absorb</div>
 <div class="action_requirement">Voluntary</div>
@@ -8886,7 +8960,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name dkblue">Guiscard</div>
 <div class="strength">6</div>
-<div class="dice_area">3/4<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">3/4</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -8926,7 +9001,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name red">Dutch Garrison</div>
 <div class="strength">6</div>
-<div class="dice_area">5/6<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">5/6</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -8998,7 +9074,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name pink">Eugene</div>
 <div class="strength">6</div>
-<div class="dice_area">3/4<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">3/4</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -9291,7 +9368,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name red">Charles</div>
 <div class="strength">5</div>
-<div class="dice_area">5/6<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">5/6</div>
 <div class="action_row">
 <div class="action_type">Command</div>
 <div class="action_requirement">Three Dice</div>
@@ -9422,7 +9500,8 @@ h1{color: white}
 <div class="formation card">
 <div class="name red">Austrian Guns</div>
 <div class="strength">6</div>
-<div class="dice_area">(3)/(4)<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">(3)/(4)</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -9443,7 +9522,8 @@ h1{color: white}
 <div class="name with_symbol red">Graner-Koppe</div>
 <div class="symbol infantry"></div>
 <div class="strength">8</div>
-<div class="dice_area">5/6<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">5/6</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -9637,7 +9717,8 @@ h1{color: white}
 <div class="name with_symbol dkblue">Frederick</div>
 <div class="symbol infantry"></div>
 <div class="strength">6</div>
-<div class="dice_area">1/2<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">1/2</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -9913,7 +9994,8 @@ h1{color: white}
 <div class="name with_symbol dkblue">Left Foot</div>
 <div class="symbol infantry"></div>
 <div class="strength">6</div>
-<div class="dice_area">3/4<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">3/4</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -9933,7 +10015,8 @@ h1{color: white}
 <div class="name with_symbol dkblue">Right Foot</div>
 <div class="symbol infantry"></div>
 <div class="strength">6</div>
-<div class="dice_area">5/6<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">5/6</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -10024,7 +10107,8 @@ h1{color: white}
 <div class="name with_symbol pink">Charles Lorraine</div>
 <div class="symbol infantry"></div>
 <div class="strength">6</div>
-<div class="dice_area">5/6<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">5/6</div>
 <div class="action_row">
 <div class="action_type">Command</div>
 <div class="action_requirement">Two Pairs</div>
@@ -10107,7 +10191,8 @@ h1{color: white}
 <div class="name with_symbol red">Breysach</div>
 <div class="symbol infantry"></div>
 <div class="strength">6</div>
-<div class="dice_area">5/6<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">5/6</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -10149,7 +10234,8 @@ h1{color: white}
 <div class="name with_symbol pink">Althann</div>
 <div class="symbol cavalry"></div>
 <div class="strength">4</div>
-<div class="dice_area">5/6<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">5/6</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -10221,7 +10307,8 @@ h1{color: white}
 <div class="name with_symbol pink">Nadasdy</div>
 <div class="symbol infantry"></div>
 <div class="strength">8</div>
-<div class="dice_area">1/2<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">1/2</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -10241,7 +10328,8 @@ h1{color: white}
 <div class="name with_symbol red">Kheul</div>
 <div class="symbol infantry"></div>
 <div class="strength">8</div>
-<div class="dice_area">3/4<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">3/4</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -10261,7 +10349,8 @@ h1{color: white}
 <div class="name with_symbol red">Esterhazy</div>
 <div class="symbol infantry"></div>
 <div class="strength">8</div>
-<div class="dice_area">5/6<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">5/6</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
@@ -10536,7 +10625,8 @@ h1{color: white}
 <div class="symbol infantry"></div>
 <div class="strength">8</div>
 <div class="link right"></div>
-<div class="dice_area">5/6<div class="star">&#x2605;</div></div>
+<div class="star">&#x2605;</div>
+<div class="dice_area">5/6</div>
 <div class="action_row">
 <div class="action_type">Attack</div>
 <div class="action_requirement"></div>
diff --git a/play.js b/play.js
index 5b5566e..436dce6 100644
--- a/play.js
+++ b/play.js
@@ -179,9 +179,8 @@ function create_formation_card(id) {
 
 	if (card.dice) {
 		if (card.morale === 2)
-			append_div(e, "dice_area", card.dice + '<div class="star">&#x2605;</div>')
-		else
-			append_div(e, "dice_area", card.dice)
+			append_div(e, "star", '&#x2605;')
+		append_div(e, "dice_area", card.dice)
 	}
 
 	function create_action(a, ix) {
diff --git a/tools/gendata.js b/tools/gendata.js
index 1e73c07..283449d 100644
--- a/tools/gendata.js
+++ b/tools/gendata.js
@@ -117,9 +117,8 @@ for (let c of card_records) {
 
 	if (c.dice) {
 		if (card.morale === 2)
-			result.push(`<div class="dice_area">${c.dice}<div class="star">&#x2605;</div></div>`)
-		else
-			result.push(`<div class="dice_area">${c.dice}</div>`)
+			result.push(`<div class="star">&#x2605;</div>`)
+		result.push(`<div class="dice_area">${c.dice}</div>`)
 	}
 
 	function make_action(type, requirement, target, effect) {