1 files changed, 21 insertions, 20 deletions

diff --git a/play.css b/play.css
index 9b3d60c..d2c6c28 100644
--- a/play.css
+++ b/play.css
@@ -1,10 +1,13 @@
 main { background-color: slategray; }
 header { background-color: silver; }
+aside { background-color: #f5e8d7; }
 body.British header.your_turn { background-color: salmon; }
 body.American header.your_turn { background-color: skyblue; }
-aside { background-color: #f5e8d7; }
-.one .role_name { background-color: skyblue; }
-.two .role_name { background-color: salmon; }
+#role_American .role_name { background-color: skyblue; }
+#role_British .role_name { background-color: salmon; }
+.role_vp { float: right; }
+
+#log > div { padding-left: 20px; text-indent: -12px; }
 
 #log .h1 {
 	background-color: tan;
@@ -22,7 +25,7 @@ aside { background-color: #f5e8d7; }
 #log .h2.american { background-color: skyblue; }
 #log .h2.british { background-color: salmon; }
 
-#log .card_tip { text-decoration: dotted underline; }
+#log .card_tip:hover { text-decoration: dotted underline; }
 
 aside {
 	width: 230px;
@@ -42,22 +45,20 @@ aside {
 	margin: 5px auto;
 }
 
+.hand {
+	margin: 15px;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	min-height: 370px;
+	gap: 15px;
+}
+
 /* CARD ACTION POPUP MENU */
 
-#popup {
-	position: absolute;
-	user-select: none;
-	background-color: #ddd;
-	left: 10px;
-	top: 100px;
-	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3);
-	z-index: 100;
-	min-width: 20ex;
-	white-space: nowrap;
-}
-#popup div { padding: 3pt 8pt; display: none; }
-#popup div.enabled { padding: 3pt 8pt; display: block; }
-#popup div:hover { background-color: teal; color: white; }
+#popup { max-width: 250px; }
+#popup li.title { text-align: center }
+#popup li.disabled { display: none }
 
 /* MAP WITH MARKERS, CUs, LEADERS, AND SPACES */
 
@@ -160,7 +161,6 @@ aside {
 	line-height: 50px;
 	padding-left: 6px;
 	font-size: 30px;
-	user-select: none;
 	color: white;
 	text-shadow: 0px 0px 3px black;
 	font-weight: bold;
@@ -257,7 +257,8 @@ aside {
 
 .hand .card.enabled:hover, .hand .card.selected {
 	Xtransform: scale(1.5) translate(0,-30px);
-	transform: scale(1.1);
+	Xtransform: scale(1.1);
+	transform: translate(0,-10px);
 	z-index: 10;
 }