/* noto-sans-jp-100 - latin_japanese */

@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: local('Noto Sans Japanese Thin'), local('NotoSansJapanese-Thin'), url('../fonts/noto-sans-jp-v25-latin_japanese-100.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/noto-sans-jp-v25-latin_japanese-100.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* noto-sans-jp-300 - latin_japanese */

@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Noto Sans Japanese Light'), local('NotoSansJapanese-Light'), url('../fonts/noto-sans-jp-v25-latin_japanese-300.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/noto-sans-jp-v25-latin_japanese-300.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* noto-sans-jp-regular - latin_japanese */

@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Noto Sans Japanese Regular'), local('NotoSansJapanese-Regular'), url('../fonts/noto-sans-jp-v25-latin_japanese-regular.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/noto-sans-jp-v25-latin_japanese-regular.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* noto-sans-jp-500 - latin_japanese */

@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Noto Sans Japanese Medium'), local('NotoSansJapanese-Medium'), url('../fonts/noto-sans-jp-v25-latin_japanese-500.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/noto-sans-jp-v25-latin_japanese-500.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* noto-sans-jp-700 - latin_japanese */

@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Noto Sans Japanese Bold'), local('NotoSansJapanese-Bold'), url('../fonts/noto-sans-jp-v25-latin_japanese-700.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/noto-sans-jp-v25-latin_japanese-700.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* noto-sans-jp-900 - latin_japanese */

@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: local('Noto Sans Japanese Black'), local('NotoSansJapanese-Black'), url('../fonts/noto-sans-jp-v25-latin_japanese-900.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/noto-sans-jp-v25-latin_japanese-900.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* noto-sans-sc-100 - chinese-simplified_latin */

@font-face {
  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: local('Noto Sans SC Thin'), local('NotoSansSC-Thin'), url('../fonts/noto-sans-sc-v11-chinese-simplified_latin-100.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/noto-sans-sc-v11-chinese-simplified_latin-100.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* noto-sans-sc-300 - chinese-simplified_latin */

@font-face {
  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Noto Sans SC Light'), local('NotoSansSC-Light'), url('../fonts/noto-sans-sc-v11-chinese-simplified_latin-300.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/noto-sans-sc-v11-chinese-simplified_latin-300.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* noto-sans-sc-regular - chinese-simplified_latin */

@font-face {
  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Noto Sans SC Regular'), local('NotoSansSC-Regular'), url('../fonts/noto-sans-sc-v11-chinese-simplified_latin-regular.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/noto-sans-sc-v11-chinese-simplified_latin-regular.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* noto-sans-sc-500 - chinese-simplified_latin */

@font-face {
  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Noto Sans SC Medium'), local('NotoSansSC-Medium'), url('../fonts/noto-sans-sc-v11-chinese-simplified_latin-500.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/noto-sans-sc-v11-chinese-simplified_latin-500.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* noto-sans-sc-700 - chinese-simplified_latin */

@font-face {
  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Noto Sans SC Bold'), local('NotoSansSC-Bold'), url('../fonts/noto-sans-sc-v11-chinese-simplified_latin-700.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/noto-sans-sc-v11-chinese-simplified_latin-700.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* noto-sans-sc-900 - chinese-simplified_latin */

@font-face {
  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: local('Noto Sans SC Black'), local('NotoSansSC-Black'), url('../fonts/noto-sans-sc-v11-chinese-simplified_latin-900.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/noto-sans-sc-v11-chinese-simplified_latin-900.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-100 - latin-ext_latin_cyrillic-ext_cyrillic */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: local('Roboto Thin'), local('Roboto-Thin'), url('../fonts/roboto-v20-latin-ext_latin_cyrillic-ext_cyrillic-100.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/roboto-v20-latin-ext_latin_cyrillic-ext_cyrillic-100.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-300 - latin-ext_latin_cyrillic-ext_cyrillic */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url('../fonts/roboto-v20-latin-ext_latin_cyrillic-ext_cyrillic-300.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/roboto-v20-latin-ext_latin_cyrillic-ext_cyrillic-300.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-regular - latin-ext_latin_cyrillic-ext_cyrillic */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url('../fonts/roboto-v20-latin-ext_latin_cyrillic-ext_cyrillic-regular.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/roboto-v20-latin-ext_latin_cyrillic-ext_cyrillic-regular.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-500 - latin-ext_latin_cyrillic-ext_cyrillic */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url('../fonts/roboto-v20-latin-ext_latin_cyrillic-ext_cyrillic-500.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/roboto-v20-latin-ext_latin_cyrillic-ext_cyrillic-500.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-700 - latin-ext_latin_cyrillic-ext_cyrillic */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url('../fonts/roboto-v20-latin-ext_latin_cyrillic-ext_cyrillic-700.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/roboto-v20-latin-ext_latin_cyrillic-ext_cyrillic-700.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-900 - latin-ext_latin_cyrillic-ext_cyrillic */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: local('Roboto Black'), local('Roboto-Black'), url('../fonts/roboto-v20-latin-ext_latin_cyrillic-ext_cyrillic-900.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/roboto-v20-latin-ext_latin_cyrillic-ext_cyrillic-900.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* noto-sans-kr-100 - korean_latin */

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 100;
  src: local('Noto Sans KR Thin'), local('NotoSansKR-Thin'), url('../fonts/noto-sans-kr-v12-korean_latin-100.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/noto-sans-kr-v12-korean_latin-100.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* noto-sans-kr-300 - korean_latin */

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 300;
  src: local('Noto Sans KR Light'), local('NotoSansKR-Light'), url('../fonts/noto-sans-kr-v12-korean_latin-300.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/noto-sans-kr-v12-korean_latin-300.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* noto-sans-kr-regular - korean_latin */

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 400;
  src: local('Noto Sans KR Regular'), local('NotoSansKR-Regular'), url('../fonts/noto-sans-kr-v12-korean_latin-regular.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/noto-sans-kr-v12-korean_latin-regular.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* noto-sans-kr-500 - korean_latin */

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 500;
  src: local('Noto Sans KR Medium'), local('NotoSansKR-Medium'), url('../fonts/noto-sans-kr-v12-korean_latin-500.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/noto-sans-kr-v12-korean_latin-500.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* noto-sans-kr-700 - korean_latin */

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 700;
  src: local('Noto Sans KR Bold'), local('NotoSansKR-Bold'), url('../fonts/noto-sans-kr-v12-korean_latin-700.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/noto-sans-kr-v12-korean_latin-700.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* noto-sans-kr-900 - korean_latin */

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 900;
  src: local('Noto Sans KR Black'), local('NotoSansKR-Black'), url('../fonts/noto-sans-kr-v12-korean_latin-900.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/noto-sans-kr-v12-korean_latin-900.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/material-icons.woff2') format('woff2');
}

:root {
  --current-background: url("../img/bg/main-menu.png");
  --logo-image: url("");
  --grid-image: url("../img/tetrion/grid-bg-cross.svg");
  --tetrion-color: #fff;
  /* --current-background: url("https://wallpaperaccess.com/full/28488.jpg"); */
  --main-font: "Roboto", sans-serif;
  --cell-size: 2em;
  --peek-zone: .25;
  --matrix-width: 10;
  --matrix-height-base: 20;
  --combo-flash-speed: 0.5s;
}

@media only screen and (max-width: 800px) {
  :root {
    /* font-size: .7em; */
  }
}

@keyframes glow-gold {
  0% {
    text-shadow: none;
  }

  25% {
    text-shadow: gold 0px 0px 4px;
  }

  75% {
    text-shadow: gold 0px 0px 4px;
  }

  100% {
    text-shadow: none;
  }
}

@keyframes matrix-warning {
  from {
    background-color: #f003
  }

  to {
    background-color: #f009
  }
}

@keyframes space-out {
  from {
    filter: brightness(1);
    letter-spacing: .2em;
  }

  to {
    filter: brightness(0);
    letter-spacing: 1em;
  }
}

@keyframes pulse-darkness2 {
  0% {
    filter: brightness(0.1);
    transform: scale(0.95)
  }

  40% {
    filter: brightness(0.75);
    transform: scale(1);
  }

  50% {
    filter: brightness(1);
    transform: scale(1);
  }

  60% {
    filter: brightness(0.75);
    transform: scale(1);
  }

  100% {
    filter: brightness(0.1);
    transform: scale(0.95)
  }
}

@keyframes pulse-darkness {
  from {
    filter: brightness(1)
  }

  to {
    filter: brightness(0)
  }
}

@keyframes pulse-darkness-light {
  from {
    filter: brightness(1)
  }

  to {
    filter: brightness(.5)
  }
}

@keyframes pulse {
  from {
    filter: brightness(1.1)
  }

  to {
    filter: brightness(0.9)
  }
}

@keyframes pulse-semi-strong {
  from {
    filter: brightness(1.45)
  }

  to {
    filter: brightness(0.55)
  }
}

@keyframes pulse-strong {
  from {
    filter: brightness(1.8)
  }

  to {
    filter: brightness(0.2)
  }
}

@keyframes pulse-opacity {
  from {
    opacity: 1
  }

  to {
    opacity: 0.25
  }
}

@keyframes bob {
  from {
    padding-left: .15em
  }

  to {
    padding-left: .35em
  }
}

@keyframes flash {
  from {
    background-color: #666
  }

  to {
    background-color: #aaa
  }
}

/*
.pulse {
  animation-name: pulse;
  animation-duration: .5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}
.pulse.spin-pulse {
  animation-name: pulse-strong;
  animation-duration: .1s;
  */

body {
  --flash-speed: 1s;
  user-select: none;
  margin: 0;
  padding: 0;
  font-family: var(--main-font);
  /* background-color: #034efc; */
  background-color: #000;
  /* background-blend-mode: luminosity; */
  /* background-image: var(--current-background); */
  background-size: cover;
  /* background-position: center; */
  /* animation-name: flash; */
  animation-duration: .1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

#myVideo {
  position: fixed;
  vertical-align: middle;
  height: 100%;
  margin: 0;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition-duration: 1s;
}

#main {
  position: fixed;
  margin: 0;
  padding: 0;
  /* top: 0.75em; */
  top: 0;
  left: 0;
  /* background-image: var(--current-background); */
  background-size: cover;
  width: 100%;
  height: 100%;
}

#description-text {
  font-size: 1.5rem;
}

#menu-container {
  font-size: 2rem;
  margin-left: 1rem;
  color: #fff;
}

#menu-container.hidden,
#game-container.hidden {
  display: none;
}

#hold-container.hidden,
#main-next-container.hidden {
  opacity: 0;
}

#game-container.faded {
  opacity: 0.1;
}

#vertical-menu {
  margin-left: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition-property: transform, opacity;
  transition-duration: 5s;
  transition-timing-function: cubic-bezier(.61, 0, .9, .5);
}

#vertical-menu.hidden {
  transform: translateX(-8em);
  opacity: 0;
}

#vertical-menu li {
  list-style-type: none;
  list-style-position: inside;
  margin-top: .25em;
  margin-bottom: .25em;
  border-left-color: #fff;
  border-left-style: solid;
  border-left-width: 0em;
  margin-left: 0;
  transition: font-size .1s, border-left-width .1s;
  cursor: pointer;
}

#description {
  width: 40vh;
  height: 20vh;
  font-size: 2.5vh;
  margin: auto;
}

#menu {
  width: 40vh;
  height: 80vh;
  font-size: 3.5vh;
  padding-right: 5em;
  margin: auto;
  text-align: center;
  padding: .3em 0;
  overflow-y: scroll;
  transition-property: opacity, transform;
  transition-duration: .25s;
  transition-timing-function: ease-in-out;
}

@keyframes slide-in {
  from {
    transform: translateX(-1em)
  }

  to {
    transform: translateX(0)
  }
}

#menu>* {
  transition-property: opacity;
  transition-duration: .25s;
}

#menu.hidden.slow {
  transition-duration: .75s;
}

#menu.hidden {
  transition-duration: .25s;
  transition-delay: .25s;
  opacity: 0;
}

#menu.hidden>*:not(.selected) {
  opacity: 0;
}

.modal {
  font-size: 2em;
  color: #fff;
  position: absolute;
  left: 50%;
  top: 35%;
  transform: translate(-50%, -50%);
  background-color: #000a;
  padding: 1em 2em;
  border-radius: .2em;
  border-color: #fff;
  border-left-style: solid;
  border-left-width: .1em;
  -webkit-backdrop-filter: blur(1em);
  backdrop-filter: blur(1em);
  z-index: 10;
}

.modal .header {
  font-weight: 100;
  text-align: center;
}

.modal .body {
  font-size: .7em;
}

.modal.hidden {
  display: none;
}

#menu>.control,
#menu>.slider-container,
#menu>.toggle-container,
#menu>.select-container {
  padding: .2em .5em;
}

#menu>.toggle-container {
  position: relative;
  cursor: pointer;
  text-align: left;
}

