@font-face {
  src: url("/tetr-res/font/hun2.ttf?v=11");
  font-family: HUN;
}
@font-face {
  src: url("/tetr-res/font/hun2-cheeky.ttf?v=1");
  font-family: HUN-CHEEKY;
}
@font-face {
  src: url("/tetr-res/font/pfwex.woff");
  font-family: PFW;
}
@font-face {
  src: url("/tetr-res/font/ind.ttf");
  font-family: IND;
}
@font-face {
  font-family: "C";
  font-weight: 500;
  src: url("/tetr-res/font/cr.ttf");
}
@font-face {
  font-family: "C";
  font-weight: 900;
  src: url("/tetr-res/font/cb.ttf");
}
@font-face {
  font-family: CC;
  font-weight: 500;
  src: url("/tetr-res/font/ccr.ttf");
}
@font-face {
  font-family: CC;
  font-weight: 900;
  src: url("/tetr-res/font/ccb.ttf");
}
html {
  background: #000;
}
body {
  padding: 0;
  margin: 0;
}
.gm-intro {
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgb(7, 7, 7) !important;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100000000;
    display: block;
    animation: gmbAnim 4s forwards;
}
.gm-logo {
    width: 22%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: gmAnim 4s forwards;
    opacity: 0;
}
@keyframes gmAnim {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    95% {
        opacity: 0;
    }
    100% {
        opacity: 0;
        display: none;
    }
}
@keyframes gmbAnim {
    0% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    99% {
        opacity: 0;
    }
    100% {
        opacity: 0;
        display: none;
    }
}
body.shaking:not([data-graphics="low"]):not([data-graphics="minimal"]) {
  animation: 0.1s ShakeBody linear infinite;
  position: fixed;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  overflow: hidden;
  transform: translate(0, 0);
}
@keyframes ShakeBody {
  0% {
    transform: translate(-1vw, -1vh);
  }
  10% {
    transform: translate(-0.5vw, 2vh);
  }
  20% {
    transform: translate(0, -0.5vh);
  }
  30% {
    transform: translate(-1vw, 1vh);
  }
  40% {
    transform: translate(2vw, 0);
  }
  50% {
    transform: translate(0.5vw, -1vh);
  }
  60% {
    transform: translate(-1vw, -0.5vh);
  }
  70% {
    transform: translate(-0.5vw, 1.5vh);
  }
  80% {
    transform: translate(1vw, -1vh);
  }
  90% {
    transform: translate(-0.5vw, 0.5vh);
  }
  100% {
    transform: translate(-1vw, -1vh);
  }
}
body.ingame.idlemouse:not(.chatfocus),
body.ingame.idlemouse:not(.chatfocus) #pixi,
body.ribbonglide_engaged.idlemouse {
  cursor: none !important;
}
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background-color: #111;
}
::-webkit-scrollbar-thumb {
  background-color: #333;
  border: none;
}
html {
  scrollbar-color: #333 #111 !important;
  scrollbar-width: thin !important;
}
.scroller {
  overflow-y: auto;
  overflow-x: hidden;
}
.scroller.ls {
  direction: rtl;
}
.scroller.ls > * {
  direction: ltr;
}
.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;
}
.nm {
  margin: 0 !important;
}
.np {
  padding: 0 !important;
}
.cheeky {
  font-family: HUN-CHEEKY, HUN;
}
.i18n_mono {
  font-family: PFW, sans-serif;
}
.flag {
  clip-path: polygon(
    0.1em 0,
    calc(100% - 0.1em) 0,
    100% 0.1em,
    100% calc(100% - 0.1em),
    calc(100% - 0.1em) 100%,
    0.1em 100%,
    0 calc(100% - 0.1em),
    0 0.1em
  );
}
.avatar {
  border-radius: 3px;
}
.banner {
  border-radius: 3px;
}
a.bodylink {
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}
a.bodylink:hover {
  text-decoration: underline dotted;
}
.flex-row {
  display: flex;
  flex-wrap: wrap;
}
.flex-item {
  flex-shrink: 0;
  flex-grow: 1;
  margin-right: 0.25em;
}
.flex-item:last-child {
  margin-right: 0;
}
.flex-item.flex-3x {
  flex-grow: 3;
}
p.sub {
  font-size: 1em;
}
p.csub {
  color: #485673;
  font-size: 1.05em;
  text-align: center;
  margin-top: 0.5em;
}
.rc_moreinfo {
  font-family: HUN;
  color: #fff5;
  font-size: 0.9em;
  text-align: center;
  pointer-events: none;
  margin: 0.25em 0;
}
.right_scroller > .rc_moreinfo {
  width: calc(70vw + 2em + 9px);
}
body[data-graphics="minimal"] .disable-minimal {
  opacity: 0.25;
  pointer-events: none;
}
body[data-graphics="minimal"] .hide-minimal {
  display: none;
}
body[data-graphics="low"] .hide-low,
body[data-graphics="minimal"] .hide-low {
  display: none;
}
body[data-graphics="low"] .hide-medium,
body[data-graphics="medium"] .hide-medium,
body[data-graphics="minimal"] .hide-medium {
  display: none;
}
body[data-graphics="high"] .hide-high,
body[data-graphics="low"] .hide-high,
body[data-graphics="medium"] .hide-high,
body[data-graphics="minimal"] .hide-high {
  display: none;
}
#pixi {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 0;
  transform: translateZ(0);
  will-change: transform;
}
#pixi.hidden {
  display: none;
}
body.nobg:not(.ingame):not(.inzenith) #pixi {
  display: none;
}
body[data-graphics="minimal"]:not(.ingame):not(.inzenith) #pixi {
  display: none;
}
#pixi-fg {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10000000000000;
  transform: translateZ(0);
  will-change: transform;
  pointer-events: none;
}
body:not([data-graphics="ultra"]) #pixi-fg {
  display: none;
}
body:not(.electron) .electrononly {
  display: none !important;
}
body.electron .noelectron {
  display: none !important;
}
.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: 10;
  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);
  }
}
.shout.mission,
.shout.mission_free,
.shout.mission_league,
.shout.mission_versus {
  font-size: calc(40px * var(--r));
  -webkit-text-stroke: 0px transparent;
  text-stroke: 0px transparent;
  color: #fff;
  animation: 4s missionExpand ease-out;
  text-shadow: 0 0 calc(4px * var(--r)) #ffd200;
  background: linear-gradient(
    to right,
    transparent 0,
    #ffd20088 50%,
    transparent 100%
  );
  padding-top: calc(8px * var(--r));
  padding-bottom: 0;
  margin-top: calc(-8px * var(--r));
}
.shout.mission_free {
  text-shadow: 0 0 calc(4px * var(--r)) #00a8ff;
  background: linear-gradient(
    to right,
    transparent 0,
    #00a8ff88 50%,
    transparent 100%
  );
  animation: 2.5s missionExpand ease-out;
}
.shout.mission_versus {
  text-shadow: 0 0 calc(4px * var(--r)) #ff1200;
  background: linear-gradient(
    to right,
    transparent 0,
    #ff120088 50%,
    transparent 100%
  );
}
.shout.mission_league {
  text-shadow: 0 0 calc(4px * var(--r)) red;
  background: linear-gradient(
    to right,
    transparent 0,
    #ff000088 50%,
    transparent 100%
  );
}
@keyframes missionExpand {
  0% {
    opacity: 0;
    letter-spacing: calc(8px * var(--r));
    padding-top: calc(16px * var(--r));
    padding-bottom: calc(8px * var(--r));
  }
  10% {
    opacity: 1;
    letter-spacing: calc(2px * var(--r));
    padding-top: calc(8px * var(--r));
    padding-bottom: 0;
  }
  90% {
    opacity: 1;
    letter-spacing: 0;
    padding-top: calc(8px * var(--r));
    padding-bottom: 0;
  }
  100% {
    opacity: 0;
    letter-spacing: calc(8px * var(--r));
    padding-top: calc(16px * var(--r));
    padding-bottom: calc(8px * var(--r));
  }
}
#majorshouts .shout.rsg {
  position: fixed;
  left: calc(50% - 5em);
  top: unset;
  text-align: center;
  width: 10em;
  bottom: -2.25em;
  transform: translateY(-3em);
  color: #c49dff;
  font-family: HUN;
  font-size: 3.5em;
  filter: brightness(1) drop-shadow(0px -2px #a66ef0)
    drop-shadow(-2px 0px #a66ef0) drop-shadow(2px 0px #a66ef0)
    drop-shadow(0px 4px 8px #0004);
  transition:
    0.5s transform,
    0.5s filter;
  padding-top: 0.3em;
  padding-bottom: 0.3em;
  font-weight: 900;
  z-index: 10;
  opacity: 1;
  -webkit-text-stroke: unset !important;
  text-stroke: unset !important;
  text-shadow: none !important;
  animation: 2s rsgShoutExpand cubic-bezier(0.03, 0.5, 0.51, -0.24) forwards !important;
}
#majorshouts .shout.rsg::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, #4d3571 0, #36254f 100%);
  clip-path: polygon(0 100%, 10% 0, 90% 0, 100% 100%);
  z-index: -1;
}
@keyframes rsgShoutExpand {
  0% {
    transform: translateY(0);
    opacity: 0;
    filter: brightness(2) drop-shadow(0px -2px #a66ef0)
      drop-shadow(-2px 0px #a66ef0) drop-shadow(2px 0px #a66ef0)
      drop-shadow(0px 4px 8px #a66ef066);
  }
  5% {
    transform: translateY(-2.5em);
    opacity: 1;
    filter: brightness(1.25) drop-shadow(0px -2px #a66ef0)
      drop-shadow(-2px 0px #a66ef0) drop-shadow(2px 0px #a66ef0)
      drop-shadow(0px 4px 8px #a66ef066);
  }
  100% {
    transform: translateY(0);
    opacity: 0;
    filter: brightness(1) drop-shadow(0px -2px #a66ef0)
      drop-shadow(-2px 0px #a66ef0) drop-shadow(2px 0px #a66ef0)
      drop-shadow(0px 4px 8px #a66ef066);
  }
}
#preload {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background:
    bottom/300px 30px repeat-x url("/tetr-res/footer.png"),
    #000;
  z-index: 1000000;
  transition: 0.3s opacity;
}
#preload > #preload_header {
  position: fixed;
  left: 0;
  right: 0;
  height: 102px;
  background: #111;
  padding-left: 330px;
  padding-right: 16px;
  overflow: hidden;
}
#preload > #preload_header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 30px;
  bottom: 0;
  background: url("/tetr-res/header-overlay.png");
  pointer-events: none;
}
#preload > #preload_header > .preload_item {
  display: inline-block;
  font-family: HUN;
  padding: 0 1.5em;
  line-height: 90px;
  height: 100px;
  color: #fff;
  font-weight: 900;
  font-size: 1.25em;
  border-top: 2px solid #0000;
  cursor: pointer;
  text-decoration: none;
  transition:
    0.1s border-top,
    0.1s background-color;
  margin-right: 2px;
}
#preload > #preload_header > .preload_item:hover {
  background-color: #222;
  border-top: 2px solid #fff;
}
#preload > #preload_header > .preload_item:active {
  background-color: #555;
  border-top: 2px solid #fff;
  transition:
    50ms border-top,
    50ms background-color;
}
#preload > #preload_header > .preload_item.active {
  border-top: 2px solid #fff;
}
#preload > #preload_header > .preload_item.pi_ch:hover {
  background-color: #1a2414;
  border-top: 2px solid #5dcb21;
}
#preload > #preload_header > .preload_item.pi_ch:active {
  background-color: #5dcb21;
  border-top: 2px solid #fff;
}
#preload > #preload_header > .preload_item.pi_merch:hover {
  background-color: #2f0c14;
  border-top: 2px solid #ff3c59;
}
#preload > #preload_header > .preload_item.pi_merch:active {
  background-color: #ff3c59;
  border-top: 2px solid #fff;
}
#preload > #preload_header > .preload_item.pi_about:hover {
  background-color: #141724;
  border-top: 2px solid #7782b1;
}
#preload > #preload_header > .preload_item.pi_about:active {
  background-color: #7782b1;
  border-top: 2px solid #fff;
}
#preload > #preload_header > .preload_item_r {
  display: inline-block;
  font-family: HUN;
  float: right;
  padding: 0 0.25em;
  line-height: 90px;
  height: 100px;
  color: #fff;
  font-weight: 500;
  font-size: 2.5em;
  cursor: pointer;
  text-decoration: none;
  transition: 0.1s opacity;
  opacity: 0.2;
  margin-left: 2px;
}
#preload > #preload_header > .preload_item_r:hover {
  opacity: 1;
}
#preload > #tetrio_logo {
  position: fixed;
  left: 16px;
  top: 16px;
}
#preload #osk_logo {
  position: fixed;
  left: 32px;
  bottom: 32px;
  width: 80px;
}
#preload > #osk_text {
  position: fixed;
  left: 125px;
  bottom: 18px;
  color: #fff;
  font-family: HUN;
  font-size: 1.2em;
}
#preload > #osk_text > span {
  display: inline-block;
  transform: scale(2) translate(0, 10%);
  opacity: 0.3;
}
#preload > #preload_anim {
  position: fixed;
  width: 10px;
  height: 10px;
  background-color: #000;
  right: 22px;
  bottom: 22px;
  animation: 3s LoaderSpin ease-out infinite;
}
#preload > #preload_msgs {
  position: fixed;
  right: 32px;
  bottom: 70px;
  color: #888;
  font-family: HUN;
  font-size: 0.9em;
  text-align: right;
  pointer-events: none;
}
#preload > #preload_msgs > p {
  margin: 0;
  margin-top: 0.15em;
}
#preload > #version_name {
  position: fixed;
  top: 120px;
  left: 0.35em;
  margin: 0;
  color: #111;
  font-family: HUN;
  font-size: 4em;
}
@keyframes LoaderSpin {
  0% {
    box-shadow:
      -20px -20px #fff,
      -20px -10px #fff,
      -10px -20px #fff,
      -10px -10px #fff;
  }
  14% {
    box-shadow:
      -30px -20px #fff,
      -20px -10px #fff,
      -20px -20px #fff,
      -10px -10px #fff;
  }
  28.5% {
    box-shadow:
      -30px -10px #fff,
      -20px -10px #fff,
      -20px -20px #fff,
      -10px -20px #fff;
  }
  42.9% {
    box-shadow:
      -30px -10px #fff,
      -20px -10px #fff,
      -20px -20px #fff,
      -10px -10px #fff;
  }
  57.1% {
    box-shadow:
      -30px -10px #fff,
      -20px -10px #fff,
      -30px -20px #fff,
      -10px -10px #fff;
  }
  71.4% {
    box-shadow:
      -20px -10px #fff,
      -10px -10px #fff,
      -30px -10px #fff,
      -10px -20px #fff;
  }
  85.7% {
    box-shadow:
      -30px -10px #fff,
      -20px -10px #fff,
      -40px -10px #fff,
      -10px -10px #fff;
  }
  100% {
    box-shadow:
      -10px -20px #fff,
      -20px -10px #fff,
      -20px -20px #fff,
      -10px -10px #fff;
  }
}
#preload.ready > #preload_anim {
  opacity: 0;
  transition: 0.3s opacity;
}
#preload.hidden {
  opacity: 0;
  pointer-events: none;
}
#js_load_error {
  pointer-events: none;
  opacity: 0;
  animation: 0.2s 3s JSLoadErr forwards ease-out;
}
#js_load_error.handled {
  animation: none;
  display: none !important;
}
@keyframes JSLoadErr {
  from {
    opacity: 0;
    pointer-events: none;
  }
  to {
    opacity: 1;
    pointer-events: all;
  }
}
.oob_modal {
  position: fixed;
  left: 50%;
  top: 50%;
  background-color: #eee;
  color: #222;
  z-index: 10000000;
  transform: translate(-50%, -50%);
  max-height: calc(95vh - 2em);
  padding: 1em;
  border-radius: 3px;
  width: 30em;
  max-width: calc(95vw - 2em);
  font-family: HUN;
  box-shadow: 0 0 48px #fff2;
  transition:
    0.3s opacity,
    0.3s transform,
    0.3s filter;
}
.oob_modal.oob_login_wide {
  width: calc(728px - 2em);
}
.oob_modal.wide_modal {
  width: 60em;
}
.oob_modal.crash_modal {
  background-color: #a21d1d;
  color: #ffc2c2;
  box-shadow: 0 0 48px #a21d1d22;
}
.oob_modal.crash_modal.extra_shiny_crash {
  box-shadow: 0 0 64px #a21d1d;
}
.oob_modal.ban_modal {
  background-color: #ffd71b;
  color: #2e2602;
  box-shadow: 0 0 48px #ffd71b22;
}
.oob_modal.dark_modal {
  background-color: #222;
  color: #888;
  box-shadow: 0 0 48px #fff1;
  text-align: center;
  padding-bottom: 0.5em;
}
.oob_modal.patchnotes {
  background-color: #161a2a;
  color: #dee3fc;
  box-shadow: 0 0 48px #fff0;
}
.oob_modal.supporter_modal {
  background-color: #e6722e;
  color: #ffe7c2;
  box-shadow: 0 0 48px #e6722e22;
  width: 60em;
}
.oob_modal.vault_modal {
  background-color: #07081e;
  color: #9194c5;
  box-shadow: 0 0 48px #262b9122;
  width: 45em;
  font-family: "C";
}
.oob_modal.shudder {
  left: 50%;
  top: 50%;
  animation: shudder 0.1s linear infinite;
}
@keyframes shudder {
  0% {
    left: calc(50% + 0px);
    top: calc(50% + -1px);
  }
  12% {
    left: calc(50% + -1px);
    top: calc(50% + 3px);
  }
  25% {
    left: calc(50% + -2px);
    top: calc(50% + 0px);
  }
  37% {
    left: calc(50% + 2px);
    top: calc(50% + -2px);
  }
  50% {
    left: calc(50% + -1px);
    top: calc(50% + 0px);
  }
  62% {
    left: calc(50% + 0px);
    top: calc(50% + 1px);
  }
  75% {
    left: calc(50% + -2px);
    top: calc(50% + -2px);
  }
  87% {
    left: calc(50% + 2px);
    top: calc(50% + 2px);
  }
  100% {
    left: calc(50% + -1px);
    top: calc(50% + -3px);
  }
}
.oob_modal .dialog_long {
  max-height: calc(95vh - 10em);
  overflow: auto;
  padding-top: 1em;
  padding-right: 1em;
  padding-bottom: 1em;
}
.ingame .oob_modal {
  display: none;
}
.oob_modal.noop {
  display: none;
}
.oob_modal.busy {
  transform: translate(-50%, -50%) scale(0.95);
  pointer-events: none;
}
.oob_modal::before {
  content: "";
  position: absolute;
  left: -16px;
  top: -16px;
  right: -16px;
  bottom: -16px;
  background-color: #000c;
  border-radius: 3px;
  filter: blur(32px);
  opacity: 0;
  pointer-events: none;
  transition: 0.3s opacity;
}
.oob_modal.busy::before {
  opacity: 1;
}
.oob_modal.busy::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #000;
  left: calc(50% + 17.5px);
  top: calc(50% + 5px);
  filter: brightness(2);
  animation:
    1s FadeIn,
    3s LoaderSpin ease-out infinite;
  mix-blend-mode: lighten;
}
@keyframes FadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.oob_modal.hidden {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
  pointer-events: none;
}
.oob_modal hr {
  border: none;
  background-color: #aaa;
  height: 1px;
  margin: -1em;
  margin-top: 0.5em;
  margin-bottom: 0.75em;
}
.oob_modal h1 {
  margin: 0;
  font-size: 1.65em;
  font-weight: 500;
}
.oob_modal h2 {
  margin: 0;
  font-size: 2.5em;
  font-weight: 900;
}
.oob_modal p {
  margin: 0.2em 0;
  font-size: 1.1em;
  font-weight: 500;
}
.oob_modal p.modal_also {
  font-size: 1em;
  color: #666;
}
.oob_modal.crash_modal p.modal_also {
  font-size: 1em;
  color: #e67d7d;
}
.oob_modal.ban_modal p.modal_also {
  font-size: 1em;
  color: #605007;
}
.oob_modal p.modal_also a {
  color: #1e48ff;
  text-decoration: none;
}
.oob_modal p.modal_warning,
.oob_modal p.modal_warning_stern {
  font-size: 1em;
  color: #f22;
  background-color: #faa;
  border-radius: 3px;
  padding: 0.5em;
  margin: 0 -0.5em;
}
.oob_modal p.modal_warning_stern {
  color: #fff;
  background-color: #f22;
}
.oob_modal p.modal_warning_stern.hidden {
  display: none;
}
.oob_modal.ban_modal p.modal_warning {
  color: #000a;
  background-color: #0003;
}
.oob_modal.ban_modal p.modal_warning a {
  color: #000;
}
.oob_modal.crash_modal p.modal_warning {
  color: #faa;
  background-color: #f22;
}
.oob_modal.crash_modal p.modal_warning a {
  color: #fff;
}
.oob_modal.crash_modal p.modal_also a {
  color: #fff;
  text-decoration: none;
}
.oob_modal.crash_modal p.modal_warning_stern {
  color: #000;
  background-color: #ffd71b;
}
.oob_modal .oob_button_full {
  margin: -0.5em;
  font-size: 2em;
  margin-top: 0.2em;
  padding: 0.1em 0.5em;
  padding-top: 0.25em;
  text-align: center;
  background-color: #ccc;
  border-radius: 0 0 3px 3px;
  cursor: pointer;
  transition: 0.3s background-color;
}
.oob_modal .oob_button_full:hover {
  background-color: #aaa;
}
.oob_modal .oob_button_full span {
  font-weight: 900;
}
.oob_modal .oob_button_holder {
  margin: -1em;
  margin-top: 0.4em;
  padding: 0.5em 0.5em;
  text-align: center;
  background-color: #ccc;
  border-radius: 0 0 3px 3px;
}
.oob_modal.crash_modal .oob_button_holder {
  background-color: #7d1515;
}
.oob_modal.supporter_modal .oob_button_holder {
  background-color: #3c2111;
}
.oob_modal.vault_modal .oob_button_holder {
  background-color: #0d0f32;
}
.oob_modal.ban_modal .oob_button_holder {
  background-color: #ae9418;
}
.oob_modal.patchnotes .oob_button_holder {
  background-color: #282f49;
}
.oob_modal .oob_button {
  font-size: 1.5em;
  padding: 0.1em 0.5em;
  padding-top: 0.25em;
  text-align: center;
  background-color: #aaa;
  border-radius: 3px;
  cursor: pointer;
  transition:
    0.3s background-color,
    0.3s color;
}
.oob_modal.crash_modal .oob_button {
  background-color: #b62c2c;
}
.oob_modal.supporter_modal .oob_button {
  background-color: #56361e;
}
.oob_modal.vault_modal .oob_button {
  background-color: #1f2255;
  padding-bottom: 0.3em;
}
.oob_modal.ban_modal .oob_button {
  background-color: #816d0f;
}
.oob_modal.patchnotes .oob_button {
  background-color: #3c4569;
}
.oob_modal .oob_button:hover {
  background-color: #888;
}
.oob_modal.crash_modal .oob_button:hover {
  background-color: #6d1212;
}
.oob_modal.supporter_modal .oob_button:hover {
  background-color: #8b4c1e;
}
.oob_modal.vault_modal .oob_button:hover {
  background-color: #353876;
}
.oob_modal.ban_modal .oob_button:hover {
  background-color: #594b08;
}
.oob_modal.patchnotes .oob_button:hover {
  background-color: #7782b1;
}
.oob_modal .oob_button.pri {
  background-color: #1e48ff;
  color: #cbd5ff;
}
.oob_modal.crash_modal .oob_button.pri {
  background-color: #f7bcbc;
  color: #6d1212;
}
.oob_modal.supporter_modal .oob_button.pri {
  background-color: #f9f0c5;
  color: #e6722e;
}
.oob_modal.vault_modal .oob_button.pri {
  background-color: #595dc5;
  color: #fff;
}
.oob_modal.ban_modal .oob_button.pri {
  background-color: #f0e3a8;
  color: #7c6b1a;
}
.oob_modal.patchnotes .oob_button.pri {
  background-color: #7782b1;
  color: #fff;
}
.oob_modal .oob_button.pri:hover {
  background-color: #4669ff;
}
.oob_modal.crash_modal .oob_button.pri:hover {
  background-color: #fff;
}
.oob_modal.supporter_modal .oob_button.pri:hover {
  background-color: #fff;
}
.oob_modal.vault_modal .oob_button.pri:hover {
  background-color: #fff;
  color: #000;
}
.oob_modal.ban_modal .oob_button.pri:hover {
  background-color: #fff;
}
.oob_modal.patchnotes .oob_button.pri:hover {
  background-color: #fff;
  color: #000;
}
.oob_modal .oob_button.sec {
  background-color: #ff6b49;
  color: #ffe1da;
}
.oob_modal .oob_button.sec:hover {
  background-color: #ff886c;
}
.oob_modal .inline_self {
  font-weight: 900;
}
.oob_modal .oob_button span {
  font-weight: 900;
}
.oob_modal .oob_button.layercake_button {
  width: calc(100% - 1em);
  flex-shrink: 0;
  margin: 0;
  margin-bottom: 0.2em;
  font-weight: 900;
  text-align: left;
}
.oob_modal .oob_button.layercake_button span {
  font-weight: 500;
  display: block;
  font-size: 0.65em;
}
.achievements_modal {
  width: 40em;
  background-color: #243e25;
  border-top: 3px solid #45794f;
  border-left: 3px solid #3d6242;
  border-bottom: 3px solid #162419;
  border-right: 3px solid #1d3220;
  box-shadow: 0 0 48px #0002;
}
.achievements_modal .oob_button_holder {
  display: none;
}
.achievements_modal .achtop {
  position: relative;
  background: #0008;
  margin: -1rem;
  margin-top: calc(-1rem - 3px);
  margin-bottom: 1rem;
  border-radius: 3px 3px 0 0;
  padding: 1rem;
  padding-left: 15rem;
  color: #fff;
}
.achievements_modal .achtop .achievement_icon {
  position: absolute;
  top: -4rem;
  left: 2rem;
  --size: 12rem;
}
.achievements_modal .achlb {
  padding-top: 0;
  padding-bottom: 0;
}
.achievements_modal .achlb .achlb_entry {
  position: relative;
  background-color: #0004;
  border-radius: 3px;
  margin-right: -1rem;
  height: 3rem;
  color: #a1dba6;
  margin-top: 3px;
}
.achievements_modal .achlb .achlb_entry.ach_userable {
  cursor: pointer;
  transition: 0.3s filter;
}
.achievements_modal .achlb .achlb_entry.ach_userable:hover {
  filter: brightness(1.2);
}
.achievements_modal .achlb .achlb_entry .achlb_place {
  color: #45794f;
  position: absolute;
  top: 0.65rem;
  left: 0.5rem;
  font-weight: 900;
  font-size: 2rem;
}
.achievements_modal .achlb .achlb_entry .achlb_owner {
  color: #a1dba6;
  position: absolute;
  top: 0.4rem;
  left: 3.25rem;
  font-weight: 900;
  font-size: 1.5rem;
}
.achievements_modal .achlb .achlb_entry .achlb_owner img {
  margin-left: 0.25em;
  height: 0.75em;
  vertical-align: text-top;
}
.achievements_modal .achlb .achlb_entry .achlb_owner .flag {
  height: 0.5em;
  vertical-align: middle;
}
.achievements_modal .achlb .achlb_entry .achlb_owner b {
  color: #a1dba6;
}
.achievements_modal .achlb .achlb_entry .achlb_owner b.ach_userable {
  transition: 0.2s color;
  cursor: pointer;
}
.achievements_modal .achlb .achlb_entry .achlb_owner b.ach_userable:hover {
  color: #fff;
}
.achievements_modal .achlb .achlb_entry .achlb_owner span {
  color: #45794f;
  font-size: 1.2rem;
}
.achievements_modal .achlb .achlb_entry .achlb_time {
  color: #45794f;
  position: absolute;
  top: 1.95rem;
  left: 3.25rem;
  font-size: 0.9rem;
}
.achievements_modal .achlb .achlb_entry .achlb_time b {
  color: #a1dba6;
}
.achievements_modal .achlb .achlb_entry .achlb_time b.ach_userable {
  transition: 0.2s color;
}
.achievements_modal .achlb .achlb_entry .achlb_time b.ach_userable:hover {
  color: #fff;
}
.achievements_modal .achlb .achlb_entry .achlb_value {
  color: #a1dba6;
  position: absolute;
  top: 0.75rem;
  right: 0.5rem;
  font-weight: 900;
  font-size: 2rem;
}
.achievements_modal .achlb .achlb_entry .achlb_value > span {
  font-size: 1.4rem;
}
.achievements_modal .achlb .achlb_empty {
  background-color: #0002;
  border-radius: 3px;
  margin-right: -1rem;
  padding: 1rem;
  color: #45794f;
  margin-top: 3px;
  text-align: center;
  padding-top: 1.2rem;
}
.oob_modal.supporter_modal center {
  margin: 0 -3em;
  padding: 0.5em 3em;
  background-image: url("/tetr-res/supporter-bg.png");
  background-size: cover;
  background-position: center;
  color: #fff;
  clip-path: polygon(1.5em 0, 100% 0, calc(100% - 1.5em) 100%, 0 100%);
  text-shadow: 0 2px 4px #000a;
  margin-bottom: 0.25em;
}
.oob_modal.supporter_modal .supporter_bumper {
  margin: 0 -1.09em;
  padding: 0.8em 3em;
  background: repeating-linear-gradient(
    -45deg,
    #7d401c 0,
    #7d401c 10px,
    #733a19 10px,
    #733a19 20px
  );
  color: #fff;
  font-size: 0.92em;
  font-family: "C";
  text-align: justify;
  margin-bottom: 0.8em;
}
.oob_modal.supporter_modal .supporter_bumper .supporter_bumper_footer {
  display: block;
  color: #dca382;
  text-align: right;
}
.oob_modal.supporter_modal .dialog_long {
  margin: -0.35em -0.91em;
  padding: 0.35em 1em;
}
.oob_modal.supporter_modal .supporter-perk {
  margin-top: 0.35em;
  margin-bottom: 0.35em;
  padding-left: 2.2em;
  position: relative;
  min-height: 1.03em;
  padding-top: 0.56em;
}
.oob_modal.supporter_modal .supporter-perk img {
  position: absolute;
  left: 0;
  top: 0;
  width: 1.7em;
}
.oob_modal.supporter_modal .supporter-perk span {
  color: #fff;
  font-weight: 900;
}
.oob_modal .supporter_payment_block {
  background-color: #2a180d;
  box-shadow: 0 8px #2a180d;
  font-family: "C";
  font-size: 0.92em;
  color: #f3c7ac;
  margin: 0 -1.09em;
  padding: 0.8em 3em;
  margin-top: 1em;
  margin-bottom: -0.37em;
}
.oob_modal .supporter_payment_block p {
  font-size: 1em;
}
.oob_modal .supporter_payment_block .supporter_payment_also {
  font-size: 0.8em;
  color: #785b4a;
}
.oob_modal .supporter_payment_block #supporter_payment_block_recipient {
  margin-top: 0.2em;
  margin-left: 1.5em;
  width: calc(100% - 1.5em);
}
.oob_modal
  .supporter_payment_block
  #supporter_payment_block_gift:not(.checked)
  + #supporter_payment_block_recipient {
  display: none;
}
.oob_modal .supporter_payment_block .supporter_payment_price {
  display: inline-block;
  font-weight: 900;
  color: #fff;
  font-size: 2em;
}
.oob_modal .supporter_payment_block .supporter_payment_price div {
  font-weight: 500;
  color: #f3c7ac;
  font-size: 0.6em;
}
.oob_modal .supporter_payment_block .supporter_payment_price div span {
  color: #785b4a;
}
.oob_modal
  .supporter_payment_block
  .supporter_payment_price
  span.slashed_price {
  color: #785b4a;
  font-weight: 500;
  display: inline-block;
  position: relative;
}
.oob_modal
  .supporter_payment_block
  .supporter_payment_price
  span.slashed_price::after {
  content: "";
  position: absolute;
  background-color: #f3c7ac;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  clip-path: polygon(0 70%, 100% 20%, 100% 30%, 0 80%);
}
.oob_modal .supporter_payment_block .supporter_payment_price span.offer {
  color: #f3c7ac;
  display: inline-block;
  font-size: 0.4em;
  border: 1px solid #967460;
  border-radius: 3px;
  padding: 0.2em 0.5em;
  vertical-align: 40%;
  margin-left: 0.5em;
}
.oob_modal
  .supporter_payment_block
  .supporter_payment_price
  span.offer.special {
  color: #2a180d;
  display: inline-block;
  font-size: 0.4em;
  border: 1px solid #f3c7ac;
  background-color: #f3c7ac;
  box-shadow: 0 0 16px #f3c7ac44;
  border-radius: 3px;
  padding: 0.2em 0.5em;
  vertical-align: 40%;
  margin-left: 0.5em;
  animation: 1s SpecialOfferBlink ease-in-out alternate infinite;
}
@keyframes SpecialOfferBlink {
  from {
    border: 1px solid #f3c7ac;
    background-color: #f3c7ac;
    box-shadow: 0 0 16px #f3c7ac44;
  }
  to {
    border: 1px solid #fff;
    background-color: #fff;
    box-shadow: 0 0 16px #fff4;
  }
}
.oob_modal .supporter_payment_block .supporter_payment_custom {
  display: inline-block;
  float: right;
  font-weight: 500;
  color: #f3c7ac;
  cursor: pointer;
}
.oob_modal .supporter_payment_block .supporter_payment_custom:hover {
  color: #fff;
}
.oob_modal.vault_modal h1 {
  font-size: 2em;
  font-weight: 900;
  position: relative;
  margin-bottom: 0.3em;
  color: #fff;
}
.oob_modal.vault_modal h1::after {
  content: "";
  position: absolute;
  left: -0.02em;
  top: 60%;
  width: 100%;
  height: 1.4em;
  pointer-events: none;
  background: url("/tetr-res/vault.png");
  background-size: contain;
  background-position: left;
  background-repeat: no-repeat;
}
.oob_modal.vault_modal .dialog_long {
  padding-right: 0;
}
.oob_modal.vault_modal table {
  font-size: 0.9em;
  border-spacing: 0.25em;
  width: 100%;
}
.oob_modal.vault_modal table td {
  border-top: 1px solid #1c1e4d;
  padding: 0.5em;
}
.oob_modal.vault_modal table td:last-child {
  color: #fff;
  font-weight: 900;
  text-align: right;
}
.oob_modal.vault_modal .vault_total {
  border-top: 2px solid #494c8e;
  font-size: 1.5em;
  margin: 0.12em;
  padding: 0.25em;
  margin-top: -0.05em;
  color: #fff;
  font-weight: 900;
  text-align: right;
}
.oob_modal.vault_modal .vault_total span {
  font-size: 0.5em;
  color: #9194c5;
  font-weight: 500;
  display: block;
  margin: 0;
  margin-top: 0.2em;
  margin-bottom: -0.3em;
}
.oob_modal.vault_modal .vault_about {
  text-align: left;
  font-size: 0.75em;
  margin-bottom: -1em;
  margin-right: 12.5em;
  margin-top: -3.8em;
  padding-left: 0.9em;
}
.oob_modal.vault_modal .vault_about b {
  color: #fff;
}
.oob_modal.vault_modal .vault_about img {
  height: 26px;
  margin-top: 0.2em;
}
.oob_modal.vault_modal .xsolla_pay_button {
  position: relative;
}
.oob_modal.vault_modal .xsolla_pay_button::before {
  content: "";
  position: absolute;
  left: 0.35em;
  top: 0.25em;
  bottom: 0.25em;
  width: 2em;
  pointer-events: none;
  background: url("/tetr-res/xsolla_alpha.png");
  background-size: contain;
  background-position: left;
  background-repeat: no-repeat;
  filter: invert(0);
  transition: 0.3s filter;
}
.oob_modal.vault_modal .xsolla_pay_button:hover::before {
  filter: invert(1);
}
.oob_modal.vault_modal .xsolla_mark {
  position: absolute;
  right: 1.35em;
  top: 1.5em;
  background-color: #0008;
  color: #6f72a5;
  font-size: 0.8em;
  display: block;
  height: 3em;
  padding: 0.4em 0.75em;
  box-sizing: border-box;
  padding-right: 3.5em;
  background: url("/tetr-res/xsolla.png");
  background-size: contain;
  background-position: right;
  background-repeat: no-repeat;
  width: 18em;
  text-align: right;
}
.oob_button.oob_button_arrow_right {
  margin-right: -0.66em !important;
  clip-path: polygon(
    0% 0%,
    calc(100% - 0.6em) 0%,
    100% 50%,
    calc(100% - 0.6em) 100%,
    0 100%
  );
  padding-right: 1.16em;
}
.oob_button_arrow_right_fly {
  pointer-events: none;
}
.oob_button_arrow_right_fly .oob_button.oob_button_arrow_right {
  opacity: 0;
  animation: 0.3s oob_button_arrow_right_fly forwards
    cubic-bezier(0.62, -0.2, 0.88, 0.34);
}
@keyframes oob_button_arrow_right_fly {
  0% {
    transform: perspective(1600px) rotate3d(1, 0, 0, 0deg) translateX(0);
    opacity: 1;
  }
  99% {
    transform: perspective(1600px) rotate3d(1, 0, 0, 1600deg) translateX(100vw);
    opacity: 1;
  }
  100% {
    transform: perspective(1600px) rotate3d(1, 0, 0, 1600deg) translateX(100vw);
    opacity: 0;
  }
}
.oob_modal .banreason {
  padding: 0.5em;
  font-size: 1.3em;
  background-color: #000;
  border-radius: 3px;
  color: #ffd71b;
  padding-bottom: 0.25em;
  max-height: 5em;
  overflow-y: auto;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.oob_modal.crash_modal .banreason {
  color: #f22;
}
.oob_modal .banreason .context {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  font-family: PFW;
  font-size: 0.7em;
  border-top: 1px dotted #ffd71b;
  margin-top: 0.5em;
  margin-left: -0.6em;
  margin-right: -0.6em;
  padding-top: 0.5em;
  padding-left: 0.5em;
  padding-right: 0.5em;
}
.oob_modal.crash_modal .banreason .context {
  border-top-color: #f22;
}
.oob_modal.patchnotes .dialog_long {
  font-family: "C";
}
.oob_modal.patchnotes .dialog_long h1 {
  font-size: 3em;
  margin: 0;
  margin-top: -0.2em;
  font-weight: 900;
}
.oob_modal.patchnotes .dialog_long h6 {
  font-size: 0.9em;
  margin: 0;
  font-weight: 500;
  opacity: 0.5;
  margin-bottom: 1em;
}
.oob_modal.patchnotes .dialog_long h2 {
  font-size: 1.25em;
  margin: 0;
  margin-top: 1em;
  margin-bottom: 0.15em;
  font-weight: 900;
  position: relative;
  z-index: 0;
}
.oob_modal.patchnotes .dialog_long h2:first-of-type {
  margin-top: 0;
}
.oob_modal.patchnotes .dialog_long h2::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: calc(50% - 0.05em);
  right: 0;
  bottom: calc(50% - 0.05em);
  background-color: currentColor;
  pointer-events: none;
  z-index: -2;
}
.oob_modal.patchnotes .dialog_long h2::after {
  content: attr(data-content);
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  padding-right: 0.5em;
  bottom: 0;
  color: transparent;
  pointer-events: none;
  background-color: #161a2a;
  z-index: -1;
}
.oob_modal.patchnotes .dialog_long p {
  font-size: 0.85em;
  margin: 0;
  margin-bottom: 0.25em;
  padding-left: 1em;
}
.dlf {
  text-align: center;
  margin-top: 1em !important;
  padding-top: 1em !important;
  border-top: 1px solid #fff2;
}
.lna {
  color: #7782b1;
  text-decoration: underline dotted;
}
.cnfp {
  font-family: "C";
}
.hnfp {
  font-family: HUN;
}
.tetra_modal {
  width: 50em;
  background-color: #243e25;
  border-top: 3px solid #45794f;
  border-left: 3px solid #3d6242;
  border-bottom: 3px solid #162419;
  border-right: 3px solid #1d3220;
  box-shadow: 0 0 48px #0002;
}
.tetra_modal_close {
  display: inline-block;
  position: absolute;
  top: 0.17em;
  right: 0;
  font-size: 1.5em;
  color: #45794f;
  padding: 0.55em 0.67em;
  padding-bottom: 0.3em;
  cursor: pointer;
  border-radius: 3px;
  transition: 0.3s color;
}
.tetra_modal_close:hover {
  color: #a1dba6;
}
.tetra_modal.has_banner .tetra_modal_close {
  color: #fff6;
  text-shadow: 0 2px 4px #0008;
}
.tetra_modal.has_banner .tetra_modal_close:hover {
  color: #fff;
}
.tetra_modal > .avatar {
  position: absolute;
  left: 1em;
  top: -1em;
  height: 5.5em;
  box-shadow: 0 2px 4px #0008;
}
.tetra_modal > .avatar + h2 {
  padding-left: 2.4em;
}
.tetra_modal > .avatar + h2 + h3 {
  padding-left: 7.6em;
}
.tetra_modal > h1,
.tetra_modal > h2,
.tetra_modal > h3 {
  color: #a1dba6;
}
.tetra_modal > p {
  color: #b1edb6;
}
.tetra_modal.has_banner > h2,
.tetra_modal.has_banner > h3 {
  color: #fff;
  text-shadow: 0 2px 4px #0008;
}
.tetra_modal > h2 img {
  height: 0.78em;
  margin-left: 0.15em;
}
.tetra_modal > h3 {
  font-size: 0.8em;
  font-weight: 500;
  margin: 0;
  margin-bottom: 0.25em;
}
.tetra_modal > h3 img {
  height: 1em;
  vertical-align: -10%;
  margin-top: -1em;
  margin-right: 0.25em;
}
.tetra_modal.has_banner > h3 img {
  filter: drop-shadow(0 2px 4px #0006);
}
.tetra_modal > h2 > .flag {
  height: 0.5em;
  vertical-align: middle;
}
.tetra_modal_banner {
  position: absolute;
  z-index: -101;
  left: -3px;
  top: -3px;
  width: calc(100% + 6px);
  object-fit: cover;
  height: 6em;
  pointer-events: none;
  border-radius: 3px 3px 0 0;
}
.tetra_modal_banner_sep {
  position: absolute;
  z-index: -100;
  left: -3px;
  top: calc(6em - 17px);
  width: calc(100% + 6px);
  height: 15px;
  pointer-events: none;
  background: url("/tetr-res/banner-overlay.png");
  background-repeat: repeat-x;
  background-position-x: -2px;
}
.tetra_modal_banner_sep::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3px;
  height: 50px;
  background: linear-gradient(to bottom, #0000 0, #3d6242 100%);
}
.tetra_modal_banner_sep::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 3px;
  height: 50px;
  background: linear-gradient(to bottom, #0000 0, #1d3220 100%);
}
.tetra_modal_records {
  text-align: center;
  margin: -0.25em;
  margin-top: 0.1em;
  justify-content: center;
}
.tetra_modal_record {
  display: inline-block;
  padding: 0.25em;
  margin: 0.25em;
  border-radius: 3px;
  background-color: #0002;
  text-align: center;
  position: relative;
  max-width: 25rem;
  min-width: 12rem;
}
.tetra_modal_record:last-child {
  margin: 0.25em;
}
.tetra_modal_record_header {
  display: flex;
  margin: -0.25em;
  margin-bottom: -0.1em;
}
.tetra_modal_record_header > h6 {
  flex-shrink: 0;
  flex-grow: 1;
  color: #345a36;
  font-size: 1em;
  margin: 0;
  padding: 0.25em;
  text-align: left;
}
.tetra_modal_record > h5 {
  color: #b3f4b6;
  margin: 0;
  font-size: 2em;
  text-shadow:
    0 2px #90c397,
    0 0 16px #fff4;
  margin: 0.15em;
  margin-bottom: 0;
}
.tetra_modal_record > h5 > .ms {
  font-size: 0.75em;
}
.tetra_modal_record > h5 > .unit {
  font-size: 0.5em;
  margin-left: 0.2em;
  color: #90c397;
}
.tetra_modal_record > h5.revolvedscore {
  color: #7aa680;
  text-shadow:
    0 2px #345a36,
    0 0 16px #fff1;
}
.tetra_modal_record > h5.revolvedscore > .unit {
  color: #5f8163;
}
.tetra_modal_record > h3 {
  color: #679c6a;
  font-size: 0.85em;
  margin: 0.15em;
  border-top: 1px solid #345a36;
  padding-top: 0.5em;
  margin-bottom: 0;
}
.tetra_modal_record > h3 > span {
  color: #b3f4b6;
}
.tetra_modal_record_league img {
  height: 1.1em;
  vertical-align: -20%;
  margin-top: -1em;
}
.standingset {
  flex-shrink: 0;
  flex-grow: 0;
}
.standingset_local {
  display: inline-block;
  padding: 0.2rem 0;
  padding-bottom: 0;
  font-size: 0.9rem;
  color: #345a36;
  padding-left: 1rem;
}
.standingset_local span {
  color: #679c6a;
  font-weight: 900;
}
.standingset_local .flag {
  height: 0.7rem;
  vertical-align: 0;
  margin: unset;
  mix-blend-mode: overlay;
}
.standingset_local .flag:hover {
  mix-blend-mode: normal;
}
.standingset_global {
  display: inline-block;
  padding: 0.2rem 0.3rem;
  padding-bottom: 0;
  padding-left: 0.7rem;
  font-size: 0.9rem;
  color: #679c6a;
  background-color: #345a36;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0.5rem 100%);
  border-radius: 0 3px 0 0;
}
.standingset_global span {
  color: #b3f4b6;
  font-weight: 900;
}
.standingset_global[data-digits="2"] {
  background: linear-gradient(
    to bottom,
    #b2bad0 0,
    #a3abc1 50%,
    #b8c3de 50%,
    #d5def4 100%
  );
  color: #3f4452;
}
.standingset_global[data-digits="2"] span {
  color: #0c0d11;
}
.standingset_global[data-digits="1"] {
  background: linear-gradient(
    to bottom,
    #f7ca52 0,
    #ddb035 50%,
    #eace79 50%,
    #f3d176 100%
  );
  color: #5a3c1f;
}
.standingset_global[data-digits="1"] span {
  color: #161008;
}
.standingset_global.t1 {
  background: linear-gradient(
    to bottom,
    #ce52f7 0,
    #cb35dd 50%,
    #d979ea 50%,
    #e776f3 100%
  );
  color: #4b1f5a;
}
.standingset_global.t1 span {
  color: #130816;
}
.tetra_tag_holder {
  padding: 0.2em 0;
  padding-bottom: 0.3em;
  padding-top: 0.4em;
}
.tetra_modal.has_banner .tetra_tag_holder {
  margin-top: 22px;
}
.tetra_tag_holder .leveltag {
  font-size: 1.25em;
  margin-right: 1rem;
}
.tetra_tag_holder .mod_badge {
  height: 1.9em;
  margin: 0;
  vertical-align: middle;
  margin-right: 0.25em;
  margin-left: -0.1em;
}
.tetra_tag_holder .supporter_badge {
  height: 1.9em;
  margin: 0;
  vertical-align: middle;
  float: right;
}
.tetra_tag_record {
  font-size: 1.25em;
  display: inline-block;
  padding: 0.1em 0.5em;
  background-color: #0002;
  color: #345a36;
  float: right;
  border-radius: 3px;
  padding-top: 0.3em;
  margin-left: 0.2em;
}
.tetra_tag_record span {
  color: #b3f4b6;
}
.tetra_tag_gametime {
  font-size: 1.25em;
  display: inline-block;
  padding: 0.1em 0.5em;
  background-color: #0003;
  color: #b3f4b6;
  float: right;
  border-radius: 3px;
  padding-top: 0.3em;
  margin-left: 0.2em;
}
.tetra_tag_gametime span {
  color: #345a36;
  font-size: 0.6em;
  font-weight: 900;
}
.tetra_tag_social {
  font-size: 1.55em;
  display: inline-block;
  padding: 0 0.27em;
  background-color: #0002;
  color: #679c6a;
  float: right;
  border-radius: 3px;
  padding-top: 0.2em;
  margin-left: 0.16em;
  text-decoration: none;
  height: 1em;
  transition:
    0.3s background-color,
    0.3s color;
}
.tetra_tag_social:hover {
  background-color: #0004;
  color: #b3f4b6;
}
.achievement.tetra_featured_achievement {
  position: relative;
  display: inline-block;
  width: 3.2rem;
  height: 0;
  margin-right: 0;
  top: -2.05rem;
  isolation: isolate;
}
.achievement.tetra_featured_achievement .achievement_icon {
  top: 0;
  left: 0;
  --size: 3.2rem;
  z-index: 10;
}
.achievement.tetra_featured_achievement .achievement_info {
  position: absolute;
  background: #000d;
  width: 25rem;
  border-radius: 3px;
  box-shadow: 0 3px 6px #0008;
  padding: 0.5rem;
  top: -0.5rem;
  left: -0.5rem;
  opacity: 0;
  pointer-events: none;
  color: #fff;
  transition: 0.2s opacity;
}
.achievement.tetra_featured_achievement:hover {
  z-index: 100;
}
.achievement.tetra_featured_achievement:hover .achievement_info {
  opacity: 1;
}
.achievement.tetra_featured_achievement
  .achievement_info
  .achievement_info_name {
  font-size: 0.9rem;
  padding-left: 3.8rem;
  margin-top: 0.2rem;
  margin-bottom: -0.2rem;
}
.achievement.tetra_featured_achievement
  .achievement_info
  .achievement_info_value {
  font-size: 1.4rem;
  padding-left: 3.8rem;
}
.achievement.tetra_featured_achievement
  .achievement_info
  .achievement_info_extra {
  font-size: 0.8rem;
  padding-left: 3.8rem;
}
.achievement.tetra_featured_achievement
  .achievement_info
  .achievement_info_object {
  font-size: 0.8rem;
  padding-left: 3.8rem;
}
.achievement.tetra_featured_achievement
  .achievement_info
  .achievement_info_desc {
  font-size: 0.8rem;
  padding-left: 3.8rem;
  margin-top: 0;
}
.achievement.tetra_featured_achievement
  .achievement_info
  .achievement_info_rank {
  font-size: 0.8rem;
}
.tetra_badstanding {
  margin: 0.5em -3em;
  padding: 0.7em 3.1em;
  padding-bottom: 0.2em;
  border-top: 3px solid #f81c1c;
  border-bottom: 3px solid #f81c1c;
  background: repeating-linear-gradient(
    -45deg,
    #960e0e,
    #960e0e 10px,
    #750a0a 10px,
    #750a0a 20px
  );
  text-align: center;
  font-weight: 900;
  color: #fff;
  clip-path: polygon(
    0% 50%,
    1em 0%,
    calc(100% - 1em) 0%,
    100% 50%,
    calc(100% - 1em) 100%,
    1em 100%
  );
}
.tetra_badstanding h1 {
  font-size: 1.5em;
  margin: 0;
}
.tetra_badstanding p {
  font-size: 1.1em;
  margin: 0;
  color: #ffd5d5;
}
.tetra_badge_holder {
  margin: 0.25em -1em;
  padding: 0.25em 1.1em;
  padding-bottom: 0;
  text-align: left;
  background-color: #0002;
}
.tetra_badge {
  height: 2em;
  margin: 0;
  margin-right: 0.25em;
  transition: filter 0.2s;
}
.tetra_badge:hover {
  filter: brightness(1.35);
}
.tetra_badge_group {
  display: inline-block;
  position: relative;
  height: 2em;
  transform: translateX(0);
  transition: 0.3s transform;
}
.tetra_badge_group::before {
  content: "";
  display: block;
  position: absolute;
  left: -0.5em;
  top: -0.5em;
  bottom: -0.5em;
  width: calc(100% + 0.75em);
  background-color: #000c;
  opacity: 0;
  pointer-events: none;
  border-radius: 6px;
  transition:
    0.3s opacity,
    0.3s width;
  z-index: 0;
}
.tetra_badge_group:hover {
  transform: translateX(calc((var(--c) - 1) * -0.6em));
  z-index: 1;
}
.tetra_badge_group:hover::before {
  opacity: 1;
  width: calc(100% + 0.75em + ((var(--c) - 1) * 1.2em));
}
.tetra_badge_group .tetra_badge {
  position: relative;
  z-index: var(--i);
  transition:
    transform 0.3s,
    filter 0.2s;
}
.tetra_badge_group .tetra_badge:not(:first-child) {
  margin-left: -1.2em;
}
.tetra_badge_group:hover .tetra_badge:not(:first-child) {
  transform: translateX(calc(var(--i) * 1.2em));
}
.tetra_badge_group:not(:hover) .tetra_badge:not(:last-child) {
  filter: brightness(0.6);
}
.tetra_distinguishment {
  margin: 0.5em calc(-1em - 3px);
  padding: 0;
  background: #000;
  text-align: center;
  font-weight: 900;
  color: #fff;
}
.tetra_distinguishment_staff {
  margin: 0.5em calc(-2.5em - 3px);
  --def-bg-back: linear-gradient(170deg, #111, #333);
  --def-bg-front: linear-gradient(
    to bottom,
    #666 0px,
    #666 5px,
    #fff 5px,
    #fff 7px,
    #0000 7px,
    #0000 calc(100% - 7px),
    #fff calc(100% - 7px),
    #fff calc(100% - 5px),
    #666 calc(100% - 5px),
    #666 100%
  );
  background: var(--def-bg-front), var(--def-bg-back);
  padding: 1.2em;
  padding-bottom: 1em;
  position: relative;
}
.tetra_distinguishment_staff::before {
  content: "";
  background: linear-gradient(to bottom, #222 0, #444 100%);
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 1.5em;
  clip-path: polygon(
    1.5em 0,
    1.5em 100%,
    0 0,
    100% 0,
    calc(100% - 1.5em) 100%,
    calc(100% - 1.5em) 0
  );
  pointer-events: none;
}
.tetra_distinguishment_staff::after {
  content: "";
  background: red;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -1.5em;
  clip-path: polygon(
    -1em -1em,
    calc(100% + 1em) -1em,
    100% calc(100% - 1.5em),
    calc(100% - 1.5em) 100%,
    calc(100% - 1.5em) calc(100% - 1.5em),
    1.5em calc(100% - 1.5em),
    1.5em 100%,
    0 calc(100% - 1.5em)
  );
  mix-blend-mode: multiply;
  pointer-events: none;
}
.tetra_distinguishment_staff h1 {
  font-size: 1.3em;
  font-weight: 900;
  margin: 0;
}
.tetra_distinguishment_staff p {
  font-size: 0.7em;
  font-weight: 500;
  margin: 0;
  color: #ddd;
}
.tetra_distinguishment_staff h1 img {
  height: 0.75em;
}
.tetra_distinguishment_staff p::after,
.tetra_distinguishment_staff p::before {
  content: "";
  background: repeating-linear-gradient(
    -45deg,
    #fff 0,
    #fff 8px,
    #0000 8px,
    #0000 16px
  );
  opacity: 0.2;
  position: absolute;
  top: 6px;
  left: 0;
  bottom: 6px;
  pointer-events: none;
}
.tetra_distinguishment_staff p::after {
  left: unset;
  right: 0;
}
.tetra_distinguishment_staff[data-detail="administrator"] p::after,
.tetra_distinguishment_staff[data-detail="administrator"] p::before,
.tetra_distinguishment_staff[data-detail="founder"] p::after,
.tetra_distinguishment_staff[data-detail="founder"] p::before,
.tetra_distinguishment_staff[data-detail="globalmod"] p::after,
.tetra_distinguishment_staff[data-detail="globalmod"] p::before,
.tetra_distinguishment_staff[data-detail="kagarin"] p::after,
.tetra_distinguishment_staff[data-detail="kagarin"] p::before,
.tetra_distinguishment_staff[data-detail="team-minor"] p::after,
.tetra_distinguishment_staff[data-detail="team-minor"] p::before,
.tetra_distinguishment_staff[data-detail="team"] p::after,
.tetra_distinguishment_staff[data-detail="team"] p::before {
  background: url("/tetr-res/osk-tiles.png");
  filter: invert(1);
  opacity: 0.3;
}
.tetra_distinguishment_staff[data-detail="founder"] {
  background:
    var(--def-bg-front),
    no-repeat center/auto calc(100% - 4px) url("/tetr-res/pattern-sysop.png"),
    var(--def-bg-back);
}
.tetra_distinguishment_staff[data-detail="founder"]::after {
  background: linear-gradient(155deg, #fcce90, #fd82d4, #654af9);
}
.tetra_distinguishment_staff[data-detail="founder"] h1 {
  font-size: 1.7em;
}
.tetra_distinguishment_staff[data-detail="founder"] p {
  font-size: 0.8em;
}
.tetra_distinguishment_staff[data-detail="founder"] p::before {
  width: 15.3em;
  clip-path: polygon(0 0, 100% 0, 69% 100%, 0 100%);
  background-position-x: 0px;
}
.tetra_distinguishment_staff[data-detail="founder"] p::after {
  width: 15.3em;
  clip-path: polygon(33% 0, 100% 0, 100% 100%, 0 100%);
  background-position-x: 0px;
}
.tetra_distinguishment_staff[data-detail="kagarin"] {
  background:
    var(--def-bg-front),
    no-repeat center/auto calc(100% - 4px) url("/tetr-res/pattern-sysop.png"),
    var(--def-bg-back);
}
.tetra_distinguishment_staff[data-detail="kagarin"]::after {
  background: linear-gradient(155deg, #ff3000, #ff0060, #654af9);
}
.tetra_distinguishment_staff[data-detail="kagarin"] h1 {
  font-size: 1.7em;
}
.tetra_distinguishment_staff[data-detail="kagarin"] p {
  font-size: 0.8em;
}
.tetra_distinguishment_staff[data-detail="kagarin"] p::before {
  width: 15.3em;
  clip-path: polygon(0 0, 100% 0, 69% 100%, 0 100%);
  background-position-x: 0px;
}
.tetra_distinguishment_staff[data-detail="kagarin"] p::after {
  width: 15.3em;
  clip-path: polygon(33% 0, 100% 0, 100% 100%, 0 100%);
  background-position-x: 0px;
}
.tetra_distinguishment_staff[data-detail="team"]::after {
  background: linear-gradient(155deg, #ff7800, #facc2e, #f3df59);
}
.tetra_distinguishment_staff[data-detail="team"] h1 {
  font-size: 1.3em;
}
.tetra_distinguishment_staff[data-detail="team"] p {
  font-size: 0.7em;
}
.tetra_distinguishment_staff[data-detail="team"] p::before {
  width: 14.35em;
  clip-path: polygon(0 0, 100% 0, 69% 100%, 0 100%);
  background-position-x: 0px;
}
.tetra_distinguishment_staff[data-detail="team"] p::after {
  width: 14.5em;
  clip-path: polygon(33% 0, 100% 0, 100% 100%, 0 100%);
  background-position-x: 22px;
}
.tetra_distinguishment_staff[data-detail="team-minor"]::after {
  background: linear-gradient(155deg, #f49b1c, #f5bd45, #f5d760);
}
.tetra_distinguishment_staff[data-detail="team-minor"] h1 {
  font-size: 1.3em;
}
.tetra_distinguishment_staff[data-detail="team-minor"] p {
  font-size: 0.7em;
}
.tetra_distinguishment_staff[data-detail="team-minor"] p::before {
  width: 14.35em;
  clip-path: polygon(0 0, 100% 0, 75% 100%, 0 100%);
  background-position-x: 0px;
}
.tetra_distinguishment_staff[data-detail="team-minor"] p::after {
  width: 14.5em;
  clip-path: polygon(27% 0, 100% 0, 100% 100%, 0 100%);
  background-position-x: 12px;
}
.tetra_distinguishment_staff[data-detail="administrator"] {
  background:
    var(--def-bg-front),
    no-repeat center/auto calc(100% + 14px) url("/tetr-res/pattern-admin.png"),
    var(--def-bg-back);
}
.tetra_distinguishment_staff[data-detail="administrator"]::after {
  background: linear-gradient(155deg, #d9008a, #ff4e8a, #ffa38a);
}
.tetra_distinguishment_staff[data-detail="administrator"] h1 {
  font-size: 1.3em;
}
.tetra_distinguishment_staff[data-detail="administrator"] p {
  font-size: 0.7em;
}
.tetra_distinguishment_staff[data-detail="administrator"] p::before {
  width: 14.35em;
  clip-path: polygon(0 0, 100% 0, 69% 100%, 0 100%);
  background-position-x: 0px;
}
.tetra_distinguishment_staff[data-detail="administrator"] p::after {
  width: 14.5em;
  clip-path: polygon(33% 0, 100% 0, 100% 100%, 0 100%);
  background-position-x: 22px;
}
.tetra_distinguishment_staff[data-detail="globalmod"] {
  background:
    var(--def-bg-front),
    no-repeat center/auto calc(100% + 14px) url("/tetr-res/pattern-mod.png"),
    var(--def-bg-back);
}
.tetra_distinguishment_staff[data-detail="globalmod"]::after {
  background: linear-gradient(155deg, #884afb, #e878ff, #fb4ac3);
}
.tetra_distinguishment_staff[data-detail="globalmod"] h1 {
  font-size: 1.3em;
}
.tetra_distinguishment_staff[data-detail="globalmod"] p {
  font-size: 0.7em;
}
.tetra_distinguishment_staff[data-detail="globalmod"] p::before {
  width: 14.35em;
  clip-path: polygon(0 0, 100% 0, 69% 100%, 0 100%);
  background-position-x: 0px;
}
.tetra_distinguishment_staff[data-detail="globalmod"] p::after {
  width: 14.5em;
  clip-path: polygon(33% 0, 100% 0, 100% 100%, 0 100%);
  background-position-x: 22px;
}
.tetra_distinguishment_staff[data-detail="communitymod"] {
  background:
    var(--def-bg-front),
    no-repeat center/auto calc(100% + 14px) url("/tetr-res/pattern-halfmod.png"),
    var(--def-bg-back);
}
.tetra_distinguishment_staff[data-detail="communitymod"]::after {
  background: linear-gradient(155deg, #6ec9fd, #4e68fb, #8e5af9);
}
.tetra_distinguishment_staff[data-detail="communitymod"] h1 {
  font-size: 1.3em;
}
.tetra_distinguishment_staff[data-detail="communitymod"] p {
  font-size: 0.7em;
}
.tetra_distinguishment_staff[data-detail="communitymod"] p::before {
  width: 15.5em;
  clip-path: polygon(0 0, 97% 0, 66% 100%, 0 100%);
  background-position-x: 0px;
}
.tetra_distinguishment_staff[data-detail="communitymod"] p::after {
  width: 15.5em;
  clip-path: polygon(33% 0, 100% 0, 100% 100%, 0 100%);
  background-position-x: 0px;
}
.tetra_distinguishment_staff[data-detail="alumni"]::after {
  background: linear-gradient(155deg, #4770b5, #6057db, #795690);
}
.tetra_distinguishment_staff[data-detail="alumni"] h1 {
  font-size: 1em;
}
.tetra_distinguishment_staff[data-detail="alumni"] h1 span {
  font-weight: 500;
}
.tetra_distinguishment_champion {
  margin: 0.5em calc(-2.5em - 3px);
  padding: 1.2em;
  padding-bottom: 1em;
  position: relative;
  background: 0 0;
  --caa: #ccf5f6;
  --ca: #c2e6e7;
  --cb: #acd5d6;
  --cbb: #84b7ca;
  --cx: #ffdb31;
  --cy: #ffa200;
  --cyy: #c18922;
  --cyyy: #ffe492;
}
.tetra_distinguishment_champion::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0.5em;
  top: 0;
  right: 0.5em;
  bottom: 0;
  background:
    linear-gradient(
      to bottom,
      #0000 0,
      #0000 5px,
      var(--ca) 5px,
      var(--cb) 8px,
      #0000 8px,
      #0000 calc(100% - 8px),
      var(--ca) calc(100% - 8px),
      var(--cb) calc(100% - 5px),
      #0000 calc(100% - 5px),
      #0000 100%
    ),
    linear-gradient(
      to bottom,
      #ffffff10 0,
      #ffffff18 50%,
      #00000010 50%,
      #00000018 100%
    ),
    radial-gradient(farthest-corner, var(--cx), var(--cy));
  clip-path: polygon(
    0 0,
    1em 50%,
    0 100%,
    100% 100%,
    calc(100% - 1em) 50%,
    100% 0
  );
}
.tetra_distinguishment_champion::before {
  content: "";
  position: absolute;
  z-index: -2;
  left: 0;
  top: 0.7em;
  right: 0;
  bottom: 0.7em;
  background: linear-gradient(
    to bottom,
    var(--caa) 0,
    var(--ca) 50%,
    var(--cb) 50%,
    var(--cbb) 100%
  );
  clip-path: polygon(
    0 0,
    0.8em 50%,
    0 100%,
    100% 100%,
    calc(100% - 0.8em) 50%,
    100% 0
  );
}
.tetra_distinguishment_champion h1 {
  font-size: 1.8em;
  margin: 0;
  margin-bottom: -0.2em;
  font-weight: 900;
  color: var(--cyy);
  text-shadow:
    0 2px var(--cyyy),
    0 2px 6px var(--cy);
  letter-spacing: 0.2em;
}
.tetra_distinguishment_champion[data-detail="40l"] {
  --caa: #ffd74a;
  --ca: #efc01b;
  --cb: #bd9817;
  --cbb: #8f710a;
  --cx: #ccf5f6;
  --cy: #84b7ca;
  --cyy: #638b8c;
  --cyyy: #caedef;
}
.tetra_distinguishment_champion[data-detail="blitz"] {
  --caa: #ff4e4a;
  --ca: #ef2f1b;
  --cb: #bd2717;
  --cbb: #8f130a;
  --cx: #ccf5f6;
  --cy: #84b7ca;
  --cyy: #638b8c;
  --cyyy: #caedef;
}
.tetra_distinguishment_champion[data-detail="league"] {
  --caa: #f46bef;
  --ca: #e64be1;
  --cb: #b631b1;
  --cbb: #80227d;
  --cx: #ffdb31;
  --cy: #ffa200;
  --cyy: #c18922;
  --cyyy: #ffe492;
}
.tetra_distinguishment_twc {
  margin: 0.5em calc(-1em - 3px);
  background: no-repeat center/contain url("/tetr-res/twc_banner.png");
  padding: 0;
  padding-top: 1.8em;
  height: 6em;
  box-sizing: border-box;
  position: relative;
}
.tetra_distinguishment_twc h1 {
  font-size: 2em;
  font-weight: 900;
  margin: 0;
  text-shadow:
    0 0 8px #ffdb31,
    -2px -2px #4d2100,
    0 -2px #4d2100,
    2px -2px #4d2100,
    2px 0 #4d2100,
    2px 2px #4d2100,
    0 2px #4d2100,
    -2px 2px #4d2100,
    -2px 0 #4d2100,
    -2px 4px #4d2100,
    0 4px #4d2100,
    2px 4px #4d2100,
    0 0 16px #fff;
  transform: skewX(-7deg);
}
.tetra_distinguishment_twc p {
  font-size: 0.8em;
  font-weight: 900;
  margin: 0;
  text-shadow:
    -1px -1px #4d2100,
    0 -1px #4d2100,
    1px -1px #4d2100,
    1px 0 #4d2100,
    1px 1px #4d2100,
    0 1px #4d2100,
    -1px 1px #4d2100,
    -1px 0 #4d2100;
}
.tetra_topbutton_holder {
  position: absolute;
  top: 2.7em;
  right: 1em;
  text-align: right;
}
.tetra_topbutton {
  display: inline-block;
  color: #a1dba6;
  background-color: #0003;
  border-radius: 3px;
  font-size: 1.2em;
  padding: 0.1em 0.5em;
  padding-top: 0.35em;
  margin-left: 0.2em;
  cursor: pointer;
  transition:
    0.3s background-color,
    0.3s color,
    0.3s transform,
    0.3s opacity;
}
.tetra_topbutton.busy {
  opacity: 0.5;
  pointer-events: none;
}
.tetra_modal.banned .tetra_topbutton,
.tetra_modal.has_banner .tetra_topbutton {
  color: #fff;
  background-color: #0008;
}
.tetra_topbutton:hover {
  background-color: #4b8150;
  color: #fff;
}
.tetra_modal.banned .tetra_topbutton:hover,
.tetra_modal.has_banner .tetra_topbutton:hover {
  background-color: #000b;
}
.tetra_topbutton.tb_danger:hover {
  background-color: #a33734;
}
.tetra_modal.banned .tetra_topbutton.tb_danger:hover,
.tetra_modal.has_banner .tetra_topbutton.tb_danger:hover {
  background-color: #a33734dd;
}
.tetra_topbutton.notext {
  padding-left: 0.35em;
  padding-right: 0.35em;
}
.tetra_topbutton.hidden {
  display: none;
}
.tetra_topbutton img {
  height: 0.9em;
  vertical-align: middle;
  margin-right: 0.2em;
  filter: grayscale(0) brightness(1);
  transition: 0.3s filter;
}
.tetra_modal.banned .tetra_topbutton img,
.tetra_modal.has_banner .tetra_topbutton img,
.tetra_topbutton:hover img {
  filter: grayscale(1) brightness(1.5);
}
.tetra_topbutton.notext img {
  margin-right: 0;
}
.tetra_modal:not(.tm_friend) .tetra_topbutton.tb_friendonly {
  display: none;
}
.tetra_modal.tm_friend .tetra_topbutton.tb_notfriendonly {
  display: none;
}
.tetra_modal:not(.tm_blocked) .tetra_topbutton.tb_blockedonly {
  display: none;
}
.tetra_modal.tm_blocked .tetra_topbutton.tb_notblockedonly {
  display: none;
}
.tetra_topbutton {
  animation: tbOverflowShow 0.1s ease-out;
}
@keyframes tbOverflowShow {
  from {
    opacity: 0;
    transform: translateX(2em);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.tetra_topbutton.tb_friendbutton {
  background-color: #0004;
}
.tetra_modal.banned .tetra_topbutton.tb_friendbutton,
.tetra_modal.has_banner .tetra_topbutton.tb_friendbutton {
  background-color: #000a;
}
.tetra_topbutton.tb_friendbutton:hover {
  background-color: #4b8150;
}
.tetra_modal.banned .tetra_topbutton.tb_friendbutton:hover,
.tetra_modal.has_banner .tetra_topbutton.tb_friendbutton:hover {
  background-color: #000e;
}
.tetra_topbutton.tb_unfriendbutton {
  background-color: #4b8150;
  color: #fff;
  position: relative;
}
.tetra_modal.banned .tetra_topbutton.tb_unfriendbutton,
.tetra_modal.has_banner .tetra_topbutton.tb_unfriendbutton {
  background-color: #000e;
}
.tetra_topbutton.tb_unfriendbutton:hover {
  background-color: #a33734;
}
.tetra_modal.banned .tetra_topbutton.tb_unfriendbutton:hover,
.tetra_modal.has_banner .tetra_topbutton.tb_unfriendbutton:hover {
  background-color: #a33734dd;
}
.tetra_topbutton.tb_unfriendbutton.tb_unfriending:hover {
  background-color: #ed2222;
}
.tetra_modal.banned .tetra_topbutton.tb_unfriendbutton.tb_unfriending:hover,
.tetra_modal.has_banner
  .tetra_topbutton.tb_unfriendbutton.tb_unfriending:hover {
  background-color: #ed2222;
}
.tetra_topbutton.tb_unfriendbutton:hover img {
  opacity: 0;
}
.tetra_topbutton.tb_unfriendbutton:hover::after {
  content: "";
  position: absolute;
  left: 0.35em;
  right: 0.35em;
  top: 0;
  bottom: 0;
  background-image: url("/tetr-res/icon/unfriend.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  animation: tbWorriedHeartScaleI 0.3s ease-out forwards;
}
.tetra_topbutton.tb_unfriendbutton.tb_unfriending:hover::after {
  animation:
    tbWorriedHeartScaleII 50ms ease-out forwards,
    tbWorriedHeartShudder 0.1s linear infinite;
}
.tetra_topbutton.tb_unfriendbutton.tb_unfriending:hover::before {
  content: "click again to confirm";
  position: absolute;
  left: calc(100% + 0.5em);
  width: 12em;
  text-align: left;
  top: 50%;
  opacity: 0;
  transform: translate(0, -50%);
  color: #fff;
  background: linear-gradient(to right, #ed222244 0, #0000 100%);
  border-radius: 3px;
  padding: 0.1em 0.5em;
  padding-top: 0.25em;
  font-size: 0.8em;
  font-weight: 500;
  pointer-events: none;
  animation: tbConfirmAppear 0.1s 0.3s ease-out forwards;
}
@keyframes tbConfirmAppear {
  from {
    transform: translate(-0.2em, -50%);
    opacity: 0;
  }
  to {
    transform: translate(0, -50%);
    opacity: 1;
  }
}
@keyframes tbWorriedHeartScaleI {
  from {
    left: 0.35em;
    right: 0.35em;
  }
  to {
    left: 0.3em;
    right: 0.3em;
  }
}
@keyframes tbWorriedHeartScaleII {
  from {
    left: 0.3em;
    right: 0.3em;
  }
  to {
    left: 0.1em;
    right: 0.1em;
  }
}
@keyframes tbWorriedHeartShudder {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-1px);
  }
  40% {
    transform: translateX(0);
  }
  60% {
    transform: translateX(1px);
  }
  80% {
    transform: translateX(1px);
  }
  100% {
    transform: translateX(0);
  }
}
.tetra_button_holder {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 1em);
  padding: 0.5em 1.33em;
  padding-bottom: 0.1em;
  padding-right: 0.93em;
  margin: 0 -3px;
  border-top: 3px solid #294f30;
  border-left: 3px solid #1d3e23;
  border-bottom: 3px solid #0a130b;
  border-right: 3px solid #0e1a0f;
  border-radius: 3px;
  box-shadow: 0 0 48px #0002;
  text-align: center;
  background-color: #132314;
}
.tetra_button {
  font-size: 1.5em;
  padding: 0.1em 0.5em;
  padding-top: 0.25em;
  text-align: center;
  background-color: #345a36;
  color: #b3f4b6;
  border-radius: 3px;
  cursor: pointer;
  margin-bottom: 0.25em;
  margin-right: 0.25em !important;
  transition:
    0.3s background-color,
    0.3s color;
}
.tetra_button:hover {
  background-color: #90c397;
  color: #fff;
}
.tetra_modal.banned {
  --rxa: #960e0e;
  --rxb: #750a0a;
  --lxa: 0.4em;
  --lxb: 0.8em;
  --lxc: 0.8em;
  background:
    0 0/50% 50% no-repeat
      repeating-linear-gradient(
        45deg,
        var(--rxa),
        var(--rxa) var(--lxa),
        var(--rxb) var(--lxa),
        var(--rxb) var(--lxb),
        var(--rxa) var(--lxb),
        var(--rxa) var(--lxc),
        var(--rxb) var(--lxc),
        var(--rxb) 0.8em
      ),
    100% 100%/50% 50% no-repeat
      repeating-linear-gradient(
        225deg,
        var(--rxa),
        var(--rxa) var(--lxa),
        var(--rxb) var(--lxa),
        var(--rxb) var(--lxb),
        var(--rxa) var(--lxb),
        var(--rxa) var(--lxc),
        var(--rxb) var(--lxc),
        var(--rxb) 0.8em
      ),
    100% 0/50% 50% no-repeat
      repeating-linear-gradient(
        -45deg,
        var(--rxa),
        var(--rxa) var(--lxa),
        var(--rxb) var(--lxa),
        var(--rxb) var(--lxb),
        var(--rxa) var(--lxb),
        var(--rxa) var(--lxc),
        var(--rxb) var(--lxc),
        var(--rxb) 0.8em
      ),
    0 100%/50% 50% no-repeat
      repeating-linear-gradient(
        135deg,
        var(--rxa),
        var(--rxa) var(--lxa),
        var(--rxb) var(--lxa),
        var(--rxb) var(--lxb),
        var(--rxa) var(--lxb),
        var(--rxa) var(--lxc),
        var(--rxb) var(--lxc),
        var(--rxb) 0.8em
      ),
    var(--rxb);
  border-top: 3px solid #f81c1c;
  border-left: 3px solid #cf1f1f;
  border-bottom: 3px solid #971b1b;
  border-right: 3px solid #761919;
  box-shadow: 0 0 48px #960e0e88;
  height: 10.5em;
  animation: 0.5s tmbanned infinite linear;
}
@keyframes tmbanned {
  0% {
    --lxa: 0.4em;
    --lxb: 0.8em;
    --lxc: 0.8em;
  }
  10% {
    --lxa: 0.32em;
    --lxb: 0.72em;
    --lxc: 0.8em;
  }
  20% {
    --lxa: 0.24em;
    --lxb: 0.64em;
    --lxc: 0.8em;
  }
  30% {
    --lxa: 0.16em;
    --lxb: 0.56em;
    --lxc: 0.8em;
  }
  40% {
    --lxa: 0.08em;
    --lxb: 0.48em;
    --lxc: 0.8em;
  }
  50% {
    --lxa: 0em;
    --lxb: 0.4em;
    --lxc: 0.8em;
  }
  60% {
    --lxa: 0em;
    --lxb: 0.32em;
    --lxc: 0.72em;
  }
  70% {
    --lxa: 0em;
    --lxb: 0.24em;
    --lxc: 0.64em;
  }
  80% {
    --lxa: 0em;
    --lxb: 0.16em;
    --lxc: 0.56em;
  }
  90% {
    --lxa: 0em;
    --lxb: 0.08em;
    --lxc: 0.48em;
  }
  100% {
    --lxa: 0em;
    --lxb: 0em;
    --lxc: 0.4em;
  }
}
.tetra_modal.banned::after {
  content: "";
  display: block;
  width: calc(100% + 5em);
  height: 2em;
  background: repeating-linear-gradient(
    0deg,
    #f81c1c88,
    #f81c1c88 0.2em,
    #f81c1c44 0.2em,
    #f81c1c44 0.4em
  );
  border-top: 3px solid #f81c1c;
  border-bottom: 3px solid #f81c1c;
  clip-path: polygon(
    0 50%,
    1em 0,
    calc(100% - 1em) 0,
    100% 50%,
    calc(100% - 1em) 100%,
    1em 100%
  );
  pointer-events: none;
  left: 50%;
  top: 6.6em;
  transform: translate(-50%, -50%);
  position: absolute;
  z-index: -1;
}
.tetra_modal.banned h2 {
  color: #fff;
}
.tetra_modal.banned .tetra_modal_close {
  color: #fff8;
}
.tetra_modal.banned .tetra_modal_close:hover {
  color: #fff;
}
.tetra_modal_warning {
  background-color: #0004;
  color: #b3f4b6;
  text-align: center;
  padding: 1em;
  font-size: 1.5em;
  margin-top: 1em;
}
.tetra_modal.banned .tetra_modal_warning {
  background: 0 0;
  color: #fff;
  text-shadow: 0 2px 4px #0008;
  text-align: center;
  padding: 1em;
  font-size: 1.5em;
  margin-top: 0.25em;
  font-size: 0.98em;
}
.tetra_modal.banned .tetra_modal_warning h1 {
  font-weight: 900;
  font-size: 5em;
  margin-bottom: 0.1em;
}
.tetra_modal_bio {
  background-color: #0002;
  color: #7ab97c;
  padding: 0.7em;
  margin-top: 0.45em;
  margin-bottom: 0.15em;
  max-height: 6rem;
  overflow-y: auto;
  scrollbar-color: #345a36 #1f3620 !important;
}
.tetra_modal_close + .tetra_modal_bio,
.tetra_topbutton_holder + .tetra_modal_bio {
  margin-top: 1.45em;
  margin-bottom: -0.85em;
}
.tetra_modal_bio > h1 {
  color: #345a36;
  font-size: 1em;
  margin: -0.7em;
  margin-bottom: -0.15em;
  padding: 0.25em;
  font-weight: 900;
}
.tetra_modal_bio > p {
  margin: 0;
  font-size: 1.1em;
  font-family: "C";
  margin-bottom: -0.15em;
  overflow-wrap: break-word;
}
.tetra_modal_bio > p a {
  color: #bdffc0;
  text-decoration: none;
}
.tetra_modal_bio > p a:hover {
  color: #fff;
  text-decoration: underline;
}
.tetra_modal_jump {
  margin: -0.67em;
  font-size: 1.5rem;
  margin-top: 0.2em;
  padding: 0.3em 0.5em;
  padding-top: 0.6em;
  text-align: center;
  background-color: #1f3620;
  color: #a1dba6;
  cursor: pointer;
  transition: 0.3s background-color;
}
.tetra_modal_jump:hover {
  background-color: #1c301d;
}
.achievements_modal .tetra_modal_jump {
  margin-bottom: -1.2rem;
  margin-top: 1.2rem;
}
.oob_modal input:not([type]),
.oob_modal input[type="email"],
.oob_modal input[type="number"],
.oob_modal input[type="password"],
.oob_modal input[type="text"] {
  padding: 0.2em 0.4em;
  padding-top: 0.4em;
  border: none;
  background-color: #222;
  border-radius: 3px;
  color: #eee;
  font-family: HUN;
  font-size: 1.35em;
  width: 100%;
  margin-bottom: 0.2em;
  margin-left: -0.4em;
  line-height: 1.1em;
}
.oob_modal input.mono_input {
  font-family: PFW;
  padding-top: 0.3em;
  padding-bottom: 0.3em;
}
.oob_modal input.centered_input {
  text-align: center;
}
.oob_modal textarea {
  padding: 0.2em 0.4em;
  padding-top: 0.4em;
  border: none;
  background-color: #222;
  border-radius: 3px;
  color: #eee;
  font-family: PFW;
  font-size: 1.35em;
  width: 100%;
  height: 4em;
  margin-bottom: 0.2em;
  margin-left: -0.4em;
}
input.usernamelike {
  text-transform: uppercase;
}
.oob_modal input.minor_input {
  font-size: 1.15em;
  background-color: #000c;
  color: #fff;
}
.input_implicit_username {
  display: none;
}
#captcha_image > svg {
  width: 100%;
  height: 80px;
}
.oob_modal .quickjoin {
  margin: -0.67em;
  margin-bottom: 0.67em;
  padding: 0.33em 0.67em;
  background-color: #1e48ff;
  color: #cbd5ff;
  border-radius: 3px 3px 0 0;
  font-size: 1.5em;
}
.oob_modal .quickjoin.hidden {
  display: none;
}
.oob_modal .quickjoin span {
  font-family: PFW;
  margin-left: 0.25em;
  font-size: 1.25em;
}
.preform {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 1em);
  color: #444;
  text-align: center;
  display: flex;
  justify-content: space-between;
}
.preform_item {
  display: inline-block;
  flex-grow: 1;
  flex-shrink: 1;
}
.preform_item h1 {
  margin: 0;
  font-weight: 900;
  font-size: 2em;
  color: #888;
}
.preform_item p {
  margin: 0;
  font-weight: 500;
  font-size: 1em;
}
.login_ceriad {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 40px);
}
body.no_login_ceriad .login_ceriad {
  display: none;
}
.electron_jump {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 170px);
  color: #444;
  text-align: center;
  display: block;
  cursor: pointer;
  background: #0000;
  border: 1px solid #111;
  border-radius: 3px;
  padding-top: 0.75em;
  padding-bottom: 0.6em;
  font-size: 1.15em;
  transition:
    0.3s color,
    0.3s background,
    0.3s border;
}
body.no_login_ceriad .electron_jump {
  top: calc(100% + 0.5em);
}
.electron_jump:hover {
  color: #ffd71e;
  background: #ffd71e11;
  border: 1px solid #ffd71e;
}
.electron_jump:active {
  color: #000;
  background: #ffd71e;
  border: 1px solid #ffd71e;
  transition:
    50ms color,
    50ms background,
    50ms border;
}
.electron_jump.hidden {
  display: none;
}
.electron .electron_jump {
  display: none;
}
.electron_jump_also {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 5em + 90px);
  color: #444;
  text-align: center;
  display: block;
  cursor: pointer;
  font-size: 0.9em;
  transition: 0.3s color;
  text-decoration: none;
}
body.no_login_ceriad .electron_jump_also {
  top: calc(100% + 4.5em);
}
.electron_jump_also:hover {
  color: #ffd71e;
}
.electron_jump_also:active {
  color: #fff;
  transition: 50ms color;
}
.electron_jump_also.hidden {
  display: none;
}
.electron .electron_jump_also {
  display: none;
}
#deletion_spanner.hidden {
  display: none;
}
#deletion_spanner {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    -45deg,
    #2f0000,
    #2f0000 30px,
    #000 30px,
    #000 60px
  );
  animation: SpannerFade 1s ease-out;
  z-index: 1000000;
}
@keyframes SpannerFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
#deletion_spanner::before {
  content: "DELETE";
  position: fixed;
  left: 0;
  top: 0.5em;
  right: 0;
  font-family: HUN;
  font-weight: 900;
  font-size: 5em;
  color: red;
  text-shadow: 0 0 16px red;
  pointer-events: none;
  text-align: center;
  animation: SpannerFade 0.75s ease-in-out infinite alternate;
}
#deletion_spanner::after {
  content: "DELETE";
  position: fixed;
  left: 0;
  bottom: 0.3em;
  right: 0;
  font-family: HUN;
  font-weight: 900;
  font-size: 5em;
  color: red;
  text-shadow: 0 0 16px red;
  pointer-events: none;
  text-align: center;
  animation: SpannerFade 0.75s ease-in-out infinite alternate;
}
#deletion_countdown {
  margin: 0;
  font-weight: 900;
  font-size: 10em;
  margin-top: 0.15em;
}
#devbuildwarning {
  position: fixed;
  pointer-events: none;
  left: 0;
  right: 0;
  bottom: 1em;
  text-align: center;
  color: #fff;
  font-family: HUN;
  z-index: 1111111;
}
#devbuildwarning h1 {
  color: red;
  font-weight: 900;
  font-size: 2em;
  text-shadow: 0 0 8px red;
  margin: 0;
}
#devbuildwarning p {
  font-size: 1.2em;
  margin-top: 0;
}
body:not(.devel) #devbuildwarning {
  display: none;
}
#notifications {
  position: fixed;
  right: 1em;
  bottom: 1em;
  width: 25em;
  max-width: calc(100vw - 2em);
  z-index: 10000010;
}
.igceriad-mounted_right #notifications {
  right: calc(1em + 200px);
}
.notification {
  background-color: #060606dd;
  border: 1px solid;
  border-color: #fff;
  color: #fff;
  font-family: HUN;
  font-size: 1.05em;
  padding: 0.5em;
  margin-top: 0.5em;
  border-radius: 3px;
  position: relative;
  will-change: transform;
  min-height: 2em;
  cursor: pointer;
  opacity: 0;
  transform: translateX(25em);
  animation: 0.5s notificationSpawn forwards cubic-bezier(0.3, 1.52, 0.45, 1);
}
.notification.despawning {
  opacity: 0;
  transform: translateX(25em);
  animation: 0.5s notificationDespawn forwards ease-in;
}
.notification p {
  margin: 0.6em 0;
  margin-bottom: 0.45em;
}
.notification_icon {
  width: 2em;
  height: 2em;
  position: absolute;
  left: 0.5em;
  top: 0.5em;
}
.notification .flag {
  height: 0.88em;
  vertical-align: -5%;
}
.notification.has_image p {
  margin-left: 2.5em;
}
@keyframes notificationSpawn {
  from {
    opacity: 0;
    transform: translateX(25em);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes notificationDespawn {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(25em);
  }
}
.notification.snotify {
  font-family: "C";
  font-size: 1em;
  padding-left: 3.5em;
  background-color: #000e !important;
  border-radius: 0;
  border-width: 0;
  border-left-width: 2px;
}
.notification.snotify::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 12em;
  z-index: -1;
  opacity: 0.1;
  background: linear-gradient(to right, var(--pri) 0, #0000 100%);
  pointer-events: none;
}
.notification.snotify::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  border: 1px solid #0000;
  border-left-width: 0;
  border-image: linear-gradient(to right, var(--pri) 0%, #0000 100%) 1;
  opacity: 0.3;
}
.notification.snotify .notification_icon {
  width: 2.5em;
  height: 2.5em;
  position: absolute;
  left: 0.5em;
  top: 0.5em;
  border-radius: 3px;
}
.notification.snotify .notification_icon_sub {
  position: absolute;
  left: 2.15em;
  top: 2.15em;
  width: 0.85em;
  height: 0.88em;
  border: 2px solid var(--sec);
  border-radius: 3px;
  background: var(--sec);
}
.notification.snotify h1 {
  margin: 0;
  color: var(--pri);
  font-size: 1.15em;
}
.notification.snotify p {
  margin: 0;
  color: #fffc;
  font-size: 0.95em;
}
.notification.snotify span {
  font-family: HUN;
}
.notification.snotify b {
  font-weight: 900;
  color: #fff;
}
.notification.hasstack {
  margin-left: -25em;
}
.notification.hasstack .notification-stack {
  font-size: 0.9em;
  font-family: PFW;
  border-top: 1px solid var(--pri);
  margin: 0;
  padding: 0;
  margin-top: 1em;
  padding-top: 1em;
}
.notification hr {
  border: none;
  height: 1px;
  background-color: var(--pri);
  margin: 0.5rem 0;
}
.ach_notif_icon {
  opacity: 0.8;
  background-size: 800% 800%;
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  pointer-events: none;
  filter: invert(1);
}
.upsell_bubble {
  position: absolute;
  width: var(--size);
  height: var(--size);
  transform: translate(-50%, -50%);
  --size: 1em;
  animation: 0.5s UpsellBubbleStart ease-out;
}
@keyframes UpsellBubbleStart {
  from {
    transform: translate(-50%, -50%) scale(0.85);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}
.upsell_bubble.hiding {
  pointer-events: none;
  animation: 0.5s UpsellBubbleEnd ease-out forwards;
  filter: contrast(0) brightness(2);
}
@keyframes UpsellBubbleEnd {
  from {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;
  }
}
.upsell_bubble.hidden {
  display: none;
}
.upsell_bubble::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: rotate(45deg);
  border: 0.2em solid #00ffba;
  box-shadow: 0 0 16px #00ffba;
  box-sizing: border-box;
  animation:
    2.8s UpsellBubbleBob ease-in-out infinite alternate,
    1.9s UpsellBubbleFade ease-in-out infinite alternate;
}
.upsell_bubble::after {
  content: "";
  position: absolute;
  left: 10%;
  top: 10%;
  width: 80%;
  height: 80%;
  transform: rotate(45deg);
  border: 1em solid #00ffba44;
  box-shadow:
    0 0 16px #00ffba44,
    inset 0 0 16px #00ffba44;
  box-sizing: border-box;
  animation:
    2.3s UpsellBubbleBobPlus ease-in-out infinite alternate,
    3.8s UpsellBubbleFade ease-in-out infinite alternate;
}
@keyframes UpsellBubbleBob {
  from {
    transform: rotate(45deg) scale(1);
  }
  to {
    transform: rotate(45deg) scale(1.2);
  }
}
@keyframes UpsellBubbleBobPlus {
  from {
    transform: rotate(45deg) scale(0.7);
  }
  to {
    transform: rotate(45deg) scale(2.4);
  }
}
@keyframes UpsellBubbleFade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.8;
  }
}
.upsell_bubble p {
  position: absolute;
  color: #00ffba;
  text-shadow: 0 0 6px #00ffba;
  white-space: nowrap;
}
#now_playing,
#now_playing_jp {
  position: fixed;
  pointer-events: none;
  left: 0.5em;
  right: 0.5em;
  bottom: 1em;
  text-shadow: 0 2px 4px #000;
  color: #fff;
  text-align: center;
  font-family: HUN;
  font-size: 1.5em;
  z-index: 1111111;
  transition: 2s opacity;
  will-change: transform;
}
#now_playing::before,
#now_playing_jp::before {
  content: "ǿ";
  opacity: 0.3;
  margin-right: 0.25em;
}
#now_playing.hidden,
#now_playing_jp.hidden {
  opacity: 0;
}
#now_playing_jp {
  bottom: 0.5em;
  font-size: 0.8em;
  opacity: 0.5;
}
#replaytools:not(.hidden) ~ #now_playing {
  bottom: calc(1em + 110px);
}
#replaytools:not(.hidden) ~ #now_playing_jp {
  bottom: calc(0.5em + 110px);
}
#replaytools:not(.hidden).multi ~ #now_playing {
  bottom: calc(1em + 140px);
}
#replaytools:not(.hidden).multi ~ #now_playing_jp {
  bottom: calc(0.5em + 140px);
}
body[data-graphics="minimal"] #now_playing,
body[data-graphics="minimal"] #now_playing_jp {
  display: none;
}
body.igceriad-mounted_bottom #now_playing {
  bottom: calc(1em + 100px);
}
body.igceriad-mounted_bottom #now_playing_jp {
  bottom: calc(0.5em + 100px);
}
#dialogs {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #000d;
  z-index: 9999999;
  transition: 0.3s opacity;
}
#dialogs.hidden {
  opacity: 0;
  pointer-events: none;
}
#menus {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #000a;
  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;
}
#menus.lite:not(.hidden) #footer,
#menus.lite:not(.hidden) #header {
  pointer-events: all;
}
.hidden * {
  animation: none !important;
}
.ingame #menus {
  display: none;
}
#menus #side_logo {
  position: fixed;
  left: 1em;
  bottom: 4.2em;
  width: calc(15vw - 2em);
  opacity: 0.1;
  pointer-events: none;
}
#menus.lite #side_logo {
  bottom: unset;
  top: 5em;
  left: 50vw;
  transform: translateX(-50%);
  opacity: 0.5;
}
.menu_fullscreen {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(4.2em + 2px);
  bottom: calc(3.2em + 2px);
  transform: scale(1);
  z-index: 12;
  transition:
    0.5s transform,
    0.5s opacity;
}
.hidden .menu_fullscreen,
.menu_fullscreen.hidden {
  transform: scale(0.9);
  opacity: 0;
  pointer-events: none;
}
.menu_fullscreen.thidden,
.thidden .menu_fullscreen {
  display: none;
}
.noanim .menu_fullscreen {
  transition: none;
}
#menus #header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 4.2em;
  background: linear-gradient(to bottom, #2a284a 0, #181726 100%);
  border-bottom: 2px solid #3d3a67;
  box-shadow: 0 0 8px #000;
  z-index: 10;
  transition: 0.3s top;
}
#menus.hidden #header {
  top: -4.2em;
}
#menus #header_text {
  position: fixed;
  left: 0.5em;
  top: 0.5em;
  font-family: HUN;
  color: #9d97f3;
  font-size: 2.25em;
}
#menus #social_tray {
  position: fixed;
  right: 17em;
  top: -1em;
  height: 4.5em;
  width: 7em;
  background: linear-gradient(to bottom, #060606aa 0, #060606dd 100%);
  border: 2px solid #060606ee;
  border-top: none;
  box-shadow: 0 0 8px #0008;
  cursor: pointer;
  border-radius: 0 0 3px 3px;
  transform: translateY(0);
  transition: 0.3s transform;
}
#menus #social_tray:hover {
  transform: translateY(0.2em);
}
#menus #social_tray:active {
  transform: translateY(1em);
  transition: 50ms transform;
}
body.anon #menus #social_tray {
  display: none;
}
body.banstatus_restrict #menus #social_tray {
  display: none;
}
#menus #social_tray.unread_notifications,
#menus #social_tray.unread_people {
  background: linear-gradient(to bottom, #080606aa 0, #120606dd 100%);
  animation: 0.2s unreadBlinkTray ease-in-out alternate 6;
}
@keyframes unreadBlinkTray {
  from {
    border-color: #060606ee;
    box-shadow: 0 0 8px #0008;
  }
  to {
    border-color: #eb1d1dee;
    box-shadow: 0 0 8px #eb1d1d88;
  }
}
#menus #social_tray #social_tray_icon_people {
  position: absolute;
  left: 0.75em;
  right: 4.25em;
  bottom: 0.75em;
  height: 2em;
  opacity: 0.3;
}
#menus #social_tray.unread_people #social_tray_icon_people {
  opacity: 1;
}
#menus #social_tray #social_tray_icon_notifications {
  position: absolute;
  left: 4.25em;
  right: 0.75em;
  bottom: 0.75em;
  height: 2em;
  opacity: 0.3;
}
#menus #social_tray.unread_notifications #social_tray_icon_notifications {
  opacity: 1;
}
#menus #social_tray #social_tray_badge_people {
  position: absolute;
  left: 0.3em;
  bottom: 0.3em;
  font-size: 0.8em;
  color: #fff;
  background-color: #eb1d1d;
  font-weight: 900;
  border-radius: 3px;
  box-shadow: 0 2px 4px #0002;
  padding: 0.2em 0.5em;
  padding-top: 0.35em;
  font-family: HUN;
}
#menus #social_tray:not(.unread_people) #social_tray_badge_people {
  display: none;
}
#menus #social_tray #social_tray_badge_notifications {
  position: absolute;
  right: 0.3em;
  bottom: 0.3em;
  font-size: 0.8em;
  color: #fff;
  background-color: #eb1d1d;
  font-weight: 900;
  border-radius: 3px;
  box-shadow: 0 2px 4px #0002;
  padding: 0.2em 0.5em;
  padding-top: 0.35em;
  font-family: HUN;
}
#menus
  #social_tray:not(.unread_notifications)
  #social_tray_badge_notifications {
  display: none;
}
#menus #social_tray #social_tray_separator {
  position: absolute;
  top: 0;
  bottom: 1.2em;
  left: calc(50% - 1px);
  right: calc(50% - 1px);
  background-color: #060606ee;
  pointer-events: none;
}
#menus #social_tray.unread_notifications #social_tray_separator,
#menus #social_tray.unread_people #social_tray_separator {
  animation: 0.2s unreadBlinkTraySeperator ease-in-out alternate 6;
}
@keyframes unreadBlinkTraySeperator {
  from {
    background-color: #060606ee;
    box-shadow: 0 0 8px #0000;
  }
  to {
    background-color: #eb1d1dee;
    box-shadow: 0 0 8px #eb1d1d88;
  }
}
#menus #social_tray #social_tray_online {
  position: absolute;
  top: 4.8em;
  left: 0.75em;
  right: 0.75em;
  color: #fff4;
  font-size: 0.75em;
  text-align: center;
  font-family: HUN;
  font-weight: 900;
}
#menus #social_tray #social_tray_online::after {
  content: "ǽ";
  font-size: 0.85em;
  opacity: 0.7;
}
#menus #social_tray.unread_notifications #social_tray_online,
#menus #social_tray.unread_people #social_tray_online {
  animation: 0.2s unreadBlinkTrayOnline ease-in-out alternate 6;
}
@keyframes unreadBlinkTrayOnline {
  from {
    color: #fff4;
    text-shadow: 0 0 8px #0000;
  }
  to {
    color: #eb1d1dee;
    text-shadow: 0 0 8px #eb1d1d88;
  }
}
#menus #me {
  position: fixed;
  right: 1em;
  top: -1em;
  height: 4.5em;
  width: 15em;
  background: linear-gradient(to bottom, #060606aa 0, #060606dd 100%);
  border: 2px solid #060606ee;
  border-top: none;
  box-shadow: 0 0 8px #0008;
  cursor: pointer;
  border-radius: 0 0 3px 3px;
  transform: translateY(0);
  transition: 0.3s transform;
}
#menus #me:hover {
  transform: translateY(0.2em);
}
#menus #me:active {
  transform: translateY(1em);
  transition: 50ms transform;
}
#menus #me_avatar {
  position: absolute;
  right: 0.2em;
  top: 1.4em;
  height: 3em;
}
#menus #me_username {
  position: absolute;
  left: 0.2em;
  top: 1.17em;
  margin: 0;
  color: #fff;
  text-shadow: 0 0 4px #000;
  font-family: HUN;
  font-weight: 500;
  font-size: 1.3em;
  text-transform: uppercase;
}
#menus #me_username.lu {
  top: 1.55em;
  font-size: 1.05em;
}
#menus #me_anon,
#menus #me_bot,
#menus #me_restricted {
  position: absolute;
  left: 0.2em;
  right: 3.2em;
  bottom: 0.2em;
  margin: 0;
  padding-top: 0.2em;
  color: #f44;
  background: #4006;
  text-shadow: 0 0 4px #f44a;
  font-family: HUN;
  font-weight: 500;
  font-size: 1.1em;
  border-radius: 3px;
  text-align: center;
}
body.banstatus_restrict #menus #me_anon,
body.bot #menus #me_anon,
body:not(.anon) #menus #me_anon,
body:not(.banstatus_restrict) #menus #me_restricted,
body:not(.bot) #menus #me_bot {
  display: none;
}
#menus #me_restricted {
  color: #400;
  background: #f44;
  text-shadow: 0 0 4px #4006;
  box-shadow: 0 0 4px #f446;
}
#menus #me_bot {
  color: #430644;
  background: #ff0078;
  text-shadow: 0 0 4px #43064466;
  box-shadow: 0 0 4px #ff007866;
}
#menus #me_tags {
  position: absolute;
  left: 0.2em;
  right: 0.2em;
  bottom: 0.2em;
  margin: 0;
  padding: 0;
  font-family: HUN;
  font-weight: 500;
}
body.anon #menus #me_tags {
  display: none;
}
body.banstatus_restrict #menus #me_tags {
  display: none;
}
body.bot #menus #me_tags {
  display: none;
}
#menus #me_tags #me_level {
  margin-right: 1em;
}
#menus #me_tags .me_badge {
  height: 1.45em;
  vertical-align: sub;
  position: relative;
  top: 0.1em;
}
#menus #me_tags .me_badge.hidden {
  display: none;
}
body:not(.supporter) #me_supporter {
  display: none;
}
body:not(.supporter):not(.staff) .supporteronly {
  display: none;
}
body.staff .nosupporter,
body.supporter .nosupporter {
  display: none;
}
#menus #me_leveling {
  position: fixed;
  right: 1em;
  top: 0;
  height: 3.5em;
  width: 15em;
  background: linear-gradient(to bottom, #0e0d0c 0, #2f2b17 100%);
  border: 2px solid #ffd800;
  border-top: none;
  box-shadow: 0 0 8px #ffb40088;
  border-radius: 0 0 3px 3px;
  will-change: transform;
  transition: 0.5s transform ease-out;
}
#menus #me_leveling.hidden {
  transform: translateY(-5em);
  transition: 0.5s transform ease-in;
}
#menus #me_leveling.levelingup {
  animation: 5s LevelUp linear;
}
@keyframes LevelUp {
  0% {
    filter: contrast() brightness(1);
  }
  14.5% {
    filter: contrast(1) brightness(5);
  }
  15% {
    filter: contrast(0.1) brightness(2);
  }
  57.5% {
    filter: contrast(1) brightness(1.5);
  }
  100% {
    filter: contrast(1) brightness(1);
  }
}
#menus #me_leveling.maxlevel {
  animation: 15s MaxLevel linear;
}
@keyframes MaxLevel {
  0% {
    filter: contrast() brightness(1) hue-rotate(0deg);
  }
  4.83% {
    filter: contrast(1) brightness(5) hue-rotate(0deg);
  }
  5% {
    filter: contrast(0.1) brightness(2) hue-rotate(0deg);
  }
  19.2% {
    filter: contrast(1) brightness(1.5) hue-rotate(3200deg);
  }
  100% {
    filter: contrast(1) brightness(1) hue-rotate(28000deg);
  }
}
#menus #me_leveling_tags {
  position: absolute;
  left: 0.2em;
  right: 0.2em;
  top: 0.2em;
  margin: 0;
  padding: 0;
  font-family: HUN;
  font-weight: 500;
}
#menus #me_leveling_amt {
  display: inline-block;
  font-size: 1.1em;
  font-weight: 900;
  color: #fff;
  margin: 0;
  margin-left: 1em;
}
#menus #me_leveling_bg {
  position: absolute;
  left: 0.2em;
  right: 0.2em;
  bottom: 0.2em;
  height: 1.5em;
  margin: 0;
  padding: 0;
  border-radius: 3px;
  background-color: #ffd80033;
}
#menus #me_leveling_fg {
  position: absolute;
  left: 0.2em;
  right: calc(-0.2em + 100%);
  bottom: 0.2em;
  height: 1.5em;
  margin: 0;
  padding: 0;
  border-radius: 3px;
  background-color: #ffd800;
  transition: 1s right ease-in-out;
}
#menus #me_leveling.hidden #me_leveling_fg {
  transition: none;
}
#menus #me_leveling_message {
  position: absolute;
  left: 0.2em;
  right: 0.2em;
  bottom: 0.15em;
  text-align: center;
  font-size: 1.25em;
  font-weight: 900;
  color: #000;
  margin: 0;
  padding: 0;
  transition:
    0.3s opacity,
    0.3s transform;
  opacity: 1;
  will-change: transform;
  font-family: HUN;
}
#menus #me_leveling_message.hidden {
  opacity: 0;
  transform: scale(0.8);
}
#ongoing {
  position: fixed;
  top: -2rem;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 9999997;
  pointer-events: none;
  font-family: HUN;
  will-change: transform;
  transition: 0.1s transform;
}
body.idlemouse #ongoing {
  transform: translate(-50%, -1.5rem);
  transition: 1s transform;
}
.ongoing {
  display: inline-block;
  width: 20rem;
  height: 5.2rem;
  background: linear-gradient(to bottom, #060606aa 0, #060606dd 100%);
  border: 2px solid #060606ee;
  border-top: none;
  border-radius: 0 0 3px 3px;
  pointer-events: all;
  color: #fff;
  margin: 0 0.5rem;
  position: relative;
  box-shadow: 0 0 8px #0008;
}
body.idlemouse #ongoing .ongoing {
  pointer-events: none;
}
.ongoing.spawning {
  animation: 0.3s OngoingSpawn cubic-bezier(0.23, 1.56, 0.6, 1);
}
.ongoing.hiding {
  pointer-events: none;
  animation: 0.3s OngoingHiding cubic-bezier(0.47, -0.84, 0.97, 0.69) forwards;
}
.ongoing::after {
  content: "";
  position: absolute;
  top: 0;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid #fff;
  border-top: none;
  border-radius: 0 0 3px 3px;
  box-shadow: 0 0 8px #fff;
  pointer-events: none;
  will-change: opacity;
  opacity: 0;
}
@keyframes OngoingSpawn {
  from {
    transform: translateY(-8rem);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes OngoingHiding {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-8rem);
  }
}
.ongoing_header {
  font-size: 1.25rem;
  font-weight: 900;
  position: absolute;
  top: 2.55rem;
  left: 0.25rem;
  right: 4rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  will-change: transform;
  transition: 0.1s transform;
  transform: translateY(0);
}
body.idlemouse #ongoing .ongoing_header {
  transform: translateY(1.3rem);
  transition: 1s transform;
}
.ongoing_sub {
  font-size: 0.9rem;
  font-weight: 500;
  position: absolute;
  top: 4.1rem;
  left: 0.25rem;
  right: 0.25rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  will-change: opacity;
  transition: 0.1s opacity;
  opacity: 1;
}
body.idlemouse #ongoing .ongoing_sub {
  opacity: 0;
  transition: 1s opacity;
}
.ongoing_extra {
  font-size: 1rem;
  font-weight: 500;
  position: absolute;
  top: 2.5rem;
  right: 0.25rem;
  color: #fff8;
  will-change: transform;
  transition: 0.1s transform;
  transform: translateY(0);
}
body.idlemouse #ongoing .ongoing_extra {
  transform: translateY(1.45rem);
  transition: 1s transform;
}
.ongoing_buttons {
  position: absolute;
  top: calc(100% + 2px + 0.125rem);
  left: calc(-2px - 0.125rem);
  right: calc(-2px - 0.125rem);
  display: flex;
  will-change: opacity;
  transition: 0.1s opacity;
  transform-origin: 50% 0%;
  opacity: 1;
}
body.idlemouse #ongoing .ongoing_buttons {
  opacity: 0;
  transition: 1s opacity;
}
.ongoing.spawning .ongoing_buttons {
  animation: 0.5s 0.1s OngoingButtonsSpawn cubic-bezier(0.17, 1.71, 0.66, 1)
    backwards;
}
@keyframes OngoingButtonsSpawn {
  from {
    transform: perspective(200px) rotateX(-90deg);
  }
  to {
    transform: perspective(200px) rotateX(0);
  }
}
.ongoing_button {
  flex-grow: 1;
  background: linear-gradient(to bottom, #060606dd 0, #060606ee 100%);
  border: 2px solid #060606;
  color: #fffa;
  text-align: center;
  cursor: pointer;
  margin: 0.125rem;
  padding: 0.1rem 0.3rem;
  box-shadow: 0 0 8px #0008;
  border-radius: 3px;
  transform: scale(1);
  transition:
    0.3s color,
    0.3s transform;
}
.ongoing_button:hover {
  color: #fff;
  transform: scale(1.02);
}
.ongoing_button:active {
  color: #fff2;
  transform: scale(0.95);
  transition:
    50ms color,
    50ms transform;
}
@keyframes OngoingGlowBob {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.ongoing[data-id="league"] {
  background: linear-gradient(to bottom, #8d2b2baa 0, #481521dd 100%);
  border-color: #3e1111;
  color: #ff9c8b;
}
.ongoing[data-id="league"]::after {
  border-color: #bd281544;
  box-shadow: 0 0 8px #bd281544;
  animation: 1s OngoingGlowBob infinite alternate ease-in-out;
}
.ongoing[data-id="league"] .ongoing_extra {
  color: #c55a4c;
}
.ongoing[data-id="league"] .ongoing_button {
  background: linear-gradient(to bottom, #481521dd 0, #2b0717ee 100%);
  border-color: #1f0909;
  color: #c55a4c;
}
.ongoing[data-id="league"] .ongoing_button:hover {
  color: #fff;
}
.ongoing[data-id="league"] .ongoing_button:active {
  color: #661c1c;
}
.ongoing[data-id="league"][data-state="found"] {
  background: linear-gradient(to bottom, #fffa 0, #fffd 100%);
  border-color: #fffd;
  color: #888;
}
.ongoing[data-id="league"][data-state="found"]::after {
  border-color: #ff1f01;
  box-shadow: 0 0 16px #ff1f01;
  animation: 80ms OngoingGlowBob infinite alternate ease-in-out;
}
.ongoing[data-id="roomzen"] {
  background: linear-gradient(to bottom, #7415a3aa 0, #0f0618dd 100%);
}
.ongoing[data-id="returntoroom"] {
  background: linear-gradient(to bottom, #ff0011aa 0, #dd00addd 100%);
  border-color: #ff0051;
  color: #fff;
}
.ongoing[data-id="returntoroom"]::after {
  border-color: #bdffffff;
  box-shadow: 0 0 8px #ffffff44;
  animation: 0.2s OngoingGlowBob infinite alternate ease-in-out;
}
.ongoing[data-id="returntoroom"] .ongoing_button {
  background: linear-gradient(to bottom, #ff0044dd 0, #ff00c3ee 100%);
  border-color: #ff004c;
  color: #fff;
}
.ongoing[data-id="returntoroom"] .ongoing_button:hover {
  color: #fff;
}
.ongoing[data-id="returntoroom"] .ongoing_button:active {
  color: #8a1945;
}
.leveltag {
  position: relative;
  display: inline-block;
  font-size: 1.1em;
  padding-top: 0.3em;
  padding-left: 0.3em;
  padding-bottom: 0;
  padding-right: 1em;
  line-height: 0.9em;
  color: #000d;
  font-weight: 900;
  text-shadow: 0 0 2px #0006;
}
.leveltag::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: red;
  z-index: -1;
}
.leveltag.lt_shape_0::before {
  clip-path: polygon(
    0.2em 0,
    100% 0,
    calc(100% - 0.7em) 100%,
    0.2em 100%,
    0 calc(100% - 0.2em),
    0 0.2em
  );
}
.leveltag.lt_shape_1::before {
  clip-path: polygon(
    0.2em 0,
    100% 0,
    calc(100% - 0.7em) 100%,
    0.2em 100%,
    0 calc(100% - 0.2em),
    0 0.2em
  );
}
.leveltag.lt_shape_2::before {
  clip-path: polygon(
    0.2em 0,
    100% 0,
    calc(100% - 0.6em) 50%,
    100% 100%,
    0.2em 100%,
    0 calc(100% - 0.2em),
    0 0.2em
  );
}
.leveltag.lt_shape_3::before {
  clip-path: polygon(
    0.2em 0,
    100% 0,
    calc(100% - 0.5em) 50%,
    100% 100%,
    0.2em 100%,
    0 calc(100% - 0.2em),
    0 0.2em
  );
}
.leveltag.lt_shape_4::before {
  clip-path: polygon(
    0.2em 0,
    100% 0,
    calc(100% - 0.4em) 30%,
    calc(100% - 0.4em) 70%,
    100% 100%,
    0.2em 100%,
    0 calc(100% - 0.2em),
    0 0.2em
  );
}
.leveltag.lt_golden::before {
  clip-path: polygon(
    0.2em 0,
    calc(100% - 0.7em) 0,
    calc(100% - 0.35em) 50%,
    calc(100% - 0.7em) 100%,
    0.2em 100%,
    0 calc(100% - 0.2em),
    0 0.2em
  );
}
.leveltag.lt_null::before {
  clip-path: polygon(
    0.2em 0,
    100% 0,
    calc(100% - 0.7em) 100%,
    0.2em 100%,
    0 calc(100% - 0.2em),
    0 0.2em
  );
}
.leveltag.lt_badge_color_0::before {
  background: linear-gradient(
    to bottom,
    #a9a9a9 0,
    #c9c9c9 50%,
    #e4e4e4 50%,
    #c3c3c3 100%
  );
}
.leveltag.lt_badge_color_1::before {
  background: linear-gradient(
    to bottom,
    #bc3535 0,
    #fd3535 50%,
    #ff6d6d 50%,
    #f02d2d 100%
  );
}
.leveltag.lt_badge_color_2::before {
  background: linear-gradient(
    to bottom,
    #bb6a34 0,
    #f56200 50%,
    #ffa162 50%,
    #ef7320 100%
  );
}
.leveltag.lt_badge_color_3::before {
  background: linear-gradient(
    to bottom,
    #c6b734 0,
    #e9d41e 50%,
    #edde5f 50%,
    #e9d41e 100%
  );
}
.leveltag.lt_badge_color_4::before {
  background: linear-gradient(
    to bottom,
    #82b933 0,
    #90dd21 50%,
    #b5f856 50%,
    #90dd21 100%
  );
}
.leveltag.lt_badge_color_5::before {
  background: linear-gradient(
    to bottom,
    #31b951 0,
    #23ee53 50%,
    #7df89a 50%,
    #23ee53 100%
  );
}
.leveltag.lt_badge_color_6::before {
  background: linear-gradient(
    to bottom,
    #31a89b 0,
    #22f0da 50%,
    #8afdf1 50%,
    #22f0da 100%
  );
}
.leveltag.lt_badge_color_7::before {
  background: linear-gradient(
    to bottom,
    #31599b 0,
    #1f6cec 50%,
    #84b2fe 50%,
    #1f6cec 100%
  );
}
.leveltag.lt_badge_color_8::before {
  background: linear-gradient(
    to bottom,
    #673aba 0,
    #8644ff 50%,
    #bb96ff 50%,
    #8644ff 100%
  );
}
.leveltag.lt_badge_color_9::before {
  background: linear-gradient(
    to bottom,
    #aa35ab 0,
    #e81bea 50%,
    #fea4ff 50%,
    #e81bea 100%
  );
}
.leveltag.lt_golden::before {
  background: linear-gradient(
    to bottom,
    #ffd800 0,
    #fff 50%,
    #ff7800 50%,
    #ffd800 100%
  );
}
.leveltag.lt_null::before {
  background: #111a;
}
.leveltag.lt_badge_color_0 {
  color: #000d;
  text-shadow: 0 0 2px #0006;
}
.leveltag.lt_badge_color_1 {
  color: #fffd;
  text-shadow: 0 0 2px #0006;
}
.leveltag.lt_badge_color_2 {
  color: #000d;
  text-shadow: 0 0 2px #0006;
}
.leveltag.lt_badge_color_3 {
  color: #000d;
  text-shadow: 0 0 2px #0006;
}
.leveltag.lt_badge_color_4 {
  color: #000d;
  text-shadow: 0 0 2px #0006;
}
.leveltag.lt_badge_color_5 {
  color: #000d;
  text-shadow: 0 0 2px #0006;
}
.leveltag.lt_badge_color_6 {
  color: #000d;
  text-shadow: 0 0 2px #0006;
}
.leveltag.lt_badge_color_7 {
  color: #fffd;
  text-shadow: 0 0 2px #0006;
}
.leveltag.lt_badge_color_8 {
  color: #fffd;
  text-shadow: 0 0 2px #0006;
}
.leveltag.lt_badge_color_9 {
  color: #fffd;
  text-shadow: 0 0 2px #0006;
}
.leveltag.lt_golden {
  color: #fff;
  text-shadow:
    0 0 4px #ff5400,
    0 0 4px #ff5400,
    0 0 4px #ff5400,
    0 0 2px #ff5400,
    0 0 2px #ff5400,
    0 0 2px #ff5400;
}
.leveltag.lt_null {
  color: #fff8;
  margin-right: 0.35em;
}
.leveltag::after {
  content: "";
  position: absolute;
  left: calc(100% - 0.5em);
  top: 0;
  bottom: 0;
  width: 1.5em;
  background-color: red;
  z-index: -1;
}
.leveltag.lt_shape_0::after {
  clip-path: polygon(0.7em 0, 1em 0, 0.3em 100%, 0 100%);
}
.leveltag.lt_shape_1::after {
  clip-path: polygon(0.7em 0, 1.4em 100%, 0 100%);
}
.leveltag.lt_shape_2::after {
  clip-path: polygon(0.7em 0, 0.1em 50%, 0.7em 100%, 1.3em 50%);
}
.leveltag.lt_shape_3::after {
  clip-path: polygon(0.7em 0, 0.2em 50%, 0.7em 100%, 1.2em 75%, 1.2em 25%);
}
.leveltag.lt_shape_4::after {
  clip-path: polygon(
    0.75em 0,
    0.25em 30%,
    0.25em 70%,
    0.75em 100%,
    1.25em 70%,
    1.25em 30%
  );
}
.leveltag.lt_golden::after {
  background: linear-gradient(
    to bottom,
    #88bad9 0,
    #fff 50%,
    #776ddc 50%,
    #bbb5f0 100%
  );
  clip-path: polygon(0 0, 0.3em 0, 0.65em 50%, 0.3em 100%, 0 100%, 0.3em 50%);
}
.leveltag.lt_null::after {
  background: #111a;
  clip-path: polygon(0.7em 0, 1em 0, 0.3em 100%, 0 100%);
}
.leveltag.lt_shape_color_0::after {
  background: linear-gradient(to bottom, #c9c9c9 0, #e4e4e4 50%, #c9c9c9 100%);
}
.leveltag.lt_shape_color_1::after {
  background: linear-gradient(to bottom, #fd3535 0, #ff6d6d 50%, #fd3535 100%);
}
.leveltag.lt_shape_color_2::after {
  background: linear-gradient(to bottom, #f56200 0, #ffa162 50%, #f56200 100%);
}
.leveltag.lt_shape_color_3::after {
  background: linear-gradient(to bottom, #e9d41e 0, #edde5f 50%, #e9d41e 100%);
}
.leveltag.lt_shape_color_4::after {
  background: linear-gradient(to bottom, #90dd21 0, #b5f856 50%, #90dd21 100%);
}
.leveltag.lt_shape_color_5::after {
  background: linear-gradient(to bottom, #23ee53 0, #7df89a 50%, #23ee53 100%);
}
.leveltag.lt_shape_color_6::after {
  background: linear-gradient(to bottom, #22f0da 0, #8afdf1 50%, #22f0da 100%);
}
.leveltag.lt_shape_color_7::after {
  background: linear-gradient(to bottom, #1f6cec 0, #84b2fe 50%, #1f6cec 100%);
}
.leveltag.lt_shape_color_8::after {
  background: linear-gradient(to bottom, #8644ff 0, #bb96ff 50%, #8644ff 100%);
}
.leveltag.lt_shape_color_9::after {
  background: linear-gradient(to bottom, #e81bea 0, #fea4ff 50%, #e81bea 100%);
}
#menus #footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3.2em;
  background: linear-gradient(to bottom, #181726 0, #2a284a 100%);
  border-top: 2px solid #282646;
  box-shadow: 0 0 8px #000;
  z-index: 10;
  transition: 0.3s bottom;
}
#menus.hidden #footer {
  bottom: -3.2em;
}
#menus #footer_text {
  position: fixed;
  left: 0.5em;
  bottom: 0.35em;
  font-family: HUN;
  color: #9d97f3;
  font-size: 1.75em;
}
#menus #footer_buttons {
  position: fixed;
  right: 1em;
  bottom: 0;
  z-index: 11;
  transition: 0.3s bottom;
}
#menus.hidden #footer_buttons,
#menus:not([data-menu-type="home"]) #footer_buttons {
  bottom: -5em;
}
#footer_logo_wrapper {
  pointer-events: none;
}
#footer_logo {
  opacity: 0.15;
  height: 1.5em;
  vertical-align: bottom;
  position: relative;
  top: -0.9em;
  pointer-events: all;
}
.footer_button {
  display: inline-block;
  height: 1.66em;
  vertical-align: top;
  background-color: #1a1b1f;
  border-top: 3px solid #373a45;
  border-left: 3px solid #24262c;
  border-right: 3px solid #0e0f11;
  color: #777c90;
  font-size: 3em;
  box-shadow: 0 0 8px #000;
  position: relative;
  font-family: HUN;
  border-radius: 3px;
  top: 0.66em;
  transform: translateY(0);
  filter: brightness(1);
  transition:
    0.5s transform,
    0.5s filter;
  cursor: pointer;
  margin-left: 0.33em;
  padding-left: 0.25em;
  padding-right: 0.25em;
  padding-top: 0.15em;
}
.footer_button:hover {
  transform: translateY(-0.33em);
  filter: brightness(1.2);
  transition:
    0.2s transform,
    0.2s filter;
}
.footer_button:active {
  transform: translateY(-0.66em);
  filter: brightness(1.5);
  transition:
    50ms transform,
    0s filter;
}
.footer_button#footer_supporter {
  background-color: #3c261a;
  border-top: 3px solid #683825;
  border-left: 3px solid #4f3426;
  border-right: 3px solid #2c1b12;
  color: #d94b1f;
}
#menus #footer_text a {
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}
#menus #footer_text a:hover {
  text-decoration: underline dotted;
}
#menus[data-menu-type="40l"] #header {
  background: linear-gradient(to bottom, #382b22 0, #1d1612 100%);
  border-bottom: 2px solid #48362a;
}
#menus[data-menu-type="40l"] #header_text {
  color: #a97553;
}
#menus[data-menu-type="40l"] #footer {
  background: linear-gradient(to bottom, #1d1612 0, #382b22 100%);
  border-top: 2px solid #32261e;
}
#menus[data-menu-type="40l"] #footer_text {
  color: #a97553;
}
#menus[data-menu-type="blitz"] #header {
  background: linear-gradient(to bottom, #4e2c2c 0, #311d1d 100%);
  border-bottom: 2px solid #6e2f2f;
}
#menus[data-menu-type="blitz"] #header_text {
  color: #e09f9f;
}
#menus[data-menu-type="blitz"] #footer {
  background: linear-gradient(to bottom, #311d1d 0, #472424 100%);
  border-top: 2px solid #5b2a2a;
}
#menus[data-menu-type="blitz"] #footer_text {
  color: #e09f9f;
}
#menus[data-menu-type="zen"] #header {
  background: linear-gradient(to bottom, #4e2c4e 0, #301d31 100%);
  border-bottom: 2px solid #6d2f6e;
}
#menus[data-menu-type="zen"] #header_text {
  color: #db9fe0;
}
#menus[data-menu-type="zen"] #footer {
  background: linear-gradient(to bottom, #2f1d31 0, #422447 100%);
  border-top: 2px solid #592a5b;
}
#menus[data-menu-type="zen"] #footer_text {
  color: #d89fe0;
}
#menus[data-menu-type="config"] #header,
#menus[data-menu-type="config_account"] #header,
#menus[data-menu-type="config_account_orders"] #header,
#menus[data-menu-type="config_bgmtweak"] #header,
#menus[data-menu-type="config_electron"] #header {
  background: linear-gradient(to bottom, #222738 0, #12151d 100%);
  border-bottom: 2px solid #2a2e48;
}
#menus[data-menu-type="config"] #header_text,
#menus[data-menu-type="config_account"] #header_text,
#menus[data-menu-type="config_account_orders"] #header_text,
#menus[data-menu-type="config_bgmtweak"] #header_text,
#menus[data-menu-type="config_electron"] #header_text {
  color: #5367a9;
}
#menus[data-menu-type="config"] #footer,
#menus[data-menu-type="config_account"] #footer,
#menus[data-menu-type="config_account_orders"] #footer,
#menus[data-menu-type="config_bgmtweak"] #footer,
#menus[data-menu-type="config_electron"] #footer {
  background: linear-gradient(to bottom, #12151d 0, #222738 100%);
  border-top: 2px solid #1e2132;
}
#menus[data-menu-type="config"] #footer_text,
#menus[data-menu-type="config_account"] #footer_text,
#menus[data-menu-type="config_account_orders"] #footer_text,
#menus[data-menu-type="config_bgmtweak"] #footer_text,
#menus[data-menu-type="config_electron"] #footer_text {
  color: #5367a9;
}
#menus[data-menu-type="home"] #header {
  background: linear-gradient(to bottom, #272931 0, #17191d 100%);
  border-bottom: 2px solid #343642;
}
#menus[data-menu-type="home"] #header_text {
  color: #747d99;
}
#menus[data-menu-type="home"] #footer {
  background: linear-gradient(to bottom, #1a1b1f 0, #2a2c32 100%);
  border-top: 2px solid #25262f;
}
#menus[data-menu-type="home"] #footer_text {
  color: #898fa2;
}
#menus[data-menu-type="about"] #header {
  background: linear-gradient(to bottom, #242424 0, #161616 100%);
  border-bottom: 2px solid #2c2c2c;
}
#menus[data-menu-type="about"] #header_text {
  color: #606060;
}
#menus[data-menu-type="about"] #footer {
  background: linear-gradient(to bottom, #1f1f1f 0, #292929 100%);
  border-top: 2px solid #2f2f2f;
}
#menus[data-menu-type="about"] #footer_text {
  color: #5c5c5c;
}
#menus[data-menu-type^="tetra"] #header {
  background: linear-gradient(to bottom, #334534 0, #212f22 100%);
  border-bottom: 2px solid #3d6f41;
}
#menus[data-menu-type^="tetra"] #header_text {
  color: #b8f0bc;
}
#menus[data-menu-type^="tetra"] #footer {
  background: linear-gradient(to bottom, #212b22 0, #314c34 100%);
  border-top: 2px solid #3a603f;
}
#menus[data-menu-type^="tetra"] #footer_text {
  color: #a6ddac;
}
#menus[data-menu-type="multilisting"] #header,
#menus[data-menu-type="playmulti"] #header {
  background: linear-gradient(to bottom, #35252f 0, #241b21 100%);
  border-bottom: 2px solid #3e2936;
}
#menus[data-menu-type="multilisting"] #header_text,
#menus[data-menu-type="playmulti"] #header_text {
  color: #eeaed5;
}
#menus[data-menu-type="multilisting"] #footer,
#menus[data-menu-type="playmulti"] #footer {
  background: linear-gradient(to bottom, #2b1e26 0, #37232f 100%);
  border-top: 2px solid #412837;
}
#menus[data-menu-type="multilisting"] #footer_text,
#menus[data-menu-type="playmulti"] #footer_text {
  color: #ac7195;
}
#menus[data-menu-type="zenith"] #header {
  background: linear-gradient(to bottom, #300f0b 0, #4c1d0c 100%);
  border-bottom: 2px solid #b03d1a;
}
#menus[data-menu-type="zenith"] #header_text {
  color: #eeb091;
  transition: 0.2s transform ease-out;
}
#menus[data-menu-type="zenith"] #footer {
  background: linear-gradient(to bottom, #32110e 0, #4f1a0a 100%);
  border-top: 2px solid #bf421c;
}
#menus[data-menu-type="zenith"] #footer_text {
  color: #ac7957;
}
body.zenith_reversed #menus[data-menu-type="zenith"] #header {
  background: linear-gradient(to bottom, #2a070e 0, #430b16 100%);
  border-bottom: 2px solid #ff0059;
  animation: 1s ZenithReverseHeaderIn ease-out;
}
body.zenith_reversed #menus[data-menu-type="zenith"] #header_text {
  color: #ff0059;
  animation: 1s ZenithReverseTextIn ease-out;
  transform: scaleY(-1) translateY(10px);
}
body.zenith_reversed #menus[data-menu-type="zenith"] #footer {
  background: linear-gradient(to bottom, #27060d 0, #410b16 100%);
  border-top: 2px solid #ff0059;
  animation: 1s ZenithReverseFooterIn ease-out;
}
body.zenith_reversed #menus[data-menu-type="zenith"] #footer_text {
  color: #ff0059;
  animation: 1s ZenithReverseTextIn ease-out;
}
@keyframes ZenithReverseHeaderIn {
  from {
    border-bottom-color: #ff58a9;
  }
  to {
    border-bottom-color: #ff0059;
  }
}
@keyframes ZenithReverseFooterIn {
  from {
    border-top-color: #ff58a9;
  }
  to {
    border-top-color: #ff0059;
  }
}
@keyframes ZenithReverseTextIn {
  from {
    color: #ff58a9;
  }
  to {
    color: #ff0059;
  }
}
#menus[data-menu-type="league"] #header {
  background: linear-gradient(to bottom, #572222 0, #702121 100%);
  border-bottom: 2px solid #732424;
}
#menus[data-menu-type="league"] #header_text {
  color: #eeaeae;
}
#menus[data-menu-type="league"] #footer {
  background: linear-gradient(to bottom, #381919 0, #541717 100%);
  border-top: 2px solid #731f1f;
}
#menus[data-menu-type="league"] #footer_text {
  color: #ac7171;
}
#menus[data-menu-type="endleague"] #header {
  background: linear-gradient(to bottom, #27235f 0, #1b193d 100%);
  border-bottom: 2px solid #332e7f;
}
#menus[data-menu-type="endleague"] #header_text {
  color: #9d97f3;
}
#menus[data-menu-type="endleague"] #footer {
  background: linear-gradient(to bottom, #110f2e 0, #262267 100%);
  border-top: 2px solid #201b6c;
}
#menus[data-menu-type="endleague"] #footer_text {
  color: #9d97f3;
}
.league_victory #menus[data-menu-type="endleague"] #header {
  background: linear-gradient(to bottom, #524118 0, #352913 100%);
  border-bottom: 2px solid #ca8917;
}
.league_victory #menus[data-menu-type="endleague"] #header_text {
  color: #f3d897;
}
.league_victory #menus[data-menu-type="endleague"] #footer {
  background: linear-gradient(to bottom, #3a2e0e 0, #594211 100%);
  border-top: 2px solid #cc9222;
}
.league_victory #menus[data-menu-type="endleague"] #footer_text {
  color: #f3d697;
}
#menus[data-menu-type="lobby"] #header,
#menus[data-menu-type="victory"] #header {
  background: linear-gradient(to bottom, #472869 0, #221344 100%);
  border-bottom: 2px solid #351d77;
}
#menus[data-menu-type="lobby"] #header_text,
#menus[data-menu-type="victory"] #header_text {
  color: #f0c1eb;
}
#menus[data-menu-type="lobby"] #footer,
#menus[data-menu-type="victory"] #footer {
  background: linear-gradient(to bottom, #251c3f 0, #371d53 100%);
  border-top: 2px solid #3f1c7a;
}
#menus[data-menu-type="lobby"] #footer_text,
#menus[data-menu-type="victory"] #footer_text {
  color: #e591dc;
}
.room_spectating #menus[data-menu-type="lobby"] #header {
  background: linear-gradient(to bottom, #160529 0, #090218 100%);
  border-bottom: 2px solid #5225cf;
}
.room_spectating #menus[data-menu-type="lobby"] #header_text {
  color: #8c65fa;
}
.room_spectating #menus[data-menu-type="lobby"] #footer {
  background: linear-gradient(to bottom, #120b26 0, #210e35 100%);
  border-top: 2px solid #5225cf;
}
.room_spectating #menus[data-menu-type="lobby"] #footer_text {
  color: #8e62ff;
}
#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;
}
#config_account_country .flag {
  height: 0.88em;
  vertical-align: -15%;
}
#config_account_avatar .avatar {
  height: 2em;
  vertical-align: -70%;
}
#config_account_banner .banner {
  height: 2em;
  width: 10em;
  object-fit: cover;
  vertical-align: -70%;
}
.account_connection {
  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;
  padding: 0.5em;
  filter: brightness(1);
  transition: 0.5s filter;
  display: inline-block;
  margin-right: 1em;
  min-width: 22em;
  padding-right: 8em;
}
.account_connection.linked {
  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;
}
.account_connection:not(.linked) .account_connection_show {
  display: none;
}
.account_connection h1 {
  font-size: 1.5em;
  font-weight: 900;
  display: inline-block;
  margin: 0;
  margin-top: 0.25em;
  line-height: 1.1em;
}
.account_connection h1 span {
  font-size: 1.5em;
  vertical-align: -17.5%;
  font-weight: 500;
  margin-right: 0.25em;
}
.account_connection p {
  font-size: 1.3em;
  font-weight: 500;
  font-family: "C";
  display: inline-block;
  vertical-align: baseline;
  margin: 0;
  margin-left: 0.5em;
  margin-top: 0.3em;
}
.account_connection .button_tr_h {
  right: 0.5em;
  top: 0.5em;
}
.scroller_block > p.account_warning {
  padding: 0.5em;
  color: #ff9797;
  background-color: #853636;
  border-radius: 3px;
  margin: 0.2em 0;
  font-size: 1.25em;
}
.scroller_block > p.account_warning.hidden {
  display: none;
}
#config_account_supporter_star {
  margin-left: -1.25em;
}
#config_account_supporter_bar {
  position: absolute;
  left: calc(150px - 1.25em);
  right: 18em;
  top: calc(50% - 20px);
  height: 26px;
  background:
    left/var(--progress) 100% no-repeat
      linear-gradient(
        to bottom,
        #f6a45b 0,
        #f19340 50%,
        #e65e27 50%,
        #e74209 100%
      ),
    linear-gradient(
      to bottom,
      #111111dd 0,
      #141414dd 50%,
      #222222dd 50%,
      #262626dd 100%
    );
  border: 1px solid #333;
  border-image: linear-gradient(
      to right,
      #ff6305 0%,
      #ff6305 var(--progress),
      #845a41 var(--progress),
      #333 calc(var(--progress) + 5%),
      #333 100%
    )
    1;
  color: #fff;
  font-family: "C";
  text-shadow: 0 1px 3px #000;
  box-sizing: border-box;
  padding-left: 0.5em;
  padding-top: 0.05em;
}
#config_account_supporter_bar.noglow {
  border-image: linear-gradient(
      to right,
      #ff6305 0%,
      #ff6305 var(--progress),
      #333 var(--progress),
      #333 100%
    )
    1;
}
#config_account_supporter_details {
  position: absolute;
  left: calc(151px - 1.25em);
  right: 18em;
  top: calc(50% + 10px);
  color: #fff;
  font-family: "C";
  box-sizing: border-box;
  padding-left: 0.5em;
}
#config_account_supporter_support {
  top: 1.2em;
  width: 11em;
  background-color: #e65e27;
  border-top: 3px solid #f6a45b;
  border-left: 3px solid #f19340;
  border-bottom: 3px solid #e74209;
  border-right: 3px solid #ff6305;
  color: #f0c59f;
  right: 0;
}
#about_supporter {
  background-color: #3c261a;
  border-top: 3px solid #683825;
  border-left: 3px solid #4f3426;
  border-bottom: 3px solid #1b110b;
}
#about_supporter > h1 {
  color: #f3663a;
}
#about_supporter > p {
  color: #b25031;
}
#about_merch {
  background-color: #3c191f;
  border-top: 3px solid #68242b;
  border-left: 3px solid #4f252d;
  border-bottom: 3px solid #1b0b10;
}
#about_merch > h1 {
  color: #f33d67;
}
#about_merch > p {
  color: #b2314d;
}
#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_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;
}
.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;
}
#version_line {
  font-size: 0.8em;
  color: #fff;
  margin: 0;
  opacity: 0.5;
}
#about_disclaimer {
  color: #fff;
  opacity: 0.5;
  line-height: 1.1em;
}
#extra_line {
  font-family: "C";
  font-size: 1.1em;
  color: #fff;
  margin: 0;
}
#extra_line a {
  color: #fff;
  text-decoration: underline dotted;
  text-decoration-skip-ink: none;
}
.adblock_st {
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}
.adblock_st:hover {
  text-decoration: dotted underline;
}
.adblock_st.noclick {
  cursor: default !important;
  text-decoration: none !important;
}
.glasstop {
  margin: -2.5em 0;
  margin-left: calc(-1 * var(--lpadded, 15vw));
  margin-bottom: 2.5em;
  padding: 0 var(--lpadded, 15vw);
  background:
    linear-gradient(to bottom, #2226 0, #4446 100%), url("/tetr-res/crystal.png");
  border-bottom: 2px solid #fff6;
  font-family: HUN;
  text-align: left;
  position: relative;
}
.glasstop #league_rating {
  display: inline-block;
  font-size: 5vw;
  color: #fff;
  font-weight: 900;
  text-shadow:
    0 0.2vw #fff4,
    0 0 8px #fff;
  margin: 0;
  margin-top: 1.75vw;
}
.glasstop #league_rating span {
  font-size: 0.5em;
}
.glasstop #league_ticker {
  font-size: 1.5em;
  color: #fff8;
  font-weight: 500;
  text-shadow:
    0 0.1vw #fff3,
    0 0 8px #fff;
  margin: 0;
  margin-top: 0.25em;
  margin-bottom: 0.75vw;
  margin-left: 0.2em;
}
.glasstop #league_ticker span {
  color: #fff;
  font-weight: 900;
}
.glasstop #league_rank {
  display: inline-block;
  float: right;
  height: 6vw;
  margin-top: 1.65vw;
}
.glasstop #league_rank.hidden {
  display: none;
}
.glasstop #league_warning {
  display: inline-block;
  position: absolute;
  right: 21vw;
  top: 4vw;
  font-size: 1.5vw;
  color: #fff4;
  text-shadow:
    0 0.1vw #fff2,
    0 0 8px #fff4;
}
.glasstop #league_warning.hidden {
  display: none;
}
.glasstop #league_placement {
  display: inline-block;
  position: absolute;
  right: 22vw;
  top: 3.5vw;
  font-size: 2vw;
  color: #fff4;
  background-color: #000a;
  padding: 0.4vw 1.5vw;
  padding-bottom: 0;
  clip-path: polygon(
    1vw 0,
    calc(100% - 1vw) 0,
    100% 50%,
    calc(100% - 1vw) 100%,
    1vw 100%,
    0 50%
  );
}
.glasstop #league_placement.hidden,
.league_placement_inline.hidden {
  display: none;
}
.league_placement_inline {
  display: inline-block;
  font-size: 0.6em;
  color: #fff4;
  background-color: #0003;
  padding: 0.3em 1em;
  padding-bottom: 0;
  clip-path: polygon(
    0.66em 0,
    calc(100% - 0.66em) 0,
    100% 50%,
    calc(100% - 0.66em) 100%,
    0.66em 100%,
    0 50%
  );
  vertical-align: middle;
  text-shadow: none;
}
.lpi_big {
  font-size: 3vw;
  font-family: HUN;
  vertical-align: 60%;
  margin-left: 0.5em;
  background-color: #000a;
}
.glasstop #league_placement span,
.league_placement_inline span {
  color: #fff8;
  text-shadow: 0 0 8px #fff4;
  font-weight: 900;
}
.glasstop #league_placement.t100,
.league_placement_inline.t100 {
  color: #0004;
  background:
    linear-gradient(
      to bottom,
      #b2bad0 0,
      #a3abc1 50%,
      #b8c3de 50%,
      #d5def4 100%
    ),
    url("/tetr-res/crystal.png");
}
.glasstop #league_placement.t100 span,
.league_placement_inline.t100 span {
  color: #000;
  text-shadow: 0 0 8px #fff0;
}
.glasstop #league_placement.t10,
.league_placement_inline.t10 {
  color: #0004;
  background:
    linear-gradient(
      to bottom,
      #f7ca52 0,
      #ddb035 50%,
      #eace79 50%,
      #f3d176 100%
    ),
    url("/tetr-res/crystal.png");
}
.glasstop #league_placement.t10 span,
.league_placement_inline.t10 span {
  color: #000;
  text-shadow: 0 0 8px #fff0;
}
.glasstop #league_placement.t1,
.league_placement_inline.t1 {
  color: #0004;
  background:
    linear-gradient(
      to bottom,
      #ce52f7 0,
      #cb35dd 50%,
      #d979ea 50%,
      #e776f3 100%
    ),
    url("/tetr-res/crystal.png");
}
.glasstop #league_placement.t1 span,
.league_placement_inline.t1 span {
  color: #000;
  text-shadow: 0 0 8px #fff0;
}
#enter_matchmaking {
  text-align: center;
  padding-top: 2em;
  padding-bottom: 1.5em;
  box-shadow: 0 8px #230c0c;
  transform: translateY(0);
  cursor: pointer;
  transition:
    0.3s transform,
    0.3s filter,
    0.3s box-shadow;
}
#enter_matchmaking:hover {
  box-shadow: 0 6px #230c0c;
  transform: translateY(2px);
  filter: brightness(1.2);
}
#enter_matchmaking:active {
  box-shadow: 0 2px #230c0c;
  transform: translateY(6px);
  filter: brightness(4);
  transition:
    50ms transform,
    50ms filter,
    50ms box-shadow;
}
.matchmaking #enter_matchmaking {
  background-color: #420808 !important;
  border-top: 3px solid #1f0404 !important;
  border-left: 3px solid #2c0404 !important;
  border-bottom: 3px solid #680c0c !important;
  border-right: 3px solid #5b0b0b !important;
  box-shadow: 0 4px #480909;
  transform: translateY(4px);
  transition:
    0.3s transform,
    0.3s filter,
    0.3s box-shadow;
}
.matchmaking #enter_matchmaking:hover {
  box-shadow: 0 2px #480909;
  transform: translateY(6px);
}
.matchmaking #enter_matchmaking:active {
  box-shadow: 0 0 #480909;
  transform: translateY(8px);
  transition:
    50ms transform,
    50ms filter,
    50ms box-shadow;
}
.scroller_block#enter_matchmaking h1 {
  color: #ff9c9c !important;
  font-size: 3vw;
  margin: 0;
}
.scroller_block#enter_matchmaking p {
  color: #b26565 !important;
  font-size: 1vw;
  margin: 0;
}
.matchmaking .scroller_block#enter_matchmaking h1 {
  color: #eb5252 !important;
  animation: 1s EMMbob infinite alternate ease-in-out;
}
.matchmaking .scroller_block#enter_matchmaking p {
  color: #b53232 !important;
  animation: 1s EMMbob infinite alternate ease-in-out;
}
.inpair #enter_matchmaking {
  background-color: #ddd !important;
  border-top: 3px solid #aaa !important;
  border-left: 3px solid #ccc !important;
  border-bottom: 3px solid #fff !important;
  border-right: 3px solid #eee !important;
  box-shadow: 0 4px #eee;
  transform: translateY(4px);
  transition: none;
  pointer-events: none;
}
.inpair .scroller_block#enter_matchmaking h1 {
  color: #888 !important;
}
.inpair .scroller_block#enter_matchmaking p {
  color: #aaa !important;
}
@keyframes EMMbob {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.5;
  }
}
#mm_playercount {
  color: #fff4;
  text-align: center;
  font-family: HUN;
  font-size: 1.75em;
  font-weight: 900;
  margin-right: 12.75vw;
}
#mm_playercount_count,
#mm_queuecount_count {
  color: #fff;
  font-size: 3em;
  vertical-align: middle;
}
#mm_avgtime {
  color: #fff4;
  text-align: center;
  font-family: HUN;
  font-size: 1.15em;
  font-weight: 900;
  margin-right: 12.75vw;
  margin-top: -1em;
  margin-bottom: 1.5em;
}
#mm_avgtime.hidden {
  display: none;
}
#mm_avgtime_time {
  color: #fff;
  font-size: 1.4em;
  vertical-align: middle;
}
#mm_avgtime_time span {
  font-size: 0.75em;
  vertical-align: baseline;
}
#league_tltimer {
  margin-bottom: 2.5rem;
  margin-top: -2.5rem;
  margin-left: -15vw;
  color: #ccc;
  font-size: 1.15rem;
  cursor: pointer;
  position: relative;
  padding: 0.4rem 2rem;
  padding-bottom: 0.2rem;
  isolation: isolate;
  font-family: HUN;
  text-align: center;
  transition: 0.3s color;
}
#league_tltimer.hidden {
  display: none;
}
#league_tltimer b {
  color: #eee;
  transition: 0.3s color;
}
#league_tltimer::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -2px;
  left: 0;
  right: 0;
  height: 2px;
  pointer-events: none;
  background-color: #666;
  transition: 0.3s background-color;
}
#league_tltimer::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: calc(50% - 15rem);
  right: calc(50% - 15rem);
  bottom: 0;
  background-color: #666;
  clip-path: polygon(0 0, 100% 0, calc(100% - 2rem) 100%, 2rem 100%);
  transition: 0.3s background-color;
}
#league_tltimer:hover {
  color: #fff;
}
#league_tltimer:hover::before {
  background-color: #ff4133;
}
#league_tltimer:hover::after {
  background-color: #ff4133;
}
#roommodeblurb {
  position: fixed;
  right: 0.5em;
  text-align: right;
  bottom: -1.55em;
  color: #634d83;
  font-family: HUN;
  font-size: 1.75em;
  font-weight: 900;
  z-index: 10;
  pointer-events: none;
}
#startroom {
  position: fixed;
  left: calc(50% - 5em);
  text-align: center;
  width: 10em;
  bottom: -1.75em;
  transform: translateY(0);
  color: #b190e2;
  font-family: HUN;
  font-size: 2.2em;
  filter: brightness(1) drop-shadow(0px -2px #16101e)
    drop-shadow(-2px 0px #16101e) drop-shadow(2px 0px #16101e)
    drop-shadow(0px 4px 8px #0004);
  transition:
    0.5s transform,
    0.5s filter,
    0.5s opacity;
  padding-top: 0.3em;
  padding-bottom: 0.3em;
  cursor: pointer;
  font-weight: 900;
  z-index: 10;
}
#startroom::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, #2e1c49 0, #221437 100%);
  clip-path: polygon(0 100%, 10% 0, 90% 0, 100% 100%);
  z-index: -1;
}
#startroom:hover {
  transition:
    0.2s transform,
    0.2s filter,
    0.5s opacity;
  transform: translateY(-0.15em);
  filter: brightness(1.2) drop-shadow(0px -2px #16101e)
    drop-shadow(-2px 0px #16101e) drop-shadow(2px 0px #16101e)
    drop-shadow(0px 4px 8px #0004);
}
#startroom:active {
  transition:
    0.1s transform,
    0.1s filter,
    0.5s opacity;
  transform: translateY(-0.25em);
  filter: brightness(1.3) drop-shadow(0px -2px #16101e)
    drop-shadow(-2px 0px #16101e) drop-shadow(2px 0px #16101e)
    drop-shadow(0px 4px 8px #0004);
}
#sr_playercount {
  font-weight: 500;
  color: #634c85;
  font-size: 0.35em;
}
#roomview.spectating #startroom {
  filter: brightness(1) drop-shadow(0px -2px #5225cf)
    drop-shadow(-2px 0px #5225cf) drop-shadow(2px 0px #5225cf)
    drop-shadow(0px 4px 8px #0004);
}
#roomview.spectating #startroom::before {
  background: linear-gradient(to bottom, #110721 0, #0c0319 100%);
}
#roomview:not(.hosting) #startroom,
#roomview[data-state="ingame"] #startroom,
#startroom.autoroom,
#startroom.hidden {
  transform: translateY(3em);
}
#startroom.disabled {
  opacity: 0.5;
  pointer-events: none;
}
#room_switchbracket {
  position: fixed;
  left: -1em;
  text-align: center;
  width: 10em;
  bottom: -1.75em;
  transform: translateY(0);
  color: #b190e2;
  font-family: HUN;
  font-size: 2.2em;
  filter: brightness(1) drop-shadow(0px -2px #16101e)
    drop-shadow(-2px 0px #16101e) drop-shadow(2px 0px #16101e)
    drop-shadow(0px 4px 8px #0004);
  transition:
    0.5s transform,
    0.5s filter,
    0.5s opacity;
  padding-top: 0.3em;
  padding-bottom: 0.3em;
  cursor: pointer;
  font-weight: 900;
  z-index: 10;
}
#room_switchbracket::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, #2e1c49 0, #221437 100%);
  clip-path: polygon(0 100%, 0% 0, 90% 0, 100% 100%);
  z-index: -1;
}
#room_switchbracket:hover {
  transition:
    0.2s transform,
    0.2s filter,
    0.5s opacity;
  transform: translateY(-0.15em);
  filter: brightness(1.2) drop-shadow(0px -2px #16101e)
    drop-shadow(-2px 0px #16101e) drop-shadow(2px 0px #16101e)
    drop-shadow(0px 4px 8px #0004);
}
#room_switchbracket:active {
  transition:
    0.1s transform,
    0.1s filter,
    0.5s opacity;
  transform: translateY(-0.25em);
  filter: brightness(1.3) drop-shadow(0px -2px #16101e)
    drop-shadow(-2px 0px #16101e) drop-shadow(2px 0px #16101e)
    drop-shadow(0px 4px 8px #0004);
}
#swb_addendum {
  font-weight: 500;
  color: #634c85;
  font-size: 0.35em;
}
#roomview.spectating #room_switchbracket {
  filter: brightness(1) drop-shadow(0px -2px #5225cf)
    drop-shadow(-2px 0px #5225cf) drop-shadow(2px 0px #5225cf)
    drop-shadow(0px 4px 8px #0004);
}
#roomview.spectating #room_switchbracket::before {
  background: linear-gradient(to bottom, #110721 0, #0c0319 100%);
}
#room_switchbracket.hidden {
  transform: translateY(3em);
}
#room_ingame_warning {
  position: fixed;
  left: calc(50% - 10em);
  text-align: center;
  width: 20em;
  bottom: -1.75em;
  transform: translateY(0);
  color: #b190e2;
  font-family: HUN;
  font-size: 2.2em;
  filter: brightness(1) drop-shadow(0px -2px #16101e)
    drop-shadow(-2px 0px #16101e) drop-shadow(2px 0px #16101e)
    drop-shadow(0px 4px 8px #0004);
  padding-top: 0.3em;
  padding-bottom: 0.3em;
  font-weight: 900;
  z-index: 10;
  transition:
    0.5s transform,
    0.5s filter,
    0.5s opacity;
}
#room_ingame_warning::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background:
    linear-gradient(to bottom, transparent 0, #0008 100%),
    repeating-linear-gradient(
      -45deg,
      #2e1c49,
      #2e1c49 10px,
      #221437 10px,
      #221437 20px
    );
  clip-path: polygon(0 100%, 5% 0, 95% 0, 100% 100%);
  z-index: -1;
}
#igw_addendum {
  font-weight: 500;
  color: #634c85;
  font-size: 0.35em;
}
#igw_addendum div {
  display: inline-block;
  width: 8em;
  background: linear-gradient(to bottom, #b190e2 0, #634c85 100%);
  color: #000b;
  font-weight: 900;
  filter: brightness(1);
  padding: 0.4em 0.5em;
  padding-bottom: 1.1em;
  transform: translateY(0);
  transition:
    0.5s transform,
    0.5s filter,
    0.5s opacity;
  font-size: 1.5em;
  margin: 0 0.5em;
  margin-bottom: -1.05em;
  cursor: pointer;
}
#igw_addendum div:hover {
  transition:
    0.2s transform,
    0.2s filter,
    0.5s opacity;
  transform: translateY(-0.15em);
  filter: brightness(1.2);
}
#igw_addendum div:active {
  transition:
    0.1s transform,
    0.1s filter,
    0.5s opacity;
  transform: translateY(-0.25em);
  filter: brightness(1.3);
}
#igw_addendum div#igw_spectate {
  clip-path: polygon(1em 0%, 100% 0%, 100% 100%, 0% 100%);
  padding-right: 0;
}
#igw_addendum div#igw_zen {
  clip-path: polygon(0% 0%, calc(100% - 1em) 0%, 100% 100%, 0% 100%);
  padding-left: 0;
}
#roomview:not([data-state="ingame"]) #room_ingame_warning,
.inmulti #room_ingame_warning {
  transform: translateY(3em);
}
#roomview.spectating #room_ingame_warning {
  filter: brightness(1) drop-shadow(0px -2px #5225cf)
    drop-shadow(-2px 0px #5225cf) drop-shadow(2px 0px #5225cf)
    drop-shadow(0px 4px 8px #0004);
}
#roomview.spectating #room_ingame_warning::before {
  background:
    linear-gradient(to bottom, transparent 0, #0008 100%),
    repeating-linear-gradient(
      -45deg,
      #1c0d32,
      #1c0d32 10px,
      #140827 10px,
      #140827 20px
    );
}
#room_auto_info {
  position: fixed;
  left: 50%;
  text-align: center;
  bottom: -1.65em;
  transform: translateX(-50%);
  color: #684996;
  font-family: HUN;
  font-size: 1.6em;
  transition:
    0.5s transform,
    0.5s opacity,
    0.5s color,
    0.5s text-shadow;
  font-weight: 900;
  z-index: 10;
  pointer-events: none;
}
#room_auto_info::after,
#room_auto_info::before {
  content: "";
  position: absolute;
  top: 0.2em;
  width: 0.3em;
  height: 0.3em;
  background-color: #684996;
  transform: rotate(45deg);
}
#room_auto_info::before {
  left: -0.7em;
}
#room_auto_info::after {
  right: -0.7em;
}
#room_auto_info.active::after,
#room_auto_info.active::before {
  background-color: #cfaeff;
  transform: rotate(45deg);
}
@keyframes roomAutoInfoSpinner {
  from {
    transform: rotate(45deg);
  }
  to {
    transform: rotate(135deg);
  }
}
#room_auto_info.active::before {
  animation: 0.1s roomAutoInfoSpinner linear infinite reverse;
}
#room_auto_info.active::after {
  animation: 0.1s roomAutoInfoSpinner linear infinite;
}
#room_auto_info.hidden {
  transform: translateX(-50%) scaleY(0);
  opacity: 0;
}
#room_auto_info.active {
  color: #cfaeff;
  text-shadow: 0 0 6px #b190e244;
  animation: 0.5s roomAutoInfoBob ease-in-out infinite alternate;
}
@keyframes roomAutoInfoBob {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.5;
  }
}
#room_auto_info span {
  color: #fff;
  text-shadow: 0 0 6px #cfaeff88;
}
#leaveroom {
  position: fixed;
  left: 0;
  top: -2.25em;
  transform: translateX(-2em);
  background-color: #0006;
  border-top: 3px solid #1116;
  border-right: 3px solid #2226;
  border-bottom: 3px solid #0006;
  box-shadow: 0 0 8px #0004;
  color: #fffa;
  font-family: HUN;
  font-size: 1.8em;
  border-radius: 3px;
  filter: brightness(1);
  transition:
    0.5s transform,
    0.5s filter,
    0.5s opacity,
    0.5s background-color,
    0.5s border-top,
    0.5s border-right,
    0.5s border-bottom,
    0.5s color;
  padding-top: 0.5em;
  padding-bottom: 0.3em;
  padding-left: 3.5em;
  padding-right: 0.5em;
  cursor: pointer;
}
#leaveroom:hover {
  transform: translateX(-0.5em);
  filter: brightness(1.2);
  background-color: #4006;
  border-top: 3px solid #4116;
  border-right: 3px solid #4226;
  border-bottom: 3px solid #4006;
  color: #faa;
  transition:
    0.2s transform,
    0.2s filter,
    0.5s opacity,
    0.2s background-color,
    0.2s border-top,
    0.2s border-right,
    0.2s border-bottom,
    0.2s color;
}
#leaveroom:active {
  transform: translateX(0);
  filter: brightness(1.5);
  transition:
    50ms transform,
    0s filter,
    0.5s opacity,
    0.5s background-color,
    0.5s border-top,
    0.5s border-right,
    0.5s border-bottom,
    0.5s color;
}
#leaveroom.hidden {
  opacity: 0;
  transform: translateX(-10em);
  pointer-events: none;
}
#roomid_container {
  position: absolute;
  left: calc(50% - 11em);
  right: calc(50% - 11em);
  top: -4em;
  background-color: #0004;
  text-align: center;
  border: 1px solid #1114;
  box-shadow: inset 0 4px 8px #0003;
  font-family: HUN;
  cursor: pointer;
  border-radius: 3px;
  height: 3.45em;
  overflow: hidden;
  transition: 0.3s filter;
}
#roomid_container:hover {
  filter: brightness(1.1);
}
#roomid_container > div {
  color: #fff4;
  font-family: HUN;
  margin-top: 0.1em;
  pointer-events: none;
}
#roomid_container > #roomid {
  color: #fff;
  font-family: PFW;
  font-size: 2.5em;
  text-shadow: 0 0 4px #fff;
  margin-top: -0.1em;
}
#roomview:not(.hosting) #roomid_container #roomid_change,
body.anon #roomid_container #roomid_change {
  display: none;
}
#roomid_container #roomid_change {
  color: #fff;
  opacity: 0;
  transition: 0.3s opacity;
  pointer-events: all;
  position: absolute;
  display: inline-block;
  right: 0.1em;
  top: 0.1em;
}
#roomid_container:hover #roomid_change {
  opacity: 0.5;
}
#roomid_container #roomid_change:hover {
  opacity: 1;
}
.hideroomids #roomid_container > #roomid {
  color: transparent !important;
  text-shadow: none !important;
  display: inline-block;
  background-image: url("/tetr-res/logo.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.right_scroller {
  position: fixed;
  left: 0;
  right: 0;
  top: 4em;
  bottom: 3em;
  padding: 2.5em 0;
  padding-left: 15vw;
  background: linear-gradient(to right, transparent 80%, #000a 100%);
  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;
}
.noanim .right_scroller {
  transition: none;
}
.menu_fullscreen > .right_scroller {
  top: 0;
  bottom: 0;
}
.mpmpu-mounted .mpmpu-crushable {
  padding-left: max(330px, 15vw);
  --lpadded: max(330px, 15vw);
}
#list_request {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #000d;
  z-index: 9999999;
  transition: 0.3s opacity;
}
#list_request.hidden {
  opacity: 0;
  pointer-events: none;
}
#list_request_scroller {
  top: 0;
  bottom: 0;
  padding-top: 6.5em;
  padding-bottom: 5.5em;
}
#list_request .scroller_item {
  background-color: #1a161d;
  border-top: 3px solid #453351;
  border-left: 3px solid #392e40;
  border-bottom: 3px solid #0a080b;
}
#list_request .scroller_item > h1 {
  color: #dac8e7;
}
#list_request .scroller_item > p {
  color: #7c6b88;
}
.player_count {
  position: absolute;
  right: 2.5em;
  top: 0.5em;
  bottom: 0.5em;
  background-color: #0003;
  border-radius: 3px;
  font-family: HUN;
  color: #fff;
  font-size: 3em;
  font-weight: 900;
  padding: 0 0.5em;
  padding-top: 0.3em;
  pointer-events: none;
}
.player_count::after {
  content: "ǽ";
  font-size: 0.6em;
  color: #fffa;
}
.player_count.empty {
  color: #fff8;
}
.player_count.empty::after {
  color: #fff5;
}
.player_count.room_count::after {
  content: "rooms";
  margin-left: 0.2em;
}
.player_count.room_count.singular::after {
  content: "room";
}
.player_count.zen_count::before {
  content: "lvl";
  margin-right: 0.2em;
  font-size: 0.6em;
  color: #fffa;
}
.player_count.zen_count::after {
  content: unset;
}
.scroller_item {
  height: 5em;
  background-color: #2a211b;
  border-top: 3px solid #643b1d;
  border-left: 3px solid #48301e;
  border-bottom: 3px solid #13100e;
  box-shadow: 0 0 8px #000;
  position: relative;
  font-family: HUN;
  border-radius: 3px;
  text-align: left;
  left: 6em;
  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;
}
.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;
}
.centered_block {
  position: relative;
  text-align: center;
  border: 3px solid #0000;
  width: 70vw;
  padding: 1em;
  margin-bottom: 1em;
  font-family: HUN;
}
.scroller_block > .guide_text {
  color: #ccc;
  font-size: 1.1em;
  margin: 0;
  margin-bottom: 0.8em;
  margin-top: 0.5em;
}
.scroller_block > h1 {
  color: #657497;
  font-size: 2.5em;
  margin: 0;
  margin-bottom: 0.15em;
}
.scroller_block.collapsible > h1 {
  cursor: pointer;
}
.scroller_block.collapsible > h1::before {
  content: "Dz";
  display: inline-block;
  width: 1.2em;
  text-align: center;
  background-color: #0007;
  border-radius: 3px;
  padding-top: 0.2em;
  padding-bottom: 0;
  margin-right: 0.2em;
  margin-top: -0.25em;
  transition: 0.2s background-color;
}
.scroller_block.collapsible > h1:hover::before {
  background-color: #000a;
}
.scroller_block.collapsible.collapsed > h1::before {
  content: "dz";
  background-color: #0004;
}
.scroller_block.collapsible.collapsed > h1:hover::before {
  background-color: #0008;
}
.scroller_block.collapsible.collapsed > h1 {
  margin-bottom: -0.2em;
}
.scroller_block.collapsible.collapsed > h1 ~ * {
  display: none;
}
.scroller_block > h2 {
  color: #657497;
  font-size: 1.25em;
  margin: 0;
  margin-bottom: 0.15em;
}
.scroller_block > p {
  color: #7a91c8;
  font-size: 1.35em;
  margin: 0;
  margin-bottom: 0.15em;
}
.mega_block {
  height: 6em;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  filter: brightness(1);
  transition: 0.3s filter;
}
.mega_block > h1 {
  text-shadow:
    0 6px #0006,
    0 6px 16px #000;
  pointer-events: none;
}
.mega_block > p {
  font-size: 1.05em;
  text-shadow:
    0 2px #0006,
    0 2px 8px #000;
  pointer-events: none;
}
.mega_block:hover {
  filter: brightness(1.2);
}
.mega_block.hw {
  width: calc(35vw - 1.3em - 6px);
}
.mega_block.hw-r {
  margin-top: calc(-9em - 6px);
  margin-left: calc(35vw + 1.3em + 6px);
}
.scroller_block hr {
  border: none;
  background-color: #000a;
  height: 1px;
  margin: -1em;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}
#menus[data-menu-type="40l"] .scroller_block {
  background-color: #523d2d;
  border-top: 3px solid #99633b;
  border-left: 3px solid #77563e;
  border-bottom: 3px solid #271c14;
  border-right: 3px solid #3b291c;
}
#menus[data-menu-type="blitz"] .scroller_block {
  background-color: #3e2424;
  border-top: 3px solid #794545;
  border-left: 3px solid #623d3d;
  border-bottom: 3px solid #241616;
  border-right: 3px solid #321d1d;
}
#menus[data-menu-type="zen"] .scroller_block {
  background-color: #312133;
  border-top: 3px solid #754579;
  border-left: 3px solid #5f3d62;
  border-bottom: 3px solid #231624;
  border-right: 3px solid #301d32;
}
#menus[data-menu-type="custom"] .scroller_block {
  background-color: #201e36;
  border-top: 3px solid #332f5c;
  border-left: 3px solid #262336;
  border-bottom: 3px solid #110f17;
  border-right: 3px solid #181522;
}
#menus[data-menu-type^="tetra"] .scroller_block {
  background-color: #243e25;
  border-top: 3px solid #45794f;
  border-left: 3px solid #3d6242;
  border-bottom: 3px solid #162419;
  border-right: 3px solid #1d3220;
}
#menus[data-menu-type="lobby"] .scroller_block,
#menus[data-menu-type="victory"] .scroller_block {
  background-color: #342138;
  border-top: 3px solid #883b99;
  border-left: 3px solid #6d3e77;
  border-bottom: 3px solid #221427;
  border-right: 3px solid #311c3b;
}
#menus[data-menu-type="multilisting"] .scroller_block,
#menus[data-menu-type="playmulti"] .scroller_block {
  background-color: #271e24;
  border-top: 3px solid #452f3d;
  border-left: 3px solid #392933;
  border-bottom: 3px solid #181416;
  border-right: 3px solid #1e181c;
}
#menus[data-menu-type="league"] .scroller_block {
  background-color: #4f1818;
  border-top: 3px solid #902d2d;
  border-left: 3px solid #722222;
  border-bottom: 3px solid #2f0d0d;
  border-right: 3px solid #370f0f;
}
#menus .scroller_block.warning {
  background-color: #3e2424;
  border-top: 3px solid #794545;
  border-left: 3px solid #623d3d;
  border-bottom: 3px solid #241616;
  border-right: 3px solid #321d1d;
  text-align: center;
}
#menus .scroller_block.warning > h1 {
  color: #fe4c55 !important;
  font-size: 1.8em;
  margin: 0;
  margin-bottom: -0.2em;
}
.scroller_block.light {
  background-color: #030303cc !important;
  border-top: 3px solid #fff1 !important;
  border-left: 3px solid #ffffff06 !important;
  border-bottom: 3px solid #000 !important;
  border-right: 3px solid #00000088 !important;
  box-shadow: 0 0 8px #000 !important;
  width: unset;
}
.scroller_block.zero {
  background-color: transparent !important;
  border-top: none !important;
  border-left: none !important;
  border-bottom: none !important;
  border-right: none !important;
  box-shadow: none !important;
  width: calc(70vw + 6px);
}
#menus[data-menu-type="40l"] .scroller_block > h1 {
  color: #e9b58e;
}
#menus[data-menu-type="blitz"] .scroller_block > h1 {
  color: #dba1a1;
}
#menus[data-menu-type="zen"] .scroller_block > h1 {
  color: #d8a1db;
}
#menus[data-menu-type="custom"] .scroller_block > h1 {
  color: #736597;
}
#menus[data-menu-type^="tetra"] .scroller_block > h1 {
  color: #a1dba6;
}
#menus[data-menu-type="lobby"] .scroller_block > h1,
#menus[data-menu-type="victory"] .scroller_block > h1 {
  color: #d38ee9;
}
#menus[data-menu-type="league"] .scroller_block > h1 {
  color: #b26565;
}
#menus .scroller_block.light > h1 {
  color: #ccc;
}
#menus[data-menu-type="40l"] .scroller_block > h2 {
  color: #e9b58e;
}
#menus[data-menu-type="blitz"] .scroller_block > h2 {
  color: #dba1a1;
}
#menus[data-menu-type="custom"] .scroller_block > h2 {
  color: #736597;
}
#menus[data-menu-type^="tetra"] .scroller_block > h2 {
  color: #a1dba6;
}
#menus[data-menu-type="lobby"] .scroller_block > h2,
#menus[data-menu-type="victory"] .scroller_block > h2 {
  color: #d38ee9;
}
#menus .scroller_block.light > h2 {
  color: #ccc;
}
#menus[data-menu-type="40l"] .scroller_block > p {
  color: #f4c19b;
}
#menus[data-menu-type="blitz"] .scroller_block > p {
  color: #f3c5c5;
}
#menus[data-menu-type="zen"] .scroller_block > p {
  color: #f0c5f3;
}
#menus[data-menu-type="custom"] .scroller_block > p {
  color: #8c7ac8;
}
#menus[data-menu-type^="tetra"] .scroller_block > p {
  color: #b1edb6;
}
#menus[data-menu-type="lobby"] .scroller_block > p,
#menus[data-menu-type="victory"] .scroller_block > p {
  color: #da9bf4;
}
#menus[data-menu-type="league"] .scroller_block > p {
  color: #ff9c9c;
}
#menus .scroller_block.light > p {
  color: #ccc;
}
.scroller_block.nothing {
  opacity: 0.5;
  text-align: center;
  font-weight: 900;
  filter: grayscale(1);
  mix-blend-mode: lighten;
}
body.anon .scroller_block.block_anon,
body.anon .scroller_item.block_anon {
  pointer-events: none;
}
body.anon .scroller_block.block_anon::after,
body.anon .scroller_item.block_anon::after {
  content: attr(data-block-reason);
  color: #fff;
  text-shadow: 0 2px 8px #000;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  padding: 1em;
  display: table-cell;
  vertical-align: middle;
  font-size: 2.5em;
  background-color: #000a;
}
body.anon .scroller_item.block_anon:not(.scroller_item_giant)::after {
  font-size: 2em;
}
body.banstatus_silence .scroller_block.block_silenced,
body.banstatus_silence .scroller_item.block_silenced {
  pointer-events: none;
}
body.banstatus_silence .scroller_block.block_silenced::after,
body.banstatus_silence .scroller_item.block_silenced::after {
  content: "YOU ARE SILENCED";
  color: #fff;
  text-shadow: 0 2px 8px #000;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  padding: 1em;
  display: table-cell;
  vertical-align: middle;
  font-size: 2.5em;
  background-color: #000a;
}
body.banstatus_silence
  .scroller_item.block_silenced:not(.scroller_item_giant)::after {
  font-size: 2em;
}
body.banstatus_restrict .scroller_block.block_restricted,
body.banstatus_restrict .scroller_item.block_restricted {
  pointer-events: none;
}
body.banstatus_restrict .scroller_block.block_restricted::after,
body.banstatus_restrict .scroller_item.block_restricted::after {
  content: "YOU ARE RESTRICTED";
  color: #fff;
  text-shadow: 0 2px 8px #000;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  padding: 1em;
  display: table-cell;
  vertical-align: middle;
  font-size: 2.5em;
  background-color: #000a;
}
body.banstatus_restrict
  .scroller_item.block_restricted:not(.scroller_item_giant)::after {
  font-size: 2em;
}
body.inpair .scroller_block.block_mm,
body.inpair .scroller_item.block_mm,
body.matchmaking .scroller_block.block_mm,
body.matchmaking .scroller_item.block_mm {
  pointer-events: none;
}
body.inpair .scroller_block.block_mm::after,
body.inpair .scroller_item.block_mm::after,
body.matchmaking .scroller_block.block_mm::after,
body.matchmaking .scroller_item.block_mm::after {
  content: "FINDING MATCH";
  color: #fff;
  text-shadow: 0 2px 8px #000;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  padding: 1em;
  display: table-cell;
  vertical-align: middle;
  font-size: 2.5em;
  background-color: #000a;
}
body.inpair .scroller_input.block_mm,
body.matchmaking .scroller_input.block_mm {
  pointer-events: none;
  opacity: 0.5;
}
body.offline .scroller_block.block_offline,
body.offline .scroller_item.block_offline {
  pointer-events: none;
}
body.offline .scroller_block.block_offline::after,
body.offline .scroller_item.block_offline::after {
  content: "YOU ARE OFFLINE";
  color: #fff;
  text-shadow: 0 2px 8px #000;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  padding: 1em;
  display: table-cell;
  vertical-align: middle;
  font-size: 2.5em;
  background-color: #000a;
}
body.offline .scroller_item.block_offline:not(.scroller_item_giant)::after {
  font-size: 2em;
}
body.bot .scroller_block.block_bot,
body.bot .scroller_item.block_bot {
  pointer-events: none;
}
body.bot .scroller_block.block_bot::after,
body.bot .scroller_item.block_bot::after {
  content: "BOT ACCOUNT";
  color: #fff;
  text-shadow: 0 2px 8px #000;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  padding: 1em;
  display: table-cell;
  vertical-align: middle;
  font-size: 2.5em;
  background-color: #000a;
}
body.bot .scroller_item.block_bot:not(.scroller_item_giant)::after {
  font-size: 2em;
}
#game_blitz {
  background-color: #3e1c1c;
  border-top: 3px solid #6b2b2b;
  border-left: 3px solid #582929;
  border-bottom: 3px solid #2e1616;
}
#game_blitz > h1 {
  color: #ffb9b9;
}
#game_blitz > p {
  color: #cc9393;
}
#game_zen {
  background-color: #331933;
  border-top: 3px solid #6b2b69;
  border-left: 3px solid #582957;
  border-bottom: 3px solid #2e162e;
}
#game_zen > h1 {
  color: #fdb9ff;
}
#game_zen > p {
  color: #c993cc;
}
#game_custom {
  background-color: #1e1d2d;
  border-top: 3px solid #2e2d42;
  border-left: 3px solid #272639;
  border-bottom: 3px solid #12111b;
}
#game_custom > h1 {
  color: #bab8df;
}
#game_custom > p {
  color: #8c88c0;
}
#multi_league,
.scroller_item_league {
  background-color: #4f1818;
  border-top: 3px solid #902d2d;
  border-left: 3px solid #722222;
  border-bottom: 3px solid #2f0d0d;
}
#multi_league > h1,
.scroller_item_league > h1 {
  color: #ff9c9c;
}
#multi_league > p,
.scroller_item_league > p {
  color: #b26565;
}
#multi_quickplay {
  background-color: #532314;
  border-top: 3px solid #b83a1b;
  border-left: 3px solid #8d2e1b;
  border-bottom: 3px solid #2f0a0a;
}
#multi_quickplay > h1 {
  color: #ff9c6b;
}
#multi_quickplay > p {
  color: #b26040;
}
#multi_royale {
  background-color: #39303b;
  border-top: 3px solid #524156;
  border-left: 3px solid #46394a;
  border-bottom: 3px solid #2b232d;
}
#multi_royale > h1 {
  color: #e6bcf1;
}
#multi_royale > p {
  color: #c29ecb;
}
#multi_createroom {
  background-color: #343946;
  border-top: 3px solid #49536b;
  border-left: 3px solid #40485b;
  border-bottom: 3px solid #2a2e38;
}
#multi_createroom > h1 {
  color: #afc0e8;
}
#multi_createroom > p {
  color: #929cb6;
}
#multi_listing {
  background-color: #3a4746;
  border-top: 3px solid #4e6c6a;
  border-left: 3px solid #445b5a;
  border-bottom: 3px solid #2f3b3a;
}
#multi_listing > h1 {
  color: #a7d0ce;
}
#multi_listing > p {
  color: #8faeac;
}
#tetra_standalone {
  background-image: url("/tetr-res/standalone.jpg");
}
#tetra_leaderboards {
  background-image: url("/tetr-res/leaderboard.jpg");
}
#tetra_me {
  background-image: url("/tetr-res/me.jpg");
  overflow: hidden;
}
#tetra_players {
  background-image: url("/tetr-res/players.jpg");
}
#tetra_achievements {
  background-image: url("/tetr-res/achievements.jpg");
}
#tetra_me_username {
  position: absolute;
  font-size: 13em !important;
  font-weight: 900 !important;
  left: 0;
  top: -10%;
  transform: skewX(-10deg) scaleX(0.7);
  pointer-events: none;
  color: #55915722 !important;
  mix-blend-mode: add;
  letter-spacing: -0.07em;
  text-shadow: none;
}
#tetra_live {
  width: 70vw;
}
#tetra_live.hidden {
  display: none;
}
#tetra_live h1 {
  color: #fffa;
  font-size: 1.5em;
}
#tetra_live .tetra_live_item {
  display: inline-block;
  color: #fffc;
  font-size: 1.75em;
  font-family: PFW;
  text-decoration: none;
  margin-right: 1em;
  transition: 0.3s color;
  position: relative;
}
#tetra_live .tetra_live_item span {
  display: inline-block;
  background-color: #fff1;
  color: #fffa;
  border-radius: 3px;
  font-family: HUN;
  padding: 0.2em 0.4em;
  padding-bottom: 0;
  margin-left: 0.25em;
  font-size: 0.9em;
  transition:
    0.3s color,
    0.3s background-color;
}
#tetra_live .tetra_live_item span::after {
  content: "ǽ";
  font-size: 0.75em;
  color: #fff6;
  transition: 0.3s color;
}
#tetra_live .tetra_live_item img {
  position: absolute;
  bottom: calc(100% + 0.5em);
  left: 50%;
  transform: translate(-50%, 0);
  border: 2px solid #000a;
  box-shadow: 0 2px 4px #0008;
  border-radius: 3px;
  pointer-events: none;
  animation: SlideUp 0.3s cubic-bezier(0.32, 1.39, 0.44, 1.03);
}
#tetra_live .tetra_live_item::after {
  content: attr(data-title);
  position: absolute;
  bottom: calc(100% + 1.15em + 135px);
  font-family: PFW;
  padding: 0.2em 0.5em;
  color: #fff;
  text-align: center;
  max-width: 350px;
  width: fit-content;
  width: -moz-fit-content;
  left: 50%;
  transform: translate(-50%, 0);
  background-color: #000a;
  box-shadow: 0 2px 4px #0008;
  border-radius: 3px;
  pointer-events: none;
  font-size: 0.75em;
  animation: SlideUp 0.3s cubic-bezier(0.32, 1.39, 0.44, 1.03);
}
#tetra_live .tetra_live_item:not(:hover) img,
#tetra_live .tetra_live_item:not(:hover)::after {
  display: none;
}
@keyframes SlideUp {
  from {
    transform: translate(-50%, 1em);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}
#tetra_live .tetra_live_item:hover {
  color: #fff;
}
#tetra_live .tetra_live_item:hover span {
  background-color: #fff2;
  color: #fff;
}
#tetra_live .tetra_live_item:hover span::after {
  color: #fffa;
}
#tetra_news {
  border: none !important;
  background: 0 0 !important;
  color: #fff;
  box-shadow: none;
}
#tetra_news h1 {
  color: #fff4 !important;
  text-align: center;
}
#tetra_news h1::before {
  content: "";
  display: inline-block;
  width: calc(35vw - 5em);
  height: 0.075em;
  background-color: #fff2;
  margin-right: 0.5em;
  vertical-align: middle;
}
#tetra_news h1::after {
  content: "";
  display: inline-block;
  width: calc(35vw - 5em);
  height: 0.075em;
  background-color: #fff2;
  margin-left: 0.5em;
  vertical-align: middle;
}
#tetra_news_content {
  padding-left: 5em;
  padding-right: 5em;
}
.tetra_news_item {
  color: #fffa;
  font-size: 1.1em;
  vertical-align: middle;
  margin-bottom: 0.15em;
  padding-bottom: 0.15em;
}
.tetra_news_item:not(:last-child) {
  border-bottom: 1px solid #fff1;
}
.tetra_news_item a {
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}
.tetra_news_item a:hover {
  text-decoration: underline dotted;
}
.tetra_news_item span {
  color: #fff;
}
.tetra_news_item img {
  height: 2em;
  vertical-align: middle;
  margin-right: 0.5em;
  margin-left: 0.25em;
}
.tetra_news_empty {
  font-size: 1.5em;
  color: #fff4;
  text-align: center;
}
.tetra_news_ts {
  display: inline-block;
  margin-left: 1em;
  color: #fff4;
  font-size: 0.9em;
}
.tetra_stream.hidden {
  display: none;
}
#tetra_tltimer,
#tetra_zenithtimer {
  text-align: center;
  font-size: 1.5rem;
  margin-top: 0.6rem;
  margin-bottom: -0.6rem;
  color: #5c9660;
}
#tetra_tltimer b,
#tetra_zenithtimer b {
  color: #a1dba6;
}
#tetra_tltimer.hidden {
  display: none;
}
#tetra_records_view:not([data-gamemode="zenith"]):not(
    [data-gamemode="zenithex"]
  )
  #tetra_zenithtimer {
  display: none;
}
.scroller_input {
  display: block;
  background-color: #060606aa;
  border-top: 3px solid #0008;
  border-left: 3px solid #0006;
  border-bottom: 3px solid #2228;
  border-right: 3px solid #1116;
  box-shadow: 0 0 8px #000;
  position: relative;
  font-family: PFW;
  border-radius: 3px;
  text-align: left;
  width: 70vw;
  font-size: 1.5em;
  padding: 0.3em 0.675em;
  padding-top: 0.45em;
  margin-bottom: 1em;
  color: #fff;
}
.scroller_input.in_list {
  left: 4em;
  width: calc(70vw - 8em);
}
.config_input {
  display: block;
  background-color: #060606aa;
  border-top: 3px solid #0008;
  border-left: 3px solid #0006;
  border-bottom: 3px solid #2228;
  border-right: 3px solid #1116;
  box-shadow: 0 0 8px #000;
  position: relative;
  font-family: PFW;
  border-radius: 3px;
  text-align: left;
  width: calc(100% - 1.35em - 6px);
  font-size: 1.5em;
  padding: 0.3em 0.675em;
  padding-top: 0.45em;
  margin-top: 0.25em;
  color: #fff;
}
.config_input.usernamelike,
.config_input[type="password"] {
  font-family: HUN;
  line-height: 1.1em;
}
.disable-cfg {
  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: PFW;
  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%);
}
.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: 2em;
  color: #6275a7;
}
.volume_stat > .stat_name {
  width: 3em;
}
.video_stat > .stat_name {
  width: 12.5em;
}
.stat > .stat_range {
  font-size: 1.5em;
  display: block;
  position: absolute;
  left: 2.5em;
  width: calc(100% - 9em);
  top: 0.25em;
  margin-left: 0.7em;
}
.volume_stat > .stat_range {
  left: 3.5em;
  width: calc(100% - 10em);
}
.video_stat > .stat_range {
  left: 10.5em;
  width: calc(100% - 17em);
}
.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: 6.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;
}
.stat > .stat_range_23 {
  position: absolute;
  left: calc(0.667 * (100% - 6rem));
  top: 2.5em;
  font-size: 0.75em;
  display: inline-block;
  color: #3d4457;
  pointer-events: none;
  transform: translateX(-50%);
}
.stat > .stat_range_dangerpast23 {
  position: absolute;
  left: calc(0.667 * (100% - 6rem));
  right: 8.7rem;
  top: 0.7em;
  height: 0.5em;
  background-color: #3c1727;
  pointer-events: none;
  clip-path: polygon(
    0 0,
    2px 0,
    2px calc(100% - 2px),
    100% 0,
    100% 100%,
    0 100%
  );
}
.volume_stat > .stat_range_lower {
  left: 8.5em;
}
.video_stat > .stat_range_lower {
  left: 22.5em;
}
.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;
}
.minor_range {
  -webkit-appearance: none;
  height: 0.2em;
  background-color: #000a;
  outline: 0;
  padding: 0;
  margin-top: 1.2em;
  margin-right: 0;
  margin-bottom: 1em;
  width: 100%;
}
.minor_range.range_reversed {
  direction: rtl;
}
.minor_range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1em;
  height: 1.65em;
  background-color: #fff;
  border-radius: 3px;
}
.minor_range::-moz-range-thumb {
  width: 1em;
  height: 1.65em;
  background-color: #fff;
  border-radius: 3px;
}
.minor_range::-webkit-slider-runnable-track {
  opacity: 1;
}
.minor_range::-moz-range-track {
  opacity: 0;
}
.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("/tetr-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;
}
#menus[data-menu-type="40l"] .checkbox {
  color: #a67f62;
}
#menus[data-menu-type="40l"] .checkbox.checked {
  color: #dbb293;
}
#menus[data-menu-type="40l"] .checkbox::before {
  background-color: #171310;
  border-top: 3px solid #080707;
  border-left: 3px solid #0f0d0c;
  border-bottom: 3px solid #2b2623;
  border-right: 3px solid #26211e;
}
#menus[data-menu-type="40l"] .checkbox.checked::before {
  background: url("/tetr-res/checkmark.svg"), #a38268;
  border-top: 3px solid #e3b591;
  border-left: 3px solid #bf987a;
  border-bottom: 3px solid #735b48;
  border-right: 3px solid #7d634f;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#menus[data-menu-type="blitz"] .checkbox {
  color: #a66262;
}
#menus[data-menu-type="blitz"] .checkbox.checked {
  color: #db9393;
}
#menus[data-menu-type="blitz"] .checkbox::before {
  background-color: #171010;
  border-top: 3px solid #080707;
  border-left: 3px solid #0f0c0c;
  border-bottom: 3px solid #2b2323;
  border-right: 3px solid #261e1e;
}
#menus[data-menu-type="blitz"] .checkbox.checked::before {
  background: url("/tetr-res/checkmark.svg"), #a36868;
  border-top: 3px solid #e39191;
  border-left: 3px solid #bf7a7a;
  border-bottom: 3px solid #734848;
  border-right: 3px solid #7d4f4f;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.checkbox.minor_checkbox {
  color: #fff8;
  font-size: 1em;
}
.checkbox.minor_checkbox.checked {
  color: #fff;
}
.checkbox.minor_checkbox::before {
  background-color: #000a;
  border: none;
  border-radius: 3px;
}
.checkbox.minor_checkbox.checked::before {
  background: url("/tetr-res/checkmark_dark.svg"), #fff;
  border: none;
  border-radius: 3px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.checkbox.minor_checkbox:hover::before {
  filter: brightness(1);
}
#pmLink {
  text-transform: lowercase;
  text-decoration: none;
  visibility: hidden;
}
#pmLink:hover {
  visibility: visible;
}
body.ceriad_disabled #pmLink {
  display: none;
}
.record_item {
  height: 2em;
  cursor: pointer;
  transition:
    0.3s filter,
    0.3s box-shadow;
}
.record_item:hover:not(.playerresult) {
  filter: brightness(1.2);
}
.tetra_stream:not(.nofirst) .record_item.record_first {
  filter: brightness(1.5) drop-shadow(0px 0px 8px #fff4);
}
.tetra_stream:not(.nofirst) .record_item.record_first:hover:not(.playerresult) {
  filter: brightness(1.8) drop-shadow(0px 0px 8px #fff6);
}
.record_item > .record_grade {
  position: absolute;
  left: 0;
  top: 0;
  width: 2.1em;
  background-color: #212739;
  border-radius: 2px 0 0 2px;
  font-size: 3.5em;
  height: 1em;
  padding-top: 0.15em;
  padding-right: 0.08em;
  text-align: right;
  color: #fff;
  text-shadow:
    0 0.04em #fff4,
    0 0 8px #fff8;
}
.record_item > .record_grade:before {
  content: "#";
  opacity: 0.5;
  font-size: 0.5em;
  vertical-align: top;
}
#menus[data-menu-type^="tetra"] .record_item > .record_grade {
  background-color: #1a3522;
}
#menus[data-menu-type^="victory"] .record_item > .record_grade {
  background-color: #271a35;
}
.tetra_stream.noindex .record_item > .record_grade {
  display: none;
}
.record_item > .record_owner {
  position: absolute;
  left: 3.5em;
  top: 0.3em;
  font-size: 2.3em;
  color: #b3c4f4;
}
#menus[data-menu-type^="tetra"] .record_item > .record_owner {
  color: #b3f4b8;
}
#menus[data-menu-type^="victory"] .record_item > .record_owner {
  color: #d2b3f4;
}
.tetra_stream.noname .record_item > .record_owner {
  display: none;
}
.tetra_stream.noindex .record_item > .record_owner {
  left: 0.25em;
}
.record_item > .record_owner img {
  margin-left: 0.15em;
  height: 0.75em;
  vertical-align: text-top;
}
.record_item > .record_owner .flag {
  height: 0.5em;
  vertical-align: middle;
}
.record_item > .record_ts {
  position: absolute;
  left: 9em;
  bottom: 0.15em;
  font-size: 0.9em;
  color: #6c7590;
}
#menus[data-menu-type^="tetra"] .record_item > .record_ts {
  color: #6c9072;
}
#menus[data-menu-type^="victory"] .record_item > .record_ts {
  color: #816c90;
}
#menus[data-menu-type^="tetra"] .record_item > .record_ts > span {
  color: #b3f4b8;
}
#menus[data-menu-type^="victory"] .record_item > .record_ts > span {
  color: #dfb3f4;
}
.tetra_stream.noindex .record_item > .record_ts {
  left: 0.6em;
}
.tetra_stream.noname .record_item > .record_ts {
  left: 3.5em;
  top: 0.5em;
  font-size: 2.3em;
}
.tetra_stream.noname.noindex .record_item > .record_ts {
  left: 0.3em;
}
.record_item > .record_result {
  position: absolute;
  right: 0.15em;
  top: 0.3em;
  font-size: 2.3em;
  font-weight: 900;
  color: #b3c4f4;
  text-shadow:
    0 0.04em #6c7590,
    0 0 8px #b3c4f466;
}
.record_item > .record_result > .ms {
  font-size: 0.8em;
}
.record_item > .record_result > .unit {
  font-size: 0.5em;
  margin-left: 0.2em;
  color: #6c7590;
}
.record_item > .record_result > span {
  font-size: 0.8em;
  font-weight: 500;
}
.record_item > .record_result > img {
  height: 1.2em;
  vertical-align: top;
  position: relative;
  top: -0.2em;
}
.record_item > .record_result > img.mod {
  height: 0.7em;
  top: 0;
  margin-left: 0.1em;
}
#menus[data-menu-type^="tetra"] .record_item > .record_result {
  color: #b3f4b8;
  text-shadow:
    0 0.04em #6c9072,
    0 0 8px #b3f4b866;
}
#menus[data-menu-type^="tetra"] .record_item > .record_result > .unit {
  color: #6c9072;
}
#menus[data-menu-type^="victory"] .record_item > .record_result {
  color: #dbb3f4;
  text-shadow:
    0 0.04em #846c90,
    0 0 8px #e4b3f466;
}
#menus[data-menu-type^="victory"] .record_item > .record_result > .unit {
  color: #846c90;
}
.record_item.record_disputed > .record_result {
  color: #000a !important;
  text-shadow:
    0 0.03em #0004,
    0 0 16px #0004 !important;
}
.record_item.record_disputed > .record_result::after {
  content: "";
  width: 3.5em;
  height: 0.1em;
  position: absolute;
  pointer-events: none;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%) rotate(-10deg);
  background-color: #b1edb6;
}
.record_item > .record_result > .leveltag {
  font-size: 0.75em;
  top: -0.15em;
  left: -0.8em;
  z-index: 100;
}
.record_item > .record_extra {
  position: absolute;
  right: 0.5em;
  bottom: 0.15em;
  font-size: 0.9em;
  color: #6c7590;
}
.record_item > .record_extra > span {
  color: #b3c4f4;
}
.record_item > .record_extra > img {
  height: 1.2em;
  vertical-align: -20%;
}
#menus[data-menu-type^="tetra"] .record_item > .record_extra {
  color: #6c9072;
}
#menus[data-menu-type^="tetra"] .record_item > .record_extra > span {
  color: #b3f4b8;
}
#menus[data-menu-type^="victory"] .record_item > .record_extra {
  color: #856c90;
}
#menus[data-menu-type^="victory"] .record_item > .record_extra > span {
  color: #dfb3f4;
}
.record_item > .record_extra > span.rdwarning {
  animation: 1s RDWarning ease-in-out infinite alternate;
}
@keyframes RDWarning {
  from {
    color: #ff0;
  }
  to {
    color: red;
  }
}
.achievements {
  display: flex;
  flex-wrap: wrap;
  margin: -0.5rem;
}
.achievements .achievement {
  flex: 1 0 30rem;
  background-color: #000a;
  border-radius: 3px;
  margin: 0.25rem;
  position: relative;
  padding: 1rem;
  padding-left: 9rem;
  box-sizing: border-box;
  min-height: 7rem;
  transition: 0.3s filter;
}
.achievements .achievement:not(.noclick) {
  cursor: pointer;
}
.achievements .achievement:not(.noclick):hover {
  filter: brightness(1.2);
}
.achievement_icon {
  position: relative;
  top: calc(50% - 3.5rem);
  left: 1rem;
  --size: 7rem;
  width: var(--size);
  height: var(--size);
  --rx: 0deg;
  --ry: 0deg;
  --ra: 0;
  --gm: 0;
  --ga: 0;
  --gb: 0;
  --gc: 0;
  transform: perspective(calc(var(--size) * 3)) rotateY(0) rotateX(0);
  transition: 0.3s transform;
}
.achievement_icon:hover {
  transform: perspective(300px) rotateY(calc(var(--rx) * var(--ra)))
    rotateX(calc(var(--ry) * var(--ra)));
  transition: none;
}
.achievement_icon:hover::after {
  content: "";
  position: absolute;
  top: -1rem;
  left: -1rem;
  right: -1rem;
  bottom: -1rem;
}
.achievement .achievement_icon {
  position: absolute;
  top: calc(50% - 3.5rem);
  left: 1rem;
  --size: 7rem;
}
.achievement_icon img {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--size);
  height: var(--size);
  pointer-events: none;
}
.achievement_icon_ring {
  filter: drop-shadow(0px 0px 4px #fff);
  will-change: filter;
  width: var(--size);
  height: var(--size);
  contain: strict;
  pointer-events: none;
}
.achievement_icon_ring img:last-child {
  transform: rotate(180deg);
}
.achievement_icon_inner {
  opacity: 0.8;
  background-size: 800% 800%;
  position: absolute;
  top: calc(0.2143 * var(--size));
  left: calc(0.2143 * var(--size));
  width: calc(0.5714 * var(--size));
  height: calc(0.5714 * var(--size));
  filter: invert(1);
  pointer-events: none;
}
[data-rank="none"] .achievement_icon_inner {
  filter: invert(0.7);
}
[data-rank="stub"] .achievement_icon_inner {
  display: none;
}
.achievement_icon_frame_glint {
  mix-blend-mode: lighten;
  mix-blend-mode: plus-lighter;
  pointer-events: none;
}
.achievement_icon_frame_glint_a {
  opacity: calc(var(--gm) * var(--ga));
}
.achievement_icon_frame_glint_b {
  opacity: calc(var(--gm) * var(--gb));
}
.achievement_icon_frame_glint_c {
  opacity: calc(var(--gm) * var(--gc));
}
.achievement_icon:not(:hover) .achievement_icon_frame_glint {
  opacity: 0;
  transition: 0.3s opacity;
}
body[data-graphics="minimal"] .achievement_icon_frame_glint {
  display: none;
}
.achievement_icon span {
  position: absolute;
  top: calc(0.5 * var(--size));
  left: calc(0.5 * var(--size));
  font-size: calc(0.25 * var(--size));
  font-weight: 900;
  transform: translate(-50%, -50%) rotate(-30deg);
  color: #fff2;
  font-family: "C";
  pointer-events: none;
}
.achievement_info_name {
  font-weight: 900;
  font-size: 1.1rem;
}
[data-rank="none"] .achievement_info_name,
[data-rank="stub"] .achievement_info_name {
  color: #999;
}
.achievement_info_value {
  font-weight: 900;
  font-size: 2rem;
  margin-top: 0.5rem;
}
.achievement_info_value > span {
  font-size: 1.4rem;
}
.achievement_info_rank {
  display: inline-block;
  vertical-align: middle;
  font-family: "C";
  font-weight: 500;
  font-size: 0.9rem;
  margin-left: 0.75rem;
}
.achievement_info_rank > span {
  opacity: 0.6;
}
.achievement_info_object {
  font-family: "C";
  font-weight: 500;
  font-size: 0.9rem;
  margin-top: -0.1rem;
}
[data-rank="none"] .achievement_info_object,
[data-rank="stub"] .achievement_info_object {
  color: #999;
}
.achievement_info_extra {
  font-family: "C";
  font-weight: 500;
  font-size: 0.9rem;
  margin-top: -0.3rem;
  margin-bottom: 0.3rem;
  font-style: italic;
  color: var(--sec);
}
.achievement_info_extra > span {
  font-family: HUN;
  font-weight: 900;
  font-style: normal;
  color: var(--pri);
  text-shadow: 0 0 4px var(--sec);
  cursor: pointer;
  transition: 0.2s color;
}
.achievement_info_extra > span > .avatar {
  height: 1.3em;
  vertical-align: -28%;
  margin-right: 0.2rem;
}
.achievement_info_extra > span:hover {
  color: #fff;
}
.achievements .achievement_info_extra,
.tetra_featured_achievement .achievement_info_extra {
  pointer-events: none;
}
.achievement_info_desc {
  font-family: "C";
  font-weight: 500;
  font-size: 0.9rem;
  margin-top: 0.3rem;
  font-style: italic;
  color: #aaa;
}
.achievement_info_icons {
  position: absolute;
  top: 8px;
  right: 8px;
}
.achievement_info_icons img {
  height: 1.1rem;
  opacity: 0.3;
}
[data-rank="diamond"] {
  --pri: #deb3ff;
  --sec: #7c77ff;
}
[data-rank="platinum"] {
  --pri: #a1ffe8;
  --sec: #43d09a;
}
[data-rank="gold"] {
  --pri: #ffe6aa;
  --sec: #ffa361;
}
[data-rank="silver"] {
  --pri: #cddefd;
  --sec: #979cc8;
}
[data-rank="bronze"] {
  --pri: #fdccc7;
  --sec: #c88188;
}
[data-rank="none"] {
  --pri: #999;
  --sec: #777;
}
[data-rank="stub"] {
  --pri: #777;
  --sec: #777;
}
[data-rank="issued"] {
  --pri: #fff;
  --sec: #777;
}
.achievement_info_value {
  color: var(--pri);
  text-shadow: 0 0 4px var(--sec);
}
[data-rank="none"] .achievement_info_value,
[data-rank="stub"] .achievement_info_value {
  text-shadow: none;
}
.achievement_info_rank {
  color: var(--sec);
}
.achievement_icon[data-rank="diamond"],
[data-rank="diamond"] .achievement_icon {
  --ra: 1.2;
  --gm: 0.8;
}
.achievement_icon[data-rank="platinum"],
[data-rank="platinum"] .achievement_icon {
  --ra: 1;
  --gm: 0.7;
}
.achievement_icon[data-rank="gold"],
[data-rank="gold"] .achievement_icon {
  --ra: 0.8;
  --gm: 0.6;
}
.achievement_icon[data-rank="silver"],
[data-rank="silver"] .achievement_icon {
  --ra: 0.6;
  --gm: 0.5;
}
.achievement_icon[data-rank="bronze"],
[data-rank="bronze"] .achievement_icon {
  --ra: 0.4;
  --gm: 0.4;
}
.achievement_icon[data-rank="issued"],
[data-rank="issued"] .achievement_icon {
  --ra: 1;
  --gm: 0.8;
}
#tetra_achievement_header {
  width: calc(70vw + 2em + 6px);
  margin-bottom: 1em;
  text-align: center;
}
#tetra_achievement_case {
  display: inline-block;
  width: 950px;
  height: 180px;
  background-image: url("/tetr-res/achievement-holder.png");
  background-size: contain;
  position: relative;
}
#tetra_achievement_case #tetra_achievement_case_avatar {
  position: absolute;
  left: 53px;
  top: 46px;
  width: 88px;
  height: 88px;
  box-shadow: 0 3px 6px #0004;
}
#tetra_achievement_case .achievement_icon {
  position: absolute;
  top: 16px;
  --size: 149px;
  cursor: pointer;
}
#tetra_achievement_case .achievement_icon span {
  transition: 0.3s color;
}
#tetra_achievement_case .achievement_icon:hover span {
  color: #fff4;
}
#tetra_achievement_case .achievement_icon#tetra_achievement_case_0 {
  left: 171px;
}
#tetra_achievement_case .achievement_icon#tetra_achievement_case_1 {
  left: 351px;
}
#tetra_achievement_case .achievement_icon#tetra_achievement_case_2 {
  left: 531px;
}
#tetra_achievement_case .achievement_icon::after {
  content: "";
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  pointer-events: none;
  background-image: url("/tetr-res/achievement-holder-select.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: none;
  animation:
    TACSelectA 0.2s ease-out,
    TACSelectB 1s ease-in-out alternate infinite;
}
@keyframes TACSelectA {
  from {
    transform: scale(1.5) rotate(90deg);
  }
  to {
    transform: scale(1) rotate(0);
  }
}
@keyframes TACSelectB {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.6;
  }
}
#tetra_achievements_page.editing[data-editing="0"]
  .achievement_icon#tetra_achievement_case_0::after {
  display: block;
}
#tetra_achievements_page.editing[data-editing="1"]
  .achievement_icon#tetra_achievement_case_1::after {
  display: block;
}
#tetra_achievements_page.editing[data-editing="2"]
  .achievement_icon#tetra_achievement_case_2::after {
  display: block;
}
#tetra_achievements_page.editing .achievement[data-rank="none"],
#tetra_achievements_page.editing .achievement[data-rank="stub"] {
  opacity: 0.3;
  pointer-events: none;
}
#tetra_achievement_header_help_a,
#tetra_achievement_header_help_b {
  font-family: HUN;
  font-size: 1em;
  color: #fff6;
  margin-bottom: 0.5em;
  margin-top: 0;
}
#tetra_achievement_header_help_b {
  color: #ffb400;
}
#tetra_achievements_page.editing #tetra_achievement_header_help_a {
  display: none;
}
#tetra_achievements_page:not(.editing) #tetra_achievement_header_help_b {
  display: none;
}
.achievement_case_icon .achievement_icon_frame,
.achievement_case_icon .achievement_icon_inner,
.achievement_case_icon .achievement_icon_ring,
.achievement_case_icon .achievement_icon_wreath {
  pointer-events: none;
}
#tetra_achievement_case_ar {
  position: absolute;
  left: 719px;
  top: 62px;
  width: 180px;
  text-align: center;
  color: #fff;
  font-weight: 900;
  font-family: HUN;
  font-size: 64px;
  text-shadow:
    0 3px #fff6,
    0 0 16px #fff8;
}
#tetra_achievement_case_ar span {
  font-size: 30px;
}
.room_listing_item {
  height: 2em;
  cursor: pointer;
  transition:
    0.3s filter,
    0.3s box-shadow;
}
.room_listing_item > .room_listing_name {
  position: absolute;
  left: 0.3em;
  top: 0.3em;
  font-size: 2.3em;
  color: #eaaad2;
  width: calc(100% - 3em);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.room_listing_item > .room_listing_info {
  position: absolute;
  left: 0.7em;
  bottom: 0.15em;
  font-size: 0.9em;
  color: #65525e;
}
.room_listing_id {
  font-family: PFW;
}
.room_listing_rank {
  height: 1.5em;
  vertical-align: sub;
  position: relative;
  top: 0.1em;
}
.hideroomids .room_listing_id {
  display: none;
}
.room_listing_item > .room_listing_count {
  position: absolute;
  right: 0.15em;
  top: 0.3em;
  font-size: 2.3em;
  color: #f0b3d9;
  text-shadow:
    0 0.04em #6c7590,
    0 0 8px #b3c4f466;
}
.room_listing_item > .room_listing_count > .room_listing_limit {
  font-size: 0.8em;
}
.room_listing_item > .room_listing_count > .room_listing_spectators {
  font-size: 0.9em;
}
.player_count > .room_listing_spectators {
  font-size: 0.75em;
}
.room_listing_item > .room_listing_extra {
  position: absolute;
  right: 0.5em;
  bottom: 0.15em;
  font-size: 0.9em;
  color: #695562;
}
.room_listing_item > .room_listing_extra > span {
  color: #d9a4c5;
}
.playerresult {
  cursor: pointer;
  filter: brightness(1);
  transition: 0.3s filter;
}
.playerresult:hover {
  filter: brightness(1.3);
}
.playerresult.disconnected {
  filter: brightness(0.4);
}
.playerresult.disconnected:hover {
  filter: brightness(0.8);
}
.playerresult.record_me {
  filter: brightness(1.5) drop-shadow(0px 0px 8px #fff4);
}
.playerresult.record_me:hover {
  filter: brightness(1.8) drop-shadow(0px 0px 8px #fff4);
}
#ownstats {
  margin-top: 3em;
}
#ownstats > h1 {
  text-align: center;
  margin-top: -1.75em;
}
#finalplace {
  font-size: 3em;
  color: #fff;
  text-shadow: 0 0 8px #fff;
}
#ownstats.hidden,
.room_midgame_spectating #ownstats,
.room_spectating #ownstats {
  display: none;
}
#victory_downloadreplay.hidden,
.room_midgame_spectating #victory_downloadreplay {
  display: none;
}
#backtoleague,
#backtoroom {
  position: fixed;
  right: 0;
  bottom: -1.75em;
  transform: translateX(2em);
  background-color: #0006;
  border-top: 3px solid #1116;
  border-left: 3px solid #18181866;
  border-bottom: 3px solid #0006;
  box-shadow: 0 0 8px #0004;
  color: #fffa;
  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-right: 3.5em;
  padding-left: 0.5em;
  cursor: pointer;
}
#backtoleague:hover,
#backtoroom:hover {
  transform: translateX(0.5em);
  filter: brightness(1.2);
  transition:
    0.2s transform,
    0.2s filter,
    0.5s opacity;
}
#backtoleague:active,
#backtoroom:active {
  transform: translateX(0);
  filter: brightness(1.5);
  transition:
    50ms transform,
    0s filter,
    0.5s opacity;
}
#backtoleague.hidden,
#backtoroom.hidden {
  opacity: 0;
  transform: translateX(-10em);
  pointer-events: none;
}
#backtoroom {
  bottom: 0.75em;
  z-index: 1;
}
.starter {
  text-align: right;
  overflow: hidden;
}
.pbdisplay.hidden {
  display: none;
}
h2.pbdisplay {
  margin-top: 1em;
}
h1.pbdisplay {
  margin-bottom: -0.1em;
}
h1.pbdisplay > span {
  font-size: 0.6em;
}
.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;
}
#menus[data-menu-type="40l"] .start_game {
  background-color: #70523c;
  border-left: 1px solid #b3825d;
  color: #f4c19b;
}
#menus[data-menu-type="blitz"] .start_game {
  background-color: #794b4b;
  border-left: 1px solid #b06363;
  color: #ebacac;
}
#menus[data-menu-type="zen"] .start_game {
  background-color: #774b79;
  border-left: 1px solid #ab63b0;
  color: #e3aceb;
}
#menus[data-menu-type="custom"] .start_game {
  background-color: #29223d;
  border-left: 1px solid #4b3f6e;
  color: #c5b3f4;
}
#menus[data-menu-type^="tetra"] .start_game {
  background-color: #4d794b;
  border-left: 1px solid #63b06a;
  color: #acebb5;
}
.music_picker,
.replayid,
.submissionerror {
  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);
  cursor: pointer;
  transition: 0.5s filter;
}
.music_picker:hover,
.replayid:hover {
  filter: brightness(1.5);
  transition: 0.2s filter;
}
.music_picker::before {
  content: "ǿ";
  margin-right: 0.25em;
  opacity: 0.3;
  text-transform: lowercase;
}
@keyframes StartGameFlash {
  0% {
    filter: brightness(1);
  }
  25% {
    filter: brightness(1.5);
  }
  100% {
    filter: brightness(1);
  }
}
#menus[data-menu-type="40l"] .game_config_row .room_config_label {
  color: #dbb293;
}
#menus[data-menu-type="40l"]
  .game_config_row
  .room_config_item.room_config_spinner,
#menus[data-menu-type="40l"] .room_config_item:not([type]),
#menus[data-menu-type="40l"] .room_config_item[type="number"],
#menus[data-menu-type="40l"] .room_config_item[type="text"] {
  color: #e9b58e;
}
#menus[data-menu-type="blitz"] .game_config_row .room_config_label {
  color: #db9393;
}
#menus[data-menu-type="blitz"]
  .game_config_row
  .room_config_item.room_config_spinner,
#menus[data-menu-type="blitz"] .room_config_item:not([type]),
#menus[data-menu-type="blitz"] .room_config_item[type="number"],
#menus[data-menu-type="blitz"] .room_config_item[type="text"] {
  color: #dba1a1;
}
.replayinfo {
  text-align: right;
  overflow: hidden;
}
#multilogview .replayinfo {
  margin-top: 1em;
}
#endleagueview .replayinfo {
  margin-top: 0.5em;
}
.resultslike.isreplay .starter {
  display: none;
}
.resultslike.noreplay .replayinfo {
  display: none;
}
#multilogview.noreplay .replayinfo {
  display: none;
}
.resultslike .watchreplay {
  display: inline-block;
  background-color: #22293d;
  border: 1px solid #3f4c6e;
  border-radius: 3px;
  color: #b3c4f4;
  width: 5em;
  font-size: 2em;
  margin: -0.5em;
  position: relative;
  left: -5px;
  top: 5px;
  text-align: center;
  padding-top: 0.25em;
  padding-bottom: 0.05em;
  filter: brightness(1);
  cursor: pointer;
  transition: 0.3s filter;
}
.resultslike .watchreplay:hover {
  filter: brightness(1.2);
}
#menus[data-menu-type="40l"] .watchreplay {
  background-color: #70523c;
  border: 1px solid #b3825d;
  color: #f4c19b;
}
#menus[data-menu-type="blitz"] .watchreplay {
  background-color: #794b4b;
  border: 1px solid #b06363;
  color: #ebacac;
}
#menus[data-menu-type="custom"] .watchreplay {
  background-color: #29223d;
  border: 1px solid #4b3f6e;
  color: #c5b3f4;
}
#menus[data-menu-type^="tetra"] .watchreplay {
  background-color: #4d794b;
  border: 1px solid #63b06a;
  color: #acebb5;
}
#menus .scroller_block.zero .watchreplay {
  background-color: #fff1;
  border: 1px solid #fff6;
  color: #fffa;
}
.watchreplay.downloadreplay,
.watchreplay.tweetreplay {
  width: 1.5em;
  margin-right: 0.7em;
}
.resultslike .replayid {
  top: -0.13em;
  font-size: 2em;
  font-family: PFW;
}
.resultslike .submissionerror {
  top: -0.05em;
  font-size: 2em;
  cursor: default;
}
.resultslike:not(.error) .retry_submission {
  display: none;
}
.resultslike .retry_submission {
  background-color: #fc0 !important;
  border-top: 3px solid #ffe373 !important;
  border-left: 3px solid #e8c94e !important;
  border-bottom: 3px solid #5c4d10 !important;
  border-right: 3px solid #b4961c !important;
}
.resultslike .retry_submission .submissionerror {
  color: #6f6805;
  max-width: calc(100% - 5em);
}
.resultslike .retry_submission .submissionerror span {
  color: #312e02;
}
.resultslike .retry_submission .watchreplay {
  background-color: #c2ad00;
  border: 1px solid #746805;
  color: #312e02;
}
.resultslike:not(.disputed) .disputed_submission {
  display: none;
}
.resultslike .disputed_submission {
  background-color: red !important;
  border-top: 3px solid #ff7373 !important;
  border-left: 3px solid #e84e4e !important;
  border-bottom: 3px solid #5c1010 !important;
  border-right: 3px solid #b41c1c !important;
  text-align: center;
}
.resultslike .disputed_submission h1,
.resultslike .disputed_submission p {
  color: #fcc !important;
}
.resultslike .disputed_submission p {
  font-size: 1.2em;
  margin-bottom: -0.3em;
}
.resultslike.disputed #result_result {
  color: #000a !important;
  text-shadow:
    0 0.03em #0004,
    0 0 16px #0004 !important;
  position: relative;
}
.resultslike.disputed #result_result::after {
  content: "";
  width: 30vw;
  height: 0.5vw;
  position: absolute;
  pointer-events: none;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-10deg);
  background-color: #b1edb6;
}
.resultslike.fakereplay .replayid {
  display: none;
}
.resultslike.fakereplay .tweetreplay {
  display: none;
}
.resultslike.nomusicpicker .music_picker {
  display: none;
}
#menus[data-menu-type="40l"] .music_picker,
#menus[data-menu-type="40l"] .replayid {
  color: #f4c19b;
}
#menus[data-menu-type="blitz"] .music_picker,
#menus[data-menu-type="blitz"] .replayid {
  color: #f6c3c3;
}
#menus[data-menu-type="custom"] .music_picker,
#menus[data-menu-type="custom"] .replayid {
  color: #c2b3f4;
}
#menus[data-menu-type^="tetra"] .music_picker,
#menus[data-menu-type^="tetra"] .replayid {
  color: #c3f6c3;
}
#menus .scroller_block.zero .music_picker,
#menus .scroller_block.zero .replayid {
  color: #ccc;
}
.resultslike .replayid::before {
  content: "replay id:";
  margin-right: 0.25em;
  opacity: 0.3;
  font-size: 0.75em;
  font-family: HUN;
}
.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;
}
#menus[data-menu-type="40l"] .bigscore {
  color: #f4c19b;
  text-shadow:
    0 0.03em #bb9c85,
    0 0 16px #fff4;
}
#menus[data-menu-type="40l"] .bigscore > .unit {
  color: #bb9c85;
}
#menus[data-menu-type="blitz"] .bigscore {
  color: #f6c3c3;
  text-shadow:
    0 0.03em #bb8e8e,
    0 0 16px #fff4;
}
#menus[data-menu-type="blitz"] .bigscore > .unit {
  color: #bb8e8e;
}
#menus[data-menu-type="custom"] .bigscore {
  color: #c5b3f4 !important;
  text-shadow:
    0 0.03em #a090c3,
    0 0 16px #fff4;
}
#menus[data-menu-type="custom"] .bigscore > .unit {
  color: #a090c3;
}
#menus[data-menu-type^="tetra"] .bigscore {
  color: #c3f6c9;
  text-shadow:
    0 0.03em #8ebb93,
    0 0 16px #fff4;
}
#menus[data-menu-type="tetra"] .bigscore > .unit {
  color: #8ebb93;
}
.resultslike .bigscore > .mods {
  display: block;
  max-height: 0.15em;
}
.resultslike .bigscore > .mods img {
  height: 0.35em;
  margin: 0 0.05em;
  position: relative;
  top: -0.54em;
}
.resultslike .ranks {
  margin-top: -0.5em;
  margin-bottom: 0.1em;
}
.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);
}
#menus[data-menu-type="40l"] .rank.best {
  background-color: #826d4d;
  box-shadow: 0 0 32px #826d4d;
}
#menus[data-menu-type="blitz"] .rank.best {
  background-color: #82544d;
  box-shadow: 0 0 32px #82544d;
}
#menus[data-menu-type^="tetra"] .rank.best {
  background-color: #4d8254;
  box-shadow: 0 0 32px #4d8254;
}
.resultslike .rank > p {
  color: #22293b;
  text-align: center;
  margin: 0.15em;
}
#menus[data-menu-type="40l"] .rank > p {
  color: #634a35;
}
#menus[data-menu-type="blitz"] .rank > p {
  color: #6d3c3c;
}
#menus[data-menu-type^="tetra"] .rank > p {
  color: #345a36;
}
.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;
}
#menus[data-menu-type="40l"] .rank > h1,
#menus[data-menu-type="40l"] .rank > p.rank_sub {
  color: #f4d3b3;
  text-shadow:
    0 0.03em #c3b390,
    0 0 16px #fff4;
}
#menus[data-menu-type="blitz"] .rank > h1,
#menus[data-menu-type="blitz"] .rank > p.rank_sub {
  color: #f4beb3;
  text-shadow:
    0 0.03em #c39790,
    0 0 16px #fff4;
}
#menus[data-menu-type^="tetra"] .rank > h1,
#menus[data-menu-type^="tetra"] .rank > p.rank_sub {
  color: #b3f4b6;
  text-shadow:
    0 0.03em #90c397,
    0 0 16px #fff4;
}
.resultslike .rank:not(.textual) > h1::before {
  content: "#";
  opacity: 0.3;
  font-size: 0.6em;
  text-shadow: none;
}
.handling_items {
  margin-bottom: 0.1em;
}
.handling_item {
  padding: 0.25em;
  background-color: #0002;
  border-radius: 3px;
}
.handling_item > p {
  color: #22293b;
  text-align: center;
  margin: 0.15em;
}
#menus[data-menu-type="40l"] .handling_item > p {
  color: #634a35;
}
#menus[data-menu-type="blitz"] .handling_item > p {
  color: #6d3c3c;
}
#menus[data-menu-type="custom"] .handling_item > p {
  color: #2a223b;
}
#menus[data-menu-type^="tetra"] .handling_item > p {
  color: #345a36;
}
.handling_item > h1 {
  color: #b3c4f4;
  text-align: center;
  margin: 0;
  font-size: 3vw;
  text-shadow:
    0 0.03em #909dc3,
    0 0 16px #fff4;
  margin-bottom: -0.1em;
}
#menus[data-menu-type="40l"] .handling_item > h1 {
  color: #f4d3b3;
  text-shadow:
    0 0.03em #c3b390,
    0 0 16px #fff4;
}
#menus[data-menu-type="blitz"] .handling_item > h1 {
  color: #f4beb3;
  text-shadow:
    0 0.03em #c39790,
    0 0 16px #fff4;
}
#menus[data-menu-type="custom"] .handling_item > h1 {
  color: #c5b3f4;
  text-shadow:
    0 0.03em #a090c3,
    0 0 16px #fff4;
}
#menus[data-menu-type^="tetra"] .handling_item > h1 {
  color: #b3f4b6;
  text-shadow:
    0 0.03em #90c397,
    0 0 16px #fff4;
}
#menus #handling_item_arr::after {
  content: "F";
  opacity: 0.3;
  font-size: 0.6em;
  text-shadow: none;
}
#menus #handling_item_das::after {
  content: "F";
  opacity: 0.3;
  font-size: 0.6em;
  text-shadow: none;
}
#menus #handling_item_sdf::after {
  content: "X";
  opacity: 0.3;
  font-size: 0.6em;
  text-shadow: none;
}
#play_solo {
  background-color: #1e1d2d;
  border-top: 3px solid #2e2d42;
  border-left: 3px solid #272639;
  border-bottom: 3px solid #12111b;
}
#play_solo > h1 {
  color: #bab8df;
}
#play_solo > p {
  color: #8c88c0;
}
#play_multi {
  background-color: #34222d;
  border-top: 3px solid #472d3d;
  border-left: 3px solid #3c2734;
  border-bottom: 3px solid #271b22;
}
#play_multi > h1 {
  color: #f1bcdb;
}
#play_multi > p {
  color: #c798b4;
}
#play_returntoroom {
  background-color: #be1556;
  border-top: 3px solid #ff0062;
  border-left: 3px solid #d30054;
  border-bottom: 3px solid #81003a;
}
#play_returntoroom > h1 {
  color: #ffb5cb;
}
#play_returntoroom > p {
  color: #ff81a7;
}
#sig_config,
.scroller_item_config {
  background-color: #1c263e;
  border-top: 3px solid #1d3164;
  border-left: 3px solid #1e2a48;
  border-bottom: 3px solid #0e0f13;
}
#sig_config > h1,
.scroller_item_config > h1 {
  color: #88afff;
}
#sig_config > p,
.scroller_item_config > p {
  color: #5169c0;
}
#sig_channel {
  background-color: #1c3e2a;
  border-top: 3px solid #1d6429;
  border-left: 3px solid #1e4822;
  border-bottom: 3px solid #0e130f;
}
#sig_channel > h1 {
  color: #8f9;
}
#sig_channel > p {
  color: #51c063;
}
#sig_about,
.scroller_item_about {
  background-color: #222;
  border-top: 3px solid #2a2a2a;
  border-left: 3px solid #262626;
  border-bottom: 3px solid #131313;
}
#sig_about > h1,
.scroller_item_about > h1 {
  color: silver;
}
#sig_about > p,
.scroller_item_about > p {
  color: #a0a0a0;
}
#exit_electron {
  position: fixed;
  left: 0;
  top: 3em;
  transform: translateX(-2em);
  background-color: #0006;
  border-top: 3px solid #1116;
  border-right: 3px solid #2226;
  border-bottom: 3px solid #0006;
  box-shadow: 0 0 8px #0004;
  color: #fff6;
  font-family: HUN;
  font-size: 1.8em;
  border-radius: 3px;
  filter: brightness(1);
  transition:
    0.5s transform,
    0.5s filter,
    0.5s opacity,
    0.5s background-color,
    0.5s border-top,
    0.5s border-right,
    0.5s border-bottom,
    0.5s color;
  padding-top: 0.5em;
  padding-bottom: 0.3em;
  padding-left: 3.5em;
  padding-right: 0.5em;
  cursor: pointer;
  z-index: 10;
}
#exit_electron:hover {
  transform: translateX(-0.5em);
  filter: brightness(1.2);
  background-color: #4006;
  border-top: 3px solid #4116;
  border-right: 3px solid #4226;
  border-bottom: 3px solid #4006;
  color: #faa;
  transition:
    0.2s transform,
    0.2s filter,
    0.5s opacity,
    0.2s background-color,
    0.2s border-top,
    0.2s border-right,
    0.2s border-bottom,
    0.2s color;
}
#exit_electron:active {
  transform: translateX(0);
  filter: brightness(1.5);
  transition:
    50ms transform,
    0s filter,
    0.5s opacity,
    0.5s background-color,
    0.5s border-top,
    0.5s border-right,
    0.5s border-bottom,
    0.5s color;
}
#exit_electron.hidden {
  opacity: 0;
  transform: translateX(-10em);
  pointer-events: none;
}
body:not(.electron) #exit_electron {
  display: none;
}
#outdated_warning {
  width: calc(70vw - 12em);
  margin-left: 6em;
  padding: 1em;
  padding-bottom: 0.5em;
  padding-top: 0.75em !important;
  background: #fc0 !important;
  background-clip: border-box !important;
  background-position: center !important;
  background-size: cover !important;
  border-top: 3px solid #fc0 !important;
  border-left: 3px solid #fc0 !important;
  border-bottom: 3px solid #fc0 !important;
  border-right: 3px solid #fc0 !important;
  color: #000;
  text-align: center;
  padding-top: 0.5em;
  cursor: pointer;
  will-change: transform;
  filter: brightness(1);
  transition: 0.3s filter;
  position: relative;
  font-family: HUN;
  margin-bottom: 1em;
}
#outdated_warning p {
  font-size: 1.5em;
  margin: 0;
}
#outdated_warning:hover {
  filter: brightness(1.3);
}
body:not(.socket_outdated) #outdated_warning {
  display: none;
}
#home_menu.play-entry-anim div {
  animation: 0.5s 1.2s HomeMenuEntryAnimGeneric backwards;
}
@keyframes HomeMenuEntryAnimGeneric {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
#home_menu.play-entry-anim #play_multi {
  animation: 0.5s 0.5s HomeMenuEntryAnimSlider backwards
    cubic-bezier(0.17, 0.38, 0.3, 1);
}
#home_menu.play-entry-anim #play_solo {
  animation: 0.5s 0.55s HomeMenuEntryAnimSlider backwards
    cubic-bezier(0.17, 0.38, 0.3, 1);
}
#home_menu.play-entry-anim #sig_channel {
  animation: 0.5s 0.6s HomeMenuEntryAnimSlider backwards
    cubic-bezier(0.17, 0.38, 0.3, 1);
}
#home_menu.play-entry-anim #sig_config {
  animation: 0.5s 0.65s HomeMenuEntryAnimSlider backwards
    cubic-bezier(0.17, 0.38, 0.3, 1);
}
#home_menu.play-entry-anim #sig_about {
  animation: 0.5s 0.7s HomeMenuEntryAnimSlider backwards
    cubic-bezier(0.17, 0.38, 0.3, 1);
}
@keyframes HomeMenuEntryAnimSlider {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
#insiders_upsell {
  background: #000;
  width: 100vw;
  margin-left: -15vw;
  padding: 1.25rem 0;
  padding-bottom: 2rem;
  font-size: 1rem;
  font-family: PFW;
  color: #fff;
  clip-path: polygon(
    20vw 0,
    100% 0,
    100% 100%,
    calc(100% - 1rem) calc(100% - 1rem),
    calc(20vw + 3rem) calc(100% - 1rem)
  );
  position: relative;
  text-align: center;
  margin-top: -2.3rem;
  margin-bottom: 1.5rem;
  animation: 5s 1.5s InsidersUpsellAppear cubic-bezier(0.17, 0.38, 0.3, 1)
    backwards;
  z-index: 10;
}
@keyframes InsidersUpsellAppear {
  from {
    margin-top: -5.75rem;
  }
  to {
    margin-top: -2.3rem;
  }
}
#insiders_upsell > span {
  --i: 0;
  display: inline-block;
  animation: 0.75s calc(-0.2s * var(--i)) InsidersUpsellLetterWobble ease-in-out
    alternate infinite;
}
@keyframes InsidersUpsellLetterWobble {
  from {
    transform: translate(-1px, -1.5px);
  }
  to {
    transform: translate(1px, 1.5px);
  }
}
#insiders_upsell > a {
  color: #0f8;
  text-decoration: underline;
  margin-left: 2em;
  display: inline-block;
}
#insiders_upsell_hide {
  position: absolute;
  color: #888;
  top: 0.7rem;
  right: 1rem;
  font-size: 2rem;
  cursor: pointer;
}
#insiders_upsell.hidden {
  display: none;
}
#insiders_upsell.hiding {
  pointer-events: none;
  animation: 0.5s InsidersUpsellDisappear ease-out forwards;
}
@keyframes InsidersUpsellDisappear {
  from {
    margin-top: -2.3rem;
  }
  to {
    margin-top: -5.75rem;
  }
}
#electron_ota_busy {
  width: calc(70vw - 14em);
  margin-left: 6em;
  padding: 0.5em 1em;
  background: #000 !important;
  color: #fff;
  font-family: "C";
  margin-bottom: 1em;
  border-radius: 3px;
  user-select: none;
}
#electron_ota_busy.hidden {
  display: none;
}
#electron_ota_busy > p {
  text-align: center;
  margin: 0.2rem;
  font-size: 1.1rem;
}
#electron_ota_bar {
  height: 22px;
  position: relative;
}
#electron_ota_progress {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - 2px);
  bottom: calc(50% - 2px);
  overflow: hidden;
}
#electron_ota_progress::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: -25px;
  background: repeating-linear-gradient(
    -45deg,
    #9f0 0,
    #9f0 8px,
    #6eb800 8px,
    #6eb800 16px
  );
  animation: 0.4s electron_ota_progress linear infinite;
}
@keyframes electron_ota_progress {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(22.6274px);
  }
}
#electron_ota_progress::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: var(--progress);
  background: #444;
}
#electron_ota_num {
  display: inline-block;
  color: #9f0;
  font-family: PFW;
  font-weight: 900;
  font-size: 18px;
  background: #000;
  position: absolute;
  top: 1px;
  left: var(--progress);
  transform: translateX(calc(-1 * var(--progress)));
  padding: 0 4px;
}
#electron_ota_info {
  display: flex;
  color: #aaa;
  font-size: 0.8rem;
}
#electron_ota_info_left {
  flex-grow: 1;
  flex-shrink: 0;
  text-align: left;
}
#electron_ota_info_right {
  flex-grow: 0;
  flex-shrink: 0;
  text-align: right;
}
#electron_ota_done {
  width: calc(70vw - 14em);
  margin-left: 6em;
  padding: 0.5em 1em;
  background: #000;
  color: #9f0;
  font-family: "C";
  margin-bottom: 1em;
  border-radius: 3px;
  user-select: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  position: relative;
  transition:
    0.3s color,
    0.3s transform;
}
#electron_ota_done.hidden {
  display: none;
}
#electron_ota_done::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: -50px;
  background: repeating-linear-gradient(
    -45deg,
    #9f0 0,
    #9f0 16px,
    #6eb800 16px,
    #6eb800 32px
  );
  animation: 2s electron_ota_done linear infinite;
  z-index: -1;
  opacity: 0.4;
  transition: 0.3s opacity;
}
@keyframes electron_ota_done {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(45.2548px);
  }
}
#electron_ota_done > p {
  text-align: center;
  margin: 0.2rem;
  font-size: 1.2rem;
  font-weight: 900;
}
#electron_ota_done:hover {
  color: #fff;
}
#electron_ota_done:hover::before {
  opacity: 0.2;
}
#electron_ota_done:active {
  color: #000;
  transform: scale(0.97);
  transition:
    50ms color,
    50ms transform;
}
#electron_ota_done:active::before {
  opacity: 1;
  transition: 50ms opacity;
}
.menuslide_host {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: -6em;
  padding: 9.5em max(4em, 50vw - 25em);
  padding-top: 20vh;
  overflow-x: hidden;
  overflow-y: auto;
  text-align: right;
  color: #fff;
  z-index: 999999;
  pointer-events: none;
  transition: 0.3s transform cubic-bezier(0.35, 1.37, 0.73, 1);
  scrollbar-width: none !important;
}
.menuslide_host.rolledup {
  overflow-y: hidden;
  transform: translateY(calc(80vh - 3rem));
}
.menuslide_host.hidden,
body.multiplextransitionlock #zenithmenu {
  overflow-y: hidden;
  transform: translateY(calc(80vh + 3rem));
  pointer-events: none !important;
}
.menuslide_host.thidden {
  display: none !important;
}
.menuslide_host::-webkit-scrollbar {
  display: none;
}
.menuslide_host.startanim {
  animation: 0.6s 0.4s MenuSlideHostAppear cubic-bezier(0.35, 1.37, 0.73, 1)
    backwards;
}
.menuslide_host .scroller_block {
  width: 100%;
  box-sizing: border-box;
}
.menuslide_host:not(.rolledup) .menuslide {
  pointer-events: all;
}
@keyframes MenuSlideHostAppear {
  from {
    transform: translateY(calc(80vh + 3rem));
  }
  to {
    transform: translateY(0);
  }
}
.menuslide .menuslide_rollup {
  text-align: center;
  font-size: 1.7em;
  font-weight: 900;
  margin: calc(-1rem - 3px);
  margin-bottom: 1rem;
  padding: 1rem;
  padding-bottom: 0.3rem;
  border-radius: 3px 3px 0 0;
  border-bottom: 3px dotted #0f1117;
  color: #657497;
  cursor: pointer;
  transition:
    0.2s background-color,
    0.2s color;
  pointer-events: all;
}
.menuslide .menuslide_rollup:hover {
  color: #7a91c8;
  background-color: #7a91c833;
}
.menuslide .menuslide_rollup:active {
  color: #fff;
  background-color: #7a91c8;
  transition:
    50ms background-color,
    50ms color;
}
.menuslide .menuslide_rollup::after,
.menuslide .menuslide_rollup::before {
  display: inline-block;
  content: "";
  width: 1em;
  height: 0.5em;
  background-color: currentColor;
  margin: 0 0.5em;
  position: relative;
  top: -0.15em;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  transition: 0.2s transform;
}
.menuslide .menuslide_rollup:hover::before {
  transform: translateX(-0.3rem);
}
.menuslide .menuslide_rollup:hover::after {
  transform: translateX(0.3rem);
}
.menuslide .menuslide_rollup:active::before {
  transform: translateX(-1rem);
  transition: 50ms transform;
}
.menuslide .menuslide_rollup:active::after {
  transform: translateX(1rem);
  transition: 50ms transform;
}
.menuslide_host.rolledup .menuslide .menuslide_rollup::before {
  transform: rotate(-180deg);
}
.menuslide_host.rolledup .menuslide .menuslide_rollup::after {
  transform: rotate(180deg);
}
.menuslide_host.rolledup .menuslide .menuslide_rollup:hover::before {
  transform: translateX(-0.3rem) rotate(-180deg);
}
.menuslide_host.rolledup .menuslide .menuslide_rollup:hover::after {
  transform: translateX(0.3rem) rotate(180deg);
}
.menuslide_host.rolledup .menuslide .menuslide_rollup:active::before {
  transform: translateX(-1rem) rotate(-180deg);
}
.menuslide_host.rolledup .menuslide .menuslide_rollup:active::after {
  transform: translateX(1rem) rotate(180deg);
}
body.inzenith #diyusi {
  display: none;
}
body.inzenith #enter_spectate {
  display: none;
}
body.inzenith #zen_spectate {
  display: none;
}
body.inzenith #exit_spectate {
  display: none;
}
body.inzenith #prev_spectate {
  right: 4.25em;
}
body.inzenith #grid_spectate {
  right: 1.5em;
}
body.inzenith #next_spectate {
  right: 0.25em;
}
body.inzenith:not(.ingame_phys):not(.spectating):not(.multiplextransitionlock)
  #ingame_chat_container {
  bottom: 3.25rem;
  border-radius: 0;
  transition:
    0.5s transform,
    0.5s opacity,
    0.2s background,
    0.3s top,
    0.3s bottom;
}
body.inzenith #follow_spectate {
  display: block;
  position: absolute;
  right: 5.5em;
  top: 0.25em;
  border: 1px solid #444;
  background-color: #000c;
  text-align: center;
  padding-top: 0.35em;
  padding-left: 0.4em;
  padding-right: 0.4em;
  line-height: 1.3rem;
  color: #fff;
  font-size: 1.5em;
  border-radius: 3px;
  cursor: pointer;
  transition: 0.3s background-color;
}
body.inzenith #follow_spectate:hover {
  background-color: #222;
}
body.inzenith #follow_spectate.unavailable {
  pointer-events: none;
  opacity: 0.7;
  background: linear-gradient(
    to bottom right,
    #000c 0,
    #000c 45%,
    #444 45%,
    #444 55%,
    #000c 55%,
    #000c 100%
  );
  color: #444;
}
body.inzenith #follow_spectate.active {
  color: #ff7800;
  border: 1px solid #ac5000;
  background-color: #68310066;
}
body.inzenith #follow_spectate.active:hover {
  background-color: #683100cc;
}
#following_spectate {
  display: none;
}
body.inzenith #follow_spectate.active + #following_spectate {
  display: block;
  position: absolute;
  right: 10em;
  top: 0.8em;
  color: #ff7800;
  font-size: 1.1em;
  pointer-events: none;
  animation: 0.3s FollowingSpectateAppear ease-out;
}
@keyframes FollowingSpectateAppear {
  from {
    opacity: 0;
    transform: translateX(3rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
#leavezenith {
  position: fixed;
  left: 0;
  top: 0.5em;
  transform: translateX(-2em);
  background-color: #0006;
  border-top: 3px solid #1116;
  border-right: 3px solid #2226;
  border-bottom: 3px solid #0006;
  box-shadow: 0 0 8px #0004;
  color: #fffa;
  font-family: HUN;
  font-size: 1.8em;
  border-radius: 3px;
  filter: brightness(1);
  transition:
    0.5s transform,
    0.5s filter,
    0.5s opacity,
    0.5s background-color,
    0.5s border-top,
    0.5s border-right,
    0.5s border-bottom,
    0.5s color;
  padding-top: 0.5em;
  padding-bottom: 0.3em;
  padding-left: 3.5em;
  padding-right: 0.5em;
  cursor: pointer;
}
#leavezenith:hover {
  transform: translateX(-0.5em);
  filter: brightness(1.2);
  background-color: #4006;
  border-top: 3px solid #4116;
  border-right: 3px solid #4226;
  border-bottom: 3px solid #4006;
  color: #faa;
  transition:
    0.2s transform,
    0.2s filter,
    0.5s opacity,
    0.2s background-color,
    0.2s border-top,
    0.2s border-right,
    0.2s border-bottom,
    0.2s color;
}
#leavezenith:active {
  transform: translateX(0);
  filter: brightness(1.5);
  transition:
    50ms transform,
    0s filter,
    0.5s opacity,
    0.5s background-color,
    0.5s border-top,
    0.5s border-right,
    0.5s border-bottom,
    0.5s color;
}
#menus.lite:not(.hidden) #leavezenith {
  pointer-events: all;
}
#zenithmenu .scroller_block {
  background-color: #532314;
  border-top: 3px solid #b83a1b;
  border-left: 3px solid #8d2e1b;
  border-bottom: 3px solid #2f0a0a;
  border-right: 3px solid #37160d;
  transition: 0.3s background-color;
}
#zenithmenu.reversed .scroller_block {
  background-color: #2a070e;
  border-top: 3px solid #8f0d19;
  border-left: 3px solid #5c0d0d;
  border-bottom: 3px solid #120303;
  border-right: 3px solid #200606;
}
#zenithmenu.rolledup .scroller_block {
  background-color: #240c05ad;
  border-top: 3px solid #b83a1b;
  border-left: 3px solid #8d2e1b;
  border-bottom: 3px solid #2f0a0a;
  border-right: 3px solid #37160d;
}
#zenithmenu .control_button {
  background-color: #532314;
  border-top: 3px solid #b83a1b;
  border-left: 3px solid #8d2e1b;
  border-bottom: 3px solid #2f0a0a;
  border-right: 3px solid #37160d;
  color: #b26040;
}
#zenithmenu .control_button.pressed {
  background-color: #2f0a0a;
  border-top: 3px solid #0f0407;
  border-left: 3px solid #22080d;
  border-bottom: 3px solid #480f1c;
  border-right: 3px solid #3b131e;
  color: #ff9c6b;
}
#zenithmenu.resultslike.reversed .watchreplay {
  background-color: #641823;
}
#zenithmenu #pbdisplays_zenith {
  margin-bottom: -0.5rem;
  margin-top: 1rem;
}
#zenithmenu #pbdisplays_zenith img {
  height: 1.7rem;
  vertical-align: 2%;
  margin-left: 0.25rem;
}
#zenithmenu #pbdisplay_zenith_inner,
#zenithmenu #pbdisplay_zenithex_inner,
#zenithmenu .scroller_block > h1 {
  color: #b26040;
  font-size: 2.5em;
  margin: 0;
  margin-bottom: 0.15em;
}
#zenithmenu #pbdisplay_zenith,
#zenithmenu #pbdisplay_zenithex,
#zenithmenu .scroller_block > h2 {
  color: #b26040;
  font-size: 1.25em;
  margin: 0;
  margin-bottom: 0.15em;
}
#zenithmenu .scroller_block > p {
  color: #ff9c6b;
}
#zenithmenu .menuslide_rollup {
  border-bottom: 3px dotted #2f0a0a;
  color: #b26040;
}
#zenithmenu .menuslide_rollup:hover {
  color: #ff9c6b;
  background-color: #ff9c6b33;
}
#zenithmenu .menuslide_rollup:active {
  color: #fff;
  background-color: #ff9c6b;
}
#zenithmenu.resultslike .bigscore {
  color: #ffd2bd;
  text-shadow:
    0 0.03em #ff9c6b,
    0 0 16px #fff4;
}
#zenithmenu.resultslike .bigscore > .unit {
  color: #ff9c6b;
}
#zenithmenu .keypairs td {
  color: #b26040;
}
#zenithmenu .keypairs td:nth-child(2) {
  color: #ff9c6b;
}
#zenithmenu .keypairs td:nth-child(2) b {
  margin-right: 2rem;
}
#zenithmenu .rank.best {
  background-color: #a94b2f;
  box-shadow: 0 0 32px #a94b2f;
}
#zenithmenu .rank > p {
  color: #6c331b;
}
#zenithmenu .rank > h1,
#zenithmenu .rank > p.rank_sub {
  color: #f4beb3;
  text-shadow:
    0 0.03em #c39790,
    0 0 16px #fff4;
}
#zenithmenu .rank > h1 {
  font-size: 3rem;
}
#zenithmenu .checkbox {
  color: #b26040;
}
#zenithmenu .checkbox.checked {
  color: #ff9c6b;
}
#zenithmenu .checkbox::before {
  background-color: #2f0a0a;
  border-top: 3px solid #0f0407;
  border-left: 3px solid #22080d;
  border-bottom: 3px solid #480f1c;
  border-right: 3px solid #3b131e;
}
#zenithmenu .checkbox.checked::before {
  background: url("/tetr-res/checkmark.svg"), #b26040;
  border-top: 3px solid #e27852;
  border-left: 3px solid #c36846;
  border-bottom: 3px solid #79402c;
  border-right: 3px solid #8f4c34;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#zenithmenu.inresults [data-zenithmenu-context="home"] {
  display: none;
}
#zenithmenu:not(.inresults) [data-zenithmenu-context="results"] {
  display: none;
}
.scroller_block#start_zenith {
  text-align: center;
  padding-top: 2em;
  padding-bottom: 1.5em;
  box-shadow: 0 8px #210707;
  transform: translateY(0);
  cursor: pointer;
  transition:
    0.3s transform,
    0.3s filter,
    0.3s box-shadow;
}
.scroller_block#start_zenith:hover {
  box-shadow: 0 6px #210707;
  transform: translateY(2px);
  filter: brightness(1.2);
}
.scroller_block#start_zenith:active {
  box-shadow: 0 2px #210707;
  transform: translateY(6px);
  filter: brightness(4);
  transition:
    50ms transform,
    50ms filter,
    50ms box-shadow;
}
.scroller_block#start_zenith h1 {
  color: #ff9c6b !important;
  font-size: 3vw;
  margin: 0;
  transition: 0.3s transform;
  transform: translateY(0);
}
.scroller_block#start_zenith p {
  color: #b26040 !important;
  font-size: 1vw;
  margin: 0;
  transform: translateY(0);
  opacity: 1;
  transition:
    0.3s opacity,
    0.3s transform;
}
.scroller_block#start_zenith.nomods h1 {
  transform: translateY(0.6rem);
}
.scroller_block#start_zenith.nomods p {
  transform: translateY(1rem);
  opacity: 0;
}
#zenith_deck {
  margin: -1rem;
  margin-top: -2rem;
  height: 20rem;
  position: relative;
  contain: layout;
}
#zenith_deck_nag {
  position: absolute;
  top: 1.65rem;
  left: 0;
  right: 0;
  font-size: 1.2rem;
  text-align: center;
  pointer-events: none;
  color: #b83a1b;
  transition:
    0.3s color,
    0.3s transform;
}
#zenith_deck_nag.hidden {
  display: none;
}
#zenithmenu.reversed #zenith_deck_nag {
  color: #f06;
  transform: translateX(0.8rem);
}
#zenith_deck_nag_inner {
  display: inline-block;
  width: 0;
  transition: 0.3s width;
}
#zenithmenu.reversed #zenith_deck_nag_inner {
  width: 14rem;
}
#zenith_deck_cards {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 15rem;
  clip-path: polygon(-40% -40%, 140% -40%, 140% 100%, -40% 100%);
  transition: 0.2s clip-path;
}
#zenithmenu.reversed #zenith_deck_cards {
  clip-path: polygon(-40% -40%, 140% -40%, 140% 133.333%, -40% 133.333%);
}
#zenith_deck_infos {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 5rem;
  transition: 0.2s opacity;
}
#zenithmenu.reversed #zenith_deck_infos {
  opacity: 0;
  pointer-events: none;
}
#zenith_deck_infos::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0.2rem;
  right: 0.2rem;
  height: 3px;
  background: linear-gradient(
    to right,
    #0000 0,
    #b83a1b 0.6rem,
    #b83a1b calc(100% - 0.6rem),
    #0000 100%
  );
  transition: 0.2s transform;
}
#zenithmenu.reversed #zenith_deck_infos::before {
  transform: translateY(5rem);
}
.zenith_deck_info {
  position: absolute;
  top: 18px;
  left: 0;
  right: 0;
  text-align: center;
  transition:
    0.3s transform ease-out,
    0.3s opacity ease-out;
  opacity: 1;
  transform: translateX(0);
}
.zenith_deck_info.hidden {
  opacity: 0;
  transform: translateX(-10rem);
  pointer-events: none;
}
.zenith_deck_info:not(.hidden) {
  animation: 0.3s ZenithDeckInfoAppear ease-out;
}
@keyframes ZenithDeckInfoAppear {
  from {
    opacity: 0;
    transform: translateX(10rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.zenith_deck_info h1 {
  margin: 0;
  font-size: 2rem;
  color: #ff9c6b;
}
.zenith_deck_info h1::after,
.zenith_deck_info h1::before {
  display: inline-block;
  content: "";
  width: 1em;
  height: 0.7em;
  background-color: currentColor;
  margin: 0 0;
  position: relative;
  top: -0.075em;
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
.zenith_deck_info h1::after,
.zenith_deck_info h1::before {
  clip-path: polygon(
    50% 0%,
    43% 20%,
    33% 38%,
    18% 46%,
    0% 50%,
    18% 54%,
    33% 62%,
    43% 80%,
    50% 100%,
    47% 75%,
    41% 62%,
    30% 50%,
    41% 38%,
    47% 25%
  );
}
.zenith_deck_info h1::after {
  transform: scaleX(-1);
}
.zenith_deck_info p {
  margin: 0;
  font-size: 1.2rem;
  color: #b26040;
}
.zenith_deck_info.ping p {
  animation: 0.5s ZenithDeckInfoPing linear;
}
@keyframes ZenithDeckInfoPing {
  0% {
    color: #b26040;
  }
  17% {
    color: #ffd899;
  }
  33% {
    color: #b26040;
  }
  50% {
    color: #ffd899;
  }
  67% {
    color: #b26040;
  }
  83% {
    color: #ffd899;
  }
  100% {
    color: #b26040;
  }
}
.zenith_deck_info.generic h1 {
  margin-top: 0.5rem;
  color: #b26040;
}
.zenith_deck_info.generic h1::after,
.zenith_deck_info.generic h1::before {
  height: 0.5em;
  top: -0.15em;
  margin: 0 0.5em;
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
#zenith_deck_tryhold {
  position: absolute;
  bottom: 0.38rem;
  left: 0;
  right: 0;
  pointer-events: none;
  text-align: center;
  display: none;
}
#zenith_deck_tryhold.visible {
  display: block;
}
#zenith_deck_tryhold.visible ~ #zenith_deck_infos .zenith_deck_info p {
  display: none;
}
#zenith_deck_tryhold_new {
  font-size: 1.2rem;
  color: #ff006f;
  font-weight: 900;
  text-shadow: 0 0 3px #ff006f;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
#zenith_deck_tryhold_old {
  font-size: 1.2rem;
  color: #b26040;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.zdtry_o_sp {
  display: inline-block;
  width: 0.34em;
}
.zdtry_o {
  display: inline-block;
  animation:
    0.15s 0.8s ZDTryOldBonkA ease-out,
    0.25s 1.5s ZDTryOldBonkB ease-out,
    var(--l) 2.2s ZDTryOldOutA cubic-bezier(0.11, 0.75, 0.34, 1),
    var(--l) 2.2s ZDTryOldOutB cubic-bezier(0.84, -0.01, 0.93, 0.53) forwards;
}
@keyframes ZDTryOldBonkA {
  0% {
    color: #b26040;
    transform: translateY(0);
  }
  15% {
    color: #ffe299;
    transform: translateY(calc(var(--bonk-a) * 4px));
  }
  50% {
    color: #ff875c;
    transform: translateY(calc(var(--bonk-a) * -3px));
  }
  100% {
    color: #b26040;
    transform: translateY(0);
  }
}
@keyframes ZDTryOldBonkB {
  0% {
    color: #b26040;
    transform: translateY(0);
  }
  15% {
    color: #fff;
    transform: translateY(calc(var(--bonk-b) * 10px));
  }
  30% {
    color: #fff;
    transform: translateY(calc(var(--bonk-b) * -6px));
  }
  50% {
    color: #ffe299;
    transform: translateY(calc(var(--bonk-b) * 4px));
  }
  75% {
    color: #ff875c;
    transform: translateY(calc(var(--bonk-b) * -3px));
  }
  100% {
    color: #b26040;
    transform: translateY(0);
  }
}
@keyframes ZDTryOldOutA {
  from {
    transform: translate(0, 0) rotate(0);
  }
  to {
    transform: translate(calc(var(--x) * 30px), calc(var(--y) * 120px))
      rotate(calc(var(--r) * 200deg));
  }
}
@keyframes ZDTryOldOutB {
  from {
    color: #fff;
    opacity: 1;
  }
  to {
    color: #fff;
    opacity: 0;
  }
}
.zdtry_n_sp {
  display: inline-block;
  width: 0.34em;
}
.zdtry_n {
  display: inline-block;
  animation: 1.5s calc(2.3s + var(--i) * 0.04s) ZDTryNewIn ease-out backwards;
}
.zdtry_n.ex {
  animation:
    1.5s calc(2.3s + var(--i) * 0.04s) ZDTryNewIn ease-out backwards,
    2s calc(4.5s + (var(--i) - 21) * 0.1s) ZDTryNewEX ease-in-out alternate
      infinite;
}
@keyframes ZDTryNewIn {
  0% {
    opacity: 0;
    color: #fff;
  }
  10% {
    opacity: 1;
    color: #fff;
  }
  100% {
    opacity: 1;
    color: #ff006f;
  }
}
@keyframes ZDTryNewEX {
  0% {
    color: #ff006f;
  }
  80% {
    color: #fff;
  }
  100% {
    color: #fff;
  }
}
.zenith_card {
  width: 13.2rem;
  height: 18rem;
  position: absolute;
  top: 0;
  --br: 0deg;
  --x: 0;
  --rx: 0deg;
  --ry: 0deg;
  left: 0;
  pointer-events: all;
  cursor: pointer;
  transform-style: preserve-3d;
  transform: translate3d(calc(var(--x) * 36.5rem), 2rem, 0) perspective(700px)
    rotate(var(--br)) scale(1);
  transition: 0.3s transform;
}
.zenith_card.active {
  transform: translate3d(calc(var(--x) * 36.5rem), 0.5rem, 0) perspective(700px)
    rotate(var(--br)) scale(1);
}
.zenith_card:hover,
.zenith_card[rg-hover] {
  transform: translate3d(calc(var(--x) * 36.5rem), -1.5rem, 0)
    perspective(700px) rotate(var(--br)) scale(1);
  z-index: 1;
}
.zenith_card.active:hover,
.zenith_card.active[rg-hover] {
  transform: translate3d(calc(var(--x) * 36.5rem), -2.5rem, 0)
    perspective(700px) rotate(var(--br)) scale(1);
}
.zenith_card:active {
  transform: translate3d(calc(var(--x) * 36.5rem), -1.5rem, -2rem)
    perspective(700px) rotate(var(--br)) scale(0.9);
  transition: 50ms transform;
}
.zenith_card.active:active {
  transform: translate3d(calc(var(--x) * 36.5rem), -2.5rem, -2rem)
    perspective(700px) rotate(var(--br)) scale(0.9);
}
.zenith_card.hover-blocked {
  pointer-events: none;
}
.zenith_card.reversed:not(.reversespin) {
  --br: 180deg;
  --x: 0.5 !important;
  transform: translate3d(calc(var(--x) * 36.5rem), 0.5rem, 0) perspective(400px)
    rotate(var(--br)) scale(1);
}
.zenith_card.reversed:not(.reversespin):hover.
  .zenith_card.reversed:not(.reversespin)[rg-hover] {
  transform: translate3d(calc(var(--x) * 36.5rem), 0.3rem, 2rem)
    perspective(400px) rotate(var(--br)) scale(1.05);
}
.zenith_card.reversed:not(.reversespin):active {
  transform: translate3d(calc(var(--x) * 36.5rem), 0.3rem, -2rem)
    perspective(400px) rotate(var(--br)) scale(0.9);
}
.zenith_card.reversehide {
  pointer-events: none;
  transform: translate3d(calc(var(--x) * 36.5rem), 20rem, 0) perspective(700px)
    rotate(var(--br)) scale(1);
  transition: 0.2s transform;
}
.zenith_card_rot,
.zenith_card_tilt {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  transform-style: preserve-3d;
}
.zenith_card_rot {
  transform: rotateY(0) rotateX(0);
  transition: 0.3s transform;
}
.zenith_card:hover .zenith_card_rot,
.zenith_card[rg-hover] .zenith_card_rot {
  transform: rotateY(var(--rx)) rotateX(var(--ry));
  transition: none;
}
.zenith_card.reversed:not(.reversespin):not(:hover):not([rg-hover]):not(:active)
  .zenith_card_rot {
  animation:
    2s 0.5s ZenithCardReverseBobStart ease-in-out,
    3s 2.5s ZenithCardReverseBob ease-in-out infinite alternate;
}
@keyframes ZenithCardReverseBobStart {
  from {
    transform: rotateX(0) rotateY(0);
  }
  to {
    transform: rotateX(10deg) rotateY(-10deg);
  }
}
@keyframes ZenithCardReverseBob {
  from {
    transform: rotateX(10deg) rotateY(-10deg);
  }
  to {
    transform: rotateX(10deg) rotateY(10deg);
  }
}
.zenith_card.reversed:hover .zenith_card_rot,
.zenith_card.reversed[rg-hover] .zenith_card_rot {
  transform: rotateY(var(--rx)) rotateX(calc(var(--ry) + 10deg));
  transition: none;
}
.zenith_card_back,
.zenith_card_front,
.zenith_card_lock,
.zenith_card_outline,
.zenith_card_throb {
  position: absolute;
  top: 0;
  left: 0;
  width: 13.2rem;
  height: 18rem;
  backface-visibility: hidden;
}
.zenith_card_back {
  transform: rotateY(180deg);
}
.zenith_card_outline {
  backface-visibility: visible;
  transform: translateZ(-1px) scale(1);
  animation:
    0.2s ZenithCardOutlineJump ease-out,
    1.5s 0.2s ZenithCardOutlineGlow ease-in-out infinite;
}
@keyframes ZenithCardOutlineJump {
  0% {
    transform: translateZ(-1px) scale(1);
    opacity: 0;
  }
  50% {
    transform: translateZ(-1px) scale(1.1);
    opacity: 0.2;
  }
  100% {
    transform: translateZ(-1px) scale(1);
    opacity: 0.8;
  }
}
@keyframes ZenithCardOutlineGlow {
  0% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 0.8;
  }
}
.zenith_card:not(.active) .zenith_card_outline {
  display: none;
}
.zenith_card.reversed .zenith_card_outline {
  display: none;
}
.zenith_card_lock {
  transform: translateZ(1px);
}
.zenith_card_lockover {
  transform: translateZ(7px);
}
.zenith_card:not(.floorlocked):not(.supporterlock):not(.locked)
  .zenith_card_lock {
  display: none;
}
body.staff
  .zenith_card.supporterlock:not(.floorlocked):not(.locked)
  .zenith_card_lock,
body.supporter
  .zenith_card.supporterlock:not(.floorlocked):not(.locked)
  .zenith_card_lock,
body.zenith_duoisfree
  .zenith_card.supporterlock:not(.floorlocked):not(.locked)
  .zenith_card_lock {
  display: none;
}
.zenith_card.spin .zenith_card_rot {
  animation: 0.25s ZenithCardRot cubic-bezier(0.59, 0.08, 0.6, 0.93);
}
.zenith_card.spin .zenith_card_tilt {
  animation: 0.25s ZenithCardTilt linear;
}
@keyframes ZenithCardRot {
  from {
    transform: perspective(700px) rotateY(0);
  }
  to {
    transform: perspective(700px) rotateY(360deg);
  }
}
@keyframes ZenithCardTilt {
  0% {
    transform: scale(1) rotateX(0);
  }
  40% {
    transform: scale(1.1) rotateX(-15deg);
  }
  70% {
    transform: scale(1.1) rotateX(15deg);
  }
  100% {
    transform: scale(1) rotateX(0);
  }
}
.zenith_card.reversespin {
  animation:
    0.4s ZenithCardReverseSpin cubic-bezier(0.24, 1.62, 0.65, 1),
    0.1s 0.4s ZenithCardReverseSpinEnd cubic-bezier(0.32, 0.02, 0.84, 0.5);
}
@keyframes ZenithCardReverseSpin {
  from {
    transform: translate3d(calc(var(--x) * 36.5rem), -1.5rem, 0)
      perspective(700px) rotate(var(--br)) scale(1);
  }
  to {
    transform: translate3d(calc(0.5 * 36.5rem), -2rem, 0) perspective(700px)
      rotate(180deg) scale(1.4);
  }
}
@keyframes ZenithCardReverseSpinEnd {
  from {
    transform: translate3d(calc(0.5 * 36.5rem), -2rem, 0) perspective(700px)
      rotate(180deg) scale(1.4);
  }
  to {
    transform: translate3d(calc(0.5 * 36.5rem), 0.5rem, 0) perspective(700px)
      rotate(180deg) scale(0.9);
  }
}
.zenith_card_front {
  transition: 0.3s filter;
}
.zenith_card.reversed .zenith_card_front {
  filter: brightness(0.9) saturate(1.5) hue-rotate(-30deg);
}
.zenith_card_throb {
  opacity: 0;
}
.zenith_card.reversed .zenith_card_throb {
  opacity: var(--throb-card);
}
.zenith_card_progress {
  position: absolute;
  left: 50%;
  bottom: 100%;
  pointer-events: none;
  transform: translate3d(-50%, 1.5rem, 0) rotateX(0);
  background: #000a;
  color: #fff;
  padding: 0.5rem 0.8rem;
  padding-top: 0.3rem;
  clip-path: polygon(
    4px 0,
    calc(100% - 4px) 0,
    100% 4px,
    100% calc(100% - 12px),
    calc(100% - 4px) calc(100% - 8px),
    calc(50% + 8px) calc(100% - 8px),
    50% 100%,
    calc(50% - 8px) calc(100% - 8px),
    4px calc(100% - 8px),
    0 calc(100% - 12px),
    0 4px
  );
  font-size: 1.1rem;
  font-weight: 900;
  white-space: nowrap;
  opacity: 0;
  transition:
    0.3s opacity,
    0.3s transform;
}
.zenith_card.reversed .zenith_card_progress,
.zenith_card.reversehide .zenith_card_progress,
.zenith_card_progress.hidden {
  display: none;
}
.zenith_card:hover .zenith_card_progress,
.zenith_card[rg-hover] .zenith_card_progress {
  transform: translate3d(-50%, 1.25rem, 1rem) rotateX(-30deg);
  opacity: 1;
  transition:
    0.3s 0.1s opacity,
    0.3s 0.1s transform;
}
.zenith_card_progress > span {
  color: #fff8;
}
.zenith_card_progress > span > span {
  font-size: 0.7em;
}
.zenith_card_progress > sub {
  color: #fff4;
  font-size: inherit;
  vertical-align: baseline;
}
.zenith_card_crystal {
  position: absolute;
  left: calc(50% - 1rem);
  top: 0.2rem;
  width: 2rem;
  height: 2rem;
  pointer-events: none;
  transform: translate3d(3.8rem, -1rem, 0) rotateZ(360deg) scale(0.5);
  filter: drop-shadow(0px 0px 8px #fff) drop-shadow(0px 3px 7px #000);
  opacity: 0;
  transition:
    0.3s transform,
    0.3s opacity;
}
.zenith_card_crystal.zenith_card_crystal_supporter {
  filter: drop-shadow(0px 0px 8px #ff7300) drop-shadow(0px 3px 7px #000);
}
.zenith_card.active .zenith_card_crystal:not(.zenith_card_crystal_supporter),
.zenith_card:active .zenith_card_crystal,
.zenith_card:hover .zenith_card_crystal,
.zenith_card[rg-hover] .zenith_card_crystal {
  opacity: 1;
}
.zenith_card:active .zenith_card_crystal,
.zenith_card:hover .zenith_card_crystal,
.zenith_card[rg-hover] .zenith_card_crystal {
  transform: translate3d(0, 0, 6px);
}
.zenith_card.holding .zenith_card_crystal {
  animation: 0.4s 0.1s ZenithCardCrystalWindup cubic-bezier(0.78, 0, 0.82, 0.32);
}
.zenith_card.holding .zenith_card_crystal.zenith_card_crystal_supporter {
  animation: 0.4s 0.1s ZenithCardCrystalWindupSupporter
    cubic-bezier(0.78, 0, 0.82, 0.32);
}
@keyframes ZenithCardCrystalWindup {
  from {
    transform: translate3d(0, 0, 6px) rotateZ(0) scale(1);
    filter: drop-shadow(0px 0px 8px #fff) drop-shadow(0px 3px 7px #000);
  }
  to {
    transform: translate3d(0, 0, 20px) rotateZ(1800deg) scale(2);
    filter: drop-shadow(0px 0px 8px #fff) drop-shadow(0px 3px 7px #000) sepia(1)
      saturate(50);
  }
}
@keyframes ZenithCardCrystalWindupSupporter {
  from {
    transform: translate3d(0, 0, 6px) rotateZ(0) scale(1);
    filter: drop-shadow(0px 0px 8px #ff7300) drop-shadow(0px 3px 7px #000);
  }
  to {
    transform: translate3d(0, 0, 20px) rotateZ(1800deg) scale(2);
    filter: drop-shadow(0px 0px 8px #ff7300) drop-shadow(0px 3px 7px #000)
      hue-rotate(-50deg) saturate(50);
  }
}
.zenith_card_crystal_dark {
  position: absolute;
  left: calc(50% + 3.3rem);
  top: -0.3rem;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    0.3s transform,
    0.3s opacity;
  filter: drop-shadow(0px 0px 4px #532314);
}
.zenith_card.active .zenith_card_crystal_dark,
.zenith_card:active .zenith_card_crystal_dark,
.zenith_card:hover .zenith_card_crystal_dark,
.zenith_card[rg-hover] .zenith_card_crystal_dark {
  opacity: 0;
}
.zenith_card:active .zenith_card_crystal_dark,
.zenith_card:hover .zenith_card_crystal_dark,
.zenith_card[rg-hover] .zenith_card_crystal_dark {
  transform: translate3d(-3.7rem, 1rem, 6px) rotateZ(-360deg) scale(2);
}
.zenith_card.reversed .zenith_card_crystal,
.zenith_card.reversed .zenith_card_crystal_dark,
.zenith_card.reversehide .zenith_card_crystal,
.zenith_card.reversehide .zenith_card_crystal_dark,
.zenith_card_crystal.hidden,
.zenith_card_crystal_dark.hidden {
  display: none;
}
#zenith_card_shatter {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  opacity: 0;
  transition: 0.3s opacity;
}
#zenith_card_shatter img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#zenithmenu.reversed #zenith_card_shatter {
  opacity: 1;
}
#zenith_card_shatter_glass_a,
#zenith_card_shatter_glass_b {
  opacity: 0.6;
}
#zenith_card_shatter_throb_a,
#zenith_card_shatter_throb_b {
  opacity: 0;
}
#zenithmenu.reversed #zenith_card_shatter_glass_a {
  animation: 1s 0.5s ZenithCardShatterGlass ease-out backwards;
}
#zenithmenu.reversed #zenith_card_shatter_glass_b {
  animation: 1s 0.58s ZenithCardShatterGlass ease-out backwards;
}
@keyframes ZenithCardShatterGlass {
  0% {
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}
#zenithmenu.reversed #zenith_card_shatter_throb_a {
  opacity: var(--throb-a);
}
#zenithmenu.reversed #zenith_card_shatter_throb_b {
  opacity: var(--throb-b);
}
#zenith_deck_block {
  z-index: 1;
}
#zenithmenu.reversed #zenith_deck_block {
  animation:
    0.2s 0.5s ZenithDeckBlockImpact ease-out,
    0.2s 0.5s ZenithDeckBlockGlow forwards;
}
@keyframes ZenithDeckBlockImpact {
  0% {
    transform: translate(0, 0) scale(1);
  }
  10% {
    transform: translate(0, 5px) scale(0.96);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}
@keyframes ZenithDeckBlockGlow {
  from {
    background-color: #532314;
    border-top: 3px solid #b83a1b;
    border-left: 3px solid #8d2e1b;
    border-bottom: 3px solid #2f0a0a;
    border-right: 3px solid #37160d;
  }
  to {
    background-color: #28071b;
    border-top: 3px solid #4d0016;
    border-left: 3px solid #460014;
    border-bottom: 3px solid #4e0016;
    border-right: 3px solid #420012;
  }
}
#zenith_deck_reset {
  display: inline-block;
  background-color: #5a2616;
  border: 1px solid #713127;
  border-radius: 3px;
  color: #b26040;
  width: 3.3em;
  font-size: 1.2em;
  margin: -0.5em;
  position: absolute;
  right: 18px;
  bottom: 18px;
  text-align: center;
  padding-top: 0.35em;
  padding-bottom: 0.05em;
  filter: brightness(1);
  cursor: pointer;
  transition:
    0.3s filter,
    0.3s opacity;
}
#zenithmenu.reversed #zenith_deck_reset {
  opacity: 0;
  pointer-events: none;
}
#zenith_deck_reset:hover {
  filter: brightness(1.2);
}
#zenith_deck_reversename {
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2.6rem;
  font-weight: 900;
  font-size: 3.5rem;
  color: #fff;
  text-shadow:
    0 3px #ff0059,
    0 6px #ff0059,
    0 6px 8px #ff0059,
    0 6px 16px #ff0059;
  text-align: center;
}
#zenith_deck_reversename .zsrnc {
  display: inline-block;
  margin: 0 0.3rem;
  animation:
    1s calc(0.5s + 0.02s * var(--i)) ZenithReversenameLetterAppear ease-out
      backwards,
    1.5s calc(-0.4s * var(--i)) ZenithReversenameLetterWobble ease-in-out
      alternate infinite;
}
#zenith_deck_reversename .zsrnc > span {
  display: inline-block;
  animation: var(--sa) var(--sb) ZenithReversenameLetterWobbleRotate ease-in-out
    alternate infinite;
}
@keyframes ZenithReversenameLetterAppear {
  0% {
    opacity: 0;
    color: #ff0059;
  }
  10% {
    opacity: 1;
    color: #ff0059;
  }
  100% {
    opacity: 1;
    color: #fff;
  }
}
@keyframes ZenithReversenameLetterWobble {
  from {
    transform: translate(-3px, -4.5px);
  }
  to {
    transform: translate(3px, 4.5px);
  }
}
@keyframes ZenithReversenameLetterWobbleRotate {
  from {
    transform: rotate(-4deg);
  }
  to {
    transform: rotate(4deg);
  }
}
#zenith_deck_reversename .zsrnsp {
  display: inline-block;
  width: 2rem;
}
#zenith_deck_reversesubtext {
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.7rem;
  font-size: 1.4rem;
  color: #ff0059;
  text-shadow: 0 0 4px #ff0059;
  text-align: center;
  animation: 3s 0.6s ZenithReversesubtextAppear ease-out backwards;
}
@keyframes ZenithReversesubtextAppear {
  0% {
    opacity: 0;
    color: #fff;
  }
  10% {
    opacity: 1;
    color: #fff;
  }
  100% {
    opacity: 1;
    color: #ff0059;
  }
}
#zenithmenu:not(.reversed) #zenith_deck_reversename,
#zenithmenu:not(.reversed) #zenith_deck_reversesubtext {
  display: none;
}
#zenithmenu.reversed #start_zenith_label {
  transform: scaleY(-1);
  color: #ff6c6c !important;
  text-shadow: 0 0 16px #ff005966;
}
.zenith_party_member {
  display: inline-block;
  width: calc(50% - 0.7rem);
  box-sizing: border-box;
  position: relative;
  height: 5rem;
  cursor: pointer;
}
.zenith_party_member:first-child {
  margin-right: 1rem;
}
.zenith_party_member:first-child::after {
  content: "";
  position: absolute;
  top: 0;
  right: -0.8rem;
  bottom: 0;
  width: 3px;
  background-color: #b83a1b;
}
.zenith_party_member_avatar {
  position: absolute;
  top: 0;
  left: 0;
  width: 5rem;
  height: 5rem;
}
.zenith_party_member.empty .zenith_party_member_avatar {
  display: none;
}
.zenith_party_member.new .zenith_party_member_avatar {
  animation:
    0.3s ZenithPartyMemberAvatarAppear cubic-bezier(0.25, -0.44, 1, 0.77),
    0.2s 0.3s ZenithPartyMemberAvatarAppear2 cubic-bezier(0.44, 1.5, 0.62, 1);
}
@keyframes ZenithPartyMemberAvatarAppear {
  from {
    transform: translateY(-4rem);
    opacity: 0;
  }
  to {
    transform: translateY(0.5rem);
    opacity: 1;
  }
}
@keyframes ZenithPartyMemberAvatarAppear2 {
  from {
    transform: translateY(0.5rem);
  }
  to {
    transform: translateY(0);
  }
}
.zenith_party_member_avatar_stub {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  width: 4.5rem;
  height: 4.5rem;
  box-sizing: border-box;
  border: 3px dotted #b26040;
  border-radius: 6px;
  transition: 0.2s border-color;
}
.zenith_party_member:not(.empty) .zenith_party_member_avatar_stub {
  display: none;
}
.zenith_party_member.empty:hover .zenith_party_member_avatar_stub {
  border-color: #ff9c6b;
}
.zenith_party_member_username {
  font-weight: 900;
  font-size: 2.2rem;
  color: #ff9c6b;
  position: absolute;
  top: 0.8rem;
  left: 5.5rem;
  right: 0;
  transition: 0.2s color;
}
.zenith_party_member_username.ln {
  font-size: 1.7rem;
  top: 0.9rem;
}
.zenith_party_member.empty .zenith_party_member_username {
  color: #b26040;
  font-weight: 500;
  font-size: 2rem;
  top: 1rem;
}
.zenith_party_member:hover .zenith_party_member_username {
  color: #fff;
}
.zenith_party_member.empty:hover .zenith_party_member_username {
  color: #ff9c6b;
}
.zenith_party_member.new .zenith_party_member_username {
  animation: 0.2s 0.3s ZenithPartyMemberUsernameAppear
    cubic-bezier(0.21, 0.46, 0.62, 1) backwards;
}
@keyframes ZenithPartyMemberUsernameAppear {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  30% {
    transform: translateY(0.5rem);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.zenith_party_member_tags {
  isolation: isolate;
  font-size: 1.1rem;
  position: absolute;
  top: 3rem;
  left: 5.5rem;
}
.zenith_party_member_username.ln ~ .zenith_party_member_tags {
  top: 2.7rem;
}
.zenith_party_member.empty .zenith_party_member_tags {
  display: none;
}
.zenith_party_member.ready .zenith_party_member_tags {
  display: none;
}
.zenith_party_member.new .zenith_party_member_tags {
  animation: 0.2s 0.35s ZenithPartyMemberTagsAppear
    cubic-bezier(0.21, 0.46, 0.62, 1) backwards;
}
@keyframes ZenithPartyMemberTagsAppear {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  30% {
    transform: translateY(0.5rem);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
#zenith_party_other_level,
#zenith_party_self_level {
  margin-right: 1em;
}
#zenith_party_other_mods,
#zenith_party_self_mods {
  font-size: 0.7rem;
}
.zenith_party_member_badge {
  height: 1.9em;
  vertical-align: -42%;
  margin-top: -2em;
}
.zenith_party_member_badge.hidden {
  display: none;
}
.zenith_party_member_invite {
  font-size: 1.1rem;
  position: absolute;
  top: 3rem;
  left: 5.5rem;
  color: #b26040;
  transition: 0.2s color;
}
.zenith_party_member_username.ln ~ .zenith_party_member_invite {
  top: 2.7rem;
}
.zenith_party_member:not(.empty) .zenith_party_member_invite {
  display: none;
}
.zenith_party_member.empty:hover .zenith_party_member_invite {
  color: #ff9c6b;
}
.zenith_party_member_ready {
  font-size: 1.9rem;
  position: absolute;
  top: 3rem;
  left: 5.5rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 4px #ff9c6b;
  animation: 1s EMMbob infinite alternate ease-in-out;
}
.zenith_party_member_username.ln ~ .zenith_party_member_ready {
  top: 2.7rem;
}
.zenith_party_member:not(.ready) .zenith_party_member_ready {
  display: none;
}
#zenith_party_ready {
  text-align: center;
  padding-top: 1em;
  padding-bottom: 0.5em;
  background-color: #532314;
  border-left: 3px solid #8d2e1b;
  border-bottom: 3px solid #2f0a0a;
  border-right: 3px solid #37160d;
  box-shadow: 0 8px #210707;
  transform: translateY(0);
  cursor: pointer;
  transition:
    0.3s transform,
    0.3s filter,
    0.3s box-shadow;
  margin: calc(-1rem - 3px);
  margin-top: 1rem;
  animation: 0.3s ZenithPartyReadySlide cubic-bezier(0.17, 0.65, 0.45, 0.99);
}
@keyframes ZenithPartyReadySlide {
  from {
    margin-top: -3.7rem;
  }
  to {
    margin-top: 1rem;
  }
}
#zenith_party_ready::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  right: 0;
  height: 3px;
  background: #8d2e1b;
}
#zenith_party_ready:hover {
  box-shadow: 0 6px #210707;
  transform: translateY(2px);
  filter: brightness(1.2);
}
#zenith_party_ready:active {
  box-shadow: 0 2px #210707;
  transform: translateY(6px);
  filter: brightness(4);
  transition:
    50ms transform,
    50ms filter,
    50ms box-shadow;
}
#zenith_party_ready.ready {
  background-color: #420e0d;
  box-shadow: 0 4px #210707;
  transform: translateY(4px);
}
#zenith_party_ready.ready:hover {
  box-shadow: 0 2px #210707;
  transform: translateY(6px);
}
#zenith_party_ready.ready:active {
  box-shadow: 0 0 #210707;
  transform: translateY(8px);
}
#zenith_party_ready.otherready h1 {
  animation: 2s ZenithOtherReadyBob infinite linear;
}
@keyframes ZenithOtherReadyBob {
  0% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(0);
  }
  80% {
    transform: translateY(-6px);
  }
  85% {
    transform: translateY(0);
  }
  90% {
    transform: translateY(0);
  }
  95% {
    transform: translateY(-6px);
  }
  100% {
    transform: translateY(0);
  }
}
#zenith_party_ready h1 {
  color: #ff9c6b !important;
  font-size: 2.5vw;
  margin: 0;
  transition: 0.3s transform;
}
#zenith_party_ready p {
  color: #b26040 !important;
  font-size: 1vw;
  margin: 0;
  transition: 0.3s transform;
}
#zenith_party_ready.ready h1 {
  color: #ffb265 !important;
  animation: 1s EMMbob infinite alternate ease-in-out;
}
#zenith_party_ready.ready p {
  color: #b25930 !important;
  animation: 1s EMMbob infinite alternate ease-in-out;
}
body:not(.supporter) #zenith_party_self_supporter {
  display: none;
}
#zenithmenu:not(.duo) #zenith_party {
  display: none;
}
#zenithmenu.duo #start_zenith {
  display: none;
}
#zenith_contribution {
  background: linear-gradient(
    to right,
    #a94b2f 0,
    #a94b2f var(--p),
    #0002 var(--p),
    #0002 100%
  );
  border-radius: 6px;
  margin-left: 6rem;
  margin-right: 6rem;
  height: 5rem;
  position: relative;
}
#zenith_contribution.hidden {
  display: none;
}
#zenith_contribution .avatar {
  position: absolute;
  width: 5rem;
  height: 5rem;
  top: 0;
}
#zenith_contribution_self_avatar {
  left: -6rem;
}
#zenith_contribution_ally_avatar {
  right: -6rem;
}
.zenith_contribution_data {
  position: absolute;
  top: 0.5rem;
}
#zenith_contribution_self {
  left: 1rem;
}
#zenith_contribution_ally {
  right: 1rem;
  text-align: right;
}
.zenith_contribution_data h1 {
  color: #ffd2bd;
  text-shadow:
    0 0.03em #ff9c6b,
    0 0 16px #fff4;
  font-weight: 900;
  font-size: 2.8rem;
  margin: 0;
}
.zenith_contribution_data p {
  color: #ff9c6b;
  font-size: 1.2rem;
  margin: 0;
}
.zenith_contribution_data h1 span {
  font-size: 2rem;
}
body[desktop-version="v8"] #zenithmenu {
  top: 4.3rem;
  left: max(4em, 50vw - 25em);
  right: max(4em, 50vw - 25em);
  padding: 9.5em 0;
  padding-top: calc(20vh - 4.3rem);
  z-index: 10001;
  pointer-events: all;
}
body.inzenith:not(.ingame_phys):not(.spectating):not(
    .multiplextransitionlock
  ):not(.chatfocus)
  #ingame_chat_container {
  z-index: 1;
}
#zenithmenu.resultslike .replayid {
  color: #ff9c6b;
}
#zenithmenu.resultslike .watchreplay {
  width: 8em;
  top: 3px;
  margin-left: -1.5rem;
  background-color: #642a18;
  border: 1px solid #b83a1b;
  color: #ff9c6b;
}
#zenithmenu.resultslike .downloadreplay,
#zenithmenu.resultslike .tweetreplay {
  width: 1.5em;
}
#zenithmenu.resultslike.fakereplay .tweetreplay {
  display: inline-block;
}
#zenithmenu.resultslike.fakereplay .downloadreplay {
  display: none;
}
#zenithmenu.resultslike #chatreplay_zenith.sent {
  color: #0000;
  background-color: #0000;
  border: 1px dotted #b83a1b;
  position: relative;
}
#chatreplay_zenith.sent::after {
  content: "SENT!";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  color: #ff9c6b;
  font-weight: 900;
  font-size: 1.5rem;
  margin-top: 0.1em;
  animation: 0.2s ZenithChatSentJump ease-out;
}
@keyframes ZenithChatSentJump {
  0% {
    transform: translate(-50%, -50%);
  }
  50% {
    transform: translate(-50%, -80%);
  }
  100% {
    transform: translate(-50%, -50%);
  }
}
.zenithtimer {
  text-align: center;
  font-size: 0.9rem;
  margin-top: 0.6rem;
  margin-bottom: -0.6rem;
  color: #b26040;
}
.zenithtimer b {
  color: #ff9c6b;
}
.zenithtimer.hidden {
  display: none;
}
#zenithmenu.reversed #zenith_party_ready {
  background-color: #2a070e;
  border-left: 3px solid #5c0d0d;
  border-bottom: 3px solid #120303;
  border-right: 3px solid #200606;
}
#zenithmenu.reversed #zenith_party_ready::before {
  background-color: #8f0d19;
}
#zenithmenu.reversed #zenith_party_ready.ready {
  background-color: #1d0009;
}
#zenithmenu.reversed #zenith_party_ready.ready h1 {
  color: #ffbdd4 !important;
  text-shadow: 0 0 16px #ff0059aa;
}
#zenithmenu.reversed .zenith_party_member:first-child::after {
  background-color: #8f0d19;
}
#zenithmenu.reversed #zenith_party_ready_label {
  transform: scaleY(-1) translateY(0.6rem);
  color: #ff6c6c !important;
  text-shadow: 0 0 16px #ff005966;
}
#zenithmenu.reversed #zenith_party_ready.otherready h1 {
  animation: 2s ZenithOtherReadyBobRev infinite linear;
}
@keyframes ZenithOtherReadyBobRev {
  0% {
    transform: scaleY(-1) translateY(0.7rem);
  }
  75% {
    transform: scaleY(-1) translateY(0.7rem);
  }
  80% {
    transform: scaleY(-1) translateY(1rem);
  }
  85% {
    transform: scaleY(-1) translateY(0.7rem);
  }
  90% {
    transform: scaleY(-1) translateY(0.7rem);
  }
  95% {
    transform: scaleY(-1) translateY(1rem);
  }
  100% {
    transform: scaleY(-1) translateY(0.7rem);
  }
}
#zenithmenu.reversed #zenith_party_ready_mods {
  transform: scaleY(-1) translateY(0.2rem);
  color: #ff6c6c !important;
  text-shadow: 0 0 8px #ff005966;
}
.control_group {
  padding: 1em;
  background-color: #0004;
  border-radius: 3px;
  margin-bottom: 1em;
}
.control_group.hidden {
  display: none;
}
.control_group > h1 {
  flex-shrink: 0;
  width: 100%;
  color: #7b89ad;
  font-size: 1.2em;
  margin: 0;
  margin-bottom: 0.15em;
}
.control_group > p {
  flex-shrink: 0;
  width: 100%;
  color: #6376a5;
  font-size: 1em;
  font-family: "C";
  margin: 0;
  margin-top: -0.15em;
  margin-bottom: 0.25em;
}
.control_group > h1.bgmtweak_header {
  color: #7b89ad;
  cursor: pointer;
  transition: 0.3s color;
}
.control_group > h1.bgmtweak_header:hover {
  color: #b4c2e5;
}
.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;
}
#menus[data-menu-type="40l"] .control_button {
  background-color: #45362a;
  border-top: 3px solid #644c3a;
  border-left: 3px solid #554234;
  border-bottom: 3px solid #231b15;
  border-right: 3px solid #30241b;
  color: #d6ad8f;
}
#menus[data-menu-type="40l"] .control_button.pressed {
  background-color: #1a1410;
  border-top: 3px solid #0e0b09;
  border-left: 3px solid #15100d;
  border-bottom: 3px solid #3c2d21;
  border-right: 3px solid #2e231b;
  color: #f4c19b;
}
#menus[data-menu-type="blitz"] .control_button {
  background-color: #4c3131;
  border-top: 3px solid #6c4545;
  border-left: 3px solid #5c3e3e;
  border-bottom: 3px solid #302121;
  border-right: 3px solid #3d2929;
  color: #dcabab;
}
#menus[data-menu-type="blitz"] .control_button.pressed {
  background-color: #151212;
  border-top: 3px solid #0c0a0a;
  border-left: 3px solid #100d0d;
  border-bottom: 3px solid #3b2c2c;
  border-right: 3px solid #2b2121;
  color: #f6d7d7;
}
#menus[data-menu-type="zen"] .control_button {
  background-color: #4c314c;
  border-top: 3px solid #6b456c;
  border-left: 3px solid #5a3e5c;
  border-bottom: 3px solid #302130;
  border-right: 3px solid #3c293d;
  color: #dcabda;
}
#menus[data-menu-type="custom"] .control_button {
  background-color: #2a223b;
  border-top: 3px solid #40335c;
  border-left: 3px solid #382d4b;
  border-bottom: 3px solid #1f1b28;
  border-right: 3px solid #211e2d;
  color: #937fdf;
}
#menus[data-menu-type="custom"] .control_button.pressed {
  background-color: #14111b;
  border-top: 3px solid #0d0b10;
  border-left: 3px solid #100e15;
  border-bottom: 3px solid #2b253d;
  border-right: 3px solid #211d2f;
  color: #c0aeee;
}
#menus[data-menu-type^="tetra"] .control_button {
  background-color: #314c34;
  border-top: 3px solid #456c49;
  border-left: 3px solid #3e5c43;
  border-bottom: 3px solid #213024;
  border-right: 3px solid #293d29;
  color: #abdcb2;
}
#menus[data-menu-type^="tetra"] .control_button.pressed {
  background-color: #181d18;
  border-top: 3px solid #0a0c0a;
  border-left: 3px solid #0d100d;
  border-bottom: 3px solid #2c3b2e;
  border-right: 3px solid #212b23;
  color: #d7f6dd;
}
#menus[data-menu-type="lobby"] .control_button {
  background-color: #271752;
  border-top: 3px solid #462897;
  border-left: 3px solid #382177;
  border-bottom: 3px solid #150d2a;
  border-right: 3px solid #1e123f;
  color: #725ab3;
}
#menus[data-menu-type="victory"] .control_button {
  background-color: #342138;
  border-top: 3px solid #883b99;
  border-left: 3px solid #6d3e77;
  border-bottom: 3px solid #221427;
  border-right: 3px solid #311c3b;
  color: #da9bf4;
}
#menus[data-menu-type="league"] .control_button {
  background-color: #582525;
  border-top: 3px solid #913f3f;
  border-left: 3px solid #743535;
  border-bottom: 3px solid #3c1c1c;
  border-right: 3px solid #4a2121;
  color: #c88181;
}
#menus[data-menu-type="multilisting"] .control_button {
  background-color: #271e24;
  border-top: 3px solid #452f3d;
  border-left: 3px solid #392933;
  border-bottom: 3px solid #181416;
  border-right: 3px solid #1e181c;
  color: #eaaad2;
}
.control_button.danger {
  background-color: transparent;
  border-top: 3px solid #c5494966;
  border-left: 3px solid #9c434366;
  border-bottom: 3px solid #51222266;
  border-right: 3px solid #702c2c66;
  color: #d93f3f;
  font-size: 1.25em;
  filter: brightness(1) grayscale(1);
}
.control_button.danger:hover {
  filter: brightness(1.2) grayscale(0);
}
.button_tr {
  position: absolute;
  right: 0.75em;
  top: 0.6em;
}
.button_tr_h {
  position: absolute;
  right: 1.125em;
  top: 0.9em;
}
.button_tr_i {
  display: inline-block;
  margin-left: 0.5em;
}
.button_tr_i.hidden {
  display: none;
}
.scroller_block.zero .button_tr_h {
  top: 0;
  right: 0;
}
.scroller_block.zero .button_tr_i {
  box-shadow: 0 0 8px #000;
}
.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;
}
#menus[data-menu-type="40l"] .keypairs td {
  color: #ab7a56;
}
#menus[data-menu-type="40l"] .keypairs td:nth-child(2) {
  color: #f1ad7a;
}
#menus[data-menu-type="blitz"] .keypairs td {
  color: #a97c7c;
}
#menus[data-menu-type="blitz"] .keypairs td:nth-child(2) {
  color: #f1c9c9;
}
#menus[data-menu-type="custom"] .keypairs td {
  color: #7a62a7;
}
#menus[data-menu-type="custom"] .keypairs td:nth-child(2) {
  color: #c3a7ec;
}
#menus[data-menu-type^="tetra"] .keypairs td {
  color: #7ca97f;
}
#menus[data-menu-type^="tetra"] .keypairs td:nth-child(2) {
  color: #c9f1cf;
}
#menus[data-menu-type="lobby"] .keypairs td,
#menus[data-menu-type="victory"] .keypairs td {
  color: #9456ab;
}
#menus[data-menu-type="lobby"] .keypairs td:nth-child(2),
#menus[data-menu-type="victory"] .keypairs td:nth-child(2) {
  color: #d97af1;
}
.keypairs td:nth-child(2) img {
  height: 1em;
  vertical-align: -12%;
}
.keypairs td:nth-child(2) span {
  font-weight: 900;
}
#forfeit,
#retry {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5em;
  background: linear-gradient(to bottom, #c14538 0, #9a1a0d 100%);
  border-top: 2px solid #ff1800;
  box-shadow: 0 0 8px #400;
  text-align: center;
  line-height: 1.7em;
  color: #ffbbb4;
  z-index: 1111112;
  pointer-events: none;
  font-family: HUN;
  font-size: 2vw;
  font-weight: 900;
  transition:
    0.1s bottom ease-out,
    0.1s opacity ease-out;
}
#forfeit.hidden,
#retry.hidden {
  opacity: 0;
  bottom: -4vw;
  transition:
    1s bottom ease-in,
    1s opacity ease-in;
}
#retry {
  background: linear-gradient(to bottom, #ff9854 0, #e25a00 100%);
  border-top: 2px solid #c3550b;
  color: #ffebde;
}
.watch_header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 3em;
  background: #000a;
  box-shadow: 0 0 8px #000;
  color: #fff;
  font-family: HUN;
  z-index: 9999997;
  transition:
    0.3s top ease-out,
    0.3s opacity ease-out;
}
.watch_header.hidden {
  opacity: 0;
  top: -4em;
  pointer-events: none;
  transition:
    0.3s top ease-in,
    0.3s opacity ease-in;
}
.watch_header .keystone {
  position: absolute;
  left: -0.25em;
  top: 0;
  color: #000;
  background-color: #ff7800;
  font-size: 2.5em;
  padding-top: 0.15em;
  padding-left: 0.25em;
  font-weight: 900;
  width: 5em;
  text-align: center;
  transform: skewX(-10deg);
}
.watch_header .data {
  position: absolute;
  left: 9em;
  top: 0.5em;
  color: #fff;
  font-size: 1.5em;
}
.watch_header .data > span {
  color: #ff7800;
  font-weight: 900;
}
.watch_header .exit {
  position: absolute;
  right: 0.25em;
  top: 0.25em;
  border: 1px solid #444;
  background-color: #000c;
  text-align: center;
  padding-top: 0.15em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  color: #fff;
  font-size: 1.5em;
  border-radius: 3px;
  cursor: pointer;
  transition: 0.3s background-color;
}
.watch_header .exit:hover {
  background-color: #222;
}
.watch_header .follow,
.watch_header .ingameenter {
  display: none;
}
.watch_header .zen {
  position: absolute;
  right: 13em;
  top: 0.25em;
  border: 1px solid #444;
  background-color: #000c;
  text-align: center;
  padding-top: 0.15em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  color: #fff;
  font-size: 1.5em;
  border-radius: 3px;
  cursor: pointer;
  transition: 0.3s background-color;
}
.watch_header .zen:hover {
  background-color: #222;
}
.watch_header .exit.blocked,
.watch_header .zen.blocked {
  pointer-events: none;
  opacity: 0.7;
  background: linear-gradient(
    to bottom right,
    #000c 0,
    #000c 45%,
    #444 45%,
    #444 55%,
    #000c 55%,
    #000c 100%
  );
  color: #444;
}
.watch_header .speedup {
  position: absolute;
  right: 6em;
  width: 1em;
  text-align: center;
  top: 0.25em;
  border: 1px solid #444;
  background-color: #000c;
  text-align: center;
  padding-top: 0.15em;
  color: #fff;
  font-size: 1.5em;
  border-radius: 3px;
  cursor: pointer;
  transition: 0.3s background-color;
}
.watch_header .speedup:hover {
  background-color: #222;
}
.watch_header .pause {
  position: absolute;
  right: 7.25em;
  width: 2.5em;
  text-align: center;
  top: 0.25em;
  border: 1px solid #444;
  background-color: #000c;
  text-align: center;
  padding-top: 0.15em;
  color: #fff;
  font-size: 1.5em;
  border-radius: 3px;
  cursor: pointer;
  transition: 0.3s background-color;
}
.watch_header .pause:hover {
  background-color: #222;
}
.watch_header .speeddown {
  position: absolute;
  right: 10em;
  width: 1em;
  text-align: center;
  top: 0.25em;
  border: 1px solid #444;
  background-color: #000c;
  text-align: center;
  padding-top: 0.15em;
  color: #fff;
  font-size: 1.5em;
  border-radius: 3px;
  cursor: pointer;
  transition: 0.3s background-color;
}
.watch_header .speeddown:hover {
  background-color: #222;
}
#replaytools {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000a;
  box-shadow: 0 0 8px #000;
  color: #fff;
  font-family: HUN;
  z-index: 9000000;
  transition:
    1s background-color ease-out,
    1s box-shadow ease-out,
    1s bottom ease-out,
    1s opacity ease-out;
}
#replaytools.multi {
  padding-top: 28px;
}
.idlemouse:not(.replaytoolsnocollapse) #replaytools:not(:hover) {
  bottom: -3em;
  background: #0004;
  box-shadow: 0 0 8px #0008;
  opacity: 0.5;
  transition:
    1s background-color ease-in-out,
    1s box-shadow ease-in-out,
    1s bottom ease-in-out,
    1s opacity ease-in-out;
}
.idlemouse:not(.replaytoolsnocollapse) #replaytools.multi:not(:hover) {
  bottom: calc(-3em - 28px);
}
.idlemouse:not(.replaytoolsnocollapse)
  #replaytools:not(:hover)
  #replaytools_graph,
.idlemouse:not(.replaytoolsnocollapse)
  #replaytools:not(:hover)
  #replaytools_timestamp {
  opacity: 0;
}
#replaytools.hidden {
  opacity: 0 !important;
  bottom: -4em !important;
  pointer-events: none !important;
  transition:
    1s background-color ease-in,
    1s box-shadow ease-in,
    1s bottom ease-in,
    1s opacity ease-in !important;
}
#replaytools_seekbar {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 0;
}
#replaytools_main {
  text-align: center;
  margin-top: 10px;
}
#replaytools_main div {
  font-size: 2.5em;
  color: #fffa;
  display: inline-block;
  padding: 0 0.1em;
  padding-top: 0.25em;
  cursor: pointer;
  background-color: #fff0;
  border-radius: 3px;
  transition:
    0.3s color,
    0.3s background-color;
}
#replaytools_main div:hover {
  color: #fff;
  background-color: #fff1;
}
#replaytools_main div:active {
  color: #fff;
  background-color: #fff3;
  transition:
    50ms color,
    50ms background-color;
}
#replaytools_secondary {
  text-align: center;
  margin-top: -2.2em;
  margin-left: 32px;
  margin-right: 32px;
  margin-bottom: 2.5em;
  position: relative;
}
#replaytools_graph {
  position: absolute;
  left: 16px;
  right: 16px;
  top: -92px;
  height: 92px;
  background-color: #ff780022;
  pointer-events: none;
  transition: 1s opacity ease-in-out;
}
#replaytools.multi #replaytools_graph {
  top: -44px;
  background: linear-gradient(
    to bottom,
    #266dcd44 0,
    #266dcd22 calc(50% - 6px),
    #266dcd88 calc(50% - 2px),
    #0000 calc(50% - 2px),
    #0000 calc(50% + 2px),
    #cd262688 calc(50% + 2px),
    #cd262622 calc(50% + 6px),
    #cd262644 100%
  );
}
#replaytools_markers {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 0;
  height: 0;
  pointer-events: none;
}
.replaytools_marker_finesse {
  background-color: #ff780088;
  width: 8px;
  height: 4px;
  position: absolute;
  left: 0;
  top: -6px;
  transform: translateX(-50%);
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
}
.replaytools_marker_choke {
  background: linear-gradient(to right, #ff2b0022 0, #ff2b00 100%);
  width: 4px;
  min-width: 4px;
  height: 4px;
  position: absolute;
  left: 0;
  top: -6px;
  transform: translateX(-2px);
  clip-path: polygon(
    0% 50%,
    2px 0%,
    calc(100% - 2px) 0%,
    100% 50%,
    calc(100% - 2px) 100%,
    2px 100%
  );
}
.replaytools_marker_chapter {
  color: #ff7800;
  font-size: 0.8em;
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0;
  padding-left: 3px;
  padding-top: 7px;
}
.replaytools_marker_chapter::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 17px;
  background-color: #ff7800;
}
.replaytools_marker_chapter::after {
  content: "";
  position: absolute;
  top: 0;
  left: 2px;
  width: 1px;
  height: 4px;
  background-color: #241100;
}
#replaytools_timestamp {
  position: absolute;
  left: 0;
  right: 0;
  top: -1.2em;
  font-size: 1.8em;
  color: #ff7800;
  font-weight: 900;
  pointer-events: none;
  text-align: center;
  transition: 1s opacity ease-in-out;
}
#replaytools_timestamp span {
  font-size: 0.6em;
  color: #ff780088;
  font-weight: 500;
  margin-left: 0.5em;
}
#replaytools_secondary .replaytools_secondary_button {
  font-size: 1.5em;
  color: #fff8;
  display: inline-block;
  padding: 0 0.1em;
  padding-top: 0.25em;
  cursor: pointer;
  background-color: #fff0;
  border-radius: 3px;
  transition:
    0.3s color,
    0.3s background-color;
}
#replaytools_secondary .replaytools_secondary_button:hover {
  color: #fff;
  background-color: #fff1;
}
#replaytools_secondary .replaytools_secondary_button:active {
  color: #fff;
  background-color: #fff3;
  transition:
    50ms color,
    50ms background-color;
}
#replaytools_secondary .replaytools_secondary_button.active {
  color: #ff7800;
}
#replaytools_secondary .replaytools_secondary_button.active:hover {
  color: #fd8;
}
#replaytools_secondary .replaytools_secondary_button.active:active {
  color: #fff;
}
#replaytools_secondary .replaytools_secondary_left {
  float: left;
  position: relative;
  top: -0.2em;
}
#replaytools_secondary .replaytools_secondary_right {
  float: right;
  font-size: 0.9em;
  padding-left: 0.2em;
  padding-right: 0.2em;
}
#replaytools.disabled .disableable {
  pointer-events: none !important;
}
#replaytools.disabled #replaytools_main .disableable {
  opacity: 0.5;
}
#replaytools:not(.multiround) .multiroundonly {
  display: none !important;
}
#replaytools .disabled {
  pointer-events: none !important;
  opacity: 0.5;
}
.seekbar {
  --progress: 50%;
  position: relative;
  height: 4px;
  background-color: #ff780044;
  cursor: pointer;
}
.seekbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -92px;
  height: 102px;
  cursor: pointer;
}
#replaytools.multi .seekbar::after {
  top: -46px;
  height: 82px;
}
.seekbar .seekbar_progress {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  width: var(--progress);
  background-color: #ff7800;
}
.seekbar .seekbar_knob {
  position: absolute;
  left: var(--progress);
  top: -4px;
  transform: translateX(-50%);
  height: 12px;
  width: 12px;
  background-color: #ff7800;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  pointer-events: none;
}
.seekbar .seekbar_shield {
  position: absolute;
  left: 0;
  right: 0;
  top: -6px;
  height: 16px;
  z-index: 2;
}
.seekbar:active .seekbar_shield {
  top: -100vh;
  height: 120vh;
}
.seekbar .seekbar_tip {
  position: absolute;
  left: var(--progress);
  bottom: 21px;
  transform: translateX(-50%);
  background-color: #000c;
  border-radius: 3px;
  color: #fff;
  text-align: center;
  padding: 0.5em;
  padding-bottom: 0.25em;
  pointer-events: none;
  z-index: 1;
  box-shadow: 0 2px 4px #0006;
  min-width: 7.5em;
  transition:
    0.3s opacity,
    0.3s bottom;
}
.seekbar .seekbar_shield:not(:hover) ~ .seekbar_tip {
  opacity: 0;
  bottom: 25px;
}
.seekbar .seekbar_tip::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  width: 12px;
  height: 6px;
  background-color: #000c;
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}
.seekbar[data-border-snapped="left"] .seekbar_tip {
  transform: translateX(-9px);
}
.seekbar[data-border-snapped="left"] .seekbar_tip::after {
  transform: none;
  left: 3px;
}
.seekbar[data-border-snapped="right"] .seekbar_tip {
  transform: translateX(calc(-100% + 9px));
}
.seekbar[data-border-snapped="right"] .seekbar_tip::after {
  transform: none;
  left: calc(100% - 15px);
}
.seekbar .seekbar_tip .seekbar_tip_time {
  font-size: 1.1em;
  font-weight: 900;
}
.seekbar .seekbar_tip .seekbar_tip_stat {
  font-size: 0.67em;
  font-weight: 500;
  color: #fff8;
}
.seekbar .seekbar_tip .seekbar_tip_stat span {
  font-size: 1.5em;
  font-weight: 900;
  color: #ff7800;
  margin-right: 0.1em;
}
.seekbar .seekbar_tip .seekbar_tip_stat span.sl {
  color: #266dcd;
}
.seekbar .seekbar_tip .seekbar_tip_stat span.sr {
  color: #cd2626;
}
.seekbar .seekbar_tip .seekbar_tip_issue {
  font-size: 0.8em;
  font-weight: 500;
  color: #ff7800;
  margin-top: 0.3em;
}
.seekbar .seekbar_tip .seekbar_tip_issue_severe {
  font-size: 0.8em;
  font-weight: 500;
  color: #ff2b00;
  margin-top: 0.3em;
}
.seekbar .seekbar_tip .seekbar_tip_chapter {
  font-size: 0.8em;
  font-weight: 900;
  color: #fff;
  margin-bottom: 0.3em;
}
#kuro {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  z-index: 999999;
  transition: 0.35s opacity;
}
#kuro.hidden {
  opacity: 0;
  pointer-events: none;
}
#afterloader {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #000d;
  z-index: 999999;
  transition: 1s 0.5s opacity;
}
#afterloader.hidden {
  opacity: 0;
  transition: 0.1s opacity;
  pointer-events: none;
}
#afterloader > #afterloader_anim {
  position: fixed;
  width: 10px;
  height: 10px;
  background-color: #000;
  right: 22px;
  bottom: 22px;
  animation: 3s LoaderSpin ease-out infinite;
}
#afterloader > 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;
  }
}
#noreplay {
  position: fixed;
  display: inline-block;
  left: 1em;
  bottom: 0.5em;
  color: #fff;
  opacity: 0.5;
  font-family: HUN;
  font-size: 1.8em;
  text-shadow:
    0 4px #0006,
    0 4px 8px #000;
  pointer-events: none;
  transition: 0.5s opacity;
}
#noreplay.hidden {
  opacity: 0;
}
#leagueoverlay,
#leagueoverlay_white {
  position: fixed;
  left: 50%;
  bottom: calc(var(--r) * 10px);
  height: calc(var(--r) * 50px);
  transform: translateX(-50%);
  transition: 0.1s opacity;
  pointer-events: none;
  will-change: transform;
  z-index: 10000;
}
#scoreslide.hiding ~ #leagueoverlay {
  opacity: 0;
  transition: 3s opacity;
}
body:not(.inmulti) #leagueoverlay,
body:not(.inmulti) #leagueoverlay_white,
body:not(.inpair) #leagueoverlay,
body:not(.inpair) #leagueoverlay_white {
  display: none;
}
body.igceriad-mounted_bottom #leagueoverlay,
body.igceriad-mounted_bottom #leagueoverlay_white {
  bottom: calc(var(--r) * 10px + 100px);
}
#room_players_container {
  position: absolute;
  left: -1em;
  top: 1em;
  width: 25em;
  background-color: #0006;
  border-radius: 8px;
}
#room_players_container > h1 {
  margin-left: 1em;
  font-family: HUN;
  color: #fff;
  text-shadow: 0 2px 6px #000;
  font-size: 2em;
}
#room_players_container > h1 #playerlimit {
  font-size: 0.7em;
}
#room_players_container > h1 #spectatorcount {
  font-size: 0.85em;
}
#room_players {
  height: calc(100vh - 14.5em);
  padding-right: 0.5em;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  overflow-x: hidden;
  overflow-y: auto;
}
.scroller_player_container {
  width: 100%;
  overflow-x: hidden;
  margin: 0;
  order: 1;
  flex-grow: 0;
  flex-shrink: 0;
}
.scroller_player {
  background-color: #372b51;
  border-top: 3px solid #453469;
  border-right: 3px solid #302742;
  border-bottom: 3px solid #211c2c;
  box-shadow: 0 0 8px #000;
  font-family: HUN;
  border-radius: 0 3px 3px 0;
  padding-top: 0.3em;
  padding-bottom: 0.1em;
  padding-left: 2em;
  padding-right: 0.5em;
  margin-bottom: 0.5em;
  position: relative;
  cursor: pointer;
  animation: 0.5s FlyInLeft cubic-bezier(0, 0.55, 0.4, 1);
}
.scroller_player.leaving {
  animation: 0.5s FlyOutLeft cubic-bezier(0.57, 0, 1, 0.45) forwards;
}
.scroller_player.spectator {
  background-color: #150b2b;
  border-top: 3px solid #211340;
  border-right: 3px solid #120923;
  border-bottom: 3px solid #090415;
  order: 2;
}
@keyframes FlyInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0.5;
    filter: brightness(1.5);
  }
  to {
    transform: translateX(0);
    opacity: 1;
    filter: brightness(1);
  }
}
@keyframes FlyOutLeft {
  from {
    transform: translateX(0);
    opacity: 1;
    filter: brightness(1);
  }
  to {
    transform: translateX(-100%);
    opacity: 0.5;
    filter: brightness(0.5);
  }
}
.scroller_player h1 {
  margin: 0;
  font-size: 1.5em;
  color: #d9bef3;
}
.scroller_player.spectator h1 {
  color: #583ab8;
}
.scroller_player h1 img {
  margin-left: 0.15em;
  height: 0.75em;
  vertical-align: text-top;
}
.scroller_player_badgelist {
  top: 1.5em;
}
.scroller_player_badgelist .flag {
  height: 1.3em;
  vertical-align: middle;
  margin-right: 0.25em;
}
.scroller_player_badgelist .leveltag {
  z-index: 100;
  margin-right: 1.1em;
}
.scroller_player_badgelist > div:not(.leveltag) {
  text-align: center;
  display: inline-block;
  background-color: #0004;
  color: #fff;
  width: 4em;
  font-size: 1em;
  box-shadow: inset 0 2px 8px #0006;
  border-radius: 3px;
  padding-top: 0.3em;
  height: 1.05em;
  margin-right: 0.1em;
}
.scroller_player_badgelist > div.observer {
  width: 6.5em;
}
.scroller_player_badgelist > div.precord {
  float: right;
  width: unset;
  padding-right: 0;
  box-shadow: none;
  background: 0 0;
  color: #d9bef3;
  border-radius: 0;
  position: relative;
  top: -0.1em;
}
.scroller_player_badgelist > div.pstreak {
  float: right;
  width: unset;
  padding-left: 0.4em;
  padding-right: 0.4em;
  box-shadow: 0 0 8px #d9bef3;
  background-color: #d9bef3;
  font-weight: 900;
  margin-right: 0.5em;
  color: #000;
  position: relative;
  top: -0.1em;
}
.scroller_player:not(.streak) > .scroller_player_badgelist > div.pstreak {
  display: none;
}
#room_maintenance_warning {
  position: absolute;
  left: 19.25em;
  bottom: 1em;
  right: 19.25em;
  background-color: #fc04;
  color: #fc0;
  text-align: center;
  border-radius: 8px;
  font-family: HUN;
  padding: 0.25em 0.25em;
  padding-bottom: 0;
  font-size: 1.3em;
}
body:not(.maintenance) #room_maintenance_warning {
  display: none;
}
#room_content_container {
  position: absolute;
  left: 25em;
  top: 1em;
  right: 25em;
  background-color: #0006;
  border-radius: 8px;
}
.sysroom:not(.hosting) #room_content_container {
  display: none;
}
.sysroom:not(.hosting) #roomid_container {
  display: none;
}
.room_content_ceriad {
  display: none;
}
.sysroom:not(.hosting) .room_content_ceriad {
  display: none !important;
}
@media only screen and (min-width: 1528px) {
  body:not(.ceriad_disabled) .room_content_ceriad {
    display: block;
    position: absolute;
    left: 25em;
    bottom: 1.3em;
    right: 25em;
  }
  body:not(.ceriad_disabled) #room_maintenance_warning {
    bottom: calc(90px + 2em);
  }
  body:not(.ceriad_disabled)
    #roomview.ceriad_right_aligned_experiment:not(.hosting)
    .room_content_ceriad {
    right: 1em;
    text-align: right;
  }
}
@media only screen and (min-width: 750px) and (max-width: 1527px) {
  body:not(.ceriad_disabled) .room_content_ceriad {
    display: block;
    position: absolute;
    left: 0;
    bottom: 1.3em;
    right: 0;
  }
  body:not(.ceriad_disabled) #room_maintenance_warning {
    bottom: calc(90px + 2em);
  }
}
#roomview.hosting #room_syscontent_container,
#roomview:not(.sysroom) #room_syscontent_container {
  display: none;
}
#room_syscontent_container {
  position: absolute;
  left: 25em;
  right: 25em;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-family: HUN;
}
#room_syscontent_name {
  font-size: 3em;
  color: #fff;
  text-shadow: 0 0 4px #fff;
  margin: 0;
  margin-bottom: 0.1em;
  pointer-events: none;
}
.room_syscontent_ceriad {
  margin-bottom: 1em;
}
#room_syscontent_status {
  font-size: 2em;
  color: #fff;
  text-shadow: 0 0 4px #fff;
  margin: 0;
  margin-bottom: 0.6em;
  pointer-events: none;
}
#room_syscontent_num {
  font-size: 8em;
  color: #fff;
  text-shadow:
    0 4px #fff6,
    0 0 16px #fff;
  margin: 0;
  pointer-events: none;
}
#room_syscontent_img {
  height: 26em;
  max-height: 100vh;
  max-width: 100%;
  object-fit: scale-down;
  margin-bottom: 0.3em;
  pointer-events: none;
}
#roomview:not(.sysroom) #sys_guide {
  display: none;
}
#sys_guide {
  position: absolute;
  left: 25em;
  right: 25em;
  padding-bottom: 4em;
  top: calc(100% - 4em);
  z-index: 1;
  transform: translateY(0);
  transition:
    0.5s transform,
    0.5s background-color;
}
#roomview.hosting #sys_guide:not(:hover):not(.hiding),
#roomview[data-state="ingame"] #sys_guide:not(:hover):not(.hiding) {
  transform: translateY(-3em);
}
#sys_guide:hover {
  transform: translateY(calc(-100% + 8em));
  background-color: #030303ee !important;
}
#sys_guide.hiding {
  transform: translateY(10em);
  pointer-events: none;
}
#sys_guide.hidden {
  display: none;
}
#custom_content_container {
  position: relative;
  background-color: #0006;
  border-radius: 8px;
  width: calc(70vw + 2em + 6px);
}
.custom_tabs {
  width: calc(70vw + 2em + 6px);
}
#room_content_container > h1 {
  font-family: HUN;
  color: #fff;
  text-shadow: 0 2px 6px #000;
  font-size: 2em;
  text-align: center;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.room_tab {
  border-radius: 3px 3px 0 0;
  background: linear-gradient(to bottom, #aaa2 0, transparent 100%);
  font-family: HUN;
  text-align: center;
  color: #aaa;
  padding: 0.4em 0;
  font-size: 1.4em;
  cursor: pointer;
  filter: brightness(1);
  transition: 0.3s filter;
}
.room_tab:hover {
  filter: brightness(1.3);
}
.room_tab.active {
  background: linear-gradient(
    to bottom,
    #fff 0,
    #fff 3px,
    #aaa4 3px,
    transparent 100%
  );
  color: #fff;
}
.room_tab.hidden {
  display: none;
}
.room_content {
  height: calc(100vh - 20.05em);
  padding: 0 0.5em;
}
.room_content.hidden {
  display: none;
}
body.maintenance .room_content {
  height: calc(100vh - 23.05em);
}
@media only screen and (min-width: 1528px) {
  body:not(.ceriad_disabled) .room_content {
    height: calc(100vh - 21.05em - 90px);
  }
  body.maintenance:not(.ceriad_disabled) .room_content {
    height: calc(100vh - 24.05em - 90px);
  }
  body:not(.ceriad_disabled)
    #roomview.ceriad_right_aligned_experiment:not(.sysroom):not(.hosting)
    #room_chat {
    height: calc(100vh - 15.5em - 90px);
  }
}
@media only screen and (min-width: 750px) and (max-width: 1527px) {
  body:not(.ceriad_disabled) .room_content {
    height: calc(100vh - 21.05em - 90px);
  }
  body.maintenance:not(.ceriad_disabled) .room_content {
    height: calc(100vh - 24.05em - 90px);
  }
  body:not(.ceriad_disabled) #roomview:not(.sysroom) #room_players {
    height: calc(100vh - 15.5em - 90px);
  }
  body:not(.ceriad_disabled) #roomview:not(.sysroom) #room_chat {
    height: calc(100vh - 15.5em - 90px);
  }
}
#custom_content_container .room_content {
  height: unset;
  padding: 0 0.5em;
}
#room_opts_save {
  border-radius: 0 0 8px 8px;
  background: linear-gradient(to bottom, transparent 0, #aaa2 100%);
  font-family: HUN;
  text-align: center;
  color: #aaa;
  padding: 0.4em 0;
  font-size: 1.6em;
  cursor: pointer;
  filter: brightness(1);
  transition:
    0.3s filter,
    0.3s color;
}
#room_opts_save:hover {
  filter: brightness(1.3);
}
#roomview:not(.hosting) #room_opts_save {
  pointer-events: none;
  opacity: 0.5;
}
#room_opts_save.unsaved {
  color: #9a37ac;
}
.room_config_row {
  border-top: 1px solid #fff1;
  padding: 0.25em 0;
  position: relative;
}
.room_config_row.imp {
  font-size: 1.5em;
}
.room_config_row.super-imp {
  font-size: 2em;
}
.room_config_newtag {
  position: absolute;
  right: calc(100% + 0.2em);
  top: calc(50% - 0.6em);
  font-size: 0.55rem;
  font-weight: 900;
  color: #00ff8a;
  background-color: #00ff8a22;
  padding: 0.2em 0.2em;
  padding-bottom: 0;
  border-radius: 3px;
  box-shadow: 0 0 4px #00ff8a66;
  pointer-events: none;
}
.room_config_label {
  color: #fff;
  font-size: 1.1em;
  position: relative;
  top: 0.18em;
  flex-grow: 0;
  margin-right: 0.5em;
  transition: 0.3s color;
  margin-top: auto;
  margin-bottom: auto;
}
.room_config_slider {
  display: flex;
  position: relative;
  border-radius: 3px;
}
.room_config_slider > .center {
  position: relative;
  flex-grow: 1;
  flex-shrink: 0;
  top: 50%;
  margin: 0;
  width: unset;
}
.room_config_row.unsaved .room_config_label {
  color: #9a37ac;
}
#roomview:not(.hosting) .rc_switch,
#roomview:not(.hosting) .room_config_item {
  opacity: 0.5;
  pointer-events: none;
}
.room_config_item.room_config_spinner,
.room_config_item:not([type]),
.room_config_item[type="number"],
.room_config_item[type="text"] {
  display: block;
  background-color: #060606aa;
  border-top: 2px solid #0008;
  border-left: 2px solid #0006;
  border-bottom: 2px solid #2228;
  border-right: 2px solid #1116;
  font-family: HUN;
  border-radius: 2px;
  text-align: left;
  font-size: 1.1em;
  padding: 0.1em 0.2em;
  width: 3em;
  color: #fff;
}
.room_config_item.mono {
  font-family: PFW;
}
.room_config_spinner {
  cursor: pointer;
  position: relative;
  text-transform: uppercase;
}
.room_config_spinner::after {
  content: "▼";
  position: absolute;
  right: 0.35em;
  color: #fff6;
  font-family: PFW;
  font-size: 0.8em;
}
.rc_switch {
  flex-grow: 0;
  margin-left: auto;
  margin-right: 0.25em;
  cursor: pointer;
  position: relative;
}
.rc_switch::before {
  content: "";
  position: absolute;
  right: 0;
  background-color: #111c;
  width: 5em;
  height: 1.5em;
  border-radius: 3px;
}
.rc_switch > input {
  display: none;
}
.rc_switch_knob::before {
  content: "OFF";
  position: absolute;
  text-align: center;
  right: 1.4em;
  transform: translateX();
  top: 0.1em;
  background-color: #444;
  color: #888;
  font-family: HUN;
  width: 2.5em;
  height: 1em;
  font-size: 1.25em;
  border-radius: 3px;
  transition:
    0.3s transform,
    0.3s background-color,
    0.3s color;
}
input:checked + .rc_switch_knob::before {
  content: "ON";
  transform: translateX(1.3em);
  background-color: #eee;
  color: #444;
}
.room_config_spinner.music_picker {
  left: 0;
  top: 0;
  margin: 0;
}
.verticalstrip {
  --pos: 0;
  --count: 10;
  background-size: cover;
  background-position: 0 calc(var(--pos) / var(--count) * 100%);
  width: 2.5em;
  height: 2.5em;
}
#room_chat_container {
  position: absolute;
  top: 1em;
  right: -1em;
  width: 25em;
  background-color: #0006;
  border-radius: 8px;
}
#room_chat_container > h1 {
  margin-right: 1em;
  font-family: HUN;
  color: #fff;
  text-shadow: 0 2px 6px #000;
  font-size: 2em;
  text-align: right;
}
#room_chat {
  height: calc(100vh - 14.5em);
  padding-left: 0.5em;
}
#chat_input {
  position: absolute;
  bottom: 0.5em;
  left: 0.5em;
  width: 20.25em;
  font-family: PFW;
  color: #fff;
  font-size: 1.1em;
  background: #000d;
  box-shadow: 0 2px 6px #000a;
  border: 1px solid #060606;
  border-radius: 3px;
  padding: 0 0.2em;
  padding-top: 0.15em;
  transition: 0.2s box-shadow;
  outline: 0 !important;
}
#chat_input:focus {
  box-shadow:
    0 2px 6px #000a,
    0 0 8px #fff;
}
#league_chat_container {
  position: absolute;
  top: calc(8vw + 15.5em);
  left: -2em;
  width: calc(50vw - 2em);
  background-color: #0006;
  border-radius: 8px;
}
#league_chat_container > h1 {
  margin-left: 1.5em;
  font-family: HUN;
  color: #fff;
  text-shadow: 0 2px 6px #000;
  font-size: 2em;
  text-align: left;
}
#league_chat {
  height: calc(100vh - 8vw - 28.5em);
  padding-left: 1.5em;
  text-align: left;
}
#league_chat_input {
  position: absolute;
  bottom: 0.5em;
  left: 2.5em;
  width: calc(100% - 4em);
  font-family: PFW;
  color: #fff;
  font-size: 1.1em;
  background: #000d;
  box-shadow: 0 2px 6px #000a;
  border: 1px solid #060606;
  border-radius: 3px;
  padding: 0 0.2em;
  padding-top: 0.15em;
  transition: 0.2s box-shadow;
  outline: 0 !important;
}
#league_chat_input:focus {
  box-shadow:
    0 2px 6px #000a,
    0 0 8px #fff;
}
#league_chat .chat_message h1 {
  padding-left: 1em;
}
#league_standing_container {
  position: absolute;
  top: calc(8vw + 15.5em);
  right: -2em;
  width: calc(50vw - 2em);
  background-color: #0006;
  border-radius: 8px;
}
#league_standing_container > h1 {
  margin-right: 1.5em;
  font-family: HUN;
  color: #fff;
  text-shadow: 0 2px 6px #000;
  font-size: 2em;
  text-align: right;
}
#league_standing {
  height: calc(100vh - 8vw - 28.5em);
  padding-right: 2.5em;
  text-align: left;
}
#leagueresult {
  font-weight: 900;
  text-align: center;
  margin: 0;
  margin-right: 15vw;
  margin-top: 0.1em;
  font-size: 5vw;
  color: #a6a0ff;
  text-shadow: 0 0 16px #534bca;
  font-family: HUN;
}
.league_victory #leagueresult {
  color: #f0c738;
  text-shadow: 0 0 16px #d4b81a;
}
.leagueplayers {
  text-align: center;
  margin-right: 15vw;
}
.leagueplayer_vs {
  display: inline-block;
  color: #fc0;
  font-family: HUN;
  font-size: 3.5em;
  margin-left: 0.5em;
  margin-right: 0.5em;
  vertical-align: 90%;
  text-shadow:
    0 2px #f80,
    0 0 8px #f80;
}
.leagueplayer {
  display: inline-block;
  width: 50vw;
  padding: 0.5em;
  border: 2px solid #cd2626;
  border-right: none;
  border-radius: 3px 0 0 3px;
  box-shadow: 0 0 16px #cd262688;
  background:
    linear-gradient(to right, #5f1919dd 0, #5f191922 100%),
    url("/tetr-res/crystal.png");
  color: #fff;
  font-family: HUN;
  text-align: left;
  cursor: pointer;
  transition: 0.3s filter;
  margin-left: 0;
  margin-right: -25vw;
}
.leagueplayer.multilog_player {
  background: linear-gradient(to right, #5f1919dd 0, #5f191922 100%);
}
.leagueplayer.leagueplayer_self {
  border: 2px solid #266dcd;
  border-left: none;
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 16px #266dcd88;
  background:
    linear-gradient(to left, #19355fdd 0, #19355f22 100%),
    url("/tetr-res/crystal.png");
  text-align: right;
  margin-left: -25vw;
  margin-right: 0;
}
.leagueplayer.leagueplayer_self.multilog_player {
  background: linear-gradient(to left, #19355fdd 0, #19355f22 100%);
}
.leagueplayer.disconnected {
  opacity: 0.5;
}
.leagueplayer:hover {
  filter: brightness(1.2);
}
.leagueplayer .leagueplayer_name {
  font-size: 1.5em;
  margin: 0;
  margin-top: 0.1em;
  font-weight: 900;
  white-space: pre-wrap;
  overflow: hidden;
  overflow-wrap: break-word;
}
.leagueplayer .leagueplayer_count {
  font-size: 5.5em;
  text-shadow:
    0 2px #fff8,
    0 0 8px #fff;
  margin: 0;
  margin-top: 0.1em;
  margin-bottom: 0.1em;
  font-weight: 900;
}
.leagueplayer .leagueplayer_extra {
  font-size: 1em;
  color: #cd2626;
  margin: 0;
}
.leagueplayer.leagueplayer_self .leagueplayer_extra {
  color: #266dcd;
}
.leagueplayer .leagueplayer_extra span {
  color: #fff;
  font-weight: 900;
}
#leaguestanding_rating {
  font-weight: 900;
  font-size: 6vw;
  color: #fff;
  text-shadow:
    0 2px #fff8,
    0 0 16px #fff;
  font-family: HUN;
  margin-left: 0.25em;
  margin-top: 16px;
  transform-origin: top left;
}
#leaguestanding_rating span {
  font-size: 3vw;
}
#leaguestanding_rating span.leaguechange {
  font-size: 3.5vw;
  vertical-align: 20%;
  color: #fff2;
}
#leaguestanding_placement.hidden
  + #leaguestanding_placement_change.leaguechange {
  display: none;
}
#leaguestanding_placement_change.leaguechange {
  font-size: 2.5vw;
  font-family: HUN;
  color: #fff4;
  vertical-align: 80%;
  margin-left: 0.2em;
}
#leaguestanding_rating.pingrating {
  animation: 1s PingRating ease-out;
}
@keyframes PingRating {
  0% {
    transform: scale(1.2);
    text-shadow:
      0 2px #fff8,
      0 0 16px #fff,
      0 0 32px #fff;
  }
  100% {
    transform: scale(1);
    text-shadow:
      0 2px #fff8,
      0 0 16px #fff,
      0 0 32px #fff0;
  }
}
#leaguestanding_rating.pingfinal {
  animation: 3s PingFinal ease-out forwards;
}
@keyframes PingFinal {
  0% {
    transform: scale(1.2);
    text-shadow:
      0 2px #fff8,
      0 0 16px #fff,
      0 0 32px #fff;
  }
  33% {
    transform: scale(1);
    text-shadow:
      0 2px #fff8,
      0 0 16px #fff,
      0 0 32px #fff0;
  }
  38% {
    transform: scaleX(0);
    text-shadow:
      0 2px #fff8,
      0 0 16px #fff,
      0 0 32px #fff0;
  }
  43% {
    transform: scale(1);
    text-shadow:
      0 2px #fff8,
      0 0 16px #fff,
      0 0 32px #ffff;
  }
  100% {
    transform: scale(1.2);
    text-shadow:
      0 2px #fff8,
      0 0 16px #fff,
      0 0 32px #fff0;
  }
}
#leaguestanding_rating.pingraise {
  animation: 2s PingRaise cubic-bezier(0.74, 0.03, 0.09, 0.97) forwards;
}
@keyframes PingRaise {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}
#leaguestanding_rating.pinglower {
  animation: 2s PingLower cubic-bezier(0.74, 0.03, 0.09, 0.97) forwards;
}
@keyframes PingLower {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.9);
  }
}
#leaguestanding_rank {
  width: 6vw;
  margin-left: 1.5em;
}
#leaguestanding_rank.hidden {
  display: none;
}
#leaguestanding_rank.rankraise {
  animation: 4s RankRaise cubic-bezier(0.67, 0.1, 0.95, 0.66);
}
@keyframes RankRaise {
  0% {
    transform: scale(1) translateY(0) rotate(0);
    opacity: 1;
    filter: brightness(1);
  }
  25% {
    transform: scale(1) translateY(16vw) rotate(-9deg);
    opacity: 0;
    filter: brightness(1);
  }
  35% {
    transform: scale(2) translateY(0) rotate(0);
    opacity: 0;
    filter: brightness(1);
  }
  45% {
    transform: scale(1) translateY(0) rotate(0);
    opacity: 1;
    filter: brightness(1.1);
  }
  46% {
    transform: scale(1) translateY(0) rotate(0);
    opacity: 1;
    filter: brightness(2);
  }
  100% {
    transform: scale(1) translateY(0) rotate(0);
    opacity: 1;
    filter: brightness(1);
  }
}
#leaguestanding_rank.ranklower {
  animation: 4s RankLower cubic-bezier(0.67, 0.1, 0.95, 0.66);
}
@keyframes RankLower {
  0% {
    transform: scale(1) translateY(0) rotate(0);
    opacity: 1;
  }
  25% {
    transform: scale(1) translateY(16vw) rotate(-9deg);
    opacity: 0;
  }
  35% {
    transform: scale(0) translateY(0) rotate(0);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0) rotate(0);
    opacity: 1;
  }
}
#ingame_chat_container {
  position: fixed;
  top: 0;
  left: -2em;
  width: calc(50vw - 500px * var(--r));
  min-width: 275px;
  bottom: 0;
  transform: translateX(0);
  border-radius: 8px;
  z-index: 10001;
  pointer-events: none;
  transition:
    0.5s transform,
    0.5s opacity,
    0.2s background,
    0.3s top,
    0.3s bottom;
}
body.noingamechat:not(.chatfocus) #ingame_chat_container,
body:not(.inmulti):not(.inmultizen) #ingame_chat_container,
body[data-graphics="minimal"]:not(.chatfocus) #ingame_chat_container {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-10vw);
}
.chatfocus.chatbg #ingame_chat_container {
  background: #000c;
}
.chatfocus.chatbg.invert #ingame_chat_container {
  background: #eeea;
}
.igceriad-mounted_left #ingame_chat_container {
  left: calc(-2em + 160px);
  width: calc(50vw - 550px * var(--r));
}
.igceriad-mounted_bottom #ingame_chat_container {
  bottom: 100px;
}
#ingame_chat {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: calc(100%);
  padding-left: 2.5em;
  overflow-y: hidden;
}
#ingame_chat_input {
  position: absolute;
  bottom: 0.5em;
  right: 0.5em;
  width: calc(50vw - 500px * var(--r) - 3.2em);
  min-width: calc(275px - 3.2em);
  font-family: PFW;
  color: #fff;
  font-size: 1.1em;
  background: #000d;
  box-shadow: 0 2px 6px #000a;
  border: 1px solid #060606;
  border-radius: 3px;
  padding: 0 0.2em;
  padding-top: 0.15em;
  transition: 0.2s box-shadow;
  outline: 0 !important;
  pointer-events: all;
}
#ingame_chat_input:focus {
  box-shadow:
    0 2px 6px #000a,
    0 0 8px #fff;
}
.chat_message {
  font-family: PFW;
  color: #fff;
  display: flex;
  font-size: 1.05em;
  border-top: 1px solid #fff1;
  --namecolor: #fff8;
  --namecolor-hover: #fff;
  --namecolor-inside: #000;
}
.invert #ingame_chat .chat_message {
  color: #000;
  --namecolor: #0008;
  --namecolor-hover: #000;
  --namecolor-inside: #fff;
}
.chat_message:last-child {
  margin-bottom: 2.5em;
}
.chat_message h1 {
  flex-shrink: 0;
  color: var(--namecolor);
  font-size: 1em;
  margin: 0;
  margin-right: 0.25em;
}
.chat_message.chat_banner h1 {
  display: none;
}
#ingame_chat .chat_message .chatlink,
#ingame_chat .chat_message h1 {
  pointer-events: all;
}
.chat_message h1.chat_tag:hover {
  color: var(--namecolor-hover);
  cursor: pointer;
}
.chat_message h2 {
  flex-shrink: 0;
  font-size: 1.5em;
  font-weight: 400;
  margin: 0;
  margin-right: 0.25em;
}
.chat_message p {
  display: inline-block;
  flex-grow: 1;
  padding: 0 0.25em;
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 1em;
  border-left: 1px solid #fff1;
  white-space: pre-wrap;
  overflow: hidden;
  overflow-wrap: break-word;
}
.chat_message.system p {
  color: #fff8;
  font-style: italic;
}
.chat_message.deleted p {
  color: #4f4f4f;
  font-style: italic;
}
.chat_message.chat_banner p {
  color: #fff8;
  border: 1px solid #fff2;
  border-radius: 3px;
  padding: 0.2em 0.5em;
}
.chat_message.chat_banner_img {
  position: relative;
}
.chat_message.chat_banner_img p {
  padding-left: 2.9em;
  min-height: 2.05em;
}
.invert #ingame_chat .chat_message.system p {
  color: #0008;
}
#league_chat .chat_message.chat_banner p {
  margin-left: 1rem;
}
.chat_message .banner_img {
  position: absolute;
  left: 0.5em;
  top: 0.25em;
  width: 2em;
}
.chat_message .banner_achicon {
  position: absolute;
  left: 0.5em;
  top: 0.25em;
  width: 2em;
  height: 2em;
  background-size: 800% 800%;
}
.chat_message .chat_img {
  display: block;
  position: relative;
  max-width: 100%;
}
.chat_message.chat_banner .chat_img {
  left: 50%;
  transform: translate(-50%);
}
.chatlink {
  color: #fff;
  text-decoration: underline;
  cursor: pointer;
}
.chat_message.hasaction p {
  cursor: pointer;
  pointer-events: all;
  transition: 0.2s transform;
  transform: translate(0, 0);
}
.chat_message.hasaction p:hover {
  transform: translate(3px, 0);
}
.chat_message.hasaction p:active {
  transition: 50ms transform;
  transform: translate(3px, 5px);
}
.chat_message.hasaction .banner_achicon {
  transition: 0.2s transform;
  transform: translate(0, 0);
}
.chat_message.hasaction p:hover ~ .banner_achicon {
  transform: translate(3px, 0);
}
.chat_message.hasaction p:active ~ .banner_achicon {
  transition: 50ms transform;
  transform: translate(3px, 5px);
}
.chat_message.pingchat p {
  color: #ff6767;
}
.chat_message > p > span.chat_highlight {
  color: #ff6767;
}
.chat_message.announcement p {
  color: #549e40;
}
.chat_message.announcement h1 {
  color: #549e4088;
}
.chat_message.allychat p {
  color: #ff74f8;
}
.chat_message.supporterchat {
  --namecolor: #e0520d;
  --namecolor-hover: #ffffff;
}
.chat_message.supporterchat_t2 {
  --namecolor: #f07a13;
  --namecolor-hover: #ffffff;
}
.chat_message.supporterchat_t3 {
  --namecolor: #faac38;
  --namecolor-hover: #ffffff;
}
.chat_message.supporterchat_t4 {
  --namecolor: #f8cf35;
  --namecolor-hover: #ffffff;
}
.chat_message.halfmodchat {
  --namecolor: #4762fe;
  --namecolor-hover: #6279ff;
}
.chat_message.modchat {
  --namecolor: #cc80f2;
  --namecolor-hover: #e0adfa;
}
.chat_message.adminchat {
  --namecolor: #ff4e8a;
  --namecolor-hover: #fd6c9d;
}
.chat_message.sysopchat {
  --namecolor: #00ebb6;
  --namecolor-hover: #54ffd8;
}
.chat_message.discordchat {
  --namecolor: #aab3ce;
  --namecolor-hover: #ffffff;
}
.chat_message.roomownerchat h1.chat_tag {
  color: var(--namecolor-inside);
  background-color: var(--namecolor);
  margin-left: -0.25em;
  padding-left: 0.25em;
  padding-right: 0.25em;
  margin-right: 0;
  border-radius: 2px;
}
.chat_message.roomownerchat h1.chat_tag:hover {
  background-color: var(--namecolor-hover);
}
.chat_message.discordchat_icon h1 {
  font-style: italic;
}
.chat_message.discordchat_icon h1::before {
  font-family: HUN;
  content: "ǻ";
  margin-right: 0.25rem;
  font-style: normal;
  vertical-align: -0.1em;
  line-height: 0;
}
.chat_message .emote {
  width: 1.3em;
  height: 1.3em;
  vertical-align: middle;
  object-fit: contain;
}
.chat_message .emote.big {
  width: 2.5em;
  height: 2.5em;
  vertical-align: middle;
  object-fit: contain;
}
.chat_message .emote[src*="gif"] {
  will-change: contents;
}
#ingame_chat .chat_message p {
  margin-right: 0.25em;
}
#ingame_chat .chat_message:not(.pinned) {
  opacity: 0.2;
  animation: 30s ChatFade ease-out;
  border-color: #0000;
}
body.inzenith:not(.ingame_phys):not(.spectating):not(.multiplextransitionlock)
  #ingame_chat
  .chat_message:not(.pinned) {
  opacity: 1;
  animation-duration: 0s;
}
@keyframes ChatFade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.2;
  }
}
#ingame_chat .chat_message p {
  border-color: #0000;
}
.chat_message.pinned {
  --pin-duration: 10s;
  --margin-size: 0.25em;
  position: relative;
  margin-top: var(--margin-size);
  padding-top: calc(var(--margin-size) + 1px);
  animation: PinDisappear 0.3s calc(var(--pin-duration) - 0.3s) ease-out;
}
.chat_message.pinned > .banner_img {
  --margin-size: 0.15em;
  margin-top: var(--margin-size);
  padding-top: calc(var(--margin-size) + 1px);
  animation: PinDisappear 0.3s calc(var(--pin-duration) - 0.3s) ease-out;
}
@keyframes PinDisappear {
  from {
    margin-top: var(--margin-size);
    padding-top: calc(var(--margin-size) + 1px);
  }
  to {
    margin-top: 0;
    padding-top: 0;
  }
}
.chat_message.pinned::before {
  content: "";
  position: absolute;
  top: 0;
  left: -0.25em;
  right: 1em;
  height: 1px;
  background-color: var(--namecolor-hover);
  transform-origin: left;
  transform: scaleX(0);
  animation: PinBarDisappear var(--pin-duration) linear;
}
@keyframes PinBarDisappear {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}
.chat_embed {
  color: var(--color2);
  border: 1px solid var(--color3);
  background: linear-gradient(140deg, var(--color3) 0, #0000 140%);
  border-radius: 0 5px 5px 5px;
  padding: 0.1em 0.3em;
  --color: #fff;
  --color2: #fff8;
  --color3: #fff2;
  --filter: none;
}
.chat_embed > .chat_embed_score {
  font-family: HUN;
  font-size: 1.7rem;
  margin: -1.7rem 0;
  margin-top: -1.9rem;
  color: var(--color);
  font-weight: 900;
}
.chat_embed > .chat_embed_score > .ms {
  font-size: 1.2rem;
}
.chat_embed > .chat_embed_score > .unit {
  font-size: 0.9rem;
  margin-left: 0.1rem;
  color: var(--color2);
}
.chat_embed > .chat_embed_score > .mods {
  margin-left: 0.3rem;
}
.chat_embed > .chat_embed_score > .mods > img {
  height: 1.2rem;
  margin-left: 0.1rem;
  filter: var(--filter);
}
.chat_embed > .chat_embed_ally {
  font-family: HUN;
  font-size: 0.85rem;
  margin: -0.4rem 0;
  color: var(--color2);
  font-weight: 500;
  font-style: italic;
}
.chat_embed > .chat_embed_ally > span {
  color: var(--color);
  font-weight: 900;
}
.chat_embed > .chat_embed_stats {
  font-family: HUN;
  font-size: 0.85rem;
  margin: -1.7rem -0.3rem;
  margin-bottom: -2.5rem;
  padding: 0.3rem 0.4rem;
  color: var(--color2);
  font-weight: 500;
  border-top: 1px solid var(--color3);
}
.chat_embed > .chat_embed_stats > span {
  color: var(--color);
  font-weight: 900;
}
.chat_embed[data-floor="1"] {
  --color: #fdbd98;
  --color2: #fdbd9888;
  --color3: #fdbd9822;
  --filter: hue-rotate(260deg);
}
.chat_embed[data-floor="2"] {
  --color: #fde692;
  --color2: #fde69288;
  --color3: #fde69222;
  --filter: hue-rotate(290deg);
}
.chat_embed[data-floor="3"] {
  --color: #ffc788;
  --color2: #c89d6b88;
  --color3: #c89d6b22;
  --filter: hue-rotate(270deg);
}
.chat_embed[data-floor="4"] {
  --color: #ffb7c2;
  --color2: #ffb7c288;
  --color3: #ffb7c222;
  --filter: hue-rotate(220deg);
}
.chat_embed[data-floor="5"] {
  --color: #ffba43;
  --color2: #ffba4388;
  --color3: #ffba4322;
  --filter: hue-rotate(280deg);
}
.chat_embed[data-floor="6"] {
  --color: #ff917b;
  --color2: #ff917b88;
  --color3: #ff917b22;
  --filter: hue-rotate(255deg);
}
.chat_embed[data-floor="7"] {
  --color: #00ddff;
  --color2: #00ddff88;
  --color3: #00ddff22;
  --filter: hue-rotate(80deg);
}
.chat_embed[data-floor="8"] {
  --color: #ff006f;
  --color2: #ff006f88;
  --color3: #ff006f22;
  --filter: hue-rotate(234deg) saturate(7);
}
.chat_embed[data-floor="9"] {
  --color: #98ffb2;
  --color2: #98ffb288;
  --color3: #98ffb222;
  --filter: hue-rotate(0deg);
}
.chat_embed[data-floor="10"] {
  --color: #d677ff;
  --color2: #d677ff88;
  --color3: #d677ff22;
  --filter: hue-rotate(172deg) saturate(6);
}
.chat_buttons {
  display: flex;
  margin-top: 1px;
  column-gap: 1px;
  flex-shrink: 0;
}
.chat_message.chat_banner .chat_buttons {
  width: 100%;
}
#ingame_chat .chat_buttons {
  padding-right: 0.25em;
}
#ingame_chat .chat_message.chat_banner .chat_buttons {
  width: calc(100% - 0.25em);
}
.chat_message.hasbuttons {
  flex-wrap: wrap;
}
.chat_button {
  color: #fff;
  border: 1px solid var(--color);
  background-color: var(--color);
  border-radius: 3px;
  padding: 0.2em 0.5em;
  cursor: pointer;
  pointer-events: all;
  text-align: center;
  font-weight: 900;
  transition: 0.2s transform;
  transform: translateY(0);
  flex-shrink: 0;
  flex-grow: 1;
}
.chat_button:hover {
  transform: translateY(-2px);
}
.chat_button:active {
  transition: 50ms transform;
  transform: translateY(2px);
}
.chat_button_icon {
  height: 1em;
  vertical-align: -15%;
  margin-right: 0.3em;
  pointer-events: none;
}
#victory {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 10000;
  background-color: #0008;
}
#victory.hidden {
  display: none;
}
#victory:not(.hidden) {
  animation: 5s VC ease-in-out both;
}
@keyframes VC {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
#victory_header {
  position: fixed;
  font-family: HUN;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 8px #fff;
  font-size: 4vw;
  left: 8vw;
  top: calc(50vh - 9vw);
  filter: brightness(1);
}
#victory:not(.hidden) #victory_header {
  animation: 5s VC_header ease-out both;
}
@keyframes VC_header {
  0% {
    transform: translateX(96vw);
    filter: brightness(1);
  }
  20% {
    transform: translateX(6vw);
    filter: brightness(1);
  }
  25% {
    transform: translateX(5vw);
    filter: brightness(1);
  }
  25% {
    transform: translateX(5vw);
    filter: brightness(2);
  }
  90% {
    transform: translateX(3vw);
    filter: brightness(1);
  }
  100% {
    transform: translateX(-54vw);
    filter: brightness(1);
  }
}
#victory_shine {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(50vh - 9vw);
  bottom: calc(50vh - 9vw);
  background: linear-gradient(
    to bottom,
    transparent 0,
    #fd02 50%,
    transparent 100%
  );
  mix-blend-mode: lighten;
  transform: scaleY(1);
}
#victory:not(.hidden) #victory_shine {
  animation: 4s 1s VC_shine ease-in-out both;
}
@keyframes VC_shine {
  0% {
    transform: scaleY(0.5);
    opacity: 0;
  }
  5% {
    transform: scaleY(1);
    opacity: 1;
  }
  90% {
    transform: scaleY(1.5);
  }
  100% {
    transform: scaleY(2.5);
  }
}
#victory_radial {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: repeating-radial-gradient(
    circle at center,
    #0000,
    #0000 10px,
    #ffffff06 10px,
    #ffffff06 20px
  );
  mix-blend-mode: lighten;
}
#victory:not(.hidden) #victory_radial {
  animation: 4s 1s VC_radial linear both;
}
@keyframes VC_radial {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  10% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
#victory_victor {
  position: fixed;
  font-family: HUN;
  font-weight: 900;
  color: #fa0;
  text-shadow: 0 0 1vw #ff0;
  text-stroke: 0.1vw #ff0;
  -webkit-text-stroke: 0.03vw #ff0;
  font-size: 8vw;
  left: 8vw;
  right: 8vw;
  text-align: center;
  top: calc(50vh - 3.5vw);
  filter: brightness(1);
}
#victory:not(.hidden) #victory_victor {
  animation: 4s 1s VC_victor ease-in-out both;
}
@keyframes VC_victor {
  0% {
    transform: translateX(92vw);
    filter: brightness(1);
  }
  5% {
    transform: translateX(2vw);
    filter: brightness(1);
  }
  5% {
    transform: translateX(2vw);
    filter: brightness(2);
  }
  10% {
    transform: translateX(1.75vw);
    filter: brightness(1.1);
  }
  90% {
    transform: translateX(-1vw);
    filter: brightness(1);
  }
  100% {
    transform: translateX(-58vw);
    filter: brightness(1);
  }
}
#victory_sub {
  position: fixed;
  font-family: HUN;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 8px #fff;
  font-size: 2.5vw;
  left: 8vw;
  right: 8vw;
  text-align: right;
  top: calc(50vh + 5vw);
}
#victory:not(.hidden) #victory_sub {
  animation: 3s 2s VC_sub ease-in-out both;
}
@keyframes VC_sub {
  0% {
    transform: translateX(108vw);
    filter: brightness(1);
  }
  5% {
    transform: translateX(1vw);
    filter: brightness(1);
  }
  5% {
    transform: translateX(1vw);
    filter: brightness(2);
  }
  90% {
    transform: translateX(-1vw);
    filter: brightness(1);
  }
  100% {
    transform: translateX(-42vw);
    filter: brightness(1);
  }
}
#victory_also {
  position: fixed;
  font-family: HUN;
  font-weight: 500;
  color: #fff;
  text-shadow: 0 0 8px #fff;
  font-size: 1.5vw;
  left: 8vw;
  right: 8vw;
  text-align: right;
  top: calc(50vh + 8vw);
}
#victory:not(.hidden) #victory_also {
  animation: 2.5s 2.5s VC_also ease-in-out both;
}
@keyframes VC_also {
  0% {
    transform: translateX(108vw);
    filter: brightness(1);
  }
  5% {
    transform: translateX(1vw);
    filter: brightness(1);
  }
  5% {
    transform: translateX(1vw);
    filter: brightness(2);
  }
  90% {
    transform: translateX(-1vw);
    filter: brightness(1);
  }
  100% {
    transform: translateX(-42vw);
    filter: brightness(1);
  }
}
#pair {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
}
#pair.hidden {
  display: none;
}
#pair:not(.hidden) {
  animation: 16s PC ease-in-out both;
}
@keyframes PC {
  0% {
    opacity: 0;
  }
  3% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
#pair_bg {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #000;
  opacity: 0;
}
#pair:not(.hidden) #pair_bg {
  animation: 16s PC_bg linear both;
}
@keyframes PC_bg {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  87.5% {
    opacity: 1;
  }
  92.5% {
    opacity: 0;
  }
}
#pair_intro_p1 {
  position: absolute;
  font-family: HUN;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 8px #fff;
  font-size: 6vw;
  left: 0;
  right: 0;
  text-align: center;
  top: calc(50vh - 6vw);
  filter: brightness(1);
  transform: translateX(0);
}
#pair:not(.hidden) #pair_intro_p1 {
  animation: 2.5s PC_header ease-out both;
}
@keyframes PC_header {
  0% {
    transform: translateX(80vw);
  }
  20% {
    transform: translateX(5vw);
  }
  80% {
    transform: translateX(-5vw);
  }
  100% {
    transform: translateX(-80vw);
  }
}
#pair_intro_p2 {
  position: absolute;
  font-family: HUN;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 8px #fff;
  font-size: 6vw;
  left: 0;
  right: 0;
  text-align: center;
  top: calc(50vh + 1vw);
  filter: brightness(1);
  transform: translateX(0);
}
#pair:not(.hidden) #pair_intro_p2 {
  animation: 2.5s PC_headerII ease-out both;
}
@keyframes PC_headerII {
  0% {
    transform: translateX(-80vw);
  }
  20% {
    transform: translateX(-5vw);
  }
  80% {
    transform: translateX(5vw);
  }
  100% {
    transform: translateX(80vw);
  }
}
#pair_el_p1 {
  position: fixed;
  font-family: HUN;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 8px #fff;
  font-size: 4vw;
  width: 120vw;
  height: 60vh;
  border: 4px solid #194aff;
  background:
    linear-gradient(to top, #194affaa 0, #194aff33 50%, #194aff22 100%),
    url("/tetr-res/crystal.png");
  top: -10vh;
  left: -10vw;
  box-sizing: border-box;
  transform: translate(0, -50px);
  cursor: pointer;
}
#pair:not(.hidden) #pair_el_p1 {
  animation: 16s PC_el ease-out both;
}
@keyframes PC_el {
  0% {
    transform: translate(110vw, -20vh) rotate(0);
    filter: brightness(1) grayscale(0);
  }
  15% {
    transform: translate(110vw, -20vh) rotate(0);
    filter: brightness(1) grayscale(0);
  }
  19% {
    transform: translate(0, -20vh) rotate(0);
    filter: brightness(1) grayscale(0);
  }
  20% {
    transform: translate(0, -20vh) rotate(0);
    filter: brightness(1) grayscale(0);
  }
  21% {
    transform: translate(0, 0) rotate(0);
    filter: brightness(1) grayscale(0);
  }
  21.01% {
    transform: translate(0, 0) rotate(0);
    filter: brightness(5) grayscale(1);
  }
  21.5% {
    transform: translate(0, 0) rotate(-3deg);
    filter: brightness(5) grayscale(1);
  }
  30% {
    transform: translate(0, 0) rotate(-3deg);
    filter: brightness(1.01) grayscale(0);
  }
  80% {
    transform: translate(0, 0) rotate(-3deg);
    filter: brightness(1.01) grayscale(0);
  }
  85% {
    transform: translate(0, -60vh) rotate(-3deg);
    filter: brightness(1.01) grayscale(0);
  }
  100% {
    transform: translate(0, -60vh) rotate(-3deg);
    filter: brightness(1.01) grayscale(0);
  }
}
#pair_name_p1 {
  position: absolute;
  left: 15vw;
  bottom: 7.5vh;
  display: inline-block;
  font-size: 6vw;
  pointer-events: none;
}
#pair_rank_p1 {
  position: absolute;
  right: 15vw;
  bottom: 10vh;
  display: inline-block;
  font-size: 4vw;
  pointer-events: none;
}
#pair_rank_p1 span {
  font-size: 2vw;
}
#pair_rank_p1 img {
  height: 8vw;
  vertical-align: bottom;
  position: relative;
  top: 1.3vw;
}
#pair_el_p2 {
  position: fixed;
  font-family: HUN;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 8px #fff;
  font-size: 4vw;
  width: 120vw;
  height: 60vh;
  border: 4px solid #ff1919;
  background:
    linear-gradient(to top, #ff191922 0, #ff191933 50%, #ff1919aa 100%),
    url("/tetr-res/crystal.png");
  top: 50vh;
  left: -10vw;
  box-sizing: border-box;
  transform: translate(0, -50px);
  cursor: pointer;
}
#pair:not(.hidden) #pair_el_p2 {
  animation: 16s PC_elII ease-out both;
}
@keyframes PC_elII {
  0% {
    transform: translate(-110vw, 20vh) rotate(0);
    filter: brightness(1) grayscale(0);
  }
  15% {
    transform: translate(-110vw, 20vh) rotate(0);
    filter: brightness(1) grayscale(0);
  }
  19% {
    transform: translate(0, 20vh) rotate(0);
    filter: brightness(1) grayscale(0);
  }
  20% {
    transform: translate(0, 20vh) rotate(0);
    filter: brightness(1) grayscale(0);
  }
  21% {
    transform: translate(0, 0) rotate(0);
    filter: brightness(1) grayscale(0);
  }
  21.01% {
    transform: translate(0, 0) rotate(0);
    filter: brightness(5) grayscale(1);
  }
  21.5% {
    transform: translate(0, 0) rotate(-3deg);
    filter: brightness(5) grayscale(1);
  }
  30% {
    transform: translate(0, 0) rotate(-3deg);
    filter: brightness(1.01) grayscale(0);
  }
  80% {
    transform: translate(0, 0) rotate(-3deg);
    filter: brightness(1.01) grayscale(0);
  }
  85% {
    transform: translate(0, 60vh) rotate(-3deg);
    filter: brightness(1.01) grayscale(0);
  }
  100% {
    transform: translate(0, 60vh) rotate(-3deg);
    filter: brightness(1.01) grayscale(0);
  }
}
#pair_name_p2 {
  position: absolute;
  right: 15vw;
  top: 12.5vh;
  display: inline-block;
  font-size: 6vw;
  pointer-events: none;
}
#pair_rank_p2 {
  position: absolute;
  left: 15vw;
  top: 15vh;
  display: inline-block;
  font-size: 4vw;
}
#pair_rank_p2 span {
  font-size: 2vw;
}
#pair_rank_p2 img {
  height: 8vw;
  vertical-align: top;
  position: relative;
  top: -2.2vw;
  pointer-events: none;
}
#pair_glow {
  position: fixed;
  width: 80vw;
  height: 10vh;
  background: radial-gradient(closest-side, #fff 0, #fff0 100%);
  top: 45vh;
  left: 10vw;
  transform: rotate(-3deg);
  pointer-events: none;
}
#pair:not(.hidden) #pair_glow {
  animation: 16s PC_glow ease-out both;
}
@keyframes PC_glow {
  0% {
    opacity: 0;
  }
  21% {
    opacity: 0;
  }
  21.01% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
#pair_vs {
  position: fixed;
  font-family: HUN;
  font-weight: 900;
  font-size: 20vh;
  top: 50vh;
  left: 50vw;
  color: #fc0;
  text-shadow:
    0 0 16px #f80,
    0 0 16px #f80,
    0 0 16px #f80,
    0 0 64px #f80;
  pointer-events: none;
}
#pair:not(.hidden) #pair_vs {
  animation: 16s PC_vs ease-out both;
}
@keyframes PC_vs {
  0% {
    opacity: 0;
    transform: translate(-50%, -40%) scale(2);
  }
  21% {
    opacity: 0;
    transform: translate(-50%, -40%) scale(2);
  }
  22% {
    opacity: 1;
    transform: translate(-50%, -40%) scale(1);
  }
  80% {
    opacity: 1;
    transform: translate(-50%, -40%) scale(1);
  }
  85% {
    opacity: 0;
    transform: translate(-50%, -40%) scale(0.5);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -40%) scale(0.5);
  }
}
#pair_ft {
  position: fixed;
  font-family: HUN;
  font-weight: 900;
  font-size: 8vh;
  top: 5vh;
  left: 50vw;
  color: #fff;
  text-shadow: 0 0 16px #fff;
  pointer-events: none;
}
#pair:not(.hidden) #pair_ft {
  animation: 16s PC_ft ease-out both;
}
@keyframes PC_ft {
  0% {
    transform: translate(-50%, -20vh);
  }
  21% {
    transform: translate(-50%, -20vh);
  }
  22% {
    transform: translate(-50%, 0);
  }
  80% {
    transform: translate(-50%, 0);
  }
  85% {
    transform: translate(-50%, -20vh);
  }
  100% {
    transform: translate(-50%, -20vh);
  }
}
#waitstate {
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  background:
    linear-gradient(to bottom, #000000cc 0, #000000aa 100%),
    url("/tetr-res/crystal.png");
  border-top: 3px solid #ff499b;
  border-bottom: 3px solid #ff499b;
  animation: 0.4s WaitStateAppear cubic-bezier(0.23, 0.5, 0.64, 0.99);
}
#waitstate.hidden {
  display: none;
}
#waitstate::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ff499b;
  pointer-events: none;
  opacity: 0;
  animation: 0.4s WaitStateAfterAppear cubic-bezier(0.23, 0.5, 0.64, 0.99)
    backwards;
  z-index: 1;
}
#waitstate.hiding {
  animation: 0.4s WaitStateDisappear cubic-bezier(0.5, 0.1, 0.86, 0.66) forwards;
}
@keyframes WaitStateAppear {
  from {
    clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
    transform: translateY(-30%);
    opacity: 0;
  }
  to {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: translateY(-50%);
    opacity: 1;
  }
}
@keyframes WaitStateAfterAppear {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes WaitStateDisappear {
  from {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: translateY(-50%);
    opacity: 1;
  }
  to {
    clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
    transform: translateY(-70%);
    opacity: 0;
  }
}
#waitstate_header {
  color: #ff499b;
  font-family: HUN;
  font-weight: 900;
  font-size: 4rem;
  margin: 0;
  margin-top: 1rem;
  text-align: center;
  position: relative;
  z-index: 2;
  animation: 0.4s WaitStateHeaderAppear cubic-bezier(0.23, 0.5, 0.64, 0.99)
    backwards;
}
@keyframes WaitStateHeaderAppear {
  from {
    color: #fff;
    transform: translateY(5rem);
  }
  to {
    color: #ff499b;
    transform: translateY(0);
  }
}
#waitstate_description {
  color: #fff;
  font-family: "C";
  font-weight: 500;
  font-size: 1.3rem;
  margin: 0;
  padding: 0 20vw;
  text-align: center;
  animation: 0.3s 0.1s WaitStateFadeAppear cubic-bezier(0.23, 0.5, 0.64, 0.99)
    backwards;
}
@keyframes WaitStateFadeAppear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
#waitstate_score {
  margin: 1rem 0;
  position: relative;
  height: 8rem;
  margin-bottom: 1.5rem;
}
#waitstate_vs {
  position: absolute;
  top: 4.25rem;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff8;
  font-family: HUN;
  font-weight: 900;
  font-size: 2rem;
  animation: 0.3s 0.15s WaitStateFadeAppear cubic-bezier(0.23, 0.5, 0.64, 0.99)
    backwards;
}
.waitstate_player {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(50vw - 1.5rem);
  display: flex;
}
#waitstate_a {
  left: 0;
  flex-direction: row-reverse;
  animation: 0.3s 0.2s WaitStateAAppear cubic-bezier(0.23, 0.5, 0.64, 0.99)
    backwards;
}
#waitstate_b {
  right: 0;
  flex-direction: row;
  animation: 0.3s 0.2s WaitStateBAppear cubic-bezier(0.23, 0.5, 0.64, 0.99)
    backwards;
}
@keyframes WaitStateAAppear {
  from {
    opacity: 0;
    transform: translateX(2rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes WaitStateBAppear {
  from {
    opacity: 0;
    transform: translateX(-2rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.waitstate_player > h1 {
  flex: 0 0;
  color: #fff;
  font-family: HUN;
  font-weight: 900;
  font-size: 7rem;
  margin: 0 1.5rem;
  padding-top: 1.25rem;
}
.waitstate_player > h1.ping {
  animation:
    0.6s WaitStatePing cubic-bezier(0.49, 0, 0.51, 1),
    2s 0.3s WaitStatePingColor cubic-bezier(0.7, 0.02, 0.82, 0.38);
}
@keyframes WaitStatePing {
  0% {
    transform: perspective(200px) rotateX(0);
  }
  50% {
    transform: perspective(200px) rotateX(90deg);
  }
  50.001% {
    transform: perspective(200px) rotateX(-90deg);
  }
  100% {
    transform: perspective(200px) rotateX(0);
  }
}
@keyframes WaitStatePingColor {
  from {
    color: #ff499b;
  }
  to {
    color: #fff;
  }
}
.waitstate_player > img {
  flex: 0 0;
  height: 8rem;
  border-radius: 6px;
  box-shadow: 0 4px 8px #0008;
}
.waitstate_player.disconnected > img {
  filter: grayscale(0.8);
}
.waitstate_player > div {
  flex: 1 1;
  align-self: center;
  padding: 0 1.5rem;
  position: relative;
}
#waitstate_a > div {
  text-align: right;
}
#waitstate_b > div {
  text-align: left;
}
.waitstate_player.disconnected > div::after {
  content: "";
  position: absolute;
  top: -1.5rem;
  left: -8rem;
  width: 8rem;
  height: 8rem;
  border-radius: 6px;
  background-image: url("/tetr-res/noise.gif");
  background-size: cover;
  opacity: 0.25;
  mix-blend-mode: color-burn;
}
.waitstate_player > div > h2 {
  color: #fff;
  font-family: HUN;
  font-weight: 900;
  font-size: 2.5rem;
  margin: 0;
  margin-top: 0.5rem;
}
.waitstate_player > div > p {
  color: #fffa;
  font-family: "C";
  font-weight: 500;
  font-size: 1.5rem;
  margin: 0;
}
#waitstate_next {
  position: absolute;
  left: 50%;
  top: calc(100% + 2px);
  transform: translate(-50%, -50%);
  background-color: #ff499b;
  display: inline-block;
  padding: 0 1.5rem;
  padding-top: 0.45rem;
  color: #fff;
  font-family: HUN;
  font-weight: 900;
  font-size: 1.5rem;
  clip-path: polygon(
    0 50%,
    1.5rem 0,
    calc(100% - 1.5rem) 0,
    100% 50%,
    calc(100% - 1.5rem) 100%,
    1.5rem 100%
  );
}
#waitstate_next span {
  font-size: 2.5rem;
  vertical-align: -15%;
}
#waitstate.appearing #waitstate_next {
  animation: 0.3s 0.3s WaitStateNextAppear cubic-bezier(0.23, 0.5, 0.64, 0.99)
    backwards;
}
#waitstate_next.ping {
  animation: 2s WaitStateNextPing cubic-bezier(0.03, 0.48, 0.36, 1);
}
@keyframes WaitStateNextPing {
  from {
    transform: translate(-50%, -50%) perspective(200px) rotateX(0);
  }
  to {
    transform: translate(-50%, -50%) perspective(200px) rotateX(1800deg);
  }
}
@keyframes WaitStateNextAppear {
  from {
    transform: translate(-50%, -50%) scaleY(0);
  }
  to {
    transform: translate(-50%, -50%) scaleY(1);
  }
}
#waitstate_forfeit_shade {
  position: absolute;
  top: calc(100% + 2.5rem);
  left: calc(50% - 17.5rem);
  width: 35rem;
  box-sizing: border-box;
  padding: 0.5rem;
  text-align: center;
  color: #fff8;
  font-family: "C";
  font-weight: 500;
  font-size: 1.2rem;
  background-color: #0000;
  border: 3px solid #fff0;
  cursor: pointer;
  transition:
    0.3s color,
    0.3s background-color,
    0.3s border-color;
}
#waitstate_forfeit_shade.hidden {
  display: none;
}
#waitstate_forfeit_shade:hover {
  color: #fff;
  background-color: #0004;
  border: 3px solid #fff4;
}
#waitstate_forfeit_shade:active {
  color: #fff;
  background-color: #ff499b;
  border: 3px solid #ff499b;
  transition:
    50ms color,
    50ms background-color,
    50ms border-color;
}
#waitstate.appearing #waitstate_forfeit_shade {
  animation: 1s 4s WaitStateFadeAppear backwards;
}
#waitstate_forfeit_true {
  position: absolute;
  top: calc(100% + 2.5rem);
  left: calc(50% - 17.5rem);
  width: 35rem;
  box-sizing: border-box;
  padding: 0.5rem;
  text-align: center;
  color: #fff;
  font-family: "C";
  font-weight: 500;
  font-size: 1.2rem;
  background-color: #000a;
  animation: 0.1s WaitstateForfeitTrueAppear ease-out;
}
@keyframes WaitstateForfeitTrueAppear {
  from {
    background-color: #ff499b;
    clip-path: polygon(0 0, 100% 0, 100% 2.5rem, 0 2.5rem);
  }
  to {
    background-color: #000a;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
#waitstate_forfeit_true::before {
  content: "";
  pointer-events: none;
  position: absolute;
  background-color: #ff499b;
  opacity: 0;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    0 100%,
    0 0,
    6px 6px,
    6px calc(100% - 6px),
    calc(100% - 6px) calc(100% - 6px),
    calc(100% - 6px) 6px,
    6px 6px
  );
  animation:
    0.2s 0.1s WaitstateForfeitTrueHaloAppear ease-out,
    1s 0.3s WaitstateForfeitTrueHaloBob ease-in-out alternate infinite;
}
@keyframes WaitstateForfeitTrueHaloAppear {
  from {
    opacity: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    clip-path: polygon(
      0 0,
      100% 0,
      100% 100%,
      0 100%,
      0 0,
      0px 0px,
      0px calc(100% - 0px),
      calc(100% - 0px) calc(100% - 0px),
      calc(100% - 0px) 0px,
      0px 0px
    );
  }
  to {
    opacity: 0.4;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    clip-path: polygon(
      0 0,
      100% 0,
      100% 100%,
      0 100%,
      0 0,
      10px 10px,
      10px calc(100% - 10px),
      calc(100% - 10px) calc(100% - 10px),
      calc(100% - 10px) 10px,
      10px 10px
    );
  }
}
@keyframes WaitstateForfeitTrueHaloBob {
  from {
    opacity: 0.4;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    clip-path: polygon(
      0 0,
      100% 0,
      100% 100%,
      0 100%,
      0 0,
      10px 10px,
      10px calc(100% - 10px),
      calc(100% - 10px) calc(100% - 10px),
      calc(100% - 10px) 10px,
      10px 10px
    );
  }
  to {
    opacity: 0.6;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    clip-path: polygon(
      0 0,
      100% 0,
      100% 100%,
      0 100%,
      0 0,
      6px 6px,
      6px calc(100% - 6px),
      calc(100% - 6px) calc(100% - 6px),
      calc(100% - 6px) 6px,
      6px 6px
    );
  }
}
#waitstate_forfeit_true::after {
  content: "";
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    -45deg,
    #ff499b 0,
    #ff499b 8px,
    #ab316a 8px,
    #ab316a 16px
  );
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    0 100%,
    0 0,
    3px 3px,
    3px calc(100% - 3px),
    calc(100% - 3px) calc(100% - 3px),
    calc(100% - 3px) 3px,
    3px 3px
  );
}
#waitstate_forfeit_true.hidden {
  display: none;
}
#waitstate_forfeit_true p {
  margin: 0;
}
#waitstate_forfeit {
  margin: 0;
  margin-top: 0.5rem;
  padding: 0.5rem;
  text-align: center;
  color: #fff;
  font-family: "C";
  font-weight: 900;
  font-size: 1.2rem;
  background: repeating-linear-gradient(
    -45deg,
    #ff499b 0,
    #ff499b 8px,
    #ab316a 8px,
    #ab316a 16px
  );
  cursor: pointer;
  transform: translateY(0);
  filter: brightness(1);
  transition:
    0.3s filter,
    0.3s transform;
}
#waitstate_forfeit:hover {
  transform: translateY(-2px);
  filter: brightness(1.2);
}
#waitstate_forfeit:active {
  transform: translateY(3px);
  filter: brightness(0.5);
  transition:
    50ms filter,
    50ms transform;
}
#multilog {
  margin-top: 1em;
}
.multilog_result {
  cursor: pointer;
  transition: 0.3s filter;
  text-align: center;
  padding: 0;
}
.multilog_result:hover {
  filter: brightness(1.2);
}
.multilog_result_unavailable {
  pointer-events: none;
  opacity: 0.5;
}
.multilog_empty {
  font-family: HUN;
  text-align: center;
  color: #fffa;
  font-size: 1.8em;
  margin-top: 3em;
  padding: 0;
  width: calc(70vw + 6px);
}
.multilog_result_self {
  display: inline-block;
  width: calc(50% - 3.25em);
  padding: 0.66em;
  padding-top: 0.85em;
  border-right: 2px solid #266dcd;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(to left, #19355f88 0, #19355f00 100%);
  font-family: HUN;
  text-align: right;
  margin-right: 0.33em;
  font-size: 1.15em;
  color: #266dcd;
}
.multilog_result_self.success {
  background: linear-gradient(to left, #266dcd 0, #266dcd00 100%);
  color: #6ba2ed;
  border-right-color: #fff;
}
.multilog_result_self span {
  color: #fff;
  font-weight: 900;
}
.multilog_result_opponent {
  display: inline-block;
  width: calc(50% - 3.25em);
  padding: 0.66em;
  padding-top: 0.85em;
  border-radius: 3px 0 0 3px;
  border-left: 2px solid #cd2626;
  background: linear-gradient(to right, #5f191988 0, #5f191900 100%);
  font-family: HUN;
  text-align: left;
  margin-left: 0.33em;
  font-size: 1.15em;
  color: #cd2626;
}
.multilog_result_opponent.success {
  background: linear-gradient(to right, #cd2626 0, #cd262600 100%);
  color: #f66e6e;
  border-left-color: #fff;
}
.multilog_result_opponent span {
  color: #fff;
  font-weight: 900;
}
.multilog_result_time {
  display: inline-block;
  width: 2.66em;
  padding: 0.66em 0;
  padding-top: 0.85em;
  font-family: HUN;
  text-align: center;
  font-size: 1.15em;
  font-weight: 900;
  color: #fff;
}
.multilog_result_time.focusedround {
  background-color: #fa0;
  color: #000;
  border-radius: 3px;
  box-shadow: 0 0 16px #f80;
}
#multilogplayers {
  margin-top: 4em;
}
#nofocus {
  text-align: center;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 3px solid red;
  color: red;
  font-size: 2.5em;
  padding: 0.2em;
  background-color: #000a;
  pointer-events: none;
  font-family: HUN;
  animation: 0.2s 0.2s NoFocusAppear backwards;
}
#nofocus span {
  display: block;
  color: #fff;
  font-size: 0.6em;
}
body.hidefocuswarning #nofocus,
body:not(.ingame) #nofocus,
body:not(.ingame_phys) #nofocus,
body:not(.nofocus):not(.chatfocus) #nofocus {
  display: none;
}
@keyframes NoFocusAppear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
#roomprepare {
  text-align: center;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 3px solid #00ff54;
  color: #00ff54;
  font-size: 2.5em;
  padding: 0.2em;
  background-color: #000a;
  pointer-events: none;
  font-family: HUN;
  z-index: 999999999;
}
#roomprepare span {
  display: block;
  color: #fff;
  font-size: 0.6em;
}
#roomprepare.hidden {
  display: none;
}
#diyusi {
  text-align: center;
  position: fixed;
  left: 50%;
  bottom: 1em;
  transform: translate(-50%, 0);
  will-change: transform;
  max-width: 90vw;
  pointer-events: none;
  color: #fff;
  font-family: HUN;
  z-index: 2;
  display: flex;
  opacity: 0.5;
  transition:
    0.5s transform,
    2s opacity;
}
#diyusi.hiding {
  transform: translate(-50%, 150%);
}
#diyusi.hidden {
  display: none;
}
#diyusi.ping {
  opacity: 1;
  transition:
    0.5s transform,
    0.1s opacity;
}
body.igceriad-mounted_bottom #diyusi {
  bottom: calc(0.5em + 100px);
}
.diyusi_strategy {
  flex-grow: 1;
  text-align: center;
  border: 1px solid #fff4;
  color: #fff6;
  background-color: #fff1;
  border-radius: 1em;
  margin: 0 0.25em;
  transition:
    0.1s border-color,
    0.1s color,
    0.1s background-color;
  white-space: nowrap;
}
.diyusi_strategy h1 {
  display: inline-block;
  font-size: 1.25em;
  background-color: #fff3;
  border-radius: 1em;
  margin: 0;
  margin-right: 0.25em;
  transition: 0.1s background-color;
  padding: 0;
  padding-left: 0.35em;
  padding-right: 0.45em;
  padding-top: 0.2em;
}
.diyusi_strategy p {
  display: inline-block;
  margin: 0;
  margin-right: 0.45em;
  vertical-align: text-bottom;
}
.diyusi_strategy.active {
  border: 1px solid #fb06;
  color: #fb09;
  background-color: #fb01;
  animation: 0.5s StrategyPing ease-out;
}
.diyusi_strategy.active h1 {
  background-color: #fb04;
}
@keyframes StrategyPing {
  0% {
    filter: brightness(1);
    transform: scale(1);
  }
  15% {
    filter: brightness(1.5);
    transform: scale(1.5);
  }
  100% {
    filter: brightness(1);
    transform: scale(1);
  }
}
.diyusi_targeting {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -3rem;
  border: 1px solid #fff;
  border-radius: 5em;
  color: #fff;
  background-color: #ffffff1c;
  white-space: nowrap;
}
.diyusi_targeting h1 {
  display: inline-block;
  font-size: 1.5em;
  border-radius: 1em;
  margin: 0;
  transition: 0.1s background-color;
  padding: 0;
  padding-left: 0.35em;
  padding-right: 0.45em;
  padding-top: 0.2em;
}
.diyusi_targeting.caution {
  color: #fb0;
  border: 1px solid #fb0;
  background-color: #ffbb001c;
}
.diyusi_targeting.danger {
  color: red;
  border: 1px solid red;
  background-color: #f0000040;
}
.diyusi_targeting.hidden {
  display: none;
}
#diyusi_extra {
  color: #fb8c;
  font-size: 1.5em;
  position: absolute;
  left: 0;
  right: 0;
  top: -1.25em;
  transition: 0.5s opacity;
}
#diyusi:not(.hasextra) #diyusi_extra {
  opacity: 0;
}
#referee {
  text-align: center;
  position: fixed;
  left: 50%;
  top: 1em;
  transform: translate(-50%, 0);
  will-change: transform;
  max-width: 90vw;
  pointer-events: none;
  color: #fff;
  font-family: HUN;
  z-index: 2;
  transition: 0.5s transform;
}
#referee.hiding {
  transform: translate(-50%, -150%);
}
#referee.disabled,
#referee.hidden {
  display: none;
}
#referee.ft1 {
  display: none;
}
.spectating #referee {
  transform: translate(-50%, 3em);
}
#referee_top {
  background-color: #000c;
  padding: 0.1em;
  color: #fffa;
  border-radius: 3px;
}
#referee_points {
  display: flex;
  justify-content: center;
}
.referee_point {
  --r: 255;
  --g: 0;
  --b: 0;
  flex-basis: 9em;
  flex-grow: 1;
  flex-shrink: 0;
  padding: 0.25em 0;
  background-color: rgba(var(--r), var(--g), var(--b), 0.15);
  color: rgba(var(--r), var(--g), var(--b), 0.8);
  border-radius: 3px;
}
.referee_point h1 {
  font-size: 2em;
  margin: 0;
}
.referee_point p {
  font-size: 0.75em;
  margin: 0;
}
.referee_sep {
  flex-grow: 0;
  flex-shrink: 0;
  color: #fff4;
  align-self: center;
  padding-left: 0.25em;
  padding-right: 0.25em;
  font-size: 2em;
}
#referee.duel .referee_point {
  flex-basis: 11em;
  padding: 0;
  display: flex;
  background-color: rgba(var(--r), var(--g), var(--b), 0.05);
}
#referee.duel .referee_point:first-child {
  text-align: right;
  justify-content: flex-end;
}
#referee.duel .referee_point:nth-child(3) {
  text-align: left;
  justify-content: flex-start;
}
#referee.duel .referee_point h1 {
  flex-grow: 0;
  flex-shrink: 0;
  display: inline-block;
  background-color: rgba(var(--r), var(--g), var(--b), 0.5);
  color: #fffc;
  font-weight: 900;
  padding: 0 0.25em;
  padding-top: 0.1em;
  border-radius: 3px;
}
#referee.duel .referee_point p {
  flex-grow: 0;
  flex-shrink: 0;
  font-weight: 900;
  align-self: center;
  display: inline-block;
}
#referee.duel .referee_point:first-child h1 {
  order: 2;
  margin-left: 0.25em;
}
#referee.duel .referee_point:first-child p {
  order: 1;
}
#referee.duel .referee_point:nth-child(3) h1 {
  margin-right: 0.25em;
}
#scoreslide {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 10000;
  font-family: HUN;
  background-color: #000d;
  transition: 0.3s opacity;
}
#scoreslide.hidden {
  display: none;
}
#scoreslide.hiding {
  opacity: 0;
}
#scoreslide_header {
  position: fixed;
  z-index: 10;
  left: 50%;
  top: 0;
  background-color: #000;
  font-weight: 900;
  color: #aaa;
  font-size: 2vw;
  transform: translate(-50%, 0);
  padding: 0.2vw 2vw;
  padding-top: 0.6vw;
  clip-path: polygon(0 0, 100% 0, calc(100% - 1vw) 100%, 1vw 100%);
  transition: 0.3s transform;
}
#scoreslide.hiding #scoreslide_header {
  transform: translate(-50%, -100%);
}
#scoreslide_leader {
  position: fixed;
  left: 5vw;
  right: 5vw;
  top: 7vw;
  font-weight: 900;
  color: #fff;
  font-size: 5vw;
  padding: 0.2vw 2vw;
  padding-top: 0.6vw;
}
#scoreslide.duel #scoreslide_leader {
  display: none;
}
#scoreslide_leader::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8vw;
  opacity: 0.1;
  background: radial-gradient(
    ellipse farthest-side at 50% 100%,
    #fff 0,
    transparent 100%
  );
  transform: translateY(0);
  transition: 0.5s transform;
}
#scoreslide.hiding #scoreslide_leader::after {
  transform: translateY(5vw);
}
#scoreslide.pinged #scoreslide_leader::after {
  animation: 2s LAPing ease-out;
}
@keyframes LAPing {
  0% {
    opacity: 0.1;
  }
  5% {
    opacity: 0.35;
  }
  100% {
    opacity: 0.1;
  }
}
#scoreslide_leader_info {
  position: absolute;
  left: 2.5vw;
  top: 1vw;
  font-size: 1.5vw;
  color: #888;
  transform: translateX(0);
  transition: 0.5s transform;
}
#scoreslide.hiding #scoreslide_leader_info {
  transform: translateX(-3vw);
}
#scoreslide_leader_name {
  text-shadow: 0 0 4px #fff;
  display: inline-block;
  vertical-align: -50%;
  transform: translateX(0);
  transition: 0.5s transform;
}
#scoreslide.hiding #scoreslide_leader_name {
  transform: translateX(-5vw);
}
#scoreslide_leader_points {
  text-shadow: 0 0 8px #fff;
  display: inline-block;
  float: right;
  font-size: 12vw;
  transform: translateX(0) scale(1);
  transition: 0.5s transform;
}
#scoreslide.hiding #scoreslide_leader_points {
  transform: translateX(5vw);
}
#scoreslide.pinged #scoreslide_leader_points {
  animation: 1s LPPing ease-out;
}
@keyframes LPPing {
  0% {
    transform: translateX(0) scale(1);
  }
  10% {
    transform: translateX(0) scale(1.3);
  }
  100% {
    transform: translateX(0) scale(1);
  }
}
#scoreslide_list {
  position: fixed;
  left: 5vw;
  right: 5vw;
  top: 19.8vw;
  bottom: 7vw;
  font-weight: 900;
  color: #fff;
  font-size: 2vw;
  transform: translateY(0);
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
  overflow: hidden;
  transition: 0.5s transform;
}
#scoreslide.hiding #scoreslide_list {
  transform: translateY(5vw);
}
#scoreslide.duel #scoreslide_list {
  display: none;
}
#scoreslide_list::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5vw;
  background: linear-gradient(to bottom, transparent 0, #000 100%);
}
.scoreslide_player {
  border-bottom: 1px solid #222;
  padding: 0.2vw 2.5vw;
  width: calc(100% - 5vw);
  height: 4vw;
}
.scoreslide_player p {
  font-size: 2vw;
  color: #fff;
  display: inline-block;
  margin: 0;
  margin-top: 1.3vw;
}
.scoreslide_player h1 {
  font-size: 3vw;
  color: #fff;
  display: inline-block;
  float: right;
  margin: 0;
  margin-top: 0.7vw;
}
.scoreslide_duel_player {
  position: fixed;
  width: calc(50vw - 2px);
  height: 100vh;
  top: 0;
  color: #fff;
  will-change: transform;
}
#scoreslide:not(.duel) .scoreslide_duel_player {
  display: none;
}
#scoreslide_duel_p1 {
  --r: 0;
  --g: 90;
  --b: 255;
  left: 0;
  text-align: right;
  transform: translateX(0);
  transition: 0.25s transform ease-out;
  border-right: 2px solid rgba(var(--r), var(--g), var(--b), 1);
}
#scoreslide.hiding #scoreslide_duel_p1 {
  transition: 0.8s transform ease-out;
  transform: translateX(-50vw);
}
#scoreslide_duel_p2 {
  --r: 255;
  --g: 0;
  --b: 0;
  right: 0;
  text-align: left;
  transform: translateX(0);
  transition: 0.25s transform ease-out;
  border-left: 2px solid rgba(var(--r), var(--g), var(--b), 1);
}
#scoreslide.hiding #scoreslide_duel_p2 {
  transition: 0.8s transform ease-out;
  transform: translateX(50vw);
}
.scoreslide_duel_player::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -2;
  opacity: 0.1;
}
.scoreslide_duel_player::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
  opacity: 0.3;
}
#scoreslide_duel_p1::before {
  background: linear-gradient(
    to right,
    rgba(var(--r), var(--g), var(--b), 0.1) 0,
    rgba(var(--r), var(--g), var(--b), 0.3) calc(100% - 2vw),
    rgba(var(--r), var(--g), var(--b), 1) 100%
  );
}
#scoreslide.leaguess #scoreslide_duel_p1::before {
  background:
    linear-gradient(
      to right,
      rgba(var(--r), var(--g), var(--b), 0.1) 0,
      rgba(var(--r), var(--g), var(--b), 0.3) calc(100% - 2vw),
      rgba(var(--r), var(--g), var(--b), 1) 100%
    ),
    url("/tetr-res/crystal.png");
}
#scoreslide_duel_p1::after {
  left: 40vw;
  right: 0;
  background: radial-gradient(
    ellipse farthest-side at 100% 50%,
    rgba(var(--r), var(--g), var(--b), 1) 0,
    transparent 100%
  );
}
#scoreslide_duel_p2::before {
  background: linear-gradient(
    to left,
    rgba(var(--r), var(--g), var(--b), 0.1) 0,
    rgba(var(--r), var(--g), var(--b), 0.3) calc(100% - 2vw),
    rgba(var(--r), var(--g), var(--b), 1) 100%
  );
}
#scoreslide.leaguess #scoreslide_duel_p2::before {
  background:
    linear-gradient(
      to left,
      rgba(var(--r), var(--g), var(--b), 0.1) 0,
      rgba(var(--r), var(--g), var(--b), 0.3) calc(100% - 2vw),
      rgba(var(--r), var(--g), var(--b), 1) 100%
    ),
    url("/tetr-res/crystal.png");
}
#scoreslide_duel_p2::after {
  left: 0;
  right: 40vw;
  background: radial-gradient(
    ellipse farthest-side at 0 50%,
    rgba(var(--r), var(--g), var(--b), 1) 0,
    transparent 100%
  );
}
#scoreslide.pingedp1 #scoreslide_duel_p1::before {
  animation: 2s DBPing ease-out;
}
#scoreslide.pingedp1 #scoreslide_duel_p1::after {
  animation: 2s DAPing ease-out;
}
#scoreslide.pingedp2 #scoreslide_duel_p2::before {
  animation: 2s DBPing ease-out;
}
#scoreslide.pingedp2 #scoreslide_duel_p2::after {
  animation: 2s DAPing ease-out;
}
@keyframes DBPing {
  0% {
    opacity: 0.1;
  }
  5% {
    opacity: 1;
  }
  100% {
    opacity: 0.1;
  }
}
@keyframes DAPing {
  0% {
    opacity: 0.3;
  }
  5% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}
.scoreslide_duel_player h1 {
  font-size: 20vw;
  margin: 0;
  margin-top: calc(50vh - 10vw);
  text-shadow:
    0 0.3vw #aaa,
    0 0.3vw 32px #fffa;
}
#scoreslide_duel_p1 h1 {
  margin-right: 4vw;
  transform-origin: right;
}
#scoreslide_duel_p2 h1 {
  margin-left: 4vw;
  transform-origin: left;
}
#scoreslide.pingedp1 #scoreslide_duel_p1 h1 {
  animation: 1s DPPing ease-out;
}
#scoreslide.pingedp2 #scoreslide_duel_p2 h1 {
  animation: 1s DPPing ease-out;
}
@keyframes DPPing {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}
.scoreslide_duel_player p {
  font-size: 3vw;
  margin: 0;
  text-shadow: 0 0 16px #fff;
  font-weight: 900;
}
#scoreslide_duel_p1 p {
  margin-right: 4.75vw;
}
#scoreslide_duel_p2 p {
  margin-left: 4.75vw;
}
#scoreslide_duel_match {
  position: absolute;
  left: 50%;
  bottom: calc(var(--r) * 100px);
  font-family: HUN;
  color: #fff;
  font-weight: 900;
  font-size: 4vh;
  padding-top: 0.2em;
  padding-bottom: 0;
  padding-left: 1em;
  padding-right: 1em;
  clip-path: polygon(
    0% 50%,
    0.66em 100%,
    calc(100% - 0.66em) 100%,
    100% 50%,
    calc(100% - 0.66em) 0%,
    0.66em 0%
  );
  background-color: #000;
  display: none;
  transform-origin: 0% 50%;
  will-change: transform;
}
#scoreslide_duel_match.ssdm_p1 {
  display: inline-block;
  background-color: #005aff;
  animation: SSDM_PI 3.5s cubic-bezier(0.57, 0, 0.99, 0.38);
}
@keyframes SSDM_PI {
  0% {
    opacity: 0;
    transform: scaleY(0) translateX(-50%);
  }
  10% {
    opacity: 1;
    transform: scaleY(1) translateX(-50%);
  }
  60% {
    opacity: 1;
    transform: scaleY(1) translateX(-50%);
  }
  100% {
    opacity: 1;
    transform: scaleY(1) translateX(-200vw);
  }
}
#scoreslide_duel_match.ssdm_p2 {
  display: inline-block;
  background-color: red;
  animation: SSDM_PII 3.5s cubic-bezier(0.57, 0, 0.99, 0.38);
}
@keyframes SSDM_PII {
  0% {
    opacity: 0;
    transform: scaleY(0) translateX(-50%);
  }
  10% {
    opacity: 1;
    transform: scaleY(1) translateX(-50%);
  }
  60% {
    opacity: 1;
    transform: scaleY(1) translateX(-50%);
  }
  100% {
    opacity: 1;
    transform: scaleY(1) translateX(200vw);
  }
}
#scoreslide_duel_match.ssdm_p3 {
  display: inline-block;
  background-color: #ffa800;
  color: #000;
  animation: SSDM_PIII 3.5s cubic-bezier(0.57, 0, 0.99, 0.38);
}
@keyframes SSDM_PIII {
  0% {
    opacity: 0;
    transform: scale(2.5) translate(-50%, 0);
  }
  10% {
    opacity: 1;
    transform: scale(1) translate(-50%, 0);
  }
  60% {
    opacity: 1;
    transform: scale(1) translate(-50%, 0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translate(-50%, 30vh);
  }
}
#scoreslide_duel_match.ssdm_p4 {
  display: inline-block;
  background-color: #b69dea;
  color: #000;
  animation: SSDM_PIV 3.5s cubic-bezier(0.57, 0, 0.99, 0.38);
}
@keyframes SSDM_PIV {
  0% {
    opacity: 0;
    transform: scale(2.5) translate(-50%, 0);
  }
  10% {
    opacity: 1;
    transform: scale(1) translate(-50%, 0);
  }
  60% {
    opacity: 1;
    transform: scale(1) translate(-50%, 0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translate(-50%, -30vh);
  }
}
#waterfall {
  position: fixed;
  right: 1em;
  top: 5em;
  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);
}
body[data-graphics="minimal"] .waterfall_item {
  opacity: 1;
  margin-bottom: -0.3em;
  transform: translateY(0);
  animation: none;
}
.waterfall_item.despawning {
  opacity: 0;
  margin-bottom: -2em;
  transform: translateY(-1em);
  animation: 0.5s waterfallDespawn forwards ease-in;
}
body[data-graphics="minimal"] .waterfall_item.despawning {
  animation: none;
}
.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%
  );
}
body[data-graphics="minimal"] .waterfall_item p::before {
  animation: none;
}
.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);
  }
}
#killfeed {
  position: fixed;
  right: 1em;
  top: 1em;
  z-index: 10000005;
  pointer-events: none;
}
body[data-graphics="minimal"] #killfeed {
  display: none;
}
body.inzenith #killfeed {
  right: 300px;
}
body.inzenith .killfeed_item:not(.killer):not(.victim) {
  display: none;
}
.spectating #killfeed {
  top: 4em;
}
.igceriad-mounted_right #killfeed {
  right: calc(1em + 200px);
}
.killfeed_item {
  will-change: transform;
  text-align: right;
  font-family: HUN;
  font-size: 0.9em;
  margin-bottom: -2em;
  position: relative;
  opacity: 0;
  transform: translateY(-1em);
  animation: 0.5s killfeedSpawn forwards cubic-bezier(0.3, 1.52, 0.45, 1);
}
.killfeed_item.despawning {
  opacity: 0;
  margin-bottom: -2em;
  transform: translateY(-1em);
  animation: 0.5s killfeedDespawn forwards ease-in;
}
.killfeed_item p {
  background: #1116;
  color: #fff;
  padding: 0.35em 0.5em;
  padding-bottom: 0.25em;
  border-radius: 2px;
  position: relative;
  display: inline-block;
  margin: 0;
  border: 1px solid #1116;
}
.killfeed_item.killer p {
  border: 1px solid #fa0;
  color: #fa0;
}
.killfeed_item.killer p:first-of-type {
  background: #fa06;
}
.killfeed_item.victim p {
  border: 1px solid #a00;
  color: #a00;
}
.killfeed_item.victim p:nth-child(2),
.killfeed_item.victim p:nth-of-type(2) {
  background: #a006;
}
.killfeed_item img {
  height: 1em;
  vertical-align: sub;
  margin: 0 0.25em;
}
@keyframes killfeedSpawn {
  from {
    opacity: 0;
    margin-bottom: -2em;
    transform: translateY(-1em);
  }
  to {
    opacity: 1;
    margin-bottom: 0.3em;
    transform: translateY(0);
  }
}
@keyframes killfeedDespawn {
  from {
    opacity: 1;
    margin-bottom: -0.3em;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    margin-bottom: -2em;
    transform: translateY(0);
  }
}
#volume_overlay {
  position: fixed;
  right: 1em;
  bottom: 1em;
  will-change: transform;
  color: #fff;
  font-family: HUN;
  z-index: 2000000;
  opacity: 1;
  font-size: 1.85em;
  transition: 0s opacity;
}
#volume_overlay.hiding {
  transition: 5s opacity;
  opacity: 0;
}
#volume_overlay.hidden {
  display: none;
}
.volume_overlay_item {
  display: inline-block;
}
.volume_overlay_header {
  width: 2em;
  margin-bottom: 0.25em;
  text-align: center;
}
.volume_overlay_value {
  margin: 0 0.5em;
  width: 1em;
  height: 10em;
  background-color: #fff2;
  border-radius: 3px;
}
#zen_panel.hidden {
  display: none;
}
#zen_panel.noop {
  pointer-events: none;
}
#zen_panel {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9999999999;
  width: 25em;
  will-change: transform;
  transition:
    0.2s transform,
    0.2s opacity;
  font-family: HUN;
  color: #fff;
  background-color: #000a;
}
#zen_panel:not(:hover) {
  transform: translateX(24em);
  opacity: 0.75;
  transition:
    1s transform,
    1s opacity;
}
#zen_panel::before {
  content: "ZEN";
  position: absolute;
  display: inline-block;
  padding: 0.3em 0.5em;
  padding-bottom: 0.1em;
  top: 0;
  font-family: HUN;
  color: #fff;
  background-color: #000a;
  right: 100%;
  font-size: 2em;
  clip-path: polygon(
    0% 0%,
    0% calc(100% - 0.5em),
    0.5em 100%,
    100% 100%,
    100% 0
  );
}
#zen_panel_content {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 1em;
  overflow-y: auto;
}
#zen_panel_content h1 {
  margin: 0;
  font-size: 2em;
}
#zen_panel_content h1:not(:first-of-type) {
  margin-top: 1em;
}
.panel_option {
  padding: 0.2em 0;
  cursor: pointer;
  color: #fffa;
}
.panel_option::before {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  border: 1px solid #fff;
  vertical-align: middle;
  margin-right: 0.2em;
  border-radius: 0.4em;
}
.panel_option.selected {
  color: #fff;
}
.panel_option.selected::before {
  background-color: #fff;
}
#zen_panel_content label {
  padding: 0.2em 0;
  margin-top: 0.5em;
  display: block;
}
.panel_input {
  font-family: HUN;
  border: 1px solid #fff;
  background: #000;
  color: #fff;
  outline: 0 !important;
  padding: 0.1em;
  margin-left: 0.2em;
  vertical-align: middle;
  font-size: 1.2em;
}
#performancemeter {
  position: fixed;
  left: 8px;
  top: 8px;
  background: #0008;
  opacity: 0.6;
  color: #fff;
  font-family: HUN;
  padding: 0.5em;
  z-index: 9999999999;
  border-radius: 4px;
  pointer-events: none;
}
#performancemeter.off.production {
  display: none;
}
#performancemeter.collapsed {
  width: 8px;
  height: 8px;
  background: red;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  padding: 0;
}
#performancemeter > h1 {
  color: red;
  font-size: 1.25em;
  margin: 0;
}
#performancemeter.production > h1 {
  color: #0f0;
  font-size: 1.25em;
  margin: 0;
}
#devbuildid {
  color: #fff;
  margin: 0;
  font-family: PFW;
}
#performancemeter.collapsed .meter,
#performancemeter.off .meter {
  display: none;
}
#performancemeter .meter {
  text-align: center;
  border: 1px solid #fff4;
  background-color: #000d;
  display: inline-block;
  min-width: 6.5em;
  border-radius: 4px;
  padding: 0.25em;
  vertical-align: top;
}
#performancemeter .meter.warning {
  border: 1px solid #f004;
  background-color: #200d;
  color: red;
}
#performancemeter .meter.hiddenbydefault:not(.warning) {
  display: none;
}
#performancemeter .meter p {
  margin: 0;
}
#performancemeter .meter h1 > span {
  color: #fff;
  font-size: 2em;
  font-weight: 900;
}
#performancemeter .meter.warning h1 > span {
  color: red;
}
#performancemeter .meter h1 {
  color: #fff4;
  font-size: 1.125em;
  margin: 0;
  font-weight: 100;
}
#performancemeter .meter.warning h1 {
  color: #f004;
}
#performancemeter .meter h2 > span {
  color: #fff;
  font-size: 1.5em;
  font-weight: 900;
}
#performancemeter .meter.warning h2 > span {
  color: red;
}
#performancemeter .meter h2 {
  color: #fff4;
  font-size: 0.8em;
  margin: 0;
  font-weight: 100;
}
#performancemeter .meter.warning h2 {
  color: #f004;
}
#performancemeter #performancemeter_sigliatrip {
  color: red;
  font-size: 1.1em;
  margin-top: 0.5em;
}
body:not(.sigliatrip_idiot) #performancemeter #performancemeter_sigliatrip {
  display: none;
}
#sigliatrip_idiot_message {
  position: fixed;
  z-index: 100000000;
  top: 1rem;
  left: 50vw;
  max-width: 90vw;
  width: 70rem;
  transform: translateX(-50%);
  pointer-events: none;
  color: #ff0063;
  font-family: "C", sans-serif;
  text-align: center;
  background: #000a;
  animation: SigliaTripDisappear 5s 10s forwards;
  border-radius: 8px;
}
#sigliatrip_idiot_message.hidden,
body:not(.sigliatrip_idiot) #sigliatrip_idiot_message {
  display: none;
}
@keyframes SigliaTripDisappear {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
#sigliatrip_idiot_message h1 {
  font-size: 2rem;
  text-shadow: 0 0 4px #ff0063;
  margin: 1rem;
}
#sigliatrip_idiot_message p {
  font-size: 1.1rem;
  text-shadow: 0 0 2px #ff0063;
  margin: 0.5rem;
}
#sigliatrip_idiot_message h2 {
  font-size: 1rem;
  opacity: 0.5;
  margin: 0.5rem;
}
#sigliatrip_idiot_marker {
  position: fixed;
  z-index: 100000000;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  background-color: #1115;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  pointer-events: none;
}
body:not(.sigliatrip_idiot) #sigliatrip_idiot_marker {
  display: none;
}
#activityhack {
  position: fixed;
  z-index: 100000000;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  background-color: red;
  pointer-events: none;
  will-change: transform;
  animation: 1s ActivityHackMove linear infinite;
  opacity: 0;
}
@keyframes ActivityHackMove {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(12px);
  }
}
#sb {
  border: 1px solid #0f0;
  position: fixed;
  pointer-events: none;
  opacity: 0.1;
  z-index: 100000;
}
#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;
}
#network {
  position: fixed;
  left: 16px;
  top: 128px;
  width: 32px;
  overflow-x: hidden;
  z-index: 1000000000;
  pointer-events: none;
}
body.hidenetwork #network {
  display: none;
}
#network img {
  width: 32px;
  height: 32px;
  display: block;
  will-change: transform;
  opacity: 0;
  transition: 2s opacity cubic-bezier(0.17, 0.67, 0.35, 1);
}
#network img.ping {
  opacity: 1;
  transition: 0.1s opacity cubic-bezier(0.55, 0.02, 0.84, 0.6);
}
#network img.anim {
  width: unset;
  transform: translateX(0);
}
#network img.anim.ping {
  animation: 0.5s NetworkImgAnim infinite steps(25, jump-end);
}
@keyframes NetworkImgAnim {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-800px);
  }
}
#prelaunch {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background:
    url("/tetr-res/crystal.png"),
    radial-gradient(farthest-corner, #c71c00 0, #130121 100%) !important;
  color: #fff;
  font-family: HUN;
  z-index: 1000000000;
}
#prelaunch_logo {
  margin-bottom: -2vw;
  height: 15vw;
}
#prelaunch > div {
  width: 100vw;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
#prelaunch_countdown {
  font-weight: 900;
  text-shadow: 0 0 8px #fff;
  color: #fff;
  margin-top: 0;
  margin-bottom: 0;
  font-family: HUN;
  font-size: 10vw;
}
#prelaunch > div > p {
  font-weight: 500;
  text-shadow: 0 0 2px #fff2;
  color: #222;
  margin-top: 0;
}
#prelaunch_osk {
  position: absolute;
  left: 50%;
  top: 100%;
  width: 4em;
  margin-top: -2em;
  transform: translateX(-50%);
}
.prelaunch_button {
  display: inline-block;
  padding: 0.25em 0.5em;
  margin: 0.25em;
  margin-bottom: 4em;
  color: #555;
  background-color: #fffa;
  border-radius: 3px;
  transform: translateY(0) rotate(0.0001deg);
  box-shadow: 0 3px #fff8;
  text-decoration: none;
  transition:
    0.3s color,
    0.3s background-color,
    0.3s box-shadow,
    0.3s transform;
}
.prelaunch_button:hover {
  color: #222;
  background-color: #fff;
  transform: translateY(1px) rotate(0.0001deg);
  box-shadow: 0 2px #fff9;
}
.prelaunch_button:active {
  color: #aaa;
  background-color: #fff;
  transform: translateY(3px) rotate(0.0001deg);
  box-shadow: 0 0 #fffa;
  transition:
    0.1s color,
    0.1s background-color,
    0.1s box-shadow,
    0.1s transform;
}
#prelaunch_countdown .sec {
  opacity: 0.5;
}
#prelaunch.hiding #prelaunch_countdown {
  letter-spacing: 5vw;
  transition: 5s letter-spacing ease-in;
}
#prelaunch.hiding .prelaunch_button {
  transform: translateY(4em) rotate(0.0001deg);
  opacity: 0;
  transition:
    1.25s opacity ease-in,
    1.25s transform ease-in;
}
#prelaunch.hiding #prelaunch_osk {
  transform: translate(-50%, 4em) rotate(0.0001deg);
  opacity: 0;
  transition:
    1.25s opacity ease-in,
    1.25s transform ease-in;
}
#prelaunch.hiding {
  pointer-events: none;
  animation: 7.5s PRELAUNCH forwards cubic-bezier(0.98, 0.01, 0.86, 0.65);
}
@keyframes PRELAUNCH {
  0% {
    filter: contrast(1) brightness(1);
    transform: none;
    opacity: 1;
  }
  0.66% {
    filter: contrast(0) brightness(2);
    transform: none;
    opacity: 1;
  }
  7% {
    filter: contrast(1) brightness(1);
    transform: none;
    opacity: 1;
  }
  66% {
    filter: contrast(0) brightness(2);
    transform: scale(10) rotate(10deg);
    opacity: 1;
  }
  70% {
    filter: contrast(0) brightness(2);
    transform: scale(10) rotate(10deg);
    opacity: 1;
  }
  100% {
    filter: contrast(0) brightness(2);
    transform: scale(10) rotate(10deg);
    opacity: 0;
  }
}
#prelaunch.hidden {
  display: none;
}
#ribbonglide {
  position: fixed;
  pointer-events: none;
  left: 100px;
  top: 100px;
  width: 200px;
  height: 50px;
  z-index: 10000000000;
  outline: 6px ridge #ffb400;
  background: #ffb40022;
  mix-blend-mode: hard-light;
  transition:
    0.1s left cubic-bezier(0.52, 1.42, 0.76, 1.02),
    0.1s top cubic-bezier(0.52, 1.42, 0.76, 1.02),
    0.1s width cubic-bezier(0.52, 1.42, 0.76, 1.02),
    0.1s height cubic-bezier(0.52, 1.42, 0.76, 1.02);
  will-change: transform;
  animation: 1s RibbonGlideGlow ease-in-out alternate infinite;
}
#ribbonglide.input {
  outline: 6px ridge #0060ff;
  background: #0060ff22;
}
#ribbonglide.noclick {
  outline: 6px ridge #ffffff;
  background: #ffffff22;
}
#ribbonglide.no {
  outline: 6px ridge #ff0000;
  background: #ff000022;
  animation: 0.1s RibbonGlideShake linear infinite;
}
.elgh {
  position: absolute;
  pointer-events: none;
}
@keyframes RibbonGlideShake {
  0% {
    transform: translate(-1vw, -1vh);
  }
  10% {
    transform: translate(-0.5vw, 2vh);
  }
  20% {
    transform: translate(0, -0.5vh);
  }
  30% {
    transform: translate(-1vw, 1vh);
  }
  40% {
    transform: translate(2vw, 0);
  }
  50% {
    transform: translate(0.5vw, -1vh);
  }
  60% {
    transform: translate(-1vw, -0.5vh);
  }
  70% {
    transform: translate(-0.5vw, 1.5vh);
  }
  80% {
    transform: translate(1vw, -1vh);
  }
  90% {
    transform: translate(-0.5vw, 0.5vh);
  }
  100% {
    transform: translate(-1vw, -1vh);
  }
}
@keyframes RibbonGlideGlow {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.75;
  }
}
#ribbonglide.hidden,
body:not(.ribbonglide_engaged) #ribbonglide {
  display: none;
}
.bau {
  width: calc(70vw - 10em + 6px) !important;
  margin-left: 6em;
  margin-bottom: 1em;
}
.wbau {
  width: calc(70vw + 2em + 6px) !important;
  margin-left: 0;
  margin-bottom: 1em;
}
.exbau {
  margin-bottom: 4em;
}
@media only screen and (max-width: 1260px) {
  .bau.ceriad_leaderboard {
    display: none;
  }
}
@media only screen and (max-width: 1599px) {
  .ceriad_1600up {
    display: none !important;
  }
}
@media only screen and (min-width: 1600px) {
  .ceriad_1600down {
    display: none !important;
  }
}
.ceriad {
  text-align: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.ceriad.hidden {
  display: none;
}
.ceriad_dummy {
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  cursor: cell;
}
.ceriad_dummy.hidden {
  display: none;
}
.ceriad_dummy * {
  display: none;
}
body.ceriad_disabled .ceriad_dummy {
  display: none !important;
}
body.ceriad_disabled .ceriad {
  display: none !important;
}
.ceriad_dummy.ceriad_billboard {
  background-image: url("https://kagari.moe/outer_assets/ads/970x250.png") !important;
  height: 250px;
}
.ceriad_dummy.ceriad_leaderboard {
  background-image: url("https://kagari.moe/outer_assets/ads/728x90.png") !important;
  height: 90px;
}
.ceriad_dummy.ceriad_mpu {
  background-image: url("https://kagari.moe/outer_assets/ads/300x250.png") !important;
  height: 250px;
}
.ceriad_dummy.ceriad_skyscraper {
  background-image: url("https://kagari.moe/outer_assets/ads/160x600.png") !important;
  width: 160px;
}
#cmpbox {
  z-index: 99999999;
}
.ceriad_bg {
  border-radius: 3px;
  background:
    0 0/50% 100% no-repeat
      repeating-linear-gradient(
        45deg,
        #0004 0,
        #0004 16px,
        #0002 16px,
        #0002 32px
      ),
    100% 0/50% 100% no-repeat
      repeating-linear-gradient(
        -45deg,
        #0004 0,
        #0004 16px,
        #0002 16px,
        #0002 32px
      );
}
.ceriad_bg_d {
  background:
    0 0/50% 100% no-repeat
      repeating-linear-gradient(
        -45deg,
        #0004 0,
        #0004 16px,
        #0002 16px,
        #0002 32px
      ),
    100% 0/50% 100% no-repeat
      repeating-linear-gradient(
        45deg,
        #0004 0,
        #0004 16px,
        #0002 16px,
        #0002 32px
      );
}
.ceriad_bg_r {
  border-radius: 8px;
}
.ceriad_bg_rt {
  border-radius: 8px 8px 3px 3px;
}
.ceriad_bg_rb {
  border-radius: 3px 3px 8px 8px;
}
.ceriad.ceriad_leaderboard {
  min-height: 90px;
}
.ceriad.ceriad_mpu {
  min-height: 250px;
}
.ceriad.ceriad_skyscraper {
  width: 160px !important;
}
.ceriad.ceriad_billboard {
  min-height: 250px;
}
.ceriad.ceriad_billboard > * {
  border: 1px solid #000;
}
.ceriad_mt {
  margin-top: 40px;
}
.ceriad_mb {
  margin-bottom: 40px;
}
.ingame_ceriad_bottom {
  position: fixed;
  bottom: 0;
  left: calc(50vw - 364px);
  width: 728px !important;
  opacity: 1;
  transition:
    0.3s transform,
    0.3s opacity;
}
.ingame_ceriad_bottom.hiding {
  transform: perspective(2000px) rotate3d(1, 0, 0, 75deg) translateY(160px);
  opacity: 0;
  pointer-events: none;
}
div[data-adunit-name] {
  margin: 0 !important;
}
#ceriad-menus-persistent-mpu {
  position: absolute;
  left: 1rem;
  top: 6.5rem;
  z-index: 1;
  transition: 0.2s transform;
  transform: translateY(0);
}
#back:not(.hidden) ~ #ceriad-menus-persistent-mpu,
#ceriad-menus-persistent-mpu.btmlock,
body.electron #exit_electron:not(.hidden) ~ #ceriad-menus-persistent-mpu {
  transform: translateY(3.5rem);
}
@media only screen and (max-width: 1550px) {
  #ceriad-menus-persistent-mpu {
    left: 0;
  }
}
#ceriad-menus-persistent-mpu.shaded {
  z-index: 0;
}
#ceriad-ingame-left_rail {
  position: fixed;
  left: 0;
  top: 50vh;
  transform: translateY(-50%);
}
#ceriad-ingame-right_rail {
  position: fixed;
  right: 0;
  top: 50vh;
  transform: translateY(-50%);
}
#ceriad-ingame-bottom_rail {
  position: fixed;
  bottom: 0;
  left: 50vw;
  transform: translateX(-50%);
}
.qc-cmp-cleanslate {
  background: repeating-linear-gradient(
    -45deg,
    #0007 0,
    #0007 64px,
    #0006 64px,
    #0006 128px
  ) !important;
  animation: 0.3s QCCMPANIMIN ease-out;
}
@keyframes QCCMPANIMIN {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.qc-cmp-cleanslate * {
  font-family: "C", sans-serif !important;
}
#qc-cmp2-ui {
  max-width: unset !important;
  background:
    linear-gradient(to bottom, #0000 0, #fff 6em),
    linear-gradient(166deg, #fcce90, #ffeffa, #bbaeff),
    url("/tetr-res/osk-tiles.png"), #fff !important;
  background-blend-mode: normal, screen, normal, normal !important;
  transform: scaleY(1) translateY(0);
  transform-origin: bottom;
  animation: 0.3s QCCMPUIANIMIN cubic-bezier(0.46, 1.86, 0.33, 0.81);
}
.qc-cmp-cleanslate:not(.css-oc9aes) #qc-cmp2-ui:not(.css-1irhpn0) {
  padding-left: max(2em, calc(50vw - 875px)) !important;
  padding-right: max(2em, calc(50vw - 875px)) !important;
}
@keyframes QCCMPUIANIMIN {
  from {
    transform: perspective(1000px) rotate3d(1, 0, 0, 90deg);
  }
  to {
    transform: perspective(1000px) rotate3d(1, 0, 0, 0deg);
  }
}
#qc-cmp2-ui.noanim {
  animation: none;
}
#qc-cmp2-ui.cmpremind {
  animation:
    50ms QCCMPBOINGUP ease-out,
    0.3s 50ms QCCMPBOINGDOWN cubic-bezier(0.35, 2, 0.28, -0.5);
}
@keyframes QCCMPBOINGUP {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(1.05);
  }
}
@keyframes QCCMPBOINGDOWN {
  from {
    transform: scaleY(1.05);
  }
  to {
    transform: scaleY(1);
  }
}
#qc-cmp2-ui::before {
  content: "";
  height: 4px;
  top: 0;
  background: linear-gradient(172deg, #fcce90, #fd82d4, #654af9);
  z-index: 0;
  filter: blur(16px) saturate(10);
  position: absolute;
  width: unset;
  left: 0;
  right: 0;
}
#qc-cmp2-ui::after {
  content: "";
  height: 4px;
  top: 0;
  background: linear-gradient(172deg, #fcce90, #fd82d4, #654af9);
  z-index: 0;
  position: absolute;
  width: unset;
  left: 0;
  right: 0;
}
@media (min-width: 768px) {
  #qc-cmp2-ui::before {
    top: -8px;
  }
  #qc-cmp2-ui::after {
    top: -4px;
  }
}
.qc-cmp-cleanslate .qc-cmp2-link-inline {
  color: #654af9 !important;
}
.qc-cmp-cleanslate .qc-cmp2-summary-buttons button {
  background-color: #fff !important;
  border: 1px solid #654af9 !important;
  border-radius: 3px !important;
  box-shadow: 0 2px #654af9 !important;
  transform: translateY(0) !important;
  outline-offset: 2px !important;
  outline: 0 solid #fff0 !important;
  transition:
    0.3s transform,
    0.3s background-color,
    0.3s box-shadow,
    0.3s outline !important;
}
.qc-cmp-cleanslate .qc-cmp2-summary-buttons button:focus {
  outline: 2px solid #654af9 !important;
}
.qc-cmp-cleanslate .qc-cmp2-summary-buttons button:hover {
  background-color: #c3baf4 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px #654af9 !important;
}
.qc-cmp-cleanslate .qc-cmp2-summary-buttons button:active {
  background-color: #421480 !important;
  transform: translateY(2px) !important;
  box-shadow: 0 1px #421480 !important;
  transition:
    50ms transform,
    50ms background-color,
    50ms box-shadow,
    50ms outline !important;
}
.qc-cmp-cleanslate .qc-cmp2-summary-buttons button span {
  pointer-events: none;
  font-size: 1.3em;
  font-weight: 500;
  color: #654af9;
  transition: 0.3s color;
}
.qc-cmp-cleanslate .qc-cmp2-summary-buttons button:active span {
  color: #fff;
  transition: 50ms color;
}
.qc-cmp-cleanslate .qc-cmp2-summary-buttons button:last-child {
  background-color: #654af9 !important;
}
.qc-cmp-cleanslate .qc-cmp2-summary-buttons button:last-child:hover {
  background-color: #816afc !important;
}
.qc-cmp-cleanslate .qc-cmp2-summary-buttons button:last-child:active {
  background-color: #421480 !important;
}
.qc-cmp-cleanslate .qc-cmp2-summary-buttons button:last-child span {
  color: #fff !important;
  font-weight: 900 !important;
}
#cutins {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 10000000;
}
.cutin {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 100vw;
}
@keyframes cutin_backer_horizontal_alternate {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-200vw);
  }
}
@keyframes cutin_stretch_in {
  0% {
    transform: translateY(-50%) scaleY(0);
    opacity: 0;
  }
  100% {
    transform: translateY(-50%) scaleY(1);
    opacity: 1;
  }
}
@keyframes cutin_stretch_out {
  0% {
    transform: translateY(-50%) scaleY(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-50%) scaleY(0);
    opacity: 0;
  }
}
.cutin_superlobby {
  height: 15vw;
  animation:
    0.2s cutin_stretch_in ease-out,
    0.2s 3s cutin_stretch_out ease-in forwards;
}
.cutin_superlobby::before {
  height: 15vw;
}
.cutin_superlobby_backer {
  position: absolute;
  top: 2.3vw;
  left: 0;
  width: 200vw;
  animation: 0.1s cutin_backer_horizontal_alternate steps(2, end) infinite;
  transform: translateX(0);
}
.cutin_superlobby p {
  color: #fff;
  font-family: HUN;
  font-weight: 900;
  position: absolute;
  margin: 0;
  left: 0;
  top: 50%;
  width: 100vw;
  text-align: center;
  transform: translateY(-65%) rotate(-2deg);
  opacity: 0;
  font-size: 4vw;
  text-shadow:
    6px 6px 0 #da1717,
    6px 6px 18px #da171788;
  animation:
    0.2s 0.3s cutin_superlobby_content_smash ease-in forwards,
    3s 0.5s cutin_superlobby_content_slowsizedown linear forwards;
}
.cutin_superlobby p span {
  font-size: 14vw;
  display: inline-block;
  transform: translate(0, 15%) rotate(5deg);
  margin-right: 3vw;
  text-shadow:
    10px 10px 0 #da1717,
    10px 10px 18px #da171788;
}
@keyframes cutin_superlobby_content_smash {
  0% {
    transform: translateY(-65%) rotate(-2deg) scale(1.2);
    opacity: 0;
  }
  80% {
    transform: translateY(-65%) rotate(-2deg) scale(0.95);
    opacity: 1;
  }
  100% {
    transform: translateY(-65%) rotate(-2deg) scale(1);
    opacity: 1;
  }
}
@keyframes cutin_superlobby_content_slowsizedown {
  0% {
    transform: translateY(-65%) rotate(-2deg) scale(1);
  }
  100% {
    transform: translateY(-65%) rotate(-2deg) scale(0.95);
  }
}
#social {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    -45deg,
    #000a 0,
    #000a 32px,
    #0009 32px,
    #0009 64px
  );
  z-index: 9999998;
  font-family: "C";
  color: #fff;
  transition: 0.2s opacity;
}
#social.hiding {
  pointer-events: none;
  opacity: 0;
}
#social.hidden {
  display: none;
}
#social_people {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 25em;
  background: #000e;
  border-right: 2px solid #111;
  box-shadow: 0 0 8px #0006;
  box-sizing: border-box;
  transition:
    0.2s transform,
    0.2s width;
  will-change: transform;
}
#social.hiding #social_people {
  transform: translateX(-26em);
}
#social.bulky #social_people {
  transition: 0.2s transform;
}
#social_people::after {
  content: "";
  width: 2px;
  position: absolute;
  left: 100%;
  top: 100%;
  height: 25vh;
  background: linear-gradient(
    to bottom,
    #fff0 0,
    #fff2 45%,
    #fff2 55%,
    #fff0 100%
  );
  will-change: transform;
  transform: translateY(0);
}
#social:not(.hiding):not(.hidden) #social_people::after {
  animation: 0.6s SocialPeopleShine 0.3s ease-in;
}
@keyframes SocialPeopleShine {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(calc(-100vh - 100%));
  }
}
#social_people.collapsed {
  width: 4em;
}
#social_notifications {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 25em;
  background: #000e;
  border-left: 2px solid #111;
  box-shadow: 0 0 8px #0006;
  box-sizing: border-box;
  transition: 0.2s transform;
  will-change: transform;
}
#social.hiding #social_notifications {
  transform: translateX(26em);
}
#social_notifications::after {
  content: "";
  width: 2px;
  position: absolute;
  right: 100%;
  bottom: 100%;
  height: 25vh;
  background: linear-gradient(
    to bottom,
    #fff0 0,
    #fff2 45%,
    #fff2 55%,
    #fff0 100%
  );
  will-change: transform;
  transform: translateY(0);
}
#social:not(.hiding):not(.hidden) #social_notifications::after {
  animation: 0.6s SocialNotificationsShine 1s ease-out;
}
@keyframes SocialNotificationsShine {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(calc(100vh + 100%));
  }
}
.social_bar_header {
  background-color: #000;
  border-bottom: 2px solid #111;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  padding: 0.67em;
  padding-top: 0.8em;
  font-size: 1.5em;
  font-family: HUN;
  font-weight: 900;
  height: 0.8em;
  transition: 0.2s color;
}
#social_notifications .social_bar_header {
  text-align: right;
}
#social_people.collapsed .social_bar_header {
  color: #0000;
}
#social.bulky .social_bar_header {
  transition: none;
}
.social_bar_content_wrapper {
  position: absolute;
  left: 0;
  top: calc(3.4em + 2px);
  right: 0;
  bottom: 0;
  overflow-y: auto;
  will-change: transform;
  scrollbar-color: #333 #111 !important;
  scrollbar-width: thin !important;
}
#social_people .social_bar_content_wrapper {
  direction: rtl;
}
#social_people.collapsed .social_bar_content_wrapper {
  overflow-y: scroll;
}
.social_bar_content {
  direction: ltr;
  will-change: transform;
}
.social_bar_content_offline {
  direction: ltr;
  display: none;
}
.socket_offline .social_bar_content_offline {
  display: block;
}
.socket_offline .social_bar_content_offline ~ * {
  display: none;
}
.socket_offline .social_bar_content {
  display: none;
}
#social_people.collapsed .social_bar_content_offline {
  display: none;
}
#social_comingsoon,
.social_empty,
.social_offline {
  position: absolute;
  left: 50%;
  top: 45vh;
  width: 80%;
  transform: translate(-50%, -50%);
  opacity: 0.8;
  color: #444;
  text-align: center;
  font-size: 1.25em;
  font-style: italic;
}
#social_comingsoon img,
.social_offline img {
  width: 12.5em;
}
.social_empty .also {
  font-size: 0.7em;
  color: #666;
  cursor: pointer;
  margin: 0;
  margin-top: -0.5em;
}
.social_empty .also:hover {
  color: #aaa;
}
.social_empty .also span {
  font-family: HUN;
  font-weight: 900;
}
#social_top {
  position: fixed;
  left: 27.5em;
  right: 27.5em;
  top: 2.5em;
  color: #fff8;
  pointer-events: none;
}
#social_top_clock {
  font-family: HUN;
  font-size: 2.5em;
  font-weight: 900;
  text-align: center;
}
#social_top_clock span {
  color: #fff4;
  font-size: 0.7em;
}
#social_top_sessiontime {
  font-size: 1.1em;
  text-align: center;
}
#social_bottom {
  position: fixed;
  left: 27.5em;
  right: 27.5em;
  bottom: 2.5em;
  color: #fff8;
  pointer-events: none;
}
#social_bottom_online {
  font-family: HUN;
  font-size: 1.5em;
  font-weight: 900;
  text-align: center;
}
#social_bottom_logo {
  text-align: center;
}
#social_bottom_logo img {
  height: 4em;
  opacity: 0.5;
}
.social_notification {
  padding: 0.5em;
  padding-left: 3.5em;
  position: relative;
  border-bottom: 1px solid #111;
  margin: 0;
  min-height: 2.5em;
}
.social_notification[data-action] {
  cursor: pointer;
}
.social_notification[data-action]:hover {
  background-color: #ffffff11;
}
.social_notification.unread::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--pri);
}
.social_notification.unread::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 12em;
  background: linear-gradient(to right, var(--pri) 0, #0000 100%);
  opacity: 0.2;
  z-index: -1;
}
.social_notification .social_notification_img_main {
  position: absolute;
  left: 0.5em;
  top: 0.5em;
  width: 2.5em;
  height: 2.5em;
  border-radius: 3px;
}
.social_notification .social_notification_img_sub {
  position: absolute;
  left: 2.15em;
  top: 2.15em;
  width: 0.85em;
  height: 0.88em;
  border: 2px solid var(--sec);
  border-radius: 3px;
  background: var(--sec);
}
.social_notification h1 {
  margin: 0;
  margin-right: 3em;
  color: var(--pri);
  font-size: 1.15em;
}
.social_notification h2 {
  position: absolute;
  right: 0.625em;
  top: -0.3em;
  font-size: 0.75em;
  color: #fff6;
  font-weight: 500;
}
.social_notification p {
  margin: 0;
  color: #fffc;
  font-size: 0.95em;
}
.social_notification span {
  font-family: HUN;
}
.social_notification b {
  font-weight: 900;
  color: #fff;
}
.social_relationship {
  padding: 0.5em;
  padding-left: 3.5em;
  position: relative;
  border-bottom: 1px solid #111;
  margin: 0;
  height: 2.5em;
  cursor: pointer;
  --pri: #fffe;
}
.social_relationship.focus {
  background-color: #ffffff08;
}
.social_relationship:hover {
  background-color: #ffffff11;
}
.social_relationship.unread:not(.active)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #fff;
}
.social_relationship.active::before {
  content: "";
  position: absolute;
  right: 0.5em;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--pri);
}
.social_relationship.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.5em;
  top: 0;
  bottom: 0;
  background: linear-gradient(to right, #0000 -100%, var(--pri) 100%);
  opacity: 0.5;
  z-index: -1;
}
.social_relationship .social_relationship_img {
  position: absolute;
  left: 0.5em;
  top: 0.5em;
  width: 2.5em;
  height: 2.5em;
  border-radius: 3px;
}
.social_relationship.offline:not(:hover):not(.active) .social_relationship_img {
  filter: grayscale(0.5) brightness(0.5);
}
.social_relationship h1 {
  margin: 0;
  margin-right: 3em;
  color: var(--pri);
  font-size: 1.15em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.social_relationship p {
  margin: 0;
  color: #fffc;
  font-size: 0.95em;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
}
#social_people:not(.collapsed) .social_relationship.cc p {
  overflow: hidden;
}
.social_relationship.cc p {
  font-family: CC;
}
.social_relationship.offline p {
  color: #fff4;
  font-style: italic;
}
.social_relationship p img {
  height: 1em;
  vertical-align: -10%;
  transition: transform 0.2s;
}
#social.bulky .social_relationship p img {
  transition: none;
}
.social_relationship p::before {
  content: "";
  position: absolute;
  display: block;
  width: 1.2em;
  height: 1.2em;
  background-color: #000;
  pointer-events: none;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  left: -1.3em;
  top: -1.88em;
  opacity: 0;
  transition: opacity 0.2s;
}
#social_people.collapsed .social_relationship p::before {
  opacity: 1;
}
#social_people.collapsed p img {
  transform: translate(-1.2em, -1.8em) scale(0.9);
}
#social.bulky .social_relationship p::before {
  transition: none;
}
.social_relationship span {
  font-family: HUN;
}
.social_relationship b {
  font-weight: 900;
  color: #fff;
}
.social_relationship h2 {
  position: absolute;
  right: calc(100% - 3.9em);
  bottom: 0.48em;
  font-size: 0.8em;
  color: #fff;
  background-color: #eb1d1d;
  border: 2px solid #000;
  font-weight: 900;
  border-radius: 3px;
  padding: 0.1em 0.3em;
  padding-top: 0.2em;
  font-family: HUN;
  margin: 0;
  transition: 0.2s transform;
}
#social_people.collapsed .social_relationship h2 {
  transform: translate(0.2em, 0.2em);
}
.social_relationship.active h2,
.social_relationship:not(.unread) h2 {
  display: none;
}
.social_relationship .social_relationship_button_holder {
  position: absolute;
  right: 0.5em;
  top: 0.5em;
  bottom: 0.5em;
  display: inline-block;
  transition: 0.2s opacity;
}
#social_people.collapsed
  .social_relationship
  .social_relationship_button_holder {
  opacity: 0;
  pointer-events: none;
}
.social_relationship .social_relationship_button {
  display: inline-block;
  margin-left: 0.25em;
  border: 1px solid #111;
  background-color: #000a;
  box-sizing: border-box;
  height: 2.5em;
  width: 2.5em;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  transition:
    0.2s border-color,
    0.2s background-color;
}
.social_relationship .social_relationship_button.hidden,
body.inpair .social_relationship .social_relationship_button_snipe,
body.matchmaking .social_relationship .social_relationship_button_snipe,
body:not(.innormalmulti)
  .social_relationship
  .social_relationship_button_invite {
  display: none;
}
.social_relationship .social_relationship_button:hover {
  border-color: #444;
  background-color: #fff1;
}
.social_relationship .social_relationship_button.active {
  border-color: #4aff71;
  background-color: #4aff7166;
  cursor: not-allowed;
}
#social.blinkinvite .social_relationship_button_invite {
  animation: 0.3s BlinkSocialInviteButton linear infinite;
}
@keyframes BlinkSocialInviteButton {
  0% {
    border-color: #111;
    background-color: #000a;
  }
  50% {
    border-color: #fa0;
    background-color: #a13904aa;
  }
  100% {
    border-color: #111;
    background-color: #000a;
  }
}
.social_relationship .social_relationship_button img {
  position: absolute;
  left: calc(0.375em - 1px);
  top: calc(0.375em - 1px);
  height: 1.75em;
  width: 1.75em;
  object-fit: contain;
  transform: translate(0, 0);
  opacity: 0.5;
  transition: 0.2s opacity;
  pointer-events: none;
}
.social_relationship .social_relationship_button:hover img {
  opacity: 1;
}
.social_relationship .social_relationship_button.active img {
  opacity: 0;
  transition: 0.3s opacity;
}
.social_relationship
  .social_relationship_button.social_relationship_button_invite.activated
  img {
  animation: 0.3s SocialRelationshipButtonInvite
    cubic-bezier(0.16, -0.55, 0.54, 0.13);
}
@keyframes SocialRelationshipButtonInvite {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(5em, -3em);
  }
}
.social_relationship
  .social_relationship_button.social_relationship_button_snipe.activated
  img {
  animation: 0.3s SocialRelationshipButtonSnipe cubic-bezier(0.53, 1.68, 0.6, 1);
}
.social_relationship
  .social_relationship_button.social_relationship_button_close.activated
  img {
  animation: 0.3s SocialRelationshipButtonSnipe cubic-bezier(0.53, 1.68, 0.6, 1);
}
@keyframes SocialRelationshipButtonSnipe {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(90deg);
  }
}
.social_relationship .social_relationship_button span {
  position: absolute;
  left: 0;
  right: 0;
  top: 0.4em;
  font-size: 1.5em;
  text-align: center;
  color: #fff;
  transform: scale(0.5);
  opacity: 0;
  transition:
    0.2s opacity,
    0.2s transform;
  pointer-events: none;
}
.social_relationship .social_relationship_button.active:not(.activated) span {
  transform: scale(1);
  opacity: 1;
}
#social.bulky
  #social_people.collapsed
  .social_relationship
  .social_relationship_button,
#social.bulky #social_people.collapsed .social_relationship h1 {
  visibility: hidden;
}
#social.bulky
  #social_people.collapsed
  .social_relationship
  .social_relationship_button {
  display: none;
}
#social_relationships_find {
  width: calc(100% - 0.86em);
  background-color: #ffffff08;
  border: 1px solid #111;
  color: #fffa;
  border-radius: 3px;
  box-sizing: border-box;
  padding: 0.2em 0.5em;
  padding-top: 0.5em;
  margin: 0.43em;
  font-family: HUN;
  font-size: 1.15em;
  text-transform: uppercase;
  outline: 0;
}
#social_relationships_find:focus {
  border: 1px solid #fff6;
}
#social_relationships_find::placeholder {
  color: #fff2;
}
#social_people.collapsed #social_relationships_find {
  padding-left: 0.65em;
  padding-right: 0.35em;
}
#social_relationships_tabs {
  flex-wrap: nowrap;
}
.social_relationships_tab {
  padding: 0.5em;
  font-family: HUN;
  color: #fff6;
  font-weight: 900;
  border-bottom: 2px solid #111;
  cursor: pointer;
  text-align: center;
  margin: 0;
  font-size: 0.9em;
}
.social_relationships_tab.hidden {
  display: none;
}
.social_relationships_tab:hover {
  color: #fffa;
  border-bottom: 3px solid #222;
}
#social_relationships_find:not(.active)
  + #social_relationships_tabs
  .social_relationships_tab.active {
  color: #fff;
  border-bottom: 3px solid #aaa;
}
#social_relationships_find.active
  + #social_relationships_tabs
  .social_relationships_tab:not(:hover) {
  padding-bottom: calc(0.5em + 1px);
}
#social_people.collapsed .social_relationships_tab:not(.active) {
  display: none;
}
.social_relationships_tab p {
  margin: 0;
  display: inline-block;
  pointer-events: none;
}
.social_relationships_tab img {
  height: 0.9em;
  vertical-align: -15%;
  display: none;
  pointer-events: none;
}
#social_people.collapsed .social_relationships_tab p {
  display: none;
}
#social_people.collapsed .social_relationships_tab img {
  display: inline-block;
}
.social_relationships_tab_unread {
  display: inline-block;
  font-size: 0.85em;
  color: #fff;
  background-color: #eb1d1d;
  font-weight: 900;
  border-radius: 3px;
  padding: 0.1em 0.3em;
  padding-top: 0.2em;
  font-family: HUN;
  margin: 0;
  margin-left: 0.3em;
  vertical-align: 10%;
  margin-top: -0.2em;
}
.social_relationships_tab_unread.hidden {
  display: none;
}
#social_people.collapsed .social_relationships_tab_unread {
  display: none;
}
#social_status {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 16em;
  font-size: 0.67em;
  text-align: right;
  padding: 1.1em;
  padding-left: 0;
  font-family: "C";
  color: #666;
  font-weight: 500;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: 0.2s opacity;
}
#social_status:hover {
  background: linear-gradient(to right, #0000 0, #0a0a0a 4em, #111 100%);
  color: #aaa;
}
#social_status.cc {
  font-family: CC;
}
.socket_offline #social_status {
  display: none;
}
#social_people.collapsed #social_status {
  pointer-events: none;
  opacity: 0;
}
#social_status img {
  height: 1em;
  vertical-align: -15%;
}
#social.bulky #social_status {
  transition: none;
}
#social_back {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  left: 0;
  padding-top: 0.75em;
  text-align: center;
  cursor: pointer;
  color: #fff;
  transition: 0.2s opacity;
}
#social_back:hover {
  background: #111;
}
#social_people:not(.collapsed) #social_back {
  pointer-events: none;
  opacity: 0;
}
#social.bulky #social_back {
  transition: none;
}
#social_unread {
  position: absolute;
  top: 2.45em;
  right: calc(100% - 4.3em);
  display: inline-block;
  font-size: 0.55em;
  color: #fff;
  background-color: #eb1d1d;
  font-weight: 900;
  border-radius: 3px;
  padding: 0.1em 0.3em;
  padding-top: 0.2em;
  font-family: HUN;
  margin: 0;
  pointer-events: none;
  transition:
    0.2s opacity,
    0.2s transform;
}
#social_people:not(.collapsed) #social_unread {
  opacity: 0;
  transform: translateX(21em);
}
#social_unread.hidden {
  display: none;
}
#social.bulky #social_unread {
  transition: none;
}
#social_dm {
  position: fixed;
  left: 4em;
  top: 0;
  bottom: 0;
  width: 21em;
  background: #000e;
  border-right: 2px solid #111;
  box-shadow: 0 0 8px #0006;
  box-sizing: border-box;
  transition:
    0.2s transform,
    0.2s width,
    0.2s opacity;
  will-change: transform;
  z-index: -1;
}
#social.hiding #social_dm {
  transform: translateX(-26em);
}
#social.bulky #social_dm {
  transition:
    0.2s transform,
    0.2s opacity;
}
#social_dm::after {
  content: "";
  width: 2px;
  position: absolute;
  left: 100%;
  top: 100%;
  height: 25vh;
  background: linear-gradient(
    to bottom,
    #fff0 0,
    #fff2 45%,
    #fff2 55%,
    #fff0 100%
  );
  will-change: transform;
  transform: translateY(0);
}
#social:not(.hiding):not(.hidden) #social_dm::after {
  animation: 0.6s SocialPeopleShine 0.2s ease-in;
}
#social_people:not(.collapsed) + #social_dm {
  pointer-events: none;
  transform: translateX(-26em);
  opacity: 0;
}
#social_dm .social_bar_content_wrapper {
  direction: rtl;
  top: calc(8.38em + 3px);
  bottom: 2.5em;
}
#social_dm .social_bar_header {
  height: 4.11em;
  border-bottom-width: 3px;
  padding-left: 4.4em;
}
#social_dm_img {
  position: absolute;
  left: 0.33em;
  top: 0.33em;
  height: 3.75em;
  border-radius: 3px;
}
#social_dm_username {
  margin: 0;
}
#social_dm_username.lu {
  font-size: 0.88em;
}
#social_dm_status {
  position: absolute;
  font-size: 0.67em;
  left: 0.5em;
  right: 0.5em;
  bottom: 0.5em;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  font-family: "C";
  font-weight: 500;
}
#social_dm.offline #social_dm_status {
  color: #fff8;
  font-style: italic;
}
#social_dm_status img {
  height: 1em;
  vertical-align: -14%;
}
#social_dm_buttons {
  position: absolute;
  left: 4.3em;
  right: 0.25em;
  top: 1.8em;
  height: 2.1em;
  align-items: flex-start;
}
.social_dm_button {
  color: #fff;
  background-color: #fff2;
  border-radius: 3px;
  font-size: 0.67em;
  text-align: center;
  padding: 0.1em 0.5em;
  padding-top: 0.35em;
  margin: 0.125em !important;
  cursor: pointer;
  transition: 0.3s background-color;
}
.social_dm_button.hidden,
body.inpair #social_dm_button_snipe,
body.matchmaking #social_dm_button_snipe,
body:not(.innormalmulti) #social_dm_button_invite {
  display: none;
}
.social_dm_button:hover {
  background-color: #fff4;
}
.social_dm_button.active {
  background: linear-gradient(
    to right,
    #4aff7166 0,
    #4aff7166 var(--progress),
    #4aff7133 var(--progress),
    #4aff7133 100%
  );
  cursor: not-allowed;
}
.social_dm_button img {
  height: 0.9em;
  vertical-align: middle;
  margin-right: 0.2em;
  filter: grayscale(1) brightness(1.5);
}
#social_dm_input {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2.3em;
  box-sizing: border-box;
  border: none;
  border-top: 2px solid #111;
  background-color: #ffffff08;
  font-family: PFW;
  color: #fff;
  padding: 0 0.5em;
  outline: 0;
  font-size: 1.1em;
}
#social_chat .chat_message h1 {
  padding-left: 0.5em;
}
#social_chat .chat_message:last-child {
  margin-bottom: 0.3em;
}
#social_chat .chat_message p {
  margin-right: 0.5em;
}
#social_chat .chat_message.chat_banner p {
  margin: 0.5em;
}
#social_chat .chat_message .banner_img {
  left: 0.75em;
  top: 0.75em;
}
.notification.snotifydm p {
  font-family: PFW;
  white-space: pre-wrap;
  overflow: hidden;
  overflow-wrap: break-word;
  font-size: 1.05em;
}
.notification.snotifydm p .emote {
  width: 1.3em;
  height: 1.3em;
  vertical-align: middle;
  object-fit: contain;
}
.notification.modalnotify {
  cursor: initial;
}
.notification_button_holder {
  margin-top: 0.25em;
}
.notification_button {
  font-size: 1.15em;
  padding: 0.1em 0.2em;
  padding-top: 0.3em;
  text-align: center;
  background-color: #fff1;
  border: 1px solid #fff6;
  color: #fff;
  border-radius: 3px;
  cursor: pointer;
  margin-bottom: 0;
  margin-right: 0.25em;
  transition:
    0.3s background-color,
    0.3s color,
    0.3s border-color;
  font-family: HUN;
}
.notification_button:hover {
  background-color: #fff3;
  border-color: #fff;
}
.notification_button img {
  height: 0.9em;
  vertical-align: middle;
  margin-right: 0.2em;
  filter: invert(0);
  transition: 0.3s filter;
}
.notification_button.pri {
  background-color: var(--pri);
  border: 1px solid var(--pri);
}
.notification_button.pri:hover {
  background-color: #fff;
  border-color: #fff;
  color: #000;
}
.notification_button.pri:hover img {
  filter: invert(1);
}
.notification_timeoutbar {
  display: block;
  height: 8px;
  margin-top: 0.5em;
  border-radius: 3px;
  overflow: hidden;
  background-color: #0008;
  position: relative;
  animation: 0.6s NotificationTimeoutBarBlink ease-in-out alternate infinite;
}
@keyframes NotificationTimeoutBarBlink {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.8;
  }
}
.notification_timeoutbar::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: var(--pri);
  transform-origin: right;
  animation: var(--time) NotificationTimeoutBar linear forwards;
}
@keyframes NotificationTimeoutBar {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}
.dm_chat_message {
  position: relative;
}
.dm_chat_message[data-time]:hover::after {
  content: attr(data-time);
  position: absolute;
  right: 0;
  bottom: calc(100% + 1px);
  background-color: #191919b0;
  color: #fffc;
  display: inline-block;
  padding: 0.1em 0.5em;
  border-radius: 3px 0 0 0;
  font-size: 0.7em;
  pointer-events: none;
}
.radianceinfo_root {
  border-radius: calc(0.3 * var(--sound-test-size));
  position: absolute;
  background-color: #000a;
  font-size: calc(1.8 * var(--sound-test-size));
  color: #fff;
  font-family: PFW, sans-serif;
  padding: calc(2 * var(--sound-test-size));
  line-height: calc(2.1 * var(--sound-test-size));
  pointer-events: none;
}
.zenithsongdebug_root {
  --sound-test-size: 10px;
  right: 20rem;
  bottom: 2rem;
  width: calc(40 * var(--sound-test-size));
  height: calc(100 * var(--sound-test-size));
}
.zenithsongdebug_root .col {
  width: calc(17 * var(--sound-test-size));
  padding: calc(1 * var(--sound-test-size));
  float: left;
}
.zenithsongdebug_root .full {
  width: calc(34 * var(--sound-test-size));
  padding: calc(1 * var(--sound-test-size));
  float: left;
}
.zenithsongdebug_root .loadblock {
  height: calc(8 * var(--sound-test-size));
}
.zenithsongdebug_root .cacheblock {
  height: calc(45 * var(--sound-test-size));
}
.zenithsongdebug_root .memblock {
  height: calc(20 * var(--sound-test-size));
}
.soundtest_root {
  --sound-test-size: 12px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(80 * var(--sound-test-size));
  height: calc(50 * var(--sound-test-size));
}
.radianceinfo_root h1,
.soundtest_root h2,
.soundtest_root h3 {
  margin: 0 0 calc(0.7 * var(--sound-test-size)) 0;
}
.radianceinfo_root .hidden {
  display: none;
}
.radianceinfo_root .text-entry {
  opacity: 0.5;
}
@keyframes soundtestflash {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.75;
  }
}
.radianceinfo_root .darkened {
  color: #bbb;
}
.radianceinfo_root .flash {
  animation: soundtestflash 0.3s ease-in-out infinite alternate-reverse;
}
.radianceinfo_root .progress-container {
  width: 5em;
  height: 0.5em;
  background: #000;
  overflow: hidden;
  position: relative;
  margin: 0 0 calc(0.1 * var(--sound-test-size)) 0;
}
.radianceinfo_root .progress-bar {
  height: 100%;
  background: #fff;
}