input{
    border-radius: 5px;
   } 
body{
    margin: 0;
    min-height: 100vh;
    font-family: 'Space Grotesk', sans-serif;
    background-color: #131315;
    color: #ffffff;
}
h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -0.5px;
}
.logo-title {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: linear-gradient(90deg, #ff4d4d, #ff1a75, #ff4d4d);
  background-clip: text;              /* стандартное свойство */
  -webkit-background-clip: text;      /* для WebKit-браузеров */
  -webkit-text-fill-color: transparent;
  position: relative;
  padding: 0.25em 0.5em;
  text-shadow: 0 0 8px rgba(255, 77, 77, 0.6);
  transition: transform 0.3s ease, text-shadow 0.3s ease;
}
.mode-btn {
  background: linear-gradient(145deg, #1a1a1a, #0f0f0f);
  color: white;
  padding: 0.5rem 1.2rem;
  border-radius: 8px;
  border: 1px solid #444;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.4),
    inset 0 0 4px rgba(255, 255, 255, 0.05);
}

.mode-btn:hover {
  background: linear-gradient(145deg, #ff4d4d, #b30000);
  border-color: #ff4d4d;
  box-shadow:
    0 0 10px rgba(255, 77, 77, 0.6),
    inset 0 0 6px rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.mode-btn:active {
  transform: translateY(0);
  box-shadow:
    0 0 6px rgba(255, 77, 77, 0.4),
    inset 0 0 4px rgba(255, 255, 255, 0.1);
}
.mode-btn.active-mode {
  background: linear-gradient(145deg, #ff4d4d, #b30000);
  border-color: #ff4d4d;
  box-shadow:
    0 0 10px rgba(255, 77, 77, 0.6),
    inset 0 0 6px rgba(255, 255, 255, 0.15);
}


.logo-title::after {
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  top: -5px;
  bottom: -5px;
  border-radius: 6px;
  pointer-events: none;
}

.logo-title:hover {
  transform: scale(1.05);
  text-shadow: 0 0 15px rgba(255, 77, 77, 0.9);
}


#languageswitch{   
    width:4%;
    height:8%;
    color: white;
    opacity: 0.9;
    text-align: center;
    margin: 0;
    padding: 0;
    display: inline-block;
    cursor: pointer;
}
.bstrip h2{
    background-color: black;
    color: white;
    opacity: 0.9;
    text-align: center;
    margin: 0;
    padding: 0;
    display: inline-block;
}
.container{
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
}
.team-section, .roulette-section, .wheel-section {
  margin-bottom: 40px;
}
#center{
          margin-top: 5%;
    
      }
      .leftbox{ 
          gap:20px;
          margin-left: 10%;
          display: inline-grid;
          
      }
      .rightbox{
          gap:20px;
          margin-left: 50%;
          padding-right: 10rem;
          display: inline-grid;
      }

      #last {
        
        text-align: center;
        margin-top: 10%;
        height: 30px;
        display: none;
        align-items: center; 
        justify-content: center; 
        gap: 20px;
      }

      .leftlast{
          display: inline-grid;
          gap:30px;
      }
      .rightlast{
          display: inline-grid;
          gap:30px;
      }
      #fight {
  background: linear-gradient(145deg, #2a2a2a, #1c1c1c);
  color: white;
  font-family: 'Space Grotesk', 'Noto Sans', sans-serif;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 2px;
  padding: 8px 25px;
  border: 2px solid #ff0000;
  border-radius: 8px;
  cursor: pointer;
  text-transform: uppercase;
  box-shadow:
    0 0 10px rgba(255, 0, 0, 0.4),
    inset 0 0 5px rgba(255, 255, 255, 0.1);
  transition: all 0.25s ease;
}

/* Наведение — агрессивный красный */
#fight:hover {
  background: linear-gradient(145deg, #ff1a1a, #b30000);
  box-shadow:
    0 0 20px rgba(255, 0, 0, 0.8),
    inset 0 0 8px rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

/* Нажатие — эффект удара */
#fight:active {
  transform: scale(0.95);
  box-shadow:
    0 0 12px rgba(255, 0, 0, 0.6),
    inset 0 0 6px rgba(255, 255, 255, 0.15);
}

#challenges {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 2rem;
  max-width: 800px;
  margin: 4rem auto;
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}
#random_number {
  display: flex;
  align-items: center;
  gap: 1rem;
}
#random_number input {
  width: 80px;
  padding: 0.3rem;
  border-radius: 5px;
  border: none;
  background-color: #343437;
  color: white;
}
#resultrandnumber {
  padding: 0.5rem 1rem;
  background-color: #343437;
  border-radius: 5px;
  font-weight: bold;
  border: 1px solid black;
}
#downloadall{
  flex-direction: column;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  align-items: center;
  gap: 2rem;
  padding: 2rem;
  background-color: #1C1C1C;
  border-radius: 10px;
  max-width: 600px;
  margin: 2rem auto;
  color: white;
  display: none;
   
    
}
#downloadall > div {
  margin-bottom: 1.5rem;
}
#randnumberbutton {
  padding: 0.3rem 0.8rem;
  background-color: #ff4444;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}


