:root {
  --white: #ffffff;
  --smooth-white: #f7fcfd;
  --black: #000000;
  --grey: #d4e6e7;
  --dark-grey:#0b2e36;
  --green: #14df14;
  --dark-green: #1f3d4a;
  --smooth-green: #143f3e;
  --light-green: #95dccd;
  --dark-slime: #9ed9d5;
  --light-slime: #95dccd;
  --blue: #514eff;
  --pink: #ff4ec9;
  --red: #f55c6d;
  --light-red: #f0a9bc;
  --field-yellow: #f6e181;
  --field-blue: #9ecef9;
  --field-green: #abefbe;
  --field-pink: #f0a8bc;
  --field-item-title: #30473c;
  --reg1: #ff5c9b78;
  --reg2: #ffd68378;
  --reg3: #99ff8378;
  --reg4: #f0a8bc78;
  --reg01: #b4bbdbc7;
  --reg02: #8b92cac7;
  --reg03: #57669fc7;
  --reg04: #192344c7;
  --reg05: #8f5160c7;
  --reg06: #ceb3bac7;
  --reg07: #54191fc7;
  --reg08: #a37983c7;
  --reg09: #adb796c7;
  --reg10: #62652cc7;
  --reg11: #c0ccb4c7;
  --reg12: #7a8056c7;
  --reg13: #af7718c7;
  --reg14: #cba25ec7;
  --reg15: #c8ab7fc7;
  --reg16: #cabca1c7;
  --menu-second-card-text: #1F93B8;
  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  --bs-toast-zindex: 1090;
  --bs-toast-padding-x: 0.75rem;
  --bs-toast-padding-y: 0.5rem;
  --bs-toast-spacing: 1.5rem;
  --bs-toast-max-width: 350px;
  --bs-toast-font-size: 0.875rem;
  --bs-toast-color: ;
  --bs-toast-bg: rgba(255,255,255, 0.85);
  --bs-toast-border-width: 1px;
  --bs-toast-border-color: rgba(0, 0, 0, 0.175);
  --bs-toast-border-radius: 0.375rem;
  --bs-toast-box-shadow: var(--bs-box-shadow);
  --bs-toast-header-color: rgba(33, 37, 41, 0.75);
  --bs-toast-header-bg: rgba(255,255,255, 0.85);
  --bs-toast-header-border-color: rgba(0, 0, 0, 0.175);
}
* {
  margin: 0;
  padding: 0;
}
body {
  background-color: var(--grey);
  height: 100vh;
  min-width: 1000px;
}
.menu-block{
  width: 100%;
  max-width: 440px;
  max-height: 600px;
  background-color: var(--white);
  margin: auto;
  padding: 30px 30px;
  border-radius: 20px;
}
.menu-block h1{
  font-family: 'Arial Black', Gadget, sans-serif;
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
  color: var(--smooth-green);

  padding-bottom: 30px;
}
.menu-block h2{
  font-family: 'Arial Black', Gadget, sans-serif;
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  color: var(--smooth-green);

  padding-bottom: 20px;
}
.menu-block h1.winn{
  font-size: 2em;
  color: var(--light-green);
}
.menu-block h1 a{
  text-transform: uppercase;
  color: var(--smooth-green);
}
.text-center{
  text-align: center;
}
.rename-input{
  border: 1px solid #000;
  font-size: 1em;
  border-radius: 5px;
  padding: 10px;
}
a:hover,
button:hover{
  opacity: .7;
}
.menu-block button{
  display: block;
  width: 100%;
  padding: 10px 10px;
  margin-bottom: 20px;
  cursor: pointer;

  border: 1px solid var(--grey);
  color: var(--smooth-green);
  font-family: 'Arial Black', Gadget, sans-serif;
  font-size: 1.3em;
  font-weight: bold;
  text-transform: uppercase;
}
.menu-block button[name="rulesBackBtn"],
.menu-block button[name="hintBackBtn"]
 {
  margin: auto;
  max-width: 300px;
  text-align: center;
  font-family: 'Arial Black', Gadget, sans-serif;
  font-size: 1em;
  font-weight: bold;
  text-transform: uppercase;
  background: linear-gradient(110deg, #4AC94B 22.64%, #66CDEE 94.32%);
  box-shadow: 1px 4px 4px 0px #04040426;
  color: var(--white);
  border: 0;
  padding: 12px 40px;
  border-radius: 20px;
  margin-top: 20px;
}
.green-btn {
  background-color: var(--light-green);
}
.red-btn {
  /* background-color: var(--light-red); */
  background-color: var(--dark-slime);
  color: var(--field-item-title);
  border: 0;
}
.gear-btn,
.pause-btn,
.question-btn,
.close-btn {
  background-color: transparent;
  border: 0;
  cursor: pointer;
  font-size: 2em!important;
  width: 40px;
  height: 40px;
  position: relative;
}
.hint-btn {
  background-color: transparent;
  border: 0;
  cursor: pointer;
  font-size: 2em!important;
  width: 40px;
  height: 40px;
  position: absolute;
  right: 20px;
  top: 5px;
  z-index: 3;
}
.hint-btn img {
  width: 100%;
  height: auto!important;
  padding-top: 0!important;
}
.gear-btn svg,
.pause-btn svg,
.question-btn svg,
.close-btn svg {
  fill: var(--grey);
  width: 40px;
  height: 40px;
  position: absolute;
  left: 0;
  top: 0;
}
.hint-btn svg {
  fill: var(--black);
  width: 40px;
  height: 40px;
  position: absolute;
  left: 0;
  top: 0;
}
.pause-btn[data-pause="false"] svg.bi-play-circle,
.pause-btn[data-pause="false"] svg.bi-play-circle-fill {
  opacity: 0!important;
}
.pause-btn[data-pause="true"] svg.bi-pause-circle,
.pause-btn[data-pause="true"] svg.bi-pause-circle-fill {
  opacity: 0!important;
}
.gear-btn svg.bi-gear-fill,
.gear-btn:hover svg.bi-gear,
.close-btn svg.bi-x-circle-fill,
.close-btn:hover svg.bi-x-circle,
.pause-btn svg.bi-pause-circle-fill,
.pause-btn:hover svg.bi-pause-circle,
.pause-btn svg.bi-play-circle-fill,
.pause-btn:hover svg.bi-play-circle,
.question-btn svg.fill,
.question-btn:hover svg.outline,
.hint-btn svg.fill,
.hint-btn:hover svg.outline{
  opacity: 0;
  transition: all 0.2s ease-out;
}
.gear-btn:hover svg.bi-gear-fill,
.close-btn:hover svg.bi-x-circle-fill,
.pause-btn:hover svg.bi-pause-circle-fill,
.pause-btn:hover svg.bi-play-circle-fill,
.question-btn:hover svg.fill,
.hint-btn:hover svg.fill{
  opacity: 1;
}
 .btn-slide{
   background: transparent;
   border: 0;
   color: var(--dark-slime);
   width: 20px;
   height: 20px;
 }
 .btn-slide > svg{
   width: 20px;
   height: 20px;
 }
.option-block{
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: 1fr 45px 45px 45px;
  grid-column-gap: 10px;
  grid-template-rows: 1fr;
  position: absolute;
  top: 16px;
  right: 0;
  width: 100%;
}
.user-text{
  font-size: 1em;
  color: var(--green);
}
.comp-text{
  font-size: 1em;
  color: var(--red);
}
.step-block{
  font-family: 'Arial Black', Gadget, sans-serif;
  /* font-size: 1.3em; */
  font-size: 1.5em;
  font-weight: bold;
  text-transform: uppercase;
  color: var(--dark-slime);
}
.timer-block{
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-size: 1em;
  text-transform: uppercase;
  color: var(--smooth-white);
}
/* Блок результатов */
.results-section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  margin: auto;
  z-index: 8889;
  background-color: #082630bf;
}


