main { background-color: dimgray; }
header { background-color: silver; }
header.your_turn { background-color: orange; }
#role_Dem { background-color: hsl(210,30%,80%); }
#role_Com { background-color: hsl(35,40%,80%); }
#turn_info { background-color: gray; }

#log { background-color: whitesmoke; }
#log .h1 { font-weight: bold; padding-top:2px; padding-bottom:2px; text-align: center; }
#log .h2 { padding-top:2px; padding-bottom:2px; text-align: center; }
#log .h3 { text-align: center; }
#log .h4 { text-decoration: underline; }
#log .h5 { text-decoration: underline; }

#log .h1 { background-color: hsl(0,0%,80%); }
#log .h2.teutonic { background-color: hsl(210,30%,85%); }
#log .h2.russian { background-color: hsl(36,40%,85%); }
#log .h3.teutonic { background-color: hsl(210,30%,90%); }
#log .h3.russian { background-color: hsl(35,40%,90%); }

#log div { padding-left: 20px; text-indent: -12px; }
#log div.i { padding-left: 32px; text-indent: -12px; }
#log div.ii { padding-left: 44px; text-indent: -12px; }

#log .card_tip { font-style: italic; }
#log .card_tip:hover { text-decoration: underline; }
#log .lord_tip:hover { cursor: pointer; text-decoration: underline; }
#log .locale_tip:hover { cursor: pointer; text-decoration: underline; }
#log .way_tip:hover { cursor: pointer; text-decoration: underline; }

.action {
	cursor: pointer;
}

#log {
	font-variant-numeric: tabular-nums;
}

/* TOOLBAR */

#toolbar {
	justify-content: space-evenly;
}

#prompt {
	display: flex;
	margin-left: auto;
}

#button {
	display: flex;
	margin-left: auto;
}
/* MAP */

#map {
	margin: 0 auto ;
	position: relative;
	background-repeat: no-repeat;
	background-size: cover;
	width: 1275px; /* was 1275*/
	height: 2000px;
	/*border: solid black;*/
	overflow: clip;
	box-shadow: 0px 1px 10px #0008;
	z-index: 3;
}

#map { background-image: url(1989_map.jpg) }

/* Containers to appear on hover*/
        #overlay {
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            //background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent overlay */
            //display: none;
            justify-content: center;
            align-items: center;
            text-align: left;
        }

/* SPACES */

.space-area {
	position: absolute;
	box-sizing: border-box;
	border: solid red 2px;
	
}

/* CARDS */

.playedCard {
	display: flex;
	margin: auto;
	height: 300px;
}

.handCard {
	padding: 10px;
	height: 250px;
	box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.5); /* White glowing effect */
        border-radius: 5px; /* Optional: Adds rounded corners */
}

.handCard:hover {
	cursor: pointer;
}

/* INFLUENCE MARKERS */

.demInfl {
	position: absolute;
	box-sizing: border-box;
	bottom: 1px;
	left: 6px;
	height: 35px;
}

.demInfl:hover {
	cursor: pointer;
}

.comInfl {
	position: absolute;
	box-sizing: border-box;
	bottom: 1px;
	right: 6px;
	height: 35px;
}

.comInfl:hover {
	cursor: pointer;
}

.demInflValue {
	position: absolute;
	box-sizing: border-box;
	font-family: 'Open Sans';
	font-size: 20px;
	font-weight: bold;
	top: 10px;
	left: 16px;
}

.comInflValue {
	position: absolute;
	box-sizing: border-box;
	font-family: 'Open Sans';
	font-size: 20px;
	font-weight: bold;
	top: 10px;
	left: 72px;
}

/* GAME MARKERS */

#turn-tracker {
	position:absolute;
	top: 65px;
	left: 511px;
	height: 35px;
	width: 36px;
}

.action-round-tracker {
	position: absolute;
	top: 114px;
	left: 554px;
	height: 30px;
	width: 35px;
}

#stability-track {
	position:absolute;
	top: 853px;
	left: 1085px;
	height: 35px;
	width: 35px;
}

#dem-TST {
	position: absolute;
	top: 1680px;
	left: 0;
	height: 35px;
	width: 35px;
}

#com-TST {
	position: absolute;
	top: 1782px;
	left: 0;
	height: 35px;
	width: 35px;
}

#vp	{
	position: absolute;
	top: 1912px;
	left: 661px;
	height: 40px;
	width: 40px;
}




.locale {
	box-sizing: border-box;
	position: absolute;
	border: 3px solid transparent;
}

.locale.town { border-radius: 80px 80px 36px 36px; }