body * {-moz-user-select: none; user-select: none; -ms-user-select: none}
canvas {display: block}

body {cursor: none}
body.loading>canvas {opacity: 0}
body.debug {cursor: default}

body:not(.loaded):after {content: ''; position: absolute; top: 0; left: 0; width: 1px; height: 1px; background-image:
    linear-gradient(to right, #000,  #000),
    url('../images/interface/merixgames.png'),
    url('../images/interface/menu_background.jpg'),
    url('../images/interface/start_screen.jpg'),
    url('../images/interface/panel_small_background.png'),
    url('../images/interface/panel_medium_background.png'),
    url('../images/interface/panel_large_background.png'),
    url('../images/interface/header_small.png'),
    url('../images/interface/header_medium.png'),
    url('../images/interface/header_large.png'),
    url('../images/full_version/01.jpg'),
    url('../images/full_version/02.jpg'),
    url('../images/full_version/03.jpg'),
    url('../images/full_version/04.jpg'),
    url('../images/full_version/05.jpg'),
    url('../images/full_version/06.jpg'),
    url('../images/full_version/07.jpg'),
    url('../images/full_version/08.jpg');
}

button {color: #fff}

h1 {margin-bottom: 1em; font-weight: 400}
h2 {margin-bottom: 1em; font-weight: 400}

.float-left {float: left}

.relative {position: relative}

.text-left {text-align: left}
.text-center {text-align: center}
.text-right {text-align: right}

.text-size-medium {font-size: 36px}

.no-wrap {white-space: nowrap}

.menu {overflow: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('../images/interface/inner_shadow.png') repeat-x 0 100%, url('../images/interface/menu_background.jpg') no-repeat 50% 50% / cover, #000; color: #fff; text-align: center; visibility: hidden}
.menu.top {visibility: visible}
.menu-header {transform-origin: 50% 0}


.menu.transparent {background: transparent url('../images/interface/inner_shadow.png') repeat-x 0 100%}

.menu.loading {background: url('../images/interface/inner_shadow.png') repeat-x 0 100%, url('../images/interface/start_screen.jpg') no-repeat 50% 50% / cover, #000}
.menu.intro {background: #000 url('../images/interface/merixgames.png') no-repeat 50% 50%}

.menu.overlay:not(.transparent) {background: rgba(0, 0, 0, 0.5)}

.gui {position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none}
.gui.no-scale .scalable {transform: none !important}

.panel {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent none no-repeat 0 0}
.panel.scalable {position: absolute; top: 50%; left: 50%; width: 1920px; height: 1080px; margin: -540px 0 0 -960px}
.panel>.clip {position: relative; height: 100%}
.panel.small {padding: 320px 340px 170px; background-image: url('../images/interface/panel_small_background.png')}
.panel.medium {padding: 320px 340px 170px; background-image: url('../images/interface/panel_medium_background.png')}
.panel.large {padding: 200px 200px 109px; background-image: url('../images/interface/panel_large_background.png')}

.menu.overlay .panel {padding: 200px}

.panel-footer {width: 540px; margin: auto; text-align: left}

.menu>svg {position: absolute; top: 0; left: 0}

.focused:not(.menu) {color: #ffe24d}

.panel.focused:not(.active) {box-shadow: inset 0 0 0 2px #000}

.scrollable-content {position: relative; min-width: 100%}

.match .user-team:after,
.user-team.text-left:after {content: ''; display: inline-block; width: 28px; height: 20px; margin-left: 3px; background: transparent url('../images/users.png') no-repeat -136px -50px; vertical-align: -4px}

.match .user-team:after {position: absolute; bottom: -10px; right: 0; margin-left: 0; vertical-align: 0}

.user-team.text-right:before {content: ''; display: inline-block; width: 28px; height: 20px; margin-right: 3px; background: transparent url('../images/users.png') no-repeat -136px -50px; vertical-align: -4px}

i.bronze {color: #c68759 !important; font-style: normal}
i.silver {color: #cac7c2 !important; font-style: normal}
i.gold {color: #f0bf32 !important; font-style: normal}
i.platinum {color: #aeabe3 !important; font-style: normal}
i.green {color: #8aff7b !important; font-style: normal}
i.red {color: #ff7b7b !important; font-style: normal}
i.white {color: #fff !important; font-style: normal}
i.pink {color: #ffc6ff !important; font-style: normal}
i.yellow {color: #ffc514 !important; font-style: normal}


/*
 * Locked content information, appears on widget focus
 */
.lock-info {position: absolute; z-index: 2; top: 40px; left: 10%; right: 10%; opacity: 0; color: #999; font-size: 30px; line-height: 1.5; letter-spacing: 1px; transition: opacity 0.5s ease}
.lock-info i {color: #eee; font-style: normal}

.focused>*>.lock-info,
.focused>.lock-info {opacity: 1}

.small .lock-info {top: 30px; font-size: 22px}


/*
 * Alert
 */
.alert {position: relative; padding: 50px}
.alert>div {position: relative}
.alert:before {content: ''; position: absolute; top: 0; right: 0; bottom: 100px; left: 0; background: rgba(0, 0, 0, 0.75); transform-origin: 50% 100%; transform: perspective(800px) rotateX(-10deg)}


/*
 * Choice slider
 */
.choice-slider {height: 100%}
.choice-slider:before {content: ''; display: inline-block; height: 100%; vertical-align: middle}
.choice-slider:not(.no-wrap)>* {height: 100%}


/*
 * Headers
 */
.small-header .label,
.medium-header .label,
.large-header .label {overflow: hidden; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; padding-top: 170px; font-size: 60px; text-overflow: ellipsis; line-height: 120px; white-space: nowrap}

.small-header {position: absolute; top: 0; left: 0; right: 0; height: 320px; background: transparent url('../images/interface/header_small.png') no-repeat 0 0}
.small-header .label {width: 640px}

.medium-header {position: absolute; top: 0; left: 0; right: 0; height: 330px; background: transparent url('../images/interface/header_medium.png') no-repeat 0 0}
.large-header .label {width: 1300px}

.large-header {position: absolute; top: 0; left: 0; right: 0; height: 180px; background: transparent url('../images/interface/header_large.png') no-repeat 0 0}
.large-header .label {width: 1550px; padding-top: 40px}

.large-header.above {z-index: 2}

.friendly-match .team-select-big-container {margin-top: -40px; margin-bottom: -7px}
.friendly-match-settings {margin-left: -87px; margin-right: -87px; margin-top: 57px}


/*
 * SVG elements
 */
.pattern {position: absolute; top: -10px; left: -10px}

svg {display: block; margin: auto}
svg .normal {fill: #7fc2d9}
svg .progress,
.focused>svg .normal {fill: #fc0}
svg .light {fill: #87cee6}
.focused>svg .light {fill: #ffde5c}
svg .dark {fill: #2b4751}
svg .shadow {opacity: 0.25}
svg .flag-shadow {opacity: 0.125}
svg .background {fill: #578fa2}
svg .header-front {fill: #fe9428}
svg .header-back {fill: #d07a21}


/*
 * Buttons
 */
.button {position: relative; display: inline-block; width: 526px; height: 90px; max-width: 100%; color: #fff !important; font-size: 36px; line-height: 80px; text-align: center; vertical-align: top; backface-visibility: hidden}
.button .label {position: absolute; top: 0; left: 0; right: 0; bottom: 0}

.button.disabled {color: #666 !important; opacity: 0.5}

.button.small {width: 264px}

.button svg {display: block; width: 100%}
.button svg g.left {display: block}
.button svg g.right {display: none}

.even .button svg g.left {display: none}
.even .button svg g.right {display: block}

.button.right svg g.left {display: none}
.button.right svg g.right {display: block}

.button.medium {width: 300px}


.button.icon img {position: absolute; top: -85px; left: -40px}
.button.icon img~span {padding-left: 100px}


/*
 * Input binder
 */
.input-binder .grid>div {line-height: 128px}
.input-binder .button {vertical-align: middle}
.input-binder.focused {color: #fff}
.input-binder.focused svg .normal {fill: #fc0}


/*
 * Loader
 */
.panel.loading {padding-top: 900px}


/*
 * Team select
 */
.team-select-big {position: relative; display: inline-block; top: -15px; width: 644px; height: 451px; padding-top: 315px; color: #fff !important; font-size: 48px; line-height: 110px}
.team-select-big svg {position: absolute; top: 0; left: 0; z-index: 3; width: 100%; height: 100%}
.team-select-big img {position: absolute; top: 21px; left: 102px; z-index: 2}
.team-select-big img.thumbnail {top: 60px; z-index: 4}
.team-select-big figcaption {position: relative; z-index: 3; overflow: hidden; padding: 0 7%; text-overflow: ellipsis; white-space: nowrap}
.team-select-big.random img.thumbnail {filter: brightness(0)}

.team-select-big.right img {left: auto; right: 105px}

.team-select-big-container {height: 451px}
.team-select-big-container.left {direction: rtl}
.team-select-big-container.left>* {direction: ltr}


/*
 * Thumbnail button
 */
.thumbnail-button,
.thumbnail-button * {backface-visibility: hidden}
.thumbnail-button figure {position: relative; display: block; width: 100%; color: #fff !important; font-size: 48px; line-height: 110px; transform: scale(0.9, 0.9); transition: transform 0.25s ease}
.thumbnail-button figure:before {content: ''; position: relative; display: block; padding-bottom: 64%}
.thumbnail-button svg {position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%}
.thumbnail-button img {position: absolute; top: 9.54%; left: 0; z-index: 2; width: 100%; height: auto}
.thumbnail-button figcaption {overflow: hidden; position: absolute; top: 78.18%; left: 10%; right: 10%; z-index: 3; height: 60px; padding: 0 5px; font-size: 30px; text-align: center; line-height: 60px; white-space: nowrap}

.thumbnail-button.focused figure {transform: scale(1, 1)}
.thumbnail-button.focused svg .normal {fill: #fc0 !important}
.thumbnail-button.disabled {opacity: 0.5}
.thumbnail-button.locked.focused p.lock-info {opacity: 1}
.thumbnail-button.locked.focused image.thumbnail {opacity: 0.333}

.thumbnail-button.small figure:before {padding-bottom: 128%}
.thumbnail-button.small p.lock-info {top: 30px; font-size: 22px}


/*
 * Team
 */
.team .thumbnail {position: absolute; top: 9.54%; left: 0; z-index: 2; width: 100%; height: auto}
.team figure:before {padding-bottom: 70%}
.team figcaption {left: 10%; right: 10%; text-align: left}

/*
 * Checkbox
 */
.checkbox {position: relative; display: inline-block; width: 415px; height: 95px; font-size: 24px; line-height: 95px}
.checkbox svg {position: absolute; top: 0; left: 0}
.checkbox .label {position: relative}

.checkbox .label:after {content: ': off'}
.checkbox.selected .label:after {content: ': on'}


/*
 * Keys
 */
.key {position: relative; display: inline-block; max-width: 100%; height: 2em; margin: 0 0.5em; padding: 0 0.75em; border-radius: 0.25em; background: #fff; box-shadow: 0 0.125em 0 0.0625em rgba(0, 0, 0, 0.25); color: rgba(0, 0, 0, 0.5); font-family: 'Mikodacs', 'Arial', 'Helvetica', sans-serif !important; font-size: 1.6rem; text-shadow: none; line-height: 2em; text-align: center; transform: perspective(100px) rotateX(-10deg)}
.key:after {content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 0.25em; border: 0.125em solid rgba(255, 255, 255, 0.5); border-bottom: 0}
.key {
    background: linear-gradient(top, #d6cdbe 0%, #f7f2ea 100%);
    background: linear-gradient(to bottom, #d6cdbe 0%, #f7f2ea 100%);
}

.key.big {font-size: 3.2rem}


/*
 * Gamepad buttons
 */
.gamepad-button {overflow: hidden; position: relative; display: inline-block; width: 30px; height: 30px; border-radius: 15px; background: #4f4f4f; color: rgba(255, 255, 255, 0.5); text-shadow: none; line-height: 30px; text-align: center; white-space: nowrap; vertical-align: middle}
.gamepad-button:after {content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 15px; border: 0.2rem solid #000; box-shadow: inset 0 -0.2rem 0 #000}
.gamepad-button:before {display: inline-block; width: 100%; vertical-align: middle}
.gamepad-button.auto-wide {width: auto; padding: 0 10px}


.gamepad-button[data-map*="xbox-"] {width: 64px; height: 64px; background: transparent none no-repeat 0 0; background-size: contain; color: transparent}
.gamepad-button[data-map*="xbox-"]:after {display: none}
.gamepad-button.big[data-map*="xbox-"] {width: 128px; height: 128px}
.gamepad-button[data-map="xbox-stick-left-up"]    {background-image: url('../images/interface/gamepad/xbox_stick_left_up.png')}
.gamepad-button[data-map="xbox-stick-left-down"]  {background-image: url('../images/interface/gamepad/xbox_stick_left_down.png')}
.gamepad-button[data-map="xbox-stick-left-left"]  {background-image: url('../images/interface/gamepad/xbox_stick_left_left.png')}
.gamepad-button[data-map="xbox-stick-left-right"] {background-image: url('../images/interface/gamepad/xbox_stick_left_right.png')}
.gamepad-button[data-map="xbox-stick-left-button"] {background-image: url('../images/interface/gamepad/xbox_stick_left_button.png')}
.gamepad-button[data-map="xbox-stick-right-up"]    {background-image: url('../images/interface/gamepad/xbox_stick_right_up.png')}
.gamepad-button[data-map="xbox-stick-right-down"]  {background-image: url('../images/interface/gamepad/xbox_stick_right_down.png')}
.gamepad-button[data-map="xbox-stick-right-left"]  {background-image: url('../images/interface/gamepad/xbox_stick_right_left.png')}
.gamepad-button[data-map="xbox-stick-right-right"] {background-image: url('../images/interface/gamepad/xbox_stick_right_right.png')}
.gamepad-button[data-map="xbox-stick-right-button"] {background-image: url('../images/interface/gamepad/xbox_stick_right_button.png')}
.gamepad-button[data-map="xbox-a"] {background-image: url('../images/interface/gamepad/xbox_a.png')}
.gamepad-button[data-map="xbox-b"] {background-image: url('../images/interface/gamepad/xbox_b.png')}
.gamepad-button[data-map="xbox-x"] {background-image: url('../images/interface/gamepad/xbox_x.png')}
.gamepad-button[data-map="xbox-y"] {background-image: url('../images/interface/gamepad/xbox_y.png')}
.gamepad-button[data-map="xbox-lb"] {background-image: url('../images/interface/gamepad/xbox_lb.png')}
.gamepad-button[data-map="xbox-rb"] {background-image: url('../images/interface/gamepad/xbox_rb.png')}
.gamepad-button[data-map="xbox-lt"] {background-image: url('../images/interface/gamepad/xbox_lt.png')}
.gamepad-button[data-map="xbox-rt"] {background-image: url('../images/interface/gamepad/xbox_rt.png')}
.gamepad-button[data-map="xbox-dpad-up"]    {background-image: url('../images/interface/gamepad/xbox_d_pad_up.png')}
.gamepad-button[data-map="xbox-dpad-down"]  {background-image: url('../images/interface/gamepad/xbox_d_pad_down.png')}
.gamepad-button[data-map="xbox-dpad-left"]  {background-image: url('../images/interface/gamepad/xbox_d_pad_left.png')}
.gamepad-button[data-map="xbox-dpad-right"] {background-image: url('../images/interface/gamepad/xbox_d_pad_right.png')}
.gamepad-button[data-map="xbox-back"] {background-image: url('../images/interface/gamepad/xbox_back.png')}
.gamepad-button[data-map="xbox-start"]  {background-image: url('../images/interface/gamepad/xbox_start.png')}

.gamepad-button[data-map*="xbox-stick-left-"]:not([data-map="xbox-stick-left-button"])+
.gamepad-button[data-map*="xbox-stick-left-"]:not([data-map="xbox-stick-left-button"]) {margin-left: -64px}

.gamepad-button[data-map*="xbox-stick-right-"]:not([data-map="xbox-stick-right-button"])+
.gamepad-button[data-map*="xbox-stick-right-"]:not([data-map="xbox-stick-right-button"]) {margin-left: -64px}

.gamepad-button[data-map*="xbox-dpad-"]+
.gamepad-button[data-map*="xbox-dpad-"] {margin-left: -64px}


/*
 * Game menu
 */
.in-game {padding: 0; background: transparent url('../images/interface/inner_shadow.png') repeat-x 0 100%}
.in-game b {font-weight: 400}

.in-game:not(.show-user-keys) .menu-footer {display: none}
.in-game.hide-help-text .help-text {visibility: hidden}

.user-key-group {position: relative; margin: 0 2px; border-radius: 10px 10px 0 0; background: rgba(0, 0, 0, 0.125); line-height: 64px}
.user-key-group:after {content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 5px; box-shadow: 0 0 2px #000}
.user-key-group .connect {display: block; padding: 0 20px}
.user-key-group .press-to-play {display: block; padding: 0 20px}
.user-key-group .press-to-leave {display: none; padding: 0 20px}

.user-key-group.connected .connect {display: none}
.user-key-group:not(.connected) {opacity: 0.5}
.user-key-group:not(.connected):after {opacity: 0.5}
.user-key-group:not(.connected) .press-to-play,
.user-key-group.playing .press-to-play {display: none}
.user-key-group.playing .press-to-leave {display: block}

.user-key-group.fixed {position: fixed; top: 0; left: 0; display: none; background: transparent !important}
.user-key-group.fixed.playing {display: block}

.user-key-group[data-user="1"]:after {background: #eaec26}
.user-key-group[data-user="2"]:after {background: #44e6ff}
.user-key-group[data-user="3"]:after {background: #fe653e}
.user-key-group[data-user="4"]:after {background: #44ff00}
.user-key-group[data-user="5"]:after {background: #ffffff}


/*
 * Menu footer
 */
.menu-footer {position: absolute; bottom: 0; right: 0; padding: 1rem 3rem; line-height: 64px; transform-origin: 100% 100%}
.menu-footer.centered {right: auto; left: 50%; width: 1920px; margin-left: -960px; transform-origin: 50% 100%}


/*
 * Match (tournament graph)
 */
.match {position: relative; z-index: 1; width: 183px; height: 270px; margin: auto; padding: 130px 22px 0 13px}
.match svg {position: absolute; top: 0; left: 0; z-index: 2}
.match .team-short {position: relative; z-index: 3; font-size: 1.25em; line-height: 1.1; text-transform: uppercase}
.match .team-points {position: relative; z-index: 3; font-size: 1.25em; line-height: 1.1}
.match .team-flag {position: relative; padding-bottom: 50%; background: #1b282e}
.match .team-flag img {position: absolute; top: 0; left: 0; width: 100%}
.match .team-x.hidden {display: none}
.match .path-1 {top: 190px; left: -22px; z-index: 1}
.match .path-2 {top: 190px; left: -116px; z-index: 1}

.match.next svg:first-child g:first-child path:nth-child(3) {fill: #78b5cc !important}

.final-round {margin-bottom: -25px}
.final-match {position: absolute; bottom: 287px; left: 503px}
.third-place {position: absolute; bottom: 97px; left: 803px}

.podium-image {position: absolute; z-index: -1; width: 314px; background: #1b282e}
.podium-image:before {content: ''; display: block; width: 100%; padding-bottom: 50%}
.podium-image img {position: absolute; top: 0; left: 0; max-width: 100%}

.podium-image.first {left: 593px; bottom: 814px}
.podium-image.second {left: 160px; bottom: 784px; width: 248px}
.podium-image.third {left: 1104px; bottom: 752px; width: 255px}

.podium-team-thumbnail {position: absolute; z-index: 1; width: 400px}
.podium-team-thumbnail:before {content: ''; display: block; width: 100%; padding-bottom: 50%}
.podium-team-thumbnail img {position: absolute; top: 0; left: 0; max-width: 100%}

.podium-team-thumbnail.first {left: 554px; bottom: 790px}
.podium-team-thumbnail.second {left: 92px; bottom: 760px}
.podium-team-thumbnail.third {left: 1029px; bottom: 729px}

.podium-name {position: absolute; overflow: hidden; width: 380px; font-size: 28px; text-align: center; line-height: 46px; white-space: nowrap}
.podium-name.first {bottom: 744px; left: 560px}
.podium-name.second {bottom: 714px; left: 100px}
.podium-name.third {bottom: 684px; left: 1037px}


.tournament-header {position: relative; z-index: 2; width: 1461px; height: 81px; margin: 0 auto -20px}
.tournament-header svg {position: absolute; top: 0; left: 0; z-index: 1}
.tournament-header h2 {position: relative; z-index: 2; line-height: 70px}

.tournament .panel.large {padding-top: 160px}
.tournament .panel.large>.clip {height: calc(100% - 132px); border-bottom: 2px solid #2b4751; box-shadow: 0 2px 0 0 rgba(255, 255, 255, 0.25)}
.tournament .panel footer.buttons {margin: 0 -70px; padding: 20px 0}
.tournament h1 {z-index: 2}
.tournament .scrollable-content {z-index: 1; padding: 50px 0}
.tournament .group-stage {padding: 0 20px}
.tournament .group-stage .tournament-header {margin-bottom: 20px}

.tournament-group {position: relative; margin: -50px 0; padding: 50px 0}
.tournament-group table {width: 100%; box-shadow: 1px 1px 0 #1b282e, 10px 10px 0 rgba(0, 0, 0, 0.125)}
.tournament-group table+table {margin-top: 20px}
.tournament-group.next table {box-shadow: 0 0 0 5px #ccecf6, 1px 1px 0 #1b282e, 10px 10px 0 rgba(0, 0, 0, 0.125)}
.tournament-group table tr.qualifying td {background: #78b5cc}
.tournament-group table th {padding: 5px 5px; background: #2f4852; font-weight: 400}
.tournament-group table td {width: 10%; padding: 5px 5px; border-top: 1px solid #365863; background: #6a9fb3; box-shadow: inset 0 2px 0 -1px rgba(255, 255, 255, 0.125)}
.tournament-group table td.wide {width: 100%}
.tournament-group table td.team-points {background: #4e7c8d}
.tournament-group table tr.qualifying td.team-points {background: #588da0}
.tournament-group .team-flag {width: 1%}
.tournament-group .team-flag img {width: 30px; box-shadow: 0 0 0 1px #000; vertical-align: middle}
.tournament-group .team-short {text-transform: uppercase}
.tournament-group table.matches td {background: #2f4852}
.tournament-group .next td {background: #ccecf6 !important}


/*
 * Progress bar
 */
.progress-bar {position: relative; z-index: 1; padding: 0; text-indent: -999em; transform: perspective(800px) rotateX(-10deg)}
.progress-bar:before {content: ''; position: absolute; bottom: -5px; left: -5px; right: -5px; z-index: -1; height: 50px; background: rgba(0, 0, 0, 0.25)}
.progress-bar:after {content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; border: 3px solid rgba(255, 255, 255, 0.25); border-bottom: 0}
.progress-bar span {display: block; max-width: 100%; box-shadow: inset 0 25px 0 rgba(255, 255, 255, 0.25)}
.progress-bar>span {position: relative; z-index: 1; background: #39b8e5}
.progress-bar>span>span {background: #f46666}



/*
 * Team summary
 */
.score-big {position: relative}
.score-big p {font-size: 50px}
.score-big p.text-right {padding-right: 15px}
.score-big p.text-left {padding-left: 15px}

.team-summary-header {position: relative; z-index: 2; margin-top: -180px}
.team-summary-header .score-big {top: 44px}
.team-summary-header figure {position: relative; font-size: 40px}
.team-summary-header figure svg {position: relative; z-index: 2}
.team-summary-header figure img.ai {position: absolute; top: 0; z-index: 3}
.team-summary-header figure figcaption {overflow: hidden; position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; margin-top: -10px; padding: 10px 20px; white-space: nowrap}
.team-summary-header figure.red .base {fill: #f46666}
.team-summary-header figure.blue .base {fill: #39b8e5}

.team-summary-header .user-status {position: absolute; top: 230px; left: 50%; z-index: 1; padding-top: 0; transform: translateX(-50%)}
.team-summary-header .user-status:after {content: ''; position: absolute; top: -10px; right: -10px; bottom: -10px; left: -10px; z-index: -1; background: rgba(0, 0, 0, 0.25); transform: perspective(80px) rotateX(-10deg)}

.team-summary-header figure.red img.ai {left: -50px}
.team-summary-header figure.blue img.ai {right: -50px; transform: scaleX(-1)}

.team-summary-grid {padding: 70px 50px 50px}
.team-summary header {display: table; width: 100%}
.team-summary header>p {display: table-cell; height: 100px; vertical-align: middle; text-align: center}

.stat-widget {position: relative; z-index: 2; font-size: 22px; line-height: 50px}

.stat-widget-title {position: absolute; top: 0; left: 0; right: 0; z-index: 2; text-align: center}
.stat-widget-red {position: absolute; top: 0; left: 0; z-index: 2; padding: 0 10px}
.stat-widget-blue {position: absolute; top: 0; right: 0; z-index: 2; padding: 0 10px}



/*
 * Help screen ("How To Play")
 */
.help .panel.large {padding-top: 160px}
.help .panel.large>.clip {height: 100%}
.help .panel footer.buttons {padding: 20px 0; border-top: 2px solid #2b4751; background: #578fa2}
.help .scrollable-content {z-index: 1; padding: 50px 150px}
.help .scrollable-content h2 {font-size: 4.8rem; font-weight: 400; text-align: center}
.help .scrollable-content h3 {font-size: 4.2rem; font-weight: 400; text-align: center}
.help .scrollable-content *+h3 {margin-top: 3em}
.help .scrollable-content p {width: 50%; margin-left: auto; margin-right: auto; font-size: 2.2rem}
.help .scrollable-content figure {display: block; width: 500px; margin-left: auto; margin-right: auto}
.help .scrollable-content *+figure {margin-top: 2em}
.help .scrollable-content figcaption p {width: auto; font-size: 2.6rem}


/*
 * Global FPS meter
 */
#fps {position: absolute; bottom: 0; left: 0; overflow: hidden; display: none; width: 300px; height: 27px; padding: 0 6px; color: #fff; font-family: 'Consolas', monospace; text-shadow: 1px 1px 1px #000}
#fps * {text-shadow: 1px 1px 1px #000}



/*
 * User status icons in footer
 */
.user-status {padding-top: 3px}
.user-status>li {width: 34px; height: 25px; background: transparent url('../images/users.png') no-repeat 0 0}
.user-status>li.user-0 {background-position: 0 0}
.user-status>li.user-1 {background-position: -34px 0}
.user-status>li.user-2 {background-position: -68px 0}
.user-status>li.user-3 {background-position: -102px 0}
.user-status>li.user-4 {background-position: -136px 0}
.user-status>li.user-0.online {background-position: 0 -25px}
.user-status>li.user-1.online {background-position: -34px -25px}
.user-status>li.user-2.online {background-position: -68px -25px}
.user-status>li.user-3.online {background-position: -102px -25px}
.user-status>li.user-4.online {background-position: -136px -25px}


/*
 * Leaderboards
 */
#leaderboards.loading {position: relative; height: 600px}
#leaderboards.loading>* {visibility: hidden}
#leaderboards.loading:before {content: ''; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 14px; border-top: 4px solid #fff; border-right: 4px solid transparent; border-bottom: 4px solid #fff; border-left: 4px solid transparent; animation: rotation 0.5s linear 0 infinite}
#leaderboards .user td {background: #ccecf6 !important}
#leaderboards table.points td {padding-left: 10px; padding-right: 10px; white-space: nowrap}
#leaderboards table.points img.fame-icon {height: 20px; vertical-align: -3px}
#leaderboards table.points img.league {height: 24px; width: auto; margin-bottom: -3px; vertical-align: top}
#leaderboards table.points img.avatar {height: 24px; width: auto; margin-right: 6px; box-shadow: 0 1px 3px #000; vertical-align: top}
#leaderboards table.points i.name {overflow: hidden; display: inline-block; width: 230px; vertical-align: top; font-style: normal}

@keyframes rotation {
  from {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(360deg)
  }
}


/*
 * Fame widget
 */
.fame-widget {position: absolute; bottom: 0; left: 0; padding: 1rem 3rem 1rem 24rem; font-size: 30px; line-height: 64px; transform-origin: 0% 100%; white-space: nowrap}
.fame-widget img {display: inline-block; margin-top: -7px; vertical-align: middle}
.fame-widget i.league {margin-left: 15px; font-style: normal}
.fame-widget i.league:before {content: ''; display: inline-block; width: 40px; height: 40px; margin-right: 10px; background: transparent none no-repeat 50% 50%; vertical-align: -10px}
.fame-widget i.league.platinum:before {background-image: url('../images/interface/challenge_platinum.png')}
.fame-widget i.league.gold:before {background-image: url('../images/interface/challenge_gold.png')}
.fame-widget i.league.silver:before {background-image: url('../images/interface/challenge_silver.png')}
.fame-widget i.league.bronze:before {background-image: url('../images/interface/challenge_bronze.png')}

.fame-widget .logo {position: absolute; bottom: 2rem; left: 3rem}

/*
 * Fame summary
 */
.fame-summary {position: relative; z-index: 1; padding: 20px; font-size: 26px; text-align: right; direction: rtl}
.fame-summary:before {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background: rgba(0, 0, 0, 0.25); transform: perspective(800px) rotateX(-10deg)}
.fame-summary table {direction: ltr}
.fame-summary table tr :nth-child(2) {padding: 0 20px}
.fame-summary th {font-size: 30px}
.fame-summary img {vertical-align: -8px}



/*
 * League info
 */
.league-info {position: relative; z-index: 2; padding: 30px 30px 30px 70px; text-align: left}
.league-info:before {content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: rgba(0, 0, 0, 0.5); transform: perspective(800px) rotateX(-5deg)}
.league-info.user-league:before {border: 10px solid #ccecf6}
.league-info figure {float: left; margin-left: -50px; margin-top: -7px}
.league-info h2 {margin: 0; line-height: 1}
.league-info table {width: 100%; text-align: right}
.league-info table th {width: 100%; padding-right: 20px}
.league-info table td {padding-left: 5px}
.league-info table img {height: 20px !important; width: auto; vertical-align: -3px}


/*
 * Media
 */
.media {position: relative; display: block; width: 1024px; margin: auto}
.media:before {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 3; border: 10px solid rgba(255, 255, 255, 0.2); transform-origin: 50% 0; transform: perspective(1000px) rotateX(-2deg)}
.media:after {content: ''; position: absolute; top: 5px; left: -5px; right: -5px; bottom: -10px; z-index: 1; background: rgba(0, 0, 0, 0.2); transform-origin: 50% 0; transform: perspective(1000px) rotateX(-2deg)}
.media img,
.media video {display: block; position: relative; z-index: 2; width: 100%; height: 100%; background: #000; transform-origin: 50% 0; transform: perspective(1000px) rotateX(-2deg)}
.media.focused:before {border: 10px solid #f0bf32}


.game-slider {margin-bottom: 50px}
.game-slider .grid>* {width: 1124px}
.game-slider .grid>:first-child {padding-left: 248px; padding-right: 50px; width: 1322px}
.game-slider .grid>:last-child {padding-right: 248px; padding-left: 50px; width: 1322px}