#menu>.toggle-container .value-name {
  position: absolute;
  margin-top: .6em;
  padding-left: .6em;
  display: inline-block;
  text-transform: uppercase;
  font-size: .7em;
  font-weight: 500;
  letter-spacing: .3em;
}

#menu>.toggle-container .bubble {
  margin-top: .3em;
  border-color: #fff;
  border-width: .04em;
  border-style: solid;
  height: 1em;
  width: 1em;
  display: inline-block;
  border-radius: 100em;
}

#menu>.toggle-container .bubble.enabled {
  background-color: #fff;
}

#menu>.toggle-container.selected .bubble {
  border-color: #000;
}

#menu>.toggle-container.selected .bubble.enabled {
  background-color: #000;
}

#menu>.select-container .arrow {
  vertical-align: top;
  display: inline-block;
  width: 1em;
  cursor: pointer;
}

#menu>.select-container .value {
  cursor: pointer;
  display: inline-block;
  font-size: .7em;
  width: 11em;
}

.setting-text {
  text-align: left;
  text-transform: uppercase;
  font-size: .7em;
  letter-spacing: .1em;
}

.slidecontainer {
  width: 100%;
}

#menu>.slider-container .value {
  display: inline-block;
  font-size: .8em;
  text-align: right;
  width: 2em;
  border-radius: .2em;
  border-color: #fff;
  border-width: .04em;
  border-style: solid;
  padding: .1em .4em .1em .4em;
  margin: .2em 0 .2em .8em;
  cursor: pointer;
}

