Mobile layout.

2 files changed, 25 insertions, 0 deletions

diff --git a/play.css b/play.css
index e9e08e3..e556ccf 100644
--- a/play.css
+++ b/play.css
@@ -215,6 +215,29 @@ svg circle, .piece {
 body.Tripolitania #popup div.tr_always { display: block; }
 body.United_States #popup div.us_always { display: block; }
 
+/* MOBILE PHONE LAYOUT */
+
+@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;
+	}
+}
+
 /* CARD IMAGES */
 
 .card {
diff --git a/play.html b/play.html
index 7c9f37a..bc37b60 100644
--- a/play.html
+++ b/play.html
@@ -27,6 +27,7 @@
 </div>
 
 <header>
+	<div id="toolbar">
 	<div class="menu">
 		<div class="menu_title"><img src="/images/cog.svg"></div>
 		<div class="menu_popup">
@@ -42,6 +43,7 @@
 		</div>
 	</div>
 	<div class="icon_button" onclick="toggle_zoom()"><img src="/images/magnifying-glass.svg"></div>
+	</div>
 	<div id="prompt"></div>
 	<div id="actions"></div>
 </header>