/* Body of the html page */
.body-style{
	background:
		radial-gradient(
		ellipse at 82% 18%,
		rgba(90,130,255,.92) 0%,
		rgba(90,130,255,.48) 18%,
		rgba(90,130,255,.16) 38%,
		rgba(90,130,255,0) 68%),

		radial-gradient(
		ellipse at 18% 82%,
		rgba(155,110,255,.78) 0%,
		rgba(155,110,255,.36) 18%,
		rgba(155,110,255,.10) 36%,
		rgba(155,110,255,0) 60%),

		radial-gradient(
		ellipse at 72% 74%,
		rgba(120,210,255,1) 0%,
		rgba(120,210,255,.55) 12%,
		rgba(120,210,255,.20) 24%,
		rgba(120,210,255,0) 38%),

		radial-gradient(
		ellipse at 18% 22%,
		rgba(155,110,255,.86) 0%,
		rgba(155,110,255,.44) 22%,
		rgba(155,110,255,.14) 42%,
		rgba(155,110,255,0) 68%),

		linear-gradient(
		135deg,
		#080b12,
		#05070d
	);
	min-height: 100vh;
	overflow: hidden;
}
/* Core container */
#GlobalFlex{
	display: flex;
	flex-direction: column;
	gap: 5px;
	align-items: center;
	justify-content: center;
	height: 98vh;
}
/* Main map DIV */
#GlobalGrid{ 
	width: 100%;
	height: 84vh;

	position: relative; /* My Grid DIV becomes ancestor for Cell DIVs, and also follows my FlexPane. 
						   Without it cell DIVs with position:absolute will ignore GlobalGrid DIV (as it would be static)*/
   	pointer-events: none;
	opacity: 0;
	transition: opacity 1.5s ease;
}
/* Main status bars' DIV */
#StatusBar{
	position: relative;

	width: 100%;
	height: 16vh;
	border-bottom-left-radius: 1.15vw;
	border-bottom-right-radius: 1.15vw;
	
	background:
		linear-gradient(
		180deg,
		rgba(59, 68, 88, .62),
		rgba(44, 52, 70, .62)
	);

	pointer-events: none;
	opacity: 0;
	transition: opacity 1.5s ease;
}

/* Below class is assigned once human has chosen their color */
.open-div{
	opacity: 1 !important;
	pointer-events: auto !important;
}

/* Atomic cells basic set-up */
.cell-basic{
	position: absolute;
	box-sizing: border-box;
	overflow: visible;
	z-index: 1;

	border-radius: 3px;
	border-width: 1px;
	border-style: solid;

    display: flex;
    justify-content: center;
    align-items: center;

	transition: 
		transform .15s ease,
		border-radius .15s ease,
}
.cell-basic.cell-anchor{
    z-index: 2;
    border-width: 0px !important;
}
.cell-basic:not(.cell-anchor):hover{
    transform: scale(1.5);
    border-radius: 4px;
}

.castled-transition{
	transition: background-color .8s linear;
}

/* Highlighting regions, which appear in a battle - adding before borders for prioritization */
.highlight-dueling-region{
	border-color: rgba(90, 96, 108, 1) !important;
	background-color: rgba(90, 96, 108, 0.25) !important;
}

/* Borders of the regions (frontline cells only) */
.border-right{
	border-right: 0.35px solid #3B4458 !important;
}
.border-left{
	border-left: 0.35px solid #3B4458 !important;
}
.border-top{
	border-top: 0.35px solid #3B4458 !important;
}
.border-bottom{
	border-bottom: 0.35px solid #3B4458 !important;
}

/* Animation of cells reinforcements.
   Timing to be aligned with Region.delayedUpdateAllDiceOnMap() and Region.updateRegionAndBar() */
.anchor-cell-reinforcement-slow{
	animation: reinforcementBlink 0.55s ease;
}
.anchor-cell-reinforcement-medium{
	animation: reinforcementBlink 0.38s ease;
}
.anchor-cell-reinforcement-swift{
	animation: reinforcementBlink 0.28s ease;
}
@keyframes reinforcementBlink{
	0%, 100%{
		transform:scale(1);
	}
	50%{
		transform:scale(1.4);
	}
}