#menu>.slider-container.selected .value {
  border-color: #000;
}

#menu>.slider-container .slider {
  -webkit-appearance: none;
  appearance: none;
  width: 70%;
  height: 1em;
  background: #0000;
  /* Grey background */
  outline-color: #fff;
  outline-width: .1em;
  outline-style: solid;
  -webkit-transition: .2s;
  /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

#menu>.slider-container.selected .slider {
  outline-color: #000;
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */

#menu>.slider-container .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  /* Override default look */
  appearance: none;
  width: 2em;
  /* Set a specific slider handle width */
  height: 1em;
  /* Slider handle height */
  background: #fff;
  /* Green background */
  cursor: pointer;
  /* Cursor on hover */
}

#menu>.slider-container.selected .slider::-webkit-slider-thumb {
  background: #000;
  /* Green background */
}

#menu>.slider-container .slider::-moz-range-thumb {
  width: 2em;
  /* Set a specific slider handle width */
  height: 1em;
  /* Slider handle height */
  background: #fff;
  /* Green background */
  cursor: pointer;
  /* Cursor on hover */
}

#menu>.slider-container.selected .slider::-moz-range-thumb {
  background: #000;
  /* Green background */
}

#menu>.control.selected {
  background-color: transparent;
  color: #fff;
  border-left-width: .1em;
  border-left-style: solid;
  border-left-color: #fff;
}

#menu>.control>.label {
  text-align: left;
  text-transform: uppercase;
  font-size: .7em;
  letter-spacing: .3em;
}

