Clean up common play.css file.

New battle CSS.

1 files changed, 142 insertions, 100 deletions

diff --git a/play.css b/play.css
index 3cdf72a..e3ad8e3 100644
--- a/play.css
+++ b/play.css
@@ -6,8 +6,10 @@ body.Saracens header.your_turn { background-color: lightgreen; }
 #role_Franks .role_name { background-color: khaki; }
 #role_Saracens .role_name { background-color: darkseagreen; }
 #turn_info { background-color: gainsboro; }
+.role_vp { float: right; }
 
 #log { background-color: whitesmoke; }
+#log div { padding-left: 20px; text-indent: -12px; }
 #log .st { background-color: #246; color: white; font-weight: bold; }
 #log .F { background-color: khaki; }
 #log .S { background-color: darkseagreen; }
@@ -37,10 +39,21 @@ body.Saracens header.your_turn { background-color: lightgreen; }
 	font-family: "Source Serif SmText";
 }
 
+.hand {
+	margin: 25px;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	min-height: 348px;
+	gap: 16px;
+}
+
 .card {
-	width: 225px;
-	height: 350px;
-	border-radius: 15px;
+	background-size: cover;
+	background-repeat: no-repeat;
+	width: 224px;
+	height: 348px;
+	border-radius: 12px;
 	box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
 	transition: 100ms;
 	display: none;
@@ -51,26 +64,38 @@ body.Saracens header.your_turn { background-color: lightgreen; }
 }
 
 .card.enabled:hover {
-	transform: scale(1.1);
+	transform: translateY(-8px);
+}
+
+.card.enabled {
+	cursor: pointer;
+}
+
+.card.disabled {
+	filter: grayscale(100%);
 }
 
 .role_info .card.prior {
 	filter: grayscale(100%) contrast(70%) brightness(120%);
 }
 
-.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: 180px; height: 80px; border-radius: 10px 10px 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;
 }
 
 /* MAP */
@@ -85,8 +110,14 @@ body.Saracens header.your_turn { background-color: lightgreen; }
 #map {
 	width: 1275px;
 	height: 2475px;
-	background-repeat: no-repeat;
 	background-color: #224467;
+	background-repeat: no-repeat;
+	background-size: cover;
+}
+
+#map { background-image: url("map75.jpg") }
+@media (min-resolution: 97dpi) {
+	#map { background-image: url("map150.jpg") }
 }
 
 #map > * {
@@ -145,7 +176,6 @@ body.shift .block.known:hover {
 #map .block.known:hover { z-index: 6; }
 
 .block {
-	background-size: cover;
 	background-repeat: no-repeat;
 	border-radius: 6px;
 	width: 60px;
@@ -258,36 +288,37 @@ body.shift .block.known:hover {
 
 #battle {
 	background-color: tan;
-	min-width: 700px;
 }
 #battle_message {
 	background-color: gainsboro;
-	text-align: center;
-	border-top: 1px solid black;
 }
 #battle_header {
 	background-color: steelblue;
 	color: white;
-	text-align: center;
-	border-bottom: 1px solid black;
 }
-.battle_menu {
-	margin: 5px 5px;
+#FR, #ER {
+	background-color: #bda27e;
+	min-height: 0;
+}
+#EC .battle_menu_list {
+	display: none;
+}
+#FC {
+	margin: 0 auto 8px auto;
+	min-height: 100px;
+}
+#EC {
+	margin: 8px auto 0 auto;
+	min-height: 80px;
+}
+#FF, #EF {
+	min-height: 96px;
 }
-
-#FF, #FC, #FR, #EF, #EC, #ER { margin: 0px auto; padding: 5px; }
-#EC { margin-bottom: 10px; }
-#FC { margin-bottom: 5px; }
-body:not(.replay) #EC .battle_menu_list { min-height: 0; }
-body:not(.replay) #ER .battle_menu_list { min-height: 0; }
-body:not(.replay) #FR .battle_menu_list { min-height: 0; }
 
 #FC, #EC {
 	background-size: cover;
 	background-repeat: no-repeat;
-	padding: 0;
-	height: 107px;
-	padding-top: 33px;
+	padding: 33px 0 0 0;
 	border-bottom: 5px solid dimgray;
 	filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.5));
 	justify-content: left;
