html {
  -webkit-tap-highlight-color: rgba(255,255,255,0);
  -webkit-touch-callout: none;
  font-size: 10px;
  line-height: 1.5
}

html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
  font-weight: inherit;
  touch-action: manipulation
}

body {
  display: block
}

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

ul, ol {
  list-style: none
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block
}

img, video, svg {
  max-width: 100%;
  display: block
}

body {
  -webkit-text-size-adjust: 100%
}

a {
  color: inherit;
  text-decoration: inherit;
  touch-action: pan-y
}

  button *, a * {
    pointer-events: none
  }

button, input, textarea, select {
  margin: 0;
  padding: 0;
  color: inherit;
  background: inherit;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  outline: none
}

button {
  cursor: pointer;
  appearance: none;
  border: none;
  touch-action: pan-y
}

textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical
}

@font-face {
  font-family: VCFtr;
  font-style: normal;
  font-weight: 400;
  src: url(./ftr-3c2ca429.woff2) format("woff2"),url(./ftr-3b9fd183.woff) format("woff");
  font-display: "block"
}

@font-face {
  font-family: VCYg;
  font-style: normal;
  font-weight: 400;
  src: url(./yg-d87767ce.woff2) format("woff2"),url(./yg-8a40f0fa.woff) format("woff");
  font-display: "block"
}

html {
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 100;
  color: #a9a9a9;
  background: #1e2b36
}

::selection {
  color: color(white);
  background: rgba(0,0,0,.7)
}

@keyframes spinner {
  0% {
    transform: rotate(0)
  }

  to {
    transform: rotate(360deg)
  }
}

.webgl-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  overflow: hidden;
  overflow: clip;
  user-select: none;
  contain: strict
}

.webgl-canvas {
  outline: none;
  transform: scale3d(1.3,1.2,1.3);
  will-change: transform;
  transition: transform .95s cubic-bezier(.435,.01,0,1)
}

.preloader-instant .webgl-canvas {
  transition: none
}

.preloader-hidden .webgl-canvas {
  transform: scaleZ(1)
}

.debug-gui {
  z-index: 1000;
  position: fixed;
  top: 8px;
  right: 8px;
  width: calc(100% - 16px);
  max-width: 300px;
  height: calc(var(--inner-height) - 16px);
  pointer-events: none;
  user-select: none
}

.debug-gui-scr {
  max-height: 100%;
  overflow: -moz-scrollbars-none;
  overflow-x: hidden;
  overflow-y: scroll;
  font-size: .3em;
  pointer-events: all;
  will-change: content;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  user-select: none;
  pointer-events: none;
  opacity: 0;
  visibility: hidden
}

  .debug-gui-scr.active {
    pointer-events: all;
    opacity: 1;
    visibility: visible
  }

  .debug-gui-scr::-webkit-scrollbar {
    width: 0;
    background: transparent
  }

  .debug-gui-scr:after {
    display: block;
    width: 100%;
    pointer-events: none;
    content: ""
  }

.debug-gui-container {
  pointer-events: all
}

.tp-rotv {
  --tp-base-border-radius: 4px;
  --tp-blade-spacing: 4px;
  --tp-blade-unit-size: 16px;
  --tp-base-background-color: #111;
  --tp-base-shadow-color: transparent;
  --tp-container-horizontal-padding: 2px;
  --tp-container-vertical-padding: 3px;
  font-size: 10px !important
}

.tp-fldv_c {
  border-left-width: 0 !important
}

.tp-rotv:not(input) {
  user-select: none
}

.tp-ckbv_w {
  border: 1px solid rgba(255,255,255,.3)
}

.tp-tabv_c {
  border-left: 0 !important
}

  .tp-fldv_c > .tp-cntv, .tp-tabv_c .tp-brkv > .tp-cntv {
    margin-left: 0 !important
  }

.debug-gui-container input[readonly] {
  pointer-events: none;
  user-select: none
}

:root {
  font-size: calc(20px * var(--size-mult))
}

#app {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  user-select: none
}

  #app * {
    user-select: none
  }

.current-view {
  position: absolute;
  bottom: 7%;
  left: 50%;
  transform: translate(-50%);
  font-size: 1.3rem;
  font-weight: 400;
  color: #fff
}

.view {
  position: absolute;
  z-index: 1;
  width: calc(1000px * var(--size-mult));
  height: calc(1000px * var(--size-mult));
  top: var(--top-offset);
  left: var(--left-offset)
}

  .view:not(.visible):not(.hidden) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 1
  }

  .view.visible {
    pointer-events: all;
    z-index: 2
  }

  .view.hidden {
    pointer-events: none;
    z-index: 0
  }

