main { background-color: slategray; }
aside { background-color: darkgray; }
header { background-color: gainsboro; }
body.France header.your_turn { background-color: lightskyblue; }
body.Britain header.your_turn { background-color: salmon; }
#role_France, #log .h2.france { background-color: #bdf; }
#role_Britain, #log .h2.britain { background-color: #fcb; }
aside { min-width: 220px; }

:root {
	--highlight-color: yellow;
	--selected-color: blue;
}

.role_vp { float: right; }

.checked::before { content: "\2714  " }
.unchecked::before { content: "\2714  "; color:transparent; }

@media (max-width: 600px) {
	#stack_menu { display: none }
	#piece_button { display: none }
}

/* LOG */

#log { background-color: floralwhite; }
#log > div { padding-left: 20px; text-indent: -12px; }
#log .h1 { background-color: tan; font-weight: bold; padding-top:2px; padding-bottom:2px; text-align: center; }
#log .h2 { background-color: wheat; padding-top:2px; padding-bottom:2px; text-align: center; }
#log .h3 { background-color: antiquewhite; padding-top:2px; padding-bottom:2px; text-align: center; }
#log .b { text-transform: uppercase; }

#log .tip { color: blue; }
#log .tip:hover { text-decoration: underline; }
#log .spacetip:hover { text-decoration: underline; cursor: pointer; }

#log .indent {
	padding-left: 12px;
	text-indent: -12px;
}

.card_info {
	position: relative;
}

.card_info:hover #deck_size {
	visibility: visible;
}

#deck_size {
	visibility: hidden;
	position: absolute;
	right: 5px;
	bottom: 3px;
}

/* CARDS */

.hand {
	margin: 10px auto;
	padding: 15px;
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	justify-content: center;
	min-width: calc(242px * 3 + 30px + 20px * 2);
	max-width: calc(2550px - 30px);
	min-height: 340px;
}

@media (max-width: 800px) {
	.hand {
		min-width: calc(2550px - 30px);
	}
}

.card {
	width: 240px;
	height: 336px;
	border-radius: 16px;
	box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
	transition: transform 100ms;
	background-color: #f1ead0;
	background-size: cover;
	background-repeat: no-repeat;
	border: 1px solid #655c4d;

}

.card.highlight {
	box-shadow: 0 0 0 2px yellow;
}

.card.enabled {
	cursor: pointer;
}

.card.enabled:hover, .card.selected {
	transform: translateY(-10px);
}

.hand .card { display: none; }
.hand .card.show { display: block; }

.card_info {
	border-bottom: 1px solid black;
	padding: 15px 0;
}

.card_info .card {
	width: 120px;
	height: 168px;
	border-radius: 8px;
	margin: 0 auto;
}

@media (max-height: 800px) {
	.card_info {
		display: none;
	}
}

#tooltip {
	display: none;
	pointer-events: none;
	position: fixed;
	z-index: 600;
	right: 240px;
	top: 60px;
}

#tooltip.show {
	display: block;
}

@media (max-width: 800px) {
	#tooltip {
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}
}

/* CARD LIST DIALOGS */

.card_list_dialog {
	position: fixed;
	background-color: floralwhite;
	width: 300px;
	border: 1px solid black;
	box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);
	user-select: none;
}
.card_list_header {
	cursor: move;
	border-bottom: 1px solid black;
	background-color: tan;
	padding: 5px 10px;
}
.card_list_x {
	cursor: pointer;
	float: right;
	padding: 0px 2px;
	margin: 5px 5px;
}
.card_list_x:hover {
	background-color: black;
	color: white;
}
.card_list_body {
	padding: 5px 10px;
	overflow-y: auto;
	max-height: 500px;
}
.card_list_body div {
	text-indent: -30px;
	margin-left: 30px;
}

#removed { top: 120px; left: 50px; z-index: 498; }
#discard { top: 145px; left: 75px; z-index: 499; }

