
@import "compass";

@mixin shaded-box {
    @include border-radius(24px);
    @include box-shadow(#051, 0, 0, 30px);
    background: #273;
    padding: 5px;
}

#lobby {

    width: 600px;
    margin: 50px auto;
    white-space: nowrap;
    font-size: 18px;
    color: #051;


    .left {
        display: inline-block;
        vertical-align: top;
        width: 325px;
    }

    .right {
        display: inline-block;
        vertical-align: top;
        margin-left: -40px;
    }

    .logo {
        margin: 0 30px 30px 30px;
    }

    p { margin-bottom: 5px; }

    section { margin: 15px; }

    .player {
        @include shaded-box();

        #userpic {
            display: inline-block;
            vertical-align: bottom;
            width: 50px;
            height: 50px;
            margin-left: -50px;

            img {
                @include border-radius(5px);
                @include box-shadow(#000 0 1px 6px);
            }
        }

        input {
            background: #205f20;
            border: none;
            font-size: 22px;
            color: #5d4;
            padding: 8px;
            width: 250px;
            @include border-radius(5px);
        }

        input:focus {
            outline: none;
        }

    }

    .character-select {
        li {
            margin: 5px;
            display: inline-block;
            padding: 10px;
            background-color: #384;
            @include border-radius(5px);
            opacity: 0.5;
        }
        li:hover { background-color: #5b7; }
        li.selected { background-color: #5b7; opacity: 1; }

        li div {
            width: 22px;
            height: 22px;
            background-position: -22px 0;
        }

        .john  { background-image: url('../res/char-john.png'); }
        .joe   { background-image: url('../res/char-joe.png'); }
        .betty { background-image: url('../res/char-betty.png'); }
        .mary  { background-image: url('../res/char-mary.png'); }

        .frame0 .selected div { background-position: 0 0; }
        .frame1 .selected div { background-position: -22px 0; }
        .frame2 .selected div { background-position: -44px 0; }
        .frame3 .selected div { background-position: -22px 0; }
    }

    #facebook-login {
        p {
            font-size: 12px;
            white-space: normal;
            line-height: 15px;
            color: #8fa;
        }
        a { color: #afa; }
    }

    .games {
        @include shaded-box();
        padding: 20px;

        #games-list {
            min-width: 258px;
            min-height: 300px;
        }

        .game-mode {
            position: relative;
            width: 256px;
            height: 128px;
            vertical-align: middle;

            border: solid 1px #000;
            margin-top: 10px;


            &.free { background: url('../res/mode-arena.png'); }

            &.free:hover {
                @include box-shadow(#ff0 0 0 30px 3px);
            }

            &.future {
                background: #333;
                border: solid 1px #111;
                color: #fff;
                text-align: center;
                font-size: 12px;
                line-height: 128px;
                opacity: 0.2;
                @include border-radius(8px);
            }
            
            .play {
                cursor: default;
                line-height: 128px;
                font-size: 32px;
                color: #FF0;
                text-align: center;
                @include text-shadow(#000 0 1px 5px);
                opacity: 0;
                @include translateX(50px);
                @include transition-property("opacity, transform");
                @include transition-duration(250ms);

            }

            &:hover .play {
                opacity: 1;
                @include translateX(0);
            }
        }

        .counter {
            position: absolute;
            background: #a00;
            padding: 5px 10px;
            right: 0;
            margin-top: -5px;
            margin-right: -5px;
            color: #fff;
            @include border-radius(8px);
            @include box-shadow(#000 0 1px 5px);
        }

        label {
            position: absolute;
            color: #fff;
            bottom: 0;
            right: 0;
            text-transform: uppercase;
            margin: 5px 10px;

            font-size: 16px;
            font-weight: bold;
            color: #000;
            @include text-shadow(#fff 0 1px 5px);
        }

        .game-mode:first-child {
            margin-top: 0;
        }
    }

}


article {
    margin: 40px 10px;
    color: #132;

    header { font-size: 16px; margin: 10px 0; font-weight: bold; }

    p { font-size: 13px; }
}



footer {
    background: #373;
    width: 100%;
    padding: 30px 20px;
    font-size: 13px;
    line-height: 20px;
    color: #252;
    margin-top: 35px;
    position: absolute;
    left: 0;
    right: 0;
    box-sizing: border-box;

    a { color: #4c4; }
}
