/*
    MIXINS AND VARS

*/
/*
    STYLES
*/

@font-face {
  font-family: 'Play';
  src: url('EfRsc/font/Play/Play-Regular.ttf') format('truetype');
}


@font-face {
  font-family: 'Tahoma';
  src: url('EfRsc/font/tahoma.eot');
  src: url('EfRsc/font/tahoma.eot?#iefix') format('embedded-opentype'), url('EfRsc/font/tahoma.ttf') format('truetype'), url('EfRsc/font/tahoma.svg') format('svg');
}

@font-face {
  font-family: 'Impact';
  src: url('EfRsc/font/impactreg.ttf') format('truetype'), url('EfRsc/font/impactreg.svg') format('svg');
}

body {
  font-family: 'Play', 'Arial';
  margin: 0px;
  padding: 0px;
  background:#000000;

  background-size: cover !important;
  background-repeat: no-repeat !important;
}

html,
body,
#gameapp {
  height: 100%;
  min-height: 100%;
  width: 100%;
  overflow: hidden;
}


#turn {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: rgba(0, 0, 0, 0.85) url('EfRsc/images/PlayLandscM.png') no-repeat center 50%;
  background-size: 50% auto;
  display: none;
  z-index: 30;
}


.ld_window {
  width: 100%;
  height: 100%;
  display: inline-block;
  background: #0c0e11;
  display: none;
  text-align: center;
  position: fixed;
  top: 0px;
  left: 0px;
}

.ld_window[data-state="ready"] {
  display: none;
}

.ld_window[data-state="waiting"] {
  display: inline-block;
}

.loader-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 164, 222, 0.1);
  margin-left: -60px;
  margin-top: -60px;
}

.loader-line-mask {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60px;
  height: 120px;
  margin-left: -60px;
  margin-top: -60px;
  overflow: hidden;
  -webkit-transform-origin: 60px 60px;
  -moz-transform-origin: 60px 60px;
  -ms-transform-origin: 60px 60px;
  -o-transform-origin: 60px 60px;
  transform-origin: 60px 60px;
  -webkit-mask-image: -webkit-linear-gradient(top, #000000, rgba(0, 0, 0, 0));
  -webkit-animation: rotate 1.2s infinite linear;
  -moz-animation: rotate 1.2s infinite linear;
  -o-animation: rotate 1.2s infinite linear;
  animation: rotate 1.2s infinite linear;
}

.loader-line-mask .loader-line {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px #5cff00;
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@-moz-keyframes rotate {
  0% {
    -moz-transform: rotate(0deg);
  }

  100% {
    -moz-transform: rotate(360deg);
  }
}

@-o-keyframes rotate {
  0% {
    -o-transform: rotate(0deg);
  }

  100% {
    -o-transform: rotate(360deg);
  }
}

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

canvas {
  margin: 0px !important;
}


#content {
  height: 100%;
  width: 100%;
    display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (orientation:landscape) { 
  
  #content {
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    display:flex;
  }

}



/***

Debug Tools

**/
.DebugToolsContainer button {
  cursor: pointer;
  border-radius: 2px;
}

.DebugToolsContainer {
  position: fixed;
  top: 0px;
  left: 0px;
  user-select: none;
}

.debugToolsToogleBtn {
  width: 100px;
  line-height: 20px;
  border-radius: 0px 0px 5px !important;
  border: 0px;
  background: #0f0f0f;
  color: #aeaeae;
  font-size: 12px;
  line-height: 25px;
  text-align: left;
  padding-left: 10px;
}

.debugToolsToogleBtn:hover {
  background: #171717;
}

.debugToolsWrapper {
  font-size: 12px;
  margin-top: 1px;
  background: rgb(30 30 30 / 70%);
  transition: all 250ms ease;
  padding: 20px 10px;
  color: #9f9f9f;
  border-radius: 0px 5px 5px 0px;
  position: absolute;
}

.debugToolsWrapper > div { width: 250px; }
.debugToolsWrapper[data-show='false'] { transform: translate(-270px); }

.debugToolsWrapper button {
  border: 1px solid #b3b3b3;
  margin-right: 5px;
}

.debugSectionHeader {
  display: block;
  margin-bottom: 5px;
}

.winlineReviewContainer {
  display: flex;
  flex-wrap: wrap;
}

.winlineReviewContainer button {
  margin: 2px;
  background: rgb(255 255 255 / 42%);
  border: 0px;
  min-width: 30px;
}

.winlineReviewContainer button:hover { background: #cecece; }

.winlineReviewContainer span {
  flex-basis: 100%;
  width: 0;
}

.debugToolsWrapper > div {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #424242;
}

.debugToolsWrapper div:last-child {
  padding: 0px;
  margin: 0px;
  border: 0px;
}

.debugToolsWrapper .appStatus {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-top: 10px;
}

.debugToolsWrapper .appStatus > div {
  flex-basis: 50%;
  margin-bottom: 10px;
}

.appActions button {
  border: none;
  width: 60px;
  line-height: 20px;
  margin: 5px;
  font-size: 12px;
}

.appActions button[data-enabled='false'] {
  background-color: #4c4c4c;
  color: white;
  cursor: not-allowed;
  opacity: 0.6;
  pointer-events:none;
}

.debugToolsWrapper .appStatus .uiStatusItem span:first-child {
  margin-right: 5px;
  min-width: 30px;
  font-weight: bold;
  display: inline-block;
}

.debugToolsWrapper .appStatus .uiStatusItem span[data-enabled='true'] { color:rgb(0, 223, 130)}
.debugToolsWrapper .appStatus .uiStatusItem span[data-enabled='false'] { color:red}

.uiGroupHeader {
  margin-bottom: 5px;
  font-weight: bold;
  color: #dbdbdb;
}

.winMessageReviewContainer input {
  width: 50%;
  border: 1px solid #cecece;
  background: #a7a7a7;
  margin-right: 10px;
  outline: none;
}

#clearLogsOnSpin {
    position: relative;
    top: 5px;
    left: 0;
    height: 20px;
    width: 20px;
  }

.winMessageInformation span { line-height:17px }

.winMessageInformation { padding-top:10px !important; }

.fpsMeter span[data-quality="Very smooth"] { color: #00df00;}
.fpsMeter span[data-quality="Smooth"] {color: #71d001f0;}
.fpsMeter span[data-quality="Playable"] {color: #a9d001;}
.fpsMeter span[data-quality="Borderline"] {color: #d0a301;}
.fpsMeter span[data-quality="Unplayable"] { color: #d01401; font-weight: bold}



body [data-gamename] canvas {
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.51);
}