main {
	background-color: slategray;
}

.x_britain { background-color: hsl(15, 88%, 66%) }
.x_america { background-color: hsl(211, 52%, 64%) }

body.Britain header.your_turn { background-color: hsl(15, 90%, 75%) }
body.America header.your_turn { background-color: hsl(211, 50%, 75%) }

#role_Britain { background-color: hsl(15, 90%, 80%) }
#role_America { background-color: hsl(211, 50%, 80%) }

#log { background-color: hsl(35, 53%, 89%); }
#turn_info { background-color: hsl(35, 25%, 50%); }

#log .h { border-top: 1px solid black; border-bottom: 1px solid black; text-align: center; }
#log .h.turn { background-color: hsl(35, 45%, 70%); }
#log .h.britain { background-color: hsl(15, 90%, 80%) }
#log .h.america { background-color: hsl(211, 50%, 80%) }

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

#tooltip.show {
	display: block;
}

#mapwrap {
	width: 1650px;
	height: 2550px;
}

#map {
	width: 1650px;
	height: 2550px;
	background-size: 1650px 2550px;
	box-shadow: 1px 1px 8px #0008;
}

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

@media (max-height: 800px) {
	#turn_info {
		display: none;
	}
}

/* CARD ACTION POPUP MENU */

#popup { max-width: 250px; }
#popup li.title { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
#popup li.disabled { display: none }

#popup li.title {
	background-color: moccasin;
}

/* SPACES */

.space {
	position: absolute;
	border: 5px solid transparent;
}

.space.regular {
	border-radius: 50%;
}

.space.fortified_port {
	transform: rotate(45deg);
}

.space.sea {
	border-radius: 12px;
}

.space.action {
	border-color: white;
	box-shadow: 0 0 2px 1px #000c, inset 0 0 2px 1px #000c;
}

.space.selected {
	border-color: aqua;
	box-shadow: 0 0 2px 1px #000c, inset 0 0 2px 1px #000c;
}