@media (max-width: 400px) {
	.card_list_dialog {
		position: static;
		grid-column: 1;
		grid-row: 2;
		width: auto;
		box-shadow: none;
		border: none;
	}
	.card_list_body {
		max-height: none;
	}
}

/* CARD MENU */

#popup {
	box-shadow: 2px 2px 4px #0004;
	min-width: 160px;
	max-width: 250px;
}

#popup li.title {
	text-align: center;
	white-space: normal;
}

body:not(.shift) #popup li[data-action="discard"] { display: none; }

/* MAP */

#mapwrap {
	position: relative;
	box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
	width: 2550px;
	height: 1650px;
}

#map {
	position: absolute;
	width: 2550px;
	height: 1650px;
	background-color: #ffedb3;
	background-size: cover;
	background-repeat: no-repeat;
}

#map.hide_pieces #pieces { display: none; }
#map.hide_markers #markers { display: none; }

#events {
	position: absolute;
	display: flex;
	top: 230px;
	left: 190px;
}

.event {
	margin: 3px;
}

#focus {
	position: absolute;
	background-color: black;
	opacity: 50%;
	box-shadow: 0 0 5px black;
	z-index: 200;
}

.offmap { display: none; }

.highlight {
	cursor: pointer;
	z-index: 200;
}

body.shift .box.highlight,
body.shift .mountain.highlight,
body.shift .wilderness.highlight,
body.shift .cultivated.highlight
{
	pointer-events: none;
	z-index: 0;
}

/* SPACES */

.leader-box { background-repeat: no-repeat; background-size: 32px; }
.leader-box.french { background-position: center bottom 35px; }
.leader-box.british { background-position: center bottom 30px; }
.leader-box.dead { background-image: url(/images/hasty-grave.svg); opacity: 20%; }
.leader-box.pool { background-image: url(/images/swap-bag.svg);  opacity: 40%;}
.leader-box.unavailable { background-image: url(/images/swap-bag.svg); opacity: 20%; }

.wilderness, .cultivated, .box, .militia-box, .leader-box {
	position: absolute;
	box-sizing: border-box;
	border: 4px solid transparent;
}
.wilderness {
	border-radius: 50%;
}

.mountain {
	position: absolute;
	border-radius: 66% 34% 0 0;
	background-size: cover;
	background-repeat: no-repeat;
}
.mountain.highlight {
	background-image: url(mountain-highlight.svg);
	filter: drop-shadow(0 0 2px black);
}
.mountain.danger {
	background-image: url(mountain-danger.svg);
	filter: drop-shadow(0 0 2px black);
}
.mountain.selected {
	background-image: url(mountain-selected.svg);
	filter: drop-shadow(0 0 2px black);
}
.mountain.british_supply {
	background-image: url(mountain-supply-british.svg);
	filter: none;
}
.mountain.french_supply {
	background-image: url(mountain-supply-french.svg);
	filter: none;
}
.mountain.british_supply.french_supply {
	background-image: url(mountain-supply-both.svg);
	filter: none;
}
.mountain.no_supply {
	background-image: none;
}
.mountain.tip {
	background-image: url(mountain-tip.svg);
	z-index: 100;
}

.wilderness.highlight, .cultivated.highlight, .box.highlight, .militia-box.highlight {
	border-color: yellow;
	box-shadow: inset 0 0 3px black, 0 0 3px black;
}
.wilderness.selected, .cultivated.selected, .box.selected, .militia-box.selected {
	border-color: white;
	box-shadow: inset 0 0 3px black, 0 0 3px black;
}
.wilderness.danger, .cultivated.danger, .box.danger {
	box-shadow: inset 0 0 0 2px red, inset 0 0 3px 2px black, 0 0 3px black;
}
.wilderness.tip, .cultivated.tip, .box.tip, .militia-box.tip {
	border-color: white;
	box-shadow: 0 0 3px black, inset 0 0 3px black;
	z-index: 100;
}

.wilderness.french_supply, .cultivated.french_supply, .box.french_supply {
	border-width: 6px;
	border-top-color: blue;
	border-left-color: blue;
	border-bottom-color: transparent;
	border-right-color: transparent;
	box-shadow: none;
}

