/* mobile*/
:root:has(body[data-is-mobile="true"]) {
  --ui-scale: var(--mobile-ui-scale-setting);
  font-size: calc(var(--ui-scale) * 16 * min(var(--fixed-vh) * 100 / 1080, var(--fixed-vw) * 100 / 2000)) !important;
}
:root {
  --fixed-vh: 1vh;
  --fixed-vw: 1vw;
  --fixed-vd: hypot(1vw, 1vh);

  --ui-scale-setting: 1;
  --mobile-ui-scale-setting: 1;
  --ui-scale: var(--ui-scale-setting);

  --in-game-hud-scaling: 1;
  --ui-to-hud-scaling: 1;

  --turnstile-scale: 1;

  --animation-duration-factor: 1;

  font-size: calc(var(--ui-scale) * 16 * min(var(--fixed-vh) * 100 / 1080, var(--fixed-vw) * 100 / 1300));

  /*--outline-thickness: 0.25rem;*/
  --outline-thickness: 0.375rem;
  --border-thickness: 0.4375rem;

  --ui-color-1: color-mix(in srgb, var(--theme-color-uiColor1), #ffffff 20%);
  --ui-color-2: color-mix(in srgb, var(--theme-color-uiColor2), #ffffff 20%);
  --ui-color-3: color-mix(in srgb, var(--theme-color-uiColor3), #ffffff 20%);
  --ui-color-4: color-mix(in srgb, var(--theme-color-uiColor4), #ffffff 20%);
  --ui-color-5: color-mix(in srgb, var(--theme-color-uiColor5), #ffffff 20%);
  --ui-color-6: color-mix(in srgb, var(--theme-color-uiColor6), #ffffff 20%);
  --ui-color-7: color-mix(in srgb, var(--theme-color-uiColor7), #ffffff 20%);
  --ui-color-8: color-mix(in srgb, var(--theme-color-uiColor8), #ffffff 20%);
  --ui-color-9: color-mix(in srgb, var(--theme-color-uiColor9), #ffffff 20%);
  --ui-color-10: color-mix(in srgb, var(--theme-color-uiColor10), #ffffff 20%);

  --ui-color-desaturated-1: color-mix(in srgb, var(--ui-color-1), #444444 27%);
  --ui-color-desaturated-2: color-mix(in srgb, var(--ui-color-2), #444444 27%);
  --ui-color-desaturated-3: color-mix(in srgb, var(--ui-color-3), #444444 27%);
  --ui-color-desaturated-4: color-mix(in srgb, var(--ui-color-4), #444444 27%);
  --ui-color-desaturated-5: color-mix(in srgb, var(--ui-color-5), #444444 27%);
  --ui-color-desaturated-6: color-mix(in srgb, var(--ui-color-6), #444444 27%);
  --ui-color-desaturated-7: color-mix(in srgb, var(--ui-color-7), #444444 27%);
  --ui-color-desaturated-8: color-mix(in srgb, var(--ui-color-8), #444444 27%);
  --ui-color-desaturated-9: color-mix(in srgb, var(--ui-color-9), #444444 27%);
  --ui-color-desaturated-10: color-mix(in srgb, var(--ui-color-10), #444444 27%);

  --discord-color: #5865F2;
  --crazy-games-color: #6842FF;
  --google-color: #ff4d4d;

  --theme-color-textFillColor: #ffffff;
  --theme-color-textOutlineColor: #000000;


  --text-outline-color: var(--theme-color-textOutlineColor);
  --text-outline-width: 0.2rem; /* 3.2px on 1080p */
  --text-outline-width: 0.125rem; /* 2px on 1080p */
  --d-text-outline-width: 1rem; /* 2px on 1080p */

  /*
  to generate shadow:
  const result = []
  for (let gridX = 0; gridX < 5; gridX++) {
      for (let gridY = 0; gridY < 5; gridY++) {
          const extremities = [0,4]
          if (extremities.includes(gridX) && extremities.includes(gridY)) continue
          result.push(`calc(var(--text-outline-width) * ${gridX * 0.5 - 1}) calc(var(--text-outline-width) *  ${gridY * 0.5 - 1}) 0 var(--text-outline-color)`)
      }
  }
  console.log(result.join(",\n") + ";")

  */

  /* circle 16 */
  --text-shadow:
    calc(var(--text-outline-width) * 1) calc(var(--text-outline-width) *  0) 0 var(--text-outline-color),
    calc(var(--text-outline-width) * 0.8662109375) calc(var(--text-outline-width) *  0.5) 0 var(--text-outline-color),
    calc(var(--text-outline-width) * 0.5) calc(var(--text-outline-width) *  0.8662109375) 0 var(--text-outline-color),
    calc(var(--text-outline-width) * 0) calc(var(--text-outline-width) *  1) 0 var(--text-outline-color),
    calc(var(--text-outline-width) * -0.5) calc(var(--text-outline-width) *  0.8662109375) 0 var(--text-outline-color),
    calc(var(--text-outline-width) * -0.8662109375) calc(var(--text-outline-width) *  0.5) 0 var(--text-outline-color),
    calc(var(--text-outline-width) * -1) calc(var(--text-outline-width) *  0) 0 var(--text-outline-color),
    calc(var(--text-outline-width) * -0.8662109375) calc(var(--text-outline-width) *  -0.5) 0 var(--text-outline-color),
    calc(var(--text-outline-width) * -0.5) calc(var(--text-outline-width) *  -0.8662109375) 0 var(--text-outline-color),
    calc(var(--text-outline-width) * 0) calc(var(--text-outline-width) *  -1) 0 var(--text-outline-color),
    calc(var(--text-outline-width) * 0.5) calc(var(--text-outline-width) *  -0.8662109375) 0 var(--text-outline-color),
    calc(var(--text-outline-width) * 0.8662109375) calc(var(--text-outline-width) *  -0.5) 0 var(--text-outline-color),
    calc(var(--text-outline-width) * 1) calc(var(--text-outline-width) *  0) 0 var(--text-outline-color),
    calc(var(--text-outline-width) * 0.8662109375) calc(var(--text-outline-width) *  0.5) 0 var(--text-outline-color),
    calc(var(--text-outline-width) * 0.5) calc(var(--text-outline-width) *  0.8662109375) 0 var(--text-outline-color),
    calc(var(--text-outline-width) * 0) calc(var(--text-outline-width) *  1) 0 var(--text-outline-color);

}

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

body {
  position: fixed;
  margin: 0;
  height: calc(var(--fixed-vh) * 100);
  width: 100%;
  background: black;

  font-family: "Ubuntu", sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--theme-color-textFillColor);
  /*text-shadow: var(--text-shadow), 0 0 2rem #00000088;*/
  text-shadow: var(--text-shadow);
  overflow: hidden;
  user-select: none;
}

#root {
  display: contents;
}

.screen {
  position: fixed;
  inset: 0;
  height: calc(var(--fixed-vh) * 100);
  width: calc(var(--fixed-vw) * 100);
  overflow: hidden;
  z-index: 20;
}


#dimmer {
  pointer-events: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 8;
  opacity: 0;
  transition: opacity calc(300ms * var(--animation-duration-factor)); 
}


#login-dimmer {
  pointer-events: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 1000000;
  opacity: 100;
  display: grid;
  place-content: center;
  font-size: 3rem;
  padding: 5rem;
  text-align: center;
}

#dimmer[data-is-active="true"] {
  opacity: 1;
}

#canvas {
  position: fixed;
  inset: 0;
  height: calc(var(--fixed-vh) * 100);
  width: calc(var(--fixed-vw) * 100);
  left: var(--canvas-offset-x);
  top: var(--canvas-offset-y);
}

body {
  touch-action: none;
}

.loading-screen {
  position: fixed;
  inset: 0;
  d-background: black;
  display: grid;
  place-content: center;
  font-size: 5rem;
  z-index: 100000;
  transition: opacity calc(300ms * var(--animation-duration-factor)) ease;
}
.loading-screen.fade {
  opacity: 0;
}

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

#background-image {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 9;
  opacity: 0;
  transition: opacity calc(100ms * var(--animation-duration-factor));
  filter: brightness(0.45);
  --parallax-x: 0;
  --parallax-y: 0;
}
#background-image[data-is-active="true"] {
  opacity: 1;
}

#background-image > * {
  position: absolute;
  inset: 0;
}

#background-image > .upper-layer {
  background: var(--image-src) center center / cover, transparent;
  transform: scale(1.07) translate(calc(var(--parallax-x) * -3vw), calc(var(--parallax-y) * -3  * var(--fixed-vh)));
}
#background-image > .lower-layer {
  background: var(--image-src) center center / cover, black;
  transform: scale(1.03) translate(calc(var(--parallax-x) * -1vw), calc(var(--parallax-y) * -1 * var(--fixed-vh)));
}
#background-image[data-show-parallax="false"] > * {
  transform: scale(1.07);
}

#home-screen {
    position: relative;
    display: grid;
    place-content: center;
    font-family: "Ubuntu", sans-serif;
    font-size: 2rem;
}

#home-screen[data-is-hiding="true"] {
    pointer-events: none;
    touch-action: none;
}

#home-screen > .center-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: home-screen-show calc(1000ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transform: scale(0.8);
    isolation: isolate;
    width: min-content;
}
body[data-is-mobile="true"] #home-screen > .center-section:has(.party-panel) {
    margin-top: 3rem;
    animation: mobile-party-home-screen-show calc(1000ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes home-screen-show {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: none;
        opacity: 1;
    }
}
@keyframes mobile-party-home-screen-show {
    from {
        transform: scale(0.7);
        opacity: 0;
    }
    to {
        transform: scale(0.95);
        opacity: 1;
    }
}
#home-screen[data-is-hiding="true"] > .center-section {
    animation: home-screen-hide calc(200ms * var(--animation-duration-factor)) linear forwards;
}
@keyframes home-screen-hide {
    from {
        transform: none;
        opacity: 1;
    }
    to {
        transform: scale(1.1);
        opacity: 0;
    }
}


#home-screen > .center-section > .logo {
    height: 12rem;
    margin-bottom: 3.5rem;
}
body[data-is-mobile="true"] #home-screen > .center-section > .logo {
    margin-bottom: 1.5rem;
}

#home-screen > .center-section > .lobby-selector {
    position: relative;
    display: grid;
    
    grid-template-columns: 26rem 22rem;
    grid-template-rows: 5rem 5.5rem;

    grid-template-columns: 22rem 22rem;
    grid-template-rows: 5rem 5rem;

    gap: 1rem;
    place-content: center;
    isolation: isolate;
    z-index: 2;
}

body[data-is-mobile="true"] #home-screen > .center-section:has(.party-panel) > .lobby-selector {
    gap: 0.5rem;
    grid-template-rows: 5rem 4rem;
}


#home-screen > .center-section > .lobby-selector > .loading-text {
    grid-column: span 2;
    grid-row: span 2;
    display: grid;
    place-content: center;
    font-size: 2.5rem;
}
#home-screen > .center-section > .lobby-selector > .turnstile {
    grid-column: span 2;
    grid-row: span 2;
    display: grid;
    place-content: center;
    transform: scale(calc(2 * var(--turnstile-scale) * var(--ui-scale) * var(--ui-scale-setting)));
}

#home-screen > .center-section > .lobby-selector > .ban-info {
    grid-column: span 2;
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    place-content: center;
    font-size: 1.75rem;
    background: #00000044;
    border-radius: 0.5rem;
}
#home-screen > .center-section > .lobby-selector > .ban-info > .title {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}


#home-screen > .center-section[data-is-dimmed="true"] .dimmable {
    opacity: 0.5;
}


#home-screen > .center-section > .lobby-selector[data-is-greyed-by-party="true"] > .gamemode-selector,
#home-screen > .center-section > .lobby-selector[data-is-greyed-by-party="true"] > .region-selector,
#home-screen > .center-section > .lobby-selector[data-is-greyed-by-party="true"] > .lobby-grid-button {
    opacity: 0.5;
}



#home-screen > .center-section > .lobby-selector > .lobby-grid-button {
    display: grid;
    position: absolute;
    left: calc(100% + 1rem);
    width: 5rem;
    height: 5rem;
    place-content: center;
    /*border-radius: 1rem;*/
}
#home-screen > .center-section > .lobby-selector > .lobby-grid-button > img {
    width: 2.75rem;
}

#home-screen > .center-section > .lobby-selector > .create-party-button {
    display: grid;
    position: absolute;
    left: calc(100% + 1rem);
    bottom: 0;
    width: 5rem;
    height: 5rem;
    place-content: center;
    /*border-radius: 1rem;*/
}
#home-screen > .center-section > .lobby-selector > .create-party-button > img {
    width: 2.75rem;
}





#home-screen > .center-section > .lobby-selector > .gamemode-selector,
#home-screen > .center-section > .lobby-selector > .region-selector {
    width: 100%;
}
body[data-is-mobile="true"] #home-screen > .center-section > .lobby-selector > .gamemode-selector[data-is-active="true"],
body[data-is-mobile="true"] #home-screen > .center-section > .lobby-selector > .region-selector[data-is-active="true"] {
    transform: translateY(calc(max(var(--child-count) - 4.5, 0) * -5rem));
}

#home-screen > .center-section > .lobby-selector > .region-selector {
    width: 100%;
}


#home-screen > .center-section > .lobby-selector > .name-input-location {
    grid-column: span 3;
    grid-column: span 2;
    height: 100%;
    position: relative;
    isolation: isolate;
}

#home-screen > .center-section > .lobby-selector > .name-input-location > .name-input {
    position: absolute;
    inset: 0;
    border-radius: 0.5rem;
    background: #dddddd;
    border: var(--border-thickness) solid color-mix(in srgb, #dddddd, black 50%);
        
    /*text-shadow: var(--text-shadow), 0 0 2rem black;*/
    font-family: "Ubuntu", sans-serif;
    text-shadow: var(--text-shadow);
    
    pointer-events: none;
    transform: scale(0.75);
    opacity: 0;

    transition:
        box-shadow calc(300ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1),
        border calc(300ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1),
        transform calc(700ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1),
        opacity calc(700ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1);
}
#home-screen > .center-section > .lobby-selector > .name-input-location > .name-input[data-is-active="true"] {
    pointer-events: all;
    opacity: 1;
    transform: scale(1);
}

#home-screen > .center-section > .lobby-selector > .name-input-location > .name-input > input {
    position: absolute;
    inset: calc(-1 * var(--border-thickness));
    vertical-align: middle;
    width: calc(100% + 2 * var(--border-thickness));
    height: calc(100% + 2 * var(--border-thickness));
    
    border: none;
    padding: none;
    outline: none;
    text-align: center;
    background: none;
    color: transparent;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 0.125rem;
    font-family: "Ubuntu", sans-serif;
    font-weight: 600;
    caret-color: black;
    border-radius: inherit;
    isolation: isolate;
    
    transition:
        box-shadow calc(300ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1),
        border calc(300ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1);
}

