@charset "UTF-8";
@keyframes moveInOut {
  0% {
    width: 100%;
  }
  50% {
    width: 10%;
  }
  100% {
    width: 100%;
  }
}
@keyframes pulsing {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: Scale(1);
  }
}
@keyframes glow {
  0% {
    box-shadow: 0 0 2.2vmin 0.8vmin rgba(170, 0, 23, 0.7);
  }
  50% {
    box-shadow: 0 0 1vmin 0.8vmin rgba(170, 0, 23, 0.1);
  }
  100% {
    box-shadow: 0 0 2.2vmin 0.8vmin rgba(170, 0, 23, 0.7);
  }
}
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  font-family: "Russo One Regular", sans-serif;
}

body {
  padding: 1vmin 3vmin;
  width: 100vw;
  height: 100vmin;
  overflow-x: hidden;
  overflow-y: hidden;
  position: relative;
  background: url(../img/bg.png);
  background-size: cover;
}
body::before {
  content: "";
  background: url(../img/bg.png);
  background-size: cover;
  width: 100%;
  height: 100%;
  position: Absolute;
  top: 0;
  left: 0;
  filter: contrast(130%);
  z-index: -2;
}

@font-face {
  font-family: "Russo One Regular";
  src: url(../fonts/RussoOne-Regular.ttf);
}
@font-face {
  font-family: "Capsuula";
  src: url(../fonts/Capsuula.ttf);
}
@font-face {
  font-family: "Free Pixel";
  src: url(../fonts/FreePixel.ttf);
}
.heading-primary {
  font-size: 3.5vmin;
  text-transform: uppercase;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.2vmin;
  position: relative;
}
.heading-primary--main {
  background-image: linear-gradient(to top, rgb(73, 223, 254) 0%, rgb(73, 223, 254) 40%, rgb(187, 239, 249) 40%, rgb(187, 239, 249) 60%, rgb(73, 223, 254) 60%, rgb(73, 223, 254) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-left: 10vmin;
  text-shadow: 0.1rem 0.1rem 0.8rem rgba(187, 239, 249, 0.5);
}
.heading-primary--main::before {
  content: "";
  width: 6vmin;
  height: 0.4vmin;
  border-radius: 5px;
  position: absolute;
  background: rgb(73, 223, 254);
  box-shadow: 0rem 0rem 1rem rgba(187, 239, 249, 0.7);
  top: 45%;
  left: 4%;
}
.heading-primary--main::after {
  content: "";
  width: 10vmin;
  height: 0.4vmin;
  border-radius: 5px;
  position: absolute;
  background: rgb(73, 223, 254);
  box-shadow: 0rem 0rem 1rem rgba(187, 239, 249, 0.7);
  top: 45%;
  right: 0;
  transform: translatex(110%);
}
.heading-primary--smaller {
  background-image: linear-gradient(to top, rgb(73, 223, 254) 0%, rgb(73, 223, 254) 40%, rgb(187, 239, 249) 40%, rgb(187, 239, 249) 60%, rgb(73, 223, 254) 60%, rgb(73, 223, 254) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0.1rem 0.1rem 0.8rem rgba(187, 239, 249, 0.5);
  font-size: 90%;
}
.heading-primary--raid-pl {
  background-image: linear-gradient(to top, rgb(212, 135, 109) 0%, rgb(212, 135, 109) 40%, rgb(238, 160, 135) 40%, rgb(238, 160, 135) 60%, rgb(212, 135, 109) 60%, rgb(212, 135, 109) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.heading-primary--raid-pl::before {
  content: "nalot";
  position: absolute;
  top: 0;
  right: 0;
  color: rgba(0, 0, 0, 0.1);
  z-index: -1;
  text-shadow: 0.4rem 0.4rem 0.5rem rgba(0, 0, 0, 0.3);
}
.heading-primary--raid-eng {
  background-image: linear-gradient(to top, rgb(212, 135, 109) 0%, rgb(212, 135, 109) 40%, rgb(238, 160, 135) 40%, rgb(238, 160, 135) 60%, rgb(212, 135, 109) 60%, rgb(212, 135, 109) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.heading-primary--raid-eng::before {
  content: "Raid";
  position: absolute;
  top: 0;
  right: 0;
  color: rgba(0, 0, 0, 0.1);
  z-index: -1;
  text-shadow: 0.4rem 0.4rem 0.5rem rgba(0, 0, 0, 0.3);
}
.heading-primary--provocation-pl {
  background-image: linear-gradient(to top, rgb(238, 216, 108) 0%, rgb(238, 216, 108) 40%, rgb(251, 255, 143) 40%, rgb(251, 255, 143) 60%, rgb(238, 216, 108) 60%, rgb(238, 216, 108) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  position: relative;
}
.heading-primary--provocation-pl::before {
  content: "prowokacja";
  position: absolute;
  top: 0;
  right: 0;
  color: rgba(0, 0, 0, 0.1);
  z-index: -1;
  text-shadow: 0.4rem 0.4rem 0.5rem rgba(0, 0, 0, 0.3);
}
.heading-primary--provocation-eng {
  background-image: linear-gradient(to top, rgb(238, 216, 108) 0%, rgb(238, 216, 108) 40%, rgb(251, 255, 143) 40%, rgb(251, 255, 143) 60%, rgb(238, 216, 108) 60%, rgb(238, 216, 108) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  position: relative;
}
.heading-primary--provocation-eng::before {
  content: "provocation";
  position: absolute;
  top: 0;
  right: 0;
  color: rgba(0, 0, 0, 0.1);
  z-index: -1;
  text-shadow: 0.4rem 0.4rem 0.5rem rgba(0, 0, 0, 0.3);
}
.heading-primary--recon-pl {
  background-image: linear-gradient(to top, rgb(127, 92, 167) 0%, rgb(127, 92, 167) 40%, rgb(181, 141, 216) 40%, rgb(181, 141, 216) 60%, rgb(127, 92, 167) 60%, rgb(127, 92, 167) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  position: relative;
}
.heading-primary--recon-pl::before {
  content: "rekonesans";
  position: absolute;
  top: 0;
  right: 0;
  color: rgba(0, 0, 0, 0.1);
  z-index: -1;
  text-shadow: 0.4rem 0.4rem 0.5rem rgba(0, 0, 0, 0.3);
}
.heading-primary--recon-eng {
  background-image: linear-gradient(to top, rgb(127, 92, 167) 0%, rgb(127, 92, 167) 40%, rgb(181, 141, 216) 40%, rgb(181, 141, 216) 60%, rgb(127, 92, 167) 60%, rgb(127, 92, 167) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  position: relative;
}
.heading-primary--recon-eng::before {
  content: "recon";
  position: absolute;
  top: 0;
  right: 0;
  color: rgba(0, 0, 0, 0.1);
  z-index: -1;
  text-shadow: 0.4rem 0.4rem 0.5rem rgba(0, 0, 0, 0.3);
}
.heading-primary--wiretapping-pl {
  background-image: linear-gradient(to top, rgb(1, 196, 219) 0%, rgb(1, 196, 219) 40%, rgb(1, 234, 245) 40%, rgb(1, 234, 245) 60%, rgb(1, 196, 219) 60%, rgb(1, 196, 219) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  position: relative;
}
.heading-primary--wiretapping-pl::before {
  content: "podsłuch";
  position: absolute;
  top: 0;
  right: 0;
  color: rgba(0, 0, 0, 0.1);
  z-index: -1;
  text-shadow: 0.4rem 0.4rem 0.5rem rgba(0, 0, 0, 0.3);
}
.heading-primary--wiretapping-eng {
  background-image: linear-gradient(to top, rgb(1, 196, 219) 0%, rgb(1, 196, 219) 40%, rgb(1, 234, 245) 40%, rgb(1, 234, 245) 60%, rgb(1, 196, 219) 60%, rgb(1, 196, 219) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  position: relative;
}
.heading-primary--wiretapping-eng::before {
  content: "wiretapping";
  position: absolute;
  top: 0;
  right: 0;
  color: rgba(0, 0, 0, 0.1);
  z-index: -1;
  text-shadow: 0.4rem 0.4rem 0.5rem rgba(0, 0, 0, 0.3);
}
.heading-primary--training-pl {
  background-image: linear-gradient(to top, rgb(108, 129, 144) 0%, rgb(108, 129, 144) 40%, rgb(163, 186, 200) 40%, rgb(163, 186, 200) 60%, rgb(108, 129, 144) 60%, rgb(108, 129, 144) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  position: relative;
}
.heading-primary--training-pl::before {
  content: "trening";
  position: absolute;
  top: 0;
  right: 0;
  color: rgba(0, 0, 0, 0.1);
  z-index: -1;
  text-shadow: 0.4rem 0.4rem 0.5rem rgba(0, 0, 0, 0.3);
}
.heading-primary--training-eng {
  background-image: linear-gradient(to top, rgb(108, 129, 144) 0%, rgb(108, 129, 144) 40%, rgb(163, 186, 200) 40%, rgb(163, 186, 200) 60%, rgb(108, 129, 144) 60%, rgb(108, 129, 144) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  position: relative;
}
.heading-primary--training-eng::before {
  content: "training";
  position: absolute;
  top: 0;
  right: 0;
  color: rgba(0, 0, 0, 0.1);
  z-index: -1;
  text-shadow: 0.4rem 0.4rem 0.5rem rgba(0, 0, 0, 0.3);
}
.heading-primary--rest-pl {
  background-image: linear-gradient(to top, rgb(113, 194, 153) 0%, rgb(113, 194, 153) 40%, rgb(167, 233, 205) 40%, rgb(167, 233, 205) 60%, rgb(113, 194, 153) 60%, rgb(113, 194, 153) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  position: relative;
  display: inline-block;
  max-width: 50%;
}
.heading-primary--rest-pl::before {
  content: "Odpoczynek";
  position: absolute;
  top: 0;
  right: 0;
  color: rgba(0, 0, 0, 0.1);
  z-index: -1;
  text-shadow: 0.4rem 0.4rem 0.5rem rgba(0, 0, 0, 0.3);
}
.heading-primary--rest-pl::after {
  content: "";
  width: 5vmin;
  height: 0.2vmin;
  border-radius: 5px;
  position: absolute;
  background: rgb(212, 135, 109);
  box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.7);
  top: 45%;
  right: 0;
  transform: translatex(115%);
}
.heading-primary--rest-eng {
  background-image: linear-gradient(to top, rgb(113, 194, 153) 0%, rgb(113, 194, 153) 40%, rgb(167, 233, 205) 40%, rgb(167, 233, 205) 60%, rgb(113, 194, 153) 60%, rgb(113, 194, 153) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  position: relative;
  display: inline-block;
  max-width: 50%;
}
.heading-primary--rest-eng::before {
  content: "Rest";
  position: absolute;
  top: 0;
  right: 0;
  color: rgba(0, 0, 0, 0.1);
  z-index: -1;
  text-shadow: 0.4rem 0.4rem 0.5rem rgba(0, 0, 0, 0.3);
}
.heading-primary--rest-eng::after {
  content: "";
  width: 21vmin;
  height: 0.2vmin;
  border-radius: 5px;
  position: absolute;
  background: rgb(212, 135, 109);
  box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.7);
  top: 45%;
  right: 0;
  transform: translatex(105%);
}
.heading-primary--observation-pl {
  background-image: linear-gradient(to top, rgb(242, 242, 242) 0%, rgb(242, 242, 242) 40%, rgb(183, 178, 178) 40%, rgb(183, 178, 178) 60%, rgb(242, 242, 242) 60%, rgb(242, 242, 242) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  position: relative;
  max-width: 50%;
}
.heading-primary--observation-pl::before {
  content: "Obserwacja";
  position: absolute;
  top: 0;
  right: 0;
  color: rgba(0, 0, 0, 0.1);
  z-index: -1;
  text-shadow: 0.4rem 0.4rem 0.5rem rgba(0, 0, 0, 0.3);
}
.heading-primary--observation-pl::after {
  content: "";
  width: 5vmin;
  height: 0.2vmin;
  border-radius: 5px;
  position: absolute;
  background: rgb(212, 135, 109);
  box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.7);
  top: 45%;
  right: 0;
  transform: translatex(115%);
}
.heading-primary--observation-eng {
  background-image: linear-gradient(to top, rgb(242, 242, 242) 0%, rgb(242, 242, 242) 40%, rgb(183, 178, 178) 40%, rgb(183, 178, 178) 60%, rgb(242, 242, 242) 60%, rgb(242, 242, 242) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  position: relative;
  max-width: 50%;
}
.heading-primary--observation-eng::before {
  content: "Observation";
  position: absolute;
  top: 0;
  right: 0;
  color: rgba(0, 0, 0, 0.1);
  z-index: -1;
  text-shadow: 0.4rem 0.4rem 0.5rem rgba(0, 0, 0, 0.3);
}
.heading-primary--observation-eng::after {
  content: "";
  width: 3.8vmin;
  height: 0.2vmin;
  border-radius: 5px;
  position: absolute;
  background: rgb(212, 135, 109);
  box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.7);
  top: 45%;
  right: 0;
  transform: translatex(112%);
}
.heading-primary--analysis-pl {
  background-image: linear-gradient(to top, rgb(183, 180, 174) 0%, rgb(183, 180, 174) 40%, rgb(227, 225, 221) 40%, rgb(227, 225, 221) 60%, rgb(183, 180, 174) 60%, rgb(183, 180, 174) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  position: relative;
  max-width: 50%;
}
.heading-primary--analysis-pl::before {
  content: "Analiza";
  position: absolute;
  top: 0;
  right: 0;
  color: rgba(0, 0, 0, 0.1);
  z-index: -1;
  text-shadow: 0.4rem 0.4rem 0.5rem rgba(0, 0, 0, 0.3);
}
.heading-primary--analysis-pl::after {
  content: "";
  width: 13vmin;
  height: 0.2vmin;
  border-radius: 5px;
  position: absolute;
  background: rgb(212, 135, 109);
  box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.7);
  top: 45%;
  right: 0;
  transform: translatex(110%);
}
.heading-primary--analysis-eng {
  background-image: linear-gradient(to top, rgb(183, 180, 174) 0%, rgb(183, 180, 174) 40%, rgb(227, 225, 221) 40%, rgb(227, 225, 221) 60%, rgb(183, 180, 174) 60%, rgb(183, 180, 174) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  position: relative;
  max-width: 50%;
}
.heading-primary--analysis-eng::before {
  content: "Insight";
  position: absolute;
  top: 0;
  right: 0;
  color: rgba(0, 0, 0, 0.1);
  z-index: -1;
  text-shadow: 0.4rem 0.4rem 0.5rem rgba(0, 0, 0, 0.3);
}
.heading-primary--analysis-eng::after {
  content: "";
  width: 11vmin;
  height: 0.2vmin;
  border-radius: 5px;
  position: absolute;
  background: rgb(212, 135, 109);
  box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.7);
  top: 45%;
  right: 0;
  transform: translatex(110%);
}
.heading-primary--results {
  font-size: 2vmin;
  background-image: linear-gradient(to top, rgb(73, 223, 254) 0%, rgb(73, 223, 254) 40%, rgb(187, 239, 249) 40%, rgb(187, 239, 249) 60%, rgb(73, 223, 254) 60%, rgb(73, 223, 254) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0.1rem 0.1rem 0.8rem rgba(187, 239, 249, 0.5);
  display: inline-block;
  text-align: center;
  margin: 0.5vmin 2vmin;
}

.heading-secondary {
  font-size: 2.2vmin;
  color: rgb(255, 245, 245);
  font-weight: 100;
  letter-spacing: 0.1vmin;
  mix-blend-mode: lighten;
}

.btn__text {
  font-family: "Russo One Regular";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline;
  text-align: center;
  backface-visibility: hidden;
  filter: contrast(120%);
  font-size: 1.6vmin;
  letter-spacing: 0.1vmin;
  opacity: 1;
  z-index: 2;
  transition: opacity 0.2s, transform 0.2s;
}
.btn__text:hover {
  opacity: 0.7;
  transform: translateY(0.1vmin) translate(-50%, -50%);
}

.btn-popup-text {
  font-family: "Russo One Regular";
  font-size: 1.7vmin;
  text-transform: uppercase;
  font-weight: 100;
  letter-spacing: 0.2vmin;
  text-shadow: 0.4rem 0.4rem 0.5rem rgba(0, 0, 0, 0.3);
  transition: all 0.5s;
  filter: contrast(120%) brightness(110%);
  transition: all ease-out 0.3s;
}
.btn-popup-text--smaller {
  font-size: 1.3vmin;
}

.timer__text {
  font-size: 1.3vmin;
  text-transform: uppercase;
  font-weight: 400;
  color: rgb(9, 213, 255);
}

.time-end {
  font-size: 2vmin;
  text-transform: uppercase;
  font-weight: 400;
  color: rgb(170, 0, 23);
}

.timer__count {
  font-family: "Free Pixel", sans-serif;
  font-weight: 300;
  color: rgb(9, 213, 255);
  font-size: 3vmin;
}

.decision__text {
  font-size: 1.8vmin;
  text-transform: uppercase;
  font-weight: 400;
  padding: 1vmin;
}

.dice__text {
  font-size: 1.9vmin;
  text-transform: uppercase;
  font-weight: 400;
  color: rgb(255, 245, 245);
  z-index: 2;
  text-shadow: -0.5px 0 rgb(0, 0, 0), 0 0.5px rgb(0, 0, 0), 0.5px 0 rgb(0, 0, 0), 0 -0.5px rgb(0, 0, 0);
}
.dice__text--single {
  color: rgb(255, 245, 245);
  z-index: 2;
  text-shadow: -1.5px 0 rgb(0, 0, 0), 0 1.5px rgb(0, 0, 0), 1.5px 0 rgb(0, 0, 0), 0 -1.5px rgb(0, 0, 0);
  font-size: 3vmin;
}

.dice-effect__label {
  display: inline-block;
  text-align: center;
  color: rgb(255, 245, 245);
  font-size: 1.4vmin;
  text-transform: uppercase;
  margin-top: 0.2vmin;
}

.analysis__text {
  font-size: 2.5vmin;
  text-transform: uppercase;
  font-weight: 400;
  padding-left: 1vmin;
  line-height: 0.9;
}
.analysis__text--smaller {
  font-size: 1.8vmin;
  text-transform: uppercase;
  font-weight: 400;
  padding-left: 1vmin;
}

.information__text {
  font-family: "Capsuula";
  color: rgb(255, 255, 255);
  font-size: 3vmin;
  line-height: 130%;
  letter-spacing: 0.1vmin;
  display: inline-block;
  margin-bottom: 1vmin;
  margin-top: 1vmin;
}
.information__text--float {
  width: 50%;
  height: auto;
  float: left;
}

.u-padding-button {
  padding: 1vmin 1vmin !important;
}

.u-margin-bottom {
  margin-bottom: 2.2vmin;
}

.u-margin-top {
  margin-top: 2.2vmin;
}

.u-arrow-margin {
  margin-right: -4vmin;
}

.u-hidden {
  visibility: hidden;
}

.btn, .btn:link, .btn:visited {
  font-family: "Russo One Regular";
  color: rgb(4, 9, 32);
  background: transparent;
  display: inline-block;
  text-align: center;
  backface-visibility: hidden;
  cursor: pointer;
  position: relative;
  border: 0.5vmin solid rgb(9, 213, 255);
  border-radius: 2%;
  box-shadow: 0vmin 0.1vmin 0.1vmin 0.1vmin rgba(44, 114, 235, 0.7);
  z-index: 20;
  transition: all ease-in 0.2s, display 0s;
}
.btn::before {
  content: "";
  background: rgba(101, 101, 101, 0.8);
  backdrop-filter: blur(1.2vmin) brightness(200%);
  -webkit-backdrop-filter: blur(1.2vmin) brightness(200%);
  box-shadow: inset 0vmin 0.1vmin 0.1vmin 0.1vmin rgba(44, 114, 235, 0.7);
}
.btn:hover {
  box-shadow: 0vmin 0.2vmin 0.8vmin 0.1vmin rgba(44, 114, 235, 0.7);
}
.btn:hover::before {
  box-shadow: inset 0vmin 0.2vmin 0.8vmin 0.1vmin rgba(44, 114, 235, 0.7);
}
.btn:active, .btn:focus {
  filter: brightness(170%);
}
.btn--decision {
  width: 16vmin;
  height: 6vmin;
  position: Absolute;
  top: 88%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0 auto;
  z-index: 1;
  transition: none;
}
.btn--decision::before {
  content: "";
  width: 15.4vmin;
  height: 5.4vmin;
  z-index: -10;
  position: Absolute;
  z-index: -1;
  top: -4%;
  left: -1%;
}
.btn--change {
  width: 20vmin;
  height: 4.4vmin;
  position: Absolute;
  top: 91%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0 auto;
  z-index: 1;
}
.btn--change::before {
  content: "";
  width: 19.2vmin;
  height: 3.6vmin;
  z-index: -10;
  position: Absolute;
  z-index: -1;
  top: -4%;
  left: -0.5%;
}
.btn--accept {
  width: 16vmin;
  height: 4vmin;
  position: Absolute;
  top: 79%;
  left: 46%;
}
.btn--accept::before {
  content: "";
  width: 15.3vmin;
  height: 3.2vmin;
  z-index: -2;
  position: Absolute;
  top: -3%;
  left: -1%;
}
.btn--dice-toggler {
  width: 3.5vmin;
  aspect-ratio: 1/1;
  position: absolute;
  border: none;
  box-shadow: none;
  bottom: 2%;
  right: 2%;
  z-index: 1;
  filter: drop-shadow(0.1vmin 0.1vmin 0.1vmin rgba(44, 114, 235, 0.7));
  transition: all 0.1s;
}
.btn--dice-toggler:hover {
  box-shadow: none;
  filter: drop-shadow(0.3vmin 0.3vmin 0.3vmin rgba(44, 114, 235, 0.7));
}
.btn--dice-toggler > img {
  width: 90%;
  height: 100%;
  position: Absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: invert(60%) contrast(120%) brightness(120%);
}
.btn--dice-toggler > span {
  font-size: 2.5vmin;
  color: rgb(4, 9, 32);
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.btn-header, .btn-header:link, .btn-header:visited {
  display: inline-block;
  cursor: pointer;
  border: none;
  background: transparent;
  transition: all 0.2s;
  box-shadow: 0.3vmin 0.3vmin 0.6vmin rgba(4, 9, 32, 0.7);
}
.btn-header:hover {
  transform: translateY(0.2vmin);
  filter: drop-shadow(0.3vmin 0.3vmin 0.6vmin rgba(4, 9, 32, 0.7));
  box-shadow: 0.5vmin 0.5vmin 0.8vmin rgba(4, 9, 32, 0.7);
}
.btn-header:active, .btn-header:focus {
  filter: brightness(120%);
  transform: translateY(0.1vmin);
}
.btn-header--function {
  height: 7vmin;
  width: 18vmin;
  background: url("../img/zakończ dzień.png") no-repeat center/cover;
  filter: drop-shadow(0.3vmin 0.3vmin 0.6vmin rgba(4, 9, 32, 0.7));
  box-shadow: none !important;
}
.btn-header--tylda {
  height: 7vmin;
  width: 7vmin;
  background: url("../img/tylda.png") no-repeat center/contain;
}

.btn-popup {
  display: inline-block;
  text-align: center;
  width: 32%;
  height: auto;
  padding: 0.9vmin 1vmin;
  border-radius: 3vmin;
  margin-bottom: 0.8vmin;
  z-index: 1;
  position: relative;
  overflow: hidden;
  background: transparent;
  border: none;
  transition: all ease-out 0.3s;
}
.btn-popup::before {
  content: "";
  position: Absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("../img/mask.png") no-repeat center center/cover;
  opacity: 0.2;
  background-blend-mode: multiply;
  filter: brightness(70%) contrast(200%);
  overflow: hidden;
  z-index: -1;
  transition: all ease-in 0.2s;
}
.btn-popup:hover {
  cursor: pointer;
  transform: translateY(-0.1vmin);
  backface-visibility: hidden;
}
.btn-popup:hover .btn-popup-text {
  color: rgba(255, 245, 245, 0.5);
  text-shadow: rgba(0, 0, 0, 0.8) 0.2vmin 0.2vmin 0.5vmin;
}
.btn-popup--raid {
  color: rgba(212, 135, 109, 0.4);
  border: rgba(212, 135, 109, 0.4) 0.3vmin solid;
}
.btn-popup--raid:hover::before {
  background: linear-gradient(to right, rgba(212, 135, 109, 0.9), rgba(212, 135, 109, 0.9)), url(../img/mask.png) center center/cover;
  background-blend-mode: multiply;
  opacity: 0.4;
  filter: brightness(120%);
}
.btn-popup--provocation {
  color: rgba(238, 216, 108, 0.4);
  border: rgba(238, 216, 108, 0.4) 0.3vmin solid;
}
.btn-popup--provocation:hover::before {
  background: linear-gradient(to right, rgba(238, 216, 108, 0.9), rgba(238, 216, 108, 0.9)), url(../img/mask.png) center center/cover;
  background-blend-mode: multiply;
  opacity: 0.4;
  filter: brightness(120%);
}
.btn-popup--recon {
  color: rgba(181, 141, 216, 0.4);
  border: rgba(181, 141, 216, 0.4) 0.3vmin solid;
  filter: brightness(120%);
}
.btn-popup--recon:hover::before {
  background: linear-gradient(to right, rgba(127, 92, 167, 0.9), rgba(127, 92, 167, 0.9)), url(../img/mask.png) center center/cover;
  background-blend-mode: multiply;
  opacity: 0.4;
  filter: brightness(120%);
}
.btn-popup--wiretapping {
  color: rgba(1, 196, 219, 0.4);
  border: rgba(1, 196, 219, 0.4) 0.3vmin solid;
}
.btn-popup--wiretapping:hover::before {
  background: linear-gradient(to right, rgba(1, 196, 219, 0.9), rgba(1, 196, 219, 0.9)), url(../img/mask.png) center center/cover;
  background-blend-mode: multiply;
  opacity: 0.4;
  filter: brightness(120%);
}
.btn-popup--training {
  color: rgba(120, 145, 165, 0.9);
  border: rgba(108, 129, 144, 0.8) 0.3vmin solid;
}
.btn-popup--training:hover::before {
  background: linear-gradient(to right, rgba(108, 129, 144, 0.9), rgba(108, 129, 144, 0.9)), url(../img/mask.png) center center/cover;
  background-blend-mode: multiply;
  opacity: 0.4;
  filter: brightness(120%);
}
.btn-popup-clicked {
  filter: brightness(100%);
  border: #09d5ff 0.3vmin solid;
  box-shadow: 0vmin 0vmin 0.7vmin 0.4vmin rgba(9, 213, 255, 0.7);
  transition: all ease-out 0.3s;
}
.btn-popup-clicked .btn-popup-text {
  color: rgba(255, 245, 245, 0.9);
  text-shadow: rgba(0, 0, 0, 0.7) 0.3vmin 0.3vmin 0.3vmin;
}
.btn-popup-clicked:hover {
  filter: drop-shadow(0 0 1vmin rgba(9, 213, 255, 0.9));
}
.btn-popup-clicked--raid::before {
  background: linear-gradient(to right, rgba(212, 135, 109, 0.7), rgba(212, 135, 109, 0.6)), url(../img/mask.png) center center/cover;
  background-blend-mode: multiply;
  opacity: 0.7;
  filter: brightness(110%) contrast(140%);
}
.btn-popup-clicked--provocation::before {
  background: linear-gradient(to right, rgba(238, 216, 108, 0.7), rgba(238, 216, 108, 0.6)), url(../img/mask.png) center center/cover;
  background-blend-mode: multiply;
  opacity: 0.7;
  filter: brightness(110%) contrast(140%);
}
.btn-popup-clicked--recon::before {
  background: linear-gradient(to right, rgba(127, 92, 167, 0.7), rgba(127, 92, 167, 0.6)), url(../img/mask.png) center center/cover;
  background-blend-mode: multiply;
  opacity: 0.7;
  filter: brightness(110%) contrast(140%);
}
.btn-popup-clicked--wiretapping::before {
  background: linear-gradient(to right, rgba(1, 196, 219, 0.7), rgba(1, 196, 219, 0.6)), url(../img/mask.png) center center/cover;
  background-blend-mode: multiply;
  opacity: 0.7;
  filter: brightness(110%) contrast(140%);
}
.btn-popup-clicked--training::before {
  background: linear-gradient(to right, rgba(108, 129, 144, 0.7), rgba(108, 129, 144, 0.6)), url(../img/mask.png) center center/cover;
  background-blend-mode: multiply;
  opacity: 0.7;
  filter: brightness(110%) contrast(140%);
}
.btn-popup:focus {
  box-shadow: 0.2vmin 0.2vmin 0.5vmin 0.2vmin rgba(0, 0, 0, 0.5), 0vmin 0vmin 0.7vmin 0.4vmin rgba(9, 213, 255, 0.4);
  transform: translateY(0.2vmin);
}
.btn-popup--learned {
  color: rgba(255, 245, 245, 0.6);
  border: rgba(9, 213, 255, 0.6) 0.2vmin solid;
  box-shadow: 0vmin 0vmin 0.8vmin 0.1vmin rgba(9, 213, 255, 0.4), inset 0vmin 0vmin 0.1vmin rgba(9, 213, 255, 0.6);
}
.btn-popup--learned::before {
  filter: brightness(120%);
  opacity: 0.5;
}
.btn-popup--learned:hover {
  cursor: default;
  transform: none;
}
.btn-popup--learned:hover .btn-popup-text {
  color: rgba(255, 245, 245, 0.6);
  text-shadow: none;
}
.btn-popup--learned:hover::before {
  filter: brightness(120%);
  opacity: 0.5;
}
.btn-popup--learned:focus {
  box-shadow: 0vmin 0vmin 0.8vmin 0.1vmin rgba(9, 213, 255, 0.4), inset 0vmin 0vmin 0.1vmin rgba(9, 213, 255, 0.6);
  transform: none;
}

.btn-information, .btn-information:link, .btn-information:visited {
  position: absolute;
  top: 40%;
  left: 83%;
  cursor: pointer;
  height: 10vmin;
  width: 10vmin;
  background: url("../img/dalej-button.png") no-repeat center/contain;
  border: none;
  transition: all 0.2s;
}
.btn-information:hover, .btn-information:link:hover, .btn-information:visited:hover {
  transform: translateY(0.2vmin);
  filter: brightness(90%);
  border: none;
}
.btn-information:active, .btn-information:focus, .btn-information:link:active, .btn-information:link:focus, .btn-information:visited:active, .btn-information:visited:focus {
  filter: brightness(120%);
  transform: translateY(0.1vmin);
}

.timer__box {
  position: absolute;
  top: 0;
  right: 0;
  height: 7vmin;
  width: 25vmin;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: url("../img/timer-bg.png") no-repeat center/cover;
  box-shadow: 0.3vmin 0.3vmin 0.6vmin rgba(4, 9, 32, 0.7);
  transition: all ease-out;
}
.timer__box-end {
  font-size: 2vmin;
  text-transform: uppercase;
  font-weight: 400;
  color: rgb(170, 0, 23);
  animation: glow 2s infinite;
}

.footer {
  width: 97vw;
  height: 7vmin;
  position: Absolute;
  left: 0;
  top: 91%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  z-index: -1;
}
.footer__logo-box {
  width: 25vmin;
  height: auto;
  display: inline;
  text-align: Center;
}
.footer__logo-box > img {
  width: 100%;
  filter: brightness(110%) contrast(150%);
}
.footer__logogame-box {
  width: 15vmin;
  height: auto;
  display: inline;
  text-align: right;
}
.footer__logogame-box > img {
  width: 50%;
  filter: brightness(110%) contrast(180%);
}

.main-grid {
  position: relative;
  display: grid;
  justify-content: center;
  grid-column-gap: 1%;
  grid-row-gap: 2%;
  margin: 0 auto;
  width: 100%;
  height: 100%;
}
.main-grid--7-8players {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.main-grid--5-6players {
  width: 75%;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.main-grid--3-4players {
  width: 50%;
  grid-column-gap: 2%;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.action--raid-pl,
.action--raid-eng {
  grid-area: raid;
}

.action--provocation-pl,
.action--provocation-eng {
  grid-area: provocation;
}

.action--recon-pl,
.action--recon-eng {
  grid-area: recon;
}

.action--wiretapping-pl,
.action--wiretapping-eng {
  grid-area: wiretapping;
}

.action--training-pl,
.action--training-eng {
  grid-area: training;
}

.action--other {
  grid-area: other;
}

.popup-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-gap: 2.5vmin;
  grid-template-areas: "raid training" "provocation training" "recon other" "wiretapping other";
}

.header {
  width: 95vw;
  height: 9vmin;
  display: grid;
  grid-template-columns: 45% 25% 15%;
  grid-gap: 5%;
  align-items: center;
  position: relative;
  margin-top: 1vmin;
}
.header__text-box {
  max-width: 88%;
  display: inline-block;
  padding-left: 10vmin;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: -1;
}
.header__button-box {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin-bottom: 1vmin;
}
.header__popup {
  width: 80%;
  height: 5%;
  display: inline-block;
  margin: 2.4vmin 5vmin 3.6vmin 2vmin;
}

.main {
  position: absolute;
  width: 100%;
  height: 100%;
  max-width: 85vw;
  max-height: 72vmin;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: brightness(90%) contrast(110%);
}

.player-box {
  border: 2px solid rgb(112, 112, 112);
  position: relative;
}
.player-box__img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: -2%;
}
.player-box__img--smaller {
  width: 33%;
  height: auto;
  position: absolute;
  top: -7%;
  left: -7%;
}
.player-box__name {
  position: absolute;
  top: 16%;
  left: 52%;
  width: 55%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.player-box__name--filled {
  position: Absolute;
  top: 13%;
  left: 65%;
  width: 58%;
  text-align: center;
  transform: translate(-50%, -50%);
}
.player-box__link {
  text-decoration: none;
  color: rgb(4, 9, 32);
}
.player-box__decision {
  position: absolute;
  width: 100%;
  height: 55%;
  top: 27%;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.player-box__decision .decision-box {
  width: 92%;
  height: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0.2vmin 0.3vmin 0.5vmin 0.2vmin rgba(0, 0, 0, 0.5);
}
.player-box__decision .decision-box__left {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: rgb(0, 0, 0);
}
.player-box__decision .decision-box__left--raid {
  background-color: rgb(212, 135, 109);
}
.player-box__decision .decision-box__left--provocation {
  background-color: rgb(238, 216, 108);
}
.player-box__decision .decision-box__left--recon {
  background-color: rgb(127, 92, 167);
}
.player-box__decision .decision-box__left--wiretapping {
  background-color: rgb(1, 196, 219);
}
.player-box__decision .decision-box__left--training {
  background-color: rgb(108, 129, 144);
  width: 35%;
}
.player-box__decision .decision-box__left--rest {
  background-color: rgb(113, 194, 153);
}
.player-box__decision .decision-box__left--observation {
  background-color: rgb(242, 242, 242);
}
.player-box__decision .decision-box__left--analysis {
  background-color: rgb(183, 180, 174);
}
.player-box__decision .decision-box__right {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: rgb(255, 245, 245);
  text-shadow: 0 0 0.6vmin rgba(0, 0, 0, 0.7);
}
.player-box__decision .decision-box__right--raid {
  background: linear-gradient(to right, rgba(212, 135, 109, 0.9), rgba(212, 135, 109, 0.9)), url("../img/mask__box-train.png") center center/cover;
  background-blend-mode: multiply;
}
.player-box__decision .decision-box__right--provocation {
  background: linear-gradient(to right, rgba(238, 216, 108, 0.9), rgba(238, 216, 108, 0.9)), url("../img/mask__box-train.png") center center/cover;
  background-blend-mode: multiply;
}
.player-box__decision .decision-box__right--recon {
  background: linear-gradient(to right, rgba(127, 92, 167, 0.9), rgba(127, 92, 167, 0.9)), url("../img/mask__box-train.png") center center/cover;
  background-blend-mode: multiply;
}
.player-box__decision .decision-box__right--wiretapping {
  background: linear-gradient(to right, rgba(1, 196, 219, 0.9), rgba(1, 196, 219, 0.9)), url("../img/mask__box-train.png") center center/cover;
  background-blend-mode: multiply;
}
.player-box__decision .decision-box__right--training {
  width: 65%;
  background: linear-gradient(to right, rgba(108, 129, 144, 0.9), rgba(108, 129, 144, 0.9)), url("../img/mask__box-training.png") center center/cover;
  background-blend-mode: multiply;
}
.player-box__decision .decision-box__right--rest {
  background: linear-gradient(to right, rgba(113, 194, 153, 0.9), rgba(113, 194, 153, 0.9)), url("../img/mask__box-clock.png") center center/cover;
  background-blend-mode: multiply;
}
.player-box__decision .decision-box__right--observation {
  background: linear-gradient(to right, rgba(242, 242, 242, 0.9), rgba(242, 242, 242, 0.9)), url("../img/mask__box-clock.png") center center/cover;
  background-blend-mode: multiply;
}
.player-box__decision .decision-box__right--analysis {
  background: linear-gradient(to right, rgba(183, 180, 174, 0.9), rgba(183, 180, 174, 0.9)), url("../img/mask__box-clock.png") center center/cover;
  background-blend-mode: multiply;
}
.player-box__analysis {
  position: absolute;
  width: 100%;
  height: 55%;
  top: 27%;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.player-box__analysis .analysis-box {
  width: 92%;
  height: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0.2vmin 0.3vmin 0.5vmin 0.2vmin rgba(0, 0, 0, 0.5);
}
.player-box__analysis .analysis-box__left {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background-color: rgb(183, 180, 174);
  color: rgb(0, 0, 0);
}
.player-box__analysis .analysis-box__right {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background: linear-gradient(to right, rgba(227, 225, 221, 0.6), rgba(227, 225, 221, 0.6)), url(../img/mask__analysis.png) center center/cover;
  filter: brightness(120%);
  background-blend-mode: multiply;
  text-shadow: 0.1vmin 0.1vmin 0.9vmin rgba(9, 213, 255, 0.9);
}
.player-box__analysis .analysis-effect {
  width: 92%;
  height: 66%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.player-box__analysis .analysis-effect-left, .player-box__analysis .analysis-effect-right {
  width: 49%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0.2vmin 0.3vmin 0.5vmin 0.2vmin rgba(0, 0, 0, 0.5);
}
.player-box__analysis .analysis-effect-top {
  width: 100%;
  height: 55%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: rgb(255, 245, 245);
  text-shadow: 0 0 0.6vmin rgba(0, 0, 0, 0.7);
}
.player-box__analysis .analysis-effect-top--raid {
  background: linear-gradient(to right, rgba(212, 135, 109, 0.9), rgba(212, 135, 109, 0.9)), url("../img/mask__analysis-effect.png") center center/cover;
  background-blend-mode: multiply;
}
.player-box__analysis .analysis-effect-top--provocation {
  background: linear-gradient(to right, rgba(238, 216, 108, 0.9), rgba(238, 216, 108, 0.9)), url("../img/mask__analysis-effect.png") center center/cover;
  background-blend-mode: multiply;
}
.player-box__analysis .analysis-effect-top--recon {
  background: linear-gradient(to right, rgba(181, 141, 216, 0.9), rgba(181, 141, 216, 0.9)), url("../img/mask__analysis-effect.png") center center/cover;
  background-blend-mode: multiply;
}
.player-box__analysis .analysis-effect-top--wiretapping {
  background: linear-gradient(to right, rgba(1, 196, 219, 0.9), rgba(1, 196, 219, 0.9)), url("../img/mask__analysis-effect.png") center center/cover;
  background-blend-mode: multiply;
}
.player-box__analysis .analysis-effect-top--other {
  background: linear-gradient(to right, rgba(227, 225, 221, 0.9), rgba(227, 225, 221, 0.9)), url("../img/mask__analysis-effect.png") center center/cover;
  background-blend-mode: multiply;
}
.player-box__analysis .analysis-effect-bottom {
  width: 100%;
  height: 45%;
  color: rgb(0, 0, 0);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.player-box__analysis .analysis-effect-bottom--raid {
  background-color: rgb(212, 135, 109);
}
.player-box__analysis .analysis-effect-bottom--provocation {
  background-color: rgb(238, 216, 108);
}
.player-box__analysis .analysis-effect-bottom--recon {
  background-color: rgb(181, 141, 216);
}
.player-box__analysis .analysis-effect-bottom--wiretapping {
  background-color: rgb(1, 196, 219);
}
.player-box__analysis .analysis-effect-bottom--other {
  background-color: rgb(183, 180, 174);
}
.player-box__analysis .analysis__dices {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
}
.player-box__analysis .analysis__dices .dice {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 30%;
  height: 70%;
  position: relative;
}
.player-box__analysis .analysis__dices .dice__img {
  width: 75%;
  height: 100%;
  position: Absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.player-box__dices {
  position: absolute;
  width: 90%;
  height: 70%;
  top: 27%;
  left: 5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
.player-box__dices .dice-effect {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 25%;
  height: 45%;
  margin: 0 4%;
  position: relative;
}
.player-box__dices .dice-effect .single-dice {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 70%;
  height: 60%;
  position: relative;
  margin-bottom: 0.4vmin;
  filter: contrast(130%);
}
.player-box__dices .dice-effect .single-dice__frame {
  width: 100%;
  height: 100%;
  position: Absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  filter: brightness(110%) contrast(110%);
}
.player-box__dices .dice-effect .single-dice__img {
  width: 100%;
  height: 100%;
  position: Absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  filter: brightness(80%) contrast(120%);
}
.player-box__results {
  position: absolute;
  width: 90%;
  height: 70%;
  top: 28%;
  left: 5%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.player-box__results .results-box {
  width: 50%;
  height: 60%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.player-box__results .results-box--final {
  position: relative;
  width: 50%;
  height: 35%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.player-box__results .results-box .points-box {
  position: relative;
  width: 70%;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.player-box__results .results-box .points-box .points {
  position: relative;
  width: 6vmin;
  height: 6vmin;
}
.player-box__results .results-box .points-box .points--final {
  position: relative;
  width: 7vmin;
  height: 7vmin;
}
.player-box__results .results-box .points-box .points__img {
  width: 90%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: invert(80%) contrast(150%) brightness(150%);
}
.player-box__results .results-box .points-box .points__text {
  font-size: 3vmin;
  color: rgb(4, 9, 32);
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.player-box .arrow {
  height: 1.6vmin;
  width: 1.6vmin;
  border: 0.4vmin solid rgba(187, 239, 249, 0.9);
  border-width: 0.4vmin 0.4vmin 0 0;
}
.player-box .arrow--left {
  transform: rotate(224deg);
}
.player-box .arrow--right {
  transform: rotate(45deg);
}
.player-box .arrow--bottom {
  transform: rotate(135deg);
}

.form__name .name-input {
  border: none;
  background: transparent;
  text-align: center;
  vertical-align: bottom;
  width: 95%;
  transition: all 0.4s;
  overflow: hidden;
  position: relative;
  backface-visibility: hidden;
  resize: none;
}
.form__name .name-input::-moz-placeholder {
  color: rgb(255, 245, 245);
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}
.form__name .name-input::placeholder {
  color: rgb(255, 245, 245);
  transition: all 0.4s;
}
.form__name .name-input:hover {
  filter: brightness(70%);
}
.form__name .name-input:focus {
  outline: none;
  filter: brightness(90%);
  text-shadow: 0rem 0rem 0.4rem rgb(255, 245, 245);
}
.form__name-icon {
  position: Absolute;
  top: 10%;
  left: 90%;
  width: 10%;
  opacity: 0;
  transition: all 0.4s;
}
.form__name:hover .form__name-icon, .form__name:focus .form__name-icon {
  opacity: 1;
  cursor: pointer;
}

.action {
  margin: 3vmin 0;
}
.action--raid, .action--provocation, .action--recon, .action--wiretapping, .action--training, .action--raid-pl, .action--provocation-pl, .action--recon-pl, .action--wiretapping-pl, .action--training-pl, .action--raid-eng, .action--provocation-eng, .action--recon-eng, .action--wiretapping-eng, .action--training-eng {
  position: relative;
}
.action--raid-header, .action--provocation-header, .action--recon-header, .action--wiretapping-header, .action--training-header, .action--raid-pl-header, .action--provocation-pl-header, .action--recon-pl-header, .action--wiretapping-pl-header, .action--training-pl-header, .action--raid-eng-header, .action--provocation-eng-header, .action--recon-eng-header, .action--wiretapping-eng-header, .action--training-eng-header {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}
.action--raid-pl {
  background: linear-gradient(to right, rgb(212, 135, 109) 0.2vmin, transparent 0.2vmin) 0 0, linear-gradient(to bottom, rgb(212, 135, 109) 0.2vmin, transparent 0.2vmin) 0 0, linear-gradient(to left, rgb(212, 135, 109) 0.2vmin, transparent 0.2vmin) 100% 0, linear-gradient(to bottom, rgb(212, 135, 109) 0.2vmin, transparent 0.2vmin) 100% 0, linear-gradient(to left, rgb(212, 135, 109) 0.2vmin, transparent 0.2vmin) 100% 100%, linear-gradient(to top, rgb(212, 135, 109) 0.2vmin, transparent 0.2vmin) 100% 100%, linear-gradient(to right, rgb(212, 135, 109) 0.2vmin, transparent 0.2vmin) 0 100%, linear-gradient(to top, rgb(212, 135, 109) 0.2vmin, transparent 0.2vmin) 0 100%;
  background-repeat: no-repeat;
  background-size: 0.2vmin 8vmin, 36% 1vmin, 1vmin 8vmin, 36% 1vmin, 1vmin 0vmin, 2vmin 0.2vmin, 0.2vmin 0vmin, 2vmin 0.2vmin;
}
.action--raid-pl::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 38%;
  height: 100%;
  z-index: -1;
  box-shadow: rgba(0, 0, 0, 0.3) -0.3vmin -0.3vmin 0.8vmin;
}
.action--raid-pl::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 38%;
  height: 100%;
  z-index: -1;
  box-shadow: rgba(0, 0, 0, 0.3) 0.3vmin -0.3vmin 0.8vmin;
}
.action--raid-pl-tutorial {
  background: linear-gradient(to right, rgb(212, 135, 109) 0.2vmin, transparent 0.2vmin) 0 0, linear-gradient(to bottom, rgb(212, 135, 109) 0.2vmin, transparent 0.2vmin) 0 0, linear-gradient(to left, rgb(212, 135, 109) 0.2vmin, transparent 0.2vmin) 100% 0, linear-gradient(to bottom, rgb(212, 135, 109) 0.2vmin, transparent 0.2vmin) 100% 0, linear-gradient(to left, rgb(212, 135, 109) 0.2vmin, transparent 0.2vmin) 100% 100%, linear-gradient(to top, rgb(212, 135, 109) 0.2vmin, transparent 0.2vmin) 100% 100%, linear-gradient(to right, rgb(212, 135, 109) 0.2vmin, transparent 0.2vmin) 0 100%, linear-gradient(to top, rgb(212, 135, 109) 0.2vmin, transparent 0.2vmin) 0 100%;
  background-repeat: no-repeat;
  background-size: 0.2vmin 8vmin, 36% 1vmin, 1vmin 8vmin, 36% 1vmin, 1vmin 0vmin, 64% 0.2vmin, 0.2vmin 0vmin, 2vmin 0.2vmin;
}
.action--raid-pl-tutorial::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 65%;
  height: 100%;
  z-index: -1;
  box-shadow: rgba(0, 0, 0, 0.3) 0.5vmin 0.5vmin 0.8vmin 0vmin;
}
.action--raid-eng {
  background: linear-gradient(to right, rgb(212, 135, 109) 0.2vmin, transparent 0.2vmin) 0 0, linear-gradient(to bottom, rgb(212, 135, 109) 0.2vmin, transparent 0.2vmin) 0 0, linear-gradient(to left, rgb(212, 135, 109) 0.2vmin, transparent 0.2vmin) 100% 0, linear-gradient(to bottom, rgb(212, 135, 109) 0.2vmin, transparent 0.2vmin) 100% 0, linear-gradient(to left, rgb(212, 135, 109) 0.2vmin, transparent 0.2vmin) 100% 100%, linear-gradient(to top, rgb(212, 135, 109) 0.2vmin, transparent 0.2vmin) 100% 100%, linear-gradient(to right, rgb(212, 135, 109) 0.2vmin, transparent 0.2vmin) 0 100%, linear-gradient(to top, rgb(212, 135, 109) 0.2vmin, transparent 0.2vmin) 0 100%;
  background-repeat: no-repeat;
  background-size: 0.2vmin 8vmin, 40% 1vmin, 1vmin 8vmin, 40% 1vmin, 1vmin 0vmin, 2vmin 0.2vmin, 0.2vmin 0vmin, 2vmin 0.2vmin;
}
.action--raid-eng::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  z-index: -1;
  box-shadow: rgba(0, 0, 0, 0.3) -0.3vmin -0.3vmin 0.8vmin;
}
.action--raid-eng::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
  z-index: -1;
  box-shadow: rgba(0, 0, 0, 0.3) 0.3vmin -0.3vmin 0.8vmin;
}
.action--raid-eng-tutorial {
  background: linear-gradient(to right, rgb(212, 135, 109) 0.2vmin, transparent 0.2vmin) 0 0, linear-gradient(to bottom, rgb(212, 135, 109) 0.2vmin, transparent 0.2vmin) 0 0, linear-gradient(to left, rgb(212, 135, 109) 0.2vmin, transparent 0.2vmin) 100% 0, linear-gradient(to bottom, rgb(212, 135, 109) 0.2vmin, transparent 0.2vmin) 100% 0, linear-gradient(to left, rgb(212, 135, 109) 0.2vmin, transparent 0.2vmin) 100% 100%, linear-gradient(to top, rgb(212, 135, 109) 0.2vmin, transparent 0.2vmin) 100% 100%, linear-gradient(to right, rgb(212, 135, 109) 0.2vmin, transparent 0.2vmin) 0 100%, linear-gradient(to top, rgb(212, 135, 109) 0.2vmin, transparent 0.2vmin) 0 100%;
  background-repeat: no-repeat;
  background-size: 0.2vmin 8vmin, 40% 1vmin, 1vmin 8vmin, 40% 1vmin, 1vmin 0vmin, 64% 0.2vmin, 0.2vmin 0vmin, 2vmin 0.2vmin;
}
.action--raid-eng-tutorial::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 65%;
  height: 100%;
  z-index: -1;
  box-shadow: rgba(0, 0, 0, 0.3) 0.5vmin 0.5vmin 0.8vmin 0vmin;
}
.action--provocation-pl {
  background: linear-gradient(to right, rgb(238, 216, 108) 0.2vmin, transparent 0.2vmin) 0 0, linear-gradient(to bottom, rgb(238, 216, 108) 0.2vmin, transparent 0.2vmin) 0 0, linear-gradient(to left, rgb(238, 216, 108) 0.2vmin, transparent 0.2vmin) 100% 0, linear-gradient(to bottom, rgb(238, 216, 108) 0.2vmin, transparent 0.2vmin) 100% 0, linear-gradient(to left, rgb(238, 216, 108) 0.2vmin, transparent 0.2vmin) 100% 100%, linear-gradient(to top, rgb(238, 216, 108) 0.2vmin, transparent 0.2vmin) 100% 100%, linear-gradient(to right, rgb(238, 216, 108) 0.2vmin, transparent 0.2vmin) 0 100%, linear-gradient(to top, rgb(238, 216, 108) 0.2vmin, transparent 0.2vmin) 0 100%;
  background-repeat: no-repeat;
  background-size: 0.2vmin 8vmin, 25% 1vmin, 1vmin 8vmin, 25% 1vmin, 1vmin 0vmin, 2vmin 0.2vmin, 0.2vmin 0vmin, 2vmin 0.2vmin;
}
.action--provocation-pl::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 26%;
  height: 100%;
  z-index: -1;
  box-shadow: rgba(0, 0, 0, 0.3) -0.3vmin -0.3vmin 0.8vmin;
}
.action--provocation-pl::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 26%;
  height: 100%;
  z-index: -1;
  box-shadow: rgba(0, 0, 0, 0.3) 0.3vmin -0.3vmin 0.8vmin;
}
.action--provocation-pl-tutorial {
  background: linear-gradient(to right, rgb(238, 216, 108) 0.2vmin, transparent 0.2vmin) 0 0, linear-gradient(to bottom, rgb(238, 216, 108) 0.2vmin, transparent 0.2vmin) 0 0, linear-gradient(to left, rgb(238, 216, 108) 0.2vmin, transparent 0.2vmin) 100% 0, linear-gradient(to bottom, rgb(238, 216, 108) 0.2vmin, transparent 0.2vmin) 100% 0, linear-gradient(to left, rgb(238, 216, 108) 0.2vmin, transparent 0.2vmin) 100% 100%, linear-gradient(to top, rgb(238, 216, 108) 0.2vmin, transparent 0.2vmin) 100% 100%, linear-gradient(to right, rgb(238, 216, 108) 0.2vmin, transparent 0.2vmin) 0 100%, linear-gradient(to top, rgb(238, 216, 108) 0.2vmin, transparent 0.2vmin) 0 100%;
  background-repeat: no-repeat;
  background-size: 0.2vmin 8vmin, 25% 1vmin, 1vmin 8vmin, 25% 1vmin, 1vmin 0vmin, 64% 0.2vmin, 0.2vmin 0vmin, 2vmin 0.2vmin;
}
.action--provocation-pl-tutorial::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 65%;
  height: 100%;
  z-index: -1;
  box-shadow: rgba(0, 0, 0, 0.3) 0.5vmin 0.5vmin 0.8vmin 0vmin;
}
.action--provocation-eng {
  background: linear-gradient(to right, rgb(238, 216, 108) 0.2vmin, transparent 0.2vmin) 0 0, linear-gradient(to bottom, rgb(238, 216, 108) 0.2vmin, transparent 0.2vmin) 0 0, linear-gradient(to left, rgb(238, 216, 108) 0.2vmin, transparent 0.2vmin) 100% 0, linear-gradient(to bottom, rgb(238, 216, 108) 0.2vmin, transparent 0.2vmin) 100% 0, linear-gradient(to left, rgb(238, 216, 108) 0.2vmin, transparent 0.2vmin) 100% 100%, linear-gradient(to top, rgb(238, 216, 108) 0.2vmin, transparent 0.2vmin) 100% 100%, linear-gradient(to right, rgb(238, 216, 108) 0.2vmin, transparent 0.2vmin) 0 100%, linear-gradient(to top, rgb(238, 216, 108) 0.2vmin, transparent 0.2vmin) 0 100%;
  background-repeat: no-repeat;
  background-size: 0.2vmin 8vmin, 26% 1vmin, 1vmin 8vmin, 26% 1vmin, 1vmin 0vmin, 2vmin 0.2vmin, 0.2vmin 0vmin, 2vmin 0.2vmin;
}
.action--provocation-eng::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 27%;
  height: 100%;
  z-index: -1;
  box-shadow: rgba(0, 0, 0, 0.3) -0.3vmin -0.3vmin 0.8vmin;
}
.action--provocation-eng::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 27%;
  height: 100%;
  z-index: -1;
  box-shadow: rgba(0, 0, 0, 0.3) 0.3vmin -0.3vmin 0.8vmin;
}
.action--provocation-eng-tutorial {
  background: linear-gradient(to right, rgb(238, 216, 108) 0.2vmin, transparent 0.2vmin) 0 0, linear-gradient(to bottom, rgb(238, 216, 108) 0.2vmin, transparent 0.2vmin) 0 0, linear-gradient(to left, rgb(238, 216, 108) 0.2vmin, transparent 0.2vmin) 100% 0, linear-gradient(to bottom, rgb(238, 216, 108) 0.2vmin, transparent 0.2vmin) 100% 0, linear-gradient(to left, rgb(238, 216, 108) 0.2vmin, transparent 0.2vmin) 100% 100%, linear-gradient(to top, rgb(238, 216, 108) 0.2vmin, transparent 0.2vmin) 100% 100%, linear-gradient(to right, rgb(238, 216, 108) 0.2vmin, transparent 0.2vmin) 0 100%, linear-gradient(to top, rgb(238, 216, 108) 0.2vmin, transparent 0.2vmin) 0 100%;
  background-repeat: no-repeat;
  background-size: 0.2vmin 8vmin, 26% 1vmin, 1vmin 8vmin, 26% 1vmin, 1vmin 0vmin, 64% 0.2vmin, 0.2vmin 0vmin, 2vmin 0.2vmin;
}
.action--provocation-eng-tutorial::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 65%;
  height: 100%;
  z-index: -1;
  box-shadow: rgba(0, 0, 0, 0.3) 0.5vmin 0.5vmin 0.8vmin 0vmin;
}
.action--recon-pl {
  background: linear-gradient(to right, rgb(127, 92, 167) 0.2vmin, transparent 0.2vmin) 0 0, linear-gradient(to bottom, rgb(127, 92, 167) 0.2vmin, transparent 0.2vmin) 0 0, linear-gradient(to left, rgb(127, 92, 167) 0.2vmin, transparent 0.2vmin) 100% 0, linear-gradient(to bottom, rgb(127, 92, 167) 0.2vmin, transparent 0.2vmin) 100% 0, linear-gradient(to left, rgb(127, 92, 167) 0.2vmin, transparent 0.2vmin) 100% 100%, linear-gradient(to top, rgb(127, 92, 167) 0.2vmin, transparent 0.2vmin) 100% 100%, linear-gradient(to right, rgb(127, 92, 167) 0.2vmin, transparent 0.2vmin) 0 100%, linear-gradient(to top, rgb(127, 92, 167) 0.2vmin, transparent 0.2vmin) 0 100%;
  background-repeat: no-repeat;
  background-size: 0.2vmin 8vmin, 25% 1vmin, 1vmin 8vmin, 25% 1vmin, 1vmin 0vmin, 2vmin 0.2vmin, 0.2vmin 0vmin, 2vmin 0.2vmin;
}
.action--recon-pl::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 25%;
  height: 100%;
  z-index: -1;
  box-shadow: rgba(0, 0, 0, 0.3) -0.3vmin -0.3vmin 0.8vmin;
}
.action--recon-pl::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 25%;
  height: 100%;
  z-index: -1;
  box-shadow: rgba(0, 0, 0, 0.3) 0.3vmin -0.3vmin 0.8vmin;
}
.action--recon-pl-tutorial {
  background: linear-gradient(to right, rgb(127, 92, 167) 0.2vmin, transparent 0.2vmin) 0 0, linear-gradient(to bottom, rgb(127, 92, 167) 0.2vmin, transparent 0.2vmin) 0 0, linear-gradient(to left, rgb(127, 92, 167) 0.2vmin, transparent 0.2vmin) 100% 0, linear-gradient(to bottom, rgb(127, 92, 167) 0.2vmin, transparent 0.2vmin) 100% 0, linear-gradient(to left, rgb(127, 92, 167) 0.2vmin, transparent 0.2vmin) 100% 100%, linear-gradient(to top, rgb(127, 92, 167) 0.2vmin, transparent 0.2vmin) 100% 100%, linear-gradient(to right, rgb(127, 92, 167) 0.2vmin, transparent 0.2vmin) 0 100%, linear-gradient(to top, rgb(127, 92, 167) 0.2vmin, transparent 0.2vmin) 0 100%;
  background-repeat: no-repeat;
  background-size: 0.2vmin 8vmin, 25% 1vmin, 1vmin 8vmin, 25% 1vmin, 1vmin 0vmin, 64% 0.2vmin, 0.2vmin 0vmin, 2vmin 0.2vmin;
}
.action--recon-pl-tutorial::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 65%;
  height: 100%;
  z-index: -1;
  box-shadow: rgba(0, 0, 0, 0.3) 0.5vmin 0.5vmin 0.8vmin 0vmin;
}
.action--recon-eng {
  background: linear-gradient(to right, rgb(127, 92, 167) 0.2vmin, transparent 0.2vmin) 0 0, linear-gradient(to bottom, rgb(127, 92, 167) 0.2vmin, transparent 0.2vmin) 0 0, linear-gradient(to left, rgb(127, 92, 167) 0.2vmin, transparent 0.2vmin) 100% 0, linear-gradient(to bottom, rgb(127, 92, 167) 0.2vmin, transparent 0.2vmin) 100% 0, linear-gradient(to left, rgb(127, 92, 167) 0.2vmin, transparent 0.2vmin) 100% 100%, linear-gradient(to top, rgb(127, 92, 167) 0.2vmin, transparent 0.2vmin) 100% 100%, linear-gradient(to right, rgb(127, 92, 167) 0.2vmin, transparent 0.2vmin) 0 100%, linear-gradient(to top, rgb(127, 92, 167) 0.2vmin, transparent 0.2vmin) 0 100%;
  background-repeat: no-repeat;
  background-size: 0.2vmin 8vmin, 38% 1vmin, 1vmin 8vmin, 38% 1vmin, 1vmin 0vmin, 2vmin 0.2vmin, 0.2vmin 0vmin, 2vmin 0.2vmin;
}
.action--recon-eng::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 38%;
  height: 100%;
  z-index: -1;
  box-shadow: rgba(0, 0, 0, 0.3) -0.3vmin -0.3vmin 0.8vmin;
}
.action--recon-eng::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 38%;
  height: 100%;
  z-index: -1;
  box-shadow: rgba(0, 0, 0, 0.3) 0.3vmin -0.3vmin 0.8vmin;
}
.action--recon-eng-tutorial {
  background: linear-gradient(to right, rgb(127, 92, 167) 0.2vmin, transparent 0.2vmin) 0 0, linear-gradient(to bottom, rgb(127, 92, 167) 0.2vmin, transparent 0.2vmin) 0 0, linear-gradient(to left, rgb(127, 92, 167) 0.2vmin, transparent 0.2vmin) 100% 0, linear-gradient(to bottom, rgb(127, 92, 167) 0.2vmin, transparent 0.2vmin) 100% 0, linear-gradient(to left, rgb(127, 92, 167) 0.2vmin, transparent 0.2vmin) 100% 100%, linear-gradient(to top, rgb(127, 92, 167) 0.2vmin, transparent 0.2vmin) 100% 100%, linear-gradient(to right, rgb(127, 92, 167) 0.2vmin, transparent 0.2vmin) 0 100%, linear-gradient(to top, rgb(127, 92, 167) 0.2vmin, transparent 0.2vmin) 0 100%;
  background-repeat: no-repeat;
  background-size: 0.2vmin 8vmin, 38% 1vmin, 1vmin 8vmin, 38% 1vmin, 1vmin 0vmin, 64% 0.2vmin, 0.2vmin 0vmin, 2vmin 0.2vmin;
}
.action--recon-eng-tutorial::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 65%;
  height: 100%;
  z-index: -1;
  box-shadow: rgba(0, 0, 0, 0.3) 0.5vmin 0.5vmin 0.8vmin 0vmin;
}
.action--wiretapping-pl {
  background: linear-gradient(to right, rgb(1, 196, 219) 0.2vmin, transparent 0.2vmin) 0 0, linear-gradient(to bottom, rgb(1, 196, 219) 0.2vmin, transparent 0.2vmin) 0 0, linear-gradient(to left, rgb(1, 196, 219) 0.2vmin, transparent 0.2vmin) 100% 0, linear-gradient(to bottom, rgb(1, 196, 219) 0.2vmin, transparent 0.2vmin) 100% 0, linear-gradient(to left, rgb(1, 196, 219) 0.2vmin, transparent 0.2vmin) 100% 100%, linear-gradient(to top, rgb(1, 196, 219) 0.2vmin, transparent 0.2vmin) 100% 100%, linear-gradient(to right, rgb(1, 196, 219) 0.2vmin, transparent 0.2vmin) 0 100%, linear-gradient(to top, rgb(1, 196, 219) 0.2vmin, transparent 0.2vmin) 0 100%;
  background-repeat: no-repeat;
  background-size: 0.2vmin 8vmin, 30% 1vmin, 1vmin 8vmin, 30% 1vmin, 1vmin 0vmin, 2vmin 0.2vmin, 0.2vmin 0vmin, 2vmin 0.2vmin;
}
.action--wiretapping-pl::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 29%;
  height: 100%;
  z-index: -1;
  box-shadow: rgba(0, 0, 0, 0.3) -0.3vmin -0.3vmin 0.8vmin;
}
.action--wiretapping-pl::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 29%;
  height: 100%;
  z-index: -1;
  box-shadow: rgba(0, 0, 0, 0.3) 0.3vmin -0.3vmin 0.8vmin;
}
.action--wiretapping-pl-tutorial {
  background: linear-gradient(to right, rgb(1, 196, 219) 0.2vmin, transparent 0.2vmin) 0 0, linear-gradient(to bottom, rgb(1, 196, 219) 0.2vmin, transparent 0.2vmin) 0 0, linear-gradient(to left, rgb(1, 196, 219) 0.2vmin, transparent 0.2vmin) 100% 0, linear-gradient(to bottom, rgb(1, 196, 219) 0.2vmin, transparent 0.2vmin) 100% 0, linear-gradient(to left, rgb(1, 196, 219) 0.2vmin, transparent 0.2vmin) 100% 100%, linear-gradient(to top, rgb(1, 196, 219) 0.2vmin, transparent 0.2vmin) 100% 100%, linear-gradient(to right, rgb(1, 196, 219) 0.2vmin, transparent 0.2vmin) 0 100%, linear-gradient(to top, rgb(1, 196, 219) 0.2vmin, transparent 0.2vmin) 0 100%;
  background-repeat: no-repeat;
  background-size: 0.2vmin 8vmin, 30% 1vmin, 1vmin 8vmin, 30% 1vmin, 1vmin 0vmin, 64% 0.2vmin, 0.2vmin 0vmin, 2vmin 0.2vmin;
}
.action--wiretapping-pl-tutorial::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 65%;
  height: 100%;
  z-index: -1;
  box-shadow: rgba(0, 0, 0, 0.3) 0.5vmin 0.5vmin 0.8vmin 0vmin;
}
.action--wiretapping-eng {
  background: linear-gradient(to right, rgb(1, 196, 219) 0.2vmin, transparent 0.2vmin) 0 0, linear-gradient(to bottom, rgb(1, 196, 219) 0.2vmin, transparent 0.2vmin) 0 0, linear-gradient(to left, rgb(1, 196, 219) 0.2vmin, transparent 0.2vmin) 100% 0, linear-gradient(to bottom, rgb(1, 196, 219) 0.2vmin, transparent 0.2vmin) 100% 0, linear-gradient(to left, rgb(1, 196, 219) 0.2vmin, transparent 0.2vmin) 100% 100%, linear-gradient(to top, rgb(1, 196, 219) 0.2vmin, transparent 0.2vmin) 100% 100%, linear-gradient(to right, rgb(1, 196, 219) 0.2vmin, transparent 0.2vmin) 0 100%, linear-gradient(to top, rgb(1, 196, 219) 0.2vmin, transparent 0.2vmin) 0 100%;
  background-repeat: no-repeat;
  background-size: 0.2vmin 8vmin, 26% 1vmin, 1vmin 8vmin, 26% 1vmin, 1vmin 0vmin, 2vmin 0.2vmin, 0.2vmin 0vmin, 2vmin 0.2vmin;
}
.action--wiretapping-eng::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 27%;
  height: 100%;
  z-index: -1;
  box-shadow: rgba(0, 0, 0, 0.3) -0.3vmin -0.3vmin 0.8vmin;
}
.action--wiretapping-eng::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 27%;
  height: 100%;
  z-index: -1;
  box-shadow: rgba(0, 0, 0, 0.3) 0.3vmin -0.3vmin 0.8vmin;
}
.action--wiretapping-eng-tutorial {
  background: linear-gradient(to right, rgb(1, 196, 219) 0.2vmin, transparent 0.2vmin) 0 0, linear-gradient(to bottom, rgb(1, 196, 219) 0.2vmin, transparent 0.2vmin) 0 0, linear-gradient(to left, rgb(1, 196, 219) 0.2vmin, transparent 0.2vmin) 100% 0, linear-gradient(to bottom, rgb(1, 196, 219) 0.2vmin, transparent 0.2vmin) 100% 0, linear-gradient(to left, rgb(1, 196, 219) 0.2vmin, transparent 0.2vmin) 100% 100%, linear-gradient(to top, rgb(1, 196, 219) 0.2vmin, transparent 0.2vmin) 100% 100%, linear-gradient(to right, rgb(1, 196, 219) 0.2vmin, transparent 0.2vmin) 0 100%, linear-gradient(to top, rgb(1, 196, 219) 0.2vmin, transparent 0.2vmin) 0 100%;
  background-repeat: no-repeat;
  background-size: 0.2vmin 8vmin, 26% 1vmin, 1vmin 8vmin, 26% 1vmin, 1vmin 0vmin, 64% 0.2vmin, 0.2vmin 0vmin, 2vmin 0.2vmin;
}
.action--wiretapping-eng-tutorial::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 65%;
  height: 100%;
  z-index: -1;
  box-shadow: rgba(0, 0, 0, 0.3) 0.5vmin 0.5vmin 0.8vmin 0vmin;
}
.action--training-pl {
  background: linear-gradient(to right, rgb(108, 129, 144) 0.2vmin, transparent 0.2vmin) 0 0, linear-gradient(to bottom, rgb(108, 129, 144) 0.2vmin, transparent 0.2vmin) 0 0, linear-gradient(to left, rgb(108, 129, 144) 0.2vmin, transparent 0.2vmin) 100% 0, linear-gradient(to bottom, rgb(108, 129, 144) 0.2vmin, transparent 0.2vmin) 100% 0, linear-gradient(to left, rgb(108, 129, 144) 0.2vmin, transparent 0.2vmin) 100% 100%, linear-gradient(to top, rgb(108, 129, 144) 0.2vmin, transparent 0.2vmin) 100% 100%, linear-gradient(to right, rgb(108, 129, 144) 0.2vmin, transparent 0.2vmin) 0 100%, linear-gradient(to top, rgb(108, 129, 144) 0.2vmin, transparent 0.2vmin) 0 100%;
  background-repeat: no-repeat;
  background-size: 0.2vmin 8vmin, 33% 1vmin, 1vmin 8vmin, 33% 1vmin, 1vmin 14.55vmin, 2vmin 0.2vmin, 0.2vmin 14.55vmin, 2vmin 0.2vmin;
}
.action--training-pl::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 34%;
  height: 100%;
  z-index: -1;
  box-shadow: rgba(0, 0, 0, 0.3) -0.3vmin -0.3vmin 0.8vmin;
  z-index: -1;
}
.action--training-pl::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 34%;
  height: 100%;
  z-index: -1;
  box-shadow: rgba(0, 0, 0, 0.3) 0.3vmin -0.3vmin 0.8vmin;
  z-index: -1;
}
.action--training-pl-tutorial {
  background: linear-gradient(to right, rgb(108, 129, 144) 0.2vmin, transparent 0.2vmin) 0 0, linear-gradient(to bottom, rgb(108, 129, 144) 0.2vmin, transparent 0.2vmin) 0 0, linear-gradient(to left, rgb(108, 129, 144) 0.2vmin, transparent 0.2vmin) 100% 0, linear-gradient(to bottom, rgb(108, 129, 144) 0.2vmin, transparent 0.2vmin) 100% 0, linear-gradient(to left, rgb(108, 129, 144) 0.2vmin, transparent 0.2vmin) 100% 100%, linear-gradient(to top, rgb(108, 129, 144) 0.2vmin, transparent 0.2vmin) 100% 100%, linear-gradient(to right, rgb(108, 129, 144) 0.2vmin, transparent 0.2vmin) 0 100%, linear-gradient(to top, rgb(108, 129, 144) 0.2vmin, transparent 0.2vmin) 0 100%;
  background-repeat: no-repeat;
  background-size: 0.2vmin 8vmin, 33% 1vmin, 1vmin 8vmin, 33% 1vmin, 1vmin 14.55vmin, 64% 0.2vmin, 0.2vmin 14.55vmin, 2vmin 0.2vmin;
}
.action--training-pl-tutorial::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 65%;
  height: 100%;
  z-index: -1;
  box-shadow: rgba(0, 0, 0, 0.3) 0.5vmin 0.5vmin 0.8vmin 0vmin;
}
.action--training-eng {
  background: linear-gradient(to right, rgb(108, 129, 144) 0.2vmin, transparent 0.2vmin) 0 0, linear-gradient(to bottom, rgb(108, 129, 144) 0.2vmin, transparent 0.2vmin) 0 0, linear-gradient(to left, rgb(108, 129, 144) 0.2vmin, transparent 0.2vmin) 100% 0, linear-gradient(to bottom, rgb(108, 129, 144) 0.2vmin, transparent 0.2vmin) 100% 0, linear-gradient(to left, rgb(108, 129, 144) 0.2vmin, transparent 0.2vmin) 100% 100%, linear-gradient(to top, rgb(108, 129, 144) 0.2vmin, transparent 0.2vmin) 100% 100%, linear-gradient(to right, rgb(108, 129, 144) 0.2vmin, transparent 0.2vmin) 0 100%, linear-gradient(to top, rgb(108, 129, 144) 0.2vmin, transparent 0.2vmin) 0 100%;
  background-repeat: no-repeat;
  background-size: 0.2vmin 8vmin, 33% 1vmin, 1vmin 8vmin, 33% 1vmin, 1vmin 14.55vmin, 2vmin 0.2vmin, 0.2vmin 14.55vmin, 2vmin 0.2vmin;
}
.action--training-eng::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 34%;
  height: 100%;
  z-index: -1;
  box-shadow: rgba(0, 0, 0, 0.3) -0.3vmin -0.3vmin 0.8vmin;
  z-index: -1;
}
.action--training-eng::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 34%;
  height: 100%;
  z-index: -1;
  box-shadow: rgba(0, 0, 0, 0.3) 0.3vmin -0.3vmin 0.8vmin;
  z-index: -1;
}
.action--training-eng-tutorial {
  background: linear-gradient(to right, rgb(108, 129, 144) 0.2vmin, transparent 0.2vmin) 0 0, linear-gradient(to bottom, rgb(108, 129, 144) 0.2vmin, transparent 0.2vmin) 0 0, linear-gradient(to left, rgb(108, 129, 144) 0.2vmin, transparent 0.2vmin) 100% 0, linear-gradient(to bottom, rgb(108, 129, 144) 0.2vmin, transparent 0.2vmin) 100% 0, linear-gradient(to left, rgb(108, 129, 144) 0.2vmin, transparent 0.2vmin) 100% 100%, linear-gradient(to top, rgb(108, 129, 144) 0.2vmin, transparent 0.2vmin) 100% 100%, linear-gradient(to right, rgb(108, 129, 144) 0.2vmin, transparent 0.2vmin) 0 100%, linear-gradient(to top, rgb(108, 129, 144) 0.2vmin, transparent 0.2vmin) 0 100%;
  background-repeat: no-repeat;
  background-size: 0.2vmin 8vmin, 33% 1vmin, 1vmin 8vmin, 33% 1vmin, 1vmin 14.55vmin, 64% 0.2vmin, 0.2vmin 14.55vmin, 2vmin 0.2vmin;
}
.action--training-eng-tutorial::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 65%;
  height: 100%;
  z-index: -1;
  box-shadow: rgba(0, 0, 0, 0.3) 0.5vmin 0.5vmin 0.8vmin 0vmin;
}
.action__button-box {
  position: absolute;
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.action__button-box--raid, .action__button-box--provocation, .action__button-box--recon, .action__button-box--wiretapping {
  left: 5%;
  top: 60%;
  left: 50%;
  top: 110%;
  transform: translate(-50%, -50%);
}
.action__button-box--training {
  top: 18%;
  left: 5%;
  top: 68%;
  left: 50%;
  transform: translate(-50%, -52%);
}
.action__button-box--training-tutorial {
  left: 5%;
  top: 60%;
  left: 50%;
  top: 100%;
  transform: translate(-50%, -50%);
}
.action--other {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.action__form {
  display: inline;
  position: absolute;
  top: 0;
  left: 60%;
}
.action__form--group {
  display: inline;
}
.action__input {
  display: none;
}
.action__input-label {
  position: relative;
  cursor: pointer;
  margin: 0 2vmin;
}
.action__input-checkbox {
  position: absolute;
  top: 0.5vmin;
  left: -0.5vmin;
  width: 3vmin;
  height: 3vmin;
  border-radius: 50%;
  background: transparent;
  border: rgb(139, 229, 250) solid 0.1vmin;
}
.action__input-checkbox::after {
  content: "";
  display: inline-block;
  width: 3vmin;
  height: 3vmin;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgb(9, 213, 255);
  border: rgb(139, 229, 250) solid 0.1vmin;
  box-shadow: rgb(139, 229, 250) 0vmin 0vmin 1vmin 0.2vmin;
  opacity: 0;
}
.action__input:checked ~ .action__input-label .action__input-checkbox::after {
  opacity: 1;
}

.popup {
  width: 100vw;
  height: 105vmin;
  background: url(../img/fake-background.png) no-repeat center center/cover;
  position: fixed;
  top: 48%;
  left: 50%;
  z-index: 10;
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%);
  background: blur(2vmin);
}
.popup:target {
  opacity: 1;
  visibility: visible;
  z-index: 10;
  position: fixed;
  display: block;
}
.popup__content {
  width: 70vw;
  height: 78vmin;
  position: Absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(../img/bg.png);
  background-size: cover;
  border-radius: 1.2vmin;
  box-shadow: 1vmin 1.4vmin 2vmin 0.7vmin rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: contrast(100%) blur(0vmin);
          backdrop-filter: contrast(100%) blur(0vmin);
}
.popup__actions {
  width: 95%;
  height: 72%;
  margin: 0 auto;
  -webkit-backdrop-filter: contrast(100%) blur(0vmin);
          backdrop-filter: contrast(100%) blur(0vmin);
}

.popup__content--smaller {
  width: 44vw;
  height: 58vmin;
  position: Absolute;
  top: 50%;
  left: 50%;
  padding: 2.5vmin;
  transform: translate(-50%, -50%);
  background: url(../img/bg.png);
  background-size: cover;
  border: 0.4vmin solid rgb(9, 213, 255);
  border-radius: 1.2vmin;
  box-shadow: 1vmin 1.4vmin 2vmin 0.7vmin rgba(0, 0, 0, 0.7), inset 0vmin 0vmin 1.2vmin 0.3vmin rgba(187, 239, 249, 0.5);
  position: relative;
}
.popup__content--announcement {
  width: 40vw;
  height: 32vmin;
  position: Absolute;
  top: 50%;
  left: 50%;
  padding: 2.5vmin;
  transform: translate(-50%, -50%);
  background: url(../img/bg.png);
  background-size: cover;
  border: 0.4vmin solid rgb(9, 213, 255);
  border-radius: 1.2vmin;
  box-shadow: 1vmin 1.4vmin 2vmin 0.7vmin rgba(0, 0, 0, 0.7), inset 0vmin 0vmin 1.2vmin 0.3vmin rgba(187, 239, 249, 0.5);
  position: relative;
}
.popup__content .information-content {
  width: 78%;
  height: 85%;
  position: Absolute;
  top: 12%;
  left: 5%;
  padding: 0.5vmin;
  font-family: "Capsuula";
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.popup__content .information__players-list {
  width: 100%;
  height: auto;
  margin: 1vmin auto;
}/*# sourceMappingURL=index.css.map */