.scriptblock {

  justify-content: space-between;

}


.scripttext,
.scriptmessages {
  font-weight: bold;
  background-color: #343437;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  border: 1px solid black;
}

.button-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

#download1,
#download2 {
margin-left: 0;
  margin-top: 1.5rem;
display: inline-block;
  padding: 0.4rem 1rem;
  background-color: #343437;
  color: white;
  border-radius: 5px;
  border: 1px solid #555;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#download1:hover,
#download2:hover {
  background-color: #555;
}



.window_for_challenges {
  width: 100%;
  max-width: 600px;
  min-height: 300px;
  padding: 2rem;
  background-color: #f3f3f3;
  border-radius: 16px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
  text-align: center;
}

#chex {
  font-size: 2.8rem;
  font-weight: bold;
  color: #1C1C1C;
  margin-bottom: 1rem;
}

#chex2 {
  font-size: 1.4rem;
  font-weight: 500;
  color: #333;
  margin-bottom: 1rem;
}

#answer {
  width: 220px;
  height: 45px;
  background-color: #1C1C1C;
  color: white;
  border: none;
  border-radius: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
    position: absolute;
  bottom: -60px; /* или сколько нужно */
  left: 50%;
  transform: translateX(-50%);
}

#answer:hover {
  background-color: #333;
}
      #roulette{
          display: none;
         }
         

    
         
#firstl, #secondl, #thirdl, #fourl, #fivel, #firstr, #secondr, #thirdr, #fourr, #fiver,#lastfl,#lastsl,#lastfr,#lastsr{
    width:200px;
    height: 30px;
    margin: 1px;
    background-color: #1C1C1C;
    border-radius: 10px;
}
         
         /* РУЛЕТКА КАК В КСГО */
        