.view-home button {
  font-size: calc(50px * var(--size-mult));
  overflow: hidden
}

.view-home .btn-start {
  position: absolute;
  top: calc(765px * var(--size-mult));
  left: calc(147px * var(--size-mult));
  width: calc(550px * var(--size-mult));
  height: calc(135px * var(--size-mult))
}

.view-home .btn-leaderboard {
  position: absolute;
  top: calc(765px * var(--size-mult));
  left: calc(720px * var(--size-mult));
  width: calc(135px * var(--size-mult));
  height: calc(135px * var(--size-mult))
}

.view-home.hidden {
  opacity: 0;
  visibility: hidden
}

.view-auth .qrcode {
  position: absolute;
  width: calc(500px * var(--size-mult));
  height: calc(500px * var(--size-mult));
  top: calc(192px * var(--size-mult));
  overflow: hidden;
  left: calc(250px * var(--size-mult));
  animation: fadein .1s;
  animation-delay: .3s;
  animation-fill-mode: both
}

  .view-auth .qrcode img {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    user-select: all;
    -webkit-touch-callout: initial;
    pointer-events: all;
    outline: calc(10px * var(--size-mult)) solid white
  }

  .view-auth .qrcode:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: calc(-40px * var(--size-mult));
    margin-left: calc(-40px * var(--size-mult));
    width: calc(80px * var(--size-mult));
    height: calc(80px * var(--size-mult));
    z-index: 2;
    border: calc(10px * var(--size-mult)) solid rgba(0,0,0,.5);
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-right-color: #000;
    border-radius: 600px;
    animation: spinner .3s linear infinite;
    background: white;
    outline: calc(40px * var(--size-mult)) solid white
  }

  .view-auth .qrcode.loaded img {
    animation: blinkIn .9s ease-in-out;
    opacity: 1
  }

.view-auth.hidden {
  opacity: 0;
  visibility: hidden
}

  .view-auth.hidden .qrcode {
    animation: none
  }

    .view-auth.hidden .qrcode:after {
      animation-play-state: paused
    }

