@font-face {
  src: url("../res/font/hun2.ttf?v=11");
  font-family: HUN;
}

html {
    background: #111;
}

body {
    padding: 0;
    margin: 0;
}

#background {
    --r: 51;
    --g: 204;
    --b: 187;
    --a: 1;
    --br: 0.25;
    width: 100vw;
    height: 100vh;
    background: rgba(var(--r), var(--g), var(--b), var(--a));
    filter: brightness(var(--br));
}

#menus {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    transition: 0.3s opacity;
    overflow: hidden;
}
#menus.hidden,
body.game #menus{
  opacity: 0;
  pointer-events: none;
}

.flex-row {
    display: flex;
    flex-wrap: wrap;
}

.flex-item {
    flex-shrink: 0;
    flex-grow: 1;
    margin-right: 2.5em;
}
.flex-item:last-child {
    margin-right: 0;
}
.flex-item.flex-3x {
    flex-grow: 3;
}

.ns {
  -moz-user-select: none !important;
  -khtml-user-select: none !important;
  -webkit-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}
.ns ::selection,
.ns::selection {
  background-color: inherit;
  color: inherit;
  text-shadow: inherit;
}

html {
  scrollbar-color: #333 #111 !important;
  scrollbar-width: none;
}

/*GAME THINGS*/

#game {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    transition: 0.3s opacity;
    overflow: hidden;
}
body:not(.game) #game{
    opacity: 0;
}
#questions_deck{
    display: flex;
    flex-direction: column-reverse;
}
.question{
    text-align: center;
    font-family: HUN;
    font-size: calc(40px * var(--r));

    background: linear-gradient(#d5f116, #24d2c5);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.question.hidden{
  opacity: 0;
}

.question:nth-child(1){
  font-size: calc(60px * var(--r));
}
.question:nth-child(2){
  font-size: calc(40px * var(--r));
}
.question:nth-child(3){
  font-size: calc(25px * var(--r));
}

#score, #chain, #time {
    text-align: center;
    font-family: HUN;
    font-size: calc(45px * var(--r));

    background: linear-gradient(#21c373, #3129f7);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
#time {
  background: linear-gradient(#fff, #848484);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

#chain>span {
  font-size: var(--sc);
}
#answers_deck {
    padding: 0 10%;
}
.answer {
  background: #b26040;
  border: calc(6px * var(--r)) solid #e19070;
  text-align: center;
  font-family: HUN;
  font-size: calc(40px * var(--r));
  padding: 0.75em 1em 0.25em;
  filter: brightness(1);
  z-index: 1;
  cursor: pointer;
  transition: 0.3s filter, 0.3s opacity, 0.3s background-color;
}
#hp {
  width: 100%;
  height: calc(22px * var(--r));
  accent-color: red;
  cursor: auto;
}
::-webkit-progress-bar {
  background-color: orange;
}

#sbt {
  border: 1px solid #ff0;
  position: fixed;
  left: 30px;
  top: 30px;
  right: 30px;
  bottom: 30px;
  pointer-events: none;
  opacity: 0.05;
  z-index: 100000;
}
#sbt::before {
  content: "";
  width: 100vw;
  height: 1px;
  background-color: #f0f;
  position: fixed;
  top: 50vh;
  left: 0;
  z-index: 100000;
}
#sbt::after {
  content: "";
  width: 1px;
  height: 100vh;
  background-color: #f0f;
  position: fixed;
  left: 50vw;
  top: 0;
  z-index: 100000;
}

/*MENU THINGS*/
#menus {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 999999;
  transition: 0.3s opacity;
  overflow: hidden;
}
#menus.lite {
  background: 0 0;
  z-index: 1;
  pointer-events: none;
}
#menus.hidden {
  opacity: 0;
  pointer-events: none;
}

.right_scroller {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 2.5em 0;
  padding-left: 15vw;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  text-align: right;
  color: #fff;
  transform: translateX(0);
  transition: 0.5s transform, 0.5s opacity;
}
.hidden .right_scroller,
.right_scroller.hidden {
  transform: translateX(-30vw);
  opacity: 0;
  pointer-events: none;
}
.right_scroller.thidden,
.thidden .right_scroller {
  display: none;
}