.start {
  position: absolute;
  top: calc(50% + 100px);
  left: 50%;
  transform: translate(-50%, -50%);
  
  /* Размеры и форма */
  padding: 10px 25px;
  min-width: 120px;
  border-radius: 8px;
  border: none;
  
  /* Фон и текст */
  background: linear-gradient(180deg, #1a1a1a, #000000);
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  
  /* Эффекты */
  box-shadow: 0 4px 10px rgba(0,0,0,0.4), inset 0 0 5px rgba(255,255,255,0.1);
  transition: all 0.25s ease;
  cursor: pointer;
  user-select: none;
}

.start:hover {
  background: linear-gradient(180deg, #222, #111);
  box-shadow: 0 0 15px rgba(228, 66, 66, 0.6), 0 4px 10px rgba(0,0,0,0.4);
  transform: translate(-50%, -50%) scale(1.05);
}

.start:active {
  transform: translate(-50%, -50%) scale(0.97);
  box-shadow: 0 0 8px rgba(12, 238, 53, 0.4);
}
.start:disabled {
  background: #555; /* более тусклый фон */
  color: #aaa; /* блеклый текст */
  cursor: not-allowed; /* курсор "запрещено" */
  box-shadow: none; /* убираем тени */
  transform: translate(-50%, -50%) scale(1); /* убираем анимацию */
  opacity: 0.6; /* полупрозрачная */
}

.start:disabled:hover {
  /* чтобы при наведении ничего не менялось */
  background: #555;
  box-shadow: none;
  transform: translate(-50%, -50%) scale(1);
}


.shadow {
	position: absolute;
	z-index: 2;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-radius: 10px;
	border: 2px solid white;
	width: 400px;
	height: 100px;
	box-shadow: inset 0 0 20px 0 black;
}

.random {
	position: absolute;
	overflow: hidden;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-radius: 10px;
	width: 400px;
	height: 100px;
	background: #161D31;
}

.cards {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  will-change: transform;
  /* ВАЖНО: без transition здесь */
}

.card {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 90px;
  margin: 5px; /* шаг = width + margin-left + margin-right */
  font-weight: bold;
  font-size: 20px;
  background: white;
  color: #6A6A6A;
  border-radius: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
    word-break: break-word;
  white-space: normal;
}

#helpbutton[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute; bottom: 80px; right: 0;
  background: #1c1c1c; color: #fff; padding: 6px 8px;
  font-size: 12px; border-radius: 6px; white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
}



.result {
	position: absolute;
	z-index: 10;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	border: 10px solid transparent;
	border-top: 20px solid #425DD8;
	filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
}
        
         
         
         
         /* КОЛЕСО УДАЧИ */
      #wheelluck {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          padding: 2rem 0;
          display: none;
      }

@keyframes bgFade {
  0% { background-color: #00bc4b; }
  50% { background-color: #009331; }
  100% { background-color: #00bc4b; }
}


@keyframes winnerPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(0, 255, 0, 0.7);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.9);
  }
}

.card.winner {
  color: white;
  animation: bgFade 2s linear infinite, winnerPulse 1s ease-in-out infinite;
  border-radius: 10px;
}




         .text {
             font-weight: bold;
             font-size: 0.8em;
             color: white;
             text-shadow: 1px 1px 2px black;
         }

.wheel-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: var(--secondary-color);
    border-radius: 50%;
    border: 5px solid var(--text-primary);
    z-index: 5;
}

         .deal-wheel {
             
             margin: auto;
             max-width: 100%;
             box-sizing: border-box;
  /* задаём переменные блока */
  /* размеры колеса */
  --size: clamp(200px, 40vmin, 500px);

  /* настройки яркости и заливки фона секторов */
 --lg-hs: 0 0%; /* hue 0, saturation 0% → grayscale */
  --lg-stop: 50%;
  --lg: linear-gradient(
    hsl(var(--lg-hs) 100%) 0 var(--lg-stop),   /* white */
    hsl(var(--lg-hs) 50%) var(--lg-stop) 100%  /* gray */
  );
  /* добавляем позиционирование относительно других элементов */
  position: relative;
  /* подключаем сетку */
  display: grid;
  grid-gap: calc(var(--size) / 20);
  /* выравниваем содержимое блока по центру */
  align-items: center;
  /* задаём имена областей внутри сетки */
  grid-template-areas:
    "spinner"
    "trigger";
  /* устанавливаем размер шрифта */
  font-size: calc(var(--size) / 21);
}

/* всё, что относится ко внутренним элементам главного блока, будет находиться в области сетки с названием spinner */
.deal-wheel > * {
    box-sizing: border-box;
  grid-area: spinner;
}

/* сам блок и кнопка будут находиться в области сетки с названием trigger и будут выровнены по центру */
.deal-wheel {
    box-sizing: border-box;
  grid-area: trigger;
  justify-self: center;
}

