responsive political display

1 files changed, 198 insertions, 178 deletions

diff --git a/play.css b/play.css
index f26d24d..7ea25f9 100644
--- a/play.css
+++ b/play.css
@@ -2,6 +2,36 @@
 	Maria
 */
 
+/* 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(264, 10%, 75%);
+	--color-light-austria: hsl(0, 0%, 97%);
+	--color-light-political: hsl(50, 73%, 78%);
+	--color-light-discard: hsl(52, 37%, 80%);
+
+	--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(264, 10%, 65%);
+	--color-medium-austria: hsl(0, 0%, 90%);
+	--color-medium-political: hsl(50, 35%, 60%);
+	--color-medium-discard: hsl(52, 25%, 70%);
+
+	--color-clubs: #0079a1;
+	--color-diamonds: #9d403f;
+	--color-hearts: #ed1c23;
+	--color-spades: #00507c;
+	--color-reserve: #59594c;
+}
+
+/* FONTS */
+
 @font-face {
 	font-family: "Suit Symbols";
 	src: url(fonts/FriedrichSymbols-Regular.woff2) format(woff2);
@@ -14,6 +44,11 @@
 	white-space: wrap;
 }
 
+#log {
+	font-family: "Suit Symbols", var(--font-small);
+	font-variant-numeric: tabular-nums;
+}
+
 button span.suit {
 	font-family: "Suit Symbols", var(--font-widget);
 	line-height: 1;
@@ -23,21 +58,56 @@ button {
 	height: 30px;
 }
 
+/* BODY, HEADER, BOARD */
+
 body {
 	background-color: slategray;
 }
 
-#role_Maria_Theresa { background-color: var(--color-light-austria); }
-#role_Louis_XV { background-color: var(--color-light-france); }
-#role_Frederick {
-	background-image: linear-gradient(45deg,
-		var(--color-light-prussia) 40%,
-		var(--color-light-pragmatic) 60%
-	);
+header { background-color: hsl(44, 35%, 80%); color: #000c; }
+header.your_turn { color: black; }
+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); }
+
+#mapwrap {
+	width: 2485px;
+	height: 1654px;
+	margin-bottom: 30px;
+	box-shadow: 2px 2px 4px #0006;
 }
 
-#role_Player_A { background-color: thistle; }
-#role_Player_B { background-color: whitesmoke; }
+#map {
+	position: absolute;
+	width: 2485px;
+	height: 1654px;
+	background-size: cover;
+	background-image: url(Maria.Gameboard.075.jpg);
+	background-color: #ece1a9;
+}
+
+#tooltip {
+	pointer-events: none;
+	position: fixed;
+	z-index: 600;
+	right: 240px;
+	top: 60px;
+}
+
+@media (max-width: 800px) {
+	#tooltip {
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		margin: auto;
+	}
+}
+
+/* ROLES */
 
 .role.active span { font-weight: bold }
 
@@ -49,30 +119,16 @@ body {
 	padding-right: 3px;
 }
 
