Mobile layout.

1 files changed, 64 insertions, 36 deletions

diff --git a/play.css b/play.css
index fd7dd13..8f77a7c 100644
--- a/play.css
+++ b/play.css
@@ -42,12 +42,20 @@ body.Saracens header.your_turn { background-color: lightgreen; }
 }
 
 .hand {
-	margin: 25px;
+	margin: 0 auto;
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: center;
 	min-height: 348px;
 	gap: 16px;
+	min-width: 750px;
+	padding: 24px;
+}
+
+@media (max-width: 800px) {
+	.hand {
+		min-width: 1275px;
+	}
 }
 
 .card {
@@ -81,35 +89,46 @@ body.Saracens header.your_turn { background-color: lightgreen; }
 	filter: grayscale(100%) contrast(70%) brightness(120%);
 }
 
+
 .role_info {
-	overflow: clip; /* clip dropshadow from filter:grayscale() stacking context */
-	padding-top: 16px;
+	overflow: clip;
+	transition: height 100ms, padding 100ms;
+	height: 84px;
+	padding: 12px 0;
 }
 
 .role_info .card {
 	width: 168px;
 	height: 261px;
 	border-radius: 9px;
-	margin: 0 auto 16px auto;
+	margin: 0 auto;
 }
 
-.role_info .card:not(:hover) {
-	margin: 0 auto;
-	height: 96px;
-	border-bottom-right-radius: 0;
-	border-bottom-left-radius: 0;
+.role:hover .role_info {
+	height: 261px;
+}
+
+@media (max-height: 650px) {
+	.role:not(:hover) .role_info { display: none; }
+}
+
+@media (max-height: 800px) {
+	#turn_info { display: none; }
+	.role_info { height: 60px; padding: 8px 0; }
 }
 
 /* MAP */
 
-#mapwrap {
-	background-color: #224467;
-	box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
+#padmap {
+	margin: 0 auto;
 	width: 1275px;
 	height: 2475px;
+	padding: 0 24px;
 }
 
 #map {
+	margin: 0;
+	box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
 	width: 1275px;
 	height: 2475px;
 	background-color: #224467;
@@ -179,13 +198,14 @@ body.shift .block.known:hover {
 	z-index: 100;
 }
 
-#battle .block { position: relative; }
 #map .block { position: absolute; z-index: 2; }
 #map .block.highlight { z-index: 3; }
 #map .block.selected { z-index: 4; }
 #map .block.known { z-index: 5; }
 #map .block.known:hover { z-index: 6; }
 
+#battle .block { position: relative; }
+
 .block {
 	background-repeat: no-repeat;
 	border-radius: 6px;
@@ -272,33 +292,12 @@ body.shift .block.known:hover {
 	transition-timing-function: ease;
 }
 
-/* LANDSCAPE MAP */
-
-@media (min-width: 2000px) {
-	#mapwrap:not(.fit) {
-		box-shadow: 1px 0px 10px rgba(0,0,0,0.5);
-		height: 1275px;
-		width: 2475px;
-		margin-bottom: 40px;
-		margin-top: 30px;
-	}
-	#mapwrap:not(.fit) #map {
-		transform: translateY(1275px) rotate(-90deg);
-		transform-origin: 0 0;
-	}
-	body.shift #mapwrap:not(.fit) #map .block.known:hover {
-		transform: rotate(90deg) scale(2) !important;
-	}
-	#mapwrap:not(.fit) #map .block { transform: rotate(90deg); }
-	#mapwrap:not(.fit) #map .block.r1 { transform: rotate(0deg); }
-	#mapwrap:not(.fit) #map .block.r2 { transform: rotate(-90deg); }
-	#mapwrap:not(.fit) #map .block.r3 { transform: rotate(-180deg); }
-}
-
 /* BATTLE BOARD */
 
 #battle {
 	background-color: tan;
+	left: calc(90px + max(0px, calc(50% - (1275px + 48px) / 2)));
+	top: 320px;
 }
 #battle_message {
 	background-color: gainsboro;
@@ -350,6 +349,35 @@ body.shift .block.known:hover {
 #FC.c3, #EC.c3 { background-image: url('castle_3.svg'); width: 300px; }
 #FC.c4, #EC.c4 { background-image: url('castle_4.svg'); width: 380px; }
 
+/* LANDSCAPE MAP */
+
+@media (min-width: 2000px) {
+	#battle {
+		top: 745px;
+		left: calc(500px + max(0px, calc(50% - 2475px / 2)));
+	}
+	.hand {
+		width: 2475px;
+	}
+	#padmap {
+		height: 1275px;
+		width: 2475px;
+		padding: 24px 0;
+		overflow: clip;
+	}
+	#map {
+		transform: translateY(1275px) rotate(-90deg);
+		transform-origin: 0 0;
+	}
+	body.shift #padmap #map > .block.known:hover {
+		transform: rotate(90deg) scale(2) !important;
+	}
+	#blocks > .block { transform: rotate(90deg); }
+	#blocks > .block.r1 { transform: rotate(0deg); }
+	#blocks > .block.r2 { transform: rotate(-90deg); }
+	#blocks > .block.r3 { transform: rotate(-180deg); }
+}
+
 /* CARD AND BLOCK IMAGES */
 
 .card_back{background-image:url('cards/card_back.jpg')}