.wilderness.british_supply, .cultivated.british_supply, .box.british_supply {
	border-width: 6px;
	border-top-color: transparent;
	border-left-color: transparent;
	border-bottom-color: red;
	border-right-color: red;
	box-shadow: none;
}

.wilderness.british_supply.french_supply, .cultivated.british_supply.french_supply, .box.british_supply.french_supply {
	border-width: 6px;
	border-top-color: blue;
	border-left-color: blue;
	border-bottom-color: red;
	border-right-color: red;
	box-shadow: none;
}

.wilderness.no_supply, .cultivated.no_supply, .box.no_supply {
	border-color: transparent;
	box-shadow: none;
}

/* COUNTERS */

.leader, .unit, .marker {
	transition: left 200ms, top 200ms;
	position: absolute;
	background-size: auto 100%;
	background-repeat: no-repeat;
}

.leader.activated, .unit.activated {
	transform: rotate(20deg);
}

.leader.inside, .unit.inside {
	filter: grayscale(50%);
}

/* FLAT STYLE */

body.flat .leader,
body.flat .unit,
body.flat .marker,
body.flat .event {
	border-width: 1px;
	border-style: solid;
}

body.flat .leader.highlight,
body.flat .unit.highlight {
	box-shadow: 0 0 0 3px var(--highlight-color);
}

body.flat .leader.selected,
body.flat .unit.selected {
	box-shadow: 0 0 0 3px var(--selected-color);
	border-color: var(--selected-color) !important;
}

/* BEVEL STYLE ( top right bottom left ) */

body.bevel .leader,
body.bevel .unit,
body.bevel .marker,
body.bevel .event {
	border-width: 2px;
	border-style: solid;
}

/* TRACKS */

#bpa_reluctant {
	position: absolute;
	top: 1228px;
	left: 48px;
	width: 93px;
	height: 128px;
}

#bpa_supportive {
	position: absolute;
	top: 1356px;
	left: 48px;
	width: 93px;
	height: 128px;
}

#bpa_enthusiastic {
	position: absolute;
	top: 1484px;
	left: 48px;
	width: 93px;
	height: 128px;
}

#season_marker.early { top: 104px; }
#season_marker.late { top: 160px; }
#season_marker.year_1755 { left: 220px; }
#season_marker.year_1756 { left: 304px; }
#season_marker.year_1757 { left: 388px; }
#season_marker.year_1758 { left: 472px; }
#season_marker.year_1759 { left: 556px; }
#season_marker.year_1760 { left: 640px; }
#season_marker.year_1761 { left: 725px; }
#season_marker.year_1762 { left: 809px; }

#vp_marker { left: 76px; top: 39px; }
#vp_marker.french_vp_10 { top: 40px; }
#vp_marker.french_vp_9 { top: 95px; }
#vp_marker.french_vp_8 { top: 150px; left: 82px; }
#vp_marker.french_vp_7 { top: 205px; }
#vp_marker.french_vp_6 { top: 260px; }
#vp_marker.french_vp_5 { top: 315px; left: 82px; }
#vp_marker.french_vp_4 { top: 371px; }
#vp_marker.french_vp_3 { top: 426px; }
#vp_marker.french_vp_2 { top: 481px; }
#vp_marker.french_vp_1 { top: 537px; left: 82px; }
#vp_marker.vp_0 { top: 592px; } /* 0 */
#vp_marker.british_vp_1 { top: 647px; }
#vp_marker.british_vp_2 { top: 702px; }
#vp_marker.british_vp_3 { top: 757px; }
#vp_marker.british_vp_4 { top: 812px; }
#vp_marker.british_vp_5 { top: 867px; left: 82px; }
#vp_marker.british_vp_6 { top: 923px; }
#vp_marker.british_vp_7 { top: 978px; }
#vp_marker.british_vp_8 { top: 1033px; }
#vp_marker.british_vp_9 { top: 1089px; }
#vp_marker.british_vp_10 { top: 1144px; }

