body{background:#000;font-family:"Myriad Pro", "Trebuchet MS", sans-serif;font-style:italic;overflow:hidden;margin:0;}#screen-wrapper{position:absolute;width:100%;height:100%;overflow:hidden;background-image:radial-gradient(circle closest-corner at center,#835B9C 0%,#5A2E75 100%);}button{line-height:22px;text-align:center;color:#fff;text-shadow:2px 2px 3px #000;box-shadow:inset 0 -8px 0 3px rgba(255,255,255,0.3),-1px 4px 0 #000;height:61px;width:200px;border-radius:30px;border:2px solid #000;font-size:1.5em;font-weight:700;font-style:italic;background-image:linear-gradient(to bottom,#DC5D8E 0%,#80090C 100%);transition:all .3s;text-decoration:none;padding:10px;}button:hover{height:48px;box-shadow:inset -3px -3px 0 3px rgba(255,255,255,0.4);}#screen-wrapper section{position:absolute;width:100%;height:100%;overflow:hidden;transition:all 0.5s;margin:0 auto;}#levels-screen{-webkit-transform:translate3d(-100%,0,0);}#play-screen{-webkit-transform:translate3d(0,100%,0);}#levels-screen.visible,#play-screen.visible{-webkit-transform:translate3d(0,0,0);}#levels-screen p{color:#FFF;font-size:1.5em;padding:0 15px;}.levels{list-style-type:none;margin:20px;padding:0;}.levels li{width:170px;height:170px;position:relative;display:inline-block;transition:all 0.3s;background:#cc4b73;border-radius:70px;box-shadow:inset 6px 10px 0 6px #D77189, 5px 5px 0 4px #000;margin:20px;}.levels li.inactive{background:#3a3a3a;box-shadow:inset 6px 10px 0 6px #646464, 5px 5px 0 4px #000;}.levels li.inactive:hover{-webkit-transform:none;}i{position:absolute;display:block;width:0;height:0;border-right:100px solid transparent;border-bottom:70px solid #FFCB27;border-left:100px solid transparent;-webkit-transform:rotate(20deg) scale(0.4);}i:before{border-bottom:80px solid #FFCB27;border-left:30px solid transparent;border-right:30px solid transparent;position:absolute;height:0;width:0;top:-45px;left:-65px;display:block;content:'';-webkit-transform:rotate(-35deg);}i:after{position:absolute;display:block;color:red;top:3px;left:-105px;width:0;height:0;border-right:100px solid transparent;border-bottom:70px solid #FFCB27;border-left:100px solid transparent;-webkit-transform:rotate(-70deg);content:'';}i.inactive:before{border-bottom:80px solid #222;}h1{font-size:4em;color:#fff;text-shadow:3px 3px 0 #000;text-align:center;}.levels li h1{font-size:4em;position:absolute;left:50%;margin-left:-35px;width:70px;text-align:center;top:-15px;}.levels li i:nth-child(1){top:36px;left:-64px;}.levels li i:nth-child(2){top:90px;left:-15px;}.levels li i:nth-child(3){left:45px;top:40px;}.color-box{display:inline-block;border:solid #000 5px;}.tiles{display:inline-block;line-height:0;}.tiles .row{white-space:nowrap;line-height:0;}.tiles .row .tile,#swap-tile .tile{width:150px;height:150px;border:solid #000 2px;display:inline-block;background-repeat:no-repeat;background-size:100%;transition: all 0.3s;}.tiles.swap-mode .row .tile,.tiles.swap-mode .row .tile.swappable.locked{opacity:0.5;}.tiles.swap-mode .row .tile.swappable{opacity:1;}.tiles .row .tile.start{border-color:#ADFF2F;}.tiles .row .tile.end{border-color:#00BFFF;}.tiles .row .tile.locked{border-color:#CD5C5C;}.tile.turn:before{display:block;width:40%;height:70%;position:absolute;left:50%;margin-left:-20%;content:"";background:#000;bottom:0;}.tile.turn:after{display:block;width:50%;height:40%;position:absolute;top:50%;margin-top:-20%;content:"";background:#000;}.tile.two-turns p{border-radius:50%;position:absolute;width:47%;height:30%;left:25%;bottom:30%;border-bottom:2px dashed #bebebe;z-index:1;border-top:2px dashed #bebebe;-webkit-transform:rotate(45deg);pointer-events:none;margin:0;}.tile.t-road{color:#fff;}.tile.t-road:before{display:block;width:40%;height:50%;position:absolute;left:50%;margin-left:-20%;content:"";background:#000;bottom:0;}.tile.t-road p{bottom:0;left:40%;position:absolute;width:0;height:0;border-top:9px solid transparent;border-right:9px solid #fff;-webkit-transform:rotate(170deg);}.tile.t-road p:after{content:"";position:absolute;border:0 solid transparent;border-top:3px solid #fff;border-radius:20px 0 0 0;top:-16px;left:0;width:12px;height:12px;-webkit-transform:rotate(270deg);}#menu-panel{height:60px;box-shadow:-10px -30px 54px -18px #000;position:relative;z-index:1;}#pause-button{bottom:6px;position:absolute;right:33px;}#swap-tile.active{border-color:red;}#board-container{position:relative;display:inline-block;background-color:#A54B77;}#canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;}#menu-panel .info{line-height:35px;font-size:1.5em;color:#fff;text-shadow:3px 3px 3px #000;position:absolute;border-radius:10px;left:50%;top:-35px;margin-left:-20%;width:40%;text-align:center;border:3px solid #000;-webkit-transform:rotate(-2deg);background-image:radial-gradient(circle closest-corner at center,#534674 0%,#251630 100%);padding:10px;}#menu-panel .info span{font-size:1.8em;color:#DC5D8E;font-weight:700;top:7px;position:relative;}#menu-panel .stars{position:absolute;top:-80px;left:50%;z-index:1;margin-left:-150px;}#menu-panel i:nth-child(1),#win i:nth-child(1){top:0;left:0;-webkit-transform:scale(0.5) rotate(25deg);}#menu-panel i:nth-child(2),#win i:nth-child(2){top:0;left:90px;-webkit-transform:scale(0.4) rotate(25deg);}#menu-panel i:nth-child(3),#win i:nth-child(3){top:0;left:160px;-webkit-transform:scale(0.3) rotate(25deg);}#menu-panel #swap-tile{-webkit-transform:rotate(2deg);position:absolute;left:70px;bottom:10px;overflow:hidden;border:5px solid #000;width:120px;height:120px;transition:all .3s;background-color:#fff;}#menu-panel #swap-tile .tile{border:none;width:120px;height:120px;box-shadow:inset 0 0 20px 0 #000;}#paused,#win-loose{width:100%;height:100%;position:absolute;background:rgba(0,0,0,0.7);top:0;z-index:1;display:none;}#paused-buttons,#win,#loose{position:absolute;bottom:50%;left:50%;margin-left:-100px;}#paused-buttons button{position:absolute;bottom:0;}#paused-buttons #resume-button{bottom:80px;}#win,#loose{display:none;margin-left:-200px;width:400px;}#win .stars{top:-40px;position:absolute;left:50%;margin-left:-165px;}#win-loose p{font-size:3em;color:#fff;text-align:center;}#win-loose button{position:absolute;left:50%;margin-left:-100px;bottom:-20px;}#win-loose #restart-button{position:absolute;left:50%;margin-left:-100px;bottom:-100px;}.tiles .row .tile.start.car-approaching{-webkit-animation:blink .8s infinite;}10%{-webkit-transform:translate(-1px,-2px) rotate(-1deg);}20%{-webkit-transform:translate(-3px,0px) rotate(1deg);}30%{-webkit-transform:translate(0px,2px) rotate(0deg);}40%{-webkit-transform:translate(1px,-1px) rotate(1deg);}50%{-webkit-transform:translate(-1px,2px) rotate(-1deg);}60%{-webkit-transform:translate(-3px,1px) rotate(0deg);}70%{-webkit-transform:translate(2px,1px) rotate(-1deg);}80%{-webkit-transform:translate(-1px,-1px) rotate(1deg);}90%{-webkit-transform:translate(2px,2px) rotate(0deg);}100%{-webkit-transform:translate(1px,-2px) rotate(-1deg);}.shake{-webkit-transform-origin:50% 50%;-webkit-animation:shake .8s linear infinite;}.levels li:hover,#menu-panel #swap-tile:hover{-webkit-transform:scale(1.1);}i.inactive,i.inactive:after{border-bottom:70px solid #222;}.tile.junction,.tile.two-turns{position:relative;}.tile.junction:before,.tile.two-turns:before{display:block;width:40%;height:100%;position:absolute;left:50%;margin-left:-20%;content:"";background:#000;}.tile.junction:after,.tile.two-turns:after,.tile.straight:after,.tile.t-road:after{display:block;width:100%;height:40%;position:absolute;top:50%;margin-top:-20%;content:"";background:#000;}