Mobile layout (and changed default map size).

1 files changed, 61 insertions, 66 deletions

diff --git a/play.css b/play.css
index e556ccf..56ef381 100644
--- a/play.css
+++ b/play.css
@@ -23,18 +23,28 @@ body.United_States header.your_turn { background-color: skyblue; }
 	flex-wrap: wrap;
 	min-height: 300px;
 	justify-content: left;
-	max-width: 2476px;
-	margin: 15px auto;
-}
-
-.hand .card {
-	margin: 10px;
+	max-width: 1620px;
+	margin: 0 auto;
+	padding: 15px;
+	gap: 15px;
 }
 
 .hand_separator {
+	margin: 0 auto;
+	max-width: 1650px;
 	border-bottom: 2px dotted gainsboro;
 }
 
+@media (max-width: 800px) {
+	.hand, .hand_separator {
+		min-width: 1650px;
+	}
+}
+
+@media (max-height: 700px) {
+	.card_info { display: none }
+}
+
 body.Observer #hand_cards { display: none; }
 body.Observer .hand_separator { display: none; }
 
@@ -53,7 +63,7 @@ body.Observer .hand_separator { display: none; }
 	height: 350px;
 	border-radius: 12px;
 	display: none;
-	box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
+	box-shadow: 1px 1px 5px #0008;
 }
 
 .card.show {
@@ -92,9 +102,10 @@ body.Observer .hand_separator { display: none; }
 	padding: 4px;
 }
 
-#tooltip.card {
+#tooltip {
+	pointer-events: none;
 	position: fixed;
-	z-index: 100;
+	z-index: 600;
 	right: 240px;
 	top: 60px;
 }
@@ -102,19 +113,32 @@ body.Observer .hand_separator { display: none; }
 	display: block;
 }
 
+@media (max-width: 800px) {
+	#tooltip {
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		margin: auto;
+	}
+}
+
 /* MAP */
 
 #mapwrap {
-	box-shadow: 0px 0px 15px rgba(0,0,0,0.8);
-	width: 2476px;
-	height: 801px;
+	box-shadow: 0px 0px 15px #0008;
+	width: 1650px;
+	height: 532px;
+	margin-bottom: 5px;
 }
 
 #map {
 	display: block;
-	width: 2476px;
-	height: 801px;
+	width: 1650px;
+	height: 532px;
 	background-color: black;
+	background-image: url(map.jpg);
+	background-size: 1650px 532px;
 }
 
 svg {
@@ -136,7 +160,7 @@ svg circle, .piece {
 	pointer-events: none;
 	background-size: cover;
 	background-repeat: no-repeat;
-	filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.5));
+	filter: drop-shadow(0px 1px 3px #0008);
 }
 
 .piece.highlight {
@@ -146,20 +170,20 @@ svg circle, .piece {
 }
 
 .piece.damaged {
-	filter: brightness(60%) drop-shadow(1px 1px 4px rgba(0,0,0,0.5));
+	filter: brightness(60%) drop-shadow(0px 1px 3px #0008);
 }
 
-.piece.us_frigate { width: 42px; height: 29px; background-image: url("icons/us_frigate.svg"); }
-.piece.se_frigate { width: 42px; height: 29px; background-image: url("icons/se_frigate.svg"); }
-.piece.tr_frigate { width: 42px; height: 29px; background-image: url("icons/tr_frigate.svg"); }
-.piece.us_gunboat { width: 33px; height: 27px; background-image: url("icons/us_gunboat.svg"); }
-.piece.tr_corsair { width: 33px; height: 27px; background-image: url("icons/tr_corsair.svg"); }
-.piece.al_corsair { width: 33px; height: 27px; background-image: url("icons/al_corsair.svg"); }
-.piece.us_marine { width: 21px; height: 21px; background-image: url("icons/us_marine.svg"); }
-.piece.ar_infantry { width: 21px; height: 21px; background-image: url("icons/ar_infantry.svg"); }
-.piece.tr_infantry { width: 21px; height: 21px; background-image: url("icons/tr_infantry.svg"); }
-.piece.gold { width: 40px; height: 40px; background-image: url("icons/gold.png"); }
-.piece.marker { width: 50px; height: 50px; border-radius: 50%; background-color: #444; border: 2px solid black; }
+.piece.us_frigate { width: 29px; height: 20px; background-image: url("icons/us_frigate.svg"); }
+.piece.se_frigate { width: 29px; height: 20px; background-image: url("icons/se_frigate.svg"); }
+.piece.tr_frigate { width: 29px; height: 20px; background-image: url("icons/tr_frigate.svg"); }
+.piece.us_gunboat { width: 22px; height: 18px; background-image: url("icons/us_gunboat.svg"); }
+.piece.tr_corsair { width: 22px; height: 18px; background-image: url("icons/tr_corsair.svg"); }
+.piece.al_corsair { width: 22px; height: 18px; background-image: url("icons/al_corsair.svg"); }
+.piece.us_marine { width: 16px; height: 16px; background-image: url("icons/us_marine.svg"); }
+.piece.ar_infantry { width: 16px; height: 16px; background-image: url("icons/ar_infantry.svg"); }
+.piece.tr_infantry { width: 16px; height: 16px; background-image: url("icons/tr_infantry.svg"); }
+.piece.gold { width: 28px; height: 28px; background-image: url("icons/gold.png"); }
+.piece.marker { width: 34px; height: 34px; border-radius: 50%; background-color: #444; border: 2px solid black; }
 
 .harbor {
 	fill-opacity: 0;
@@ -196,47 +220,18 @@ svg circle, .piece {
 
 /* 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;
-}
-#popup div { padding: 3pt 8pt; color: gray; display: none; }
-#popup div.enabled { color: black; display: block; }
-#popup div.enabled:hover { background-color: teal; color: white; }
-#popup div.always { display: block; }
-body.Tripolitania #popup div.tr_always { display: block; }
-body.United_States #popup div.us_always { display: block; }
+#us_popup, #tr_popup { box-shadow: 0px 8px 16px 0px #0004; }
 
-/* MOBILE PHONE LAYOUT */
+#us_popup { background-color: hsl(207, 50%, 90%) }
+#us_popup li.title { background-color: hsl(207, 50%, 66%) }
+#us_popup li.action:hover { background-color: hsl(207, 50%, 26%) }
 
-@media (max-width: 640px) {
-	.hand .card {
-		width: 125px;
-		height: 175px;
-		border-radius: 6px;
-	}
-	.hand {
-		min-height: 125px;
-	}
-	.hand_separator {
-		display: none;
-	}
-	#core_cards {
-		background-color: darkslategray;
-	}
-	#tooltip.card {
-		top: 10px;
-		right: 10px;
-	}
-}
+#tr_popup { background-color: hsl(3, 50%, 90%) }
+#tr_popup li.title { background-color: hsl(3, 50%, 71%) }
+#tr_popup li.action:hover { background-color: hsl(3, 50%, 31%) }
+
+#us_popup li[data-action="card_take"].disabled { display: none }
+#tr_popup li[data-action="card_take"].disabled { display: none }
 
 /* CARD IMAGES */