/*
 * Generic styles
 */

#bcubed {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    margin: 0;
    background: #000 url('../images/menu/background.jpg') no-repeat 50% 50%;
    background-size: cover;
    color: #fff;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 700;
    text-align: center;
    cursor: default;
    user-select: none
}

#bcubed p {
    margin: 0;
    padding: 0
}

#bcubed canvas {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    touch-action: none
}

#bcubed button {
    overflow: visible;
    padding: 2px;
    margin: 0;
    border: none;
    background: transparent;
    color: #fff;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent
}

#bcubed a {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

/*
 * Various buttons
 */

/* "Level Menu" button in the bottom right corner of the screen during play */

#bcubed button.bcubed-level-menu {
    position: absolute;
    bottom: 0;
    right: 10px;
    font-size: 24px;
    color: #f00
}

#bcubed button.bcubed-level-menu:active {
    color: #f66
}

/* "Back" button */

#bcubed button.bcubed-back {
    font-weight: 900;
    font-size: 24px;
    color: #ff0;
    text-shadow: none
}

#bcubed button.bcubed-back:active {
    color: #ff6
}

/* Main menu buttons */

#bcubed button.bcubed-start {
    font-size: 90px;
    color: #f00
}

#bcubed button.bcubed-start:active {
    color: #f66
}

/* "Next Level" button */

#bcubed button.bcubed-next-level {
    font-size: 36px;
    color: #f00
}

#bcubed button.bcubed-next-level:active {
    color: #f66
}

/* "Click Here" button */

#bcubed button.bcubed-click-here {
    font-size: 36px;
    color: #921092
}

#bcubed button.bcubed-click-here:active {}

/*
 * Simple loading screen
 */

#bcubed-start-screen {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 4;
    background: #000
}

#bcubed-start-screen>div {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 600px;
    height: 550px;
    margin: -275px 0 0 -300px;
    transform-origin: 50% 50%
}

#bcubed-start-screen>div>* {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.25s
}

#bcubed-start-screen>div>.bcubed-visible {
    opacity: 1;
    z-index: 2
}

#bcubed-start-screen #bcubed-loading a {
    position: absolute;
    left: 120px;
    top: 360px;
    width: 365px;
    height: 60px;
    color: transparent
}

#bcubed-start-screen #bcubed-loading img {
    display: block;
    pointer-events: none
}

#bcubed-start-screen .bcubed-loading-bar {
    position: absolute;
    left: 201px;
    top: 430px;
    width: 200px;
    height: 18px;
    border: 2px solid #ff0
}

#bcubed-start-screen #bcubed-loading-progress {
    display: block;
    width: 0;
    height: 18px;
    background: #f00;
    transition: width 0.25s
}

/* Site lock banner */

#bcubed-start-screen #bcubed-site-lock .bcubed-message {
    display: block;
    width: 354px;
    height: 230px;
    margin: 90px auto 0;
    background: transparent url('../images/lock.png') no-repeat 0 0;
    color: transparent
}

#bcubed-start-screen #bcubed-site-lock a {
    display: block;
    width: 162px;
    height: 66px;
    margin: -15px auto 0;
    background: transparent url('../images/lock.png') no-repeat -163px -231px;
    color: transparent
}

#bcubed-start-screen #bcubed-site-lock a:active {
    background-position: 0 -231px
}

/*
 * Sound and music options in the top right corner
 */

#bcubed-options {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3
}

#bcubed-options button {
    width: 32px;
    height: 32px;
    background: url('../images/options.png') no-repeat 0 0;
    background-size: 64px
}

#bcubed-options button#bcubed-music-toggle {
    background-position: 0 0
}

#bcubed-options button#bcubed-music-toggle.bcubed-off {
    background-position: 0 -32px
}

#bcubed-options button#bcubed-sound-toggle {
    background-position: -32px 0
}

#bcubed-options button#bcubed-sound-toggle.bcubed-off {
    background-position: -32px -32px
}