.scroller_item {
  height: 5em;
  background-color: #2a211b;
  border-top: 3px solid #643b1d;
  border-right: 3px solid #48301e;
  border-bottom: 3px solid #13100e;
  box-shadow: 0 0 8px #000;
  position: relative;
  font-family: HUN;
  border-radius: 3px;
  right: 30vw;
  text-align: right;
  transform: translateX(0);
  filter: brightness(1);
  transition: 0.5s transform, 0.5s filter;
  cursor: pointer;
  margin-bottom: 1em;
}
.scroller_item.hidden {
  display: none;
}
.scroller_item.scroller_item_giant {
  height: 7em;
}
.scroller_item.scroller_item_big {
  height: 4em;
}
.scroller_item:hover {
  transform: translateX(4em);
  filter: brightness(1.2);
  transition: 0.2s transform, 0.2s filter;
}
.scroller_item:active {
  transform: translateX(6em);
  filter: brightness(1.5);
  transition: 50ms transform, 0s filter;
}
.scroller_item_config,
.scroller_item_league {
  left: 0;
  width: calc(100% + 6em);
}
.scroller_item > img {
  position: absolute;
  left: 1em;
  top: 1em;
  height: 4em;
  pointer-events: none;
}
.scroller_item.scroller_item_giant > img {
  height: 6em;
}
.scroller_item.scroller_item_big > img {
  height: 3em;
}
.scroller_item > h1 {
  position: absolute;
  left: 0.5em;
  right: 2em;
  top: 0.75em;
  margin: 0;
  font-size: 2em;
  pointer-events: none;
  color: #ffba88;
  font-weight: 500;
}
.scroller_item.scroller_item_big > h1,
.scroller_item.scroller_item_giant > h1 {
  font-weight: 700;
  font-size: 3em;
}
.scroller_item.has_image > h1 {
  left: 5.25em;
}
.scroller_item.has_description > h1 {
  top: 0.4em;
}
.scroller_item.scroller_item_big > h1 {
  top: 0.3em;
}
.scroller_item > p {
  position: absolute;
  left: 1em;
  right: 4em;
  top: 3em;
  margin: 0;
  font-size: 1em;
  pointer-events: none;
  color: #c08051;
}
.scroller_item.scroller_item_giant > p {
  font-size: 1.5em;
}
.scroller_item.has_image > p {
  left: 10.55em;
}
.scroller_item.devel {
  background-color: #1a3c2e;
  border-top: 3px solid #25684c;
  border-left: 3px solid #264f39;
  border-bottom: 3px solid #0b151b;
}
.scroller_item.devel > h1 {
  color: #3af397;
}
.scroller_item.devel > p {
  color: #31b25a;
}

#back,
#list_request_back {
  position: relative;
  left: 0;
  top: 3em;
  width: fit-content;
  transform: translateX(-2em);
  background-color: #242424;
  border-top: 3px solid #3d3d3d;
  border-right: 3px solid #181818;
  border-bottom: 3px solid #0e0e0e;
  box-shadow: 0 0 8px #000;
  color: #c9c9c9;
  font-family: HUN;
  font-size: 1.8em;
  border-radius: 3px;
  filter: brightness(1);
  transition: 0.5s transform, 0.5s filter, 0.5s opacity;
  padding-top: 0.5em;
  padding-bottom: 0.3em;
  padding-left: 3.5em;
  padding-right: 0.5em;
  margin-bottom: 0.25em;
  cursor: pointer;
  z-index: 10;
}
#back:hover,
#list_request_back:hover {
  transform: translateX(-0.5em);
  filter: brightness(1.2);
  transition: 0.2s transform, 0.2s filter, 0.5s opacity;
}
#back:active,
#list_request_back:active {
  transform: translateX(0);
  filter: brightness(1.5);
  transition: 50ms transform, 0s filter, 0.5s opacity;
}
#back.hidden,
#list_request_back.hidden {
  opacity: 0;
  transform: translateX(-10em);
  pointer-events: none;
}
.noanim #back {
  transition: none !important;
}

.scroller_block {
  background-color: #181c27;
  border-top: 3px solid #283145;
  border-left: 3px solid #232936;
  border-bottom: 3px solid #0f1117;
  border-right: 3px solid #151922;
  box-shadow: 0 0 8px #000;
  position: relative;
  font-family: HUN;
  border-radius: 3px;
  text-align: left;
  width: 70vw;
  padding: 1em;
  margin-bottom: 1em;
}
.scroller_block > h1 {
  color: #657497;
  font-size: 2.5em;
  margin: 0;
  margin-bottom: 0.15em;
}