#home-screen > .center-section > .lobby-selector > .name-input-location > .name-input > .visible-text {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    pointer-events: none;
    white-space: pre;

    d-display: none;
    
}
#home-screen > .center-section > .lobby-selector > .name-input-location > .name-input[data-has-custom-color="true"] > .visible-text {
    color: var(--text-color);
    --text-outline-color: color-mix(in srgb, var(--text-color), black 75%);
    /* circle 16 */
    text-shadow:
        calc(var(--text-outline-width) * 1) calc(var(--text-outline-width) *  0) 0 var(--text-outline-color),
        calc(var(--text-outline-width) * 0.8662109375) calc(var(--text-outline-width) *  0.5) 0 var(--text-outline-color),
        calc(var(--text-outline-width) * 0.5) calc(var(--text-outline-width) *  0.8662109375) 0 var(--text-outline-color),
        calc(var(--text-outline-width) * 0) calc(var(--text-outline-width) *  1) 0 var(--text-outline-color),
        calc(var(--text-outline-width) * -0.5) calc(var(--text-outline-width) *  0.8662109375) 0 var(--text-outline-color),
        calc(var(--text-outline-width) * -0.8662109375) calc(var(--text-outline-width) *  0.5) 0 var(--text-outline-color),
        calc(var(--text-outline-width) * -1) calc(var(--text-outline-width) *  0) 0 var(--text-outline-color),
        calc(var(--text-outline-width) * -0.8662109375) calc(var(--text-outline-width) *  -0.5) 0 var(--text-outline-color),
        calc(var(--text-outline-width) * -0.5) calc(var(--text-outline-width) *  -0.8662109375) 0 var(--text-outline-color),
        calc(var(--text-outline-width) * 0) calc(var(--text-outline-width) *  -1) 0 var(--text-outline-color),
        calc(var(--text-outline-width) * 0.5) calc(var(--text-outline-width) *  -0.8662109375) 0 var(--text-outline-color),
        calc(var(--text-outline-width) * 0.8662109375) calc(var(--text-outline-width) *  -0.5) 0 var(--text-outline-color),
        calc(var(--text-outline-width) * 1) calc(var(--text-outline-width) *  0) 0 var(--text-outline-color),
        calc(var(--text-outline-width) * 0.8662109375) calc(var(--text-outline-width) *  0.5) 0 var(--text-outline-color),
        calc(var(--text-outline-width) * 0.5) calc(var(--text-outline-width) *  0.8662109375) 0 var(--text-outline-color),
        calc(var(--text-outline-width) * 0) calc(var(--text-outline-width) *  1) 0 var(--text-outline-color);
}





#home-screen > .center-section > .lobby-selector > .name-input-location > .name-input > input:focus {
    box-shadow:
        inset 0 0 0 0.3125rem white,
        inset 0 0 0 0.5625rem #000000,
        0 0 0 0.25rem #000000;
}
#home-screen > .center-section > .lobby-selector > .name-input-location > .name-input > input::placeholder {
    color: black;
    text-shadow: none;
    opacity: 0.5;
}


/* #region Connecting Text */
#home-screen > .center-section > .lobby-selector > .name-input-location > .connecting-text {
    position: absolute;
    inset: 0;
    display: none;
    place-content: center;
    z-index: 2;
}
#home-screen > .center-section > .lobby-selector > .name-input-location > .connecting-text[data-is-active="true"]{
    display: grid;
}
/* #endregion */

/* #region Disconnected Warning */
#home-screen > .center-section > .lobby-selector > .name-input-location > .disconnected-warning {
    position: absolute;
    inset: 0;
    pointer-events: none;
    transform: scale(0.75);
    opacity: 0;
    transition:
        transform calc(700ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1),
        opacity calc(700ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1);
}
#home-screen > .center-section > .lobby-selector > .name-input-location > .disconnected-warning > * {
    place-content: center;
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
}
#home-screen > .center-section > .lobby-selector > .name-input-location > .disconnected-warning > * > .text {
    font-size: 2rem;
}
#home-screen > .center-section > .lobby-selector > .name-input-location > .disconnected-warning[data-is-active="true"] {
    pointer-events: all;
    opacity: 1;
    transform: scale(1);
}
/* #endregion */

/* #region ads */

#home-screen > .center-section > .ad-wrapper {
    margin-bottom: 1.75rem;
    margin-top: 1rem;
}
#home-screen > .center-section:has(.party-panel) > .ad-wrapper {
    display: none;
}

#home-screen > .center-section > .ad-wrapper > .placeholder-ad {
    width: 24rem;
    height: 21.5rem;
    background: #1c1c1c;
    border-radius: 0.5rem;
}

/* mobile*/
body[data-is-mobile="true"] #home-screen > .center-section > .ad-wrapper {
    display: none;
}

/* #endregion */

/* #region Play Button */

#home-screen > .center-section > .play-button-row > .play-button {
    margin-top: 1rem;
    height: 4rem;
    width: 20rem;
    place-content: center;
    /* border-radius: 1rem */
}
#home-screen > .center-section > .play-button-row > .play-button.error {
    width: auto;
}
/* mobile*/
body[data-is-mobile="true"] #home-screen > .center-section > .play-button-row > .play-button {
    height: 5rem;
    place-content: center;
    /* border-radius: 1rem */
}
body[data-is-mobile="true"] #home-screen > .center-section:has(.party-panel) > .play-button-row > .play-button {
    height: 3.5rem;
    place-content: center;
    /* border-radius: 1rem */
}
#home-screen > .center-section > .play-button-row > .play-button > .text {
    padding-bottom: 0.125rem;
    font-size: 2rem;
}
#home-screen > .center-section > .play-button-row > .play-button.error > .text {
    font-size: 1.75rem;
}

/* #endregion */

#home-screen > .center-section > .party-button {
    margin-top: 0.75rem;
}
#home-screen > .center-section > .sandbox-browser-button {
    margin-top: 0.75rem;
    width: 18rem;
    justify-content: center;
}
#home-screen > .center-section > .no-party-padding {
    margin-top: 1.75rem;
}




#home-screen > .center-section > .lobby-selector > .name-input-location > .name-input > .color-input {
    position: absolute;
    z-index: 10;
    width: 3.25rem;
    height: 3.25rem;
    inset: calc(2.5rem - var(--border-thickness) - 3.25rem / 2);
    border-radius: 0.5rem;
    display: flex;
    overflow: hidden;
    transition: width 300ms ease;
}
#home-screen > .center-section > .lobby-selector > .name-input-location > .name-input > .color-input:hover,
#home-screen > .center-section > .lobby-selector > .name-input-location > .name-input > .color-input:has(:focus) {
    width: 9.5rem;
}

#home-screen > .center-section > .lobby-selector > .name-input-location > .name-input > .color-input > .preview {
    position: relative;
    height: 100%;
    aspect-ratio: 1 / 1;
    background: var(--color);
    /*border-radius: 0.75rem 0 0 0.75rem;*/
    border-radius: 0.5rem 0 0 0.5rem;
    border: var(--border-thickness) solid color-mix(in srgb, var(--color), black 50%);
}
#home-screen > .center-section > .lobby-selector > .name-input-location > .name-input > .color-input > .preview > input {
    position: absolute;
    inset: calc(-1 * var(--border-thickness));
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
#home-screen > .center-section > .lobby-selector > .name-input-location > .name-input > .color-input > input {
    background: none;
    border: none;
    width: 6.25rem;
    font-family: monospace !important;
    font-size: 1.5rem;
    padding-left: 0.5rem;
    padding-bottom: 0.125rem;
    font-weight: 600;
    outline: none;
    /*border-radius: 0 0.75rem 0.75rem 0;*/
    border-radius: 0 0.5rem 0.5rem 0;
    border: var(--border-thickness) solid color-mix(in srgb, var(--ui-color-9), black 50%);
    background: var(--ui-color-9);
    border-left-width: 0;
}
#home-screen > .center-section > .lobby-selector > .name-input-location > .name-input > .color-input > input:focus {
    background: #ffffff88;
}
.updated-standard-button {
    --color: var(--ui-color-9);
    background: var(--color);
    height: 4rem;
    /*border-radius: 0.75rem;*/
    border-radius: 0.5rem;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    isolation: isolate;
    padding: 0 calc(0.875rem - var(--border-thickness));
    
    font-family: "Ubuntu", sans-serif;
    font-size: 2rem;
    font-weight: 600;
    color: inherit;
    /*text-shadow: var(--text-shadow), 0 0 2rem black;*/
    text-shadow: var(--text-shadow);
    outline: none;
    border: none;

    /*box-shadow: inset 0 0 0 0.25rem rgba(0,0,0,0.5);*/
    d-box-shadow: inset 0 0 0 0.375rem rgba(0,0,0,0.5);
    cursor: pointer;
    user-select: none;
    background-clip: padding-box;
    cursor: default;

    transition: filter 150ms;
    border: var(--border-thickness) solid color-mix(in srgb, var(--color), black 50%);

    box-shadow: inset 0 calc(100%) 0 0 black;
    
}
.updated-standard-button::after {
    position: absolute;
    content: "";
    inset: 70% 0 0 0;
    background: rgba(0,0,0,0.1);
}
.updated-standard-button[data-is-clickable="true"]:active::after {
    inset: calc(70% + 0.125rem) 0 0 0;
}


.updated-standard-button[data-is-clickable="true"] {
    cursor: pointer;
}

.updated-standard-button[data-is-clickable="true"]:hover:not(:active) {
    filter: brightness(115%);
}
.updated-standard-button[data-is-clickable="true"]:active {
    /*box-shadow: inset 0 0.125rem 0 0.25rem rgba(0,0,0,0.5);*/
    d-box-shadow: inset 0 0.125rem 0 0.375rem rgba(0,0,0,0.5);
}
.updated-standard-button[data-is-clickable="true"]:active > * {
    transform: translateY(0.125rem);
}

/*
.updated-standard-button:after {
    position: absolute;
    content: "";
    width: 50%;
    inset: 0 auto 0 calc(-50% - 1rem);
    background: linear-gradient(to right, white 0%, white 60%, transparent 60%, transparent 74%, white 75%, white 100%);
    transform: skewX(20deg);
    opacity: 0;
}

.updated-standard-button[data-is-active="true"]::after {
    animation: button-hover-animation 400ms ease forwards;
    opacity: 75%;
}

*/
@keyframes button-hover-animation {
    to {
        inset: 0 auto 0 calc(100% + 1rem);
    }
}

.updated-standard-button[data-is-flashing="true"] {
    d-animation: standard-button-flash 800ms linear infinite;
}
@keyframes standard-button-flash {
    0% {filter: brightness(120%);}
    50% {filter: brightness(70%);}
    100% {filter: brightness(120%);}
}
.updated-standard-button[data-is-flashing="true"]::after {
    position: absolute;
    content: "";
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--color);
    animation: standard-button-flash-around 1600ms ease infinite;
    filter: blur(0.25rem);
    pointer-events: none;
}
@keyframes standard-button-flash-around {
    0% {
        opacity: 0;
        inset: 0rem;
    }
    10% {
        opacity: 1;
    }
    60% {
        opacity: 0;
        inset: -1rem -2rem;
    }
    100% {
        opacity: 0;
        inset: -1rem -2rem;
    }
}





.updated-standard-button > img {
    width: 2.25rem;
    /*filter: drop-shadow(0 0 1.5rem #000000aa)*/
}

.updated-standard-button > .medium-text {
    font-size: 1.5rem;
    padding-bottom: 0.125rem;
    padding: 0 0.25rem
}
.updated-standard-button > .big-text {
    font-size: 1.75rem;
    padding: 0 0.25rem;
}.notification-system {
    position: fixed;
    z-index: 200;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 35rem;
    display: flex;
    flex-direction: column-reverse;
    padding: 0.5rem;
    gap: 0.25rem;
}

