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 { width: 220px; }

.role_vp { float: right; }

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

/* 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: 15px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	min-height: 370px;
}

.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 { margin: 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;
}

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

#tooltip.show {
	display: block;
}

/* CARD LIST DIALOGS */

.card_list_dialog {
	position: fixed;
	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;
	background-color: floralwhite;
	overflow-y: scroll;
	max-height: 500px;
}
.card_list_body div {
	text-indent: -30px;
	margin-left: 30px;
}

#removed { top: 100px; left: 100px; z-index: 98; }
#discard { top: 100px; left: 425px; z-index: 99; }

/* CARD MENU */

#popup {
	position: fixed;
	user-select: none;
	background-color: white;
	left: 10px;
	top: 100px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3);
	z-index: 300;
	min-width: 20ex;
	white-space: nowrap;
	display: none;
	border: 1px solid black;
}
#popup div { padding: 3pt 8pt; color: gray; display: none; }
#popup div.enabled { color: black; display: block; }
#popup div.enabled:hover { background-color: black; color: white; }
#popup div.always { display: block; }
body:not(.shift) #popup #menu_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: 100;
}

.offmap { display: none; }

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

body.shift .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;
	border: 5px solid transparent;
}
.wilderness {
	border-radius: 50%;
}

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

.cultivated.highlight, .box.highlight, .militia-box.highlight {
	border-color: white;
	box-shadow: 0 0 5px white;
}
.wilderness.highlight {
	border-color: white;
}
.wilderness.selected, .cultivated.selected, .box.selected, .militia-box.selected {
	border-color: crimson;
}
.wilderness.tip, .cultivated.tip, .box.tip, .militia-box.tip {
	border-color: yellow;
	border-style: dashed;
	z-index: 100;
}

.wilderness.french_supply, .cultivated.french_supply, .box.french_supply {
	border-top-color: #0092d5;
	border-left-color: #0092d5;
}

.wilderness.british_supply, .cultivated.british_supply, .box.british_supply {
	border-bottom-color: #f0594e;
	border-right-color: #f0594e;
}