.mpmpu-mounted .mpmpu-crushable {
  padding-left: max(330px, 15vw);
}

.starter {
  text-align: right;
  overflow: hidden;
}
.start_game {
  display: inline-block;
  background-color: #22293d;
  border-left: 1px solid #3f4c6e;
  color: #b3c4f4;
  width: 4em;
  font-size: 4em;
  margin: -0.33em;
  position: relative;
  left: -5px;
  top: 4px;
  text-align: center;
  padding-top: 0.2em;
  filter: brightness(1);
  cursor: pointer;
  animation: 1s StartGameFlash infinite ease-out;
}
@keyframes StartGameFlash {
  0% {
    filter: brightness(1);
  }
  25% {
    filter: brightness(1.5);
  }
  100% {
    filter: brightness(1);
  }
}
.mod_previewer {
  display: inline-block;
  float: left;
  color: #b3c4f4;
  font-size: 2em;
  margin: -0.33em;
  position: relative;
  left: 0.25em;
  top: 0.4em;
  text-align: left;
  padding-top: 0.2em;
  filter: brightness(1);
  transition: 0.5s filter;
  animation: 1s StartGameFlash infinite ease-out;
}

.checkbox {
  display: block;
  margin: 0;
  font-size: 1.5em;
  color: #6275a7;
  cursor: pointer;
}
.checkbox.checked {
  color: #94a8dc;
}
.checkbox.disabled {
  pointer-events: none;
  opacity: 50%;
}
.checkbox.hidden {
  display: none;
}
.checkbox::before {
  content: "";
  display: inline-block;
  position: relative;
  top: 0.2em;
  width: 1em;
  height: 1em;
  margin-right: 0.25em;
  background-color: #0f1116;
  border-top: 3px solid #070708;
  border-left: 3px solid #0c0d0f;
  border-bottom: 3px solid #23262c;
  border-right: 3px solid #1e2026;
  border-radius: 3px;
  filter: brightness(1);
  transition: 0.5s filter;
}
.checkbox.checked::before {
  background: url("/res/checkmark.svg"), #687ca3;
  border-top: 3px solid #91ace2;
  border-left: 3px solid #7990be;
  border-bottom: 3px solid #485673;
  border-right: 3px solid #4f5f7e;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.checkbox:hover::before {
  filter: brightness(1.2);
}
.checkbox.indent {
  margin-left: 2em;
}

.pbdisplay.hidden {
  display: none;
}
h2.pbdisplay {
  margin-top: 1em;
}
h1.pbdisplay {
  margin-bottom: -0.1em;
}
h1.pbdisplay > span {
  font-size: 0.6em;
}

/*CONFIG*/

