1 files changed, 47 insertions, 14 deletions

diff --git a/play.css b/play.css
index a81f79b..c060369 100644
--- a/play.css
+++ b/play.css
@@ -1,5 +1,9 @@
 /* MAIN */
 
+html {
+	image-rendering: -webkit-optimize-contrast; /* try to fix chromium's terrible image rescaling */
+}
+
 main { background-color: #461145; }
 #roles { background-color: tan; }
 header { background-color: tan; }
@@ -7,8 +11,10 @@ header.your_turn { background-color: orange; }
 #role_Caesar .role_name { background-color: salmon; }
 #role_Pompeius .role_name { background-color: #eb5; }
 #turn_info { background-color: burlywood; }
+.role_vp { float: right; }
 
 #log { background-color: wheat; }
+#log div { padding-left: 20px; text-indent: -12px; }
 #log .st { background-color: brown; color: gold; font-weight: bold; }
 #log .C { background-color: salmon; }
 #log .P { background-color: #eb5; }
@@ -17,6 +23,15 @@ header.your_turn { background-color: orange; }
 
 /* CARDS */
 
+.hand {
+	margin: 25px;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	min-height: 348px;
+	gap: 16px;
+}
+
 .card_back { background-image: url('cards/card_back.jpg'); }
 .card_apollo { background-image: url('cards/card_apollo.jpg'); }
 .card_jupiter { background-image: url('cards/card_jupiter.jpg'); }
@@ -35,9 +50,11 @@ header.your_turn { background-color: orange; }
 .card_41 { background-image: url('cards/card_41.jpg'); }
 
 .card {
+	background-size: cover;
+	background-repeat: no-repeat;
 	background-color: white;
-	width: 225px;
-	height: 350px;
+	width: 224px;
+	height: 348px;
 	border-radius: 12px;
 	box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
 	transition: 100ms;
@@ -49,7 +66,15 @@ header.your_turn { background-color: orange; }
 }
 
 .card.enabled:hover {
-	transform: scale(1.1);
+	transform: translateY(-8px);
+}
+
+.card.enabled {
+	cursor: pointer;
+}
+
+.card.disabled {
+	filter: grayscale(100%);
 }
 
 .card.prior {
@@ -60,19 +85,23 @@ header.your_turn { background-color: orange; }
 	background-color: #822c1f;
 }
 
-.role_info { padding: 15px; }
-.role_info .card { margin: 0 auto; }
-.role_info .card { width: 90px; height: 140px; border-radius: 5px; }
-.role_info .card:hover { width: 180px; height: 280px; border-radius: 10px; }
+.role_info {
+	overflow: clip; /* clip dropshadow from filter:grayscale() stacking context */
+	padding-top: 16px;
+}
 
-@media (max-height: 800px) {
-	.role_info { padding: 15px 0 0 0; }
-	.role_info .card { width: 135px; height: 80px; border-radius: 8px 8px 0 0; }
-	.role_info .card:hover { width: 180px; height: 280px; border-radius: 10px; margin-bottom: 15px; }
+.role_info .card {
+	width: 168px;
+	height: 261px;
+	border-radius: 9px;
+	margin: 0 auto 16px auto;
 }
 
-@media (min-height: 1200px) {
-	.role_info .card { width: 180px; height: 280px; border-radius: 10px; }
+.role_info .card:not(:hover) {
+	margin: 0 auto;
+	height: 96px;
+	border-bottom-right-radius: 0;
+	border-bottom-left-radius: 0;
 }
 
 /* BATTLE BOARD */
@@ -100,10 +129,14 @@ body:not(.replay) .battle_line.enemy .battle_menu_list { min-height: 0; }
 #map {
 	width: 2475px;
 	height: 1275px;
-	background-image: url("map.jpg");
 	background-size: cover;
 }
 
+#map { background-image: url("map75.jpg") }
+@media (min-resolution: 97dpi) {
+	#map { background-image: url("map150.jpg") }
+}
+
 #turn {
 	position: absolute;
 	width: 75px;