main { background-color: slategray; }
aside { background-color: gainsboro; }
header { background-color: silver; }
.card_info { background-color: silver; }
body.Tripolitania header.your_turn { background-color: salmon; }
body.United_States header.your_turn { background-color: skyblue; }
#role_United_States .role_name { background-color: skyblue; }
#role_Tripolitania .role_name { background-color: salmon; }

#log { background-color: #eee; }
#log div { padding-left: 20px; text-indent: -12px; }
#log .year { background-color: #777; color: white; font-weight: bold; padding:3px; text-align: center; }
#log .season { background-color: #ccc; color: #444; font-weight: bold; padding:3px; text-align: center; }
#log .raid, .battle { text-decoration: underline; font-style: italic; font-weight: bold; }
#log .round { text-decoration: underline; font-style: italic; }
#log .end { font-style: italic; }
#log .us_tip { color: blue; }
#log .tr_tip { color: #d00; }
#log .us_tip:hover, #log .tr_tip:hover { text-decoration: underline; }

.hand {
	display: flex;
	flex-wrap: wrap;
	min-height: 300px;
	justify-content: left;
	max-width: 1620px;
	margin: 0 auto;
	padding: 15px;
	gap: 15px;
}

.hand_separator {
	margin: 0 auto;
	max-width: 1650px;
	border-bottom: 2px dotted gainsboro;
}

@media (max-width: 800px) {
	.hand, .hand_separator {
		min-width: 1650px;
	}
}

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

body.Observer #hand_cards { display: none; }
body.Observer .hand_separator { display: none; }

.role_vp {
	float: right;
}

.role_info, .card_info {
	border-bottom: 1px solid black;
}

.card {
	background-size: cover;
	background-repeat: no-repeat;
	width: 250px;
	height: 350px;
	border-radius: 12px;
	display: none;
	box-shadow: 1px 1px 5px #0008;
}

.card.show {
	display: block;
}

.card.blank {
	background-color: dimgray;
	transform: none !important;
}

.card.enabled {
	cursor: pointer;
}

.card.disabled {
	filter: grayscale(100%);
}

.card_info {
	padding: 10px 0;
}

.card_info .card {
	margin: 0 auto;
	width: 125px;
	height: 175px;
	border-radius: 6px;
}

#tr_info, #us_info {
	white-space: pre-line;
	font-family: "Source Serif SmText";
	font-size: 12px;
	text-align: center;
	padding: 4px;
}

#tooltip {
	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;
	}
}

/* MAP */

#mapwrap {
	box-shadow: 0px 0px 15px #0008;
	width: 1650px;
	height: 532px;
	margin-bottom: 5px;
}

#map {
	display: block;
	width: 1650px;
	height: 532px;
	background-color: black;
	background-image: url(map.jpg);
	background-size: 1650px 532px;
}

svg {
	position: absolute;
}

svg image {
	pointer-events: none;
}

svg circle, .piece {
	transition-property: x, y, cx, cy, top, left;
	transition-duration: 1s;
	transition-timing-function: ease;
}

