play

2 files changed, 315 insertions, 259 deletions

diff --git a/play.css b/play.css
index 8e1f4cd..217ed27 100644
--- a/play.css
+++ b/play.css
@@ -1,4 +1,25 @@
-/* Maria */
+/*
+	Maria
+*/
+
+@font-face {
+	font-family: "Suit Symbols";
+	src: url(fonts/FriedrichSymbols-Regular.woff2) format(woff2);
+	unicode-range:U+2660-2667;
+}
+
+#prompt {
+	font-family: "Suit Symbols", var(--font-widget);
+	font-variant-numeric: tabular-nums;
+}
+
+body {
+	background-color: slategray;
+}
+
+#role_Maria_Theresa { background-color: whitesmoke; }
+#role_Frederick { background-color: skyblue; }
+#role_Louis_XV { background-color: salmon; }
 
 #mapwrap {
 	width: 2485px;
@@ -25,92 +46,150 @@
 	background-color: #ece1a9;
 }
 
-body {
-	background-color: slategray;
-}
-
-.panel {
-	background-color: #444;
-	width: clamp(824px, calc(100% - 30px), 1636px);
-	margin: 12px auto 36px auto;
-	box-shadow: 1px 2px 6px #0004;
-	border: 1px solid #0008;
-}
-
-.panel_header {
-	color: white;
-	font-weight: bold;
-	text-align: center;
-	padding: 3px 1em;
-	border-bottom: 1px solid #0008;
-}
-
-.panel_body {
-	background-color: #555;
-	display: flex;
-	justify-content: start;
-	flex-wrap: wrap;
-	padding: 18px;
-	gap: 18px;
-	min-height: 257px;
-}
+/* SPACES */
 
