From dba108ef04df0e0d606b12bd69070440a5c2ce7e Mon Sep 17 00:00:00 2001
From: iainp5 <iain.pearce.ip@gmail.com>
Date: Fri, 16 Aug 2024 08:40:18 +0100
Subject: Update play.css

---
 play.css | 371 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 352 insertions(+), 19 deletions(-)

(limited to 'play.css')

diff --git a/play.css b/play.css
index c7d6b63..4b72feb 100644
--- a/play.css
+++ b/play.css
@@ -3,7 +3,13 @@ header { background-color: silver; }
 header.your_turn { background-color: orange; }
 #role_Dem { background-color: hsl(210,30%,80%); }
 #role_Com { background-color: hsl(35,40%,80%); }
-#turn_info { background-color: gray; }
+#turn_info { background-color: white; }
+.aside_events {
+	font-family: "Source Sans";
+	font-style: normal;
+	font-size: 16px;
+	line-height: 1.5;
+}
 
 #log { background-color: whitesmoke; }
 #log .h1 { font-weight: bold; padding-top:2px; padding-bottom:2px; text-align: center; }
@@ -23,11 +29,14 @@ header.your_turn { background-color: orange; }
 #log div.i { padding-left: 32px; text-indent: -12px; }
 #log div.ii { padding-left: 44px; text-indent: -12px; }
 
-/*Below needs updating 
-#log .card_tip { font-style: italic; }
-#log .card_tip:hover { text-decoration: underline; }
+
+#log .card_name { font-style: italic; }
+#log .card_name:hover { text-decoration: underline; }
+#log .space_tip:hover { cursor: pointer; text-decoration: underline; }
+
+/* Below currently not used
 #log .lord_tip:hover { cursor: pointer; text-decoration: underline; }
-#log .locale_tip:hover { cursor: pointer; text-decoration: underline; }
+
 #log .way_tip:hover { cursor: pointer; text-decoration: underline; } */
 
 .selected {
@@ -92,6 +101,44 @@ header.your_turn { background-color: orange; }
 	border: transparent red 2px;
 }
 
+/* PANELS AND HANDS */
+
+.panel {
+	background-color: #555;
+}
+
+.panel_header {
+	background-color: #444;
+	color: hsl(40, 60%, 90%);
+	font-weight: bold;
+	text-align: center;
+	padding: 3px 1em;
+}
+
+#events_panel, #played_card_panel  {
+	min-width: 200px;
+	width: auto;
+	display: inline-block;
+	margin: 10px;
+	border-radius: 5px;
+}
+
+#discard_panel {
+	min-width: 200px;
+	width: auto;
+	display: inline-block;
+	margin: 10px;
+	border-radius: 5px;
+}
+
+#discard_panel.hide {
+	display: none;
+}
+
+#hand_panel {
+	margin: 10px;
+	border-radius: 5px;
+}
 
 /* INFLUENCE MARKERS */
 
@@ -164,6 +211,25 @@ header.your_turn { background-color: orange; }
 	left: 74px;
 }
 
+.comInflValue.controlled, .held {
+	color: whitesmoke;
+	text-shadow: 
+        1px 1px 0 #c2272d, /* Right bottom */
+        -1px 1px 0 #c2272d, /* Left bottom */
+        1px -1px 0 #c2272d, /* Right top */
+        -1px -1px 0 #c2272d; /* Left top */
+}
+
+.comInflValue.uncontrolled {
+	color: #c2272d;
+	text-shadow: 
+	1px 1px 0 #ffffff, /* Right bottom */
+	-1px 1px 0 #ffffff, /* Left bottom */
+	1px -1px 0 #ffffff, /* Right top */
+	-1px -1px 0 #ffffff; /* Left top */
+}
+
+
 /* GAME MARKERS */
 
 .t0 {left: 511px}
@@ -207,14 +273,22 @@ header.your_turn { background-color: orange; }
 	background-size: cover;
 }
 
+
+
 #stability-track {
 	position:absolute;
-	top: 853px;
 	left: 1085px;
 	height: 35px;
 	width: 35px;
 }
 