/* Блок игры */
.main-field {
  height: calc(100% - 20px);
  width: calc(100% - 40px);

  min-width: 1400px;
  min-height: 900px;
  max-width: calc(16 / 9 * 100vh);

  /* height: 100%;
  width: 100%;
  min-width: 1400px;
  min-height: 900px; */
  padding: 10px 20px;
  position: relative;
  display: grid;
  margin: auto;
  /* background-color: var(--dark-green); */
  background: linear-gradient(47.23deg, #3D2477 -28.27%, #1045A3 98.12%);
  overflow: hidden;
}
.game-block{
  display: grid;
  grid-template-areas:
        "top top"
        "left right";
  grid-template-columns: 600px 1fr;
  grid-template-rows: 70px 1fr;
  background-color: inherit;
  /* border: 1px dashed var(--black); */
}
.game-block .top {
  grid-area: top;
  text-align: center;
  position: relative;
}
.game-block .left{
  grid-area: left;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /* position: relative; */
}
.game-block .right{
  grid-area: right;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.game-block-points{
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-size: 15px;
  line-height: 18px;
  color: #D03636;
  display: none;
}
.game-block .left-top{
  height: 30%;
  width: 100%;
  background-color: transparent;
  position: relative;
}
.game-block .left-medium{
  width: 100%;
  height: 40%;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.game-block .left-bottom{
  height: 30%;
  width: 100%;
  background-color: transparent;
  position: relative;
}
.game-block .left-modal{
  height: 100%;
  width: 100%;
  /* background-color: #082630bf; */
  background: rgba(77, 88, 172, 0.96);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8888;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
  opacity: 0;

}
.card-deck{
  height: 80%;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  /* position: relative; */
  overflow: hidden;
}
.card-deck .card{
  /* width: calc(30% - 2px);
  min-width: calc(30% - 2px);
  height: 100%; */
  position: absolute;
  left: calc(var(--n)*-1.4px + 15%);
  /* bottom: calc(0px + var(--n)*1.4px); */
  bottom: calc(50% - 155px + var(--n)*1.4px);
  z-index: var(--n);
}
.user-hand-title {
  display: grid;
  grid-template-columns: 220px 40px 20px 40px 220px;
  align-items: center;
  justify-content: center;

  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-size: 30px;
  line-height: 37px;
  text-transform: uppercase;
  color: var(--white);

  height: 45px;
  white-space: nowrap; /* Запрещаем перенос строк */
  overflow: hidden; /* Обрезаем все, что не помещается в область */
  text-overflow: ellipsis; /* Добавляем многоточие */
}
.user-hand-title > span:nth-child(1) {
  text-align: right;
}
.user-hand-title > span:nth-child(4) {
  text-align: left;
}
.user-hand-title-result{
  color: var(--white);
}
.cardHand{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  /* position: relative; */
  overflow: hidden;
  /* overflow-x: visible; */

  height: 100%;
}
.left-top .cardHand,
.left-bottom .cardHand {
  max-height: 240px;
}
.cardHand .card{
  position: absolute;
  left: calc(var(--n)*50px);
  z-index: calc(var(--n) + 1);
}
.cardHand.user .card:hover{
  z-index: 100;
}
.card{
  background-color: transparent;
  border: 1px solid var(--grey);
  transition: all 0.5s ease-out;
}
.deck .card{
  width: 160px;
  height: 200px;
  cursor: pointer;
}
.comp .card{
  width: 200px;
  height: 240px;
  /* border: 0; */
  /* top: 50px; */
}
.user .card{
  width: 200px;
  height: 240px;
  /* border: 0; */
  cursor: pointer;
  /* bottom: 50px; */
}
.modal .card{
  width: 378px;
  height: 504px;
  /* width: 290px;
  height: 320px; */
  /* border: 0; */
  /* cursor: pointer; */
}
.game-field .card{
  width: 190px;
  height: 230px;
}
.card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.5s;
transform-style: preserve-3d;
}
.comp .card .card-inner,
.deck .card .card-inner {
transform: rotateY(180deg);
}
.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.card-front {
background-color: #cccccc;
color: #111111;
}
.card-back {
color: #eeeeee;
transform: rotateY(180deg);
position: relative;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.card-back:before{
  content: '';

  background: linear-gradient(185.41deg, #50E2D5 6.24%, #43AC96 110.46%);
  box-shadow: 0px 3.53285px 3.53285px rgba(0, 0, 0, 0.25);

  /* background: url('../img/1.svg'),
              url('../img/2.svg'),
              url('../img/3.svg'),
              url('../img/4.svg'),

              url('../img/4.svg'),
              url('../img/3.svg'),
              url('../img/2.svg'),
              url('../img/1.svg'),

              url('../img/3.svg'),
              url('../img/2.svg'),
              url('../img/1.svg'),
              url('../img/4.svg'),

              url('../img/2.svg'),
              url('../img/1.svg'),
              url('../img/4.svg'),
              url('../img/3.svg') var(--dark-slime);
  background-size: 40px;
  background-repeat: no-repeat;
  background-position: 5% 4%, 5% 35%, 5% 60%, 5% 90%,
                       33% 7%, 33% 35%, 33% 62%, 34% 90%,
                       63% 5%, 63% 35%, 65% 60%, 64% 90%,
                       92% 7%, 93% 35%, 92% 63%, 93% 90%; */
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;

}
#cardHintBlock .menu-block h1 {
  color: #000000;
  text-shadow: 1px 1px #cecece;
}
.card-back img{
  position: relative;
  z-index: 3;
  width: 70px;
  /* background: var(--white); */
  border-radius: 45%;
  padding: 0;
}
.card-front{
  background-color: var(--white);
  container-type: inline-size;
}
.card-front img{
 height: 30%;
 padding-top: 10%;
}
.card-front p{
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  align-items: center;
  color: #000000;
  padding-top: 10%;
  padding-left: 5%;
  padding-right: 5%;
  height: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 4.8cqi;
}
.deck .card .card-front p,
.game-field .card .card-front p{
  font-size: 4.8cqi;
}
[data-show="false"],
[data-show="false"]{
  display: none;
}
/* deck card */
.deck .card .card-back:not(.false):before{
  background-size: 25px;
}
.deck .card .card-back img{
  width: 70px;
  border-radius: 45%;
  padding: 0;
}
/* modal */
.left-modal.show{
  display: flex;
  -webkit-animation: fadeInFromNone 0.5s ease-out;
  -moz-animation: fadeInFromNone 0.5s ease-out;
  -o-animation: fadeInFromNone 0.5s ease-out;
  animation: fadeInFromNone 0.5s ease-out;
  opacity: 1;
  max-width: 600px;
}
@-webkit-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: flex;
        opacity: 0;
    }

    100% {
        display: flex;
        opacity: 1;
    }
}

@-moz-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: flex;
        opacity: 0;
    }

    100% {
        display: flex;
        opacity: 1;
    }
}

