1 files changed, 34 insertions, 55 deletions

diff --git a/play.css b/play.css
index b38db82..cb58ac6 100644
--- a/play.css
+++ b/play.css
@@ -45,12 +45,12 @@ body.Greece header.your_turn { background-color: salmon; }
 }
 
 .role_info {
-	padding: 10px 20px;
+	padding: 3px 18px;
 	background-color: gainsboro;
 	white-space: pre-wrap;
 }
 .card_info {
-	padding: 10px 20px;
+	padding: 3px 18px;
 	background-color: silver;
 }
 #deck_info {
@@ -68,13 +68,20 @@ body.Greece header.your_turn { background-color: salmon; }
 }
 
 .hand {
-	margin: 15px;
+	margin-top: 15px;
+	padding: 15px;
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: center;
 	min-height: 370px;
 }
 
+@media (max-width: 800px) {
+	.hand {
+		min-width: 1210px;
+	}
+}
+
 .hand .card {
 	margin: 10px;
 }
@@ -95,7 +102,7 @@ body.Greece header.your_turn { background-color: salmon; }
 }
 
 .card_info .card {
-	margin: 15px auto;
+	margin: 10px auto 5px auto;
 	width: 125px;
 	height: 175px;
 	border-radius: 10px;
@@ -105,54 +112,43 @@ body.Greece header.your_turn { background-color: salmon; }
 	border-bottom: 1px solid black;
 }
 
-#tooltip.card {
+#tooltip {
+	pointer-events: none;
 	position: fixed;
-	z-index: 200;
+	z-index: 600;
 	right: 230px;
 	top: 60px;
 }
 
-/* PHONE SIZE: squeeze side bar on small screens */
-
-#log_button { display: none }
-
-@media (max-height: 700px) {
-	.card_info .card {
-		margin: 0 auto;
-		width: 100px;
-		height: 140px;
-		border-radius: 5px;
+@media (max-width: 800px) {
+	#tooltip {
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		margin: auto;
 	}
-	.role_info { padding: 3px 20px; }
-	.card_info { padding: 5px 0px; }
-	#deck_info { padding-top: 5px; }
 }
 
-@media (max-width: 1200px) {
-	#prompt {
-		font-size: medium;
-		margin: 0 5px;
-	}
-	#log_button { display: block }
+@media (max-height: 700px) {
+	.card_info { padding: 3px 18px; }
+	.card_info .card { display: none; }
 }
 
 /* CARD ACTION POPUP MENU */
 
 #popup {
-	position: fixed;
-	user-select: none;
-	background-color: gainsboro;
-	left: 10px;
-	top: 100px;
-	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3);
-	z-index: 200;
-	min-width: 20ex;
-	white-space: nowrap;
-	display: none;
+	min-width: 150px;
+	box-shadow: 0px 8px 16px 0px #0004;
 }
-#popup div { padding: 3pt 8pt; color: gray; }
-#popup div.enabled { color: black; }
-#popup div.enabled:hover { background-color: teal; color: white; }
+
+body.Greece #popup { background-color: hsl(12, 40%, 93%) }
+body.Greece #popup li.title { color: black; background-color: hsl(12, 40%, 78%) }
+body.Greece #popup li.action:hover { background-color: hsl(12, 40%, 43%) }
+
+body.Persia #popup { background-color: hsl(216, 21%, 86%) }
+body.Persia #popup li.title { color: black; background-color: hsl(216, 21%, 71%) }
+body.Persia #popup li.action:hover { background-color: hsl(216, 21%, 31%) }
 
 /* MAP WITH ARMIES, FLEETS, AND MARKERS */
 
@@ -278,23 +274,6 @@ body.Greece header.your_turn { background-color: salmon; }
 	left: 932px; top: 655px;
 }
 
-/* MOBILE PHONE LAYOUT */
-
-@media (max-width: 640px) {
-	.hand .card {
-		width: 125px;
-		height: 175px;
-		border-radius: 6px;
-	}
-	.hand {
-		min-height: 125px;
-	}
-	#tooltip.card {
-		top: 10px;
-		right: 10px;
-	}
-}
-
 /* CARD IMAGES */
 
 .card_back { background-image: url('cards.1x/card_back.jpg'); }