.stat {
  display: block;
  position: relative;
  height: 3em;
  margin-bottom: 0.5em;
  background-color: #11141b;
  border-radius: 3px;
}
.stat > .stat_name {
  position: absolute;
  left: 0.6em;
  top: 0.6em;
  font-size: 1.5em;
  display: inline-block;
  width: 12.5em;
  color: #6275a7;
}
.stat > .stat_range {
  font-size: 1.5em;
  display: block;
  position: absolute;
  left: 10.5em;
  width: calc(100% - 17em);
  top: 0.25em;
  margin-left: 0.7em;
}
.stat > .stat_field {
  font-size: 1.5em;
  display: inline-block;
  width: 3em;
  position: absolute;
  right: 0.25em;
  top: 0.25em;
  background-color: #0b0d11;
  border-radius: 3px;
  color: #aec0ee;
  font-family: HUN;
  border: none;
  padding-top: 0.3em;
  padding-bottom: 0.1em;
  padding-left: 1em;
  padding-right: 1em;
  text-align: right;
  transition: 0.3s filter;
  filter: brightness(1);
  cursor: pointer;
}
.stat > .stat_field:hover {
  filter: brightness(1.3);
}
.stat > .stat_unit {
  position: absolute;
  right: 0.5em;
  top: 0.55em;
  font-size: 1.5em;
  display: inline-block;
  width: 2em;
  text-align: right;
  color: #3d4457;
  pointer-events: none;
}
.stat > .stat_sub_field {
  font-size: 1em;
  display: inline-block;
  width: 4em;
  position: absolute;
  right: 3.5em;
  top: 1.25em;
  color: #3d4457;
  background: 0 0;
  font-family: HUN;
  border: none;
  text-align: left;
  pointer-events: none;
}
.stat > .stat_range_lower {
  position: absolute;
  left: 22.5em;
  top: 2.5em;
  font-size: 0.75em;
  display: inline-block;
  width: 10em;
  text-align: left;
  color: #3d4457;
  pointer-events: none;
}
.stat > .stat_range_upper {
  position: absolute;
  right: 11.6em;
  top: 2.5em;
  font-size: 0.75em;
  display: inline-block;
  width: 10em;
  text-align: right;
  color: #3d4457;
  pointer-events: none;
}
.range {
  -webkit-appearance: none;
  height: 0.2em;
  background-color: #0b0d11;
  outline: 0;
  padding: 0;
  margin-top: 0.65em;
  margin-right: 0;
}
.range_reversed {
  direction: rtl;
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1em;
  height: 1.25em;
  background-color: #181c27;
  border-top: 3px solid #283145;
  border-left: 3px solid #232936;
  border-bottom: 3px solid #0f1117;
  border-right: 3px solid #151922;
  box-shadow: 0 2px 4px #0004;
  border-radius: 3px;
}
.range::-moz-range-thumb {
  width: 1em;
  height: 1.25em;
  background-color: #181c27;
  border-top: 3px solid #283145;
  border-left: 3px solid #232936;
  border-bottom: 3px solid #0f1117;
  border-right: 3px solid #151922;
  box-shadow: 0 2px 4px #0004;
  border-radius: 3px;
}
.range::-webkit-slider-runnable-track {
  opacity: 1;
}
.range::-moz-range-track {
  opacity: 0;
}

.disabled {
  opacity: 0.25;
  pointer-events: none;
}

.keybind_custom_container {
  width: 1px;
}
.keybind_custom {
  width: 7em;
  background-color: #0b0c10;
  text-align: center;
  display: inline-block;
  cursor: pointer;
  padding-top: 0.2em;
  font-size: 0.8em;
  border-radius: 3px;
  text-overflow: ellipsis;
  overflow: hidden;
  font-family: HUN;
  transition: 0.5s background-color;
}
.keybind_custom:hover {
  background-color: #11141b;
  transition: 0.2s background-color;
}
.keybind_custom.keybind_warning {
  background-color: #e22424;
  color: #fff;
  opacity: 1 !important;
}
.keybind_custom.keybind_warning:hover {
  background-color: #ed5252;
}
#keybind_request {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #000000f8;
  font-family: HUN;
  color: #fff;
  z-index: 1000000;
  cursor: pointer;
  transition: 0.3s opacity;
}
#keybind_request.hidden {
  opacity: 0;
  pointer-events: none;
}
#keybind_request > p {
  font-size: 7vw;
  position: fixed;
  left: 50%;
  top: 50%;
  margin: 0;
  text-align: center;
  transform: translate(-50%, -50%);
}
#keybind_request > p:nth-child(2) {
  font-size: 2vw;
  position: fixed;
  left: 50%;
  top: calc(100% - 2em);
  margin: 0;
  text-align: center;
  transform: translate(-50%, -50%);
}

.mod_button {
  --bg: #322f19;
  --fg: #80d1ff;
  font-size: 2em;
  background-color: var(--bg);
  color: var(--fg);
  padding: 0.25em 0.75em;
  filter: brightness(0.4);
  transform: rotate(0deg) scale(0.8);
  clip-path: polygon(
    0% 50%,
    0.66em 0%,
    calc(100% - 0.66em) 0%,
    100% 50%,
    calc(100% - 0.66em) 100%,
    0.66em 100%
  );
  will-change: transform;
  transition: 0.1s;
}
.mod_button:hover {
  filter: brightness(0.5);
}
.mod_button.active {
  filter: brightness(1);
  transform: rotate(-5deg);
}

#grMult {
  font-size: 0.5em;
}