@@ -308,10 +339,6 @@ body:not(.replay) #FR .battle_menu_list { min-height: 0; }
 #FC.c3, #EC.c3 { background-image: url('castle_3.svg'); width: 300px; }
 #FC.c4, #EC.c4 { background-image: url('castle_4.svg'); width: 380px; }
 
-#FC, #EC, #FF, #EF { min-height: 107px; }
-#ER { min-height: 15px; }
-#FR { min-height: 15px; }
-
 /* CARD AND BLOCK IMAGES */
 
 .card_back{background-image:url('cards/card_back.jpg')}
@@ -325,66 +352,81 @@ body:not(.replay) #FR .battle_menu_list { min-height: 0; }
 .card_2{background-image:url('cards/card_2.jpg')}
 .card_3{background-image:url('cards/card_3.jpg')}
 
-.known.block_11{background-image:url(blocks/block_11.png)}
-.known.block_12{background-image:url(blocks/block_12.png)}
-.known.block_13{background-image:url(blocks/block_13.png)}
-.known.block_14{background-image:url(blocks/block_14.png)}
-.known.block_15{background-image:url(blocks/block_15.png)}
-.known.block_16{background-image:url(blocks/block_16.png)}
-.known.block_17{background-image:url(blocks/block_17.png)}
-.known.block_21{background-image:url(blocks/block_21.png)}
-.known.block_22{background-image:url(blocks/block_22.png)}
-.known.block_23{background-image:url(blocks/block_23.png)}
-.known.block_24{background-image:url(blocks/block_24.png)}
-.known.block_25{background-image:url(blocks/block_25.png)}
-.known.block_26{background-image:url(blocks/block_26.png)}
-.known.block_27{background-image:url(blocks/block_27.png)}
-.known.block_31{background-image:url(blocks/block_31.png)}
-.known.block_32{background-image:url(blocks/block_32.png)}
-.known.block_33{background-image:url(blocks/block_33.png)}
-.known.block_34{background-image:url(blocks/block_34.png)}
-.known.block_35{background-image:url(blocks/block_35.png)}
-.known.block_36{background-image:url(blocks/block_36.png)}
-.known.block_37{background-image:url(blocks/block_37.png)}
-.known.block_41{background-image:url(blocks/block_41.png)}
-.known.block_42{background-image:url(blocks/block_42.png)}
-.known.block_43{background-image:url(blocks/block_43.png)}
-.known.block_44{background-image:url(blocks/block_44.png)}
-.known.block_45{background-image:url(blocks/block_45.png)}
-.known.block_46{background-image:url(blocks/block_46.png)}
-.known.block_47{background-image:url(blocks/block_47.png)}
-.known.block_51{background-image:url(blocks/block_51.png)}
-.known.block_52{background-image:url(blocks/block_52.png)}
-.known.block_53{background-image:url(blocks/block_53.png)}
-.known.block_54{background-image:url(blocks/block_54.png)}
-.known.block_55{background-image:url(blocks/block_55.png)}
-.known.block_56{background-image:url(blocks/block_56.png)}
-.known.block_57{background-image:url(blocks/block_57.png)}
-.known.block_61{background-image:url(blocks/block_61.png)}
-.known.block_62{background-image:url(blocks/block_62.png)}
-.known.block_63{background-image:url(blocks/block_63.png)}
-.known.block_64{background-image:url(blocks/block_64.png)}
-.known.block_65{background-image:url(blocks/block_65.png)}
-.known.block_66{background-image:url(blocks/block_66.png)}
-.known.block_67{background-image:url(blocks/block_67.png)}
-.known.block_71{background-image:url(blocks/block_71.png)}
-.known.block_72{background-image:url(blocks/block_72.png)}
-.known.block_73{background-image:url(blocks/block_73.png)}
-.known.block_74{background-image:url(blocks/block_74.png)}
-.known.block_75{background-image:url(blocks/block_75.png)}
-.known.block_76{background-image:url(blocks/block_76.png)}
-.known.block_77{background-image:url(blocks/block_77.png)}
-.known.block_81{background-image:url(blocks/block_81.png)}
-.known.block_82{background-image:url(blocks/block_82.png)}
-.known.block_83{background-image:url(blocks/block_83.png)}
-.known.block_84{background-image:url(blocks/block_84.png)}
-.known.block_85{background-image:url(blocks/block_85.png)}
-.known.block_86{background-image:url(blocks/block_86.png)}
-.known.block_87{background-image:url(blocks/block_87.png)}
-.known.block_91{background-image:url(blocks/block_91.png)}
-.known.block_92{background-image:url(blocks/block_92.png)}
-.known.block_93{background-image:url(blocks/block_93.png)}
-.known.block_94{background-image:url(blocks/block_94.png)}
-.known.block_95{background-image:url(blocks/block_95.png)}
-.known.block_96{background-image:url(blocks/block_96.png)}
-.known.block_97{background-image:url(blocks/block_97.png)}
+.known.block.Franks{
+	background-image: url(blocks_franks.png);
+	background-size: 800% 400%;
+}
+
+.known.block.Saracens{
+	background-image: url(blocks_saracens.png);
+	background-size: 800% 400%;
+}
+
+.known.block.Assassins{
+	background-image: url(blocks_assassins.png);
+	background-size: 100%;
+}
+
+.known.block_11{background-position:0px 0px}
+.known.block_12{background-position:-60px 0px}
+.known.block_13{background-position:-120px 0px}
+.known.block_14{background-position:-180px 0px}
+.known.block_15{background-position:-240px 0px}
+.known.block_16{background-position:-300px 0px}
+.known.block_17{background-position:-360px 0px}
+.known.block_21{background-position:-420px 0px}
+.known.block_22{background-position:0px -60px}
+.known.block_23{background-position:-60px -60px}
+.known.block_24{background-position:-120px -60px}
+.known.block_25{background-position:-180px -60px}
+.known.block_26{background-position:-240px -60px}
+.known.block_27{background-position:-300px -60px}
+.known.block_31{background-position:-360px -60px}
+.known.block_32{background-position:-420px -60px}
+.known.block_33{background-position:0px -120px}
+.known.block_34{background-position:-60px -120px}
+.known.block_35{background-position:-120px -120px}
+.known.block_36{background-position:-180px -120px}
+.known.block_37{background-position:-240px -120px}
+.known.block_41{background-position:-300px -120px}
+.known.block_42{background-position:-360px -120px}
+.known.block_43{background-position:-420px -120px}
+.known.block_44{background-position:0px -180px}
+.known.block_45{background-position:-60px -180px}
+.known.block_46{background-position:-120px -180px}
+.known.block_47{background-position:-180px -180px}
+.known.block_51{background-position:-240px -180px}
+.known.block_52{background-position:-300px -180px}
+.known.block_53{background-position:-360px -180px}
+
+.known.block_55{background-position:0px 0px}
+.known.block_56{background-position:-60px 0px}
+.known.block_57{background-position:-120px 0px}
+.known.block_61{background-position:-180px 0px}
+.known.block_62{background-position:-240px 0px}
+.known.block_63{background-position:-300px 0px}
+.known.block_64{background-position:-360px 0px}
+.known.block_65{background-position:-420px 0px}
+.known.block_66{background-position:0px -60px}
+.known.block_67{background-position:-60px -60px}
+.known.block_71{background-position:-120px -60px}
+.known.block_72{background-position:-180px -60px}
+.known.block_73{background-position:-240px -60px}
+.known.block_74{background-position:-300px -60px}
+.known.block_75{background-position:-360px -60px}
+.known.block_76{background-position:-420px -60px}
+.known.block_77{background-position:0px -120px}
+.known.block_81{background-position:-60px -120px}
+.known.block_82{background-position:-120px -120px}
+.known.block_83{background-position:-180px -120px}
+.known.block_84{background-position:-240px -120px}
+.known.block_85{background-position:-300px -120px}
+.known.block_86{background-position:-360px -120px}
+.known.block_87{background-position:-420px -120px}
+.known.block_91{background-position:0px -180px}
+.known.block_92{background-position:-60px -180px}
+.known.block_93{background-position:-120px -180px}
+.known.block_94{background-position:-180px -180px}
+.known.block_95{background-position:-240px -180px}
+.known.block_96{background-position:-300px -180px}
+.known.block_97{background-position:-360px -180px}