.game {position: relative; width: 100%; height: 100%; margin: 0 auto; box-shadow: 0 0 20px rgba(255, 255, 255, 0.5)}

.score {color: #52e898}
.combo {color: #e1972e}
.multiplier {color: #d1483c}

/* Everything is rendered on this canvas */
.game canvas {display: none; cursor: none}

/* Menu Screens positioned absolutely over the game screen */
.game .menu {position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, .5); color: #fff; font-size: 24px; font-weight: 700; text-align: center; text-transform: uppercase; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default}
.game .menu-screen {position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: none}
.game .menu-screen p.logo {padding-top: 25px}
.game .menu-screen>ul {list-style: none; margin: 0; padding: 80px 0 0}
.game .menu-screen p.logo+ul {padding-top: 0}
.game .menu-screen>ul>li {padding-top: 25px}
.game .menu-screen a {outline: none}
.game .menu-screen a:hover {text-decoration: none}
.game button.toggle {border: none; background: transparent; font-weight: 700}
.game .toggle {position: relative; display: inline-block; width: 335px; color: #fff; line-height: 75px; text-align: center}
.game .toggle:before,
.game .toggle:after {content: ''; position: absolute; top: 0; width: 75px; height: 75px; background: url('../images/button_icons.svg') no-repeat 0 0, transparent url('../images/button_icons_background.svg') no-repeat 0 0; background-size: auto 75px, auto auto}
.game .toggle:before {left: 0}
.game .toggle:after {right: 0}
.game .toggle.active {color: #fff}

.game .toggle.on-off:before {background-position: -225px 0, 0 0}
.game .toggle.on-off.active:before {background-position: -150px 0, 0 0}
.game .toggle.on-off:after {background-position: -300px 0, 0 0}
.game .toggle.on-off.active:after {background-position: -375px 0, 0 0}

.game .toggle.audio:before {background-position: -525px 0, 0 0}
.game .toggle.audio.active:before {background-position: -450px 0, 0 0}
.game .toggle.audio:after {background-position: -600px 0, 0 0}
.game .toggle.audio.active:after {background-position: -675px 0, 0 0}

.game button.button {border: none; font-weight: 700}
.game .button {display: inline-block; background: transparent none no-repeat 0 0; background-size: 100% auto; color: #fff; text-align: center; white-space: nowrap}
.game .button.small {width: 256px; background-image: url('../images/button.svg'); line-height: 77px}
.game .button.medium {width: 335px; padding-bottom: 4px; background-image: url('../images/button.svg'); font-size: 36px; line-height: 97px}
.game .button:hover {background-position: 0 100%}

.game .button.icon-play {color: #d8e236}
.game .button.icon-play:after {content: ''; display: inline-block; width: 75px; height: 75px; margin-right: -30px; background: transparent url('../images/button_icons.svg') no-repeat 0 0; vertical-align: -26px}
.game .button.small.icon-play:after {width: 50px; height: 50px; margin-right: -20px; background-size: auto 50px; vertical-align: -16px}

.game .button.icon-restart {color: #ce2b2c}
.game .button.icon-restart:after {content: ''; display: inline-block; width: 75px; height: 75px; margin-right: -30px; background: transparent url('../images/button_icons.svg') no-repeat -50px 0; vertical-align: -26px}
.game .button.small.icon-restart:after {width: 50px; height: 50px; margin-right: -20px; background-size: auto 50px; vertical-align: -16px}

.game h1 {font-size: 30px; line-height: 75px}
.game h1:before {content: ''; display: inline-block; width: 75px; height: 75px; background: transparent url('../images/button_icons.svg') no-repeat -825px 0; vertical-align: -34px}
.game h1:after {content: ''; display: inline-block; width: 75px; height: 75px; background: transparent url('../images/button_icons.svg') no-repeat -825px 0; vertical-align: -34px}

/* Power-ups quick tips */
dl.power-ups {float: left; width: 450px; margin: 50px 0 60px 0; font-size: 18px; line-height: 48px; text-align: right; text-transform: none}
dl.power-ups+dl.power-ups {float: right; margin-left: 0; text-align: left}
dl.power-ups+dl.power-ups dt {float: left; margin-right: 10px; margin-left: 0}
dl.power-ups+p {clear: both}
dl.power-ups dt {float: right; width: 48px; height: 48px; margin: 0 0 0 10px; background: transparent url('../images/640/power_ups.png') no-repeat -99em -99em}
dl.power-ups dt.weapon {background-position: -96px 0}
dl.power-ups dt.score-multiplier {background-position: -576px 0}
dl.power-ups dt.damage-multiplier {background-position: -720px 0}
dl.power-ups dt.score {background-position: -384px 0}
dl.power-ups dt.life {background-position: -48px 0}
dl.power-ups dt.repair {background-position: -528px 0}
dl.power-ups dd {padding-bottom: 24px}

/* Level and game summary table */
.game table.scoring {width: 550px; margin: 0 auto 50px; border: none; border-radius: 20px; border-collapse: separate; border-spacing: 30px 20px; background: rgba(0, 0, 0, .5); box-shadow: 0 0 10px #fff; font-size: 18px}
.game table.scoring tr.small {font-size: 12px}
.game table.scoring tr.small th {text-align: right}
.game table.scoring th {font-weight: 700; text-align: left}
.game table.scoring td {font-size: 24px; font-weight: 700; text-align: right; text-transform: none}

dl.score-footer {position: absolute; bottom: 10px; left: 0; width: 100%; font-size: 12px; text-align: center}
dl.score-footer dt,
dl.score-footer dd {display: inline}
dl.score-footer dt {padding-left: 12px; font-size: 10px}
dl.score-footer dd {padding-right: 12px; text-transform: none}


/*
 * Loading screen and progress bar
 */
.game .progress {font-size: 18px}
.game .progress b {color: #d8e236; font-size: 30px}