.space.action.Canada { background-color: #e4795080 }
.space.action.NY { background-color: #52954680 }
.space.action.NH { background-color: #ded36380 }
.space.action.MA { background-color: #6e407a80 }
.space.action.CT { background-color: #d6b5be80 }
.space.action.RI { background-color: #31a9d080 }
.space.action.PA { background-color: #64408980 }
.space.action.NJ { background-color: #ca4d5b80 }
.space.action.MD { background-color: #e5a02380 }
.space.action.DE { background-color: #dcca8780 }
.space.action.VA { background-color: #409d8280 }
.space.action.NC { background-color: #d9819480 }
.space.action.SC { background-color: #ffe05d80 }
.space.action.GA { background-color: #6d9ab480 }

/* MARKERS */

.marker {
	position: absolute;
	background-size: 100%;
	border: 1px solid black;
	box-shadow: 1px 1px 4px #0008;
}

.marker.large {
	width: 55px;
	height: 55px;
}

.marker.tall {
	width: 64px;
	height: 130px;
}

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

.marker.pc {
	pointer-events: none;
	border: none;
	box-shadow: none;
	width: 58px;
	height: 66px;
	filter: drop-shadow(1px 1px 2px #0008);
}

.marker.congress {
	pointer-events: none;
}

.marker.cu {
	pointer-events: none;
	width: calc(60px - 8px - 8px);
	height: calc(60px - 14px - 18px);
	line-height: 28px;
	padding: 14px 8px 18px 8px;
	font-size: 28px;
	font-weight: bold;
	color: white;
	text-shadow:
		-1px -1px 2px #0008,
		 1px  1px 2px #0008,
		-1px  1px 2px #0008,
		 1px -1px 2px #0008
		;
	border-radius: 50%;
}

.general.action {
	box-shadow: 0 0 0 3px yellow, 0 0 2px 4px black;
}

.general.selected {
	box-shadow: 0 0 0 3px aqua, 0 0 2px 4px black;
}

/* CARDS */

#last_played {
	margin: 4px auto;
}

#hand {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	min-height: 352px;
	padding: 12px;
	gap: 12px;
	margin: 24px 0;
}

.card {
	width: 250px;
	height: 350px;
	border-radius: 16px;
	background-size: 100%;
	background-color: hsl(35, 53%, 89%);
	border: 1px solid black;
	box-shadow: 1px 1px 4px #0008;
}

.card.shrink {
	width: 187px;
	height: 262px;
	border-radius: 12px;
}

#war_ends {
	position: absolute;
	left: 1034px;
	top: 1684px;

	width: 262px;
	height: 187px;
	border-radius: 12px;
	background-size: 100%;
	border: 1px solid black;
	box-shadow: 1px 1px 4px #0008;

	display: none;
}

#war_ends.year_1779 { display: block; }
#war_ends.year_1780 { display: block; }
#war_ends.year_1781 { display: block; }
#war_ends.year_1782 { display: block; }
#war_ends.year_1783 { display: block; }

.reinforcements {
	position: absolute;
	top: 1922px;

	width: 187px;
	height: 262px;
	border-radius: 12px;
	border: 1px solid black;
	box-shadow: 1px 1px 4px #0008;

	display: none;
}

#played_british_reinforcements { left: 909px; }
#played_american_reinforcements_1 { left: 1142px; }
#played_american_reinforcements_2 { left: 1375px; }

.reinforcements.ops_1 { display: block; }
.reinforcements.ops_2 { display: block; }
.reinforcements.ops_3 { display: block; }

/* IMAGES */

#map { background-image: url(map75.jpg); }

.marker.french_navy { background-image: url(markers.1x/french_navy.png); }
.marker.french_navy.tall { background-image: url(markers.1x/french_navy_tall.png); }

.marker.turn { background-image: url(markers.1x/game_turn_regulars.png); }
.marker.turn.no_regulars { background-image: url(markers.1x/game_turn_no_regulars.png); }
.marker.french_alliance { background-image: url(markers.1x/french_alliance.png); }
.marker.french_alliance.european_war { background-image: url(markers.1x/european_war.png); }
.marker.congress { background-image: url(markers.1x/continental_congress.png); }
.marker.congress { background-image: url(markers.1x/continental_congress.png); }
.marker.control.british { background-image: url(markers.1x/colony_british.png); }
.marker.control.american { background-image: url(markers.1x/colony_american.png); }

.cu.american { background-image: url(markers.1x/cu_american.png); }
.cu.british { background-image: url(markers.1x/cu_british.png); }
.cu.french { background-image: url(markers.1x/cu_french.png); }

.pc.american { background-image: url(markers.1x/pc_american.svg); }
.pc.british { background-image: url(markers.1x/pc_british.svg); }

.general.tall.Arnold { background-image: url(markers.1x/general_arnold_tall.png); }
.general.tall.Gates { background-image: url(markers.1x/general_gates_tall.png); }
.general.tall.Greene { background-image: url(markers.1x/general_greene_tall.png); }
.general.tall.Lafayette { background-image: url(markers.1x/general_lafayette_tall.png); }
.general.tall.Lee { background-image: url(markers.1x/general_lee_tall.png); }
.general.tall.Lincoln { background-image: url(markers.1x/general_lincoln_tall.png); }
.general.tall.Rochambeau { background-image: url(markers.1x/general_rochambeau_tall.png); }
.general.tall.Washington { background-image: url(markers.1x/general_washington_tall.png); }
.general.tall.Burgoyne { background-image: url(markers.1x/general_burgoyne_tall.png); }
.general.tall.Carleton { background-image: url(markers.1x/general_carleton_tall.png); }
.general.tall.Clinton { background-image: url(markers.1x/general_clinton_tall.png); }
.general.tall.Cornwallis { background-image: url(markers.1x/general_cornwallis_tall.png); }
.general.tall.Howe { background-image: url(markers.1x/general_howe_tall.png); }

.general.small.Arnold { background-image: url(markers.1x/general_arnold.png); }
.general.small.Gates { background-image: url(markers.1x/general_gates.png); }
.general.small.Greene { background-image: url(markers.1x/general_greene.png); }
.general.small.Lafayette { background-image: url(markers.1x/general_lafayette.png); }
.general.small.Lee { background-image: url(markers.1x/general_lee.png); }
.general.small.Lincoln { background-image: url(markers.1x/general_lincoln.png); }
.general.small.Rochambeau { background-image: url(markers.1x/general_rochambeau.png); }
.general.small.Washington { background-image: url(markers.1x/general_washington.png); }
.general.small.Burgoyne { background-image: url(markers.1x/general_burgoyne.png); }
.general.small.Carleton { background-image: url(markers.1x/general_carleton.png); }
.general.small.Clinton { background-image: url(markers.1x/general_clinton.png); }
.general.small.Cornwallis { background-image: url(markers.1x/general_cornwallis.png); }
.general.small.Howe { background-image: url(markers.1x/general_howe.png); }

#war_ends.year_1779 { background-image:url(cards75/card_7_rot.png); }
#war_ends.year_1780 { background-image:url(cards75/card_8_rot.png); }
#war_ends.year_1781 { background-image:url(cards75/card_9_rot.png); }
#war_ends.year_1782 { background-image:url(cards75/card_10_rot.png); }
#war_ends.year_1783 { background-image:url(cards75/card_11_rot.png); }

.reinforcements.ops_3 { background-image:url(cards75/card_2.png); }
.reinforcements.ops_2 { background-image:url(cards75/card_3.png); }
.reinforcements.ops_1 { background-image:url(cards75/card_4.png); }

.card_0{background-image:url(cards100/card_1.png)}
.card_1{background-image:url(cards100/card_2.png)}
.card_2{background-image:url(cards100/card_2.png)}
.card_3{background-image:url(cards100/card_2.png)}
.card_4{background-image:url(cards100/card_2.png)}
.card_5{background-image:url(cards100/card_2.png)}
.card_6{background-image:url(cards100/card_2.png)}
.card_7{background-image:url(cards100/card_2.png)}
.card_8{background-image:url(cards100/card_2.png)}
.card_9{background-image:url(cards100/card_2.png)}
.card_10{background-image:url(cards100/card_2.png)}
.card_11{background-image:url(cards100/card_2.png)}
.card_12{background-image:url(cards100/card_2.png)}
.card_13{background-image:url(cards100/card_2.png)}
.card_14{background-image:url(cards100/card_2.png)}
.card_15{background-image:url(cards100/card_2.png)}
.card_16{background-image:url(cards100/card_2.png)}
.card_17{background-image:url(cards100/card_2.png)}
.card_18{background-image:url(cards100/card_2.png)}
.card_19{background-image:url(cards100/card_2.png)}
.card_20{background-image:url(cards100/card_2.png)}
.card_21{background-image:url(cards100/card_2.png)}
.card_22{background-image:url(cards100/card_2.png)}
.card_23{background-image:url(cards100/card_3.png)}
.card_24{background-image:url(cards100/card_3.png)}
.card_25{background-image:url(cards100/card_3.png)}
.card_26{background-image:url(cards100/card_3.png)}
.card_27{background-image:url(cards100/card_3.png)}
.card_28{background-image:url(cards100/card_3.png)}
.card_29{background-image:url(cards100/card_3.png)}
.card_30{background-image:url(cards100/card_3.png)}
.card_31{background-image:url(cards100/card_3.png)}
.card_32{background-image:url(cards100/card_3.png)}
.card_33{background-image:url(cards100/card_3.png)}
.card_34{background-image:url(cards100/card_3.png)}
.card_35{background-image:url(cards100/card_3.png)}
.card_36{background-image:url(cards100/card_3.png)}
.card_37{background-image:url(cards100/card_3.png)}
.card_38{background-image:url(cards100/card_3.png)}
.card_39{background-image:url(cards100/card_3.png)}
.card_40{background-image:url(cards100/card_3.png)}
.card_41{background-image:url(cards100/card_3.png)}
.card_42{background-image:url(cards100/card_3.png)}
.card_43{background-image:url(cards100/card_3.png)}
.card_44{background-image:url(cards100/card_3.png)}
.card_45{background-image:url(cards100/card_4.png)}
.card_46{background-image:url(cards100/card_4.png)}
.card_47{background-image:url(cards100/card_4.png)}
.card_48{background-image:url(cards100/card_4.png)}
.card_49{background-image:url(cards100/card_4.png)}
.card_50{background-image:url(cards100/card_4.png)}
.card_51{background-image:url(cards100/card_4.png)}
.card_52{background-image:url(cards100/card_4.png)}
.card_53{background-image:url(cards100/card_4.png)}
.card_54{background-image:url(cards100/card_4.png)}
.card_55{background-image:url(cards100/card_4.png)}
.card_56{background-image:url(cards100/card_4.png)}
.card_57{background-image:url(cards100/card_4.png)}
.card_58{background-image:url(cards100/card_4.png)}
.card_59{background-image:url(cards100/card_4.png)}
.card_60{background-image:url(cards100/card_4.png)}
.card_61{background-image:url(cards100/card_4.png)}
.card_62{background-image:url(cards100/card_4.png)}
.card_63{background-image:url(cards100/card_4.png)}
.card_64{background-image:url(cards100/card_4.png)}
.card_65{background-image:url(cards100/card_4.png)}
.card_66{background-image:url(cards100/card_4.png)}
.card_67{background-image:url(cards100/card_5.png)}
.card_68{background-image:url(cards100/card_5.png)}
.card_69{background-image:url(cards100/card_5.png)}
.card_70{background-image:url(cards100/card_6.png)}
.card_71{background-image:url(cards100/card_7.png)}
.card_72{background-image:url(cards100/card_8.png)}
.card_73{background-image:url(cards100/card_9.png)}
.card_74{background-image:url(cards100/card_10.png)}
.card_75{background-image:url(cards100/card_11.png)}
.card_76{background-image:url(cards100/card_12.png)}
.card_77{background-image:url(cards100/card_13.png)}
.card_78{background-image:url(cards100/card_14.png)}
.card_79{background-image:url(cards100/card_15.png)}
.card_80{background-image:url(cards100/card_16.png)}
.card_81{background-image:url(cards100/card_17.png)}
.card_82{background-image:url(cards100/card_18.png)}
.card_83{background-image:url(cards100/card_19.png)}
.card_84{background-image:url(cards100/card_20.png)}
.card_85{background-image:url(cards100/card_21.png)}
.card_86{background-image:url(cards100/card_22.png)}
.card_87{background-image:url(cards100/card_23.png)}
.card_88{background-image:url(cards100/card_24.png)}
.card_89{background-image:url(cards100/card_25.png)}
.card_90{background-image:url(cards100/card_26.png)}
.card_91{background-image:url(cards100/card_27.png)}
.card_92{background-image:url(cards100/card_28.png)}
.card_93{background-image:url(cards100/card_29.png)}
.card_94{background-image:url(cards100/card_30.png)}
.card_95{background-image:url(cards100/card_31.png)}
.card_96{background-image:url(cards100/card_32.png)}
.card_97{background-image:url(cards100/card_33.png)}
.card_98{background-image:url(cards100/card_34.png)}
.card_99{background-image:url(cards100/card_35.png)}
.card_100{background-image:url(cards100/card_36.png)}
.card_101{background-image:url(cards100/card_37.png)}
.card_102{background-image:url(cards100/card_38.png)}
.card_103{background-image:url(cards100/card_39.png)}
.card_104{background-image:url(cards100/card_40.png)}
.card_105{background-image:url(cards100/card_41.png)}
.card_106{background-image:url(cards100/card_42.png)}
.card_107{background-image:url(cards100/card_43.png)}
.card_108{background-image:url(cards100/card_44.png)}
.card_109{background-image:url(cards100/card_45.png)}
.card_110{background-image:url(cards100/card_46.png)}