-button:has(.austria) { background-color: #ffffff; }
-button:has(.bavaria) { background-color: #ffc825; border-color: #fff766 #c69100 #c69100 #fff766; box-shadow: 0 0 0 1px #5c2a00; }
-button:has(.bavaria):active:hover { border-color: #c69100 #fff766 #fff766 #c69100; }
-button:has(.france) { background-color: #ed1c24; border-color: #ff544d #c00000 #c00000 #ff544d; box-shadow: 0 0 0 1px #680000; }
-button:has(.france):active:hover { border-color: #c00000 #ff544d #ff544d #c00000; }
-button:has(.pragmatic) { background-color: #5f5c5c; border-color: #7a7777 #454242 #454242 #7a7777; box-shadow: 0 0 0 1px #161313; }
-button:has(.pragmatic):active:hover { border-color: #454242 #7a7777 #7a7777 #454242; }
-button:has(.prussia) { background-color: #005988; border-color: #2973a4 #00406d #00406d #2973a4; box-shadow: 0 0 0 1px #000f3a; }
-button:has(.prussia):active:hover { border-color: #00406d #2973a4 #2973a4 #00406d; }
-button:has(.saxony) { background-color: #157d36; border-color: #3e9d54 #005e17 #005e17 #3e9d54; box-shadow: 0 0 0 1px #002500; }
-button:has(.saxony):active:hover { border-color: #005e17 #3e9d54 #3e9d54 #005e17; }
+#role_Player_A { background-color: thistle; }
+#role_Player_B { background-color: whitesmoke; }
 
-button:not(.hide):has(img) {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: 4px;
-}
-.shift_track {
-	display: block;
-	border: 1px solid black;
-}
-.shift_arrow {
-	display: block;
+#role_Maria_Theresa { background-color: var(--color-light-austria); }
+#role_Louis_XV { background-color: var(--color-light-france); }
+#role_Frederick {
+	background-image: linear-gradient(45deg,
+		var(--color-light-prussia) 40%,
+		var(--color-light-pragmatic) 60%
+	);
 }
 
 .role_marker {
@@ -112,99 +168,7 @@ button:not(.hide):has(img) {
 .role_marker.bavaria { background-image: url(images/role_bavaria.2x.png) }
 }
 
-#mapwrap {
-	width: 2485px;
-	height: 1654px;
-	margin-bottom: 30px;
-	box-shadow: 2px 2px 4px #0006;
-}
-
-#map {
-	position: absolute;
-	width: 2485px;
-	height: 1654px;
-	background-size: cover;
-	background-image: url(Maria.Gameboard.075.jpg);
-	background-color: #ece1a9;
-}
-
-#tooltip {
-	pointer-events: none;
-	position: fixed;
-	z-index: 600;
-	right: 240px;
-	top: 60px;
-}
-
-@media (max-width: 800px) {
-	#tooltip {
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		margin: auto;
-	}
-}
-
-#political_display {
-	position: relative;
-	width: 877px;
-	height: 620px;
-	background-size: cover;
-	background-image: url(Maria.Political.Display.075.jpg);
-	background-color: #ece1a9;
-	Xbox-shadow: 2px 2px 4px #0006;
-	border: 1px solid #0008;
-}
-
-.pc_pile {
-	position: absolute;
-	top: 325px;
-}
-
-#placed_prussia { left: 42px; }
-#placed_france { left: 246px; }
-#placed_pragmatic { left: 449px; }
-#placed_austria { left: 653px; }
-
-header { background-color: hsl(44, 35%, 80%); color: #000c; }
-header.your_turn { color: black; }
-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(264, 10%, 75%);
-	--color-light-austria: hsl(0, 0%, 97%);
-	--color-light-political: hsl(50, 73%, 78%);
-	--color-light-discard: hsl(52, 37%, 80%);
-
-	--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(264, 10%, 65%);
-	--color-medium-austria: hsl(0, 0%, 90%);
-	--color-medium-political: hsl(50, 35%, 60%);
-	--color-medium-discard: hsl(52, 25%, 70%);
-
-	--color-clubs: #0079a1;
-	--color-diamonds: #9d403f;
-	--color-hearts: #ed1c23;
-	--color-spades: #00507c;
-	--color-reserve: #59594c;
-}
-
-/* DEALS */
+/* PROPOSE DEAL DIALOG */
 
 dialog {
 	background-color: #f3ebd4;
@@ -214,28 +178,6 @@ dialog button {
 	margin-left: 8px;
 }
 
-#political_body table {
-	width: 100%;
-	background-color: var(--color-light-political);
-	border: 1px solid #0008;
-}
-
-#political_body td {
-	border: 1px solid #0004;
-	padding: 4px;
-	vertical-align: top;
-}
-
-#political_body td img {
-	display: block;
-	border: 1px solid black;
-}
-
-#political_body th {
-	font-weight: normal;
-	background-color: #0002;
-}
-
 /* PANELS */
 
 .panel {
@@ -288,35 +230,126 @@ dialog button {
 #discard_pile_panel { max-width: calc(230px * 4 + 18px * 5) }
 #discard_pile_body { padding: 18px; gap: 18px; }
 
+/* BUTTON IMAGES */
+
+button:has(.austria) { background-color: #ffffff; }
+button:has(.bavaria) { background-color: #ffc825; border-color: #fff766 #c69100 #c69100 #fff766; box-shadow: 0 0 0 1px #5c2a00; }
+button:has(.bavaria):active:hover { border-color: #c69100 #fff766 #fff766 #c69100; }
+button:has(.france) { background-color: #ed1c24; border-color: #ff544d #c00000 #c00000 #ff544d; box-shadow: 0 0 0 1px #680000; }
+button:has(.france):active:hover { border-color: #c00000 #ff544d #ff544d #c00000; }
+button:has(.pragmatic) { background-color: #5f5c5c; border-color: #7a7777 #454242 #454242 #7a7777; box-shadow: 0 0 0 1px #161313; }
+button:has(.pragmatic):active:hover { border-color: #454242 #7a7777 #7a7777 #454242; }
+button:has(.prussia) { background-color: #005988; border-color: #2973a4 #00406d #00406d #2973a4; box-shadow: 0 0 0 1px #000f3a; }
+button:has(.prussia):active:hover { border-color: #00406d #2973a4 #2973a4 #00406d; }
+button:has(.saxony) { background-color: #157d36; border-color: #3e9d54 #005e17 #005e17 #3e9d54; box-shadow: 0 0 0 1px #002500; }
+button:has(.saxony):active:hover { border-color: #005e17 #3e9d54 #3e9d54 #005e17; }
+
+button:not(.hide):has(img) {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 4px;
+}
+
+.shift_track {
+	display: block;
+	border: 1px solid black;
+}
+
+.shift_arrow {
+	display: block;
+}
+
+/* POLITICAL DISPLAY */
+
 #political_panel {
 	width: min-content;
 }
+
+#political_display {
+	position: relative;
+	width: 877px;
+	height: 620px;
+	background-size: cover;
+	background-image: url(Maria.Political.Display.075.jpg);
+	background-color: #ece1a9;
+	Xbox-shadow: 2px 2px 4px #0006;
+	border: 1px solid #0008;
+}
+
+#placed_prussia { left: 42px; }
+#placed_france { left: 246px; }
+#placed_pragmatic { left: 449px; }
+#placed_austria { left: 653px; }
+
+.pc_pile {
+	position: absolute;
+	top: 325px;
+}
+
 #political_body {
-	padding: 4px;
+	padding-top: 4px;
 	display: grid;
-	grid-template-rows: min-content 1fr;
-	grid-template-columns: 179px 879px 169px;
-	gap: 12px;
 }
-#political_display { grid-row: 1; grid-column: 2; }
-#pc_deck { grid-row: 1; grid-column: 1; }
-#pc_show { grid-row: 1; grid-column: 3; }
-#pc_show .card + .card { margin-top: 12px ; }
-#pc_deck, #pc_show { margin-top: 4px; }
 
-#pd_deals { grid-row: 2; grid-column: 2; }
+#pc_deck { width: calc(167px + 6px * 3); height: 259px; }
 
-div.deal + div.deal {
-	margin-top: 8px;
+#political_body {
+	grid-template-columns: repeat(2, min-content);
+	grid-template-rows: repeat(3, min-content);
 }
 
-/* LOG */
+#pd_cards {
+	padding: 8px;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: start;
+	align-items: center;
+	gap: 8px;
+}
 
-#log {
-	font-family: "Suit Symbols", var(--font-small);
-	font-variant-numeric: tabular-nums;
+#pd_main { grid-row: 1; grid-column: 1; }
+#pd_deals { grid-row: 2; grid-column: 1; }
+#pd_cards { grid-row: 1 / 4; grid-column: 2; }
+#pd_cards { flex-direction: column; }
+
+@media (max-width: 1300px) {
+#pd_main { grid-row: 1; grid-column: 1; }
+#pd_deals { grid-row: 3; grid-column: 1; }
+#pd_cards { grid-row: 2; grid-column: 1; }
+#pd_cards { flex-direction: row; }
+}
+
+/* POLITICAL DEAL LIST */
+
+#pd_deals table {
+	width: 100%;
+	background-color: var(--color-light-political);
+	border: 1px solid #0008;
+}
+
+#pd_deals td {
+	border: 1px solid #0004;
+	padding: 4px;
+	vertical-align: top;
+}
+
+#pd_deals td img {
+	display: block;
+	border: 1px solid black;
+}
+
+#pd_deals th {
+	font-weight: normal;
+	background-color: #0002;
 }
 
+#pd_deals .deal {
+	margin-top: 8px;
+}
+
+/* LOG */
+
 #log { background-color: #f3ebd4 }
 
 #log div:empty {
@@ -425,21 +458,6 @@ span.suit.reserve { color: var(--color-reserve); font-weight: bold; font-family:
 	height: 56px;
 }
 
-/*
-.space.country_austria { background-color: #fcffff; }
-.space.country_france { background-color: #ea192e; }
-.space.country_prussia { background-color: #035783; }
-.space.country_netherlands { background-color: #7d7c7a; }
-.space.country_silesia { background-color: #91b4a0; }
-.space.country_saxony { background-color: #127a3b; }
-.space.country_bavaria { background-color: #fcb01f; }
-.space.country_poland { background-color: #cac180; }
-
-.space.minor_fortress.Empire { background-color: #b41a70; }
-.space.major_fortress.Empire { background-color: #b41a70; }
-.space.city.Empire { background-color: #e0d796; }
-*/
-
 .space.tip {
 	border-color: lime;
 	box-shadow: 0 0 2px 1px black, inset 0 0 2px 1px black;
@@ -695,6 +713,8 @@ body.shift span.value.deck_4 { background-color: #f002 }
 	width: 230px;
 }
 
+/* @1X */
+
 .card.tc.H10 { background-image: url(cards/Maria.TC.01.075.jpg) }
 .card.tc.H9 { background-image: url(cards/Maria.TC.02.075.jpg) }
 .card.tc.H8 { background-image: url(cards/Maria.TC.03.075.jpg) }