/* MAIN */

html {
	image-rendering: -webkit-optimize-contrast; /* try to fix chromium's terrible image rescaling */
}

main { background-color: #461145; }
#roles { background-color: tan; }
header { background-color: tan; }
header.your_turn { background-color: orange; }
#role_Caesar .role_name { background-color: salmon; }
#role_Pompeius .role_name { background-color: #eb5; }
#turn_info { background-color: burlywood; }
.role_vp { float: right; }

#log { background-color: wheat; }
#log div { padding-left: 20px; text-indent: -12px; }
#log div.i { padding-left: 32px; text-indent: -12px; }
#log .h1 { background-color: brown; color: gold; font-weight: bold; }
#log .h2 { background-color: brown; color: gold; font-weight: bold; }
#log .C { background-color: salmon; }
#log .P { background-color: #eb5; }
#log .h4 { background-color: tan; }
#log .h5 { font-style: italic; text-decoration: underline; }
#log .tip:hover { text-decoration: underline; cursor: pointer; }

/* CARDS */

.hand {
	margin: 25px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	min-height: 348px;
	gap: 16px;
}

.card_back { background-image: url('cards/card_back.jpg'); }
.card_apollo { background-image: url('cards/card_apollo.jpg'); }
.card_jupiter { background-image: url('cards/card_jupiter.jpg'); }
.card_mars { background-image: url('cards/card_mars.jpg'); }
.card_mercury { background-image: url('cards/card_mercury.jpg'); }
.card_neptune { background-image: url('cards/card_neptune.jpg'); }
.card_pluto { background-image: url('cards/card_pluto.jpg'); }
.card_vulcan { background-image: url('cards/card_vulcan.jpg'); }
.card_12 { background-image: url('cards/card_12.jpg'); }
.card_13 { background-image: url('cards/card_13.jpg'); }
.card_21 { background-image: url('cards/card_21.jpg'); }
.card_22 { background-image: url('cards/card_22.jpg'); }
.card_23 { background-image: url('cards/card_23.jpg'); }
.card_31 { background-image: url('cards/card_31.jpg'); }
.card_32 { background-image: url('cards/card_32.jpg'); }
.card_41 { background-image: url('cards/card_41.jpg'); }

.card {
	background-size: cover;
	background-repeat: no-repeat;
	background-color: white;
	width: 224px;
	height: 348px;
	border-radius: 12px;
	box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
	transition: 100ms;
	display: none;
}

.card.show {
	display: block;
}

.card.enabled:hover {
	transform: translateY(-8px);
}

.card.enabled {
	cursor: pointer;
}

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

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

.card_back {
	background-color: #822c1f;
}

.role_info {
	overflow: clip; /* clip dropshadow from filter:grayscale() stacking context */
	padding-top: 16px;
}

.role_info .card {
	width: 168px;
	height: 261px;
	border-radius: 9px;
	margin: 0 auto 16px auto;
}

.role_info .card:not(:hover) {
	margin: 0 auto;
	height: 96px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

/* BATTLE BOARD */

#battle { background-color: tan; }
#battle_message { background-color: wheat; }
#battle_header { background-color: brown; color: lemonchiffon; }
#FR, #ER { background-color: #bda27e; }

/* MAP WITH BLOCKS AND SPACES */

#mapwrap {
	width: 2475px;
	height: 1275px;
}

#map {
	width: 2475px;
	height: 1275px;
	background-size: cover;
}

#map { background-image: url("map75.jpg") }
@media (min-resolution: 97dpi) {
	#map { background-image: url("map150.jpg") }
}

#turn {
	position: absolute;
	width: 75px;
	height: 75px;
	left: 51px;
	border-radius: 12px;
	border: 3px solid white;
	box-shadow: 0 0 12px white;
}
#turn.year_705 { top: 384px; }
#turn.year_706 { top: 301px; }
#turn.year_707 { top: 218px; }
#turn.year_708 { top: 135px; }
#turn.year_709 { top: 51px; }

.space {
	position: absolute;
	opacity: 0;
	z-index: 1;
	border: 5px solid white;
}
.space.city {
	width: 60px;
	height: 60px;
	border-radius: 50%;
}
.space.sea {
	width: 70px;
	height: 70px;
	border-radius: 50%;
}
.space.highlight {
	cursor: pointer;
	opacity: 0.8;
	z-index: 9;
}
.space.tip {
	opacity: 1;
	border-color: yellow;
	border-style: dashed;
	z-index: 9;
}

#blocks.hide_blocks {
	display: none;
}

body.shift .block.known:hover {
	transform: scale(2) !important;
	transition: 100ms;
	z-index: 100;
}

#battle .block { position: relative; }
#map .block { position: absolute; z-index: 2; }
#map .block.highlight { z-index: 3; }
#map .block.selected { z-index: 4; }
#map .block.known:hover { z-index: 5; }

.block.highlight { cursor: pointer; }

.simple-labels .block { width: 48px; height: 48px; border-radius: 6px; }

.simple-labels .block.Caesar { background-color: #b22; border: 2px solid #822; }
.simple-labels .block.Pompeius { background-color: #eb2; border: 2px solid #862; }
.simple-labels .block.Cleopatra { background-color: #09b; border: 2px solid #067; }
.simple-labels .block.highlight { border: 2px solid white; }
.simple-labels .block.selected { border: 2px solid yellow; }
.simple-labels .block.moved { filter: grayscale(70%); }

.columbia-labels .block{ width: 56px; height: 56px; border-radius: 6px; }

.columbia-labels .block.Caesar { background-color: #c22; border: 3px solid #822; }
.columbia-labels .block.Pompeius { background-color: #c91; border: 3px solid #862; }
.columbia-labels .block.Cleopatra { background-color: #09a; border: 3px solid #067; }
.columbia-labels .block.known.Caesar { background-color: #822; }
.columbia-labels .block.known.Pompeius { background-color: #862; }
.columbia-labels .block.known.Cleopatra { background-color: #067; }
.columbia-labels .block.highlight { border: 3px solid white; }
.columbia-labels .block.selected { border: 3px solid yellow; }
.columbia-labels .block.moved { filter: grayscale(70%); }

.battle_menu.hit .block.highlight { border-color: black; }

.columbia-labels .block.r0 { transform: rotate(0deg); }
.columbia-labels .block.r1 { transform: rotate(-90deg); }
.columbia-labels .block.r2 { transform: rotate(-180deg); }
.columbia-labels .block.r3 { transform: rotate(-270deg); }

.block.mars {
	background-image: url("mars.svg");
	background-size: 80%;
	background-position: center;
}
.block.neptune {
	background-image: url("neptune.svg");
	background-size: 80%;
	background-position: center;
}
.block.jupiter:not(.known) {
	background-image: url("jupiter.svg");
	background-size: 80%;
	background-position: center;
}

body.Observer .simple-labels .known.jupiter.Caesar { border: 2px solid #862; }
body.Observer .simple-labels .known.jupiter.Pompeius { border: 2px solid #822; }
body.Observer .simple-labels .known.jupiter.Cleopatra { border: 2px solid #822; }
body.Observer .columbia-labels .known.jupiter.Caesar { border: 3px solid #862; }
body.Observer .columbia-labels .known.jupiter.Pompeius { border: 3px solid #822; }
body.Observer .columbia-labels .known.jupiter.Cleopatra { border: 3px solid #822; }

.block { box-shadow: 0px 0px 4px 0px black; }

.block {
	transition-property: top, left, transform, filter;
	transition-duration: 700ms, 700ms, 300ms, 300ms;
	transition-timing-function: ease;
}