@charset "utf-8";

html, body{
	width: 100vw;
    height: 100vh;
    overflow: hidden;
}
/* MOBILE */
body{
    font-family: 'Montserrat', sans-serif;
    background-color: #7c0a3a;
    background-image: url(../images/clear_bg.jpg);
    background-size: cover;
    background-position: top center;
}

main {
    display: table;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    background-image: linear-gradient(45deg, #34354a99, #b5c3ce, #ce7f6e99);
    box-shadow: 0 0 15px 0 #000;
}

section{
    display:table;
	width: 100%;
	height: 100vh;
}

#nick{
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
}

/*###########################
  ######### AVISO ############
  ###########################*/

span.aviso{
    display: none;
    position: fixed;
    width: 80vw;
    height: auto;
    top: 40vh;
    left: 5vh;
    padding-bottom: 21px;
    background: #000000d9;
    border: 1px solid #757575;
    border-radius: 14px;
    box-shadow: 0 0 8px 0 #000000;
    z-index: 150;
}
    span.aviso b{
        display: block;
        color: #FFF;
        text-align: center;
        width: 100%;
        font-size: 30px;
        line-height: 70px;
    }
    span.aviso p{
        display: block;
        color: #FFF;
        text-align: center;
        width: 100%;
        padding: 0px 20px;
        font-size: 18px;
        margin-top: 30px;
    }
/*###########################
  ######### MENU ############
  ###########################*/

	section#login, section#menu, section#pistas, section#carros, section#ranking, section#conquista , section#sobre {
	    position: relative;
		background-color: #2b0456;
        background-image: url(../images/menu_bg.jpg);
        background-size: contain;
        background-position: top center;
        background-repeat: no-repeat;
		z-index: 120;
	}

		section#menu span.moedas, section#menu span.recorde{
    		display: block;
    		font-size: 24px;
    		text-align: right;
    		color: #FFF;
    		padding: 5px;
    		padding-right: 5vw;
    		margin-top: 20px;
    		background: linear-gradient(45deg, transparent, black);
    		border-top: 1px solid #757575;
    		border-bottom: 1px solid #757575;
  		}
		section#menu span.moedas{
			margin-top: 230px;
    		padding-right: 47px;
		}
		section#menu img.moedaico{
			float: right;
			width: 29px;
            margin-top: -34px;
			margin-right: 8px;
		}
		section#login a, section#menu a, section#pistas a, section#carros a, section#ranking a, section#conquista a, section#sobre a{
			display: block;
			padding: 8px 0;
			font-size: 25px;
			text-align: center;
			color: #fff;
			text-shadow: 0px 0px 4px #000;
			background: #0000007a;
			background-size: 100%;
			border-radius: 20px;
			border: 1px solid #757575;
			box-shadow: 0px 0px 8px 1px #000;
		}
		section#menu a.btPistas{
			margin-top: 100px;
			margin-left: calc(50% - 128px);
			width: 115px;
			display: inline-block;
		}
		section#menu a.btCarros{
			margin-top: 100px;
			margin-left: 20px;
			width: 115px;
			display: inline-block;
		}
		section#menu a.btSobre{
			position: absolute;
            width: 35px;
            height: 35px;
            line-height: 33px;
            font-size: 16px;
            bottom: 10px;
            right: 10px;
            padding: 0;
            border: 1px solid #FFC107;
            color: #FFEB3B;
		}
		section#menu a.btIniciar{
			position:absolute;
			bottom: 100px;
			left: calc(50% - 102px);
			width: 200px;
		}
		section#menu a.btLogin, section#login a.btLogin{
			position: absolute;
            bottom: 230px;
            left: calc(50% - 102px);
            width: 200px;
            font-size: 20px;
            border: 1px solid #00cef9;
		}
		
		section#menu a.btRanking {
            position: absolute;
            bottom: 100px;
            left: calc(50% - 172px);
            width: 50px;
            border-radius: 15px;
        }
        
        section#menu a.btRanking svg {
            display: block;
            margin: 2px auto;
        }
        
        section#menu a.btConquista {
            position: absolute;
            bottom: 100px;
            left: calc(50% + 118px);
            width: 50px;
            border-radius: 15px;
        }
        
        section#menu a.btConquista svg {
            display: block;
            margin: 2px auto;
        }
		
/*###########################
  ######### LOGIN ############
  ###########################*/
    
    section#login{
		display:none;
        z-index: 110;
	}
	
	section#login a.botao{
		position: absolute;
		display: block;
		left: calc(50% - 102px);
		bottom:150px;
		font-size: 25px;
		text-align: center;
		font-family: arial;
		color: #EEE;
		width: 200px;
		padding: 2vw 0;
		background: #0000007a;
	}
	
	section#login input{
	    position: relative;
        width: 280px;
        top: 230px;
        left: calc(50% - 140px);
        display: block;
        color: #eee;
        margin-top: 30px;
        font-size: 26px;
        padding: 5px 10px;
        border: 1px solid #00cef9;
        border-radius: 10px;
        background: #0000007a;
        box-shadow: 0px 0px 8px 1px #000;
	}
	
	section#login input#addNick{ display:none; }
  

