/* MAIN */

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;
}

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

.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 4px #0008;
	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;
	transition: height 100ms, padding 100ms;
	height: 84px;
	padding: 12px 0;
}

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

.role:hover .role_info {
	height: 261px;
}

@media (max-height: 600px) {
	.role:not(:hover) .role_info { display: none; }
}

@media (max-height: 800px) {
	#turn_info { display: none; }
	.role_info { height: 38px; padding: 8px 0; }
}

/* BATTLE BOARD */

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

#battle.sea #battle_header { background-color: hsl(205, 40%, 45%); color: white; }
#battle.sea #FR, #battle.sea #ER { background-color: hsl(205, 30%, 60%); }
#battle.sea { background-color: hsl(205, 30%, 70%); }
#battle.sea #battle_message { background-color: hsl(205, 50%, 85%); }

/* 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;
}
#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;
}
.space.battle {
	opacity: 1;
	border-color: #700c;
	background-color: #6008;
}
.space.sea.battle {
	opacity: 1;
	border-color: #037c;
	background-color: #0368;
}

#blocks.hide_blocks {
	display: none;
}

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

#battle > .block { position: relative; }

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

.block.highlight { cursor: pointer; }

.simple-labels .block {
	width: 48px;
	height: 48px;
	border: 3px solid black;
	box-shadow: 0 0 2px 1px #0002;
	border-radius: 6px;
}
.simple-labels .block.Caesar { background-color: #b22; border-color: #822; }
.simple-labels .block.Pompeius { background-color: #eb2; border-color: #862; }
.simple-labels .block.Cleopatra { background-color: #09b; border-color: #067; }
.simple-labels .block.highlight { border-color: white; }
.simple-labels .block.selected { border-color: yellow; }
.simple-labels .hit .block.highlight { border-color: black; }

.columbia-labels .block {
	width: 56px;
	height: 56px;
	border: 3px solid #363639;
	box-shadow: 0 0 2px 1px #0002;
	border-radius: 6px;
}

.columbia-labels .block.Caesar { background-color: hsl(358, 69%, 47%); }
.columbia-labels .block.Pompeius { background-color: hsl(43, 87%, 44%); }
.columbia-labels .block.Cleopatra { background-color: hsl(187, 100%, 35%); }

.columbia-labels .block.Caesar { border-color: hsl(358, 69%, 32%); }
.columbia-labels .block.Pompeius { border-color: hsl(43, 87%, 30%); }
.columbia-labels .block.Cleopatra { border-color: hsl(187, 100%, 23%); }

.columbia-labels .block.highlight { border-color: white; }
.columbia-labels .block.selected { border-color: yellow; }
.columbia-labels .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.moved { filter: grayscale(50%); }

.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;
}

/*
.block.battle { filter: grayscale(60%) brightness(60%) !important }
*/
.block.battle { opacity: 0; pointer-events: none; }

.block {
	transition-property: top, left, transform, opacity;
	transition-duration: 700ms, 700ms, 250ms, 250ms;
	transition-timing-function: ease, ease, ease, linear;
}

#replay_panel {
	background-color: tan;
}