.notification-system > .notification {
    background: linear-gradient(#aaaaaa44, #88888844), var(--color);
    isolation: isolate;
    box-shadow:
        inset 0 0 0 0.25rem rgba(0,0,0,0.5),
        0 0.25rem 1rem #00000088;
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
    padding: 0.75rem 1rem 1rem 1rem;
    animation: notification-in calc(500ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes notification-in {
    from {
        opacity: 0.5;
        transform: scale(0.5) ;
    }
}

.notification-system > .notification > .title {
    font-size: 1.75rem;
}

.notification-system > .notification > .content {
    padding-left: 0.125rem;
}

.notification-system > .notification > .buttons {
    display: flex;
    margin-top: 1rem;
    gap: 0.5rem;
}

.notification-system > .notification > .buttons > * {
    flex-grow: 1;
    height: 3.5rem !important;
    justify-content: center;
}.login-menu-popup-notice {
    position: fixed;
    inset: 0;
    width: calc(var(--fixed-vw) * 100);
    height: calc(var(--fixed-vh) * 100);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #00000088;
    backdrop-filter: blur(1rem);
    z-index: 200;
    text-align: center;

}

.login-menu-popup-notice > .title {
    font-size: 4rem;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.login-menu-popup-notice > .button {
    margin-top: 2rem;
    height: 3.5rem;
}
.keybinds-menu-click-blocker {
    position: fixed;
    inset: 0;
    width: calc(var(--fixed-vw) * 100);
    height: calc(var(--fixed-vh) * 100);
    display: grid;
    place-content: center;
    font-size: 5rem;
    background: #00000088;
    backdrop-filter: blur(1rem);
    z-index: 200;
}


.popup-wrapper {
    position: fixed;
    inset: 0;
    height: calc(var(--fixed-vh) * 100);
    width: calc(var(--fixed-vw) * 100);
    overflow: hidden;
    z-index: 100;
    transition: opacity 300ms ease;
}

.popup-wrapper[data-apply-opacity="true"] {
    opacity: var(--theme-slider-menuOpacity);
}

.popup-wrapper.center,
.popup-wrapper.center-wide,
.popup-wrapper.center-small {
    place-content: center;
    display: grid;
}

.popup-wrapper.left {
    display: flex;
    /*opacity: 0.75;*/
}
.popup-wrapper.left-in-game-overlay {
    display: flex;
    align-items: start;
}

body[data-side-menu-location="right"] .popup-wrapper.left {
    justify-content: end;
}


.popup-wrapper[data-current-state="hiding"],
.popup-wrapper[data-current-state="inactive"] {
    pointer-events: none;
    user-select: none;
    z-index: 99;
}


.popup-wrapper > .popup {
    /*
    background: #88888888;
    backdrop-filter: blur(2rem);
    */
    background: var(--theme-color-uiColor10);
    /*background: color-mix(in srgb, var(--theme-color-uiColor10), transparent 25%);*/
    box-shadow: 
        0 0 0 0.375rem rgba(0,0,0,0.375),
        0 0 0 0.375rem var(--theme-color-uiColor10),
        rgba(0, 0, 0, 0.5) 0px 0.5rem 3rem 0.375rem;

    /*border-radius: 1rem;*/
    border-radius: 0.5rem;
    position: relative;
}

.popup-wrapper.center > .popup {
    width: min(80rem, calc(var(--fixed-vw) * 100 - 10rem));
    height: var(--popup-height);
    --popup-height: calc(var(--fixed-vh) * 100 - 6rem);
}
.popup-wrapper.center-wide > .popup {
    width: min(130rem, calc(var(--fixed-vw) * 100 - 10rem));
    height: var(--popup-height);
    --popup-height: calc(var(--fixed-vh) * 100 - 6rem);
}
body[data-is-mobile="true"] .popup-wrapper.center > .popup {
    --popup-height: calc(var(--fixed-vh) * 100 - 1.5rem);
}

.popup-wrapper.center-small > .popup {
    width: 45rem;
    height: fit-content;
}
.popup-wrapper.center[data-current-state="active"] > .popup {animation: popup-center-in calc(calc(1000ms * var(--animation-duration-factor)) * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1);}
.popup-wrapper.center-wide[data-current-state="active"] > .popup {animation: popup-center-in calc(calc(1000ms * var(--animation-duration-factor)) * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1);}
.popup-wrapper.center-small[data-current-state="active"] > .popup {animation: popup-center-in calc(1000ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1);}
.popup-wrapper.center[data-current-state="hiding"] > .popup {animation: popup-center-out calc(1000ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1) forwards;}
.popup-wrapper.center-wide[data-current-state="hiding"] > .popup {animation: popup-center-out calc(1000ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1) forwards;}
.popup-wrapper.center-small[data-current-state="hiding"] > .popup {animation: popup-center-out calc(1000ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1) forwards;}


.popup-wrapper > .popup > .close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 4rem;
    height: 4rem;
    display: grid;
    place-content: center;
    cursor: pointer;
}
.popup-wrapper > .popup > .close > img {
    width: 2rem;
    height: 2rem;
}




.popup-wrapper.left > .popup {
    margin: 0.75rem;
    width: 40rem;
    --popup-height: calc(var(--fixed-vh) * 100 - 1.5rem);
    height: var(--popup-height);
}
.popup-wrapper.mobile-fullscreen {
    display: flex;
    justify-content: center;
    background: #000000cc;
    backdrop-filter: blur(0.25rem);
}
.popup-wrapper.mobile-left,
.popup-wrapper.mobile-right {
    display: flex;
}
.popup-wrapper.mobile-right {
    justify-content: end;
}


.popup-wrapper.mobile-fullscreen[data-current-state="active"] {animation: popup-bg-in calc(calc(300ms * var(--animation-duration-factor)) * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1);}
.popup-wrapper.mobile-fullscreen[data-current-state="hiding"] {animation: popup-bg-out calc(300ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1) forwards;}


.popup-wrapper.mobile-fullscreen > .popup {
    --popup-height: calc(var(--fixed-vh) * 80);
    height: var(--popup-height);
    border-radius: 0;
    transform: scale(1.25);
    transform-origin: top;
    width: calc(var(--fixed-vw) * 80) !important;
    padding: 0 calc(0.5 * (var(--fixed-vw)  * 80 - var(--fixed-vw) * 68)) !important;
    box-shadow: none;
    background: none;
}


.popup-wrapper.left[data-current-state="active"] > .popup {animation: popup-left-in calc(1000ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1);}
.popup-wrapper.left[data-current-state="hiding"] > .popup {animation: popup-left-out calc(1000ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1) forwards;}
.popup-wrapper.left-in-game-overlay[data-current-state="active"] > .popup {animation: popup-left-in calc(1000ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1);}
.popup-wrapper.left-in-game-overlay[data-current-state="hiding"] > .popup {animation: popup-left-out calc(1000ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1) forwards;}


body[data-side-menu-location="right"] .popup-wrapper.left[data-current-state="active"] > .popup {animation: popup-right-in calc(1000ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1);}
body[data-side-menu-location="right"] .popup-wrapper.left[data-current-state="hiding"] > .popup {animation: popup-right-out calc(1000ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1) forwards;}

.popup-wrapper.mobile-fullscreen[data-current-state="active"] > .popup {animation: popup-mobile-fullscreen-in calc(calc(300ms * var(--animation-duration-factor)) * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1);}
.popup-wrapper.mobile-fullscreen[data-current-state="hiding"] > .popup {animation: popup-mobile-fullscreen-out calc(300ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1) forwards;}



.popup-wrapper.mobile-left > .popup,
.popup-wrapper.mobile-right > .popup {
    --popup-height: calc(var(--fixed-vh) * 80);
    height: var(--popup-height);
    border-radius: 0;
    transform: scale(1.25);
    transform-origin: top left;
    width: 28rem;
    box-shadow: none;
    background: #000000cc;
    backdrop-filter: blur(0.25rem);
    padding: 0 0.75rem 0.75rem 0.75rem !important;
}
.popup-wrapper.mobile-right > .popup {
    transform-origin: top right;
}


.popup-wrapper.left-in-game-overlay > .popup {
    margin: 5rem 0.5rem;
    border-radius: 0.5rem;
    width: 30rem !important;
    --popup-height: calc(var(--fixed-vh) * 100 - 1.5rem);
    max-height: min-content;
    height: var(--popup-height);
    background: #00000044;
    box-shadow: none;
}





.popup-wrapper.mobile-left[data-current-state="active"] > .popup {animation: popup-mobile-left-in calc(1000ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1);}
.popup-wrapper.mobile-left[data-current-state="hiding"] > .popup {animation: popup-mobile-left-out calc(1000ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1) forwards;}

body[data-side-menu-location="right"] .popup-wrapper.mobile-left[data-current-state="active"] > .popup {animation: popup-mobile-right-in calc(1000ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1);}
body[data-side-menu-location="right"] .popup-wrapper.mobile-left[data-current-state="hiding"] > .popup {animation: popup-mobile-right-out calc(1000ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1) forwards;}

body[data-side-menu-location="right"] .popup-wrapper.mobile-right[data-current-state="active"] > .popup {animation: popup-mobile-left-in calc(1000ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1);}
body[data-side-menu-location="right"] .popup-wrapper.mobile-right[data-current-state="hiding"] > .popup {animation: popup-mobile-left-out calc(1000ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1) forwards;}

.popup-wrapper.mobile-right[data-current-state="active"] > .popup {animation: popup-mobile-right-in calc(1000ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1);}
.popup-wrapper.mobile-right[data-current-state="hiding"] > .popup {animation: popup-mobile-right-out calc(1000ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1) forwards;}

.popup-wrapper > .popup::-webkit-scrollbar {
    display: none;
}
@keyframes popup-center-in {from {
    transform: translateY(calc(var(--fixed-vh) * 100));
}}
@keyframes popup-center-out {to {
    transform: translateY(calc(var(--fixed-vh) * 100));
}}

@keyframes popup-bg-in {from {
    background: transparent;
    backdrop-filter: none;
}}
@keyframes popup-bg-out {to {
    background: transparent;
    backdrop-filter: none;
}}

@keyframes popup-mobile-fullscreen-in {from {
    d-transform: scale(1.25) translateY(calc(var(--fixed-vh) * 100));
    opacity: 0;
}}
@keyframes popup-mobile-fullscreen-out {to {
    d-transform: scale(1.25) translateY(calc(var(--fixed-vh) * 100));
    opacity: 0;
}}

@keyframes popup-left-in {from {
    transform: translateX(calc(-100% - 2rem));
}}
@keyframes popup-left-out {to {
    transform: translateX(calc(-100% - 2rem));
}}

@keyframes popup-right-in {from {
    transform: translateX(calc(100% + 2rem));
}}
@keyframes popup-right-out {to {
    transform: translateX(calc(100% + 2rem));
}}

@keyframes popup-mobile-left-in {from {
    transform: scale(1.25) translateX(calc(-100% - 2rem));
}}
@keyframes popup-mobile-left-out {to {
    transform: scale(1.25) translateX(calc(-100% - 2rem));
}}

@keyframes popup-mobile-right-in {from {
    transform: scale(1.25) translateX(calc(100% + 2rem));
}}
@keyframes popup-mobile-right-out {to {
    transform: scale(1.25) translateX(calc(100% + 2rem));
}}.popup.cheats-menu > .content {
  margin-top: -0.75rem;
}.lobby-picker-popup {
    position: relative;
    padding: 1rem;
    overflow-y: scroll !important;
    touch-action: pan-y !important;
}

.lobby-picker-popup > .title {
    height: 10rem;
    display: grid;
    place-content: center;
    font-size: 4rem;
    margin-bottom: 1rem;
}

.lobby-picker-popup > .lobby-grid {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.lobby-picker-popup > .lobby-grid > .region-column {
    flex-shrink: 1;
    width: 20rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.lobby-picker-popup > .lobby-grid > .region-column > .title {
    display: grid;
    place-content: center;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.lobby-picker-popup > .lobby-grid > .region-column > .lobby {
    height: 5.5rem;
    background: #00000044;
    border-radius: 0.75rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.lobby-picker-popup > .lobby-grid > .region-column > .lobby > .main-content {
    display: flex;
    transition: transform calc(300ms * var(--animation-duration-factor)) ease;
}
.lobby-picker-popup > .lobby-grid > .region-column > .lobby[data-is-selected="true"] > .main-content {
    transform: translateY(-100%);
}

.lobby-picker-popup > .lobby-grid > .region-column > .lobby > .main-content > .player-count-column {
    width: 4.5rem;
    height: 4.5rem;
    margin: 0.5rem;
    justify-content: center;
}

.lobby-picker-popup > .lobby-grid > .region-column > .lobby > .main-content > .main-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.lobby-picker-popup > .lobby-grid > .region-column > .lobby > .main-content > .main-column > .title {
    font-size: 1.75rem;
}

.lobby-picker-popup > .lobby-grid > .region-column > .lobby > .team-picker {
    display: flex;
    margin: 0.5rem;
    gap: 0.5rem;
    position: absolute;
    inset: 0;
    transition: transform calc(300ms * var(--animation-duration-factor)) ease;
}
.lobby-picker-popup > .lobby-grid > .region-column > .lobby[data-is-selected="false"] > .team-picker {
    transform: translateY(5.5rem);
}
.lobby-picker-popup > .lobby-grid > .region-column > .lobby > .team-picker > .team {
    height: 100%;
    flex-grow: 1;
    justify-content: center;
}

.dropdown-selector {
    position: relative;
    height: var(--dropdown-height);
    isolation: isolate;
    user-select: none;
    isolation: isolate;
    z-index: 2;
    font-size: 2rem;
    --dropdown-height: 5rem;
}

.dropdown-selector .background-click-reciever {
    position: absolute;
    inset: calc(-100 * var(--fixed-vh)) calc(-100 * var(--fixed-vw));
    display: none;
    z-index: -1000;
}
.dropdown-selector[data-is-active="true"] .background-click-reciever {
    display: grid;
}


.dropdown-selector > .name {
    position: absolute;
    text-align: center;
    inset: auto 0 100% 0;
    font-size: 1.5rem;
    padding: 0.25rem 0 ;
}


.dropdown-selector[data-is-active="true"] {
    z-index: 100;
}

.dropdown-selector > .arrow {
    position: absolute;
    inset: 0 0 0 auto;
    height: 100%;
    aspect-ratio: 1/1;
    pointer-events: none;
    z-index: 5;
    display: grid;
    place-content: center;
}
.dropdown-selector > .arrow > img {
    width: 2rem;
    height: 2rem;
}
.dropdown-selector[data-is-active="true"] > .arrow > img {
    animation: dropdown-arrow-bounce 300ms ease;
}

@keyframes dropdown-arrow-bounce {
    30% {
        transform: translateY(0.5rem);
    }
}





.dropdown-selector > .option {
    position: absolute;
    width: 100%;
    height: var(--dropdown-height);
    transition: transform calc(1000ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    z-index: calc(0 - var(--position));
}

.dropdown-selector[data-is-active="true"] > .option[data-is-last="false"] {
    border-bottom-width: 0.25rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    height: calc(var(--dropdown-height) - var(--border-thickness) + 0.25rem);
}
.dropdown-selector[data-is-active="true"] > .option[data-is-active="false"] {
    border-top-width: 0.25rem;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    height: calc(var(--dropdown-height) - var(--border-thickness) + 0.25rem);
}
.dropdown-selector[data-is-active="true"] > .option[data-is-active="false"][data-is-last="false"] {
    height: calc(var(--dropdown-height) - 2 * var(--border-thickness) + 0.5rem);
}



.dropdown-selector[data-is-active="true"] > .option {
    transform: translateY(calc((var(--dropdown-height) - var(--border-thickness) + 0.25rem - 0.125rem) + (5rem - 2 * var(--border-thickness) + 0.5rem - 0.125rem) * var(--position)));
}
.dropdown-selector > .option[data-is-active="true"] {
    transition: transform calc(1000ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1) calc(25ms * var(--position));
    z-index: 4;
    transform: none;
}

.dropdown-selector > .option > .country-flag {
    position: absolute;
    inset: calc(var(--dropdown-height) / 2 - 1.5rem - var(--outline-thickness)) auto calc(var(--dropdown-height) / 2 - 1.5rem - var(--outline-thickness)) calc(var(--dropdown-height) / 2 - 1.5rem - var(--outline-thickness));
    height: 3rem;
    width: 3rem;
    border-radius: 1.5rem;
    transition:
        inset calc(1000ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1);
}
.dropdown-selector > .option > .country-flag:after {
    border-radius: inherit;
    box-shadow: inset 0 0 0 var(--outline-thickness) rgba(0,0,0,0.5);
}



.dropdown-selector > .option > .player-count {
    font-size: 1.5rem;

    position: absolute;
    inset: 0.5rem 1.5rem 0.5rem auto;
    width: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1.5rem;
    opacity: 0.875;
    transition:
        inset calc(1000ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1),
        opacity calc(1000ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1);
}
.dropdown-selector > .option[data-is-active="true"] > .player-count {
    inset: 0.5rem 1.25rem 0.5rem auto;
    opacity: 1;
}
.dropdown-selector > .option > .player-count > img {
    width: 1.625rem;
    height: 1.625rem;
}

.dropdown-selector > .option > .text {
    position: absolute;
    inset: 0 0 0 3.5rem;
    padding-bottom: 0.125rem;
    display: grid;
    font-size: 1.875rem;
    place-content: center;
    transition: inset calc(1000ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1);
}
.dropdown-selector > .option[data-is-active="true"] > .text,
.dropdown-selector > .option:has(.player-count) > .text,
.dropdown-selector > .option:not(:has(.country-flag)) > .text {
    inset: 0;
}
.dropdown-selector > .option[data-is-disabled="true"] > .text {
    opacity: 0.5;
}


.dropdown-selector > .option > .event-mode-timer {
    position: absolute;
    top: 50%;
    right: 100%;
    margin-right: 0.625rem;
    transform: translateY(-50%);
    width: max-content;
    opacity: 0;
    transition:
        opacity calc(1000ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1);
}
.dropdown-selector > .option[data-is-active="true"] > .event-mode-timer,
.dropdown-selector[data-is-active="true"] > .option > .event-mode-timer {
    opacity: 1;
}

.dropdown-selector > .option > .event-mode-timer > .timer-widget {
}

.dropdown-selector > .option > .event-mode-timer > .tooltip {
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-2rem);
    opacity: 0;
    background: #00000044;
    padding: 0.625rem 1rem 0.75rem 1rem;
    border-radius: 0.5rem;
    margin: 0.25rem 0;
    width: max-content;
    transition: transform calc(700ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1), opacity calc(300ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1);
}
.dropdown-selector > .option > .event-mode-timer > .tooltip[data-direction="up"] {
    top: auto;
    bottom: 100%;
    transform: translateX(-50%) translateY(2rem);
}

.dropdown-selector > .option > .event-mode-timer:hover > .tooltip {
    transition: transform calc(700ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1), opacity calc(700ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateX(-50%);
    opacity: 1;
}

.dropdown-selector > .option > .event-mode-timer > .tooltip > .title {
    font-size: 1.5rem;
    text-align: center;
}
.dropdown-selector > .option > .event-mode-timer > .tooltip > .mode {
    font-size: 1.75rem;
    text-align: center;
}.timer-widget {
    position: relative;
    height: 4.75rem;
    display: flex;
    align-items: center;
    isolation: isolate;
    user-select: none;
    isolation: isolate;
    font-size: 2rem;
    background: #00000044;
    border-radius: 0.5rem;
    margin: 0.125rem;
}

.timer-widget[data-size="small"] {
    height: 4rem;
    font-size: 1.75rem;
}
.timer-widget[data-size="smaller"] {
    height: 3.5rem;
    font-size: 1.75rem;
}

.timer-widget > .time-text {
    padding-right: 1rem;
}


.timer-widget > .clock-icon {
    position: relative;
    height: 100%;
    aspect-ratio: 1 / 1;
}
.timer-widget > .clock-icon > img {
    position: absolute;
    inset: 0.75rem;
    width: calc(100% - 1.5rem);
    height: calc(100% - 1.5rem);
}

.timer-widget > .clock-icon > .layer2 {
    animation: clock-spin 8000ms cubic-bezier(0.68, -0.6, 0.32, 1.6) infinite;
}

@keyframes clock-spin {
    0% {transform: rotate(0deg);}
    12.5% {transform: rotate(90deg);}
    25% {transform: rotate(90deg);}
    37.5% {transform: rotate(180deg);}
    50% {transform: rotate(180deg);}
    62.5% {transform: rotate(270deg);}
    75% {transform: rotate(270deg);}
    87.5% {transform: rotate(360deg);}
    100% {transform: rotate(360deg);}
}.country-flag {
    position: relative;
    width: 3rem;
    height: 3rem;
    overflow: hidden;
    border-radius: 0.5rem;
    isolation: isolate;
}
.country-flag::after {
    content: "";
    position: absolute;
    inset: 0;
}


.country-flag > img {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
}.downtime-warning {
    --max-height: 14rem;
    position: absolute;
    top: 5rem;
    left: 0.5rem;
    --color: var(--ui-color-4);
    background: var(--color);
    
    border: var(--border-thickness) solid color-mix(in srgb, var(--color), black 50%);
    /*border-radius: 0.75rem;*/
    border-radius: 0.5rem;
    isolation: isolate;
    width: 35rem;
    animation: downtime-warning-in calc(1000ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1) forwards;
    z-index: 2;
    overflow: hidden;
    max-width: calc(50vw - 24rem);
    max-height: calc(var(--fixed-vh) * 100 - 10rem);
}
.downtime-warning > .scroll-inner {
    margin: calc(-1 * var(--border-thickness));
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: calc(var(--fixed-vh) * 100 - 10rem);
    scrollbar-width: none;
}
.downtime-warning > .scroll-inner::-webkit-scrollbar {
    display: none;
}

body[data-is-mobile="true"] .downtime-warning[data-is-expanded="false"] {
    width: max-content;
    max-width: none;
}
.downtime-warning[data-is-expanded="true"] {
    max-width: none;
}


body[data-is-mobile="true"] .downtime-warning[data-is-expanded="false"] > .scroll-inner {
    width: max-content;
}
body[data-is-mobile="true"] .downtime-warning[data-is-expanded="false"] > .scroll-inner > .top-bar > .title,
body[data-is-mobile="true"] .downtime-warning[data-is-expanded="false"] > .scroll-inner > .content {
    display: none;
}

#home-screen[data-is-hiding="true"] > .downtime-warning {
    animation: downtime-warning-out calc(1000ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.downtime-warning[data-is-active="true"] {
    --color: var(--ui-color-3);
}


@keyframes downtime-warning-in {
    from {
        transform: translateX(calc(-100% - 2rem));
    }
}
@keyframes downtime-warning-out {
    to {
        transform: translateX(calc(-100% - 2rem));
    }
}


.downtime-warning > .scroll-inner > .top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0.75rem;
}
.downtime-warning > .scroll-inner > .top-bar > .title-section {
    display: flex;
    align-items: center;
    flex-shrink: 1;
}

.downtime-warning > .scroll-inner > .top-bar > .title-section > img {
    width: 2.5rem;
    height: 2.5rem;
    margin: 1rem 1rem 1rem 1rem;
}

.downtime-warning > .scroll-inner > .top-bar > .title-section > .title {
    flex-grow: 1;
    flex-shrink: 1;
    font-size: 1.75rem;
}
body[data-is-mobile="true"] .downtime-warning[data-is-expanded="false"] > .scroll-inner > .top-bar > .title-section > .title {
    display: none;
}
.downtime-warning > .scroll-inner > .top-bar > .timer-widget {
    margin-left: 0.5rem;
}



.downtime-warning > .scroll-inner > .content {
    padding: 0 1.25rem 1rem 1.25rem;
    font-size: 1.5rem;
}
.downtime-warning[data-hide-full-content="true"] > .scroll-inner > .content {
    display: none;
}


.party-panel {
    width: 100%;
    background: var(--ui-color-9);
    margin-top: 1rem;
    border-radius: 0.5rem;
    box-shadow: inset 0 0 0 var(--outline-thickness) rgba(0,0,0,0.5);
}

body[data-is-mobile="true"] .party-panel {
    margin-top: 0.5rem;
    margin-bottom: -0.5rem;
}


.party-panel > .topbar {
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    height: 4.5rem;
    gap: 0.375rem
}
.party-panel > .topbar > .text {
    flex-grow: 1;
    padding-left: 0.5rem;
    font-size: 1.75rem;
    padding-bottom: 0.125rem;
}

.party-panel > .topbar > .button {
    height: 3rem !important;
}

.party-panel > .players {
    display: flex;
    justify-content: center;
    padding: 0.5rem;
}
body[data-is-mobile="true"] .party-panel > .players {
    padding: 0;
}


.party-panel > .players > .player {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.5rem;
    position: relative;
    isolation: isolate;
    padding: 0 0.5rem;
    width: max-content;
    flex-grow: 1;
}

body[data-is-mobile="true"] .party-panel > .players > .player {
    font-size: 1.25rem;
}


.party-panel > .players > .player > .pfp {
    margin-bottom: 0.5rem;
    background: var(--ui-color-desaturated-1);
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    box-shadow: inset 0 0 0 var(--outline-thickness) #00000044;
    position: relative;
    z-index: -2;
    isolation: isolate;
}
body[data-is-mobile="true"] .party-panel > .players > .player > .pfp{
    width: 4rem;
    height: 4rem;
}
.party-panel > .players > .player[data-is-leader="true"] > .pfp::after {
    position: absolute;
    content: "";
    inset: auto 0rem 0rem auto;
    background: var(--ui-color-4);
    border-radius: 50%;
    width: 2.25rem;
    height: 2.25rem;
    box-shadow: inset 0 0 0 var(--outline-thickness) #00000044;
    z-index: 2;
}
body[data-is-mobile="true"] .party-panel > .players > .player > .pfp::after {
    width: 1.75rem;
    height: 1.75rem;
}


.party-panel > .players > .player > .pfp > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
}
.party-panel > .players > .player > .pfp::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    box-shadow: inset 0 0 0 var(--outline-thickness) #00000044;
    z-index: 1;
}


.party-panel > .players > .player > .actions {
    position: absolute;
    top: -0.5rem;
    bottom: -0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background: #00000044;
    padding: 0.5rem;
    border-radius: 0.5rem;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.875);
    transition:
        opacity calc(500ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1),
        transform calc(500ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1);
}
body[data-is-mobile="true"] .party-panel > .players > .player > .actions {
    z-index: 2;
}
.party-panel > .players > .player:hover > .actions {
    opacity: 1;
    transform: none;
    animation: pointer-events-delay 0ms ease 500ms forwards;
}

@keyframes pointer-events-delay {
    to {
        pointer-events: all;
    }
}

.party-panel > .players > .player > .actions > * {
    height: 3rem !important;
    place-content: center;
    z-index: 1;
}
.party-panel > .players > .player > .actions > * > .text {
    font-size: 1.5rem;
}






.party-panel > .actions {
    display: flex;
    padding: 0.75rem 1rem 1rem 1rem;
    gap: 0.625rem;
}
body[data-is-mobile="true"] .party-panel > .actions {
    padding: 0.5rem 0.625rem 0.625rem 0.625rem;
}

.party-panel > .actions > * {
    flex-grow: 1;
    place-content: center;
    display: grid;
}
body[data-is-mobile="true"] .party-panel > .actions > * {
    height: 3rem !important;
}


.party-panel > .actions > .status {
    background: #00000044;
    border-radius: 0.5rem;
    margin: 0.125rem;
    font-size: 1.75rem;
    height: 3.75rem
}.theme-home-menu {
    width : 45rem !important;
}


.theme-home-menu > .content > .theme-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 1rem;
    gap: 1rem;
}

.theme-home-menu > .content > .theme-grid > .theme {
    /*border-radius: 0.75rem;*/
    border-radius: 0.5rem;
    cursor: pointer;
    position: relative;
    background: var(--ui-color-9);
}

.theme-home-menu > .content > .theme-grid > .theme::after {
    /*border-radius: 0.75rem;*/
    border-radius: 0.5rem;
    content: "";
    border-radius: 100;
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 0 var(--outline-thickness) #00000044;
}



.theme-home-menu > .content > .theme-grid > .theme[data-active="true"] {
    background: var(--ui-color-5);
}

.theme-home-menu > .content > .theme-grid > .theme > .preview {
    width: 100%;
    aspect-ratio: 7/5;
    position: relative;
}

.theme-home-menu > .content > .theme-grid > .theme > .preview > svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /*border-radius: 0.75rem 0.75rem 0 0;*/
    border-radius: 0.5rem 0.5rem 0 0;
}

.theme-home-menu > .content > .theme-grid > .theme > .info {
    padding: 0.5rem 1rem 0.75rem 1rem;
}.theme-editor {
    overflow-y: scroll;
    touch-action: pan-y !important;
    width : 38rem !important;
}
.theme-import-menu {

}

.theme-import-menu > .content {
    display: grid;
    grid-template-rows: auto 1fr;
    height: calc(var(--popup-height) - 4.5rem)
}

.theme-import-menu > .content > textarea {
    margin: 0 1rem 1rem 1rem;
    width: calc(100% - 2rem) !important;
    height: calc(100% - 1rem) !important;
    padding: 0.75rem 1rem;
    resize: none;
    border: none;
    border-radius: 0.5rem;
    border: none;
    outline: none;

    box-shadow: inset 0 0 0 var(--outline-thickness) rgba(0,0,0,0.5);
    border-radius: 0.75rem;
    
    background: var(--ui-color-9);

    font-family: "Ubuntu", sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: inherit;
    /*text-shadow: var(--text-shadow), 0 0 2rem #00000088;*/
    text-shadow: var(--text-shadow), 0 0 2rem #00000088;
}
.theme-import-menu > .content > textarea::placeholder {
    color: inherit;
}.settings-home-menu {
    overflow-y: scroll !important;
    touch-action: pan-y !important;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}


.settings-home-menu > .header {
    height: 6rem;
    display: grid;
    place-content: center;
    font-size: 3rem;
}
body[data-is-mobile="true"] .settings-home-menu > .header {
    height: 4rem;
    font-size: 2.5rem;
}

.settings-home-menu > .button,
.settings-home-menu > .button-grid > .button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.settings-home-menu > .button > img {
    position: absolute;
    top: 50%;
    left: 4rem;
    transform: translateY(-50%);
    width: 3rem;
    margin-right: 1rem;
    margin-left: -1rem;
}
.settings-home-menu > .button:active > img {
    transform: translateY(-50%) translateY(0.125rem);
}


.settings-home-menu > .button-grid > .button.double {
    grid-column: span 2;
}

.settings-home-menu > .button.big {
    height: 10rem;
}

.settings-home-menu > .button-grid > .button.big {
    height: 5rem
}

.settings-home-menu > .button.medium {
    height: 6rem;
}
.settings-home-menu > .button-grid > .button.medium {
    height: 3.5rem
}

.settings-home-menu > .button-grid {
    margin-top: 0.5rem;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 0.5rem;
    
}

body[data-is-mobile="false"] .settings-home-menu > .button > .text {
    font-size: 2rem;
}

.settings-home-menu > .spacer {
    flex-grow: 1;
}

.settings-home-menu > .link {
    height: 2.5rem;
    display: flex;
    align-items: center;
    padding-left: 1.125rem;
    flex-grow: 1;
    gap: 1.25rem
}
.settings-home-menu > .link > img {
    width: 2rem;
    height: 2rem;
}.settings-menu {
    overflow-y: scroll !important;
    touch-action: pan-y !important;
}

.settings-menu > .settings-menu-header {
    height: 4.5rem;
    display: flex;
    padding: 0.5rem;
    align-items: center;
    gap: 0.5rem;
    height: 4.625rem;
    border-bottom: 0.125rem solid #ffffff66;
}


.settings-menu > .settings-menu-header > .tabs {
    display: flex;
    flex-grow: 1;
    justify-content: space-around;
}
.settings-menu > .settings-menu-header > .tabs > .tab {
    height: 3.5rem;
    display: grid;
    place-content: center;
    padding: 0 1rem;
    position: relative;
}
.settings-menu > .settings-menu-header > .tabs > .tab[data-is-active="true"]::after {
    position: absolute;
    content: "";
    inset: auto 0.5rem 0.25rem 0.5rem;
    background: white;
    height: 0.25rem;
    box-shadow: 0 0 0 0.25rem black;
}



.settings-menu > .settings-menu-header > .back-button {
    height: 3.5rem;
    width: 3.5rem;
    display: grid;
    place-content: center;
    padding-bottom: 0.125rem;
    cursor: pointer;
}
.settings-menu > .settings-menu-header > .back-button > img {
    width: 2rem;
    height: 2rem;
}

.settings-menu > .settings-menu-header > .title {
    padding-bottom: 0.25rem;
}

.settings-menu > .content {
    
}
.settings-menu > .content > .action-buttons {
    margin: 1rem;
    display: flex;
    gap: 0.75rem
}
.settings-menu > .content > .action-buttons > * {
    flex-grow: 1;
    place-content: center;
    font-size: 1.5rem !important;
    height: 3.5rem !important;
}
.settings-menu > .content > .action-buttons > .text {
    display: grid;
    background: #00000044;
    border-radius: 0.5rem;
    margin: 0.125rem;
    height: 3.25rem !important
}


.settings-menu > .content > .inputs > .category-title {
    margin: 2rem 1rem 0.5rem 1.25rem;
    font-size: 1.75rem;
}
.settings-menu > .content > .inputs > .category-title:not(:first-child) {
    margin-top: 2rem;
}

.settings-menu > .content > .inputs:not(:has(.category-title:first-child)) {
    padding-top: 1rem;
}
.settings-menu > .content > .inputs > .settings-edit-row {
    margin: 0.25rem 1rem 0.25rem 1.75rem;
    height: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.25rem;
}
.settings-menu > .content > .inputs > .settings-edit-row > .variable-name {
    flex-grow: 1;
}
body[data-is-mobile="true"] .settings-menu > .content > .inputs > .settings-edit-row {
    margin: 0.75rem 1rem 0.75rem 1.75rem;
}



.settings-menu > .content > .inputs > .settings-edit-row > .color-input-animation-toggle {
    height: 3rem;
    width: 3rem;
    display: grid;
    place-content: center;
}

.settings-menu > .content > .inputs > .settings-edit-row > .color-input {
    height: 3rem;
    /*border-radius: 0.75rem;*/
    display: flex;  
}

.settings-menu > .content > .inputs > .settings-edit-row > .color-input > .preview {
    position: relative;
    height: 100%;
    aspect-ratio: 1 / 1;
    background: var(--color);
    /*border-radius: 0.75rem 0 0 0.75rem;*/
    border-radius: 0.5rem 0 0 0.5rem;
    border: var(--border-thickness) solid color-mix(in srgb, var(--color), black 50%);
}
.settings-menu > .content > .inputs > .settings-edit-row > .color-input > .preview > input {
    position: absolute;
    inset: calc(-1 * var(--border-thickness));
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.settings-menu > .content > .inputs > .settings-edit-row > .color-input > input {
    background: none;
    border: none;
    width: 6.25rem;
    font-family: monospace !important;
    font-size: 1.5rem;
    padding-left: 0.5rem;
    padding-bottom: 0.125rem;
    font-weight: 600;
    outline: none;
    /*border-radius: 0 0.75rem 0.75rem 0;*/
    border-radius: 0 0.5rem 0.5rem 0;
    border: var(--border-thickness) solid color-mix(in srgb, var(--ui-color-9), black 50%);
    background: var(--ui-color-9);
    border-left-width: 0;
}
.settings-menu > .content > .inputs > .settings-edit-row > .color-input > input:focus {
    background: #ffffff88;
}

.settings-menu > .content > .inputs > .settings-edit-row > .number-input,
.settings-menu > .content > .inputs > .settings-edit-row > .text-input {
    /*border-radius: 0.75rem;*/
    d-box-shadow: inset 0 0 0 var(--outline-thickness) rgba(0,0,0,0.5);
}

.settings-menu > .content > .inputs > .settings-edit-row > .number-input > input,
.settings-menu > .content > .inputs > .settings-edit-row > .text-input > input {
    background: none;
    height: 3rem;
    width: 7rem;
    display: flex;
    font-family: monospace !important;
    outline: none;
    border: none;
    font-size: 1.5rem;
    padding-left: 1rem;
    padding-bottom: 0.125rem;
    font-weight: 600;
    outline: none;
    background: var(--ui-color-9);
    border: var(--border-thickness) solid color-mix(in srgb, var(--ui-color-9), black 50%);
    border-radius: 0.5rem;
}
.settings-menu > .content > .inputs > .settings-edit-row > .text-input > input {
    width: 22rem;
}

.settings-menu > .content > .inputs > .settings-edit-row > .number-input > input:focus,
.settings-menu > .content > .inputs > .settings-edit-row > .text-input > input:focus {
    background: #ffffff88;
}

.settings-menu > .content > .inputs > .settings-edit-row > .number-input > input::-webkit-outer-spin-button,
.settings-menu > .content > .inputs > .settings-edit-row > .number-input > input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.settings-menu > .content > .inputs > .settings-edit-row > .boolean-input {
    user-select: none;
    width: 2.25rem;
    height: 2.25rem;
    /*border-radius: 0.75rem;*/
    border-radius: 0.5rem;
    overflow: hidden;
    background: var(--ui-color-9);
    position: relative;
    border: var(--border-thickness) solid color-mix(in srgb, var(--ui-color-9), black 50%);
}
.settings-menu > .content > .inputs > .settings-edit-row > .boolean-input[data-is-active="true"] {
    background: var(--ui-color-5);
    border: var(--border-thickness) solid color-mix(in srgb, var(--ui-color-5), black 50%);
}

.settings-menu > .content > .inputs > .settings-edit-row > .boolean-input > img {
    position: absolute;
    inset: calc(-1 * var(--border-thickness));
    width: 2.25rem;
    height: 2.25rem;
    transform: scale(0.9);
}




.settings-menu > .content > .inputs > .settings-edit-row > .multiple-choice-input {
    position: relative;
    user-select: none;
    height: 3rem;
    display: flex;
    border-radius: 0.5rem;
    isolation: isolate;
}
.settings-menu > .content > .inputs > .settings-edit-row > .multiple-choice-input::after {
    inset: 0;
    position: absolute;
    content: "";
    d-box-shadow: inset 0 0 0 var(--outline-thickness) rgba(0,0,0,0.5);
    border-radius: 0.5rem;
    pointer-events: none;
}

.settings-menu > .content > .inputs > .settings-edit-row > .multiple-choice-input > .option {
    height: 100%;
    height: 3rem;
    display: grid;
    place-content: center;
    padding: 0 0.375rem;
    position: relative;
    background: var(--ui-color-9);

    border-style: solid;
    border-width: var(--border-thickness) 0.25rem;
    border-color: color-mix(in srgb, var(--ui-color-9), black 50%);
}
.settings-menu > .content > .inputs > .settings-edit-row > .multiple-choice-input > .option:not(:last-child):after {
    position: absolute;
    inset: 0.375rem -0.1875rem 0.375rem auto;
    d-content: "";
    width: 0.375rem;
    background: #00000044;
    z-index: 2;
}

.settings-menu > .content > .inputs > .settings-edit-row > .multiple-choice-input > .option:first-child {
    border-radius: 0.5rem 0 0 0.5rem;
    border-left-width: 0.4375rem;
}
.settings-menu > .content > .inputs > .settings-edit-row > .multiple-choice-input > .option:last-child {
    border-radius: 0 0.5rem 0.5rem 0;
    border-right-width: 0.4375rem;
}


.settings-menu > .content > .inputs > .settings-edit-row > .multiple-choice-input > .option[data-is-active="true"] {
    background: var(--ui-color-5);
    border-color: color-mix(in srgb, var(--ui-color-5), black 50%);
}





.settings-menu > .content > .inputs > .settings-edit-row > .slider-input {
    height: 3rem;
    width: 11rem;
    position: relative;
    margin-left: 1.5rem;
}
.settings-menu > .content > .inputs > .settings-edit-row > .slider-input > .slider-value {
    position: absolute;
    inset: 0 100% 0 auto;
    display: grid;
    place-content: center;
    padding-right: 0.5rem;
}

.settings-menu > .content > .inputs > .settings-edit-row > .slider-input > .slider-bg {
    position: absolute;
    inset: 0.625rem 0.375rem;
    background: var(--ui-color-9);
    border-radius: 0.5rem;
    border: var(--border-thickness) solid color-mix(in srgb, var(--ui-color-9), black 50%);
}

.settings-menu > .content > .inputs > .settings-edit-row > .slider-input > input {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    outline: none;
    background: none;
    margin: 0;
    padding: 0;
    border: none;
}
.settings-menu > .content > .inputs > .settings-edit-row > .slider-input > input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0.5rem;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    padding: 0;
    border: var(--border-thickness) solid color-mix(in srgb, var(--ui-color-5), black 50%);
    background: var(--ui-color-5);
}


.settings-menu > .content > .inputs > .settings-edit-row > .button-input {
    height: 3rem;
}.keybinds-menu {
    width: 50rem !important;
}


.keybinds-menu > .content > .inputs > .category-title {
    margin: 2rem 1rem 0.5rem 1.25rem;
    font-weight: 500;
    font-size: 1.75rem;
}
.keybinds-menu > .content > .inputs > .category-title:not(:first-child) {
    margin-top: 2rem;
}

.keybinds-menu > .content > .inputs > .keybind-row {
    margin: 0.25rem 1rem 0.25rem 1.75rem;
    height: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.keybinds-menu > .content > .inputs > .keybind-row > .variable-name {
}

.keybinds-menu > .content > .inputs > .keybind-row > .keybind-input {
    display: flex;
    gap: 0.25rem
}
.keybinds-menu > .content > .inputs > .keybind-row > .keybind-input > .keybind-key {
    height: 3rem;
    transition: background 150ms;
}
.keybinds-menu > .content > .inputs > .keybind-row > .keybind-input > .keybind-key:hover {
    background: var(--ui-color-3);
    filter: none !important;
}


.keybinds-menu > .content > .inputs > .keybind-row > .keybind-input > .add-keybind-key {
    height: 3rem;
    width: 3rem;
    padding: 0;
    place-content: center;
}
.keybinds-menu > .content > .inputs > .keybind-row > .keybind-input > .add-keybind-key > img {
}




.keybinds-menu > .content > .inputs > .keybind-row > .color-input {
    height: 3rem;
    border-radius: 0.75rem;
    overflow: hidden;
    background: var(--havre-themes-section-bg);
    display: flex;  
    background: var(--ui-color-9);
    box-shadow: inset 0 0 0 0.25rem rgba(0,0,0,0.5);
}
.keybinds-menu > .content > .inputs > .keybind-row > .color-input > .preview {
    position: relative;
    height: 100%;
    aspect-ratio: 1 / 1;
    background: var(--color);
    border-radius: 0.75rem 0 0 0.75rem;
    box-shadow: inset 0 0 0 0.25rem rgba(0,0,0,0.5);
}
.keybinds-menu > .content > .inputs > .keybind-row > .color-input > .preview > input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
.keybinds-menu > .content > .inputs > .keybind-row > .color-input > input {
    background: none;
    border: none;
    width: 6.25rem;
    font-family: monospace !important;
    font-size: 1.5rem;
    padding-left: 0.5rem;
    padding-bottom: 0.125rem;
    font-weight: 600;
    outline: none;
    border-radius: 0 0.75rem 0.75rem 0;
}
.keybinds-menu > .content > .inputs > .keybind-row > .color-input > input:focus {
    background: #ffffff88;
}

.keybinds-menu > .content > .inputs > .keybind-row > .number-input,
.keybinds-menu > .content > .inputs > .keybind-row > .text-input {
    border-radius: 0.75rem;
    overflow: hidden;
    background: var(--ui-color-9);
    box-shadow: inset 0 0 0 0.25rem rgba(0,0,0,0.5);
}

.keybinds-menu > .content > .inputs > .keybind-row > .number-input > input,
.keybinds-menu > .content > .inputs > .keybind-row > .text-input > input {
    background: none;
    height: 3rem;
    width: 7rem;
    display: flex;
    font-family: monospace !important;
    outline: none;
    border: none;
    font-size: 1.5rem;
    padding-left: 1rem;
    padding-bottom: 0.125rem;
    font-weight: 600;
    outline: none;
}
.keybinds-menu > .content > .inputs > .keybind-row > .text-input > input {
    width: 22rem;
}

.keybinds-menu > .content > .inputs > .keybind-row > .number-input > input:focus {
    background: #ffffff88;
}

.keybinds-menu > .content > .inputs > .keybind-row > .number-input > input::-webkit-outer-spin-button,
.keybinds-menu > .content > .inputs > .keybind-row > .number-input > input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.keybinds-menu > .content > .inputs > .keybind-row > .boolean-input {
    user-select: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    overflow: hidden;
    background: var(--ui-color-9);
    box-shadow: inset 0 0 0 0.25rem rgba(0,0,0,0.5);
}
.keybinds-menu > .content > .inputs > .keybind-row > .boolean-input[data-is-active="true"] {
    background: var(--ui-color-5);
}

.keybinds-menu > .content > .inputs > .keybind-row > .boolean-input > img {
    width: 100%;
    height: 100%;
    transform: scale(0.9);
}
.corner-buttons {
    position: absolute;
    padding: 0.5rem;
    display: flex;
    gap: 0.25rem;
    z-index: 50;
    transition: opacity 300ms ease;
}
.corner-buttons > * {
    transition: transform calc(1000ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1), filter 150ms;
}


.corner-buttons[data-apply-opacity="true"] {
    opacity: var(--theme-slider-topButtonOpacity);
}

.corner-buttons.top {top: 0;}
.corner-buttons.bottom {bottom: 0;}
.corner-buttons.left {left: 0;}
.corner-buttons.right {right: 0;}

body[data-side-menu-location="right"] .corner-buttons.top.right {
    right: auto;
    left: 0;
}
body[data-side-menu-location="right"] .corner-buttons.top.left {
    left: auto;;
    right: 0;
    flex-direction: row-reverse;
}


.corner-buttons.top > * {
    transform: translateY(-5rem);
}

.corner-buttons.bottom > * {
    transform: translateY(5rem);
}

.corner-buttons > .active {
    transform: none;
}


.corner-buttons > .timer-widget {
    transform: none;
    height: 3.75rem
}



.leave-menu {
    position: absolute;
    top: 4.25rem;
    background: #00000044;
    border-radius: 0.5rem;
    margin: 0.625rem;
    padding: 0.5rem;
    display: flex;
    gap: 0.25rem;
    z-index: 100;
    display: block;
}
body[data-side-menu-location="right"] .leave-menu {
    right: 0;
}

.leave-menu > .title {
    padding: 0.5rem 1rem;
}
.leave-menu > .buttons {
    display: flex;
    padding: 0.5rem;
    gap: 0.75rem;
}
.leave-menu > .buttons > * {
    flex-grow: 1;
    place-content: center;
}


.join-discord-text > .text {
    position: absolute;
    bottom: 6rem;
    left: 6rem;
    pointer-events: none;
    z-index: 51;
    font-size: 1.75rem;
    transform: rotate(10deg);
    animation: join-discord-text-animation 500ms infinite alternate;
    transition: bottom calc(1000ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1);
}

.join-discord-text[data-is-active="false"] > .text {
    bottom: -6rem;
}


@keyframes join-discord-text-animation {
    from {
        transform: rotate(10deg) scale(1);
    }
    to {
        transform: rotate(10deg) scale(1.1);
    }
}

.join-discord-text > .arrow {
    position: absolute;
    pointer-events: none;
    bottom: 4.75rem;
    left: 1rem;
    z-index: 51;
    font-size: 1.75rem;
    width: 4.5rem;
    transition: bottom calc(1000ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1);
}

.join-discord-text[data-is-active="false"] > .arrow {
    bottom: -6rem;
}

.chat-menu {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  z-index: 50;
  transition: opacity 300ms ease;
  bottom: 4.5rem;
  left: 0;
  margin: 0.5rem;
  background: #00000044;
  border-radius: 0.5rem;
  isolation: isolate;
  width: 30rem;
  transform-origin: bottom left;

  transition:
    transform calc(1000ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1),
    left calc(1000ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1),
    bottom calc(1000ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1),
    opacity calc(300ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1);
}
.chat-menu[data-is-hidden="true"] {
  opacity: 0 !important;
  pointer-events: none;
}

body[data-is-mobile="true"] .chat-menu {
  bottom: 0;
}

.chat-menu[data-is-in-game="true"],
.chat-menu[data-is-hidden="true"] {
  left: calc(var(--canvas-offset-x) + var(--in-game-hud-scaling) * 18px);
  bottom: calc(var(--canvas-offset-y) + var(--in-game-hud-scaling) * 240px);

  transform: scale(calc(var(--ui-to-hud-scaling) * 0.625));
  margin: 0;
  opacity: var(--theme-slider-hudOpacity);
}
body[data-is-mobile="true"] .chat-menu[data-is-in-game="true"],
body[data-is-mobile="true"] .chat-menu[data-is-hidden="true"] {
  left: calc(var(--fixed-vw) * 50);
  bottom: calc(var(--canvas-offset-y) + var(--in-game-hud-scaling) * 150px);

  transform: scale(calc(var(--ui-to-hud-scaling) * 0.8)) translateX(-50%);
  margin: 0;
  opacity: var(--theme-slider-hudOpacity);
}


.chat-menu > .messages {
  padding: 0 0.5rem;
  pointer-events: none;
}

.chat-menu > .messages > .message {
  padding: 0.25rem 0;
  animation: chat-message-disappear 100ms ease 10s forwards;
}
.chat-menu:has(input:focus) > .messages > .message {
  display: block !important;
  opacity: 1 !important;
}

.chat-menu:has(input:focus) > .messages > .message:last-child {
  margin-bottom: 0.25rem;
}


@keyframes chat-message-disappear {
  to {
    opacity: 0;
    display: none;
  }
}

.chat-menu > .messages > .message > .author {
  color: color-mix(in srgb, var(--theme-color-textFillColor), var(--color) 50%);
}

.chat-menu > .messages > .message[data-is-server-message="true"] > * {
  color: color-mix(in srgb, var(--theme-color-textFillColor), var(--ui-color-3) 30%);
}



.chat-menu > .input {
  margin-top: -0.25rem;
  width: 100%;
  height: 2.75rem;
  position: relative;
  border-radius: 0.5rem;
  background: #dddddd;
  border: var(--border-thickness) solid color-mix(in srgb, #dddddd, black 50%);
      
  /*text-shadow: var(--text-shadow), 0 0 2rem black;*/
  font-family: "Ubuntu", sans-serif;
  text-shadow: var(--text-shadow);
  

  transition:
    box-shadow calc(300ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1),
    border calc(300ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1),
    transform calc(700ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1),
    opacity calc(300ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1);
}
.chat-menu[data-is-in-game="true"]:not(:has(input:focus)) {
  pointer-events: none;
}
body[data-is-mobile="true"] .chat-menu[data-is-in-game="true"]:not(:has(input:focus)) > .input {
  opacity: 0;
  margin-top: -2.5rem;
}

.chat-menu[data-is-in-game="true"] > .input {
  border: none;
  height: 2.25rem;
  background: var(--theme-color-barBackground);
}


.chat-menu > .input > input {
  position: absolute;
  inset: calc(-1 * var(--border-thickness));
  vertical-align: middle;
  width: calc(100% + 2 * var(--border-thickness));
  height: calc(100% + 2 * var(--border-thickness));
  
  border: none;
  padding: none;
  outline: none;
  text-align: center;
  background: none;
  color: inherit;
  text-shadow: inherit;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  text-align: left;
  padding-bottom: 0.125rem;
  font-family: "Ubuntu", sans-serif;
  font-weight: 600;
  caret-color: black;
  border-radius: inherit;
  isolation: isolate;
  padding-left: 1rem;
  padding-right: 1rem;
  
  transition:
    box-shadow calc(300ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1),
    border calc(300ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1);
}

.chat-menu[data-is-in-game="true"] > .input > input {
  inset: 0;
  width: 100%;
  height: 100%;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.chat-menu > .input > input:focus {
  box-shadow:
    inset 0 0 0 0.25rem white,
    inset 0 0 0 0.5rem #000000,
    0 0 0 0.25rem #000000;
}
.chat-menu > .input > input::placeholder {
  color: black;
  text-shadow: none;
  opacity: 0.5;
}

.chat-menu[data-is-in-game="true"] > .input > input::placeholder {
  color: white;
}
#death-screen {
    display: grid;
    place-content: center;
    font-family: "Ubuntu", sans-serif;
    font-size: 2rem;
}

#death-screen[data-is-hiding="true"] {
    pointer-events: none;
}

#death-screen > .center-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    animation: death-screen-show calc(1000ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transform: scale(0.8);
    padding-top: 4rem;
    padding-bottom: 4rem;
}
body[data-is-mobile="true"] #death-screen > .center-section {
    padding-top: 0;
}


@keyframes death-screen-show {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: none;
        opacity: 1;
    }
}
#death-screen[data-is-hiding="true"] > .center-section {
    animation: death-screen-hide calc(200ms * var(--animation-duration-factor)) linear forwards;
}
@keyframes death-screen-hide {
    from {
        transform: none;
        opacity: 1;
    }
    to {
        transform: scale(1.1);
        opacity: 0;
    }
}