/*###########################
  ######### JOGO ############
  ###########################*/
  
    section#jogo{
		display:block;
        z-index: 110;
	}

	canvas {
      cursor: move;
      position:absolute;
      display: block;
      max-width: 100%;
      left: 0;
      top: 0;
    }
    
    .is-cub-hovered,
    .is-cub-hovered canvas {
      cursor: -webkit-grab;
      cursor: grab;
    }
    
    .is-cub-dragging,
    .is-cub-dragging canvas {
      cursor: -webkit-grabbing;
      cursor: grabbing;
    }
    
    .instruction {
      padding: 0 10px;
      text-align: center;
      position: absolute;
      width: 100%;
      max-width: 500px;
      padding-bottom: 40px;
    }
    
    .button {
      font-family: 'Avenir Next', Avenir, sans-serif;
      font-weight: 500;
      font-size: 20px;
      padding: 5px 15px;
      margin: 10px;
      background: #BBB;
      color: white;
      border-radius: 5px;
      border: none;
      cursor: pointer;
    }
    
    .button:hover {
      background: #09F;
    }
    
    .top-bar {
      position: absolute;
      left: 10px;
      top: 10px;
    }
    
    .level-select-button {
      position: relative;
      z-index: 2; /* above canvas */
    }
    
    .next-level-button {
      position: absolute;
      left: 50%;
      -webkit-transform: translateX(-110px) scale(0.5);
      transform: translateX(-110px) scale(0.5);
      opacity: 0;
      background: #09F;
      width: 200px;
      height: 80px;
      pointer-events: none;
      -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
      transition: transform 0.2s, opacity 0.2s;
    }
    
    .next-level-button:hover {
      background: #2BF;
    }
    
    .next-level-button.is-open {
      display: inline-block;
      pointer-events: auto;
      -webkit-transform: translateX(-110px) scale(1);
      transform: translate(-110px, 70px) scale(1);
      opacity: 1;
    }
    
    /* ---- level list ---- */
    
    .level-list {
      position: absolute;
      background: #EEE;
      width: 100%;
      max-width: 500px;
      height: 100vh;
      top: 0;
      margin: 0;
      list-style: none;
      padding: 10px;
      z-index: 3; /* above canvas, level select button */
      top: -100vh;
      transition: top 0.5s;
    }
    
    .level-list.is-open {
      top: 0;
    }
    
    .level-list__item {
      display: inline-block;
      background: #DDD;
      margin: 5px;
      padding: 5px;
      width: 50px;
      height: 50px;
      text-align: center;
      border-radius: 10px;
      position: relative;
    }
    
    .level-list__item:hover {
      color: #09F;
      cursor: pointer;
      background: white;
    }
    
    .level-list__item.is-playing {
      background: #09F;
      color: white;
    }
    
    .level-list__item__number {
      display: block;
      font-size: 20px;
      line-height: 30px;
    }
    
    .level-list__item__blurb {
      display: block;
      font-size: 12px;
    }
    
    .level-list__item__check {
      position: absolute;
      right: -10px;
      top: -10px;
      width: 30px;
      line-height: 30px;
      background: #555;
      border-radius: 15px;
      color: white;
      display: none;
    }
    
    .level-list__item.did-complete .level-list__item__check {
      display: block;
    }
    
    /* ---- level pres ---- */
    
    .levels { display: none; }

		
/*###########################
  ###### PISTAS CARROS ###### 
  ###### RANKING SOBRE ######
  ###########################*/
  
    section#pistas, section#carros, section#ranking, section#conquista, section#sobre{
		display:none;
		z-index: 110;
	}
	
	section#pistas div.lista, section#carros div.lista {
        display: block;
		margin-top: 40px;
        padding-bottom: 40px;
	}
	
	section#pistas div.lista ul li, section#carros div.lista ul li {
		display: inline-block;
		width: 28vw;
		max-width: 124px;
		height: 28vw;
		max-height: 124px;
		margin: 2.4vw;
	}
	
	section#pistas a.botao, section#carros a.botao, section#ranking a.botao, section#conquista a.botao, section#sobre a.botao {
		position: relative;
		display: block;
		left: calc(50% - 102px);
		font-size: 25px;
		text-align: center;
		font-family: arial;
		color: #EEE;
		width: 200px;
		padding: 2vw 0;
		background: #0000007a;
	}

	section#pistas span.moedas, section#carros span.moedas {
		display: block;
		font-size: 24px;
		text-align: right;
		color: #FFF;
		padding: 10px;
        padding-right: 47px;
        margin-top: 200px;
		background: linear-gradient(45deg, transparent 50%, black);
	}
	section#pistas img.moedaico, section#carros img.moedaico {
		float: right;
		width: 29px;
        margin-top: -38px;
		margin-right: 8px;
	}