-.city {
+.space {
 	position: absolute;
 	box-sizing: border-box;
-	border: 2px solid black;
+	border: 4px solid transparent;
+	background-color: #0002;
+}
+
+.space.city {
 	width: 24px;
 	height: 24px;
-	border-radius: 100%;
-	background-color: #0002;
+	border-radius: 50%;
 }
 
-.minor.fortress {
-	position: absolute;
-	box-sizing: border-box;
-	border: 2px solid black;
+.space.minor_fortress {
 	width: 28px;
 	height: 28px;
-	border-radius: 0%;
-	//background-color: lime;
 }
 
-.major.fortress {
-	position: absolute;
-	border: 2px solid black;
-	box-sizing: border-box;
+.space.major_fortress {
 	width: 40px;
 	height: 40px;
 	border-radius: 50%;
-	//background-color: lime;
 }
 
-.Austria { background-color: #fcffff; }
-.France { background-color: #ea192e; }
-.Prussia { background-color: #035783; }
-.Netherlands { background-color: #7d7c7a; }
-.Silesia { background-color: #91b4a0; }
-.Saxony { background-color: #127a3b; }
-.Bavaria { background-color: #fcb01f; }
+.space.Austria { background-color: #fcffff; }
+.space.France { background-color: #ea192e; }
+.space.Prussia { background-color: #035783; }
+.space.Netherlands { background-color: #7d7c7a; }
+.space.Silesia { background-color: #91b4a0; }
+.space.Saxony { background-color: #127a3b; }
+.space.Bavaria { background-color: #fcb01f; }
+.space.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;
+	z-index: 3000;
+}
+
+.space.action {
+	border-color: white;
+	box-shadow: 0 0 2px black, inset 0 0 2px black;
+	z-index: 2000;
+}
 
-.fortress.HRE { background-color: #b41a70; }
-.city.HRE { background-color: #e0d796; }
-.Poland { background-color: #cac180; }
+/* PIECES */
 
-.major_road {
+.piece {
 	position: absolute;
-	box-sizing: border-box;
-	background-color: black;
-	width: 20px;
-	height: 6px;
+	transition-property: top, left;
+	transition-duration: 700ms;
+	transition-timing-function: ease;
+	background-repeat: no-repeat;
+}
+
+.piece.cylinder {
+	width: 42px;
+	height: 47px;
+}
+
+.piece.disc {
+	width: 42px;
+	height: 40px;
+}
+
+.piece.cube {
+	width: 31px;
+	height: 39px;
 }
 
-.road {
+.piece.action {
+	filter:
+		drop-shadow(2px 0px 0px white)
+		drop-shadow(0px 2px 0px white)
+		drop-shadow(0px -2px 0px white)
+		drop-shadow(-2px 0px 0px white)
+		drop-shadow(0 0 1px black)
+		;
+}
+
+.piece.selected {
+	filter:
+		drop-shadow(2px 0px 0px yellow)
+		drop-shadow(0px 2px 0px yellow)
+		drop-shadow(0px -2px 0px yellow)
+		drop-shadow(-2px 0px 0px yellow)
+		drop-shadow(0 0 1px black)
+		;
+}
+
+.piece.tip {
+	filter:
+		drop-shadow(2px 0px 0px lime)
+		drop-shadow(0px 2px 0px lime)
+		drop-shadow(0px -2px 0px lime)
+		drop-shadow(-2px 0px 0px lime)
+		drop-shadow(0 0 1px black)
+		;
+}
+
+.piece.cube.austria { background-image: url(images/cube_austria.svg) }
+.piece.cube.bavaria { background-image: url(images/cube_bavaria.svg) }
+.piece.cube.france { background-image: url(images/cube_france.svg) }
+.piece.cube.pragmatic { background-image: url(images/cube_pragmatic.svg) }
+.piece.cube.prussia { background-image: url(images/cube_prussia.svg) }
+.piece.cube.saxony { background-image: url(images/cube_saxony.svg) }
+
+.piece.disc.austria { background-image: url(images/disc_hussar.svg) }
+
+.piece.cylinder.austria_1 { background-image: url(pieces/cylinder_austria_1.svg) }
+.piece.cylinder.austria_2 { background-image: url(pieces/cylinder_austria_2.svg) }
+.piece.cylinder.austria_3 { background-image: url(pieces/cylinder_austria_3.svg) }
+.piece.cylinder.austria_4 { background-image: url(pieces/cylinder_austria_4.svg) }
+.piece.cylinder.austria_5 { background-image: url(pieces/cylinder_austria_5.svg) }
+.piece.cylinder.austria_6 { background-image: url(pieces/cylinder_austria_6.svg) }
+.piece.cylinder.bavaria_1 { background-image: url(pieces/cylinder_bavaria_1.svg) }
+.piece.cylinder.france_1 { background-image: url(pieces/cylinder_france_1.svg) }
+.piece.cylinder.france_2 { background-image: url(pieces/cylinder_france_2.svg) }
+.piece.cylinder.france_3 { background-image: url(pieces/cylinder_france_3.svg) }
+.piece.cylinder.france_4 { background-image: url(pieces/cylinder_france_4.svg) }
+.piece.cylinder.france_5 { background-image: url(pieces/cylinder_france_5.svg) }
+.piece.cylinder.pragmatic_1 { background-image: url(pieces/cylinder_pragmatic_1.svg) }
+.piece.cylinder.pragmatic_2 { background-image: url(pieces/cylinder_pragmatic_2.svg) }
+.piece.cylinder.pragmatic_3 { background-image: url(pieces/cylinder_pragmatic_3.svg) }
+.piece.cylinder.prussia_1 { background-image: url(pieces/cylinder_prussia_1.svg) }
+.piece.cylinder.prussia_2 { background-image: url(pieces/cylinder_prussia_2.svg) }
+.piece.cylinder.prussia_3 { background-image: url(pieces/cylinder_prussia_3.svg) }
+.piece.cylinder.prussia_4 { background-image: url(pieces/cylinder_prussia_4.svg) }
+.piece.cylinder.saxony_1 { background-image: url(pieces/cylinder_saxony_1.svg) }
+
+/* MARKERS */
+
+#combat {
 	position: absolute;
-	box-sizing: border-box;
-	background-color: dimgray;
-	width: 20px;
-	height: 4px;
+	width: 36px;
+	height: 36px;
+	background-image: url(images/bang.svg);
+	background-size: contain;
+	background-repeat: no-repeat;
 }
 
 .marker {
@@ -122,13 +201,6 @@ body {
 	border: 1px solid black;
 }
 
-.political_marker {
-	position: absolute;
-	width: 45px;
-	height: 45px;
-	border: 1px solid black;
-}
-
 .marker.turn_marker { background-image: url(markers/turn_marker.075.png) }
 .marker.elector_marker_austria_pragmatic { background-image: url(markers/elector_marker_austria_pragmatic.075.png) }
 .marker.elector_marker_france { background-image: url(markers/elector_marker_france.075.png) }
@@ -146,48 +218,58 @@ body {
 .marker.subsidy_marker { background-image: url(markers/subsidy_marker.075.png) }
 .marker.income_minus_marker { background-image: url(markers/income_minus_marker.075.png) }
 .marker.income_plus_marker { background-image: url(markers/income_plus_marker.075.png) }
-.political_marker.italy { background-image: url(markers/political_marker_italy.100.png) }
-.political_marker.russia { background-image: url(markers/political_marker_russia.100.png) }
-.political_marker.saxony { background-image: url(markers/political_marker_saxony.100.png) }
+.marker.political_marker_italy { background-image: url(markers/political_marker_italy.100.png) }
+.marker.political_marker_russia { background-image: url(markers/political_marker_russia.100.png) }
+.marker.political_marker_saxony { background-image: url(markers/political_marker_saxony.100.png) }
+
+/* TROOP NUMBER BADGE */
+
+.number {
+	width: 14px;
+	height: 14px;
+	background-size: 800% 100%;
+	pointer-events: none;
+}
+
+.number { background-image: url(images/numbers_rev.2x.png); }
+.number.austria, .number.bavaria { background-image: url(images/numbers.2x.png); }
+
+.number.n0 { visibility: hidden; }
+.number.n1 { background-position: 0px 0px; }
+.number.n2 { background-position: -14px 0px; }
+.number.n3 { background-position: -28px 0px; }
+.number.n4 { background-position: -42px 0px; }
+.number.n5 { background-position: -56px 0px; }
+.number.n6 { background-position: -70px 0px; }
+.number.n7 { background-position: -84px 0px; }
+.number.n8 { background-position: -98px 0px; }
+
+/* CARDS */
 
 .card {
 	width: 165px;
 	height: 257px;
-	background-size: 165px 257px;
+	background-size: 100%;
 	background-color: #f3ebd5;
 	border-radius: 8px;
 	border: 1px solid black;
 }
 
-.card.polcard.c01 { background-image: url(cards/Maria.PolCard.01.075.jpg) }
-.card.polcard.c02 { background-image: url(cards/Maria.PolCard.02.075.jpg) }
-.card.polcard.c03 { background-image: url(cards/Maria.PolCard.03.075.jpg) }
-.card.polcard.c04 { background-image: url(cards/Maria.PolCard.04.075.jpg) }
-.card.polcard.c05 { background-image: url(cards/Maria.PolCard.05.075.jpg) }
-.card.polcard.c06 { background-image: url(cards/Maria.PolCard.06.075.jpg) }
-.card.polcard.c07 { background-image: url(cards/Maria.PolCard.07.075.jpg) }
-.card.polcard.c08 { background-image: url(cards/Maria.PolCard.08.075.jpg) }
-.card.polcard.c09 { background-image: url(cards/Maria.PolCard.09.075.jpg) }
-.card.polcard.c10 { background-image: url(cards/Maria.PolCard.10.075.jpg) }
-.card.polcard.c11 { background-image: url(cards/Maria.PolCard.11.075.jpg) }
-.card.polcard.c12 { background-image: url(cards/Maria.PolCard.12.075.jpg) }
-.card.polcard.c13 { background-image: url(cards/Maria.PolCard.13.075.jpg) }
-.card.polcard.c14 { background-image: url(cards/Maria.PolCard.14.075.jpg) }
-.card.polcard.c15 { background-image: url(cards/Maria.PolCard.15.075.jpg) }
-.card.polcard.c16 { background-image: url(cards/Maria.PolCard.16.075.jpg) }
-.card.polcard.c17 { background-image: url(cards/Maria.PolCard.17.075.jpg) }
-.card.polcard.c18 { background-image: url(cards/Maria.PolCard.18.075.jpg) }
-.card.polcard.c19 { background-image: url(cards/Maria.PolCard.19.075.jpg) }
-.card.polcard.c20 { background-image: url(cards/Maria.PolCard.20.075.jpg) }
-.card.polcard.c21 { background-image: url(cards/Maria.PolCard.21.075.jpg) }
-.card.polcard.c22 { background-image: url(cards/Maria.PolCard.22.075.jpg) }
-.card.polcard.c23 { background-image: url(cards/Maria.PolCard.23.075.jpg) }
-.card.polcard.c24 { background-image: url(cards/Maria.PolCard.24.075.jpg) }
-.card.polcard.impelection { background-image: url(cards/Maria.PolCard.ImpElection.075.jpg) }
-.card.polcard.reverse.deck_1 { background-image: url(cards/Maria.PolCard.reverse.deck_1.075.jpg) }
-.card.polcard.reverse.deck_2 { background-image: url(cards/Maria.PolCard.reverse.deck_2.075.jpg) }
-.card.polcard.reverse.deck_3 { background-image: url(cards/Maria.PolCard.reverse.deck_3.075.jpg) }
-.card.polcard.reverse.deck_4 { background-image: url(cards/Maria.PolCard.reverse.deck_4.075.jpg) }
+.card.action {
+	box-shadow: 0 0 0 3px white;
+	border-color: white;
+}
+
+@media (hover: hover) {
+	.card.action:hover {
+		margin-top: -10px;
+		margin-bottom: 10px;
+	}
+}
+
+.draw-break { margin-left: 145px; }
+.card.tc { margin-right: -145px; }
+.panel_body { padding-right: calc(18px + 145px); }
 
 .card.tc.c01 { background-image: url(cards/Maria.TC.01.075.jpg) }
 .card.tc.c02 { background-image: url(cards/Maria.TC.02.075.jpg) }
@@ -232,4 +314,112 @@ body {
 .card.tc.reverse.deck_3 { background-image: url(cards/Maria.TC.reverse.deck_3.075.jpg) }
 .card.tc.reverse.deck_4 { background-image: url(cards/Maria.TC.reverse.deck_4.075.jpg) }
 
-.card.tc + .card.tc { margin-left: -145px; }
+.card.polcard.c01 { background-image: url(cards/Maria.PolCard.01.075.jpg) }
+.card.polcard.c02 { background-image: url(cards/Maria.PolCard.02.075.jpg) }
+.card.polcard.c03 { background-image: url(cards/Maria.PolCard.03.075.jpg) }
+.card.polcard.c04 { background-image: url(cards/Maria.PolCard.04.075.jpg) }
+.card.polcard.c05 { background-image: url(cards/Maria.PolCard.05.075.jpg) }
+.card.polcard.c06 { background-image: url(cards/Maria.PolCard.06.075.jpg) }
+.card.polcard.c07 { background-image: url(cards/Maria.PolCard.07.075.jpg) }
+.card.polcard.c08 { background-image: url(cards/Maria.PolCard.08.075.jpg) }
+.card.polcard.c09 { background-image: url(cards/Maria.PolCard.09.075.jpg) }
+.card.polcard.c10 { background-image: url(cards/Maria.PolCard.10.075.jpg) }
+.card.polcard.c11 { background-image: url(cards/Maria.PolCard.11.075.jpg) }
+.card.polcard.c12 { background-image: url(cards/Maria.PolCard.12.075.jpg) }
+.card.polcard.c13 { background-image: url(cards/Maria.PolCard.13.075.jpg) }
+.card.polcard.c14 { background-image: url(cards/Maria.PolCard.14.075.jpg) }
+.card.polcard.c15 { background-image: url(cards/Maria.PolCard.15.075.jpg) }
+.card.polcard.c16 { background-image: url(cards/Maria.PolCard.16.075.jpg) }
+.card.polcard.c17 { background-image: url(cards/Maria.PolCard.17.075.jpg) }
+.card.polcard.c18 { background-image: url(cards/Maria.PolCard.18.075.jpg) }
+.card.polcard.c19 { background-image: url(cards/Maria.PolCard.19.075.jpg) }
+.card.polcard.c20 { background-image: url(cards/Maria.PolCard.20.075.jpg) }
+.card.polcard.c21 { background-image: url(cards/Maria.PolCard.21.075.jpg) }
+.card.polcard.c22 { background-image: url(cards/Maria.PolCard.22.075.jpg) }
+.card.polcard.c23 { background-image: url(cards/Maria.PolCard.23.075.jpg) }
+.card.polcard.c24 { background-image: url(cards/Maria.PolCard.24.075.jpg) }
+.card.polcard.impelection { background-image: url(cards/Maria.PolCard.ImpElection.075.jpg) }
+.card.polcard.reverse.deck_1 { background-image: url(cards/Maria.PolCard.reverse.deck_1.075.jpg) }
+.card.polcard.reverse.deck_2 { background-image: url(cards/Maria.PolCard.reverse.deck_2.075.jpg) }
+.card.polcard.reverse.deck_3 { background-image: url(cards/Maria.PolCard.reverse.deck_3.075.jpg) }
+.card.polcard.reverse.deck_4 { background-image: url(cards/Maria.PolCard.reverse.deck_4.075.jpg) }
+
+/* @2x */
+
+@media (min-resolution: 97dpi) {
+	#map { background-image: url(Maria.Gameboard.150.jpg) }
+	#political_display { background-image: url(Maria.Political.Display.150.jpg) }
+
+	.card.tc.c01 { background-image: url(cards/Maria.TC.01.150.jpg) }
+	.card.tc.c02 { background-image: url(cards/Maria.TC.02.150.jpg) }
+	.card.tc.c03 { background-image: url(cards/Maria.TC.03.150.jpg) }
+	.card.tc.c04 { background-image: url(cards/Maria.TC.04.150.jpg) }
+	.card.tc.c05 { background-image: url(cards/Maria.TC.05.150.jpg) }
+	.card.tc.c06 { background-image: url(cards/Maria.TC.06.150.jpg) }
+	.card.tc.c07 { background-image: url(cards/Maria.TC.07.150.jpg) }
+	.card.tc.c08 { background-image: url(cards/Maria.TC.08.150.jpg) }
+	.card.tc.c09 { background-image: url(cards/Maria.TC.09.150.jpg) }
+	.card.tc.c10 { background-image: url(cards/Maria.TC.10.150.jpg) }
+	.card.tc.c11 { background-image: url(cards/Maria.TC.11.150.jpg) }
+	.card.tc.c12 { background-image: url(cards/Maria.TC.12.150.jpg) }
+	.card.tc.c13 { background-image: url(cards/Maria.TC.13.150.jpg) }
+	.card.tc.c14 { background-image: url(cards/Maria.TC.14.150.jpg) }
+	.card.tc.c15 { background-image: url(cards/Maria.TC.15.150.jpg) }
+	.card.tc.c16 { background-image: url(cards/Maria.TC.16.150.jpg) }
+	.card.tc.c17 { background-image: url(cards/Maria.TC.17.150.jpg) }
+	.card.tc.c18 { background-image: url(cards/Maria.TC.18.150.jpg) }
+	.card.tc.c19 { background-image: url(cards/Maria.TC.19.150.jpg) }
+	.card.tc.c20 { background-image: url(cards/Maria.TC.20.150.jpg) }
+	.card.tc.c21 { background-image: url(cards/Maria.TC.21.150.jpg) }
+	.card.tc.c22 { background-image: url(cards/Maria.TC.22.150.jpg) }
+	.card.tc.c23 { background-image: url(cards/Maria.TC.23.150.jpg) }
+	.card.tc.c24 { background-image: url(cards/Maria.TC.24.150.jpg) }
+	.card.tc.c25 { background-image: url(cards/Maria.TC.25.150.jpg) }
+	.card.tc.c26 { background-image: url(cards/Maria.TC.26.150.jpg) }
+	.card.tc.c27 { background-image: url(cards/Maria.TC.27.150.jpg) }
+	.card.tc.c28 { background-image: url(cards/Maria.TC.28.150.jpg) }
+	.card.tc.c29 { background-image: url(cards/Maria.TC.29.150.jpg) }
+	.card.tc.c30 { background-image: url(cards/Maria.TC.30.150.jpg) }
+	.card.tc.c31 { background-image: url(cards/Maria.TC.31.150.jpg) }
+	.card.tc.c32 { background-image: url(cards/Maria.TC.32.150.jpg) }
+	.card.tc.c33 { background-image: url(cards/Maria.TC.33.150.jpg) }
+	.card.tc.c34 { background-image: url(cards/Maria.TC.34.150.jpg) }
+	.card.tc.c35 { background-image: url(cards/Maria.TC.35.150.jpg) }
+	.card.tc.c36 { background-image: url(cards/Maria.TC.36.150.jpg) }
+	.card.tc.c37 { background-image: url(cards/Maria.TC.37.150.jpg) }
+	.card.tc.c38 { background-image: url(cards/Maria.TC.38.150.jpg) }
+	.card.tc.reverse.deck_1 { background-image: url(cards/Maria.TC.reverse.deck_1.150.jpg) }
+	.card.tc.reverse.deck_2 { background-image: url(cards/Maria.TC.reverse.deck_2.150.jpg) }
+	.card.tc.reverse.deck_3 { background-image: url(cards/Maria.TC.reverse.deck_3.150.jpg) }
+	.card.tc.reverse.deck_4 { background-image: url(cards/Maria.TC.reverse.deck_4.150.jpg) }
+
+	.card.polcard.c01 { background-image: url(cards/Maria.PolCard.01.150.jpg) }
+	.card.polcard.c02 { background-image: url(cards/Maria.PolCard.02.150.jpg) }
+	.card.polcard.c03 { background-image: url(cards/Maria.PolCard.03.150.jpg) }
+	.card.polcard.c04 { background-image: url(cards/Maria.PolCard.04.150.jpg) }
+	.card.polcard.c05 { background-image: url(cards/Maria.PolCard.05.150.jpg) }
+	.card.polcard.c06 { background-image: url(cards/Maria.PolCard.06.150.jpg) }
+	.card.polcard.c07 { background-image: url(cards/Maria.PolCard.07.150.jpg) }
+	.card.polcard.c08 { background-image: url(cards/Maria.PolCard.08.150.jpg) }
+	.card.polcard.c09 { background-image: url(cards/Maria.PolCard.09.150.jpg) }
+	.card.polcard.c10 { background-image: url(cards/Maria.PolCard.10.150.jpg) }
+	.card.polcard.c11 { background-image: url(cards/Maria.PolCard.11.150.jpg) }
+	.card.polcard.c12 { background-image: url(cards/Maria.PolCard.12.150.jpg) }
+	.card.polcard.c13 { background-image: url(cards/Maria.PolCard.13.150.jpg) }
+	.card.polcard.c14 { background-image: url(cards/Maria.PolCard.14.150.jpg) }
+	.card.polcard.c15 { background-image: url(cards/Maria.PolCard.15.150.jpg) }
+	.card.polcard.c16 { background-image: url(cards/Maria.PolCard.16.150.jpg) }
+	.card.polcard.c17 { background-image: url(cards/Maria.PolCard.17.150.jpg) }
+	.card.polcard.c18 { background-image: url(cards/Maria.PolCard.18.150.jpg) }
+	.card.polcard.c19 { background-image: url(cards/Maria.PolCard.19.150.jpg) }
+	.card.polcard.c20 { background-image: url(cards/Maria.PolCard.20.150.jpg) }
+	.card.polcard.c21 { background-image: url(cards/Maria.PolCard.21.150.jpg) }
+	.card.polcard.c22 { background-image: url(cards/Maria.PolCard.22.150.jpg) }
+	.card.polcard.c23 { background-image: url(cards/Maria.PolCard.23.150.jpg) }
+	.card.polcard.c24 { background-image: url(cards/Maria.PolCard.24.150.jpg) }
+	.card.polcard.impelection { background-image: url(cards/Maria.PolCard.ImpElection.150.jpg) }
+	.card.polcard.reverse.deck_1 { background-image: url(cards/Maria.PolCard.reverse.deck_1.150.jpg) }
+	.card.polcard.reverse.deck_2 { background-image: url(cards/Maria.PolCard.reverse.deck_2.150.jpg) }
+	.card.polcard.reverse.deck_3 { background-image: url(cards/Maria.PolCard.reverse.deck_3.150.jpg) }
+	.card.polcard.reverse.deck_4 { background-image: url(cards/Maria.PolCard.reverse.deck_4.150.jpg) }
+}
diff --git a/play.html b/play.html
index 394e46c..a7c8e9d 100644
--- a/play.html
+++ b/play.html
@@ -21,8 +21,11 @@
 		<details>
 			<summary><img src="/images/cog.svg"></summary>
 			<menu>
+				<li><a target="_blank" href="/maria/info/readme.html">Read me!</a>
+				<li class="separator">
 				<li><a target="_blank" href="/maria/info/MariaRules.pdf">Rules</a>
-				<li><a target="_blank" href="/maria/info/cards.html">Cards</a>
+				<li><a target="_blank" href="/maria/info/aid.html">Playing Aid</a>
+				<li><a target="_blank" href="/maria/info/cards.html">Political Cards</a>
 			</menu>
 		</details>
 	</div>
@@ -36,191 +39,52 @@
 <main>
 
 <div id="mapwrap">
-<div id="map">
-<div id="map_pieces">
-
-<div id="turn_marker" class="marker turn_marker" style="top:60px;right:200px;"></div>
-
-<div class="marker victory_marker_france" style="left:381px;top:571px;"></div>
-<div class="marker victory_marker_austria" style="left:229px;top:922px;"></div>
-
-<div style="position:absolute;top:500px;left:500px;width:500px;">
-<img src="pieces/cylinder_austria_1.svg" class="display:block">
-<img src="pieces/cylinder_austria_2.svg" class="display:block">
-<img src="pieces/cylinder_austria_3.svg" class="display:block">
-<img src="pieces/cylinder_austria_4.svg" class="display:block">
-<img src="pieces/cylinder_austria_5.svg" class="display:block">
-<img src="pieces/cylinder_austria_6.svg" class="display:block">
-<br>
-<img src="pieces/cylinder_bavaria_1.svg" class="display:block">
-<img src="pieces/cylinder_france_1.svg" class="display:block">
-<img src="pieces/cylinder_france_2.svg" class="display:block">
-<img src="pieces/cylinder_france_3.svg" class="display:block">
-<img src="pieces/cylinder_france_4.svg" class="display:block">
-<img src="pieces/cylinder_france_5.svg" class="display:block">
-<br>
-<img src="pieces/cylinder_pragmatic_1.svg" class="display:block">
-<img src="pieces/cylinder_pragmatic_2.svg" class="display:block">
-<img src="pieces/cylinder_pragmatic_3.svg" class="display:block">
-<img src="pieces/cylinder_prussia_1.svg" class="display:block">
-<img src="pieces/cylinder_prussia_2.svg" class="display:block">
-<img src="pieces/cylinder_prussia_3.svg" class="display:block">
-<img src="pieces/cylinder_prussia_4.svg" class="display:block">
-<img src="pieces/cylinder_saxony_1.svg" class="display:block">
-<br>
-<img src="pieces/disc_hussar.svg" class="display:block">
-<img src="pieces/disc_hussar.svg" class="display:block">
-<img src="pieces/cube_austria.svg" class="display:block">
-<img src="pieces/cube_bavaria.svg" class="display:block">
-<img src="pieces/cube_france.svg" class="display:block">
-<img src="pieces/cube_pragmatic.svg" class="display:block">
-<img src="pieces/cube_prussia.svg" class="display:block">
-<img src="pieces/cube_saxony.svg" class="display:block">
-</div>
-
-</div>
-</div>
+	<div id="map">
+		<div id="spaces"></div>
+		<div id="markers"></div>
+		<div id="pieces"></div>
+	</div>
 </div>
 
 <div id="political_display">
-<div id="display_track_saxony"></div>
-<div id="display_track_russia"></div>
-<div id="display_track_italy"></div>
-<div id="display_prussia"></div>
-<div id="display_france"></div>
-<div id="display_pragmatic_army"></div>
-<div id="display_austria"></div>
-
-<div class="card tc reverse deck_1" style="position:absolute;top:310px;left:40px;"></div>
-
+	<div id="display_track_saxony"></div>
+	<div id="display_track_russia"></div>
+	<div id="display_track_italy"></div>
+	<div id="display_prussia"></div>
+	<div id="display_france"></div>
+	<div id="display_pragmatic_army"></div>
+	<div id="display_austria"></div>
 </div>
 
-<div id="defend_panel" class="panel">
-<div id="defend_header" class="panel_header">Defend</div>
-<div id="defend" class="panel_body">
-
-
-<div class="card polcard c01"></div>
-<!--
-<div class="card polcard c02"></div>
-<div class="card polcard c03"></div>
-<div class="card polcard c04"></div>
-<div class="card polcard c05"></div>
-<div class="card polcard c06"></div>
-<div class="card polcard c07"></div>
-<div class="card polcard c08"></div>
-<div class="card polcard c09"></div>
-<div class="card polcard c10"></div>
-<div class="card polcard c11"></div>
-<div class="card polcard c12"></div>
-<div class="card polcard c13"></div>
-<div class="card polcard c14"></div>
-<div class="card polcard c15"></div>
-<div class="card polcard c16"></div>
-<div class="card polcard c17"></div>
-<div class="card polcard c18"></div>
-<div class="card polcard c19"></div>
-<div class="card polcard c20"></div>
-<div class="card polcard c21"></div>
-<div class="card polcard c22"></div>
-<div class="card polcard c23"></div>
-<div class="card polcard c24"></div>
-<div class="card polcard impelection"></div>
--->
-
-</div>
-</div>
-
-<div id="attack_panel" class="panel">
-<div id="attack_header" class="panel_header">Attack</div>
-<div id="attack" class="panel_body">
-</div>
-</div>
+<div id="power_panel_list">
 
 <div id="hand_prussia_panel" class="panel">
 <div id="hand_prussia_header" class="panel_header">Prussia</div>
 <div id="hand_prussia" class="panel_body">
-
-<div class="card tc c01"></div>
-<div class="card tc c02"></div>
-<div class="card tc c03"></div>
-<div class="card tc c04"></div>
-<div class="card tc c05"></div>
-<div class="card tc c06"></div>
-<div class="card tc c07"></div>
-<div class="card tc c08"></div>
-<div class="card tc c09"></div>
-<div class="card tc c10"></div>
-
 </div>
 </div>
 
 <div id="hand_bavaria_panel" class="panel">
 <div id="hand_bavaria_header" class="panel_header">Bavaria</div>
 <div id="hand_bavaria" class="panel_body">
-
-<div class="card tc c11"></div>
-<div class="card tc c12"></div>
-<div class="card tc c13"></div>
-<div class="card tc c14"></div>
-<div class="card tc c15"></div>
-<div class="card tc c16"></div>
-<div class="card tc c17"></div>
-<div class="card tc c18"></div>
-<div class="card tc c19"></div>
-<div class="card tc c20"></div>
-
 </div>
 </div>
 
 <div id="hand_france_panel" class="panel">
 <div id="hand_france_header" class="panel_header">France</div>
 <div id="hand_france" class="panel_body">
-
-<div class="card tc c21"></div>
-<div class="card tc c22"></div>
-<div class="card tc c23"></div>
-<div class="card tc c24"></div>
-<div class="card tc c25"></div>
-<div class="card tc c26"></div>
-<div class="card tc c27"></div>
-<div class="card tc c28"></div>
-<div class="card tc c29"></div>
-
 </div>
 </div>
 
 <div id="hand_saxony_panel" class="panel">
 <div id="hand_saxony_header" class="panel_header">Saxony</div>
 <div id="hand_saxony" class="panel_body">
-
-<div class="card tc c30"></div>
-<div class="card tc c31"></div>
-<div class="card tc c32"></div>
-<div class="card tc c33"></div>
-<div class="card tc c34"></div>
-<div class="card tc c35"></div>
-<div class="card tc c36"></div>
-<div class="card tc c37"></div>
-<div class="card tc c38"></div>
-
 </div>
 </div>
 
 <div id="hand_pragmatic_army_panel" class="panel">
 <div id="hand_pragmatic_army_header" class="panel_header">Pragmatic Army</div>
 <div id="hand_pragmatic_army" class="panel_body">
-
-<div class="card tc reverse deck_1"></div>
-<div class="card tc reverse deck_1"></div>
-<div class="card tc reverse deck_2"></div>
-<div class="card tc reverse deck_1"></div>
-<div class="card tc reverse deck_3"></div>
-<div class="card tc reverse deck_1"></div>
-<div class="card tc reverse deck_4"></div>
-<div class="card tc reverse deck_4"></div>
-<div class="card tc reverse deck_1"></div>
-
 </div>
 </div>
 
@@ -230,6 +94,8 @@
 </div>
 </div>
 
+</div>
+
 </main>
 
 <footer id="status"></footer>