/* сектор колеса */
.spinner {
    border: 5px solid #303034;
    box-sizing: border-box;
  /* добавляем относительное позиционирование */
  position: relative;
  /* подключаем сетку */
  display: grid;
  /* выравниваем всё по центру */
  align-items: center;
  /* добавляем элемент в сетку */
  grid-template-areas: "spinner";
  /* устанавливаем размеры */
  width: var(--size);
  height: var(--size);
  /* поворачиваем элемент  */
  transform: rotate(calc(var(--rotate, 25) * 1deg));
  /* рисуем круглую обводку, а всё, что не поместится, — будет скрыто за кругом */
  border-radius: 50%;
}

/* всё, что внутри этого блока, будет находиться в области сетки с названием spinner */
.spinner * {
    box-sizing: border-box;
  grid-area: spinner;
}

/* текст на секторах */
.prize {
    box-sizing: border-box;
  /* включаем «гибкую» вёрстку */
  display: flex;
  align-items: center;
  /* задаём отступы от краёв блока */
  padding: 0 calc(var(--size) / 6) 0 calc(var(--size) / 20) ; 
  /* устанавливаем размеры */
  width: 50%;
  height: 50%;
  /* устанавливаем координаты, относительно которых будем вращать текст */
  transform-origin: center right;
  /* поворачиваем текст */
  transform: rotate(var(--rotate));
  /* запрещаем пользователю выделять мышкой текст на секторах */
  user-select: none;
}

/* язычок */
.ticker {
    box-sizing: border-box;
  /* добавляем относительное позиционирование */
  position: relative;
  /* устанавливаем размеры */
  left: calc(var(--size) / -15);
  width: calc(var(--size) / 10);
  height: calc(var(--size) / 20);
  /* фон язычка */
  background: var(--lg);
  /* делаем так, чтобы язычок был выше колеса */
  z-index: 1;
  /* форма язычка */
  clip-path: polygon(20% 0, 100% 50%, 20% 100%, 0% 50%);
  /* устанавливаем точку, относительно которой будет вращаться язычок при движении колеса */
  transform-origin: center left;
}