#death-screen > .center-section > .ad-button {
    padding: 0 1.125rem;
}
/* mobile */
body[data-is-mobile="true"] #death-screen > .center-section > .ad-button {
    display: none;
}


#death-screen > .center-section > .text-section {
    margin: 2rem 0;
}
/* mobile */
body[data-is-mobile="true"] #death-screen > .center-section > .text-section {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
body[data-is-mobile="true"] #death-screen[data-is-showing-advanced-stats="true"] > .center-section > .text-section {
    margin-top: 0;
}

#death-screen > .center-section > .text-section > .title-text {
    text-align: center;
    font-size: 1.5rem;
}
#death-screen > .center-section > .text-section > .killer-username {
    text-align: center;
    font-size: 2rem;
}



#death-screen > .center-section > .main-section {
    display: flex;
    align-items: center;
    gap: 2rem;
}

#death-screen > .center-section > .main-section > .tank {
    position: relative;
    width: 12rem;
    height: 12rem;
    background: var(--color);
    /*border-radius: 0.75rem;*/
    border-radius: 0.5rem;
    box-shadow: inset 0 0 0 0.25rem #00000044;
}
/* mobile */
body[data-is-mobile="true"] #death-screen[data-is-showing-advanced-stats="true"] > .center-section > .main-section > .tank {
    width: 10rem;
    height: 10rem;
}

