@import url("https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap"); /* import font */
:root {
  --white: #f9f9f9;
  --black: #36383f;
  --gray: #85888c;
}

body {
  background-color: var(--white);
  font-family: "Exo 2", sans-serif;
  /* font-family: "Roboto Flex", sans-serif; */
}

/* .exo-2-<uniquifier > {
  font-family: "Exo 2", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
} */
/* 
@font-face {
  font-family: "Exo 2";
  font-weight: 300;
  font-style: normal;
  font-optical-sizing: auto;
}

@font-face {
  font-family: "Exo 2";
  font-weight: 400;
  font-style: normal;
  font-optical-sizing: auto;
}

@font-face {
  font-family: "Exo 2";
  font-weight: 700;
  font-style: normal;
  font-optical-sizing: auto;
}

@font-face {
  font-family: "Exo 2";
  font-weight: 300;
  font-style: italic;
  font-optical-sizing: auto;
}

@font-face {
  font-family: "Exo 2";
  font-weight: 400;
  font-style: italic;
  font-optical-sizing: auto;
} */

.obs {
  /* font-family наследуется от :root */
}

.no-decor {
  text-decoration: none;
}

.base-green {
  color: #09cc86;
}

.header-stat-small-block {
  width: 200px;
  height: 80px;
}

.header-stat-small-number {
  font-size: 40px;
  font-weight: 700;
  color: #09cc86;
  line-height: 45px;
}

.header-stat-small-text {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 1.5px;
}
.header-std-text {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: normal;
}