@-o-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: flex;
        opacity: 0;
    }

    100% {
        display: flex;
        opacity: 1;
    }
}

@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: flex;
        opacity: 0;
    }

    100% {
        display: flex;
        opacity: 1;
    }
}
.left-modal .cardHand{
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.left-modal .cardHand .card{
  position: relative;
  left: 0;
  top: 0;
}
.modal-title{
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-size: 30px;
  line-height: 40px;
  color: #99F158;
  padding-bottom: 20px;


  /* text-align: center;
  font-family: 'Arial Black', Gadget, sans-serif;
  font-size: 1em;
  font-weight: bold;
  text-transform: uppercase;
  color: var(--white);
  padding-bottom: 20px; */
}
.modal-btn {
  text-align: center;
  font-family: 'Arial Black', Gadget, sans-serif;
  font-size: 1em;
  font-weight: bold;
  text-transform: uppercase;
  background: linear-gradient(110deg, #4AC94B 22.64%, #66CDEE 94.32%);
  box-shadow: 1px 4px 4px 0px #04040426;
  color: var(--white);
  border: 0;
  /* background-color: var(--dark-slime);
  color: var(--field-item-title);
  border: 1px solid var(--black); */
  padding: 12px 40px;
  border-radius: 20px;
  margin-top: 20px;
}
/* игровое поле */
.game-field-block{
  display: flex;
  justify-content: center;
  align-items: center;
}
.game-field{
  position: relative;
  /* height: 75%; */
  height: 100%;
  max-height: 700px;
  max-width: 800px;
  width: calc(100% - 100px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 20px;

  /* background-color: var(--white); */
  border-radius: 0;
  /* border: 2.5px solid var(--white); */
}
.game-field:before,
.game-field:after{
  position: absolute;
  top: -45px;
  /* top: calc(50% - 25px); */
  height: 50px;
  width: 50%;

  text-align: center;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-size: 30px;
  line-height: 37px;
  z-index: 2;
}
.game-field:before{
  content: "Пациент";
  left: 0;
  color: #FF9F46;
}
.game-field:after{
  content: "Врач";
  right: 0;
  color: #FFFFFF;
}
.game-field-item{
  position: relative;
  padding: 40px 17px 15px 18px;
}
.game-field .card-block{
  height: 100%;
  max-height: 250px;
  position: relative;
}
.game-field .card {
    position: absolute;
    left: calc(var(--n)*-1.4px + 30%);
    bottom: calc(0px + var(--n)*1.4px);
    z-index: var(--n);
}
.region-1{
  background-color: #ffffff;
  /* border-radius: 20px 0 0 0; */
  border-radius: 0;
}
.region-2{
  background-color: #ffffff;
  /* border-radius: 0 20px 0 0; */
  border-radius: 0;
}
.region-3{
  background-color: #ffffff;
  /* border-radius: 0 0 0 20px; */
  border-radius: 0;
}
.region-4{
  background-color: #ffffff;
  /* border-radius: 0 0 20px 0; */
  border-radius: 0;
}
.focus .region-1:hover,
.focus .region-2:hover,
.focus .region-3:hover,
.focus .region-4:hover{
  /* z-index: 2; */
  /* outline: thick double #32a1ce; */
  border-color: red;
  cursor: pointer;
}
.game-field-item-title{
  text-align: center;
  color: #ffffff;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-size: 25px;
  line-height: 37px;
  text-transform: uppercase;

  position: absolute;
  width: 100%;
}
.region-1 .game-field-item-title,
.region-3 .game-field-item-title{
  background-color: #FC881D;
}
.region-2 .game-field-item-title,
.region-4 .game-field-item-title{
  background-color: #C85EBF;
}
.region-1 .game-field-item-title,
.region-2 .game-field-item-title{
  top: 0;
  left: 0;
}
.region-3 .game-field-item-title,
.region-4 .game-field-item-title{
  top: 0;
  left: 0;
}
@-webkit-keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
}

40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
}

60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg);
}