#death-screen > .center-section > .main-section > .tank > img {
    width: 100%;
    height: 100%;
    animation: death-screen-tank-rotate 30s infinite linear;
}
@keyframes death-screen-tank-rotate {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

#death-screen > .center-section > .main-section > .tank > .name {
    position: absolute;
    inset: 100% 0 auto 0;
    font-size: 1.75rem;
    text-align: center;
    padding: 0.5rem;
}


#death-screen > .center-section > .main-section > .stats {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 18rem;
    padding-bottom: 0.5rem;
}
/* mobile */
body[data-is-mobile="true"] #death-screen[data-is-showing-advanced-stats="true"] > .center-section > .main-section > .stats {
    font-size: 1.75rem;
}

#death-screen > .center-section > .main-section > .stats > .title {
    text-align: center;

}

#death-screen > .center-section > .main-section > .stats > .stat-row {
    display: flex;
    justify-content: space-between;
}

#death-screen > .center-section > .stats-section {
    margin-top: 2rem;
    font-size: 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 2rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;

    background: #00000044;
    position: relative;
}
#death-screen > .center-section > .advanced-stats-section {
    margin-top: 0.5rem;
}
#death-screen > .center-section > .stats-section > .shiny-stats {
    position: absolute;
    left: 100%;
    margin-left: 0.5rem;
    bottom: 0;
    font-size: 1.5rem;
    display: grid;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;

    background: #00000044;
}