#menu>.control>.control-bay {
  text-align: left;
}

#menu>.control>.control-bay>.set-control {
  cursor: pointer;
  font-size: .7em;
  display: inline-block;
  padding: .1em .5em;
  margin-right: .2em;
  border-color: #fff;
  border-width: .05em;
  border-radius: 100em;
  border-style: solid;
}

#menu>.control.selected>.control-bay>.set-control.selected {
  background-color: #fff;
  color: #000;
}

#menu>.control>.control-bay>.set-control.conflict {
  color: #eb4034;
  border-color: #eb4034;
  animation-name: pulse;
  animation-duration: .2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

#menu>.control.selected>.control-bay>.set-control.selected.conflict {
  background-color: #eb4034;
}

#menu>.btn,
#menu>.social {
  position: relative;
  text-transform: uppercase;
  font-size: .8em;
  font-weight: 300;
  display: inline-block;
  padding: .4em 0em;
  box-sizing: border-box;
  cursor: pointer;
  margin-bottom: .4em;
  margin-left: .15em;
  margin-right: .15em;
}

#menu>.btn {
  border-color: #fff;
  border-width: 1px;
  border-style: solid;
  border-radius: 5px;
}

#menu>.btn.short {
  padding: 0;
  border-color: transparent;
  margin: 0;
}

#menu>.disabled {
  opacity: .5;
  cursor: not-allowed;
}

#menu>.social {
  filter: invert(1);
  height: 2.5em;
}

#menu>.social img {
  height: 100%;
}

#menu .overline {
  text-transform: uppercase;
  font-size: .67em;
  font-weight: 500;
  letter-spacing: .4em;
  margin-top: .2em;
  margin-bottom: .4em;
}

#menu .header {
  font-size: 1.1999em;
  font-weight: 100;
  margin-bottom: .2em;
}

#menu .description {
  font-size: .5em;
  margin-bottom: .7em;
  text-align: justify;
}

@keyframes menu-selected {
  from {
    transform: translateY(0)
  }

  to {
    transform: translateY(-.1em)
  }
}

#menu>.selected {
  background-color: #fff;
  color: #000;
  animation-name: menu-selected;
  animation-duration: .5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes menu-chosen {
  from {
    background-color: #fff;
    color: #000;
    border-color: #000;
  }

  to {
    background-color: #555;
    color: #fff;
    border-color: #fff;
  }
}

#menu>.selected.chosen {
  animation-name: menu-chosen;
  animation-duration: .07s;
  animation-iteration-count: 4;
  animation-timing-function: linear;
  animation-direction: alternate;
}

#menu>.selected.disabled {
  animation-name: none;
}

#menu>.full-width {
  width: 95%;
}

#menu>.half-width {
  width: 46.5%;
}

#menu>.third-width {
  width: 25.8%;
}

@keyframes tetris-flash {
  from {
    filter: brightness(100%);
  }

  to {
    filter: brightness(800%);
  }
}

.tetris-flash {
  animation-name: tetris-flash;
  animation-duration: .05s;
  animation-iteration-count: 8;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

.pulse {
  animation-name: pulse;
  animation-duration: .5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

.pulse.spin-pulse {
  animation-name: pulse-strong;
  animation-duration: .1s;
}

.pulse.spin-pulse-mini {
  animation-name: pulse-semi-strong;
  animation-duration: .1s;
}

.hold-canvas.locked {
  filter: grayscale(100%);
}

@keyframes hold-flash {
  from {
    filter: brightness(200%)
  }

  to {
    filter: brightness(100%)
  }
}

@keyframes hold-flash-secondary {
  0% {
    filter: brightness(200%)
  }

  20% {
    filter: brightness(150%)
  }

  40% {
    filter: brightness(200%)
  }

  60% {
    filter: brightness(100%)
  }

  80% {
    filter: brightness(150%)
  }

  100% {
    filter: brightness(100%)
  }
}

.hold-container.flash {
  animation-name: hold-flash-secondary;
  animation-duration: 0.25s;
  animation-timing-function: ease-out;
}

.main-next-canvas.flash {
  animation-name: hold-flash;
  animation-duration: 0.25s;
  animation-timing-function: cubic-bezier(0.000, 1.110, 0.165, 1.000);
}

.skip-amount {
  text-align: right;
  color: #fff;
  font-size: 5em;
  font-weight: 100;
  position: absolute;
  top: .5em;
  right: .5em;
}

#vertical-menu li.control-name {
  text-transform: uppercase;
  font-size: 0.8em;
  font-weight: 500;
  letter-spacing: .2em;
  cursor: auto;
}

#vertical-menu li.selected {
  font-weight: 300;
  font-size: 2em;
  border-left-width: .05em;
  padding-left: .25em;
  animation-name: bob;
  animation-duration: .5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

#title-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition-property: opacity, transform;
  transition-duration: .5s;
  transition-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}

#title-container.hidden {
  opacity: 0;
  transform: rotate(10deg) scale(0.1);
}

.press-key {
  width: 1em;
}

#logo-container {
  display: block;
  width: 90%;
  margin: auto;
  height: 60vh;
  background-image: var(--logo-image);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#press-container {
  color: white;
  font-size: 3em;
  text-align: center;
  animation-name: pulse-opacity;
  animation-duration: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

#press-container.hidden {
  display: none;
}

