/*@import url("//fonts.googleapis.com/css?family=Pacifico&text=Pure");
@import url("//fonts.googleapis.com/css?family=Roboto:700&text=css");
@import url("//fonts.googleapis.com/css?family=Kaushan+Script&text=!");*/

/*@import url("//fonts.googleapis.com/css?family=Kaushan+Script");*/

/* latin-ext */
@font-face {
  font-family: 'Kaushan Script';
  font-style: normal;
  font-weight: 400;
  src: url(font/vm8vdRfvXFLG3OLnsO15WYS5DG72wNJHMw.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kaushan Script';
  font-style: normal;
  font-weight: 400;
  src: url(font/vm8vdRfvXFLG3OLnsO15WYS5DG74wNI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*{
box-sizing: border-box;
}

body {
  min-height: 450px;
  height: 100vh;
  margin: 0;
  background: radial-gradient(circle, #0077ea, #1f4f96, #1b2949, #000);
}

.stage {
  height: 300px;
  width: 500px;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  perspective: 9999px;
  transform-style: preserve-3d;
  transition: transform ease 3s;
}

.layer {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  animation: ಠ_ಠ 5s infinite alternate ease-in-out -7.5s;
  animation-fill-mode: forwards;
  transform: rotateY(40deg) rotateX(33deg) translateZ(0);
  transition: none;
}
.layer:before {
  content: "";
  height: 200%;
  width: 200%;
  left: -30%;
  top: -30%;
  position: absolute;
  border: 8px solid #cbb000; /*border: 8px solid white;*/
  z-index: 0;
  border-radius: 50%;
}
.layer:after {
  font: 150px/0.8 "Pacifico", "Kaushan Script", Futura, "Roboto", "Trebuchet MS", Helvetica, sans-serif;
  content: "100 \a      de elevi\a          au zis!";
  white-space: pre;
  text-align: center;
  height: 100%;
  width: 100%;
  position: absolute;
  color: whitesmoke;
  letter-spacing: -2px;
  text-shadow: 4px 0 10px rgba(0, 0, 0, 0.13);
}

.layer:nth-child(1):after,
.layer:nth-child(1):before {
  transform: translateZ(0px);
}

.layer:nth-child(2):after,
.layer:nth-child(2):before{
  transform: translateZ(-1.5px);
}

.layer:nth-child(3):after,
.layer:nth-child(3):before{
  transform: translateZ(-3px);
}

.layer:nth-child(4):after,
.layer:nth-child(4):before{
  transform: translateZ(-4.5px);
}

.layer:nth-child(5):after,
.layer:nth-child(5):before{
  transform: translateZ(-6px);
}

.layer:nth-child(6):after,
.layer:nth-child(6):before{
  transform: translateZ(-7.5px);
}

.layer:nth-child(7):after,
.layer:nth-child(7):before{
  transform: translateZ(-9px);
}

.layer:nth-child(8):after,
.layer:nth-child(8):before{
  transform: translateZ(-10.5px);
}

.layer:nth-child(9):after,
.layer:nth-child(9):before{
  transform: translateZ(-12px);
}

.layer:nth-child(10):after,
.layer:nth-child(10):before{
  transform: translateZ(-13.5px);
}

.layer:nth-child(11):after,
.layer:nth-child(11):before{
  transform: translateZ(-15px);
}

.layer:nth-child(12):after,
.layer:nth-child(12):before{
  transform: translateZ(-16.5px);
}

.layer:nth-child(13):after,
.layer:nth-child(13):before{
  transform: translateZ(-18px);
}

.layer:nth-child(14):after,
.layer:nth-child(14):before{
  transform: translateZ(-19.5px);
}

.layer:nth-child(15):after,
.layer:nth-child(15):before{
  transform: translateZ(-21px);
}

.layer:nth-child(16):after,
.layer:nth-child(16):before{
  transform: translateZ(-22.5px);
}

.layer:nth-child(17):after,
.layer:nth-child(1):before{
  transform: translateZ(-24px);
}

.layer:nth-child(18):after,
.layer:nth-child(18):before{
  transform: translateZ(-25.5px);
}

.layer:nth-child(19):after,
.layer:nth-child(19):before{
  transform: translateZ(-27px);
}

.layer:nth-child(20):after,
.layer:nth-child(20):before{
  transform: translateZ(-28.5px);
}

.layer:nth-child(n+10):after {
  -webkit-text-stroke: 3px rgba(0, 0, 0, 0.25);
}

.layer:nth-child(n+11):after {
  /*-webkit-text-stroke: 15px dodgerblue;
  text-shadow: 6px 0 6px #00366b, 5px 5px 5px #002951, 0 6px 6px #00366b;*/
  -webkit-text-stroke: 15px #ffa01e;
  text-shadow: 6px 0 6px #6b5700, 5px 5px 5px #514400, 0 6px 6px #6b3b00;
}

.layer:nth-child(n+12):after {
  /*-webkit-text-stroke: 15px #0077ea;*/
  -webkit-text-stroke: 15px #ea7200;
}

.layer:last-child:after {
  -webkit-text-stroke: 17px rgba(0, 0, 0, 0.1);
}

.layer:first-child:after{
  color: #fff;
  text-shadow: none;
}
/*********************/

.layer:nth-child(n+10):before {
  border: 8px solid rgba(0, 0, 0, 0.25);
}
.layer:nth-child(n+11):before {
  /*border: 10px solid dodgerblue;
  box-shadow: 6px 0 6px #00366b, 5px 5px 5px #002951, 0 6px 6px #00366b;*/
  border: 10px solid #ff941e;
  box-shadow: 6px 0 6px #6b4000, 5px 5px 5px #512400, 0 6px 6px #00616b;
}
.layer:nth-child(n+12):before {
  border: 8px solid #eac000;/*border: 8px solid #0077ea;*/
}

.layer:last-child:before {
  border: 10px solid #fff;
}
.layer:first-child:before{
  border: 8px solid rgba(0, 0, 0, 0.1);
  block-shadow: none;
  
}

@keyframes ಠ_ಠ {
  100% {
    transform: rotateY(-40deg) rotateX(-43deg);
  }
}


.button {
   border: 1px solid rgb(0 0 0 / 82%);
    box-shadow: 0 0 0.05em rgb(0 0 0);
    color: #FFFFFF;
    display: inline-block;
    font: bold 1.5em 'Trebuchet MS',Arial,Helvetica;
    margin: 10px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 0 rgb(0 0 0 / 34%);
	transition: background cubic-bezier(1, -0.63, 0.44, 2.46) .5s;
}
.button, .button span {
    border-radius: 0.3em 0.3em 0.3em 0.3em;
}
.button span {
    background-size: 3px 3px;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    display: block;
    padding: 0.5em 2.5em 0.5em .325em;
}
.button span b {
	float: right;
    margin-right: -2.5rem;
    color: #ffd400;
    text-shadow: 0 0 8px red;
}
.button:hover {
    box-shadow: 0 0 0.1em rgba(0, 0, 0, 0.4);
}
.button:active {
    position: relative;
    top: 1px;
}

.button.pending {
	background: #6e00ff69;
}
.question-body .button:not(.pending){
	background: #00ff1369;
}
.button.forced-show {
	background: #ff170069 !important;
}
.button.pending span b {
	display: none;
}
.button.active {
	background: #6800c9;
}



.button.pending [data-for="i-answer"],
.button:not(.pending) [data-for="a-index"]{
	display:none;
}

.question-body {
	width: 90%;
    max-width: 1000px;
    margin: auto;
	position:relative;
	overflow:hidden;
}
.question-body td {
	padding: 10px 5px;
}

.question-body td:nth-of-type(even) .button,
.question-body td:nth-of-type(even) .button span{
	width:100%;
	margin:0;
	border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.question-body td:nth-of-type(odd) .button,
.question-body td:nth-of-type(odd) .button span {
	width:100%;
	margin:0;
	border-top-right-radius: 0px;
    border-bottom-right-radius: 0;
}
.input-echipo {
	display: inline-block;
	position: relative;
}
.input-echipo span {
	z-index: 1;
	position: absolute;
	left: 0;
	top: 0;
	margin: .5em;
	color: #ffc107;
}
.input-echipo input[type="text"] {
	padding: .5em .5em .5em 1.5em;
	display: block;
	width: 450px;
	max-width: 100%;
	background: #0000002e;
	outline: 0;
	border: 0;
	border-bottom: 2px solid white;
	color: blanchedalmond;
	text-shadow: inherit;
	font-size: inherit;
}

.question, .text-accent{
	color: #FFFFFF;
    font: bold 3em 'Trebuchet MS',Arial,Helvetica;
    margin: 10px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 0 rgb(0 0 0 / 34%);
}

.incorrect-attempts {
	position: absolute;
    bottom: 0;
    font: bold 340px 'Trebuchet MS',Arial,Helvetica;
    text-align: center;
    display: block;
    width: 100%;
    color: #d10000;
    text-shadow: 1px 1px 20px #360000;
	transition: transform 1.3s cubic-bezier(0.6, 1, 0.18, 3.26);
}

.ctrls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    background: linear-gradient(rgb(0 0 0 / 20%), 15%, rgb(32 59 90))
}

body:not(.game-started):not(.game-hello) .stage{
	position: relative;
    top: 26%;
    left: -140px;
}

body:not(.game-started) .ctrls,
body:not(.game-started) .question-body,
body.game-started:not(.capitan):not(.echipo) .question-body,
body:not(.game-hello) .set-echipo{
    transform: rotateY(-90deg);
    opacity: 0;
}
body .ctrls,
body .question-body {
	transition: all ease-in-out .5s 2s;
}

.echipos-names {
	margin:0;
	font-size: 18px;
	position: absolute;
	bottom: 0;
	color: white;
	left: -100%;
	scale: 3;
	text-shadow: 0 0 black;
}

.echipos-names > * {
	display: block;
}

.echipos-names > *:empty ~* {
	display: none;
}


body.game-started .stage,
body.game-hello .stage {
	position: relative;
	transform: scale(.4);
	margin-bottom:50px;
}
/*.stage.minimal .layer {
  animation: none;
  transition: transform ease 5s;
  transform: rotateY(0deg) rotateX(0deg) translateZ(0);
}*/

body:not(.ui-activating-required) .start-activating,
body:not(.intro-ready) .invite-echipos,
body.game-started .set-echipo,
body:not(.game-started) .echipos-names,
body:not(.show-congrats) .congrats {
	display: none;
}

.start-activating, .invite-echipos{
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.invite-echipos:not(:hover) {
	opacity: .3;
}


body:not([data-incorrect-attempts="3"]) .incorrect-attempts span{
	display: none;
}

body[data-incorrect-attempts="1"] .incorrect-attempts span:nth-child(even) {
	display: inline-block;
}

body[data-incorrect-attempts="2"] .incorrect-attempts span:nth-child(odd) {
	display: inline-block;
}

body:not(.show-attempts) .incorrect-attempts{
	transform: scale(0);
	transition: transform .8s cubic-bezier(1, -2.17, 0.54, 0.31)
}

body.show-attempts .incorrect-attempts {
	transform: scale(1);
}