//Less utils

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

.glow(@radius:10px, @color:#fff){
    -webkit-box-shadow:0 0 @radius @color;
    -moz-box-shadow: 0 0 @radius @color;
    box-shadow:0 0 @radius @color;
}

.shadow(@distance:2px, @blur:3px, @spread:0px, @color:rgba(0,0,0,0.3)){
    -webkit-box-shadow: @distance @distance @blur @spread @color;
    -moz-box-shadow: @distance @distance @blur @spread @color;
    box-shadow: @distance @distance @blur @spread @color;
}
.backface-visibility(@value){
    -webkit-backface-visibility: @value;
    -moz-backface-visibility: @value;
    -ms-backface-visibility: @value;
    -o-backface-visibility: @value;
    backface-visibility: @value;
}
.transition(@value){
    -webkit-transition: @value;
    -moz-transition: @value;
    -ms-transition: @value;
    -o-transition: @value;
    transition: @value;
}
.transform-style(@value){
    -webkit-transform-style: @value;
    -moz-transform-style: @value;
    -ms-transform-style: @value;
    -o-transform-style: @value;
    transform-style: @value;
}
.transform(@value){
    -webkit-transform: @value;
    -moz-transform: @value;
    -ms-transform: @value;
    -o-transform: @value;
    transform: @value;
}

#gameboard {
    position: relative;
    .shadow();
    background: #fcf0f0;
	-webkit-box-shadow: inset 0px 0px 35px 15px rgba(0, 0, 0, 0.25);
	-moz-box-shadow: inset 0px 0px 35px 15px rgba(0, 0, 0, 0.25);
	box-shadow: inset 0px 0px 35px 15px rgba(0, 0, 0, 0.25);
    float:left;
    width: 900px;
    height: 600px;
    border: 4px solid #555;
	outline: 4px solid #333;
    overflow:hidden;
}

#hand_left{
    .transform(rotate(90deg));
    position: absolute;
    left: -155px;
    top:180px;
    height:120px;
    width: 450px;

}
#hand_bottom{
    position: absolute;
    bottom: 5px;
    left:50px;
    height:120px;
    width:800px;
}

#hand_right{
    .transform(rotate(-90deg));
    position: absolute;
    right: -155px;
    top:180px;
    height:120px;
    width: 450px;
}
.hand.winner .card{
.glow(10px, rgba(0,255,0,1.0));
}

.card{
    .transition(all 0.34s ease-in-out);
    .rounded-corners();
    width:85px;
    font-size:20px;
    font-weight:bold;
    height:118px;
    display:inline-block;
    position:relative;
    margin: 0 -14px;
    top:0;
    left:0;

    .front, .back{
        .rounded-corners();
        .shadow(1px, 1px, 0px);

        .backface-visibility(hidden);
        .transform-style(preserve-3d);
        .transition(all 0.2s ease-in-out 0s);
        border:1px solid #222;
        float: none;
        height: inherit;
        left: 0;
        position: absolute;
        top: 0;
        width: inherit;
    }

    .front{
        .transform(rotateY(0deg));
        background: none repeat scroll 0 0 #fff;
        z-index: 9;

        .number_top{
            position: absolute;
            top:5px;
            left:5px;
        }
        .number_bottom{
            position: absolute;
            bottom:5px;
            right:5px;
            .transform(rotate(-180deg));
        }
        .symbol{
            position:absolute;
            top:55px;
            width:100%;
			text-align:center;
            font-size: 55px;
        }
    }

    .back {
        .transform(rotateY(-180deg));
        background: url('../img/cardback.jpg') no-repeat center white;
        z-index: 8;
    }
}

.hand.opponent.opponent_card .card:hover{
    cursor:pointer;
    .glow(10px, red);
}
.hand.opponent.opponent_hand:hover{
    cursor:pointer;
    .glow(10px, red);
}
#hand_bottom .hand.player_card .card:hover{
    cursor:pointer;
    .glow(10px, green);
}

#hand_bottom .card.initial_position{
    top:-600px;
    .transform(rotate(-380deg));
}
#hand_left .card.initial_position{
    top:-400px;
    left:-600px;
    .transform(rotate(-380deg));
}
#hand_right .card.initial_position{
    top:-450px;
    left:500px;
    .transform(rotate(-380deg));
}

.hand{
    text-align: center;
    position:relative;
    top:0px;
    .transition(all 0.6s ease-in-out 0s);
    .hit_button{
        .rounded-corners();
    }
}

.hand.protected{
    top:75px;
    .transition(all 0.6s ease-in-out 0s);
}

#hand_bottom .hand.protected{
    top:0;
}

#hand_bottom .hand.protected .card{
    opacity:0.7;
    .glow(10px, blue);
}

.card.flip, .hand.opponent.protected .card{
    .front {
        .transform(rotateY(180deg));
        z-index: 9;
    }
    .back {
        .transform(rotateY(0deg));
        z-index: 10;
    }
}
.card.highlight .front, .card.highlight .back{
    background:yellow;
    .transition(all 1s ease-in-out 0s);
}
.credits{
	.transition(all 1s ease-in-out 0s);
}
.credits.add{
	.transition(all 1s ease-in-out 0s);
	color:green;
}
.credits.subtract{
	.transition(all 1s ease-in-out 0s);
	color:red;
}