#button-hint-container {
  position: absolute;
  bottom: 1em;
  right: 1em;
  transition: transform .05s;
}

#button-hint-container table {
  font-size: .9em;
  height: 2em;
  display: inline-block;
  margin-left: 1em;
}

#button-hint-container table .label {
  color: #fff;
  font-size: 2em;
  padding-left: .2em;
}

#button-hint-container table .key {
  color: #111;
  background-color: #fff;
  width: 1.6em;
  text-align: center;
  font-size: 1.5em;
  vertical-align: middle;
}

#button-hint-container table .key.multi {
  font-size: 1em;
  font-weight: 700;
  width: 2.4em;
}

#button-hint-container table .key.big {
  width: 3.6em;
}

#button-hint-container table .key.controller {
  border-radius: 100%;
}

#button-hint-container table .key.dpad {
  font-size: 2em;
  background-color: transparent;
  color: white;
  width: 0;
}

#button-hint-container table .icon,
#menu>.btn.icon {
  font-family: 'Material Icons';
  text-transform: lowercase;
}

::-webkit-scrollbar {
  width: .1em;
  height: .1em;
}

::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}

::-webkit-scrollbar-thumb {
  background: #fff;
}

::-webkit-scrollbar-thumb:hover {
  background: #fff;
}

::-webkit-scrollbar-thumb:active {
  background: #fff;
}

::-webkit-scrollbar-track {
  background: #fff2;
}

::-webkit-scrollbar-track:hover {
  background: #fff2;
}

::-webkit-scrollbar-track:active {
  background: #fff2;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

#game-container {
  margin-top: .3em;
  --matrix-height: calc(var(--matrix-height-base) + var(--peek-zone));
  font-size: calc(var(--cell-size)/2);
  text-align: center;
  vertical-align: middle;
  height: 100%;
}

.sprite-canvas {
  background-color: red;
}

.game {
  display: inline-block;
  padding-top: 2em;
  margin: auto;
  transition-property: filter, transform;
  transition-duration: .8s;
}

.game.dead {
  filter: grayscale(100%) brightness(0.3) blur(.5em);
  transform: scale(0.8);
}

.game.paused canvas {
  opacity: 0;
}

.game div {
  float: left;
}

.game div div {
  box-sizing: border-box;
  float: none;
}

.small {
  font-size: 0.5em;
  font-weight: 300;
}

.medium {
  font-size: 2em;
  font-weight: 200;
  text-align: right;
  margin-right: 0;
  margin-bottom: 0;
}

.stats {
  height: calc(var(--matrix-height-base) * 1.55);
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  margin-right: -.4em;
}

body[theme="tetrjs"] .stats {
  transform: none !important;
  margin-right: 0em
}

.stats div.stat-group {
  text-align: right;
  margin-right: .45em;
}

.stats div.stat-group div {
  color: #fff;
  font-size: 1.1em;
  margin-bottom: 1em;
  padding-right: .5em;
}

.stats div.stat-group div.big {
  color: #fff;
  font-size: 2.3em;
  font-weight: 200;
  margin-bottom: .4em;
  padding-right: .2em;
}

.stats label {
  display: inline-block;
  background-color: var(--tetrion-color);
  transition-property: background-color;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
  font-weight: bold;
  font-size: 1.2em;
  padding: .2em 1em;
  margin-bottom: .4em;
  margin-right: -.1em;
  color: #111;
  text-transform: uppercase;
}

body[theme="tetrjs"] .stats label {
  color: #fff;
  background-color: transparent;
  display: block;
  font-weight: 400;
  margin: 0;
  margin-right: 0;
  padding: .05em;
  padding-left: 1em;
  font-size: 1.55em;
  border-left-width: .1em;
  border-left-color: white;
  border-left-style: solid;
}

.game-left,
.game-right {
  position: relative;
  margin-top: -.5em;
}

.game-center {
  position: relative;
  /* -webkit-backdrop-filter: blur(5em);
  backdrop-filter: blur(5em); */
  width: calc(var(--matrix-width) * var(--cell-size));
  height: calc(var(--matrix-height) * var(--cell-size));
  background-size: calc(100% / var(--matrix-width)) calc(100% / var(--matrix-height));
  background-color: #0003;
  background-image: var(--grid-image);
  background-position: left bottom;
  border-color: var(--tetrion-color);
  transition-property: border-color;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
  /* margin: 0em 1em; */
  margin-top: -.5em;
  border-style: solid;
  border-width: .5em;
}

.gameover-early-warning-bgflash {
  animation-name: matrix-warning;
  animation-duration: 0.1013375s;
  /* 0.1013375 * 2 = 0.202675 */
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate;
}

body[theme="tetrjs"] .game-center {
  border-width: .1em;
}

.next-matrix {
  display: none;
  /* opacity: .4;
  transition-property: opacity;
  transition-duration: .5s;
  transition-timing-function: ease-in-out; */
}

/* .next-matrix.danger {
  opacity: 1;
}
.next-matrix.immediate-death {
  animation-name: pulse-darkness;
  animation-duration: .2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
} */

.game-right {
  text-align: left;
}

.game-canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.hold-container {
  text-align: right;
}

.hold-container,
.main-next-container {
  padding-left: 1em;
  padding-right: 1em;
}

.hold-canvas,
.main-next-canvas {
  width: calc(4 * var(--cell-size));
  height: calc(4 * var(--cell-size));
}