+.s0 {top: 853px}
+.s1 {top: 896px}
+.s2 {top: 939px}
+.s5 {top: 982px}
+.s4 {top: 1025px}
+
+
 .tst0 {left: 0}
 .tst1 {left: 38px}
 .tst2 {left: 93px}
@@ -245,6 +319,9 @@ left: 660px}
 .vp-20, .vp-18, .vp-16, .vp-14, .vp-12, .vp-10, .vp-8, .vp-6, .vp-4, .vp-2, .vp1, .vp3, .vp5, .vp7, .vp9, .vp11, .vp13, .vp15, .vp17, .vp19 {top: 1889px}
 .vp-19, .vp-17, .vp-15, .vp-13, .vp-11, .vp-9, .vp-7, .vp-5, .vp-3, .vp-1, .vp2, .vp4, .vp6, .vp8, .vp10, .vp12, .vp14, .vp16, .vp18, .vp20 {top: 1938px}
 
+.vp-21 {top: 1912px; left: 117px}
+.vp21 {top: 1912px; left: 1182px}
+
 .vp-20 {left: 165px}
 .vp-19 {left: 189px}
 .vp-18 {left: 214px}
@@ -308,46 +385,302 @@ left: 660px}
 .romania {top: 1063px; 	left: 1012px}
 .bulgaria {top: 1578px;	left: 720px} 
 
-.times_held {position: absolute; top: -10px; left: 10px}
+.times_held {
+	position: absolute; 
+	font-family: 'Open Sans';
+	font-size: 20px;
+	font-weight: bold;
+	top: -18px; 
+	left: 8px
+}
+
+.outlined_text {
+    text-shadow: 
+        1px 1px 0 #ffffff, /* Right bottom */
+        -1px 1px 0 #ffffff, /* Left bottom */
+        1px -1px 0 #ffffff, /* Right top */
+        -1px -1px 0 #ffffff; /* Left top */
+}
 
+/* ============= EVENT MARKERS ========== */
 
-/* =========== CARDS ================= */
+.event-marker {
+	display: none;
+	position: absolute;
+	height: 30px;
+	width:  30px;
+	transition: transform 0.3s ease;
+}
 
-.playedCard {
+.event-marker:hover {
+	cursor: pointer;
+	transform: scale(2);
+	z-index: 1;
+}
+
+.event-marker.aside {
+	border: solid black 1.5px;
+}
+
+#turn_info {
 	display: flex;
-	margin: auto;
-	height: 300px;
+    flex-direction: column; 
+    align-items: flex-start; 	
 }
 
+#turn_info > div {
+	display: flex;
+    margin-bottom: 8px; 
+	gap: 4px; 
+}
 
-.hand_card:hover {
-	cursor: pointer;
+#turn_info > img {
+	display: block;
+    
 }
 
+#eco_glasnost {
+	position: relative;
+	/*top: 1500px;
+	left: 1050px;*/
+}
+
+#helsinki_final_act {
+	position: relative;
+	display: flex;
+}
+#solidarity_legalised {
+	top: 216px;
+	left: 612px;
+}
+
+#st_nicholas_church {
+	position: relative;
+	/*top: 181px;
+	left: 320px;*/
+}
+
+#systematization {
+	height: 65px;
+	width: 65px;
+}
+
+#the_tyrant_is_gone {
+	height: 40px;
+	width: 40px;
+}
+
+#the_wall {
+	top: 143px;
+	left: 170px;
+}
+
+#we_are_the_people {
+	position: relative;
+}
+
+
+/* =========== CARDS ================= */
+/*
+.playedCard {
+	display: flex;
+	margin: auto;
+	height: 300px;
+}*/
 
 .hand_card {
 	background-size: contain;
 	height: 250px;
-	padding: 10px;
-	box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.5); /* White glowing effect */
+	margin: 10px;
 	border-radius: 5px; 
+	transition: transform .3s ease 0.5s;
+}
+
+.hand_card:hover {
+	cursor: pointer;
+	/*transform: scale(1.75);*/
 }
 
+.zoom {
+	transform: scale(1.75)
+}
 
 .power_card {
 	background-size: contain;
 	height: 250px;
-	padding: 10px;
+	margin: 10px;
+	border-radius: 5px; 
+}
+
+.discard_card, .event_card {
+	background-size: contain;
+	height: 150px;
+	padding: 5px;
 	border-radius: 5px; 
+	transition: transform .3s ease;
 }
 