/* mobile */
body[data-is-mobile="true"] #death-screen > .center-section > .stats-section {
    font-size: 1.375rem;
    gap: 0.5rem 1.5rem;
    padding: 0.5rem 0.75rem;
    margin-top: 1.25rem;
}
body[data-is-mobile="true"] #death-screen > .center-section > .advanced-stats-section {
    margin-top: 0.5rem;
}

#death-screen > .center-section > .stats-section > .title {
    grid-column: span 2;
    display: flex;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
}
#death-screen > .center-section > .stats-section > .shiny-stats > .title {
    display: flex;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
}

#death-screen > .center-section > .stats-section > .stat {
    width: 21rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#death-screen > .center-section > .stats-section > .stat > .value {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
#death-screen > .center-section > .stats-section > .stat > .value > img {
    width: 1.75rem;
    height: 1.75rem;
}

#death-screen > .center-section > .stats-section > .shiny-stats > .stat {
    width: 15rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


#death-screen > .center-section > .bottom-buttons {
    display: flex;
    gap: 1.25rem;
    margin-top: 1.5rem;
}
/* mobile */
body[data-is-mobile="true"] #death-screen > .center-section > .bottom-buttons {
    margin-top: 1.25rem;
}

#death-screen > .center-section > .bottom-buttons > * {
    d-height: 4.5rem;
    padding: 0 1.5rem;
}

#death-screen > .center-section > .bottom-buttons > .mobile-ad-button {
    display: none;
}

body[data-is-mobile="true"] #death-screen > .center-section > .bottom-buttons > .mobile-ad-button {
    display: grid;
}


#death-screen > .center-section > .bottom-buttons > * > .text {
    d-font-size: 2rem !important;
}

#death-screen > .center-section > .ad-wrapper {
    margin-top: 1.5rem;
    margin-bottom: -4rem;
}
#death-screen > .center-section > .ad-wrapper > .placeholder-ad {
    width: 45.5rem;
    height: 6rem;
    background: #1c1c1c;
    border-radius: 0.5rem;
}

/* mobile */
body[data-is-mobile="true"] #death-screen > .center-section > .ad-wrapper {
    display: none;
}

.records-popup {
    position: relative;
    padding: 1rem;
    overflow-y: scroll !important;
    touch-action: pan-y !important;
}

.records-popup > .title {
    height: 10rem;
    display: grid;
    place-content: center;
    font-size: 4rem;
    margin-bottom: 1rem;
}
/* mobile */
body[data-is-mobile="true"] .records-popup > .title {
    height: 5rem;
}

.records-popup > .subtitle {
    display: grid;
    place-content: center;
    transform: translateY(-2rem);
}
body[data-is-mobile="true"] .records-popup > .subtitle {
    transform: translateY(-1rem);
}




.records-popup > .record-settings {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    position: relative;
    isolation: isolate;
    z-index: 10;
    max-width: 100%;
}
.records-popup[data-is-loading="true"] > .record-settings {
    opacity: 0.5;
}
.records-popup > .record-settings > .selector {
    width: 19rem;
    font-size: 2rem;
    flex-shrink: 1;
}

.records-popup > .record-settings > .tank-selector {
    width: 19rem;
    height: 5rem;
    font-size: 2rem;
    flex-shrink: 1;
}

body[data-is-mobile="true"] .records-popup > .record-settings > .selector > .option > .text,
body[data-is-mobile="true"] .records-popup > .record-settings > .tank-selector > .active-tank > .button > .text {
    font-size: 1.75rem !important;
}

.records-popup > .record-settings > .tank-selector > .active-tank {
    position: relative;
    width: 100%;
    height: 100%;
    isolation: isolate;
}

.records-popup > .record-settings > .tank-selector > .active-tank > .arrow {
    position: absolute;
    inset: 0 0 0 auto;
    height: 100%;
    aspect-ratio: 1/1;
    pointer-events: none;
    z-index: 5;
    display: grid;
    place-content: center;
}
.records-popup > .record-settings > .tank-selector > .active-tank > .arrow > img {
    width: 2rem;
    height: 2rem;
}
.records-popup > .record-settings > .tank-selector[data-is-active="true"] > .active-tank > .arrow > img {
    animation: dropdown-arrow-bounce 300ms ease;
}

.records-popup > .record-settings > .tank-selector > .active-tank > .button {
    width: 100%;
    height: 100%;
    place-content: center;
}



.records-popup > .record-settings > .tank-selector > .active-tank > .button > .text {
    font-size: 2rem;
}

.records-popup > .record-settings > .tank-selector > .dropdown {
    position: absolute;
    inset: 5.75rem 1rem auto 1rem;
    background: #222222;
    border-radius: 0.75rem;
    border: 0.375rem solid #111111;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 0.25rem 0.625rem;
    animation: tank-selector-dropdown-show calc(500ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes tank-selector-dropdown-show {
    from {
        opacity: 0;
        transform: translateY(-3rem);
    }
}

.records-popup > .record-settings > .tank-selector > .dropdown > .all-tanks {
    grid-column: span 4;
    height: 4rem;
    display: grid;
    place-content: center;
    padding-bottom: 0.25rem;
    margin-bottom: 0.5rem;
    border-bottom: 0.375rem solid #ffffff44;
    cursor: pointer;
}

.records-popup > .record-settings > .tank-selector > .dropdown > .option {
    height: 3rem;
    display: grid;
    place-content: center;
    font-size: 1.75rem;
    cursor: pointer;
}


.records-popup > .record-table {
    margin-top: 2rem;
    color: color-mix(in srgb, var(--theme-color-textFillColor), transparent 10%);
}
/* mobile */
body[data-is-mobile="true"] .records-popup > .record-table {
    margin-top: 2rem;
}

.records-popup[data-is-loading="true"] > .record-table {
    opacity: 0.5;
}

.records-popup > .record-table > .row {
    height: 4rem;
    border-radius: 0.5rem;
    display: grid;
}
.records-popup > .record-table > .row:nth-child(2n + 1) {
    background: #00000044;
}
.records-popup > .highscores-table > .row {
    grid-template-columns: 5rem 11rem 14rem 10rem 12rem 1fr 1fr;
    grid-template-rows: 100%;
}
body[data-is-mobile="true"] .records-popup > .highscores-table > .row {
    grid-template-columns: 4rem 8rem 12rem 8rem 7rem 1fr 1fr;
}
.records-popup > .consistency-table > .row {
    grid-template-columns: 5rem 20rem 20rem auto;
}

.records-popup > .elo-table > .row {
    grid-template-columns: 5rem 20rem 20rem auto;
}


.records-popup > .record-table > .row > .column {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 1.75rem;
    text-align: center;
}
body[data-is-mobile="true"] .records-popup > .record-table > .row > .column {
    font-size: 1.5rem;
}

body[data-is-mobile="false"] .records-popup > .record-table > .row > .column.place {
    font-size: 2rem;
}

.records-popup > .record-table > .row > .column.name {
    justify-content: start;
    padding-left: 1rem;
    font-size: 2rem;
}


body[data-is-mobile="false"] .records-popup > .record-table > .row > .column.score {
    font-size: 2rem;
}

.records-popup > .record-table > .row > .column.player[data-is-special="true"] {
    color: color-mix(in srgb, var(--theme-color-textFillColor), var(--ui-color-4) 50%);
}

.records-popup > .record-table > .row > .column.player > .account-name {
    font-size: 1.25rem;
    margin-top: -0.25rem;
}
body[data-is-mobile="true"] .records-popup > .record-table > .row > .column.player > .account-name {
    font-size: 1.125rem;
    margin-top: -0.125rem;
}
.changelog-menu {
    overflow-y: scroll;
    touch-action: pan-y;
}

.changelog-menu > .title {
    height: 10rem;
    display: grid;
    place-content: center;
    font-size: 4rem;
}

.changelog-menu > .update-card {
    margin-top: 0;
    margin: 0.75rem 1rem;
    background: var(--ui-color-9);
    border-radius: 0.5rem;
    box-shadow: inset 0 0 0 var(--outline-thickness) #00000044;
    padding: 0.75rem;
}

/*
.changelog-menu > .update-card > .topbar {
    display: flex;
    font-size: 2rem;
    padding: 0.25rem 0.5rem;
    gap: 1rem;
    margin-bottom: 1rem;
    position: relative;
}
.changelog-menu > .update-card > .topbar::after {
    position: absolute;
    content: "";
    inset: 100% 0 auto 0;
    height: 0.375rem;
    background: #00000044;
}

.changelog-menu > .update-card > .content {
    padding: 0 0.5rem 0.25rem 0.5rem;
}
*/


.changelog-menu > .update-card {
    margin-top: 0;
    margin: 0.75rem 1rem;
    background: var(--ui-color-9);
    border-radius: 0.5rem;
    box-shadow: inset 0 0 0 var(--outline-thickness) #00000044;
    padding: 0.75rem;
}

.changelog-menu > .update-card > .topbar {
    display: flex;
    font-size: 2rem;
    gap: 1rem;
    margin-bottom: 0.75rem;
    background: #00000044;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
}
.changelog-menu > .update-card > .content {
    margin: 0.375rem 0.625rem;
}

.changelog-menu > .update-card > .content > a {
    color: color-mix(in srgb, var(--theme-color-textFillColor), var(--ui-color-8) 70%);
}.credits-popup {
    position: relative;
    padding: 1rem;
    text-align: center;
}

.credits-popup > .title {
    height: 5rem;
    display: grid;
    place-content: center;
    font-size: 4rem;
    margin-bottom: 1rem;
}
.credits-popup > .subtitle {
    font-size: 2.5rem;
    margin-top: -0.5rem;
}
.credits-popup > .content {
    font-size: 1.75rem;
}

.credits-popup > .gap {
    height: 1rem
}

.credits-popup > .links {
    opacity: 0.9;
    padding: 0.5rem 0;
}
.credits-popup > .links > a {
    color: inherit;
}


.debug-menu {
    position: fixed;
    pointer-events: none;
    z-index: 1000;
    bottom: 0;
    left: 0;
    background: #00000044;
    padding: 0.5rem 0.75rem;
    border-radius: 0 0.5rem 0 0 ;
    display: flex;
    flex-direction: column;
    align-items: start;
    max-width: 73rem;
}


.debug-menu > .debug-row {
    display: flex;
    background: transparent;
    transition: background 300ms linear;
    gap: 0.5rem;
    max-width: 100%
}
.debug-menu > .debug-row[data-is-changed="true"] {
    background: #ffff0044;
    transition: none;
}
.debug-menu > .debug-row > .content {
    text-wrap: wrap;
    flex-shrink: 1;
}

#spectating-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    place-content: end;
    font-family: "Ubuntu", sans-serif;
    font-size: 2rem;
}

#spectating-screen[data-is-hiding="true"] {
    pointer-events: none;
}