.sub-next-container {
  --next-count: 6;
  display: inline-block;
  margin-left: 1em;
  padding: 0;
}

.sub-next-canvas {
  margin: 0;
  padding: 0;
  width: calc(4 * var(--cell-size) * .62);
  height: calc(4 * var(--cell-size) * var(--next-count) * .62);
}

.next-label,
.hold-label {
  color: #fff;
  margin: 0;
  font-size: 2em;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
}

.next-label {
  text-align: left;
}

.hold-label {
  text-align: right;
  margin-right: -.3em;
}

body[theme="tetrjs"] .next-label,
body[theme="tetrjs"] .hold-label {
  font-weight: 300;
  letter-spacing: normal;
  text-align: center;
  border-left-width: .1em;
  border-left-color: white;
  border-left-style: solid;
}

@keyframes float {
  from {
    transform: translate(0, -.5);
  }

  to {
    transform: translate(0, .5em);
  }
}

.garbage-counter-container {
  position: absolute;
  color: white;
  text-align: right;
  font-size: 2.5em;
  font-weight: 100;
  bottom: .1em;
  right: -1.5em;
  animation-name: float;
  animation-duration: .8s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  transition: opacity filter;
  transition-duration: .25s;
  transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
  text-align: right;
  width: 1em;
}

.garbage-counter-container.hidden {
  opacity: 0;
  /* filter: blur(2em); */
}

.delay-time {
  position: absolute;
  color: white;
  text-align: right;
  width: 6em;
  bottom: -2.3em;
  left: -7em;
}