/*GAME*/
#waterfall {
  position: fixed;
  right: 1em;
  top: 1em;
  left: 1em;
  z-index: 10000005;
  pointer-events: none;
}
.waterfall_item {
  --bgc: #888;
  --timeout: 5s;
  color: #fff;
  will-change: transform;
  text-align: center;
  font-family: HUN;
  font-size: 1.7em;
  height: 2em;
  margin-bottom: -2em;
  position: relative;
  opacity: 0;
  transform: translateY(-1em);
  animation: 0.5s waterfallSpawn forwards cubic-bezier(0.3, 1.52, 0.45, 1);
}
.waterfall_item.despawning {
  opacity: 0;
  margin-bottom: -2em;
  transform: translateY(-1em);
  animation: 0.5s waterfallDespawn forwards ease-in;
}
.waterfall_item p {
  position: relative;
  display: inline-block;
  text-align: center;
  padding: 0.2em 2em;
  padding-bottom: 0;
}
.waterfall_item p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  border-radius: 6px;
  background-color: var(--bgc);
  opacity: 1;
  animation: var(--timeout) waterfallPing forwards
    cubic-bezier(0.01, 0.79, 0.74, 0.07);
  clip-path: polygon(
    0% 50%,
    0.66em 0%,
    calc(100% - 0.66em) 0%,
    100% 50%,
    calc(100% - 0.66em) 100%,
    0.66em 100%
  );
}
.waterfall_item p .fire {
  opacity: 0.5;
  font-size: 0.75em;
  vertical-align: 10%;
}
@keyframes waterfallSpawn {
  from {
    opacity: 0;
    margin-bottom: -2em;
    transform: translateY(-1em);
  }
  to {
    opacity: 1;
    margin-bottom: -0.3em;
    transform: translateY(0);
  }
}
@keyframes waterfallPing {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes waterfallDespawn {
  from {
    opacity: 1;
    margin-bottom: -0.3em;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    margin-bottom: -2em;
    transform: translateY(0);
  }
}

.shout {
  text-shadow: 0 0 32px currentColor;
  width: calc(612px * var(--r));
  text-align: center;
  position: absolute;
  top: calc(360px * var(--r));
  left: calc(-153px * var(--r));
  color: #ffa200;
  font-family: HUN;
  font-size: calc(80px * var(--r));
  -webkit-text-stroke: calc(3px * var(--r)) #ff0;
  text-stroke: calc(3px * var(--r)) #ff0;
  font-weight: 900;
  opacity: 0;
  transform: translateY(-50%) scale(1);
  animation: 1s shoutExpand ease-out;
}
@keyframes shoutExpand {
  0% {
    opacity: 0;
    transform: translateY(-50%) scale(1);
    filter: brightness(4) grayscale(1);
  }
  10% {
    opacity: 1;
    transform: translateY(-50%) scale(1.3);
    filter: brightness(1.5) grayscale(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-50%) scale(1.1);
    filter: brightness(1) grayscale(0);
  }
}
@keyframes globalShoutExpand {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
    filter: brightness(4) grayscale(1);
  }
  10% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3);
    filter: brightness(1.5) grayscale(0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.1);
    filter: brightness(1) grayscale(0);
  }
}
@keyframes majorShoutExpand {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
    filter: brightness(4) grayscale(1);
  }
  10% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3);
    filter: brightness(1.5) grayscale(0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.1);
    filter: brightness(1) grayscale(0);
  }
}
.globalshouts .shout {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000000;
  animation: 1s globalShoutExpand ease-out;
}
#majorshouts {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 10000000;
}
#majorshouts .shout {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  animation: 5s majorShoutExpand ease-out;
  width: 100%;
  font-size: 8vw;
  -webkit-text-stroke: 0.04em #ff0;
  text-stroke: 0.02em #ff0;
}
.shout.finish {
  animation-duration: 5s;
}
.shout.gameover {
  animation: 5s globalShoutExpandGrey ease-out;
}
@keyframes globalShoutExpandGrey {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
    filter: brightness(0) grayscale(1);
  }
  10% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3);
    filter: brightness(1.5) grayscale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.1);
    filter: brightness(1) grayscale(1);
  }
}
.shout.lg_victory {
  animation: 5s shoutLGVictory ease-in-out !important;
  -webkit-text-stroke: unset !important;
  text-stroke: unset !important;
  color: #ffae00;
  font-weight: 900;
  text-shadow: 0 0 16px #ffae00 !important;
}
@keyframes shoutLGVictory {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    filter: brightness(1.5) grayscale(0);
  }
  22.5% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(2);
    filter: brightness(2.5) grayscale(0);
  }
  25% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.5);
    filter: brightness(2.5) grayscale(0);
  }
  25.5% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.5);
    filter: brightness(4) grayscale(1);
  }
  80% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3);
    filter: brightness(1) grayscale(0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
    filter: brightness(1) grayscale(0);
  }
}
.shout.lg_defeat {
  animation: 5s shoutLGDefeat ease-in-out !important;
  -webkit-text-stroke: unset !important;
  text-stroke: unset !important;
  color: #a6a0ff;
  font-weight: 900;
  text-shadow: 0 0 16px #a6a0ff !important;
}
@keyframes shoutLGDefeat {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.8);
    filter: brightness(1) grayscale(0);
  }
  80% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3);
    filter: brightness(1) grayscale(0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 100%) scale(1.3) rotate(3deg);
    filter: brightness(1) grayscale(0);
  }
}
.shout.lg_nocontest {
  animation: 5s shoutLGNoContest ease-in-out !important;
  -webkit-text-stroke: unset !important;
  text-stroke: unset !important;
  color: #fff;
  font-weight: 900;
  text-shadow: 0 0 16px #fff !important;
}
@keyframes shoutLGNoContest {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.8);
    filter: brightness(1) grayscale(0);
  }
  80% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3);
    filter: brightness(1) grayscale(0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5) rotate(3deg);
    filter: brightness(1) grayscale(0);
  }
}
.shout.gameshort {
  animation-duration: 1.75s !important;
}
.shout.game {
  animation-duration: 3s !important;
}
.shout.globalbest {
  animation: 5s majorShoutExpand ease-out, 1s rainbowGlide infinite linear !important;
}
@keyframes rainbowGlide {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}