#spectating-screen > .center-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    animation: spectating-screen-show calc(1000ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transform: scale(0.8);
}
@keyframes spectating-screen-show {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: none;
        opacity: 1;
    }
}
#spectating-screen[data-is-hiding="true"] > .center-section {
    animation: spectating-screen-hide calc(200ms * var(--animation-duration-factor)) linear forwards;
}
@keyframes spectating-screen-hide {
    from {
        transform: none;
        opacity: 1;
    }
    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

#spectating-screen > .center-section > .stop-spectating-button {
    margin-bottom: 0.75rem !important;
}

body[data-is-mobile="true"] #spectating-screen > .center-section > .stop-spectating-button {
    margin-bottom: 1.75rem !important;
}


#spectating-screen > .center-section > .ad-wrapper {
    margin-bottom: 1rem;
}
#spectating-screen > .center-section > .ad-wrapper > .placeholder-ad {
    width: 45.5rem;
    height: 6rem;
    background: #1c1c1c;
    border-radius: 0.5rem;
}

/* mobile */
body[data-is-mobile="true"] #spectating-screen > .center-section > .ad-wrapper {
    display: none;
}

.ratio-tracker {
  position: absolute;
  top: 4.625rem;
  left: 0.5rem;
  pointer-events: none;
  background: #00000044;
  border-radius: 0.5rem;
  margin: 0.125rem;
  padding: 0.375rem 0.75rem;
  z-index: 50;
}

.ratio-tracker > .line {
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

.build-presets-menu {

}
.build-presets-menu > .content > .category-title {
  margin: 1.5rem 1rem 0.5rem 1.25rem;
  font-weight: 500;
  font-size: 1.75rem;
  display: flex;
}
.build-presets-menu > .content > .inputs > .settings-edit-row {
  margin-left: 1.25rem;
}



.build-presets-menu > .content > .build-card {
  margin: 0.75rem;
  --color: var(--ui-color-9);
  background: var(--color);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  isolation: isolate;
  border: var(--border-thickness) solid color-mix(in srgb, var(--color), black 50%);
  padding: 0.5rem;
}
.build-presets-menu > .content > .build-card > .main-column {
  flex-grow: 1;
}
.build-presets-menu > .content > .build-card > .main-column > .title {
  font-size: 1.75rem;
  margin-left: 0.25rem;
}
.build-presets-menu > .content > .build-card > .main-column > .build {
  margin-left: 0.25rem;
}
.build-presets-menu > .content > .build-card > .main-column > .keybind {
  margin-left: 0.25rem;
}


.build-presets-menu > .content > .build-card > .main-column > input {
  background: none;
  height: 3rem;
  width: 7rem;
  display: flex;
  font-family: monospace !important;
  outline: none;
  border: none;
  font-size: 1.5rem;
  padding-left: 0.5rem;
  padding-bottom: 0.125rem;
  font-weight: 600;
  outline: none;
  background: color-mix(in srgb, var(--ui-color-9), white 90%);
  border: var(--border-thickness) solid color-mix(in srgb, color-mix(in srgb, var(--ui-color-9), white 90%), black 50%);
  border-radius: 0.5rem;
  width: 23.25rem;
}

.build-presets-menu > .content > .build-card > .main-column > .keybind-select {
  margin-top: 0.375rem;
  background: none;
  height: 3rem;
  width: 7rem;
  display: flex;
  font-family: monospace !important;
  outline: none;
  border: none;
  font-size: 1.5rem;
  padding-bottom: 0.125rem;
  padding-left: 0.125rem;
  font-weight: 600;
  outline: none;
  background: color-mix(in srgb, var(--ui-color-9), white 90%);
  border: var(--border-thickness) solid color-mix(in srgb, color-mix(in srgb, var(--ui-color-9), white 90%), black 50%);
  border-radius: 0.5rem;
  width: 23.25rem;
}

.build-presets-menu > .content > .build-card > .main-column > .point-grid {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-top: 0.5rem;
}
.build-presets-menu > .content > .build-card > .main-column > .point-grid > .point-row {
  display: flex;
  height: 2rem;
  gap: 0rem;
}
.build-presets-menu > .content > .build-card > .main-column > .point-grid > .point-row > * {
  background: #00000044;
  border: 0.375rem solid #00000066;
  width: 2.5rem;
  border-left-width: 0.25rem;
  border-right-width: 0.25rem;
  display: grid;
  place-content: center;
  font-size: 1.25rem;
}

.build-presets-menu > .content > .build-card > .main-column > .point-grid > .point-row > *[data-is-active="true"] {
  background: var(--color);
  border-color: color-mix(in srgb, var(--color), black 50%);
}

.build-presets-menu > .content > .build-card > .main-column > .point-grid > .point-row > *:first-child {
  border-radius: 1rem 0 0 1rem;
  border-left-width: 0.375rem;
  width: 2.75rem;
  padding-left: 0.25rem;
}
.build-presets-menu > .content > .build-card > .main-column > .point-grid > .point-row > .add-point {
  border-radius: 0 1rem 1rem 0;
  border-right-width: 0.375rem;
  width: 3.25rem;
}
.build-presets-menu > .content > .build-card > .main-column > .point-grid > .point-row > .add-point > img {
  height: 1.75rem;
}




.build-presets-menu > .content > .build-card > .buttons-column {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.build-presets-menu > .content > .build-card > .buttons-column > .buttons-row {
  display: flex;
  gap: 0.25rem;
}

.build-presets-menu > .content > .build-card > .buttons-column > *,
.build-presets-menu > .content > .build-card > .buttons-column > .buttons-row > * {
  place-content: center;
  height: 3rem;
}

.build-presets-menu > .content > .no-preset {
  margin: 0.75rem;
  padding: 0.5rem;

  background: #00000044;
  border-radius: 0.5rem;
  height: 6rem;
  display: grid;
  place-content: center;
  margin: 1rem;
  font-size: 1.7rem;
}

.build-presets-menu > .content > .add-preset {
  margin: 0.75rem;
  width: calc(100% - 1.5rem);
  place-content: center;
}
.login-menu {
  overflow-y: scroll !important;
  touch-action: pan-y !important;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}


.login-menu > .header {
  height: 6rem;
  display: grid;
  place-content: center;
  font-size: 3rem;
}


.login-menu > .button,
.login-menu > .button-grid > .button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.login-menu > .button > img {
    position: absolute;
    top: 50%;
    left: 4rem;
    transform: translateY(-50%);
    width: 3rem;
    margin-right: 1rem;
    margin-left: -1rem;
}
.login-menu > .button:active > img {
    transform: translateY(-50%) translateY(0.125rem);
}


.login-menu > .button-grid > .button.double {
  grid-column: span 2;
}

.login-menu > .button.big {
  height: 10rem;
}

.login-menu > .button-grid > .button.big {
  height: 5rem
}

.login-menu > .button.medium {
  height: 6rem;
}
.login-menu > .button-grid > .button.medium {
  height: 3.5rem
}

.login-menu > .button-grid {
  margin-top: 0.5rem;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0.5rem;
}

.login-menu > .button > .text {
  font-size: 2rem;
}.self-profile {
  padding: 1rem;
  overflow-y: scroll !important;
  touch-action: pan-y !important;
  --popup-height: calc(var(--fixed-vh) * 100 - 6rem) !important;
  max-height: fit-content;
}


.self-profile > .topbar {
  display: flex;
}

.self-profile > .topbar > .pfp {
  position: relative;
  background: 
      url(/assets/empty-pfp.svg) center center / cover,
      linear-gradient(to bottom, var(--fallback-color), var(--fallback-color));
  width: 11rem;
  height: 11rem;
  border-radius: 50%;
  margin: 2rem;
  box-shadow: 0 0.25rem 0.5rem #00000044
}
.self-profile > .topbar > .pfp::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  box-shadow: inset 0 0 0 var(--outline-thickness) #00000044;
}
.self-profile > .topbar > .pfp > .img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--image) center center / cover;
}


.self-profile > .topbar > .pfp > .country-flag {
    position: absolute;
    inset: auto 0 0 auto;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
}
.self-profile > .topbar > .pfp > .country-flag::after {
    border-radius: 50%;
    box-shadow: inset 0 0 0 var(--outline-thickness) #00000044;
}



.self-profile > .topbar > .name-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
}
.self-profile > .topbar > .name-section > .name {
  font-size: 4rem;
}
.self-profile > .topbar > .name-section > .discord-profile,
.self-profile > .topbar > .name-section > .role {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding-left: 0.25rem;
  margin-top: -0.5rem;
  font-size: 1.75rem;
}
.self-profile > .topbar > .name-section > .discord-profile > img {
  width: 2rem;
  height: 2rem;
}

.self-profile > .topbar > .buttons-section {
  display: flex;
  flex-direction: column;
  align-items: end;
  justify-content: center;
  margin-right: 2rem;
  gap: 1rem;
}

.self-profile .about-stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 0 1rem;
    margin-bottom: 1rem;
}

.self-profile .about-stats-row > .stat {
    height: 4rem;
    /*border-radius: 0.75rem;*/
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
    padding-bottom: 0.125rem;

    background: #00000044;
    border-radius: 0.75rem;
}

.self-profile .bio {
    padding: 0 1.5rem;
}




.self-profile .stats-tab-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    padding: 0 0.5rem;
}

.self-profile .stats-tab-grid > .stat {
  height: 4rem;
  /*border-radius: 0.75rem;*/
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  padding-bottom: 0.125rem;

  background: var(--color);
  border-radius: 0.75rem;
  box-shadow: inset 0 0 0 0.25rem #00000044;
}





.self-profile > .profile-subscription-banner {
  margin: 1rem;
  margin-top: 2rem;
  border-radius: 1rem;
  height: 6rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0.25rem 0.5rem #00000044;
  isolation: isolate;
  transition: box-shadow 1000ms cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(/assets/lobby_backgrounds/dark_lower_layer.png) center center / cover;
  padding: 0 1rem;
}

.self-profile > .profile-subscription-banner::after {
  content: "";
  border: var(--border-thickness) solid #00000044;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  pointer-events: none;
}


.self-profile > .profile-subscription-banner > .title {
  font-size: 3rem;
  flex-grow: 1;
  margin-left: 0.75rem;
}
.self-profile > .profile-subscription-banner > .price-column {
  text-align: right;
  margin-right: 1rem;
}


.self-profile > .profile-subscription-banner > button {
  height: 3rem;
}





.self-profile .ranked-elo-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    padding: 0 1rem;
    margin-bottom: 1rem;
}

.self-profile .ranked-elo-row > .stat {
    height: 4rem;
    /*border-radius: 0.75rem;*/
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
    padding-bottom: 0.125rem;

    background: #00000044;
    border-radius: 0.75rem;
}

.self-profile > .line {
  height: 0.375rem;
  background: rgba(0,0,0,0.375);
  margin: 1.5rem 0.5rem;
}


.self-profile > .linked-accounts-title {
  text-align: center;
  font-size: 1.75rem;
  margin-bottom: 1.5rem;
}

.self-profile > .linked-accounts {
  display: flex;
  gap: 1rem;
  padding: 0 1rem;
  margin-bottom: 1rem;
}
.self-profile > .linked-accounts > .account {
  width: 0;
  flex-grow: 1;
  height: 5rem;
  /*border-radius: 0.75rem;*/
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1.5rem;
  padding-bottom: 0.625rem;

  background: #00000044;
  border-radius: 0.75rem;
  flex-wrap: wrap;
}


.self-profile > .linked-accounts > .account > .button {
  height: 3.5rem;
  margin-right: -0.75rem;
}
.friends-list-menu {

}

.friends-list-menu > .content > .login-card {
    height: 12rem;
    margin: 0.75rem;
    --color: var(--ui-color-9);
    background: var(--color);
    /*border-radius: 0.75rem;*/
    border-radius: 0.5rem;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /*box-shadow: inset 0 0 0 0.25rem rgba(0,0,0,0.5);*/
    box-shadow: inset 0 0 0 var(--outline-thickness) rgba(0,0,0,0.5);
    user-select: none;
    overflow: hidden;
}
.friends-list-menu > .content > .login-card > .text {
    font-size: 2rem;
    margin-bottom: 1rem;
    margin-top: 0.5rem;
}
.friends-list-menu > .content > .login-card > .button {
    padding: 0 1.25rem !important;
}


.friends-list-menu > .content > .loading-text {
    height: 7rem;
    display: grid;
    place-content: center;
    font-size: 2rem;
}




.friends-list-menu > .content > .friend-card {
    margin: 0.75rem;
    --color: var(--ui-color-9);
    background: var(--color);
    /*border-radius: 0.75rem;*/
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    isolation: isolate;

    /*box-shadow: inset 0 0 0 0.25rem rgba(0,0,0,0.5);*/
    box-shadow: inset 0 0 0 var(--outline-thickness) rgba(0,0,0,0.5);
    user-select: none;
    overflow: hidden;
    cursor: pointer;
}
.friends-list-menu > .content > .friend-card:not(.self-card)[data-is-offline="true"] {
    opacity: 0.5;
}
.friends-list-menu > .content > .self-card {
    background: none;
    box-shadow: none;
    position: relative;
    margin: 1.25rem 0.75rem;
}
.friends-list-menu > .content > .self-card[data-is-changing-status-sharing="true"] {
    opacity: 0.5;
}
.friends-list-menu > .content > .self-card::before {
    position: absolute;
    content: "";
    inset: 0.125rem;
    border-radius: 0.5rem;
    z-index: -1;
    background: #00000044;
}



.friends-list-menu > .content > .friend-card > .pfp-column {
    display: grid;
    place-content: center;
}
.friends-list-menu > .content > .friend-card > .pfp-column > .pfp {
    margin: 1.25rem;
    background: 
        url(/assets/empty-pfp.svg) center center / cover,
        linear-gradient(to bottom, var(--fallback-color), var(--fallback-color));
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    position: relative;
    isolation: isolate;
}

.friends-list-menu > .content > .friend-card > .pfp-column > .pfp[data-is-online="true"]::before {
    position: absolute;
    content: "";
    inset: auto 0rem 0rem auto;
    background: var(--ui-color-2);
    border-radius: 50%;
    width: 2.25rem;
    height: 2.25rem;
    box-shadow: inset 0 0 0 var(--outline-thickness) #00000044;
    z-index: 4;
}


.friends-list-menu > .content > .friend-card:not(.self-card)[data-is-offline="true"] > .pfp-column > .pfp {
    margin: 1rem 1.25rem 1rem 1.25rem;
    width: 4.5rem;
    height: 4.5rem;
}

.friends-list-menu > .content > .friend-card > .pfp-column > .pfp > .img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--image) center center / cover;
    z-index: 2;
}