.rotation-warning {
  position: absolute;
  color: white;
  text-align: right;
  width: 6em;
  bottom: -1.2em;
  left: -7em;
  animation-name: pulse-darkness;
  animation-duration: .2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.infinity-symbol {
  position: absolute;
  color: white;
  text-align: right;
  width: 6em;
  bottom: -2.3em;
  right: -2em;
}

.infinity-symbol.gold {
  color: gold;
  font-size: 1.75em;
  bottom: -1.575em;
  right: -1.5em;
  animation-name: glow-gold;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.manip-grid {
  position: absolute;
  display: grid;
  width: 105%;
  left: -.5em;
  bottom: -1.25em;
  justify-content: space-between;
}

.manip-pip {
  grid-row: 1;
  background-color: white;
  width: .5em;
  height: .5em;
  border-radius: 100%;
}

.manip-pip.disabled {
  background-color: #000a;
}

.lockdown-meter {
  position: absolute;
  width: 105%;
  left: -.5em;
  bottom: -2em;
}

.das-meter {
  display: none;
  --opacity: 1;
  transform: rotate(-90deg);
  position: absolute;
  width: 8em;
  right: -5.2em;
  bottom: 3.25em;
  opacity: var(--opacity);
}

.ready-meter {
  position: absolute;
  width: 80%;
  left: 10%;
  top: 22em;
}

.infinity-symbol.hidden,
.ready-meter.hidden,
.lockdown-meter.hidden,
.manip-grid.hidden,
.delay-time.hidden,
.rotation-warning.hidden {
  display: none;
}

progress[value] {
  -webkit-appearance: none;
  background-color: #000a;
  border: none;
  height: .5em;
}

progress[value="0"] {
  animation-name: pulse-darkness;
  animation-duration: .2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  background-color: #f00;
}

/* Chrome */

progress[value]::-webkit-progress-bar {
  background-color: transparent;
}

progress[value="0"].lockdown-meter::-webkit-progress-bar {
  background-color: #f00;
}

progress[value]::-webkit-progress-value {
  background-color: #fff;
}

/* Firefox */

progress[value]::-moz-progress-bar {
  background-color: #fff;
}

.warning-message-container,
.warning-message-container-hold {
  /* color: red; */
  color: white;
  /* font-weight: 900; */
  font-weight: 500;
  /* font-size: xx-large; */
  text-transform: uppercase;
  letter-spacing: .2em;
  /* animation-name: pulse-darkness2; */
  animation-name: pulse-darkness;
  animation-duration: 0.202675s;
  /* 0.1013375 * 2 = 0.202675 */
  animation-iteration-count: infinite;
  /* animation-timing-function:cubic-bezier(1,0,0,1) */
  animation-timing-function: linear
}

.clutch-message-container {
  color: #fff5;
  /* position: absolute; */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .2em;
  width: 120%;
  margin-left: -10%;
  margin-top: -1.5em;
}

.clutch-active,
.clutch-message-container.clutch-active {
  color: yellow;
  animation-name: space-out;
  animation-duration: .5s;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
}

.warning-message-container {
  /* width: 160%;
  margin-left: -30%;
  margin-top: -1.75em; */
  width: 120%;
  margin-left: -10%;
  margin-top: -2em;
}

.warning-message-container-hold {
  /* width: 10em;
  position: absolute;
  top: -1.45em;
  right: 1em; */
  text-align: right;
  width: 20em;
  position: absolute;
  top: -1.45em;
  right: 1em;
}

.warning-message-container img,
.warning-message-container-hold img {
  height: 1em;
}

.warning-message-container .warning-message,
.warning-message-container-hold .warning-message,
.warning-message-container img,
.clutch-message-container .clutch-message {
  display: inline-block;
}

.hold-disappear-message {
  color: white;
  text-align: right;
  width: 20em;
  position: absolute;
  top: 8.5em;
  font-size: 1em;
  right: .5em;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-weight: 500;
}

@keyframes death-message {
  0% {
    opacity: 0;
    transform: scale(2);
  }

  15% {
    opacity: 1;
    transform: scale(1);
  }

  30% {
    filter: brightness(1)
  }

  40% {
    filter: brightness(0.5)
  }

  50% {
    filter: brightness(1)
  }

  60% {
    filter: brightness(0.5)
  }

  70% {
    filter: brightness(1)
  }

  80% {
    filter: brightness(0.5)
  }
}

.kill-message-container {
  position: absolute;
  color: #fff;
  left: 50%;
  margin-left: -10em;
  top: 50%;
  margin-top: -2em;
  width: 20em;
  height: 4em;
  z-index: 200;
  font-size: 2em;
  opacity: 1;
  animation-name: death-message;
  animation-duration: 0.8s;
  animation-timing-function: ease-in-out;
}

.kill-message-container.hidden,
.clutch-message-container.hidden,
.clutch-message.hidden,
.warning-message-container-hold.hidden,
.warning-message-container.hidden {
  display: none;
}

.kill-message-container .kill-message {
  border-color: #fff;
  border-radius: 0.2em;
  border-style: solid;
  border-width: 0.04em;
  padding: .2em .8em;
  font-size: 1.8em;
  font-weight: 100;
  text-transform: uppercase;
  display: inline-block;
}

.end-message-container {
  text-align: center;
  position: absolute;
  color: #fff;
  left: 50%;
  margin-left: -10em;
  top: 40%;
  margin-top: -6em;
  width: 20em;
  height: 12em;
  z-index: 200;
  font-size: 2em;
  opacity: 1;
  transition-duration: .4s;
  transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
  transition-property: opacity, transform, filter;
}

.end-message-container .end-stats {
  text-align: right;
  width: 15em;
  margin: auto;
  margin-right: 50%;
  white-space: nowrap;
}

.end-message-container.hidden {
  /* display: none; */
  opacity: 0;
  transform: scale(2);
  filter: blur(0.2em);
}

.end-message-container .end-message {
  font-size: 1.8em;
  font-weight: 100;
  text-transform: uppercase;
}

.end-message-container .icon {
  font-family: 'Material Icons';
  border-color: white;
  border-style: solid;
  border-width: .1em;
  border-radius: .2em;
  display: inline-block;
  width: 3em;
  margin-top: 2em;
}

.game .pause {
  display: none;
}

.game.paused .pause,
.game.zen-paused .pause {
  animation-name: pulse-opacity;
  animation-duration: .5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  display: block;
  color: white;
  font-size: 3em;
  font-weight: 300;
  position: absolute;
  top: 2em;
  width: 100%;
}

.game.paused .pause.vertical,
.game.zen-paused .pause.vertical {
  writing-mode: vertical-rl;
  display: flex;
  justify-content: center;
  align-items: center;
}

.game .load-message {
  animation-name: pulse-opacity;
  animation-duration: .5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  display: block;
  color: white;
  text-transform: uppercase;
  font-size: 1.2em;
  font-weight: 700;
  letter-spacing: .3em;
  position: absolute;
  top: 19em;
  width: 100%;
}

.game .load-message.hidden {
  display: none;
}

.game .main-message {
  animation-name: pulse-darkness-light;
  animation-duration: .3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  display: block;
  color: white;
  font-size: 3em;
  font-weight: 300;
  position: absolute;
  top: 6em;
  left: -150%;
  width: 400%;
}

@keyframes dissolve {
  0% {
    transform: scale(4);
  }

  20% {
    transform: scale(1);
    filter: brightness(1);
  }

  25% {
    filter: brightness(.5);
  }

  35% {
    filter: brightness(1);
  }

  40% {
    filter: brightness(.5);
  }

  45% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(.5);
  }

  55% {
    filter: brightness(1);
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.game .main-message.dissolve {
  animation-name: dissolve;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in;
}

.game .timer {
  text-align: right;
  color: #fff;
  position: absolute;
  bottom: -2.7em;
  right: 0em;
  font-size: 1.4em;
  width: 300%;
}

.game .timer-real {
  bottom: -3.7em;
}

@keyframes hurry-up-timer {
  from {
    color: #f00
  }

  to {
    color: #a00
  }
}

.game .timer.hurry-up,
.garbage-counter-container.danger .garbage-counter,
#delay.danger {
  color: #f00;
  animation-name: hurry-up-timer;
  animation-duration: .4s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

@keyframes pace-timer {
  from {
    color: #FF8C00
  }

  to {
    color: #ffd700
  }
}

.game .timer.pace,
.garbage-counter-container.negative .garbage-counter {
  color: #ffd700;
  animation-name: pace-timer;
  animation-duration: .08s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

@keyframes paused-timer {
  from {
    opacity: 0.6
  }

  to {
    opacity: 0.4
  }
}

.game .timer.paused {
  animation-name: paused-timer;
  animation-duration: .2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

.combo-counter-container {
  color: #fff;
  position: absolute;
  bottom: 8em;
  margin-left: 1.2em;
  animation-name: pulse-opacity;
  animation-duration: var(--combo-flash-speed);
  animation-iteration-count: infinite;
  width: 20em;
}

.combo-counter {
  font-size: 1.5em;
  letter-spacing: .2em;
  text-transform: uppercase;
  transition-property: letter-spacing, opacity;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
}

.combo-counter-container.hidden .combo-counter {
  letter-spacing: -.6em;
  opacity: 0;
}

@keyframes garbage-fly {
  from {
    left: var(--starting-value-left);
    top: var(--starting-value-top);
  }

  to {
    left: 50%;
    top: 50%;
  }
}

.garbage-particle {
  --starting-value-top: 100%;
  --starting-value-left: 100%;
  position: absolute;
  background-color: #f00;
  width: 2em;
  height: 2em;
  top: 50%;
  left: 50%;
  animation-name: garbage-fly;
  animation-fill-mode: forwards;
  animation-duration: .33s;
  animation-timing-function: ease-in;
  z-index: -10;
}

@keyframes garbage-send {
  from {
    left: 50%;
    top: 50%;
  }

  to {
    left: var(--starting-value-left);
    top: var(--starting-value-top);
  }
}

.garbage-particle.send {
  background-color: #fff;
  animation-name: garbage-send;
}

@keyframes action-text {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0;
  }

  3% {
    opacity: 1;
  }

  100% {
    transform: translate(0, -25em) rotate(var(--spin-amount));
    opacity: 0
  }
}

.game .action-text {
  animation-name: action-text;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.635, 0.005, 0.940, 0.080);
  display: block;
  color: white;
  font-size: 2.3em;
  font-weight: 500;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: 9em;
  width: 100%;
}

.game .action-text.skip-default-animation {
  animation: none;
}

.game .action-text.perfect-clear-text {
  font-size: 3.5em;
  font-weight: 300;
  top: 4em;
}

@keyframes spin-start-left {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-720deg);
  }
}

@keyframes spin-start-right {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(720deg);
  }
}

