* {
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: Oxanium; /* Гарнитура шрифта */
  src: url(../assets/fonts/Oxanium.ttf); /* Путь к файлу со шрифтом */
}

html,
body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  background-color: black;
  /*touch-action: none;*/
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: none;
}

div.content {
  width: 100%;
  height: 100%;
  position: relative;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: none;
}

div.spacer {
  width: 100%;
  height: 300px;
}

@supports not (-webkit-touch-callout: none) {
  /* CSS for other than iOS devices */
  div.spacer {
    display: none;
  }
  div.content {
    overflow: hidden;
  }
}

@supports (-webkit-touch-callout: none) {
  /* CSS specific to iOS devices */
  div.spacer {
    display: block;
  }
  div.content {
    overflow: visible;
  }
}

@media screen and (orientation: portrait) {
  div.spacer {
    display: none;
  }
  div.content {
    overflow: hidden;
  }
  body {
    overflow: hidden;
  }
}

.canvas-wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  height: 100%;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: none;
}

canvas {
  transform: translate(-50%, -50%);
  height: 100%;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: none;
}

.rules {
  color: white;
  font-family:  Oxanium, Arial, Helvetica, sans-serif;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  font-size: 9pt;
}

.rules section {
  margin-bottom: 2em;
}

.rules h3 {
  color: #feff00;
  margin-bottom: 1.5em;
}

.rules p {
  margin-bottom: 1em;
  box-sizing: border-box;
}

.rules a {
  color: #feff00;
}

/* Style the scrollbar itself */
.rules::-webkit-scrollbar {
  width: 6px; /* Change width of the scrollbar */
}

/* Style the scrollbar track */
.rules::-webkit-scrollbar-track {
  background: #262626; /* Change track color */
}

/* Style the scrollbar handle */
.rules::-webkit-scrollbar-thumb {
  background: #888; /* Change handle color */
  border-radius: 3px; /* Make handle corners rounded */

  /* Add a transition for a smoother drag */
  transition: background 0.3s ease;
}

/* Style the scrollbar handle on hover */
.rules::-webkit-scrollbar-thumb:hover {
  background: #555; /* Change handle color on hover */
}

.rules ul {
  list-style-type: none; /* Убираем стандартные точки */
}

.rules li {
  margin-left: 16px;
}

.rules li::before {
  content: "•"; /* Добавляем точку */
  color: white; /* Задаем цвет точки */
  display: inline-block;
  width: 1em;
  margin-left: -1em; /* Сдвигаем точку немного влево */
}

.error-popup {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  background-color: #26262680;

  font-family: Oxanium, Arial, Helvetica, sans-serif;

  transition: all ease-in-out 0.2s;
  opacity: 0;
  font-size: 12px;
  display: flex;
  flex-grow: 0;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;

  .error-popup__icon {
    height: 1em;
    width: auto;
  }

  .error-popup__body {
    display: flex;
    flex-direction: column;
    width: 200px;
    min-height: 100px;
    max-height: 90vw;
    padding: 1em 1.5em 2em 1.5em;
    border-radius: 0.8em;
    scale: 0;
    justify-content: space-between;
    transition: all ease-in-out 0.2s;
    background-color: #161719ee;
    color: #b8b7b8;
  }

  .error-popup__header {
    margin-left: -0.5em;
    font-weight: bold;
    font-size: 120%;
  }

  .error-popup__content {
    overflow-x: hidden;
    overflow-y: auto;
    text-align: center;
    word-wrap: normal;
  }

  .error-popup__buttons {
    text-align: center;
    margin-top: 1em;
    display: flex;
    align-content: center;
    justify-content: space-around;

    button {
      -webkit-appearance: button;
      appearance: button;
      font-size: 100%;
      padding: 0.5em 0em 0.5em 0em;
      min-width: 80px;
      background-color: #2a2a2a;
      color: white;
      border: none;
      text-transform: none;
      outline: none;
      border-radius: 0.4em;
      font-family: Oxanium, Arial, Helvetica, sans-serif;
      cursor: pointer;
      user-select: none;
    }

    button:focus {
      border: 0.1rem solid #866c02;
      /* border: none; */
      outline: none;
      background-color: #2a2a2a;
      color: white;
    }

    button:active {
      border: none;
      outline: none;
      background-color: #2a2a2a;
      color: white;
    }
  }
}