Highlight sticks to die.

1 files changed, 8 insertions, 3 deletions

diff --git a/play.html b/play.html
index 28f7d30..ba7f5f4 100644
--- a/play.html
+++ b/play.html
@@ -116,13 +116,12 @@ main[data-scenario="5"] {
 
 .flip .slot_sticks {
 	justify-content: start;
+	flex-direction: column-reverse;
 }
 .flip .slot_cubes {
 	align-content: start;
 }
 
-.table_reserve .slot_sticks { display: none }
-.table_reserve .slot_cubes { display: none }
 .table_reserve .slot_dice { display: none }
 
 .stick {
@@ -148,6 +147,10 @@ main[data-scenario="5"] {
 	--lo-pink: hsl(359, 81%, 68%);
 	--lo-blue: hsl(211, 78%, 42%);
 	--lo-dkblue: hsl(240, 69%, 47%);
+
+	--gray: hsl(0, 0%, 90%);
+	--lo-gray: hsl(0, 0%, 75%);
+	--hi-gray: hsl(0, 0%, 100%);
 }
 
 .red .stick { background-color: var(--red); }
@@ -160,6 +163,8 @@ main[data-scenario="5"] {
 .blue .stick { border-color: var(--hi-blue) var(--lo-blue) var(--lo-blue) var(--hi-blue); }
 .dkblue .stick { border-color: var(--hi-dkblue) var(--lo-dkblue) var(--lo-dkblue) var(--hi-dkblue); }
 
+.hit.stick { background-color: var(--gray); border-color: var(--hi-gray) var(--lo-gray) var(--lo-gray) var(--hi-gray); }
+
 .table_pool {
 	margin: 12px;
 	height: 36px;
@@ -238,9 +243,9 @@ main[data-scenario="5"] {
 }
 
 .die.action { box-shadow: 0 0 0 1px #333, 0 0 0px 3px white; }
-.card.action { box-shadow: 0 0 0 3px whitesmoke; }
 .card.selected { box-shadow: 0 0 0px 3px gold; }
 .card.target { box-shadow: 0 0 0px 3px black; }
+.card.action { box-shadow: 0 0 0 3px whitesmoke; }
 
 .action_type.action {
 	border-color: white;