/*
 * In-game UI elements
 */

#bcubed-game {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    color: #80ff00;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s
}

#bcubed-game.bcubed-visible {
    opacity: 1;
    pointer-events: auto
}

#bcubed-game>p {
    float: left;
    margin: 10px 0 0 10px;
    padding: 0;
    font-size: 18px;
    line-height: 1.25
}

#bcubed-game>p+p {
    clear: left;
    margin-top: 4px;
    font-size: 25px
}

/*
 * Menu screens
 */

#bcubed-menu {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.25s;
    pointer-events: none
}

#bcubed-menu.bcubed-visible {
    opacity: 1;
    pointer-events: auto
}

#bcubed-menu-scale {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform-origin: 50% 50%
}

#bcubed .bcubed-page {
    opacity: 0;
    pointer-events: none
}

#bcubed .bcubed-page.bcubed-visible {
    opacity: 1;
    pointer-events: auto
}

#bcubed p.bcubed-page,
#bcubed div.bcubed-page {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    width: 600px;
    height: 550px;
    margin: -275px 0 0 -300px;
    transform-origin: 50% 50%
}

/* Level completed summary */

#bcubed div.bcubed-page.bcubed-level-won {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 346px;
    height: 276px;
    margin: -138px 0 0 -173px;
    border: 4px solid #ffff00;
    border-radius: 2px;
    font-size: 25px
}

#bcubed div.bcubed-page.bcubed-level-won h1 {
    margin: 0;
    padding: 0;
    color: #f00;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 900;
    font-size: 40px;
    line-height: 80px;
    text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff
}

#bcubed div.bcubed-page.bcubed-level-won p {
    line-height: 60px
}

/* Game completed summary */

#bcubed div.bcubed-page.bcubed-game-won h1 {
    margin: 430px 0 0;
    padding: 0;
    color: #f00;
    font-family: 'Titillium Web', sans-serif;
    font-size: 42px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff
}

#bcubed div.bcubed-page.bcubed-game-won p {
    margin: 0;
    color: #921092;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff
}

#bcubed button.bcubed-back.bcubed-page.bcubed-game-won {
    position: absolute;
    bottom: 6px;
    right: 10px;
    font-size: 16px
}

/* Level list */

#bcubed div.bcubed-page.bcubed-level-list {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 476px;
    height: 492px;
    margin: -246px 0 0 -238px;
    border: 4px solid #ff0;
    border-radius: 2px;
    font-size: 25px
}

#bcubed div.bcubed-page.bcubed-level-list h1 {
    margin: 10px auto 0;
    padding: 0;
    font-size: 42px;
    font-weight: 900;
    color: #f00;
    text-transform: uppercase;
    text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff
}

#bcubed div.bcubed-page.bcubed-level-list ul {
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0 0 0 19px
}

#bcubed div.bcubed-page.bcubed-level-list ul li {
    float: left;
    padding: 16px 0 0 17px
}

#bcubed div.bcubed-page.bcubed-level-list ul button {
    float: left;
    width: 53px;
    border: 3px solid #fff;
    border-radius: 2px;
    background: #22ddca;
    font-size: 30px;
    font-weight: 700;
    line-height: 47px;
    text-shadow: none
}

#bcubed div.bcubed-page.bcubed-level-list ul button.bcubed-disabled {
    background: #666;
    cursor: auto
}

#bcubed div.bcubed-page.bcubed-level-list button.bcubed-back {
    margin: 5px auto 0
}

/* Main menu - title screen */

#bcubed p.bcubed-page.bcubed-title {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 270px;
    margin: -275px 0 0 -300px;
    padding-top: 280px;
    background: transparent url('../images/menu/page_title.png') no-repeat 50% 50%
}

/*
 * Animated stars in the background
 */

#bcubed-stars {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    pointer-events: none
}

#bcubed-stars img {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    transition: transform 0.5s;
    transform-origin: 50% 50%;
    transform: scale(0, 0);
    will-change: left, top
}