*,
*::before,
*::after {
  box-sizing: border-box;
  user-select: none;
  -webkit-user-drag: none;
}

body {
  background-color: #000;
  color: #eee;
  overflow: hidden;
  padding: 0;
  margin: 0;
  --canvasscale: 1;
}

body,
img {
  user-select: none;
  -webkit-user-drag: none;
}

html,
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-smooth: always;

  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
  touch-action: manipulation;
  -ms-touch-action: manipulation;
  -webkit-touch-callout: none;
  scroll-behavior: smooth;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently */
}

* {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -khtml-user-select: none;
  /* Konqueror */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently supported by Chrome and Opera */
  touch-action: manipulation;
  /* Dokunma hareketlerini yönetir */
}

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /* WebKit tabanlı tarayıcılar için */
  -moz-tap-highlight-color: rgba(0, 0, 0, 0);
  /* Mozilla tabanlı tarayıcılar için */
}

:root {
  --brandColor: #fd9700;
  --circlePath: circle(50% at 50% 50%);
}

hr {
  pointer-events: none;
}

.game-container {
  width: 100%;
  height: auto;
}

canvas {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  touch-action: none;
  background: #000;
}

/*
.LoadingContainer {
  background: #000;
  top: 0;
  left: 0;
  z-index: 99999999;
  display: flex;
  width: 100vw;
  height: 100vh;
  position: fixed;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: column;
  pointer-events: none
}

.LoadingContainer.transparentLoadingContainer {
  opacity: .5
}

.LoadingContainer .centered {
  display: grid;
  place-items: center;
  position: relative
}

@media screen and (max-width: 480px) {
  .loadingLogo {
    zoom: 75%
  }
}

.LoadingContainer .loadingLogo>img {
  width: 200px;
  animation: loadingLogo forwards 3000ms ease-in-out
}

.LoadingContainer .LogoContainer {
  padding-top: 1px;
  transform: scale(1.3);
  transform-origin: center
}

.loadingBottom {
  margin-top: 2rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: .5em;
  color: #fff
}
.invisible {
  display: none !important;
}
.modal-root {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100vh - 50px);
  height: calc(100dvh - 50px);
  display: grid;
  place-items: center;
  z-index: 999999999;
  background: rgba(0, 0, 0, 0.4);
}

.modal-root#loadingBar {
  opacity: 0.7;
}

.LoadingContainer .loadingBar,
.modal-root .loadingBar {
  width: 1.5rem;
  height: 1.5rem;
  border: 4px solid #ff9800;
  border-right-color: transparent;
  border-radius: 50%;
  animation: loadingBar 1s linear infinite
}

.modal-root .loadingBar {
  width: 3em;
  height: 3em;
  border: 4px solid #fff;
  border-right-color: transparent;
}


@keyframes loadingBar {
  0% {
    transform: rotate(0deg)
  }

  100% {
    transform: rotate(360deg)
  }
}

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

  25% {
    transform: rotate(0deg)
  }

  50% {
    transform: rotate(3deg)
  }

  75% {
    transform: rotate(3deg)
  }

  100% {
    transform: rotate(3deg)
  }
}

.LoadingContainer .loader {
  width: 240px;
  height: 8px;
  background: #fff;
  border-radius: 6px;
  overflow: hidden
}

.LoadingContainer .loader .inline {
  width: 0;
  height: 8px;
  background: #f52a2a;
  transition: all 200ms linear
}

.LoadingContainer .finalizeLogo {
  animation: finalizeLogo 500ms linear
}

@keyframes finalizeLogo {
  0% {
    width: 90%
  }

  100% {
    width: 100%
  }
}
*/