.piece {
	position: absolute;
	pointer-events: none;
	background-size: cover;
	background-repeat: no-repeat;
	filter: drop-shadow(0px 1px 3px #0008);
}

.piece.highlight {
	pointer-events: all;
	cursor: pointer;
	filter: brightness(150%) drop-shadow(0 0 3px white);
}

.piece.damaged {
	filter: brightness(60%) drop-shadow(0px 1px 3px #0008);
}

.piece.us_frigate { width: 29px; height: 20px; background-image: url("icons/us_frigate.svg"); }
.piece.se_frigate { width: 29px; height: 20px; background-image: url("icons/se_frigate.svg"); }
.piece.tr_frigate { width: 29px; height: 20px; background-image: url("icons/tr_frigate.svg"); }
.piece.us_gunboat { width: 22px; height: 18px; background-image: url("icons/us_gunboat.svg"); }
.piece.tr_corsair { width: 22px; height: 18px; background-image: url("icons/tr_corsair.svg"); }
.piece.al_corsair { width: 22px; height: 18px; background-image: url("icons/al_corsair.svg"); }
.piece.us_marine { width: 16px; height: 16px; background-image: url("icons/us_marine.svg"); }
.piece.ar_infantry { width: 16px; height: 16px; background-image: url("icons/ar_infantry.svg"); }
.piece.tr_infantry { width: 16px; height: 16px; background-image: url("icons/tr_infantry.svg"); }
.piece.gold { width: 28px; height: 28px; background-image: url("icons/gold.png"); }
.piece.marker { width: 34px; height: 34px; border-radius: 50%; background-color: #444; border: 2px solid black; }

.harbor {
	fill-opacity: 0;
	stroke: white;
	stroke-width: 4;
	opacity: 0;
}

.patrol_zone {
	fill-opacity: 0;
	stroke: white;
	stroke-width: 4;
	opacity: 0;
}

.patrol_zone.highlight, .harbor.highlight {
	opacity: 1;
	cursor: pointer;
}

#map .harbor.where {
	opacity: 1;
	fill-opacity: 0.5;
	fill: gold;
	stroke: gold;
}

#map .patrol_zone.where {
	opacity: 1;
	fill-opacity: 0.5;
	fill: gold;
	stroke: white;
}

/* CARD ACTION POPUP MENU */

#us_popup, #tr_popup { box-shadow: 0px 8px 16px 0px #0004; }

#us_popup { background-color: hsl(207, 50%, 90%) }
#us_popup li.title { background-color: hsl(207, 50%, 66%) }
#us_popup li.action:hover { background-color: hsl(207, 50%, 26%) }

#tr_popup { background-color: hsl(3, 50%, 90%) }
#tr_popup li.title { background-color: hsl(3, 50%, 71%) }
#tr_popup li.action:hover { background-color: hsl(3, 50%, 31%) }

#us_popup li[data-action="card_take"].disabled { display: none }
#tr_popup li[data-action="card_take"].disabled { display: none }

/* CARD IMAGES */

.card {
	text-align: center;
	color: white;
	font-weight: bold;
	font-size: 25px;
	line-height: 40px;
}

.tr_card_1{background-image:url(cards.1x/tr_card_1.jpg)}
.tr_card_2{background-image:url(cards.1x/tr_card_2.jpg)}
.tr_card_3{background-image:url(cards.1x/tr_card_3.jpg)}
.tr_card_4{background-image:url(cards.1x/tr_card_4.jpg)}
.tr_card_5{background-image:url(cards.1x/tr_card_5.jpg)}
.tr_card_6{background-image:url(cards.1x/tr_card_5.jpg)}
.tr_card_7{background-image:url(cards.1x/tr_card_7.jpg)}
.tr_card_8{background-image:url(cards.1x/tr_card_7.jpg)}
.tr_card_9{background-image:url(cards.1x/tr_card_9.jpg)}
.tr_card_10{background-image:url(cards.1x/tr_card_9.jpg)}
.tr_card_11{background-image:url(cards.1x/tr_card_11.jpg)}
.tr_card_12{background-image:url(cards.1x/tr_card_12.jpg)}
.tr_card_13{background-image:url(cards.1x/tr_card_13.jpg)}
.tr_card_14{background-image:url(cards.1x/tr_card_14.jpg)}
.tr_card_15{background-image:url(cards.1x/tr_card_15.jpg)}
.tr_card_16{background-image:url(cards.1x/tr_card_16.jpg)}
.tr_card_17{background-image:url(cards.1x/tr_card_17.jpg)}
.tr_card_18{background-image:url(cards.1x/tr_card_18.jpg)}
.tr_card_19{background-image:url(cards.1x/tr_card_19.jpg)}
.tr_card_20{background-image:url(cards.1x/tr_card_20.jpg)}
.tr_card_21{background-image:url(cards.1x/tr_card_21.jpg)}
.tr_card_22{background-image:url(cards.1x/tr_card_22.jpg)}
.tr_card_23{background-image:url(cards.1x/tr_card_23.jpg)}
.tr_card_24{background-image:url(cards.1x/tr_card_24.jpg)}
.tr_card_25{background-image:url(cards.1x/tr_card_25.jpg)}
.tr_card_26{background-image:url(cards.1x/tr_card_26.jpg)}
.tr_card_27{background-image:url(cards.1x/tr_card_27.jpg)}
.tr_card_28{background-image:url(cards.1x/tr_card_28.jpg)}
.tr_card_29{background-image:url(cards.1x/tr_card_29.jpg)}
.tr_card_30{background-image:url(cards.1x/tr_card_30.jpg)}
.tr_card_back{background-image:url(cards.1x/tr_card_31.jpg)}
.us_card_1{background-image:url(cards.1x/us_card_1.jpg)}
.us_card_2{background-image:url(cards.1x/us_card_2.jpg)}
.us_card_3{background-image:url(cards.1x/us_card_3.jpg)}
.us_card_4{background-image:url(cards.1x/us_card_4.jpg)}
.us_card_5{background-image:url(cards.1x/us_card_5.jpg)}
.us_card_6{background-image:url(cards.1x/us_card_6.jpg)}
.us_card_7{background-image:url(cards.1x/us_card_6.jpg)}
.us_card_8{background-image:url(cards.1x/us_card_6.jpg)}
.us_card_9{background-image:url(cards.1x/us_card_6.jpg)}
.us_card_10{background-image:url(cards.1x/us_card_10.jpg)}
.us_card_11{background-image:url(cards.1x/us_card_11.jpg)}
.us_card_12{background-image:url(cards.1x/us_card_12.jpg)}
.us_card_13{background-image:url(cards.1x/us_card_13.jpg)}
.us_card_14{background-image:url(cards.1x/us_card_14.jpg)}
.us_card_15{background-image:url(cards.1x/us_card_15.jpg)}
.us_card_16{background-image:url(cards.1x/us_card_16.jpg)}
.us_card_17{background-image:url(cards.1x/us_card_17.jpg)}
.us_card_18{background-image:url(cards.1x/us_card_18.jpg)}
.us_card_19{background-image:url(cards.1x/us_card_19.jpg)}
.us_card_20{background-image:url(cards.1x/us_card_20.jpg)}
.us_card_21{background-image:url(cards.1x/us_card_21.jpg)}
.us_card_22{background-image:url(cards.1x/us_card_22.jpg)}
.us_card_23{background-image:url(cards.1x/us_card_23.jpg)}
.us_card_24{background-image:url(cards.1x/us_card_24.jpg)}
.us_card_25{background-image:url(cards.1x/us_card_25.jpg)}
.us_card_26{background-image:url(cards.1x/us_card_26.jpg)}
.us_card_27{background-image:url(cards.1x/us_card_27.jpg)}
.us_card_back{background-image:url(cards.1x/us_card_28.jpg)}

@media (min-resolution: 97dpi) {

.tr_card_1{background-image:url(cards.2x/tr_card_1.jpg)}
.tr_card_2{background-image:url(cards.2x/tr_card_2.jpg)}
.tr_card_3{background-image:url(cards.2x/tr_card_3.jpg)}
.tr_card_4{background-image:url(cards.2x/tr_card_4.jpg)}
.tr_card_5{background-image:url(cards.2x/tr_card_5.jpg)}
.tr_card_6{background-image:url(cards.2x/tr_card_5.jpg)}
.tr_card_7{background-image:url(cards.2x/tr_card_7.jpg)}
.tr_card_8{background-image:url(cards.2x/tr_card_7.jpg)}
.tr_card_9{background-image:url(cards.2x/tr_card_9.jpg)}
.tr_card_10{background-image:url(cards.2x/tr_card_9.jpg)}
.tr_card_11{background-image:url(cards.2x/tr_card_11.jpg)}
.tr_card_12{background-image:url(cards.2x/tr_card_12.jpg)}
.tr_card_13{background-image:url(cards.2x/tr_card_13.jpg)}
.tr_card_14{background-image:url(cards.2x/tr_card_14.jpg)}
.tr_card_15{background-image:url(cards.2x/tr_card_15.jpg)}
.tr_card_16{background-image:url(cards.2x/tr_card_16.jpg)}
.tr_card_17{background-image:url(cards.2x/tr_card_17.jpg)}
.tr_card_18{background-image:url(cards.2x/tr_card_18.jpg)}
.tr_card_19{background-image:url(cards.2x/tr_card_19.jpg)}
.tr_card_20{background-image:url(cards.2x/tr_card_20.jpg)}
.tr_card_21{background-image:url(cards.2x/tr_card_21.jpg)}
.tr_card_22{background-image:url(cards.2x/tr_card_22.jpg)}
.tr_card_23{background-image:url(cards.2x/tr_card_23.jpg)}
.tr_card_24{background-image:url(cards.2x/tr_card_24.jpg)}
.tr_card_25{background-image:url(cards.2x/tr_card_25.jpg)}
.tr_card_26{background-image:url(cards.2x/tr_card_26.jpg)}
.tr_card_27{background-image:url(cards.2x/tr_card_27.jpg)}
.tr_card_28{background-image:url(cards.2x/tr_card_28.jpg)}
.tr_card_29{background-image:url(cards.2x/tr_card_29.jpg)}
.tr_card_30{background-image:url(cards.2x/tr_card_30.jpg)}
.tr_card_back{background-image:url(cards.2x/tr_card_31.jpg)}
.us_card_1{background-image:url(cards.2x/us_card_1.jpg)}
.us_card_2{background-image:url(cards.2x/us_card_2.jpg)}
.us_card_3{background-image:url(cards.2x/us_card_3.jpg)}
.us_card_4{background-image:url(cards.2x/us_card_4.jpg)}
.us_card_5{background-image:url(cards.2x/us_card_5.jpg)}
.us_card_6{background-image:url(cards.2x/us_card_6.jpg)}
.us_card_7{background-image:url(cards.2x/us_card_6.jpg)}
.us_card_8{background-image:url(cards.2x/us_card_6.jpg)}
.us_card_9{background-image:url(cards.2x/us_card_6.jpg)}
.us_card_10{background-image:url(cards.2x/us_card_10.jpg)}
.us_card_11{background-image:url(cards.2x/us_card_11.jpg)}
.us_card_12{background-image:url(cards.2x/us_card_12.jpg)}
.us_card_13{background-image:url(cards.2x/us_card_13.jpg)}
.us_card_14{background-image:url(cards.2x/us_card_14.jpg)}
.us_card_15{background-image:url(cards.2x/us_card_15.jpg)}
.us_card_16{background-image:url(cards.2x/us_card_16.jpg)}
.us_card_17{background-image:url(cards.2x/us_card_17.jpg)}
.us_card_18{background-image:url(cards.2x/us_card_18.jpg)}
.us_card_19{background-image:url(cards.2x/us_card_19.jpg)}
.us_card_20{background-image:url(cards.2x/us_card_20.jpg)}
.us_card_21{background-image:url(cards.2x/us_card_21.jpg)}
.us_card_22{background-image:url(cards.2x/us_card_22.jpg)}
.us_card_23{background-image:url(cards.2x/us_card_23.jpg)}
.us_card_24{background-image:url(cards.2x/us_card_24.jpg)}
.us_card_25{background-image:url(cards.2x/us_card_25.jpg)}
.us_card_26{background-image:url(cards.2x/us_card_26.jpg)}
.us_card_27{background-image:url(cards.2x/us_card_27.jpg)}
.us_card_back{background-image:url(cards.2x/us_card_28.jpg)}

}