+.discard_card:hover, .event_card:hover {
+	cursor: pointer;
+	transform: scale(2);
+}
 
-.selected {
+.selected.space-area {
 	background-color: #0002;
 	outline: solid white 2px;
-	box-shadow: 0 0 4px white; 
-	border-radius: 18px 18px 0 0;
+	/*box-shadow: 0 0 4px white; */ 
+	border-radius: 10px 10px 0 0;
+}
+
+.space-area.tip {
+	background-color: #ff08;
+	outline: solid white 2px;
+	box-shadow: 0 0 8px #ff08; 
+	border-radius: 10px 10px 0 0;
+}
+
+.selected.hand_card {
+	outline: solid silver 3px;
+	/*box-shadow: 0 0 4px white; */ 
+	border-radius: 18px;
+}
+
+
+.selected.power_card {
+	outline: solid silver 3px;
+	/*box-shadow: 0 0 4px white; */ 
+	border-radius: 18px;
 }
 
 /* =============== OTHER ===============*/
 #space-characteristics {display: none}
+
+/* =============== CARD IMAGES =========*/
+
+#tooltip {
+	position: fixed;
+	pointer-events: none;
+	z-index: 600;
+	right: 240px;
+	top: 60px;
+}
+
+.card {
+	background-size: cover;
+	background-repeat: no-repeat;
+	width: 250px;
+	height: 350px;
+	border-radius: 16px;
+	box-shadow: 1px 2px 4px #0004;
+}
+
+.card_1 {background-image: url(cards/e1.gif)}
+.card_2 {background-image: url(cards/e2.gif)}
+.card_3 {background-image: url(cards/e3.gif)}
+.card_4 {background-image: url(cards/e4.gif)}
+.card_5 {background-image: url(cards/e5.gif)}
+.card_6 {background-image: url(cards/e6.gif)}
+.card_7 {background-image: url(cards/e7.gif)}
+.card_8 {background-image: url(cards/e8.gif)}
+.card_9 {background-image: url(cards/e9.gif)}
+.card_10 {background-image: url(cards/e10.gif)}
+.card_11 {background-image: url(cards/e11.gif)}
+.card_12 {background-image: url(cards/e12.gif)}
+.card_13 {background-image: url(cards/e13.gif)}
+.card_14 {background-image: url(cards/e14.gif)}
+.card_15 {background-image: url(cards/e15.gif)}
+.card_16 {background-image: url(cards/e16.gif)}
+.card_17 {background-image: url(cards/e17.gif)}
+.card_18 {background-image: url(cards/e18.gif)}
+.card_19 {background-image: url(cards/e19.gif)}
+.card_20 {background-image: url(cards/e20.gif)}
+.card_21 {background-image: url(cards/e21.gif)}
+.card_22 {background-image: url(cards/e22.gif)}
+.card_23 {background-image: url(cards/e23.gif)}
+.card_24 {background-image: url(cards/e24.gif)}
+.card_25 {background-image: url(cards/e25.gif)}
+.card_26 {background-image: url(cards/e26.gif)}
+.card_27 {background-image: url(cards/e27.gif)}
+.card_28 {background-image: url(cards/e28.gif)}
+.card_29 {background-image: url(cards/e29.gif)}
+.card_30 {background-image: url(cards/e30.gif)}
+.card_31 {background-image: url(cards/e31.gif)}
+.card_32 {background-image: url(cards/e32.gif)}
+.card_33 {background-image: url(cards/e33.gif)}
+.card_34 {background-image: url(cards/e34.gif)}
+.card_35 {background-image: url(cards/e35.gif)}
+.card_36 {background-image: url(cards/e36.gif)}
+.card_37 {background-image: url(cards/e37.gif)}
+.card_38 {background-image: url(cards/e38.gif)}
+.card_39 {background-image: url(cards/e39.gif)}
+.card_40 {background-image: url(cards/e40.gif)}
+.card_41 {background-image: url(cards/e41.gif)}
+.card_42 {background-image: url(cards/e42.gif)}
+.card_43 {background-image: url(cards/e43.gif)}
+.card_44 {background-image: url(cards/e44.gif)}
+.card_45 {background-image: url(cards/e45.gif)}
+.card_46 {background-image: url(cards/e46.gif)}
+.card_47 {background-image: url(cards/e47.gif)}
+.card_48 {background-image: url(cards/e48.gif)}
+.card_49 {background-image: url(cards/e49.gif)}
+.card_50 {background-image: url(cards/e50.gif)}
+.card_51 {background-image: url(cards/e51.gif)}
+.card_52 {background-image: url(cards/e52.gif)}
+.card_53 {background-image: url(cards/e53.gif)}
+.card_54 {background-image: url(cards/e54.gif)}
+.card_55 {background-image: url(cards/e55.gif)}
+.card_56 {background-image: url(cards/e56.gif)}
+.card_57 {background-image: url(cards/e57.gif)}
+.card_58 {background-image: url(cards/e58.gif)}
+.card_59 {background-image: url(cards/e59.gif)}
+.card_60 {background-image: url(cards/e60.gif)}
+.card_61 {background-image: url(cards/e61.gif)}
+.card_62 {background-image: url(cards/e62.gif)}
+.card_63 {background-image: url(cards/e63.gif)}
+.card_64 {background-image: url(cards/e64.gif)}
+.card_65 {background-image: url(cards/e65.gif)}
+.card_66 {background-image: url(cards/e66.gif)}
+.card_67 {background-image: url(cards/e67.gif)}
+.card_68 {background-image: url(cards/e68.gif)}
+.card_69 {background-image: url(cards/e69.gif)}
+.card_70 {background-image: url(cards/e70.gif)}
+.card_71 {background-image: url(cards/e71.gif)}
+.card_72 {background-image: url(cards/e72.gif)}
+.card_73 {background-image: url(cards/e73.gif)}
+.card_74 {background-image: url(cards/e74.gif)}
+.card_75 {background-image: url(cards/e75.gif)}
+.card_76 {background-image: url(cards/e76.gif)}
+.card_77 {background-image: url(cards/e77.gif)}
+.card_78 {background-image: url(cards/e78.gif)}
+.card_79 {background-image: url(cards/e79.gif)}
+.card_80 {background-image: url(cards/e80.gif)}
+.card_81 {background-image: url(cards/e81.gif)}
+.card_82 {background-image: url(cards/e82.gif)}
+.card_83 {background-image: url(cards/e83.gif)}
+.card_84 {background-image: url(cards/e84.gif)}
+.card_85 {background-image: url(cards/e85.gif)}
+.card_86 {background-image: url(cards/e86.gif)}
+.card_87 {background-image: url(cards/e87.gif)}
+.card_88 {background-image: url(cards/e88.gif)}
+.card_89 {background-image: url(cards/e89.gif)}
+.card_90 {background-image: url(cards/e90.gif)}
+.card_91 {background-image: url(cards/e91.gif)}
+.card_92 {background-image: url(cards/e92.gif)}
+.card_93 {background-image: url(cards/e93.gif)}
+.card_94 {background-image: url(cards/e94.gif)}
+.card_95 {background-image: url(cards/e95.gif)}
+.card_96 {background-image: url(cards/e96.gif)}
+.card_97 {background-image: url(cards/e97.gif)}
+.card_98 {background-image: url(cards/e98.gif)}
+.card_99 {background-image: url(cards/e99.gif)}
+.card_100 {background-image: url(cards/e100.gif)}
+.card_101 {background-image: url(cards/e101.gif)}
+.card_102 {background-image: url(cards/e102.gif)}
+.card_103 {background-image: url(cards/e103.gif)}
+.card_104 {background-image: url(cards/e104.gif)}
+.card_105 {background-image: url(cards/e105.gif)}
+.card_106 {background-image: url(cards/e106.gif)}
+.card_107 {background-image: url(cards/e107.gif)}
+.card_108 {background-image: url(cards/e108.gif)}
+.card_109 {background-image: url(cards/e109.gif)}
+.card_110 {background-image: url(cards/e110.gif)}
-- 
cgit v1.2.3