@font-face {
  font-family: 'BalooCyrillic';
  src: url('../assets/fonts/BALOO-CYRILLIC.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --y_overflow: 1px;
  touch-action: none !important;
}

html {
  margin: 0px;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: none !important;
  overscroll-behavior: none;
}

body {
  margin-top: var(--y_overflow);
  margin-left: 0px;
  margin-right: 0px;
  display: flex;
  padding: 0;
  width: 100%;
  height: calc(100% + var(--y_overflow));
  overflow: hidden;
  touch-action: none !important;
  overscroll-behavior: none;
}

canvas {
  touch-action: none !important;
}

#dbgText {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  color: #000;
  font-size: 14px;
  overflow-wrap: break-word;
  z-index: 30;
}

#allCont {
  position: absolute;
  width: 100%;
  height: 5000px;
  left: 0px;
  top: 0px;
  overflow-y: auto;
}
#loadingCanvas {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 200;
}
#headerCanvas {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100px;
}
#underBoardCanvas {
  position: absolute;
  left: 0px;
  top: 100px;
}
#boardCanvas {
  position: absolute;
  left: 0px;
  top: 100px;
}
#footerCanvas {
  position: absolute;
  left: 0px;
  top: 0px;
  height: calc(100px + var(--y_overflow));
  z-index: 119;
}
#lobbyCanvas {
  position: absolute;
  left: 0px;
  top: 0px;
}
#gameRoomCanvas {
  position: absolute;
  left: 0px;
  top: 0px;
}
#dailyChallengesCanvas {
  position: absolute;
  left: 0px;
  top: 0px;
}
#enemySearchCanvas {
  position: absolute;
  left: 0px;
  top: 0px;
}
#screenLoaderCanvas {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 999;
  pointer-events: none;
}
#debriefingCanvas {
  position: absolute;
  left: 0px;
  top: 0px;
}
#tournamentsEnemySearchCanvas{
  position: absolute;
  left: 0px;
  top: 0px;
}
#particlesOnboardCanvas {
  position: absolute;
  pointer-events: none;
  z-index: 120;
}
#particlesBigCanvas {
  position: absolute;
  pointer-events: none;
  z-index: 121;
  left: 0px;
  top: 0px;
}
#particlesRocketsCanvas {
  position: absolute;
  pointer-events: none;
  z-index: 122;
}

#hintsCanvas {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 200; 
  pointer-events: none;
}

#particlesWebGLUnderCanvas {
  position: absolute;
  pointer-events: none;
  z-index: 110;
  left: 0px;
  top: 0px;
}

#particlesWebGLAboveCanvas {
  position: absolute;
  pointer-events: none;
  z-index: 121;
  left: 0px;
  top: 0px;
}

#boosterIconCanvas {
  position: absolute;
  pointer-events: none;
  z-index: 130; 
}

#dialogCanvas {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 150;
}
#dialogCanvas.show {
  animation: bounceIn 0.3s ease forwards;
}
#dialogOverlay {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 149;
  background: rgba(0, 0, 0, 0.8);
}
#tooltipCanvas {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 130;
}
#tooltipCanvas.show {
  animation: bounceIn 0.3s ease forwards;
}

#overlayCanvas {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 110;
}
#overlayCanvas.show {
  animation: bounceIn 0.3s ease forwards;
}
#overlayBackground {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 109;
  background: rgba(0, 0, 0, 0.8);
}

@keyframes bounceIn {
  0% {
    transform: scale(0.98);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}