.friends-list-menu > .content > .friend-card > .pfp-column > .pfp::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    box-shadow: inset 0 0 0 var(--outline-thickness) #00000044;
    z-index: 3;
}


.friends-list-menu > .content > .friend-card > .main-column {
    flex-grow: 1;
    margin: 1rem 0;
}


.friends-list-menu > .content > .friend-card > .main-column > .name {
    font-size: 2rem;
}
.friends-list-menu > .content > .friend-card > .main-column > .in-game-name {
    margin-top: -0.25rem;
}
.friends-list-menu > .content > .friend-card > .main-column > .discord-name {
    margin-top: -0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.friends-list-menu > .content > .friend-card > .main-column > .discord-name > img {
    width: 2rem;
    height: 2rem;
}


.friends-list-menu > .content > .friend-card > .main-column > .playing-status {
    margin-top: -0.125rem;
}

.friends-list-menu > .content > .friend-card > .buttons-column {
    display: flex;
    flex-direction: column;
    margin: 1rem;
    gap: 0.5rem;
}
.friends-list-menu > .content > .friend-card > .buttons-column > * {
    place-content: center;
    height: 3rem;
}
.settings-menu > .content > .player-search-input {
    width: calc(100% - 2rem);
    margin: 1rem;
    border-radius: 0.5rem;
    overflow: hidden;
    background: var(--ui-color-9);
    box-shadow: inset 0 0 0 var(--outline-thickness) rgba(0,0,0,0.5);
    border: none;
    outline: none;
    height: 4rem;
    font-size: 1.75rem;
    text-align: center;
    color: inherit;
    caret-color: black;
    
    /*text-shadow: var(--text-shadow), 0 0 2rem black;*/
    text-shadow: var(--text-shadow);
    display: grid;
    place-content: center;
    padding-bottom: 0.125rem;
    font-weight: 600;
    padding-left: 1rem;
}
.settings-menu > .content > .player-search-input::placeholder {
    color: inherit;
    opacity: 0.5;
}


.settings-menu > .content > .player-search-input:focus {
    background: #ffffff88;
}

.settings-menu > .content > .player-search-status {
    background: #00000044;
    border-radius: 0.5rem;
    height: 6rem;
    display: grid;
    place-content: center;
    margin: 1rem;
    font-size: 1.7rem;
}
.friend-requests-menu > .content > .section-title {
    font-size: 1.75rem;
    margin: 1rem;
    margin-top: 3rem;
    padding-left: 0.5rem;
}

.friend-requests-menu > .content > .empty-friend-requests {
    background: #00000044;
    border-radius: 0.5rem;
    height: 4rem;
    display: grid;
    place-content: center;
    margin: 1rem;
    font-size: 1.7rem;
}
.change-username-popup {
    position: relative;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.change-username-popup > .title {
    height: 5rem;
    display: grid;
    place-content: center;
    font-size: 4rem;
}

.change-username-popup > .input {
    margin: 1rem;
}

.change-username-popup > .input {
    width: 30rem;
    height: 4rem;

    border: none;
    padding: none;
    outline: none;
    text-align: center;
    background: none;
    color: inherit;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 0.125rem;
    font-family: inherit;
    font-weight: inherit;
    caret-color: black;
    border-radius: inherit;
    isolation: isolate;

    border-radius: 0.5rem;
    background: #dddddd;
    font-family: inherit;
    font-weight: inherit;
    text-shadow: var(--text-shadow);
    box-shadow:
        inset 0 0 0 0.3125rem #00000088;

    transition:
        box-shadow calc(300ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1),
        border calc(300ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1);
}

.change-username-popup > .input:focus {
    box-shadow:
        inset 0 0 0 0.3125rem white,
        inset 0 0 0 0.5625rem #000000,
        0 0 0 0.25rem #000000;
}
.change-username-popup > .input::placeholder {
    color: black;
    text-shadow: none;
    font-size: 1.75rem;
    opacity: 0.5;
}
.reconnection-popup {
    position: relative;
    padding: 1rem;
    text-align: center;
}

.reconnection-popup > .title {
    height: 5rem;
    display: grid;
    place-content: center;
    font-size: 4rem;
    margin-bottom: 1rem;
}
.reconnection-popup > .subtitle {
    font-size: 2.5rem;
    margin-top: -0.5rem;
}
.reconnection-popup > .content {
    margin-bottom: 1.5rem;
    font-size: 1.75rem;
}

.reconnection-popup > .gap {
    height: 1rem
}

.reconnection-popup > .buttons-row {
    display: flex;
    justify-content: center;
    gap: 1rem;
}



.sandbox-browser-popup {
    position: relative;
    padding: 1rem;
    overflow-y: scroll !important;
    touch-action: pan-y !important;
}

.sandbox-browser-popup > .title {
    height: 10rem;
    display: grid;
    place-content: center;
    font-size: 4rem;
    margin-bottom: 1rem;
}
/* mobile */
body[data-is-mobile="true"] .sandbox-browser-popup > .title {
    height: 5rem;
}

.sandbox-browser-popup > .sandbox-list-title {
    margin-top: 1rem;
    font-size: 1.75rem;
    padding-left: 0.5rem;
}


.sandbox-browser-popup > .sandbox-row {
    height: 6rem;
    border-radius: 0.5rem;
    display: flex;
    background: #00000044;
    align-items: center;
    padding-right: 1rem;
    padding-left: 1.25rem;
    gap: 1rem;
    margin-top: 0.75rem;
}

.sandbox-browser-popup > .sandbox-row > .name-column {
    flex-grow: 1;
}

.sandbox-browser-popup > .sandbox-row > .name-column > .sandbox-name {
    margin-top: -0.125rem;
    font-size: 1.75rem;
}
.sandbox-browser-popup > .sandbox-row > .name-column > .sandbox-host {
    opacity: 0.875;
}



.sandbox-browser-popup > .sandbox-row > .current-sandbox-name-input {
  width: 24rem;
  height: 4rem;
  position: relative;
  border-radius: 0.5rem;
  background: #dddddd;
  border: var(--border-thickness) solid color-mix(in srgb, #dddddd, black 50%);
      
  /*text-shadow: var(--text-shadow), 0 0 2rem black;*/
  font-family: "Ubuntu", sans-serif;
  text-shadow: var(--text-shadow);
  
  transition:
    box-shadow calc(300ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1),
    border calc(300ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1),
    transform calc(700ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1),
    opacity calc(300ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1);
}

.sandbox-browser-popup > .sandbox-row > .current-sandbox-name-input > input {
  position: absolute;
  inset: calc(-1 * var(--border-thickness));
  vertical-align: middle;
  width: calc(100% + 2 * var(--border-thickness));
  height: calc(100% + 2 * var(--border-thickness));
  
  border: none;
  padding: none;
  outline: none;
  text-align: center;
  background: none;
  color: inherit;
  text-shadow: inherit;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  text-align: left;
  padding-bottom: 0.125rem;
  font-family: "Ubuntu", sans-serif;
  font-weight: 600;
  caret-color: black;
  border-radius: inherit;
  isolation: isolate;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 1.5rem;
  
  transition:
    box-shadow calc(300ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1),
    border calc(300ms * var(--animation-duration-factor)) cubic-bezier(0.16, 1, 0.3, 1);
}

.sandbox-browser-popup > .sandbox-row > .current-sandbox-name-input > input:focus {
  box-shadow:
    inset 0 0 0 0.25rem white,
    inset 0 0 0 0.5rem #000000,
    0 0 0 0.25rem #000000;
}
.sandbox-browser-popup > .sandbox-row > .current-sandbox-name-input > input::placeholder {
  color: black;
  text-shadow: none;
  opacity: 0.5;
}.ranked-outcome-screen {
  position: fixed;
  inset: 0;
  height: calc(var(--fixed-vh) * 100);
  width: calc(var(--fixed-vw) * 100);
  z-index: 200;
  display: grid;
  place-content: center;
  isolation: isolate;
}

.ranked-outcome-screen[data-is-hiding="true"] {
  pointer-events: none;
}


.ranked-outcome-screen > .background {
  opacity: 0.875;
  background: black;
  width: calc(var(--fixed-vd) * 100);
  height: calc(var(--fixed-vd) * 100);
  position: absolute;
  top: calc(50% - var(--fixed-vd) * 50);
  left: calc(50% - var(--fixed-vd) * 50);
  border-radius: 50%;
  transform: scale(1.2);
  animation:
    ranked-outcome-background-scale-in 1500ms cubic-bezier(0.16, 1, 0.3, 1) forwards,
    ranked-outcome-background-opacity-in 200ms linear;
  z-index: -1;
}

.ranked-outcome-screen[data-is-hiding="true"] > .background {
  animation: ranked-outcome-background-scale-out 1000ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes ranked-outcome-background-scale-in {
  from {
    transform: scale(0);
  }
}
@keyframes ranked-outcome-background-opacity-in {
  from {
    opacity: 0;
  }
}

@keyframes ranked-outcome-background-scale-out {
  from {
    transform: translateY(0) scale(1);
  }
  to {
    transform: translateY(calc(var(--fixed-vh) * 60)) scale(0);
  }
}





.ranked-outcome-screen > .center-section {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}


.ranked-outcome-screen[data-is-hiding="true"] > .center-section {
  animation: ranked-outcome-screen-hide 1000ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes ranked-outcome-screen-hide {
  to {
    transform: translateY(calc(var(--fixed-vh) * 100));
    opacity: 0;
  }
}


.ranked-outcome-screen > .center-section > .elo-section {
  width: 50rem;
  height: 25rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  transform: scale(1.2);
}
.ranked-outcome-screen > .center-section > .elo-section > .elo-number {
  opacity: 0.875;
  display: flex;
  --digit-font-size: 8rem;
  --digit-height: 8rem;
  --digit-width: 5.25rem;
  --elo-number-animation-progress: 0;
  
  transform: scale(0);
  pointer-events: none;
  touch-action: none;

  animation:
    ranked-elo-number-animation 1500ms ease forwards 500ms,
    ranked-elo-number-scale-in 1500ms cubic-bezier(0.16, 1, 0.3, 1) forwards 300ms;
}

@keyframes ranked-elo-number-scale-in {
  to {
    transform: scale(1);
  }
}

@keyframes ranked-elo-number-animation {
  to {
    --elo-number-animation-progress: 1;
  }
}

@property --elo-number-animation-progress {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.ranked-outcome-screen > .center-section > .elo-section > .elo-number > .digit-scroller {
  width: var(--digit-width);
  height: var(--digit-height);
  
  --current-value: calc(var(--starting-value) + (var(--ending-value) - var(--starting-value)) * var(--elo-number-animation-progress));
}
.ranked-outcome-screen > .center-section > .elo-section > .elo-number > .digit-scroller > .scroller-digit {
  position: absolute;
  width: var(--digit-width);
  height: var(--digit-height);
  display: grid;
  place-content: center;
  font-size: var(--digit-font-size);
  transform: translateY(calc(-1 * (var(--index) - var(--current-value)) * var(--digit-height)));
  opacity: calc(max(0, 1 - abs((var(--index) - var(--current-value)))));

  --text-outline-width: 0.375rem; /* 2px on 1080p */

  text-shadow:
    calc(var(--text-outline-width) * 1) calc(var(--text-outline-width) *  0) 0 var(--text-outline-color),
    calc(var(--text-outline-width) * 0.8662109375) calc(var(--text-outline-width) *  0.5) 0 var(--text-outline-color),
    calc(var(--text-outline-width) * 0.5) calc(var(--text-outline-width) *  0.8662109375) 0 var(--text-outline-color),
    calc(var(--text-outline-width) * 0) calc(var(--text-outline-width) *  1) 0 var(--text-outline-color),
    calc(var(--text-outline-width) * -0.5) calc(var(--text-outline-width) *  0.8662109375) 0 var(--text-outline-color),
    calc(var(--text-outline-width) * -0.8662109375) calc(var(--text-outline-width) *  0.5) 0 var(--text-outline-color),
    calc(var(--text-outline-width) * -1) calc(var(--text-outline-width) *  0) 0 var(--text-outline-color),
    calc(var(--text-outline-width) * -0.8662109375) calc(var(--text-outline-width) *  -0.5) 0 var(--text-outline-color),
    calc(var(--text-outline-width) * -0.5) calc(var(--text-outline-width) *  -0.8662109375) 0 var(--text-outline-color),
    calc(var(--text-outline-width) * 0) calc(var(--text-outline-width) *  -1) 0 var(--text-outline-color),
    calc(var(--text-outline-width) * 0.5) calc(var(--text-outline-width) *  -0.8662109375) 0 var(--text-outline-color),
    calc(var(--text-outline-width) * 0.8662109375) calc(var(--text-outline-width) *  -0.5) 0 var(--text-outline-color),
    calc(var(--text-outline-width) * 1) calc(var(--text-outline-width) *  0) 0 var(--text-outline-color),
    calc(var(--text-outline-width) * 0.8662109375) calc(var(--text-outline-width) *  0.5) 0 var(--text-outline-color),
    calc(var(--text-outline-width) * 0.5) calc(var(--text-outline-width) *  0.8662109375) 0 var(--text-outline-color),
    calc(var(--text-outline-width) * 0) calc(var(--text-outline-width) *  1) 0 var(--text-outline-color) !important;

}


.ranked-outcome-screen > .center-section > .elo-section > .elo-category {
  opacity: 0;
  
  animation:
    ranked-elo-category-scale-in 1500ms cubic-bezier(0.16, 1, 0.3, 1) forwards 2300ms,
    ranked-elo-category-opacity-in 300ms forwards 2300ms;
}

@keyframes ranked-elo-category-scale-in {
  from {
    transform: scale(0.5);
    transform: translateY(1.5rem);
  }
}
@keyframes ranked-elo-category-opacity-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.875;
  }
}

.ranked-outcome-screen > .center-section > .elo-section > .elo-change {
  opacity: 0;
  margin-top: 0.125rem;
  font-size: 2rem;
  
  animation:
    ranked-elo-change-scale-in 1500ms cubic-bezier(0.16, 1, 0.3, 1) forwards 2600ms,
    ranked-elo-change-opacity-in 300ms forwards 2600ms;
}

@keyframes ranked-elo-change-scale-in {
  from {
    transform: scale(0.5);
    transform: translateY(-1.5rem);
  }
}
@keyframes ranked-elo-change-opacity-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.875;
  }
}



.ranked-outcome-screen > .center-section > .bottom-buttons {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  height: 0;
  opacity: 0;
  animation:
    ranked-elo-button-scale-in 1500ms cubic-bezier(0.16, 1, 0.3, 1) forwards 3000ms,
    ranked-elo-button-opacity-in 300ms forwards 3000ms;
}


@keyframes ranked-elo-button-scale-in {
  from {
    transform: scale(0.5);
    transform: translateY(-1.5rem);
  }
}
@keyframes ranked-elo-button-opacity-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.875;
  }
}


.ranked-outcome-screen > .center-section > .bottom-buttons > * {
  padding: 0 1rem;
}.account-linking-confirmation-popup {
    position: relative;
    padding: 1.25rem 2rem;
    text-align: center;
    width: 48rem !important;
}

.account-linking-confirmation-popup > .title {
  display: grid;
  place-content: center;
  font-size: 2rem;
  margin-bottom: 1rem;
}
.account-linking-confirmation-popup > .subtitle {
  font-size: 1.75rem;
  margin-bottom: 1rem;
}
.account-linking-confirmation-popup > .body {
  font-size: 1.75rem;
  margin-bottom: 2rem;
}


.account-linking-confirmation-popup > .buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 0.25rem;
}