#pa_marker { left: 70px; }
#pa_marker.reluctant { top: 1270px; }
#pa_marker.supportive { top: 1398px; }
#pa_marker.enthusiastic { top: 1526px; }

/* MARKERS */

.marker{width:45px;height:45px;}
.marker.small{width:36px;height:36px}

.event{width:54px;height:54px;background-size:cover;display:none}
.event.show{display:block}

.m1s{width:45px;height:45px;background-position:-0px 0}
.m1{width:45px;height:45px;background-position:-0px 0}
.m1.reduced{background-position:-45px 0}
.m2s{width:45px;height:45px;background-position:-45px 0}
.m2{width:45px;height:45px;background-position:-90px 0}
.m2.reduced{background-position:-135px 0}
.m3s{width:45px;height:45px;background-position:-90px 0}
.m3{width:45px;height:45px;background-position:-180px 0}
.m3.reduced{background-position:-225px 0}
.m4s{width:45px;height:45px;background-position:-135px 0}
.m4{width:45px;height:45px;background-position:-270px 0}
.m4.reduced{background-position:-315px 0}
.m5s{width:45px;height:45px;background-position:-180px 0}
.m5{width:45px;height:45px;background-position:-360px 0}
.m5.reduced{background-position:-405px 0}
.m6s{width:45px;height:45px;background-position:-225px 0}
.m6{width:45px;height:45px;background-position:-450px 0}
.m6.reduced{background-position:-495px 0}
.m7s{width:45px;height:45px;background-position:-270px 0}
.m7{width:45px;height:45px;background-position:-540px 0}
.m7.reduced{background-position:-585px 0}
.m8s{width:45px;height:45px;background-position:-315px 0}
.m8{width:45px;height:45px;background-position:-630px 0}
.m8.reduced{background-position:-675px 0}
.m9s{width:45px;height:45px;background-position:-360px 0}
.m9{width:45px;height:45px;background-position:-720px 0}
.m9.reduced{background-position:-765px 0}
.m10s{width:45px;height:45px;background-position:-405px 0}
.m10{width:45px;height:45px;background-position:-810px 0}
.m10.reduced{background-position:-855px 0}
.m11s{width:45px;height:45px;background-position:-450px 0}
.m11{width:45px;height:45px;background-position:-900px 0}
.m11.reduced{background-position:-945px 0}
.m12s{width:45px;height:45px;background-position:-495px 0}
.m12{width:45px;height:45px;background-position:-990px 0}
.m12.reduced{background-position:-1035px 0}
.m13s{width:45px;height:45px;background-position:-540px 0}
.m13{width:45px;height:45px;background-position:-1080px 0}
.m13.reduced{background-position:-1125px 0}
.m14s{width:45px;height:45px;background-position:-585px 0}
.m14{width:45px;height:45px;background-position:-1170px 0}
.m14.reduced{background-position:-1215px 0}
.m15s{width:45px;height:45px;background-position:-630px 0}
.m15{width:45px;height:45px;background-position:-1260px 0}
.m15.reduced{background-position:-1305px 0}
.m16s{width:45px;height:45px;background-position:-675px 0}
.m16{width:45px;height:45px;background-position:-1350px 0}
.m16.reduced{background-position:-1395px 0}
.m17s{width:45px;height:45px;background-position:-720px 0}
.m17{width:45px;height:45px;background-position:-1440px 0}
.m17.reduced{background-position:-1485px 0}
.t1s{width:54px;height:117px;background-position:-0px 0}
.t2s{width:54px;height:117px;background-position:-54px 0}
.t3s{width:54px;height:117px;background-position:-108px 0}
.t4s{width:54px;height:117px;background-position:-162px 0}
.t5s{width:54px;height:117px;background-position:-216px 0}
.t6s{width:54px;height:117px;background-position:-270px 0}
.t7s{width:54px;height:117px;background-position:-324px 0}
.t8s{width:54px;height:117px;background-position:-378px 0}
.t9s{width:54px;height:117px;background-position:-432px 0}
.t10s{width:54px;height:117px;background-position:-486px 0}
.c1{border-radius:50%;width:48px;height:48px;background-position:-0px 0}
.c1.reduced{background-position:-48px 0}
.c2{border-radius:50%;width:48px;height:48px;background-position:-96px 0}
.c2.reduced{background-position:-144px 0}
.c3{border-radius:50%;width:48px;height:48px;background-position:-192px 0}
.c3.reduced{background-position:-240px 0}
.c4{border-radius:50%;width:48px;height:48px;background-position:-288px 0}
.c4.reduced{background-position:-336px 0}
.c5{border-radius:50%;width:48px;height:48px;background-position:-384px 0}
.c5.reduced{background-position:-432px 0}
.c6{border-radius:50%;width:48px;height:48px;background-position:-480px 0}
.c6.reduced{background-position:-528px 0}
.c7{border-radius:50%;width:48px;height:48px;background-position:-576px 0}
.c7.reduced{background-position:-624px 0}
.c8{border-radius:50%;width:48px;height:48px;background-position:-672px 0}
.c8.reduced{background-position:-720px 0}

