No card popup menu.

1 files changed, 37 insertions, 30 deletions

diff --git a/play.html b/play.html
index c722096..ea94d46 100644
--- a/play.html
+++ b/play.html
@@ -40,19 +40,25 @@ body.Versailles header.your_turn { background-color: skyblue; }
 /* PANELS */
 
 .panel_grid {
-	display: grid;
-	grid-template-columns: min-content 1fr;
-	max-width: 1500px;
-	margin: 18px auto;
-	gap: 18px;
+	display: flex;
+	flex-wrap: wrap;
+	margin: 20px auto;
+	justify-content: center;
+	gap: 20px;
 }
 
-#hand_panel {
-	grid-column: 1 / 3;
+#hand, #final, #discard, #objective, #set_aside {
+	min-height: 350px;
 }
 
-#objective {
-	min-width: 250px;
+#hand { min-width: 1060px }
+#final { min-width: 250px }
+#objective { min-width: 520px }
+#set_aside { min-width: 790px }
+#discard { min-width: 250px }
+
+#hand, #set_aside {
+	flex-grow: 1
 }
 
 .panel {
@@ -72,12 +78,11 @@ body.Versailles header.your_turn { background-color: skyblue; }
 	display: flex;
 	justify-content: start;
 	flex-wrap: wrap;
-	padding: 18px;
-	gap: 18px;
-	min-height: 350px;
+	padding: 20px;
+	gap: 20px;
 }
 
-body.Observer #final_panel { display: none }
+body.Observer #set_aside_panel { display: none }
 
 /* CARDS */
 
@@ -91,19 +96,6 @@ body.Observer #final_panel { display: none }
 	box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
 }
 
-.card_info {
-	padding: 12px 0;
-	border-bottom: 1px solid black;
-	background-color: gray;
-}
-
-.card_info .card {
-	margin: 0 auto;
-	width: 125px;
-	height: 175px;
-	border-radius: 8px;
-}
-
 #tooltip {
 	position: fixed;
 	z-index: 100;
@@ -143,6 +135,7 @@ body.Observer #final_panel { display: none }
 }
 
 .piece {
+	pointer-events: none;
 	position: absolute;
 	background-size: cover;
 	background-repeat: no-repeat;
@@ -153,6 +146,7 @@ body.Observer #final_panel { display: none }
 }
 
 .piece.action {
+	pointer-events: auto;
 	filter:
 		drop-shadow(0 -2px 0 white)
 		drop-shadow(0 2px 0 white)
@@ -164,6 +158,10 @@ body.Observer #final_panel { display: none }
 	box-shadow: 0 0 0 3px white;
 }
 
+.card.selected {
+	box-shadow: 0 0 0 3px yellow;
+}
+
 /* original size (72dpi?) */
 .piece.cube { width: 28px; height: 30px; }
 .piece.disc { width: 40px; height: 32px; }
@@ -404,7 +402,6 @@ body.Observer #final_panel { display: none }
 				<div class="role_user">-</div>
 			</div>
 		</div>
-		<div class="card_info"><div id="discarded_card" class="card card_strategy_back"></div></div>
 	</div>
 	<div id="log"></div>
 </aside>
@@ -431,14 +428,24 @@ body.Observer #final_panel { display: none }
 <div id="hand" class="panel_body"></div>
 </div>
 
+<div id="final_panel" class="panel">
+<div id="final_header" class="panel_header">Final</div>
+<div id="final" class="panel_body"></div>
+</div>
+
+<div id="discard_panel" class="panel">
+<div id="discard_header" class="panel_header">Discard</div>
+<div id="discard" class="panel_body"></div>
+</div>
+
 <div id="objective_panel" class="panel">
 <div id="objective_header" class="panel_header">Objective</div>
 <div id="objective" class="panel_body"></div>
 </div>
 
-<div id="final_panel" class="panel">
-<div id="final_header" class="panel_header">Set-aside cards</div>
-<div id="final" class="panel_body"></div>
+<div id="set_aside_panel" class="panel">
+<div id="set_aside_header" class="panel_header">Set-aside cards</div>
+<div id="set_aside" class="panel_body"></div>
 </div>
 
 </div>