80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg);
}

100% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
}

@keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
-ms-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
}

40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
-ms-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
}

60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
-ms-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg);
}

80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
-ms-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg);
}

100% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
-ms-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
}
.swingCard {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
  -webkit-animation-name: swing;
  animation-name: swing;
}



.card:hover .card-front p{
  font-size: 10cqi;
  overflow-y: auto;
}
.card p::-webkit-scrollbar {
  width: 0;
}



















/* 323-ФЗ: ФАБРИКА ЗНАНИЙ */
.menu-begin .menu-begin-cont {
  height: 100%;
}
.menu-begin .menu-begin-logo {
  position: absolute;
  width: 667px;
  height: 667px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #5ceacc1a;
  border-radius: 50%;
  top: -120px;
  right: -120px;
}
.menu-begin .menu-begin-logo img {
  max-width: 352px;
}
.menu-begin h1{
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-size: 100px;
  line-height: 120px;
  text-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
  color: #ffffff;
  position: absolute;
  top: 25%;
  left: 25%;
}

.menu-begin h1 span{
  color: #99F158;
}

.menu-begin button {
  /* плашка ок */
  background: linear-gradient(110deg, #4AC94B 22.64%, #66CDEE 94.32%);
  box-shadow: 0px 4px 50px rgba(4, 4, 4, 0.5);
  border-radius: 39px;
  position: absolute;
  right: 10%;
  bottom: 10%;
  width: 410px;
  height: 120px;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-size: 40px;
  line-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}
.menu-begin-circles {
  max-width: 108px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-begin-circles-cont {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.menu-begin-circles-cont > div {
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.menu-begin-circles-cont > div div {
  background-color: #ffffff21;
  border-radius: 50%;
  width: 27px;
  height: 27px;
}
.menu-begin-circles-cont > div:nth-child(11) div {
  background: linear-gradient(180deg, #F8C256 0%, #F76B5E 100%);
}
.menu-begin-circles-cont > div:nth-child(14) div {
  background: linear-gradient(191.51deg, #F35171 5.01%, #C85EBF 91.54%);
}
.menu-begin-circles-cont > div:nth-child(17) div {
  background: linear-gradient(209.17deg, #C45EC8 23.02%, #8869CC 90.05%);
}
.menu-begin-circles-cont > div:nth-child(20) div {
  background: linear-gradient(180deg, #7E6ECC 0%, #7498EF 100%);
}
.menu-begin-circles-cont > div:nth-child(23) div {
  background: linear-gradient(180deg, #74A1EB 0%, #53C8B8 100%);
}
.menu-begin-circles-cont > div:nth-child(26) div {
  background: linear-gradient(197.47deg, #56C3BA 4.43%, #40A991 88.03%);
}

/* //////////////////////////////////// */
/* //////////////////////////////////// */
/* Меню выбор сценария */
/* //////////////////////////////////// */
/* //////////////////////////////////// */

.menu-scenarios {
    position: relative;
    display: grid;
    background-image: url(../img/menuvector.svg);
    background-position: 0 0;
    background-size: 100%;
    background-repeat: no-repeat;
    margin: -10px -20px;
}
.menu-scenarios-cont {
  display: grid;
  grid-template-areas: "title items"
                       "controls controls";
  grid-template-columns: 50% 50%;
  grid-template-rows: 1fr 100px;
}
.menu-scenarios h1 {
  grid-area: title;

  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-size: 70px;
  line-height: 85px;
  display: flex;
  align-items: center;
  justify-content: center;

  color: #FFFFFF;
}
.menu-scenarios-items {
  grid-area: items;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.menu-scenarios-items > div {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 24px;
  height: 96px;
  max-width: 632px;
  margin: 30px 0;

  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-size: 30px;
  line-height: 35px;
  display: flex;
  align-items: center;
  color: #FFFFFF;
  position: relative;
  cursor: pointer;

  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}
.menu-lobby-items {
  grid-area: items;
  display: flex;
  flex-direction: column;
  padding-top: 30px;
  padding-bottom: 0;
  overflow: auto;
  max-height: 790px;
  max-width: 650px;
}
.menu-lobby-items > div {
  background: rgba(0, 0, 0, 0.1);
  /* border-radius: 24px; */
  height: 60px;
  min-height: 60px;
  max-width: 632px;
  margin: 5px 0;
  padding: 10px 25px;
  display: flex;
  align-items: center;
  color: #FFFFFF;
  position: relative;
}
.lobby-user-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.lobby-user-container p {
  border: 0;
  border-radius: 39px 0 0 39px;
  height: 100%;
  width: 40%;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-size: 22px;
  line-height: 30px;
  display: flex;
  align-items: center;
  justify-content: left;
}
.lobby-user-container input[name="subscribe"] {
  border: 0;
  background: linear-gradient(110deg, #4AC94B 22.64%, #66CDEE 94.32%);
  box-shadow: 0px 4px 50px rgba(4, 4, 4, 0.5);
  border-radius: 0 39px 39px 0;
  height: 100%;
  width: 20%;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-size: 15px;
  line-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  cursor: pointer;

  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}
.lobby-user-container input[name="subscribe"]:disabled {
  background: grey;
  cursor:default;
}
.modal-subscribe p {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  line-height: 20px;
}
.lobby-user-container input[name="subscribe"]:not(:disabled):hover {
  opacity: .7;
}
.menu-scenarios-items > div:hover {
  opacity: .7;
}

.menu-scenarios-items > div span {
  /* сценари 1 */
  background: linear-gradient(145.22deg, #7498EF -11.27%, #53C8B8 87%);
  box-shadow: 0px 60px 100px rgba(0, 0, 0, 0.3);
  border-radius: 35px;
  transform: matrix(0.68, 0.74, -0.98, 0.22, 0, 0);
  width: 111px;
  height: 154px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -30px;
  left: -15px;
}
.menu-scenarios-items > div:nth-child(2)  span{
  background: linear-gradient(143.04deg, #C85EBF 10.14%, #FC881D 118.5%);
}
.menu-scenarios-items > div:nth-child(3)  span{
  background: linear-gradient(143.04deg, #7E6ECC 10.14%, #C85EBF 118.5%);
}
.menu-scenarios-items > div b {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-size: 50px;
  line-height: 59px;
  color: #FFFFFF;
  position: relative;
  padding: 0 100px 0 25px;
}
.menu-scenarios-controls {
  grid-area: controls;
  display: grid;
  grid-template-columns: 15% 20%;
  align-items: center;
}

.menu-scenarios-controls div {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-size: 25px;
  line-height: 50px;
  /* identical to box height, or 200% */
  display: flex;
  justify-content: end;
  align-items: center;
  color: #FFFFFF;
}
.menu-scenarios-controls img {
  width: 64px;
  padding-right: 10px;
}
.menu-scenarios-controls img,
.menu-scenarios-controls span {
  cursor: pointer;
}
.menu-scenarios-controls span{
  font-family: 'Montserrat';
}

/* //////////////////////////////////// */
/* //////////////////////////////////// */
/* Меню карточка с приветствием */
/* //////////////////////////////////// */
/* //////////////////////////////////// */
.menu-second-cont {
  display: grid;
  grid-template-areas: "card card"
    "controls controls";
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 100px;
}

.menu-second-items {
  grid-area: card;
  display: grid;
}

.menu-second-card {
  max-width: 740px;
  max-height: 426px;
  border-radius: 10px;
  padding: 40px 60px;
  background: var(--white);
  box-shadow: 6px 4px 4px 0px #00000040;
  margin: auto;
}
.menu-second-card p.card-text1{
  font-family: Montserrat;
  font-size: 30px;
  font-weight: 900;
  line-height: 37px;
  letter-spacing: 0em;
  text-align: left;color: var(--menu-second-card-text);
  padding-top: 30px;
}
.menu-second-card p.card-text2{
  font-family: Montserrat;
  font-size: 25px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 0em;
  text-align: left;
}
.menu-second-card p.card-text3{
  font-family: Montserrat;
  font-size: 18px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: left;
}
.menu-second-card > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-top: 30px;
}
.menu-second-card button {
  padding: 0 20px;
  margin: auto;
  border: 0;
  background: linear-gradient(110deg, #4AC94B 22.64%, #66CDEE 94.32%);
  box-shadow: 1px 4px 4px 0px #04040426;
  border-radius: 20px;
  font-family: Montserrat;
  font-size: 24px;
  font-weight: 700;
  line-height: 50px;
  letter-spacing: 0em;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  cursor: pointer;
}
/* //////////////////////////////////// */
/* //////////////////////////////////// */
/* Меню настройки */
/* //////////////////////////////////// */
/* //////////////////////////////////// */
.menu-settings {
  position: relative;
  display: grid;
  /* background-image: url(../img/menuvector.svg);
  background-position: 0 0;
  background-size: 100%;
  background-repeat: no-repeat; */
  margin: -10px -20px;
}
.menu-settings-cont {
  display: grid;
  grid-template-areas:
      "title"
      "items"
      "controls";
  grid-template-columns: 1fr;
  grid-template-rows: 150px 1fr 100px;
}
.menu-settings-cont > h1,
.menu-settings-cont > .menu-settings-items {
  padding: 0 100px;
}
.menu-settings-cont > h1{
  grid-area: title;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-size: 70px;
  line-height: 85px;
  color: #99F158;
  display: flex;
  align-items: end;
}
.menu-settings-items {
  grid-area: items;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 45% 55%;
}
.menu-settings-items .menu-settings-item:nth-child(1),
.menu-settings-items .menu-settings-item:nth-child(2){
  margin: auto 0;
}
.menu-settings-item {

}
.menu-settings-item h2 {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-size: 40px;
  line-height: 49px;
  color: #FFFFFF;
  padding-bottom: 20px;
}
.menu-settings-item label {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-size: 25px;
  line-height: 50px;
  color: #FFFFFF;

  position: relative;
  bottom: 14px;
  left: 10px;
}
.menu-settings-item input[type="radio"] {
  width: 50px;
  height: 50px;
}
.menu-settings-item input[type="text"] {
  width: 400px;
  height: 76px;
  padding: 0 15px;
  background: #FFFFFF;
  box-shadow: inset 0px 1px 3px rgba(41, 50, 138, 0.6);
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-size: 25px;
  line-height: 29px;
  color: #000000;
}
.menu-scenarios-items > div.menu-lobby-input:hover {
  opacity: 1;
}
.menu-lobby-input input {
  padding-left: 20px;
  border: 0;
  border-radius: 39px 0 0 39px;
  height: 100%;
  width: 80%;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-size: 50px;
  line-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000000;
}
.menu-lobby-input button {
  border: 0;
  background: linear-gradient(110deg, #4AC94B 22.64%, #66CDEE 94.32%);
  box-shadow: 0px 4px 50px rgba(4, 4, 4, 0.5);
  border-radius: 0 39px 39px 0;
  height: 100%;
  width: 20%;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-size: 40px;
  line-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  cursor: pointer;
}
/* .menu-settings .menu-scenarios-controls {
  grid-template-columns: 15%;
} */
.scenario2 .game-field .card {
  -webkit-animation-duration: .2s;
  animation-duration: .2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
}
.scenario2 .game-field .card:nth-child(2) {
  left: 5px;
  -webkit-animation-name: leftpos5px;
  animation-name: leftpos5px;
}
.scenario2 .game-field .card:nth-child(3) {
  left: 10px;
  -webkit-animation-name: leftpos10px;
  animation-name: leftpos10px;
}
.scenario2 .game-field .card:nth-child(4) {
  left: 15px;
  -webkit-animation-name: leftpos15px;
  animation-name: leftpos15px;
}
.scenario2 .game-field .card:nth-child(5) {
  left: 20px;
  -webkit-animation-name: leftpos20px;
  animation-name: leftpos20px;
}
.scenario2 .game-field .card:nth-child(6) {
  left: 25px;
  -webkit-animation-name: leftpos25px;
  animation-name: leftpos25px;
}
.scenario2 .game-field .card:nth-child(7) {
  left: 30px;
  -webkit-animation-name: leftpos30px;
  animation-name: leftpos30px;
}
.scenario2 .game-field .card:nth-child(8) {
  left: 35px;
  -webkit-animation-name: leftpos35px;
  animation-name: leftpos35px;
}
.scenario2 .game-field .card:nth-child(9) {
  left: 40px;
  -webkit-animation-name: leftpos40px;
  animation-name: leftpos40px;
}
.scenario2 .game-field .card:nth-child(10) {
  left: 45px;
  -webkit-animation-name: leftpos45px;
  animation-name: leftpos45px;
}
.scenario2 .game-field .card:nth-child(11) {
  left: 50px;
  -webkit-animation-name: leftpos50px;
  animation-name: leftpos50px;
}
.scenario2 .game-field .card:nth-child(12) {
  left: 55px;
  -webkit-animation-name: leftpos55px;
  animation-name: leftpos55px;
}
.scenario2 .game-field .card:nth-child(13) {
  left: 60px;
  -webkit-animation-name: leftpos60px;
  animation-name: leftpos60px;
}
.scenario2 .game-field .card:nth-child(14) {
  left: 65px;
  -webkit-animation-name: leftpos65px;
  animation-name: leftpos65px;
}
.scenario2 .game-field .card:nth-child(15) {
  left: 70px;
  -webkit-animation-name: leftpos70px;
  animation-name: leftpos70px;
}
.scenario2 .game-field .card:hover {
  z-index: 1;
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background-color: darkgrey;
}

::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}



@-webkit-keyframes leftpos5px {
  from {
    left: 0px;
  }

  to {
    left: 5px;
  }
}

@keyframes leftpos5px {
  from {
    left: 0px;
  }

  to {
    left: 5px;
  }
}

@-webkit-keyframes leftpos10px {
  from {
    left: 0px;
  }

  to {
    left: 10px;
  }
}

@keyframes leftpos10px {
  from {
    left: 0px;
  }

  to {
    left: 10px;
  }
}

@-webkit-keyframes leftpos15px {
  from {
    left: 0px;
  }

  to {
    left: 15px;
  }
}

@keyframes leftpos15px {
  from {
    left: 0px;
  }

  to {
    left: 15px;
  }
}

@-webkit-keyframes leftpos20px {
  from {
    left: 0px;
  }

  to {
    left: 20px;
  }
}

@keyframes leftpos20px {
  from {
    left: 0px;
  }

  to {
    left: 20px;
  }
}

@-webkit-keyframes leftpos25px {
  from {
    left: 0px;
  }

  to {
    left: 25px;
  }
}

@keyframes leftpos25px {
  from {
    left: 0px;
  }

  to {
    left: 25px;
  }
}

@-webkit-keyframes leftpos30px {
  from {
    left: 0px;
  }

  to {
    left: 30px;
  }
}

@keyframes leftpos30px {
  from {
    left: 0px;
  }

  to {
    left: 30px;
  }
}

@-webkit-keyframes leftpos35px {
  from {
    left: 0px;
  }

  to {
    left: 35px;
  }
}

@keyframes leftpos35px {
  from {
    left: 0px;
  }

  to {
    left: 35px;
  }
}

@-webkit-keyframes leftpos40px {
  from {
    left: 0px;
  }

  to {
    left: 40px;
  }
}

@keyframes leftpos40px {
  from {
    left: 0px;
  }

  to {
    left: 40px;
  }
}

@-webkit-keyframes leftpos45px {
  from {
    left: 0px;
  }

  to {
    left: 45px;
  }
}

@keyframes leftpos45px {
  from {
    left: 0px;
  }

  to {
    left: 45px;
  }
}
@-webkit-keyframes leftpos50px {
  from {
    left: 0px;
  }

  to {
    left: 50px;
  }
}

@keyframes leftpos50px {
  from {
    left: 0px;
  }

  to {
    left: 50px;
  }
}

@-webkit-keyframes leftpos55px {
  from {
    left: 0px;
  }

  to {
    left: 55px;
  }
}

@keyframes leftpos55px {
  from {
    left: 0px;
  }

  to {
    left: 55px;
  }
}

@-webkit-keyframes leftpos60px {
  from {
    left: 0px;
  }

  to {
    left: 60px;
  }
}

@keyframes leftpos60px {
  from {
    left: 0px;
  }

  to {
    left: 60px;
  }
}

@-webkit-keyframes leftpos65px {
  from {
    left: 0px;
  }

  to {
    left: 65px;
  }
}

@keyframes leftpos65px {
  from {
    left: 0px;
  }

  to {
    left: 65px;
  }
}

@-webkit-keyframes leftpos70px {
  from {
    left: 0px;
  }

  to {
    left: 70px;
  }
}

@keyframes leftpos70px {
  from {
    left: 0px;
  }

  to {
    left: 70px;
  }
}

.position-fixed {
    position: fixed!important;
}
.top-0 {
    top: 0!important;
}
.end-0 {
    right: 0!important;
}
.p-3 {
    padding: 1rem!important;
}
.toast:not(.show) {
    display: none;
}
.toast-body {
    padding: var(--bs-toast-padding-x);
    word-wrap: break-word;
}
.toast-error {
  background-color: #dc3545;
  color: var(--white);
}
.toast-success {
  background-color: #02503d;
  color: var(--white);
}