Simplify styles and html for play.html

Change font css link.

Clean up common play.css file.

Mobile layout.

1 files changed, 327 insertions, 0 deletions

diff --git a/play.css b/play.css
new file mode 100644
index 0000000..879cfba
--- /dev/null
+++ b/play.css
@@ -0,0 +1,327 @@
+main { background-color: slategray; }
+aside { background-color: gainsboro; }
+header { background-color: silver; }
+body.Persia header.your_turn { background-color: skyblue; }
+body.Greece header.your_turn { background-color: salmon; }
+.role_info { background-color: silver; }
+.one .role_name { background-color: salmon; }
+.two .role_name { background-color: skyblue; }
+
+#log {
+	background-color: gainsboro;
+}
+
+#log div {
+	padding-left: 20px;
+	text-indent: -12px;
+}
+
+#log .tip {
+	cursor: help;
+	text-decoration: dotted underline;
+}
+
+#log .st {
+	font-weight: bold;
+	background-color: gray;
+	color: white;
+	text-align: center;
+	padding: 3px;
+}
+
+#log .hr {
+	border-top: 1px solid darkgray;
+	padding-top: 9px;
+}
+
+#log .G { color: #c00; }
+#log .P { color: #00e; }
+
+#hand.greek {
+	background-color: rosybrown;
+	border-radius: 10px;
+}
+
+.role_info {
+	padding: 10px 20px;
+	background-color: gainsboro;
+	white-space: pre-wrap;
+}
+.card_info {
+	padding: 10px 20px;
+	background-color: silver;
+}
+#deck_info {
+	text-align: center;
+}
+
+/* CARDS */
+
+.card.enabled {
+	cursor: pointer;
+}
+
+.card.disabled {
+	filter: grayscale(100%);
+}
+
+.hand {
+	margin: 15px;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	min-height: 370px;
+}
+
+.hand .card {
+	margin: 10px;
+}
+
+.card {
+	background-size: cover;
+	background-repeat: no-repeat;
+	background-color: #f0e0d0;
+	width: 250px;
+	height: 350px;
+	border-radius: 12px;
+}
+
+.card_info .card {
+	margin: 15px auto;
+	width: 125px;
+	height: 175px;
+	border-radius: 10px;
+}
+
+.role_info, .card_info {
+	border-bottom: 1px solid black;
+}
+
+#tooltip.card {
+	position: fixed;
+	z-index: 200;
+	right: 230px;
+	top: 60px;
+}
+
+/* PHONE SIZE: squeeze side bar on small screens */
+
+#log_button { display: none }
+
+@media (max-height: 700px) {
+	.card_info .card {
+		margin: 0 auto;
+		width: 100px;
+		height: 140px;
+		border-radius: 5px;
+	}
+	.role_info { padding: 3px 20px; }
+	.card_info { padding: 5px 0px; }
+	#deck_info { padding-top: 5px; }
+}
+
+@media (max-width: 1200px) {
+	#prompt {
+		font-size: medium;
+		margin: 0 5px;
+	}
+	#log_button { display: block }
+}
+
+/* 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; }
+#popup div.enabled { color: black; }
+#popup div.enabled:hover { background-color: teal; color: white; }
+
+/* MAP WITH ARMIES, FLEETS, AND MARKERS */
+
+#map.greek, #map.greek > div {
+	transform: rotate(180deg);
+	transform-origin: center;
+}
+
+#map {
+	width: 1240px;
+	height: 878px;
+	background-size: cover;
+	box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
+	margin: 0 auto;
+}
+
+#map { background-image: url("map75.webp") }
+@media (min-resolution: 97dpi) {
+	#map { background-image: url("map150.webp") }
+}
+
+#map.hide_markers > div {
+	visibility: hidden;
+}
+
+.port {
+	position: absolute;
+	border-radius: 50%;
+	z-index: 1;
+}
+.port.enabled {
+	box-shadow: 0 0 20px 2px white, inset 0 0 5px 2px white;
+	z-index: 3;
+}
+
+.persian_city {
+	position: absolute;
+	border-radius: 50%;
+	z-index: 4;
+}
+.persian_city.enabled {
+	box-shadow: 0 0 10px 2px white, inset 0 0 5px 2px white;
+	z-index: 100;
+}
+
+.greek_city {
+	position: absolute;
+	border-radius: 5px;
+	z-index: 4;
+}
+.greek_city.enabled {
+	box-shadow: 0 0 10px 4px white, inset 0 0 5px 4px white;
+	z-index: 100;
+}
+
+.greek_army, .greek_fleet, .persian_army, .persian_fleet, .marker {
+	transition-property: top, left, transform;
+	transition-duration: 700ms;
+	transition-timing-function: ease;
+	z-index: 2;
+}
+
+.greek_army, .greek_fleet, .persian_army, .persian_fleet, .marker, #bridge {
+	position: absolute;
+	display: none;
+	background-repeat: no-repeat;
+	background-size: cover;
+}
+
+.marker { background-image: url("icons/black_cube.png"); }
+.greek_army { background-image: url("icons/red_cube.png"); }
+.greek_fleet { background-image: url("icons/red_disk.png"); }
+.persian_army { background-image: url("icons/blue_cube.png"); }
+.persian_fleet { background-image: url("icons/blue_disk.png"); }
+.greek_army, .persian_army, .marker { width: 22px; height: 26px; }
+.greek_fleet, .persian_fleet { width: 26px; height: 20px; }
+
+.campaign_1 { left: 1074px; top: 368px; }
+.campaign_2 { left: 1077px; top: 402px; }
+.campaign_3 { left: 1078px; top: 435px; }
+.campaign_4 { left: 1077px; top: 467px; }
+.campaign_5 { left: 1072px; top: 501px; }
+.vp_g6 { left: 181px; top: 228px; }
+.vp_g5 { left: 168px; top: 259px; }
+.vp_g4 { left: 157px; top: 291px; }
+.vp_g3 { left: 148px; top: 323px; }
+.vp_g2 { left: 142px; top: 357px; }
+.vp_g1 { left: 138px; top: 389px; }
+.vp_0 { left: 138px; top: 425px; }
+.vp_p1 { left: 138px; top: 460px; }
+.vp_p2 { left: 142px; top: 493px; }
+.vp_p3 { left: 148px; top: 526px; }
+.vp_p4 { left: 157px; top: 559px; }
+.vp_p5 { left: 168px; top: 590px; }
+.vp_p6 { left: 181px; top: 622px; }
+
+.greek_fleet.show, .persian_fleet.show, .greek_army.show, .persian_army.show, .marker.show, #bridge.show {
+	display: block;
+	filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.5));
+}
+
+.greek_fleet.selected, .persian_fleet.selected, .greek_army.selected, .persian_army.selected {
+	filter: brightness(150%) drop-shadow(0 0 3px white);
+}
+#bridge.destroy {
+	filter: brightness(150%) drop-shadow(0 0 10px skyblue);
+}
+#bridge.build {
+	filter: brightness(150%) drop-shadow(0 0 10px white);
+	opacity: 0.5;
+}
+
+#darius { left: 77px; top: 562px; }
+#xerxes { left: 61px; top: 717px; }
+#artemisia { left: 167px; top: 799px; }
+#miltiades { left: 1179px; top: 305px; }
+#themistocles { left: 1156px; top: 153px; }
+#leonidas { left: 1068px; top: 41px; }
+#bridge {
+	background-image: url("icons/bridge.png");
+	width: 48px; height: 36px;
+	left: 932px; top: 655px;
+}
+
+/* MOBILE PHONE LAYOUT */
+
+@media (max-width: 640px) {
+	.hand .card {
+		width: 125px;
+		height: 175px;
+		border-radius: 6px;
+	}
+	.hand {
+		min-height: 125px;
+	}
+	#tooltip.card {
+		top: 10px;
+		right: 10px;
+	}
+}
+
+/* CARD IMAGES */
+
+.card_back { background-image: url('cards.1x/card_back.webp'); }
+.card_1 { background-image: url('cards.1x/card_en_01.webp'); }
+.card_2 { background-image: url('cards.1x/card_en_02.webp'); }
+.card_3 { background-image: url('cards.1x/card_en_03.webp'); }
+.card_4 { background-image: url('cards.1x/card_en_04.webp'); }
+.card_5 { background-image: url('cards.1x/card_en_05.webp'); }
+.card_6 { background-image: url('cards.1x/card_en_06.webp'); }
+.card_7 { background-image: url('cards.1x/card_en_07.webp'); }
+.card_8 { background-image: url('cards.1x/card_en_08.webp'); }
+.card_9 { background-image: url('cards.1x/card_en_09.webp'); }
+.card_10 { background-image: url('cards.1x/card_en_10.webp'); }
+.card_11 { background-image: url('cards.1x/card_en_11.webp'); }
+.card_12 { background-image: url('cards.1x/card_en_12.webp'); }
+.card_13 { background-image: url('cards.1x/card_en_13.webp'); }
+.card_14 { background-image: url('cards.1x/card_en_14.webp'); }
+.card_15 { background-image: url('cards.1x/card_en_15.webp'); }
+.card_16 { background-image: url('cards.1x/card_en_16.webp'); }
+
+@media (min-resolution: 97dpi) {
+.card_back { background-image: url('cards.2x/card_back.webp'); }
+.card_1 { background-image: url('cards.2x/card_en_01.webp'); }
+.card_2 { background-image: url('cards.2x/card_en_02.webp'); }
+.card_3 { background-image: url('cards.2x/card_en_03.webp'); }
+.card_4 { background-image: url('cards.2x/card_en_04.webp'); }
+.card_5 { background-image: url('cards.2x/card_en_05.webp'); }
+.card_6 { background-image: url('cards.2x/card_en_06.webp'); }
+.card_7 { background-image: url('cards.2x/card_en_07.webp'); }
+.card_8 { background-image: url('cards.2x/card_en_08.webp'); }
+.card_9 { background-image: url('cards.2x/card_en_09.webp'); }
+.card_10 { background-image: url('cards.2x/card_en_10.webp'); }
+.card_11 { background-image: url('cards.2x/card_en_11.webp'); }
+.card_12 { background-image: url('cards.2x/card_en_12.webp'); }
+.card_13 { background-image: url('cards.2x/card_en_13.webp'); }
+.card_14 { background-image: url('cards.2x/card_en_14.webp'); }
+.card_15 { background-image: url('cards.2x/card_en_15.webp'); }
+.card_16 { background-image: url('cards.2x/card_en_16.webp'); }
+}