/* 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 2px yellow;
}

body.flat .leader.selected,
body.flat .unit.selected {
	box-shadow:0 0 0 2px crimson;
}

/* 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.bevel .leader.highlight{box-shadow:0 0 0 1px #707070,0 0 0 3px yellow}
body.bevel .leader.selected{box-shadow:0 0 0 1px #707070,0 0 0 3px crimson}
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.bevel .event.highlight{box-shadow:0 0 0 1px #707070,0 0 0 3px yellow}
body.bevel .event.selected{box-shadow:0 0 0 1px #707070,0 0 0 3px crimson}
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.bevel .marker.amphib.highlight{box-shadow:0 0 0 1px #707070,0 0 0 3px yellow}
body.bevel .marker.amphib.selected{box-shadow:0 0 0 1px #707070,0 0 0 3px crimson}
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.bevel .marker.british_allied.highlight{box-shadow:0 0 0 1px #7f580f,0 0 0 3px yellow}
body.bevel .marker.british_allied.selected{box-shadow:0 0 0 1px #7f580f,0 0 0 3px crimson}
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.bevel .marker.french_allied.highlight{box-shadow:0 0 0 1px #7f580f,0 0 0 3px yellow}
body.bevel .marker.french_allied.selected{box-shadow:0 0 0 1px #7f580f,0 0 0 3px crimson}
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.bevel .marker.british_stockade.highlight{box-shadow:0 0 0 1px #676244,0 0 0 3px yellow}
body.bevel .marker.british_stockade.selected{box-shadow:0 0 0 1px #676244,0 0 0 3px crimson}
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.bevel .marker.french_stockade.highlight{box-shadow:0 0 0 1px #676244,0 0 0 3px yellow}
body.bevel .marker.french_stockade.selected{box-shadow:0 0 0 1px #676244,0 0 0 3px crimson}
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.bevel .marker.british_raided.highlight{box-shadow:0 0 0 1px #770a00,0 0 0 3px yellow}
body.bevel .marker.british_raided.selected{box-shadow:0 0 0 1px #770a00,0 0 0 3px crimson}
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.bevel .marker.french_raided.highlight{box-shadow:0 0 0 1px #770a00,0 0 0 3px yellow}
body.bevel .marker.french_raided.selected{box-shadow:0 0 0 1px #770a00,0 0 0 3px crimson}
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.bevel .marker.siege_0.highlight{box-shadow:0 0 0 1px #7f7400,0 0 0 3px yellow}
body.bevel .marker.siege_0.selected{box-shadow:0 0 0 1px #7f7400,0 0 0 3px crimson}
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.bevel .marker.siege_1.highlight{box-shadow:0 0 0 1px #7f7400,0 0 0 3px yellow}
body.bevel .marker.siege_1.selected{box-shadow:0 0 0 1px #7f7400,0 0 0 3px crimson}
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.bevel .marker.siege_2.highlight{box-shadow:0 0 0 1px #7f7400,0 0 0 3px yellow}
body.bevel .marker.siege_2.selected{box-shadow:0 0 0 1px #7f7400,0 0 0 3px crimson}
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.bevel .marker.fieldworks.highlight{box-shadow:0 0 0 1px #635e55,0 0 0 3px yellow}
body.bevel .marker.fieldworks.selected{box-shadow:0 0 0 1px #635e55,0 0 0 3px crimson}
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.bevel .unit.british.highlight{box-shadow:0 0 0 1px #6a481d,0 0 0 3px yellow}
body.bevel .unit.british.selected{box-shadow:0 0 0 1px #6a481d,0 0 0 3px crimson}
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.bevel .marker.british_fort.highlight{box-shadow:0 0 0 1px #770000,0 0 0 3px yellow}
body.bevel .marker.british_fort.selected{box-shadow:0 0 0 1px #770000,0 0 0 3px crimson}
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.bevel .marker.british_fort_uc.highlight{box-shadow:0 0 0 1px #710000,0 0 0 3px yellow}
body.bevel .marker.british_fort_uc.selected{box-shadow:0 0 0 1px #710000,0 0 0 3px crimson}
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.bevel .unit.french.highlight{box-shadow:0 0 0 1px #29607a,0 0 0 3px yellow}
body.bevel .unit.french.selected{box-shadow:0 0 0 1px #29607a,0 0 0 3px crimson}
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.bevel .marker.french_fort.highlight{box-shadow:0 0 0 1px #001d64,0 0 0 3px yellow}
body.bevel .marker.french_fort.selected{box-shadow:0 0 0 1px #001d64,0 0 0 3px crimson}
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.bevel .marker.french_fort_uc.highlight{box-shadow:0 0 0 1px #002467,0 0 0 3px yellow}
body.bevel .marker.french_fort_uc.selected{box-shadow:0 0 0 1px #002467,0 0 0 3px crimson}
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.bevel .marker.season_french_first.highlight{box-shadow:0 0 0 1px #001963,0 0 0 3px yellow}
body.bevel .marker.season_french_first.selected{box-shadow:0 0 0 1px #001963,0 0 0 3px crimson}
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.bevel .marker.season_british_first.highlight{box-shadow:0 0 0 1px #810000,0 0 0 3px yellow}
body.bevel .marker.season_british_first.selected{box-shadow:0 0 0 1px #810000,0 0 0 3px crimson}
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.bevel .marker.provincial_assemblies.highlight{box-shadow:0 0 0 1px #000d57,0 0 0 3px yellow}
body.bevel .marker.provincial_assemblies.selected{box-shadow:0 0 0 1px #000d57,0 0 0 3px crimson}
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.bevel .marker.vps.highlight{box-shadow:0 0 0 1px #340700,0 0 0 3px yellow}
body.bevel .marker.vps.selected{box-shadow:0 0 0 1px #340700,0 0 0 3px crimson}
body.flat .marker.vps{border-color:#340700}

/* MOBILE PHONE LAYOUT */

@media (max-width: 640px) {
	.hand .card {
		width: 120px;
		height: 168px;
		border-radius: 8px;
	}
	.hand {
		min-height: 168px;
	}
	#tooltip {
		top: 10px;
		right: 10px;
	}
	#removed, #discard {
		position: static;
		box-shadow: none;
		border-top: none;
		width: auto;
	}
	#removed { grid-row: 3; }
	#discard { grid-row: 4; }
}