* {
    margin: 0;
    padding: 0;
}
body {
    font: 14px Helvetica, Arial, sans-serif;
    
}
.unselectable {
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;

    /*
      Introduced in IE 10.
      See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
    */
    -ms-user-select: none;
    user-select: none;
}
.wrapper {
    padding: 8px;
}
.puzzle-wrap {
    display: none;
    font-family: Helvetica, Arial, sans-serif;
    background: rgba(0, 0, 0, 0.5);
    margin: 0 auto 26px auto;
    width: 300px;
    box-shadow: 6px 6px 21px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.38);
}
.puzzle-wrap__index {
    padding: 20px;
    text-align: center;
}
.puzzle__start-link {
    text-decoration: none;
    color: #fff;
    display: block;
    font-size: 24px;
}
.puzzle__start-link > img {
    -webkit-filter: grayscale(100%);
}
.puzzle__start-link:hover {
    transition: all 1s;
    color: #FBE7A8;
}
.puzzle__start-link:hover > img {
    transition: all 1s;
    -webkit-filter: grayscale(0%);
}
.puzzle__start-link > span {
    display: block;
    margin: 0 0 12px;
}

.puzzle-wrap__start {
    padding: 20px;
}
.puzzle-wrap__start > h3 {
    margin: 0 0 12px;
    text-align: center;
    color: rgba(247, 202, 61, 1);
    font-size: 20px;
    text-shadow: 1px 1px 1px rgba(54, 54, 54, 1);
}
.puzzle {
    display: none;
    position: relative;
    width: 200px;
    height: 200px;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 2px;
}

.puzzle__item {
    position: absolute;
    cursor: pointer;
    font-size: 32px;
    font-style: italic;
    color: #fff;
    text-align: center;
    background: #606c88;
    background: -moz-linear-gradient(top, #606c88 0%, #3f4c6b 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#606c88), color-stop(100%,#3f4c6b));
    background: -webkit-linear-gradient(top, #606c88 0%,#3f4c6b 100%);
    background: -o-linear-gradient(top, #606c88 0%,#3f4c6b 100%);
    background: -ms-linear-gradient(top, #606c88 0%,#3f4c6b 100%);
    background: linear-gradient(to bottom, #606c88 0%,#3f4c6b 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606c88', endColorstr='#3f4c6b',GradientType=0 );
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    text-shadow: 1px 1px 1px #202020;
}
.puzzle__item:hover {
    background: #677391;
    background: -moz-linear-gradient(top, #677391 0%, #465578 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#677391), color-stop(100%,#465578));
    background: -webkit-linear-gradient(top, #677391 0%,#465578 100%);
    background: -o-linear-gradient(top, #677391 0%,#465578 100%);
    background: -ms-linear-gradient(top, #677391 0%,#465578 100%);
    background: linear-gradient(to bottom, #677391 0%,#465578 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#677391', endColorstr='#465578',GradientType=0 );
}

.puzzle__item__cell {
    display: table-cell;
    width: 50px;
    height: 50px;
    vertical-align: middle;
}

.puzzle__item__cell--correct {
    background: #9dd53a;
    background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a));
    background: -webkit-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
    background: -o-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
    background: -ms-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
    background: linear-gradient(to bottom, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 );
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.49);
    border-radius: 4px;
}

/* hud */
.puzzle-hud {
    display: none;
    background: rgba(0, 0, 0, 0.5);
    margin: 0 auto;
    width: 300px;
	margin-top:-18px;
    box-shadow: 6px 6px 21px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.38);
}
.puzzle-hud__inner {
    padding: 20px;
}
.puzzle-hud__timer {
    color: #fff;
    font-size: 16px;
    text-align: center;
    display: inline-block;
    margin: 0 12px 12px 0;
}
.puzzle-hud__timer > h3 {
    margin: 0 0 5px;
    font-size: 21px;
}
.puzzle-hud__timer__inner {
    padding: 10px;
    display: inline-block;
    border: 1px solid rgb(255, 238, 168);
    font-size: 10px;
    text-shadow: 1px 1px 1px #201A1A;
    border-radius: 4px;
    background: #3a9fac;
    background: -moz-linear-gradient(top, #3a9fac 0%, #348798 50%, #016781 51%, #218fb1 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a9fac), color-stop(50%,#348798), color-stop(51%,#016781), color-stop(100%,#218fb1));
    background: -webkit-linear-gradient(top, #3a9fac 0%,#348798 50%,#016781 51%,#218fb1 100%);
    background: -o-linear-gradient(top, #3a9fac 0%,#348798 50%,#016781 51%,#218fb1 100%);
    background: -ms-linear-gradient(top, #3a9fac 0%,#348798 50%,#016781 51%,#218fb1 100%);
    background: linear-gradient(to bottom, #3a9fac 0%,#348798 50%,#016781 51%,#218fb1 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a9fac', endColorstr='#218fb1',GradientType=0 );
}
.timer-col,
.timer-sep {
    vertical-align: top;
    display: inline-block;
}
.timer-sep:first-child {
    display: none;
}

.puzzle-hud__player {
    display: inline-block;
    vertical-align: top;
    padding: 0 12px;
    color: #fff;
    text-align: center;
    color: #fff;
}
.puzzle-hud__player__points,
.puzzle-hud__player__steps {
    display: inline-block;
    vertical-align: top;
    margin: 0 20px 6px 0;
}
.puzzle-hud__player__points > h3,
.puzzle-hud__player__steps > h3 {
    font-size: 10px;
    margin: 0 0 10px;
}
.puzzle-hud__player__content {
    font-size: 18px;
    color: rgb(190, 255, 181);
    font-weight: bold;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.57);
}
.puzzle-wrap__final {
    padding: 10px;
    text-align: center;
}
.puzzle-wrap__final > h3 {
    color: rgb(231, 241, 247);
    font-size: 15px;
    text-align: center;
}