combatready.css

@font-face {
  font-family: "Speedp";
  src: url('graphics/fonts/speed+.ttf');
}
/* Latin */
@font-face {
  font-family: "Ethnocentric";
  src: url('graphics/fonts/ethnocentric-rg.ttf');
}
/* JA */
@font-face {
  font-family: "GenShinGothicBold";
  src: url('graphics/fonts/GenShinGothic-Bold.ttf');
}
/* KO */
@font-face {
  font-family: "BMDohyeon";
  src: url('../graphics/fonts/ko/BMDOHYEON_ttf.ttf');
}
@font-face {
  font-family: "BMHannaPro";
  src: url('../graphics/fonts/ko/BMHANNAPro.ttf');
}

.speedp {
  font-family: "Speedp", "Signika", "Palatino Linotype", serif;
}

.ethnocentric {
  font-family: "Ethnocentric", "Signika", "Palatino Linotype", serif;
	font-style: italic; 
}

.genshingothicbold {
  font-family: "GenShinGothicBold", "Signika", "Palatino Linotype", serif;
	font-style: italic; 
}

.bmhannapro {
  font-family: "BMHannaPro", "Signika", "Palatino Linotype", serif;
	font-style: italic; 
}

.bmdohyeon {
  font-family: "BMDohyeon", "Signika", "Palatino Linotype", serif;
	font-style: italic; 
}


.combatready-container {
	position: absolute;
	top: calc(50% - 100px); 
	left: 0px; 
	display: none;
	width: 100%; 
	height: 200px; 
	/*border: 2px solid blue; */
}

.combatready-chevron {
	display: block; 
	position: absolute;
	top: 0; 
	left: -200px; 
	width: 200px;
	height: 200px; 
	background-image: url("graphics/chevron.png");
}
.combatready-bar {
	display: block; 
	position: absolute;
	top: 0; 
	left: -200px; 
	width: 200px;
	height: 200px; 
	background-image: url("graphics/chevron.png");
}


.combatready-label,
.combatready-nextlabel,
.combatready-turnlabel {
	display: flex; 
	position: absolute;
	top: 0; 
	/*left: calc(50% - 480px); */
	left: 0; 
	width: 100%;
	height: 200px; 
	opacity: 0; 
	align-items: center; 
	justify-content: center; 
	font-size: 124px; 
	text-shadow: 5px 5px 1px black; 
	color: white; 
}
.combatready-turnlabel {
	background-image: url("graphics/yourturn.png");
}
.combatready-nextlabel {
	background-image: url("graphics/nextup.png");
}

.combatready-boardcover {
	display: none; 
	position: fixed;
	left: 0;
	top: 0; 
	width: 100%;
	height: 100%; 
	background-color: #000; 
	opacity: 0; 
}

.combatready-bannerdisable,
.combatready-boarddisable {
	pointer-events: none;
}

/*
.combatready-timebar {
	display: none; 
	position: fixed;
	left: 0;
	top: calc(100% - 30px); 
	width: 100%;
	height: 30px; 
	background-color: blue; 
}

.combatready-timebar-fill {
	display: block; 
	position: absolute;
	background-color: green; 
	height: 100%; 
	width: 0%; 
}
*/

.combatready-beam {
	position: absolute;
	animation: none;
	width: 30px;
	height: 3px; 
	border-radius: 3px; 
	background: linear-gradient(to left, #b8c8ff, transparent); 
	opacity: 0.5; 
}

@keyframes speedbeam {
  to {
    transform: translateX(2560px);
		height: 0px; 
		opacity: 0; 
  }
}




.combatready-timebaricon {
	flex: 0 0 20px; 
	width: 20px;
	height: 20px; 
	background-image: url("graphics/stopwatch.png");
}

/**
 *  Courtsey and Copyright of Alma Madsen @ CodePen
 */
.combatready-timebar {
	background-image: linear-gradient(to bottom,rgba(60, 60, 60, 0.5), rgba(113, 113, 113, 0.3));
	display: none; 
	position: fixed;
	left: 0;
	top: calc(100% - 20px); 
	width: 100%;
	height: 20px; 
	/*background-color: blue; */
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
	border-radius: 5px;
}

.combatready-timebar-fill {
	display: flex; 
	flex-direction: row-reverse; 
	position: absolute;
	height: 100%; 
	width: 0%; 

  background-color: #B71703;
  background-size: 40px 40px;
	border-radius: 5px 0 0 5px;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 30%, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0.1) 34%, transparent 34%, transparent 46%, rgba(0, 0, 0, 0.1) 46%, rgba(0, 0, 0, 0.1) 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 80%, rgba(0, 0, 0, 0.1) 80%, rgba(0, 0, 0, 0.1) 84%, transparent 84%, transparent 96%, rgba(0, 0, 0, 0.1) 96%, rgba(0, 0, 0, 0.1));
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  transition: width 200ms ease;
  animation: progress-bar-animate 1s linear infinite;
}

@keyframes progress-bar-animate {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}


/**
 * Alma Madsen END
 */