.base-btn,
.base-btn-small,
.base-btn-yellow,
.base-btn-small-yellow,
.base-btn-red,
.base-btn-small-red {
  background-color: white;
  color: #36383f;
  font-weight: 400;
  letter-spacing: 1.5px;
  border: 2px solid #09cc86;
  border-radius: 4px;
  transition: 0.4s;
  text-decoration: none;
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.base-btn-yellow {
  border: 2px solid #fade3d;
}

.base-btn-red {
  border: 2px solid #f00;
}

.base-btn-small {
  padding: 2px 4px;
}

.base-btn-small-yellow {
  border: 2px solid #fade3d;
  padding: 2px 4px;
}

.base-btn-small-red {
  border: 2px solid #f00;
  padding: 2px 4px;
}

a.base-btn:hover,
a.base-btn-small:hover,
a.base-btn-yellow:hover,
a.base-btn-small-yellow:hover,
a.base-btn-red:hover,
a.base-btn-small-red:hover,
.base-btn:hover,
.base-btn-small:hover,
.base-btn-yellow:hover,
.base-btn-small-yellow:hover,
.base-btn-red:hover,
.base-btn-small-red:hover {
  background-color: #09cc86;
  color: white;
}

.fade-out {
  opacity: 0;
  transition: opacity 0.5s ease-in-out; /* Плавное изменение opacity за 0.5 секунд */
}


.who-move {
  text-decoration-line: underline;
  text-decoration-color: red;
}

.tournament-box {
  background-color: white;
  border-radius: 10px;
  padding: 0;
  height: 120px;
}

.tournament-box-name {
  /* font-size: 18px; */
  font-size: calc(18px + 2 * (100vw - 320px) / 880);
  font-weight: 700;
}

.current-score {
  position: absolute;
  left: 0;
  top: 15px;
  z-index: 100;
  color: #525fce;
  font-size: 20px;
  font-weight: 700;
  background: white;
}

.tournament-name {
  font-size: calc(20px + 8 * (100vw - 320px) / 880);
}

.final-score {
  color: #525fce;
  font-weight: 700;
  font-size: calc(25px + 10 * (100vw - 320px) / 880);
}

.current-require {
  color: #09cc86;
  font-size: calc(25px + 15 * (100vw - 320px) / 880);
}

.player-name {
  font-size: calc(12px + 8 * (100vw - 320px) / 880);
}

.bottom-line-text {
  font-weight: 400;
  font-size: calc(8px + 4 * (100vw - 320px) / 880);
}

/* Сетка турнира */
.brackets-bracket {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.brackets-round-headers {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.admin-brackets-round-headers {
  justify-content: start;
  margin-bottom: 20px;
}

.brackets-round-header {
  text-align: center;
  font-size: 1.5rem;
  flex: 1;
}

.admin-brackets-round-header {
  text-align: center;
  font-size: 1.5rem;
}

.brackets-rounds-container {
  display: flex;
  justify-content: space-around;
}

.admin-brackets-rounds-container {
  display: flex;
  justify-content: start;
}

.brackets-round {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  position: relative;
  margin-left: 10px;
  flex: 1;
}

.admin-brackets-round {
  display: flex;
  flex-direction: column;
  justify-content: start;
  position: relative;
  margin-left: 10px;
  flex: 1;
}

.brackets-inter-round {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  position: relative;
  flex: 1;
}

.brackets-inter-round-line-down {
  position: relative;
}

.brackets-inter-round-line-down::after {
  content: '';
  position: absolute;
  top: 50%; /* Смещаем границу на 25% от верха, чтобы она занимала 50% высоты */
  right: 0;
  width: 1px; /* Толщина границы */
  height: 50%; /* Высота границы */
  background-color: black; /* Цвет границы */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.brackets-inter-round-line-up {
  position: relative;
  width: 10px;
}

.brackets-inter-round-line-up::after {
  content: '';
  position: absolute;
  top: 0; /* Смещаем границу на 25% от верха, чтобы она занимала 50% высоты */
  right: 0;
  width: 1px; /* Толщина границы */
  height: 50%; /* Высота границы */
  background-color: black; /* Цвет границы */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.brackets-inter-round-horizontal-line {
  position: relative;
  width: 10px;
}
.brackets-inter-round-horizontal-line::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -9px;
  width: 20px;
  height: 1px;
  background-color: #000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.brackets-game {
  margin: 10px 0;
  position: relative;
}

.brackets-participant-container {
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.brackets-participant-3rd-place-title {
  position: absolute;
  top: 120px;
  left: 0;
  width: 100%;
}

.place3 {
  background-color: #cd7f32;
  color: #f5f5f5;
}

.brackets-participant-3rd-place-container {
  position: absolute;
  top: 150px;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.brackets-participant {
  text-align: center;
  position: relative;
  height: 35px;
}

.brackets-participant-name {
  min-width: 200px;
  height: auto;
}

.admin-brackets-participant-name {
  width: 200px;
  height: auto;
}

.brackets-participant-avg {
  min-width: 70px;
  height: auto;
}
.admin-brackets-participant-avg {
  width: 70px;
  height: auto;
}

.brackets-participant-score {
  min-width: 50px;
  height: auto;
}

.admin-brackets-participant-score {
  width: 50px;
  height: auto;
}

.brackets-participant.highlight {
  /* border: 1px solid; */
  /* border-color: red; */
  background-color: #eae6ca;
  /* Желтая рамка при выделении */
}
.brackets-participant.winner {
  background-color: gold; /* Золотой фон для победителя */
}
.brackets-participant.second-place {
  background-color: silver; /* серебряный фон для второго места */
  color: #000;
}
.brackets-round:not(:last-child) .brackets-participant-container::after {
  display: block;
}

.brackets-round:last-child .brackets-participant-container::after {
  display: none;
}

.admin-brackets-round:not(:last-child) .brackets-participant-container::after {
  display: block;
}

.admin-brackets-round:last-child .brackets-participant-container::after {
  display: none;
}

/* треугольник */
.currentThrowIcon {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iNDQiIHZpZXdCb3g9IjAgMCAzOCA0NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6IC8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgMjJMMzcuNSAwLjM0OTM2NVY0My42NTA2TDAgMjJaIiBmaWxsPSIjM0E3NjBBIi8+PC9zdmc+");
  width: 50px;
  height: 50px;
  /* background: #09cc86; - конфликтует с background-image */
  transform: rotate(-90deg);
}

.obsUpRow {
  height: 40px;
  background: #454544;
  display: flex;
}

.obsTextHead {
  justify-content: center;
  align-items: center;
  font-family: "Sansation";
  font-style: normal;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.125;
  text-align: center;
  color: #f5f5f5;
}
.obsRow {
  display: flex;
  align-items: center;
}
.obsPlayerRow {
  height: 60px;
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
}
.obsPlayerName {
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.125;
  text-align: center;
  color: #454544;
}

.obsPlayerRowLeg {
  justify-content: center;
  font-weight: 400;
  font-size: 2.5rem;
  line-height: 1.125;
  text-align: center;
  color: #454544;
}

.obsPlayerRowRequire {
  justify-content: center;
  font-weight: 700;
  font-size: 4rem;
  line-height: 1.125;
  text-align: center;
  color: #09cc86;
}

.obsTournamentText {
  align-items: center;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.143;
  color: #f5f5f5;
}

.obsMove {
  /* background: #f5f5f5; */
  /* border-radius: 10px; */
  padding: 20px;
  position: relative;
  color: #f5f5f5;
}
.obsMove::after {
  content: "";
  position: absolute;
  left: -30px;
  bottom: 0px;
  /* border: 10px solid transparent; /* Прозрачные границы */
  /* border-top: 10px solid green; Добавляем треугольник */
  border: 20px solid transparent;
  border-right: 20px solid #09cc86;
}

.circle {
  border-radius: 50%;
  width: 10px;
  height: 10px;
  background: #f36f6f;
}

.obsThrowText {
  font-style: normal;
  font-weight: 400;
  font-size: 2rem;
  color: #454544;
}

.obsStatUpRow {
  /* height: 40px; */
  min-height: 50px;
  background: #454544;
  display: flex;
}
.obsStatRow {
  min-height: 60px;
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
}
.obsStatText {
  justify-content: center;
  font-weight: 400;
  font-size: 2.5rem;
  line-height: 1.125;
  color: #454544;
}

/* Cricket */
.cricket-3dart {
  height: 50px;
  background-image: url("/template/img/cricketall100x100.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30px 30px;
}

.cricket-2dart {
  height: 50px;
  background-image: url("/template/img/cricket2dart100x100.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30px 30px;
}

.cricket-1dart {
  height: 50px;
  background-image: url("/template/img/cricket1dart100x100.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30px 30px;
}

.cricket-0dart {
  height: 50px;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30px 30px;
}

.cricket-table-item {
  min-width: 50px;
  min-height: 50px;
}

@media all and (max-width: 991px) {
  .cricket-3dart {
    height: 20px;
    background-image: url("/template/img/cricketall100x100.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
  }

  .cricket-2dart {
    height: 20px;
    background-image: url("/template/img/cricket2dart100x100.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
  }

  .cricket-1dart {
    height: 20px;
    background-image: url("/template/img/cricket1dart100x100.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
  }

  .cricket-0dart {
    height: 20px;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
  }
  .cricket-table-item {
    min-width: 30px;
    min-height: 30px;
  }
}

@media all and (max-width: 767px) {
  .cricket-3dart {
    height: 15px;
    background-image: url("/template/img/cricketall100x100.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px 15px;
  }

  .cricket-2dart {
    height: 15px;
    background-image: url("/template/img/cricket2dart100x100.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px 15px;
  }

  .cricket-1dart {
    height: 15px;
    background-image: url("/template/img/cricket1dart100x100.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px 15px;
  }

  .cricket-0dart {
    height: 15px;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px 15px;
  }
  .cricket-table-item {
    min-width: 20px;
    min-height: 20px;
  }
}