/*RESULTS*/
.resultslike .bigscore {
 background-color: #0002;
  border-radius: 6px;
  text-align: center;
  font-size: 6vw;
  font-weight: 900;
  color: #b3c4f4;
  text-shadow: 0 0.03em #909dc3, 0 0 16px #fff4;
  padding-top: 0.2em;
}
.resultslike .bigscore > .ms {
  font-size: 4vw;
}
.resultslike .bigscore > .unit {
  color: #909dc3;
  font-size: 3vw;
  margin-left: 0.2em;
}

.resultslike:not(.hasranks) .rank {
  display: none;
}
.resultslike .rank.hidden {
  display: none;
}
.resultslike .rank {
  padding: 0.25em;
  background-color: #0002;
  border-radius: 3px;
  margin-top: 0.6em;
}
.resultslike .rank.best {
  background-color: #4d5c82;
  box-shadow: 0 0 32px #4d5c82;
  filter: brightness(1.5);
}
.resultslike .rank > p.rank_sub {
  margin-top: 0.25em;
  font-size: 1.05em;
}
.resultslike .rank:not(.best) > p.rank_sub {
  opacity: 0.3;
}
.resultslike .rank > h1 {
  color: #b3c4f4;
  text-align: center;
  margin: 0.2em;
  font-size: 3vw;
  text-shadow: 0 0.03em #909dc3, 0 0 16px #fff4;
  margin-bottom: 0.1em;
}
.resultslike .rank > p.rank_sub {
  color: #b3c4f4;
  text-shadow: 0 0.03em #909dc3, 0 0 8px #fff2;
}
.resultslike .rank > p {
  color: #22293b;
  text-align: center;
  margin: 0.15em;
}
#mod_result{
  margin-top: 1em;
}
.mod {
  display: inline;
  font-size: 2vw;
  text-align: center;
  padding: 0.25em 0.75em;
  margin: 0.25em;
  background:#283145;
  clip-path: polygon(
      0% 50%,
      0.66em 0%,
      calc(100% - 0.66em) 0%,
      100% 50%,
      calc(100% - 0.66em) 100%,
      0.66em 100%
    );
}

.keypairs {
  font-size: 1.5em;
  width: 100%;
}
.keypairs.hidden {
  display: none;
}
.keypairs tr {
  transition: 0.1s background-color;
}
.keypairs tr:hover {
  background-color: #0001;
}
.keypairs tr:not(:last-child) td {
  border-bottom: 1px solid #0003;
}
.keypairs tr:not(:first-child) td {
  padding-top: 0.2em;
}
.keypairs tr td:nth-child(3) .keybind_custom {
  opacity: 0.6;
}
.keypairs tr td:nth-child(4) .keybind_custom {
  opacity: 0.5;
}
.keypairs td {
  color: #6275a7;
}
.keypairs td:not(:first-child) {
  text-align: right;
  color: #a7baec;
}