@keyframes spin-start-double-h {
  from {
    transform: rotateY(0deg);
  }

  to {
    transform: rotateY(-720deg);
  }
}

@keyframes spin-start-double-v {
  from {
    transform: rotateX(0deg);
  }

  to {
    transform: rotateX(-720deg);
  }
}

.spin-start {
  display: inline-block;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
}

.spin-start.left {
  animation-name: spin-start-left;
}

.spin-start.right {
  animation-name: spin-start-right;
}

.spin-start.double.horizontal {
  animation-name: spin-start-double-h;
}

.spin-start.double.vertical {
  animation-name: spin-start-double-v;
}

@keyframes tetra-text {
  from {
    transform: scale(4) translate(0, 1em);
    opacity: 0;
  }

  to {
    transform: scale(1) translate(0, 0);
    opacity: 1;
  }
}

.tetra-animation {
  animation-name: tetra-text;
  display: inline-block;
  animation-fill-mode: backwards;
  animation-duration: 1s;
  animation-delay: var(--animation-delay);
  animation-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
}

@keyframes perfect-clear {
  0% {
    transform: rotate(0deg) scale(0);
  }

  12.5% {
    transform: rotate(720deg) scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(.5);
    opacity: 0;
  }
}

.perfect-clear {
  display: inline-block;
  animation-name: perfect-clear;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes perfect-clear-secondary {
  from {
    transform: scale(1);
    opacity: 1;
  }

  to {
    transform: scale(6);
    opacity: 0;
  }
}

.perfect-clear-secondary {
  display: inline-block;
  animation-name: perfect-clear-secondary;
  opacity: 0;
  animation-duration: 1s;
  animation-delay: .5s;
  animation-timing-function: ease-out;
}

.pulse-spin-text {
  animation-name: pulse-opacity;
  animation-timing-function: ease-in-out;
  animation-duration: var(--duration);
  animation-iteration-count: var(--pulse-count);
}

@keyframes ready-text {
  from {
    transform: translate(0, -1em);
    opacity: 0;
  }

  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}

.ready-animation {
  animation-name: ready-text;
  display: inline-block;
  animation-fill-mode: backwards;
  animation-duration: 1s;
  animation-delay: var(--animation-delay);
  animation-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
}

@keyframes error {
  from {
    opacity: 0;
    transform: translate(4em);
  }

  to {
    opacity: 1;
    transform: translate(0);
  }
}

.error-stack {
  z-index: 300;
  bottom: 0;
  right: 0;
  position: absolute;
}

.error {
  animation-name: error;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
  background-color: #000a;
  color: white;
  border-left-color: red;
  border-left-width: .2em;
  border-left-style: solid;
  padding: .2em 1em;
  border-radius: .2em;
  margin: 1em;
  cursor: pointer;
}

.error>.msg {}

.error>.url {
  font-weight: 700;
  display: inline-block;
}

@keyframes non-flash {
  from {
    background-color: #8536c5
  }

  to {
    background-color: black
  }
}

.non-flash {
  animation-name: non-flash;
  animation-duration: var(--flash-speed);
  animation-timing-function: linear;
  animation-iteration-count: 1;
}

.sil {
  filter: brightness(0);
}

#piece.sil {
  animation-name: none;
}

#lights-warning {
  position: absolute;
  z-index: 9999;
  color: #fff;
  right: 1em;
  bottom: 1em;
  font-size: 1em;
  font-weight: bold;
  letter-spacing: .2em;
  text-transform: uppercase;
  animation-name: pulse-darkness-light;
  animation-duration: .5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

#lights-warning.hidden {
  display: none;
}

.input-thingy {
  opacity: 0.0;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  display: none;
}

.label-for-input-thingy {
  opacity: 0.0;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}