play

1 files changed, 143 insertions, 0 deletions

diff --git a/play.css b/play.css
index 217ed27..a9195f8 100644
--- a/play.css
+++ b/play.css
@@ -25,6 +25,7 @@ body {
 	width: 2485px;
 	height: 1654px;
 	margin-bottom: 30px;
+	box-shadow: 2px 2px 4px #0006;
 }
 
 #map {
@@ -44,8 +45,150 @@ body {
 	background-size: cover;
 	background-image: url(Maria.Political.Display.075.jpg);
 	background-color: #ece1a9;
+	box-shadow: 2px 2px 4px #0006;
+	border: 1px solid #0008;
 }
 
+header.your_turn.france { background-color: var(--color-light-france); }
+header.your_turn.bavaria { background-color: var(--color-light-bavaria); }
+header.your_turn.prussia { background-color: var(--color-light-prussia); }
+header.your_turn.saxony { background-color: var(--color-light-saxony); }
+header.your_turn.pragmatic { background-color: var(--color-light-pragmatic); }
+header.your_turn.austria { background-color: var(--color-light-austria); }
+
+/* COLORS */
+
+:root {
+	--color-light-france: hsl(0, 70%, 80%);
+	--color-light-bavaria: hsl(36, 70%, 80%);
+	--color-light-prussia: hsl(210, 80%, 75%);
+	--color-light-saxony: hsl(140, 50%, 70%);
+	--color-light-pragmatic: hsl(0, 0%, 75%);
+	--color-light-austria: hsl(0, 0%, 97%);
+	--color-light-political: hsl(50, 73%, 78%);
+
+	--color-medium-france: hsl(0, 35%, 70%);
+	--color-medium-bavaria: hsl(36, 65%, 70%);
+	--color-medium-prussia: hsl(210, 30%, 60%);
+	--color-medium-saxony: hsl(140, 20%, 55%);
+	--color-medium-pragmatic: hsl(0, 0%, 65%);
+	--color-medium-austria: hsl(0, 0%, 90%);
+	--color-medium-political: hsl(50, 35%, 60%);
+
+	--color-dark-france: hsl(358, 85%, 52%);
+	--color-dark-bavaria: hsl(36, 65%, 52%);
+	--color-dark-prussia: hsl(198, 100%, 24%);
+	--color-dark-saxony: hsl(139, 72%, 28%);
+	--color-dark-pragmatic: hsl(0, 0%, 87%);
+	--color-dark-austria: hsl(0, 0%, 97%);
+
+	--color-role-louis: hsl(0, 70%, 80%);
+	--color-role-frederick: hsl(210, 80%, 75%);
+	--color-role-maria: hsl(0, 0%, 97%);
+
+	--color-clubs: #007c49;
+	--color-diamonds: #c2263e;
+	--color-hearts: #ed1c24;
+	--color-spades: #274085;
+	--color-reserve: #0094c9;
+}
+
+/* PANELS */
+
+.panel {
+	background-color: darkgray;
+	width: clamp(500px, calc(100% - 48px), 2475px);
+	margin: 24px auto;
+	box-shadow: 2px 2px 4px #0006;
+	border: 1px solid #0008;
+	padding: 4px;
+}
+
+.panel_header {
+	border: 1px solid #000a;
+	box-shadow: 1px 1px 4px #0003;
+	text-align: center;
+	padding: 2px 0;
+}
+
+.panel_body {
+	display: flex;
+	justify-content: start;
+	flex-wrap: wrap;
+	padding: 18px;
+	gap: 18px;
+	min-height: 256px;
+}
+
+#hand_france_header { background-color: var(--color-light-france) }
+#hand_bavaria_header { background-color: var(--color-light-bavaria) }
+#hand_prussia_header { background-color: var(--color-light-prussia) }
+#hand_saxony_header { background-color: var(--color-light-saxony) }
+#hand_pragmatic_header { background-color: var(--color-light-pragmatic) }
+#hand_austria_header { background-color: var(--color-light-austria) }
+
+#hand_france_panel { background-color: var(--color-medium-france) }
+#hand_bavaria_panel { background-color: var(--color-medium-bavaria) }
+#hand_prussia_panel { background-color: var(--color-medium-prussia) }
+#hand_saxony_panel { background-color: var(--color-medium-saxony) }
+#hand_pragmatic_panel { background-color: var(--color-medium-pragmatic) }
+#hand_austria_panel { background-color: var(--color-medium-austria) }
+
+#political_header { background-color: var(--color-light-political) }
+#political_panel { background-color: var(--color-medium-political) }
+
+
+/* LOG */
+
+#log {
+	font-family: "Suit Symbols", var(--font-small);
+	font-variant-numeric: tabular-nums;
+}
+
+#log { background-color: #f3ebd4 }
+
+#log div:empty {
+	min-height: 4px;
+}
+
+#log .city_tip:hover { cursor: pointer; text-decoration: underline; }
+
+#log .piece_tip:hover { cursor: pointer; text-decoration: underline; }
+
+#log .h {
+	background-color: tan;
+	border-top: 1px solid black; border-bottom: 1px solid black;
+	margin: 8px 0;
+}
+
+#log .h.fate { text-align: center; }
+#log .h.fate::before { content: "\2014  " }
+#log .h.fate::after { content: " \2014" }
+
+#log .combat { background-color: #d7cfb8; }
+
+#log .h.austria { background-color: var(--color-light-austria); }
+#log .h.france { background-color: var(--color-light-france); }
+#log .h.bavaria { background-color: var(--color-light-bavaria); }
+#log .h.prussia { background-color: var(--color-light-prussia); }
+#log .h.pragmatic { background-color: var(--color-light-pragmatic); }
+#log .h.saxony { background-color: var(--color-light-saxony); }
+
+#log .q { font-style: italic; }
+
+#log .i { padding-left: 20px }
+#log .ii { padding-left: 32px }
+
+#log span.suit { font-size: 11px; }
+
+span.suit.reserve { padding: 0 1px; }
+
+span.suit.spades { color: var(--color-spades) }
+span.suit.clubs { color: var(--color-clubs) }
+span.suit.hearts { color: var(--color-hearts) }
+span.suit.diamonds { color: var(--color-diamonds) }
+span.suit.reserve { color: var(--color-reserve); font-weight: bold; font-family: "Source Serif SmText"; }
+
 /* SPACES */
 
 .space {