/*###########################
  ######## PISTAS ###########
  ###########################*/

	section#pistas div.lista ul li {
		box-shadow: 0px 0px 4px 0px #000;
		background-size: 100%;
	}
	
	section#pistas div.lista ul li img {width: 100%;}

/*###########################
  ######## CARROS ###########
  ###########################*/

	section#carros div.lista ul li {
		background-size: auto 100%;
		background-position: center;
		background-repeat: no-repeat;
	}

	section#carros div.lista ul li img {width: 95%;}

/*###########################
  ######## RANKING ##########
  ###########################*/
  
    ul.ranking {
        margin: 125px auto 50px auto;
        text-align: center;
    }
    
    ul.ranking li {
        width: 350px;
        margin: 2px auto;
        padding: 6px 0;
        font-size: 1rem;
        color: #fff;
        border-radius: 50px;
        background-color: #00000099;
    }
    
    ul.ranking li b, ul.ranking li div, ul.ranking li span { display: inline-table; }
    
    ul.ranking li b {
        width: 30px;
        line-height: 30px;
        text-align: center;
        color: #fff;
        border: 0.5px solid #000;
        margin: -2px 10px 0 6px;
        border-radius: 50%;
        background-image: linear-gradient(45deg, #9E9E9E, #607D8B);
    }
    
    ul.ranking li div {
        width: calc(100% - 162px);
    }
    
    ul.ranking li span {
        width: 100px;
        line-height: 30px;
        text-align: center;
        color: #ffffff;
        margin: -2px 6px 0 10px;
        border-radius: 25px;
        background-image: linear-gradient(45deg, #9E9E9E, #607D8B);
    }
    
    ul.ranking li.p1, ul.ranking li.p2, ul.ranking li.p3 {
        display: inline-block;
        width: 100px;
        padding: 0;
        margin: 10px 5px;
        border-radius: 10px;
    }
    
    ul.ranking li.p1 b, ul.ranking li.p2 b, ul.ranking li.p3 b {
        position: absolute;
        width: 40px;
        height: 40px;
        line-height: 40px;
        margin: -20px 0 0 30px;
    }
    
    ul.ranking li.p1 div, ul.ranking li.p2 div, ul.ranking li.p3 div {
        width: 100%;
        margin: 35px 0 15px 0;
    }
    
    ul.ranking li.p1 span, ul.ranking li.p2 span, ul.ranking li.p3 span {
        margin: 0;
        border-radius: 10px;
    }
    
    ul.ranking li.p1 { margin: 0 0 0 110px; }
    ul.ranking li.p1 div { height: 60px; }
    
    ul.ranking li.p2 { margin: 0 110px 0 -208px; }
    ul.ranking li.p2 div { height: 30px; }
    
    ul.ranking li.p1 b svg {
        position: absolute;
        width: 25px;
        margin: -21px 0 0 -8px;
        filter: drop-shadow(1px 1px 1px #000000cc) drop-shadow(-1px -1px 1px #000000cc);
    }

/*###########################
  ####### CONQUISTA #########
  ###########################*/
    
    section#conquista div.lista ul {
        margin: 125px auto 15px auto;
        text-align: center;
    }
    
    section#conquista div.lista ul li {
        display: inline-block;
        width: 110px;
        margin: 10px;
        border-radius: 10px;
        border: 1px solid #3c3c3c;
        background-color: #00000066;
    }
    
    section#conquista div.lista ul li img {
        width: 100%; 
        opacity: 0.5;
    }
    
    section#conquista div.lista ul li small {
        position: absolute;
        width: 50px;
        padding: 6px;
        border: 1px solid #585858;
        border-radius: 5px;
        margin: 39px 0 0 -80px;
        background-color: #ffffffcc;
    }
    
    section#conquista p {
        display: block;
        width: 330px;
        line-height: 20px;
        font-size: 0.8rem;
        text-align: center;
        margin: 0 auto 50px auto;
        background-image: linear-gradient(45deg, transparent, #ffffff, transparent);
    }
    
    section#conquista div.lista ul li.ativo img { opacity: 1; }
    section#conquista div.lista ul li.ativo small {
        width: 60px;
        margin: -1px 0 0 -59px;
        background-color: #FFC10799;
    }

/*###########################
  ######## RODAPE ###########
  ###########################*/

footer{
	height: 20px;
	background: #CDDC39;
}

@media all and (min-width: 600px) {
     span.aviso{
        width: 53vw;
        left: 18vh; 
     }
}