/* COLORS */

.leader{background-color:#f0f0f0}
body.bevel .leader{border-color:#f5f5f5 #d8d8d8 #d8d8d8 #f5f5f5;box-shadow:0 0 0 1px #707070}
body.flat .leader{border-color:#707070}
.event{background-color:#f0f0f0}
body.bevel .event{border-color:#f5f5f5 #d8d8d8 #d8d8d8 #f5f5f5;box-shadow:0 0 0 1px #707070}
body.flat .event{border-color:#707070}
.marker.amphib{background-color:#f0f0f0}
body.bevel .marker.amphib{border-color:#f5f5f5 #d8d8d8 #d8d8d8 #f5f5f5;box-shadow:0 0 0 1px #707070}
body.flat .marker.amphib{border-color:#707070}
.marker.british_allied{background-color:#ffd990}
body.bevel .marker.british_allied{border-color:#fff8af #dfb86f #dfb86f #fff8af;box-shadow:0 0 0 1px #7f580f}
body.flat .marker.british_allied{border-color:#7f580f}
.marker.french_allied{background-color:#ffd990}
body.bevel .marker.french_allied{border-color:#fff8af #dfb86f #dfb86f #fff8af;box-shadow:0 0 0 1px #7f580f}
body.flat .marker.french_allied{border-color:#7f580f}
.marker.british_stockade{background-color:#e7e2c5}
body.bevel .marker.british_stockade{border-color:#ffffe3 #c7c2a4 #c7c2a4 #ffffe3;box-shadow:0 0 0 1px #676244}
body.flat .marker.british_stockade{border-color:#676244}
.marker.french_stockade{background-color:#e7e2c5}
body.bevel .marker.french_stockade{border-color:#ffffe3 #c7c2a4 #c7c2a4 #ffffe3;box-shadow:0 0 0 1px #676244}
body.flat .marker.french_stockade{border-color:#676244}
.marker.british_raided{background-color:#f78b33}
body.bevel .marker.british_raided{border-color:#ffaa52 #d76a12 #d76a12 #ffaa52;box-shadow:0 0 0 1px #770a00}
body.flat .marker.british_raided{border-color:#770a00}
.marker.french_raided{background-color:#f78b33}
body.bevel .marker.french_raided{border-color:#ffaa52 #d76a12 #d76a12 #ffaa52;box-shadow:0 0 0 1px #770a00}
body.flat .marker.french_raided{border-color:#770a00}
.marker.siege_0{background-color:#fff460}
body.bevel .marker.siege_0{border-color:#ffff78 #dfd43f #dfd43f #ffff78;box-shadow:0 0 0 1px #7f7400}
body.flat .marker.siege_0{border-color:#7f7400}
.marker.siege_1{background-color:#fff460}
body.bevel .marker.siege_1{border-color:#ffff78 #dfd43f #dfd43f #ffff78;box-shadow:0 0 0 1px #7f7400}
body.flat .marker.siege_1{border-color:#7f7400}
.marker.siege_2{background-color:#fff460}
body.bevel .marker.siege_2{border-color:#ffff78 #dfd43f #dfd43f #ffff78;box-shadow:0 0 0 1px #7f7400}
body.flat .marker.siege_2{border-color:#7f7400}
.marker.fieldworks{background-color:#e3dfd6}
body.bevel .marker.fieldworks{border-color:#fffef5 #c3beb5 #c3beb5 #fffef5;box-shadow:0 0 0 1px #635e55}
body.flat .marker.fieldworks{border-color:#635e55}
.unit.british{background-color:#eac99e}
body.bevel .unit.british{border-color:#ffe8bd #caa87d #caa87d #ffe8bd;box-shadow:0 0 0 1px #6a481d}
body.flat .unit.british{border-color:#6a481d}
.marker.british_fort{background-color:#ef473e}
body.bevel .marker.british_fort{border-color:#ff665d #cf261d #cf261d #ff665d;box-shadow:0 0 0 1px #770000}
body.flat .marker.british_fort{border-color:#770000}
.marker.british_fort_uc{background-color:#f15a4f}
body.bevel .marker.british_fort_uc{border-color:#ff796e #d1392e #d1392e #ff796e;box-shadow:0 0 0 1px #710000}
body.flat .marker.british_fort_uc{border-color:#710000}
.unit.french{background-color:#aae0fa}
body.bevel .unit.french{border-color:#c9ffff #89c0da #89c0da #c9ffff;box-shadow:0 0 0 1px #29607a}
body.flat .unit.french{border-color:#29607a}
.marker.french_fort{background-color:#007ec5}
body.bevel .marker.french_fort{border-color:#1f9ee5 #005ea5 #005ea5 #1f9ee5;box-shadow:0 0 0 1px #001d64}
body.flat .marker.french_fort{border-color:#001d64}
.marker.french_fort_uc{background-color:#0093d6}
body.bevel .marker.french_fort_uc{border-color:#1fb3f6 #0073b6 #0073b6 #1fb3f6;box-shadow:0 0 0 1px #002467}
body.flat .marker.french_fort_uc{border-color:#002467}
.marker.season_french_first{background-color:#0072bb}
body.bevel .marker.season_french_first{border-color:#1f92db #00529b #00529b #1f92db;box-shadow:0 0 0 1px #001963}
body.flat .marker.season_french_first{border-color:#001963}
.marker.season_british_first{background-color:#da2127}
body.bevel .marker.season_british_first{border-color:#fa4046 #ba0006 #ba0006 #fa4046;box-shadow:0 0 0 1px #810000}
body.flat .marker.season_british_first{border-color:#810000}
.marker.provincial_assemblies{background-color:#004892}
body.bevel .marker.provincial_assemblies{border-color:#1f68b2 #002872 #002872 #1f68b2;box-shadow:0 0 0 1px #000d57}
body.flat .marker.provincial_assemblies{border-color:#000d57}
.marker.vps{background-color:#b4883d}
body.bevel .marker.vps{border-color:#d4a75c #94671c #94671c #d4a75c;box-shadow:0 0 0 1px #340700}
body.flat .marker.vps{border-color:#340700}

/* action highlight */
body.bevel .leader.highlight{box-shadow:0 0 0 1px #707070,0 0 0 4px var(--highlight-color)}
body.bevel .unit.british.highlight{box-shadow:0 0 0 1px #6a481d,0 0 0 4px var(--highlight-color)}
body.bevel .unit.french.highlight{box-shadow:0 0 0 1px #29607a,0 0 0 4px var(--highlight-color)}

/* selected */
body.bevel .leader.selected{box-shadow:0 0 0 3px var(--selected-color)}
body.bevel .unit.british.selected{box-shadow:0 0 0 3px var(--selected-color)}
body.bevel .unit.french.selected{box-shadow:0 0 0 3px var(--selected-color)}