.control_button {
  background-color: #22293b;
  border-top: 3px solid #33405c;
  border-left: 3px solid #2d364b;
  border-bottom: 3px solid #1b1f28;
  border-right: 3px solid #1e232d;
  color: #7f9ddf;
  border-radius: 3px;
  text-align: center;
  padding: 0.2em;
  padding-bottom: 0;
  font-size: 1.5em;
  filter: brightness(1);
  transition: 0.5s filter;
  cursor: pointer;
}
.control_button:hover {
  filter: brightness(1.2);
  transition: 0.2s filter;
}
.control_button.pressed {
  background-color: #11141b;
  border-top: 3px solid #0b0c10;
  border-left: 3px solid #0e1015;
  border-bottom: 3px solid #252c3d;
  border-right: 3px solid #1d222f;
  color: #aec0ee;
}
.control_button.disabled {
  pointer-events: none !important;
  opacity: 0.25;
}
.control_button.hidden {
  display: none;
}

/*CREDITS*/
.credit_text{
  font-size: 2em;
}
.centered_block {
  position: relative;
  text-align: center;
  border: 3px solid #0000;
  width: 70vw;
  padding: 1em;
  margin-bottom: 1em;
  font-family: HUN;
}
.credit_title {
  font-size: 0.8em;
  color: #ffb400;
  margin-bottom: 0.5em;
  margin-top: 2em;
}
.credit_owner {
  font-size: 1.35em;
  color: #fff;
  margin-bottom: 0.5em;
}
.credit_owner a,
.credit_title a {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}
.credit_owner a:hover,
.credit_title a:hover {
  text-decoration: dotted underline;
}
.credit_owner a.noclick,
.credit_title a.noclick {
  cursor: default !important;
  text-decoration: none !important;
}
.credit_title span {
  opacity: 0.5;
}
.credit_owner .flex-item {
  min-width: 10vw;
}
.credit_owner .jp_kana {
  display: block;
  font-size: 0.54em;
  opacity: 0.5;
  margin-top: -0.2em;
  margin-bottom: 1em;
}
#about_line {
  font-size: 2em;
  margin-top: 0.5em;
  padding-bottom: 0.5em;
  margin-bottom: 0.5em;
  border-bottom: 1px solid #fff1;
}
#about_line_logo {
  height: 0.9em;
  margin-left: 0.4em;
  position: relative;
  top: 0.02em;
}
#about_logo{
  height: 6em;
}
.about_block {
  font-size: 1.5em;
  padding-bottom: 0.5em;
  padding-left: 10vw;
  padding-right: 10vw;
  text-align: justify;
  margin-bottom: 0.5em;
  border-bottom: 1px solid #fff1;
}
.about_hr {
  width: 100%;
  height: 1px;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  background-color: #fff1;
}

/*STAT*/

#achievement_header {
  width: calc(70vw + 2em + 6px);
  margin-bottom: 1em;
  text-align: center;
}

.tetra_badge_holder {
  margin: 0.25em -1em;
  padding: 0.25em 1.1em;
  padding-bottom: 0;
  text-align: left;
  background-color: #0002;
}
.tetra_badge {
  height: 9em;
  margin: 0;
  margin-right: 0.25em;
  transition: filter 0.2s;
}
.tetra_badge:hover {
  filter: brightness(1.35);
}

/*LOADER*/
#loader {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #000d;
  z-index: 999999;
  transition: 1s 0.5s opacity;
}
#loader.hidden {
  opacity: 0;
  transition: 0.1s opacity;
  pointer-events: none;
}
#loader.thidden {
  display: none;
}
#loader > #loader_anim {
  position: fixed;
  width: 10px;
  height: 10px;
  background-color: #000;
  right: 22px;
  bottom: 22px;
  animation: 3s LoaderSpin ease-out infinite;
}
#loader > p {
  position: fixed;
  display: inline-block;
  left: 50%;
  top: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  color: #fff;
  font-family: HUN;
  font-size: 3.5em;
  text-shadow: 0 0 8px #fff;
  animation: 1s LightFade infinite alternate ease-in-out;
}
@keyframes LightFade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.6;
  }
}