@keyframes fadein {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes blinkIn {
  0% {
    opacity: 1;
    transform: scale(.6) skew(800deg)
  }

  2% {
    opacity: 1;
    transform: scale(1.2) skew(60deg)
  }

  4% {
    opacity: 0;
    transform: skew(0)
  }

  10% {
    opacity: 1
  }

  13% {
    opacity: .4;
    transform: skew(40deg)
  }

  15% {
    opacity: .4;
    transform: skew(0)
  }

  17% {
    opacity: 1;
    transform: skew(0)
  }

  20% {
    opacity: .5;
    transform: scale(1) skew(4deg)
  }

  21% {
    opacity: .5;
    transform: skew(0)
  }

  25% {
    opacity: 1;
    transform: skew(0)
  }

  29% {
    opacity: 1;
    transform: skew(0)
  }

  30% {
    opacity: .8;
    transform: skew(0)
  }

  32% {
    opacity: 1;
    transform: skew(0)
  }

  85% {
    opacity: 1;
    transform: skew(0)
  }
}

.view-game .score {
  position: absolute;
  top: calc(25px * var(--size-mult));
  left: calc(25px * var(--size-mult));
  font-size: calc(30px * var(--size-mult))
}

.view-game .countdown {
  position: absolute;
  top: calc(350px * var(--size-mult));
  height: calc(138px * var(--size-mult));
  width: 100%;
  text-align: center;
  font-size: calc(120px * var(--size-mult))
}

  .view-game .countdown span.hidden {
    opacity: 0;
    visibility: hidden
  }

.view-game .pad {
  position: absolute;
  top: calc(727px * var(--size-mult));
  left: calc(210px * var(--size-mult));
  width: calc(580px * var(--size-mult));
  height: calc(250px * var(--size-mult))
}

.view-game .btn-pad {
  font-size: calc(50px * var(--size-mult));
  overflow: hidden;
  position: absolute;
  --width: 32%;
  --height: 48%;
  width: var(--width);
  height: var(--height)
}

.view-game .btn-up, .view-game .btn-down {
  left: calc(50% - var(--width) * .5)
}

.view-game .btn-left, .view-game .btn-right {
  top: calc(50% - var(--height) * .5)
}

.view-game .btn-up {
  top: 0
}

.view-game .btn-down {
  bottom: 0
}

.view-game .btn-left {
  left: 0
}

.view-game .btn-right {
  right: 0
}

.view-game.vertical .btn-up, .view-game.vertical .btn-down, .view-game.horizontal .btn-left, .view-game.horizontal .btn-right {
  pointer-events: none
}

.view-game.hidden {
  opacity: 0;
  visibility: hidden
}

.view-gameOver button {
  font-size: calc(50px * var(--size-mult));
  overflow: hidden
}

.view-gameOver .score {
  position: absolute;
  top: calc(210px * var(--size-mult));
  height: calc(138px * var(--size-mult));
  width: 100%;
  text-align: center;
  font-size: calc(80px * var(--size-mult))
}

.view-gameOver .score-value {
  font-size: calc(126px * var(--size-mult))
}

.view-gameOver .btn-leaderboard, .view-gameOver .btn-replay, .view-gameOver .btn-register {
  position: absolute;
  width: calc(555px * var(--size-mult));
  height: calc(130px * var(--size-mult));
  margin: 0 auto;
  left: 0;
  right: 0
}

.view-gameOver .btn-replay {
  top: calc(517px * var(--size-mult))
}

.view-gameOver .btn-leaderboard {
  top: calc(652px * var(--size-mult))
}

.view-gameOver .btn-register {
  top: calc(787px * var(--size-mult))
}

.view-gameOver.connected .btn-register {
  display: none;
  pointer-events: none
}

.view-gameOver.connected .btn-replay {
  top: calc(652px * var(--size-mult))
}

.view-gameOver.connected .btn-leaderboard {
  top: calc(787px * var(--size-mult))
}

.view-gameOver .btn-home {
  position: absolute;
  top: calc(24px * var(--size-mult));
  right: calc(55px * var(--size-mult));
  width: calc(180px * var(--size-mult));
  height: calc(110px * var(--size-mult));
  margin: 0 auto
}

.view-gameOver .btn-share {
  position: absolute;
  top: calc(190px * var(--size-mult));
  width: calc(555px * var(--size-mult));
  height: calc(225px * var(--size-mult));
  margin: 0 auto;
  left: 0;
  right: 0
}

.view-gameOver.connected .btn-share {
  height: calc(394px * var(--size-mult))
}

.view-gameOver.loading .btn-share {
  display: none
}

.view-gameOver .text {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: calc(600px * var(--size-mult));
  top: calc(375px * var(--size-mult));
  font-size: calc(42px * var(--size-mult))
}

.view-gameOver.hidden {
  opacity: 0;
  visibility: hidden
}

.view-leaderboard button {
  font-size: calc(50px * var(--size-mult));
  overflow: hidden
}

.view-leaderboard .btn-closeLeaderboard {
  position: absolute;
  top: calc(15px * var(--size-mult));
  left: calc(810px * var(--size-mult));
  width: calc(142px * var(--size-mult));
  height: calc(120px * var(--size-mult))
}

.view-leaderboard.hidden {
  opacity: 0;
  visibility: hidden
}

.preloader {
  position: fixed;
  pointer-events: all;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  overflow: clip;
  z-index: 10000
}

  .preloader .spinner {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    margin-left: calc(-45px * var(--size-mult));
    margin-top: calc(-45px * var(--size-mult));
    width: calc(90px * var(--size-mult));
    height: calc(90px * var(--size-mult));
    border: calc(7px * var(--size-mult)) solid rgba(255,255,255,.8);
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-right-color: #fff;
    border-radius: 600px;
    animation: spinner .3s linear infinite;
    opacity: 1;
    transition: opacity .2s ease-in-out
  }

  .preloader .panel {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    height: calc(50% + 1px);
    background: black;
    will-change: transform;
    transform: scaleZ(1);
    transition: transform 1.1s cubic-bezier(.64,.02,.04,1)
  }

  .preloader .overlay {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #FFF;
    opacity: 1;
    transition: opacity .8s cubic-bezier(.64,.02,.04,1) .1s;
    will-change: opacty
  }

  .preloader .panel-top {
    top: 0;
    transform-origin: top center
  }

  .preloader .panel-bottom {
    bottom: 0;
    transform-origin: bottom center
  }

  .preloader.hidden {
    pointer-events: none
  }

    .preloader.hidden .spinner {
      opacity: 0
    }

    .preloader.hidden .panel {
      transform: scale3d(1,0,1)
    }

    .preloader.hidden .overlay {
      opacity: 0
    }