/* кнопка запуска колеса */
.btn-spin {
  grid-area: trigger;
  justify-self: center;
  box-sizing: border-box;
  color: white;
  background: linear-gradient(145deg, #1a1a1a, #0f0f0f);
  border: 2px solid #ff4d4d;
  font-size: inherit;
  padding: 0.9rem 2rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow:
    0 0 10px rgba(255, 77, 77, 0.4),
    inset 0 0 6px rgba(255, 255, 255, 0.05);
  transition: all 0.25s ease;
}

/* Наведение — яркая подсветка */
.btn-spin:hover:not(:disabled) {
  background: linear-gradient(145deg, #ff4d4d, #b30000);
  box-shadow:
    0 0 20px rgba(255, 77, 77, 0.8),
    inset 0 0 8px rgba(255, 255, 255, 0.15);
  transform: scale(1.05);
}

/* Нажатие — эффект вдавливания */
.btn-spin:active:not(:disabled) {
  transform: scale(0.97);
  box-shadow:
    0 0 12px rgba(255, 77, 77, 0.6),
    inset 0 0 6px rgba(255, 255, 255, 0.1);
}

/* Неактивная кнопка */
.btn-spin:disabled {
  cursor: not-allowed; /* курсор "запрещено" */
  opacity: 0.25;
  background: #333;
  border-color: #666;
  box-shadow: none;
}

/* анимация вращения */
.is-spinning .spinner {
    box-sizing: border-box;
  transition: transform 8s cubic-bezier(0.1, -0.01, 0, 1);
}

/* анимация движения язычка */
.is-spinning .ticker {
    box-sizing: border-box;
          animation: tick 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* эффект, когда колесо задевает язычок при вращении */
@keyframes tick {
  40% {
    /* чуть поворачиваем язычок наверх в середине анимации */
    transform: rotate(-12deg);
  }
}

/* анимируем выпавший сектор */
.prize.selected .text {
  /* делаем текст белым */
  color:white;
  /* настраиваем длительность анимации  */
  animation: selected 800ms ease;
}


/* настраиваем анимацию текста на выпавшем секторе по кадрам */
@keyframes selected {
  /* что происходит на 25% от начала анимации */
  25% {
    /* увеличиваем текст в 1,25 раза */
    transform: scale(1.25);
    /* добавляем тексту тень */
    text-shadow: 1vmin 1vmin 0 hsla(0 0% 0% / 0.1);
  }
  40% {
    transform: scale(0.92);
    text-shadow: 0 0 0 hsla(0 0% 0% / 0.2);
  }
  60% {
    transform: scale(1.02);
    text-shadow: 0.5vmin 0.5vmin 0 hsla(0 0% 0% / 0.1);
  }
  75% {
    transform: scale(0.98);
  }
  85% {
    transform: scale(1);
  }
}
/*
#wheelcolorchange{
    

    margin-top: 500px;
    box-sizing: border-box;
  color: white;
  background: black;
  border: none;
 
  font-size: inherit;

  padding: 0.9rem 2rem 1rem;

  border-radius: 0.5rem;

  cursor: pointer;
}
*/
/* КНОПКА ПОМОЩИ */
#helpbutton {
  position: fixed;
  right: 50px;
  bottom: 50px;
  width: 70px;
  height: 70px;
  background: linear-gradient(145deg, #2a2a2a, #1a1a1a); /* спокойный тёмный фон */
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  font-family: 'Space Grotesk', 'Noto Sans', sans-serif;
  font-size: 32px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    0 0 10px rgba(0, 0, 0, 0.5),
    inset 0 0 5px rgba(255, 255, 255, 0.1);
  transition: all 0.25s ease;
  z-index: 999;
}

/* При наведении — яркий красный с подсветкой */
#helpbutton:hover {
  background: radial-gradient(circle at 30% 30%, #ff4d4d, #b30000);
  box-shadow:
    0 0 20px rgba(255, 0, 0, 0.8),
    inset 0 0 10px rgba(255, 255, 255, 0.2);
  transform: scale(1.08);
}

/* При нажатии — эффект вдавливания */
#helpbutton:active {
  transform: scale(0.95);
  box-shadow:
    0 0 12px rgba(255, 0, 0, 0.6),
    inset 0 0 8px rgba(255, 255, 255, 0.2);
}

 
/* ССЫЛКИ */
a:link{
    color:white;
}
/* СМЕНА ЯЗЫКА */
.select-menu {
  position: relative;
  width: 60px;
  font-family: inherit;
}

/* Кнопка выбора */
.select-menu .select-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.select-menu .select-btn:hover {
  background: linear-gradient(145deg, #252d45, #1a2033);
  box-shadow: 0 0 8px rgba(255, 106, 106, 0.4);
}

/* Текст текущего языка */
.languagespan {
  color: white;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 1px;
}

/* Выпадающий список */
.select-menu .options {
  position: absolute;
  top: 110%;
  left: 0;
  width: 100%;
  background: linear-gradient(145deg, #1e253a, #141a2b);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: all 0.25s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

/* Активное состояние */
.select-menu.active .options {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Элементы списка */
.select-menu .options .option {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.select-menu .options .option:hover {
  background: rgba(255, 85, 85, 0.15);
}

.select-menu .options .option .option-text {
  color: white;
  font-weight: bold;
  font-size: 14px;
}
/* Cursor */
.battle-mode {
  cursor: url("Screenshots/sword.png") 0 0, auto;
}

/* Animation fighting */
.hit-red {
  border: 2px solid red !important;
  animation: shake 0.3s ease;
}
.hit-green {
  border: 2px solid lime !important;
  animation: glow 0.6s ease;
}

@keyframes shake {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2px, 0); }
  50% { transform: translate(2px, 0); }
  75% { transform: translate(-2px, 0); }
  100% { transform: translate(0, 0); }
}

@keyframes glow {
  0% { box-shadow: 0 0 5px lime; }
  50% { box-shadow: 0 0 20px lime; }
  100% { box-shadow: 0 0 5px lime; }
}

/* Пасхалка */
.chaos-mode {
  animation: hue-rotate 2s infinite linear;
}
@keyframes hue-rotate {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(360deg); }
}

/* Надпись над генератором чисел */
#section-title {
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: 8px;
  text-align: center;
}