x

1 files changed, 41 insertions, 13 deletions

diff --git a/play.html b/play.html
index 86f9599..b8de55f 100644
--- a/play.html
+++ b/play.html
@@ -92,14 +92,12 @@ main {
 .table_reserve, .table_front, .table_pool {
 	display: flex;
 	justify-content: center;
-	align-items: start;
 	gap: 24px;
 	padding: 0 23px;
 }
 
-.flip .table_reserve, .flip .table_front {
-	align-items: end;
-}
+.table_reserve, .table_front { align-items: start; }
+.flip .table_reserve, .flip .table_front { align-items: end; }
 
 .table_front {
 	min-height: 509px;
@@ -130,14 +128,23 @@ main {
 [data-card="237A"] .slot_sticks { height: 55px; }
 
 .slot_sticks {
+	margin: 12px;
 	min-height: 87px;
+}
+
+.slot_sticks {
 	display: flex;
 	flex-direction: column;
 	justify-content: end;
-	align-content: center;
-	flex-wrap: wrap;
+	align-items: center;
+	gap: 1px;
+}
+
+GRID.slot_sticks {
+	display: grid;
+	grid-template-rows: repeat(8, 10px);
+	grid-auto-flow: column;
 	gap: 1px;
-	margin: 12px;
 }
 
 .slot_shift {
@@ -145,8 +152,7 @@ main {
 	display: flex;
 	flex-direction: column;
 	justify-content: end;
-	align-content: center;
-	flex-wrap: wrap;
+	align-items: center;
 	gap: 1px;
 	margin: 12px;
 }
@@ -160,7 +166,7 @@ main {
 	height: 36px;
 	flex-direction: row;
 	justify-content: center;
-	align-content: end;
+	align-ntems: end;
 	flex-wrap: wrap;
 	gap: 6px;
 	margin: 12px 0;
@@ -170,18 +176,40 @@ main {
 	justify-content: start;
 	flex-direction: column-reverse;
 }
+
 .flip .slot_cubes {
-	align-content: start;
+	align-items: start;
 }
 
 .stick {
-	width: 200px;
+	width: 90%;
+	//margin: 0 auto;
 	height: 6px;
 	border: 2px solid black;
 	box-shadow: 0 0 0 1px #0008, 1px 1px 3px 1px #0004;
-	Xbox-shadow: 1px 1px 3px 0px #0004;
 }
 
+/*
+.slot_sticks { flex-wrap: wrap; }
+.stick:first-child:nth-last-child(8) { width: 45%; }
+.stick:first-child:nth-last-child(9) { width: 45%; }
+.stick:first-child:nth-last-child(10) { width: 45%; }
+.stick:first-child:nth-last-child(11) { width: 45%; }
+.stick:first-child:nth-last-child(12) { width: 45%; }
+.stick:first-child:nth-last-child(13) { width: 45%; }
+.stick:first-child:nth-last-child(14) { width: 45%; }
+.stick:first-child:nth-last-child(15) { width: 45%; }
+.stick:first-child:nth-last-child(16) { width: 45%; }
+.stick:first-child:nth-last-child(9) ~ .stick { width: 45%; }
+.stick:first-child:nth-last-child(10) ~ .stick { width: 45%; }
+.stick:first-child:nth-last-child(11) ~ .stick { width: 45%; }
+.stick:first-child:nth-last-child(12) ~ .stick { width: 45%; }
+.stick:first-child:nth-last-child(13) ~ .stick { width: 45%; }
+.stick:first-child:nth-last-child(14) ~ .stick { width: 45%; }
+.stick:first-child:nth-last-child(15) ~ .stick { width: 45%; }
+.stick:first-child:nth-last-child(16) ~ .stick { width: 45%; }
+*/
+
 :root {
 	--red: hsl(360, 77%, 51%);
 	--pink: hsl(359, 81%, 78%);