@import url("axe-boat.css");

:root {
  --sprite-scale: 1.175;
  --svg-scale: 65px;
  --EyeLidsCor: -7px -900px;
  --easeQuantOut: cubic-bezier(0.165, 0.84, 0.44, 1);
  --PoloEyesPosX: -40px;
  --PoloEyesPosY: 7.5px;
}
::selection {
  color: #ffffff;
  background-color: #000;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/poppins-regular.woff2) format("woff2"),
    url(../fonts/poppins-regular.woff) format("woff");
  unicode-range: U+0100-02ba, U+02bd-02c5, U+02c7-02cc, U+02ce-02d7, U+02dd-02ff,
    U+0304, U+0308, U+0329, U+1d00-1dbf, U+1e00-1e9f, U+1ef2-1eff, U+2020,
    U+20a0-20ab, U+20ad-20c0, U+2113, U+2c60-2c7f, U+a720-a7ff;
}

@font-face {
  font-family: "ms gothic";
  src: url(../fonts/MS\ Gothic.ttf);
}

@font-face {
  font-family: "Allan";
  src: url(../fonts/Allan.ttf);
}

@font-face {
  font-family: Roboto;
  src: url(../fonts/Roboto-Regular.ttf);
}

@font-face {
  font-family: Century-Gothic;
  src: url(../fonts/Century_Gothic.ttf);
}

@font-face {
  font-family: "Poppins-semibold";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/poppins-semibold.woff2) format("woff2"),
    url(../fonts/poppins-semibold.woff2) format("woff");
  unicode-range: U+0100-02ba, U+02bd-02c5, U+02c7-02cc, U+02ce-02d7, U+02dd-02ff,
    U+0304, U+0308, U+0329, U+1d00-1dbf, U+1e00-1e9f, U+1ef2-1eff, U+2020,
    U+20a0-20ab, U+20ad-20c0, U+2113, U+2c60-2c7f, U+a720-a7ff;
}

hr {
  border: none;
  height: 2px;
  background-color: #b2b2b2;
}

html{
    height: 100vh;
  width: 100vw;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background-color: #fafafa;
  font-family: Roboto;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  text-align: center;
}

#dialogs {
  position: absolute;
  display: none;
  width: 1150px;
  height: 450px;
  translate: 0 46px;
  z-index: 23;
  transition: width, height, 0.3s var(--easeQuantOut);
}

.popup-opened {
  z-index: 999;
}

#dialogs > div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding-top: 50px;
  box-sizing: border-box;
  overflow: hidden;
  display: none;
  font-size: 15px;
  z-index: 999 !important;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 10px;
  background-color: #fafafa;
  padding: 35px;
  padding-top: 55px;
}

#dialogs > div::before {
  content: "";
  position: absolute;
  background-color: #000;
  width: 100%;
  left: 0;
  height: 35px;
  top: 0;
}

#dialogs > div::after {
  content: attr(header);
  color: #ffffff;
  text-transform: uppercase;
  position: absolute;
  top: 0;
  left: 50%;
  scale: 0.9;
  transform: translateX(-50%) scale(0.9);
  top: 7.5px;
}

button {
  padding: 5px;
  margin: 10px;
  text-transform: uppercase;
  border-radius: 100px;
  background-color: #ffffff;
  cursor: pointer;
  border: 1px solid #000000;
  color: #787878;
}

button:hover {
  background-color: #989898;
  color: #ffffff;
  border: #fafafa;
}

input[type="text"] {
  margin: 2.5px;
  width: 250px;
  padding: 10px;
  height: 15px;
  border-radius: 10px;
  border: none !important;
  outline: none;
  font-size: 14px;
  font-weight: 300;
  color: black;
  background-color: #d8d8d8;
  transition: background-color 0.3s ease;
}
input[type="text"]:focus {
  color: white;
  background-color: rgb(154, 154, 154);
  transition: none;
}
input[type="text"]::placeholder {
  color: black;
}
input[type="radio"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid gray;
  border-color: linear-gradient(to bottom, gray, black);
  border-radius: 50%;
  background-color: white;
  position: relative;
}
input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 1px solid #343434;
  border-radius: 50%;
  display: inline-block;
  background: linear-gradient(to bottom, #fafafa, #e8e8e8);
  position: relative;
}

input[type="checkbox"]:checked::after {
  content: "";
  width: 5px;
  height: 5px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #000;
  border-radius: 50px;
  position: absolute;
}

.check:hover {
  background-color: #d3d3d3;
}

.animate#version-number {
  animation: versionNumberRotate 0.3s var(--easeQuantOut);
}
@keyframes versionNumberRotate {
  from {
    scale: 0;
    rotate: 90deg;
  }
  to {
    scale: 1;
    rotate: 0deg;
  }
}

#percentage-box {
  visibility: hidden;
  scale: 1.7;
  rotate: -35deg;
  translate: 180px 30px;
  z-index: -1;
}
#percentage-box.animate {
  visibility: visible;
  animation: PercBoxIntro 0.3s ease;
}
#percentage-box.animateOut {
  visibility: visible;
  animation: PercBoxOut 0.4s ease;
}
@keyframes PercBoxIntro {
  from {
    opacity: 0;
    rotate: -5deg;
    translate: 190px 110px;
  }
  to {
    opacity: 1;
    rotate: -35deg;
    translate: 180px 30px;
  }
}
@keyframes PercBoxOut{
  0%{
    opacity: 1;
    translate: 180px 30px;
  }
  50%{
    opacity: 1;
    translate: 200px 10px;
  }
  100%{
    opacity: 0;
    translate: 130px 60px;
  }
}
#percentage-box#bck,
#percentage-box {
  position: absolute;
  scale: 2.3;
  transform: translate(-13px, 13px);
}
#percentage-box#bck {
  rotate: 90deg;
}
#percentage-box > h2 {
  translate: 15px -55px;
}
#percentage {
  color: white;
  font-weight: normal;
  translate: 0 -55px;
}
#version-number > img {
  scale: 1.7;
}
#version-number > h1 {
  font-weight: normal;
  translate: 0 -70px;
  scale: 1.3;
  color: white;
}
#load-img {
  position: static;
  translate: 0 0;
}
#loader {
  opacity: 0;
  scale: 0.7;
  translate: -20px;
  transform-origin: center;
}
#load-st {
  position: absolute;
  width: 400px;
  scale: 1.5;
  font-family: monospace;
  translate: -160px 80px;
}
#load-icn {
  position: absolute;
  scale: 1.075;
  translate: -175px 190px;
}
#loader-div {
  position: absolute !important;
  translate: 35px 110px;
}
#loader-circle {
  translate: 50px 0;
  transform-origin: center;
  stroke-dashoffset: 472px;
  display: block !important;
  z-index: 4;
  opacity: 1;
}
#loader-svg-bck {
  display: block;
  translate: -3px -3px;
}
#loader-svg-bck > circle {
  translate: 3px 3px;
}
#loader-svg {
  position: absolute;
  translate: -175px -150px;
  z-index: 20;
  opacity: 0;
  transition: opacity .4s ease;
}
#loader-svg > circle {
  transform-origin: center;
  rotate: -90deg;
}
#loader-div #indicator {
  visibility: hidden;
  scale: 5;
  translate: -50px 235px;
  transform-origin: 50px 50px;
}
#loader-div #indicator.animate {
  visibility: visible;
  animation: IndicatorPop 0.5s ease;
}
@keyframes IndicatorPop {
  0% {
    scale: 0;
  }
  50% {
    scale: 5.25;
  }
  100% {
    scale: 5;
  }
}


@keyframes slide-left-out {
  0% {
    opacity: 1;
    translate: 0;
  }
  100% {
    opacity: 0;
    translate: -20px;
  }
}

#cd-svg {
  position: absolute;
  width: 25px;
  translate: -2px -2.5px;
  height: 25px;
  background-size: cover;
  background-image: url("../img/svg/cd-svg.svg");
}

#watch-info #vertical-division-left {
  width: 1px;
  background-color: black;
  opacity: 0.25;
  position: absolute;
  height: 30px;
  justify-self: left;
}
#watch-info #vertical-division-right {
  translate: 100% 0;
  width: 1px;
  background-color: black;
  opacity: 0.25;
  position: absolute;
  height: 30px;
  justify-self: right;
}

#mix-finished-dialog .vertical-division {
  height: 100px;
}

#replay-mix-btn,
#share-mix-btn,
#save-mix-btn {
  margin-left: 5px;
  margin-right: 5px;
}

.flex {
  display: flex;
}

.flex > input {
  translate: 0 10px;
}

#mute-btn,
#solo-btn,
#remove-btn {
  width: 22.5px;
  height: 22.5px;
}

#time {
  opacity: 0;
  background-color: #bdbdbd;
  font-family: "ms gothic";
  color: #ffffff;
  position: absolute;
  padding: 7.5px;
  border-radius: 15px;
  translate: 105px -60px;
  transition: opacity 0.3s ease;
}

#sections-box {
  position: absolute;
  display: flex;
  translate: 0 55px;
  transition: opacity 0.5s ease;
}

.animate#sections-box {
  display: flex;
  animation: slide-up 0.5s var(--easeQuantOut);
}

#play-mix-btn {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  animation: pop 0.35s ease;
  z-index: 29;
}

#load-mix-icn {
  display: none;
  margin: 5px;
  animation: rotate-360 4s infinite linear;
}

.arrow-btn {
  background-color: #25447f;
  color: #fafafa;
  width: 80px;
  font-family: Roboto;
  border-color: transparent;
  height: 35px;
  scale: 0.9;
  padding-left: 17.5px !important;
  position: absolute;
  bottom: 0;
  right: 0;
}
#create-mix-bt{
  background-color: #25447f;
  color: #fafafa;
  width: 70px;
  font-family: Roboto;
  border-color: transparent;
  height: 35px;
  scale: 1.5;
  padding-left: 17.5px !important;
}
#create-mix-bt:hover{
  background-color: #000;
}
#create-mix-bt::before{
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  left: 7.5px;
  top: 50%;
  background-size: cover;
  translate: 0 -50%;
  background-image: url("../img/svg/cd-svg.svg");
}
.arrow-btn:hover {
  background-color: #000;
}
.arrow-btn::before {
  content: "";
  position: absolute;
  left: 2.5px;
  top: 50%;
  translate: 0 -50%;
  scale: 0.8;
  transform-origin: center;
  width: 25px;
  height: 25px;
  background-image: url("../img/svg/arrow-right-svg.svg");
  background-size: cover;
}
#retry-saving-btn {
  width: 90px;
  left: 50%;
  transform: translateX(-50%);
}

#skip-intro-btn {
  position: absolute;
  width: 120px;
  left: 50%;
  transform: translateX(-50%);
  translate: 40px 320px;
}
.field-needed {
  background-color: rgb(132, 94, 94) !important;
}

.arrow-right {
  position: absolute;
  scale: 0.8;
  left: 2.5px;
  top: 50%;
  translate: 0 -50%;
}
#skip-intro-btn .arrow-right {
  position: absolute;
  scale: 0.85;
  translate: -26px -5px;
}

.dialog-header {
  position: absolute;
  text-transform: uppercase;
  width: 100%;
  left: 0;
  top: 0;
  justify-self: center;
  padding: 10px;
  color: white;
  background-color: black;
}

.dialog-with-header {
  padding-top: 50px;
  box-sizing: border-box;
  overflow: hidden;
}

.header {
  font-size: 25px;
  text-transform: uppercase;
}

.long-bt {
  width: 200px;
}
@keyframes popup-rotate {
  0% {
    opacity: 0;
    scale: 0;
    rotate: 90deg;
  }
  50% {
    opacity: 1;
    scale: 1.05;
    rotate: -5deg;
  }
  100% {
    opacity: 1;
    scale: 1;
    rotate: 0deg;
  }
}
#mix-not-saved-dialog #content {
  text-transform: uppercase;
  align-self: center;
  justify-self: center;
  display: flex;
}
#mix-not-saved-dialog #content > p {
  opacity: 0.5 !important;
}
#mix-not-saved-dialog #content .vertical-division {
  height: 100px;
}
#trophy {
  scale: 0.85;
  margin-left: 20px;
  margin-right: 20px;
  translate: 0 35px;
}
#tricks-container {
  translate: 0 12px;
  text-align: left;
}
#tricks {
  opacity: 0.5;
}
#tricks .vertical-division {
  translate: 0 -10px;
  height: 60px;
}
.vertical-division {
  background-color: black;
  opacity: 0.5;
  width: 1.5px;
  height: 250px;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 35px;
  margin-right: 35px;
}
@keyframes BnsLock{
  0%{
    transform: scale(1);
  }
  50%{
    transform: scale(1.1) translateX(-4px);
  }
  100%{
    transform: scale(0) translateX(35px);
  }
}

#mix-not-saved-dialog {
  height: 330px;
}

#mix-not-saved-dialog #content {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

#save-mix-dialog #content {
  display: flex;
}
#save-mix-dialog {
  height: 350px;
  width: 850px;
}

#save-mix-dialog #content #info {
  position: absolute;
  display: grid !important;
  right: 35px;
  top: 50%;
  transform: translateY(-50%);
  height: 150px;
}
.grid {
  display: grid;
}
#create-mix-bt {
  position: absolute;
  width: 150px;
  translate: -55px 850px;
  opacity: 0;
}
.animate#create-mix-bt {
  opacity: 1;

  animation: fadeIn 0.6s ease;
}
.svg {
  width: var(--svg-scale);
  height: var(--svg-scale);
  background-color: gray;
  object-fit: scale-down;
  padding: 5px;
  border-radius: 100px;
}
.svg:hover {
  background-color: black;
}
#select-version {
  padding-top: 30px;
}
#version-number {
  position: absolute;
  display: none;
  font-weight: normal;
  transform-origin: 25px 25px;
  translate: 280px 650px;
}

.slide-out {
  animation: slide-down-out 0.5s ease-in;
}

@keyframes slide-down-out {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(30px);
  }
}

@keyframes slide-left-in {
  0% {
    opacity: 0;
    translate: 20px;
  }
  100% {
    opacity: 1;
    translate: 0;
  }
}
.slide#logo {
  display: block;
  opacity: 1;
  animation: slideLogo 0.35s var(--easeQuantOut);
}

.slide#slogan {
  opacity: 0.5;
  animation: slideSlogan 0.35s var(--easeQuantOut);
}
@keyframes slideSlogan {
  0% {
    opacity: 0;
    transform: translate(-70px, 780px);
  }
  100% {
    opacity: 0.5;
    transform: translate(-70px, 745px);
  }
}
@keyframes slideLogo {
  0% {
    opacity: 0;
    transform: translate(-6px, 265px);
  }
  100% {
    opacity: 1;
    transform: translate(-6px, 225px);
  }
}
#slogan {
  position: absolute;
  opacity: 0;
  width: 200px;
  scale: 1.5;
  translate: 45px -335px;
  transform: translate(-70px, 745px);
}
#logo {
  position: absolute;
  color: #3b4e78;
  font-weight: normal;
  font-family: "Allan";
  scale: 4.2;
  opacity: 0;
  translate: 15px -260px;
  transform: translate(-6px, 225px);
}
@keyframes slide-up {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes stage-intro {
  0% {
    clip-path: polygon(0% 50%, 100% 50%, 100% 50%, 0% 50%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes close-loading {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
#game {
  opacity: 0;
  pointer-events: none;
  margin-bottom: 23.5vh;
  align-items: center;
  align-self: center;
  transition: scale 0.5s ease;
}

.animate#stage {
  display: block;
  animation: stage-intro 0.75s ease;
}

.shown {
  visibility: visible !important;
  display: block !important;
}
#box-container {
  scale: 0.997;
  position: absolute;
  width: 100%;
  height: 100%;
}
#gameplay-box {
  position: absolute;
  scale: 0.97;
  bottom: 15px;
  width: 100%;
  height: 100%;
}
#followers-eyes {
  position: absolute;
  translate: 0 899px;
}
#stage {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 1150px;
  height: 450px;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 17px 17px 0 0;
  transform-origin: top;
  transition: scale 0.2s linear;
}
#bonuses-btn {
  position: absolute;
  top: 5px;
  right: 0;
}

@keyframes unlockBckAnim {
  0% {
    background: #fff;
  }
  100% {
    background: #808080;
  }
}
@keyframes bonus-bt-unlock {
  from {
    padding-right: 0;
    background-color: white;
  }
  to {
    padding-right: 70px;
    background-color: rgba(0, 0, 0, 0.3);
  }
}
#bonus-1-btn {
  position: absolute;
  top: 0;
  right: 0;
}
#bonus-2-btn {
  position: absolute;
  top: 50px;
  right: 0;
}
#bonus-3-btn {
  position: absolute;
  top: 100px;
  right: 0;
}

#bonuses,
.bonus {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  width: 100%;
  height: 100%;
  scale: 105% 105%;
}
#bonuses {
  top: 100%;
  z-index: 99;
}
#bonus-trans {
  position: absolute;
  z-index: 99;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0;
}
.fadeIn{
  visibility: visible;
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
#bonuses {
  position: absolute;
}
#saving-mix-dialog {
  text-transform: uppercase;
  width: 400px;
  height: 200px;
}
#saving-mix-dialog h3 {
  font-weight: normal;
  color: #808080;
  margin: 7.5px;
}
#saving-mix-dialog #saving {
  display: block;
}
#saving-mix-dialog #error {
  width: 100%;
  display: none;
}
#save-mix-circle {
  translate: 0 -80px;
  rotate: 270deg;
  scale: 0.25;
  transform-origin: center;
  animation: progress 1.5s infinite linear;
}
@keyframes progress {
  0% {
    stroke-dashoffset: 472px;
  }
  100% {
    stroke-dashoffset: -472px;
  }
}
@keyframes loop1 {
  from {
    stroke-dashoffset: 472px;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes loop2 {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -472px;
  }
}
#control-buttons {
  position: absolute;
  z-index: 19;
  width: 5px !important;
  height: 20px;
  transform: translateY(30px);
  border-radius: 11px;
  background-color: #666666;
  padding: 10px 70px 10px 70px;
  color: #ffffff;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#control-buttons #hitzone {
  position: absolute;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
}
#control-buttons #hitzone > img {
  margin: 0 5px 3px 5px;
}
#control-buttons:hover {
  opacity: 1 !important;
  pointer-events: all !important;
}
#loop-progress {
  position: absolute;
  opacity: 0.5;
  display: none;
  rotate: -90deg;
  scale: 0.2;
  transform-origin: center;
  z-index: 9;
  left: -74px;
  top: -79px;
}
#bonuses {
  position: absolute !important;
  translate: 0 -100%;
  pointer-events: none;
  z-index: 3;
}
#top-btn {
  visibility: hidden;
  padding: 3.6px;
  justify-content: right;
  align-items: end;
  text-align: right;
}
#record-tip {
  display: block !important;
  position: absolute;
  align-self: left;
  justify-self: left;
  opacity: 0.5;
  visibility: hidden;
  margin-left: 130px;
  transition: opacity 0.3s ease;
  transform: translateY(10px);
  text-transform: uppercase;
}
.animate#record-tip {
  visibility: visible;
  animation: slide-left-bounce 0.5s ease;
}
#record-btn > p {
  position: absolute;
  translate: 30px -15px;
  transition: opacity, 0.3s ease;
}
#record-btn {
  position: absolute;
  display: flex;
  justify-self: left;
  color: white;
  translate: 0 -2.5px;
  padding: 10px;
  width: 100px;
  height: 20px;
  cursor: pointer;
  text-transform: uppercase;
  border-radius: 50px;
  background-color: #2c3e8e;
  transition: width 0.3s ease !important;
}
@keyframes ErrorSlideUp{

}
#bandeau #version-select::-webkit-scrollbar{
  display: none;
  background-color: #2c3e8e;
}
#bandeau #version-select{
  overflow-y: scroll;
  overflow-x: hidden;
  height: 100vh;
}
#bandeau #bck {
  position: absolute;
  width: 124px;
  height: 0;
  background-color: #404040;
  transition: height 0.3s var(--easeQuantOut);
}
#bandeau:hover > #content > #txt {
  translate: 0 -10px;
  opacity: 1;
}
#bandeau #content {
  position: absolute;
  translate: -50%;
  width: 100%;
  height: 100%;
  translate: 0 10px;
  z-index: 99;
}
@keyframes appear {
  from {
    opacity: 0;
    scale: 0;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}
#bandeau #txt {
  position: absolute;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  translate: 0 -15px;
  color: white;
  transition: translate, opacity, 0.3s ease;
}
#bandeau #head {
  position: absolute;
  width: 100px;
  height: 120px;
  translate: 0 30px;
  left: 50%;
  transform: translateX(-50%);
  background-size: cover;
  background-image: url("../img/idle.png");
  z-index: 99999;
}
#bandeau #slider {
  width: 124px;
  height: 200px;
  background-size: cover;
  background-image: url("../img/menu-bandeau.png");
  transition: translate 0.3s var(--easeQuantOut);
}

#bandeau {
  display: none;
  position: absolute;
  top: 0;
  left: 10px;
  translate: 0 -20px;
  transform-origin: top;
  z-index: 999;
  opacity: 1;
  transition: transform, opacity, 0.3s var(--easeQuantOut);
}
.closed#bandeau:hover {
  transform: translateY(10px);
  opacity: 1 !important;
  animation: bandeauHover 0.3s ease !important;
}
@keyframes bandeauHover {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(15px);
  }
  100% {
    transform: translateY(10px);
  }
}
@keyframes bandeauIntro {
  0% {
    translate: 0 -200px;
  }
  100% {
    translate: 0 -20px;
  }
}
#bandeau #version-select {
  position: absolute;
  display: grid;
  top: 0;
  opacity: 0;
  pointer-events: none;
  translate: 0 1.1px;
  transform: translateY(10px);
  transition: opacity, 0.3s var(--easeQuantOut);
}

.locked {
  opacity: 1 !important;
}

.version-select {
  visibility: hidden;
  transform: scale(0.3) !important;
  margin: -145px;
  cursor: pointer;
}
.version-select:not(:has(> .version-icn.locked)){
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.version-select:hover:not(:has(> .version-icn.locked)){
  opacity: 1;
  transition: none;
}
.version-name {
  scale: 3;
  color: #fff;
  translate: 0 25px;
}
.recording#record-btn {
  background-color: #ba4545;
}
#record-btn:hover,
.recording#record-btn:hover {
  background-color: #000;
  transition: none;
}
.hidden {
  visibility: hidden !important;
}
#stop-playing-btn {
  position: absolute;
  width: 35px;
  height: 35px;
  background-color: #26457b;
  border-radius: 50px;
}
#stop-playing-btn::before {
  content: "stop";
  position: absolute;
  text-transform: uppercase;
  background: #808080;
  color: #fff;
  scale: 1.1;
  padding: 2px;
  translate: -32.5px -20px;
  opacity: 0;
  font-family: "ms gothic";
  transition: opacity 0.3s ease;
}
#stop-playing-btn:hover::before {
  transition: none;
  opacity: 1;
}
#stop-playing-btn:hover {
  background-color: #233f70;
}
#reading-box.replay > #reading-bar {
  background-color: #233f70;
}
#reading-box.replay {
  width: 960px;
  transform: translateX(-60px);
}
.disabled {
  opacity: 0.5 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease !important;
}
@keyframes timeReplay {
  0% {
    translate: 45px -60px;
  }
  100% {
    translate: 950px -60px;
  }
}
#stop-playing-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background-image: url("../img/svg/play-blue-svg.svg");
  background-size: cover;
  opacity: 1;
  animation: blinkk 1s steps(1, end) infinite;
}
#stop-playing-btn:hover:after {
  background-image: url("../img/svg/stop-blue-svg.svg");
  animation: none;
}
@keyframes blinkk {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}
.snd-section {
  visibility: hidden;
  width: 280px;
  margin: 4px;
  text-transform: uppercase;
  color: gray;
}
.snd-section > p {
  translate: 0 -7.5px;
}
.animate.snd-section {
  visibility: visible;
  animation: slide 0.5s var(--easeQuantOut);
}
@keyframes slide {
  from {
    transform: translateY(15px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.top-btns {
  opacity: 0;
  margin-left: 1.5px;
  margin-right: 1.5px;
  background-color: #989898;
  width: 25px;
  height: 25px;
  padding: 5px;
  object-fit: scale-down;
  border-radius: 50px;
  cursor: pointer;
}

@keyframes go-up {
  0% {
    transform: translateY(380px);
  }
  100% {
    transform: translateY(0);
  }
}

.pop {
  opacity: 1;
  animation: pop 0.5s ease;
}
.pop .top-btns {
  opacity: 1;
  animation: pop, slide-down, 0.5s ease;
}
.top-btns:hover {
  background-color: #6c6c6c;
}
#reset-btn,
#auto-btn {
  transition: opacity 0.4s ease;
}
#reset-btn {
  opacity: 0.5;
  pointer-events: none;
}
#polo-vacant {
  position: absolute;
  width: 164px;
  height: 388px;
  translate: 1600px 62px;
  scale: var(--sprite-scale);
  transition: translate 0.45s var(--easeQuantOut), scale 0.8s ease-in-out;
  z-index: 1;
}

.bonus-locked {
  pointer-events: none;
  cursor: not-allowed;
}
#sprites {
  position: absolute;
  width: 100%;
  height: 100%;
}
.animate-out#loader {
  animation: close-loading 0.5s cubic-bezier(1, 0.01, 1, 1);
}
#polo-box {
  position: absolute;
  width: 100%;
  pointer-events: none;
  height: 100%;
  z-index: 0;
}
#body-polo {
  position: absolute;
  width: 328px;
  height: 776px;
  scale: 0.5;
  translate: -80px -172px;
}
#vacant-eyes-box {
  width: 250px;
  height: 160px;
  background-color: #fafafa;
}
#eyebrows-polo {
  position: absolute;
  width: 328px;
  scale: 0.59;
  display: none;
  height: 80px;
  background-position: -655px -82px;
  z-index: 4;
}
#eye1 {
  width: 16px;
  height: 16px;
  background-position: var(--EyeLidsCor);
  position: absolute;
  border-radius: 100px;
  translate: var(--PoloEyesPosX) var(--PoloEyesPosY);
  z-index: -1;
}
#eye2 {
  width: 16px;
  height: 16px;
  background-position: var(--EyeLidsCor);
  position: absolute;
  border-radius: 100px;
  translate: calc(var(--PoloEyesPosX) + 33px) var(--PoloEyesPosY);
  z-index: -1;
}
#eye1,
#eye2 {
  position: absolute;
}
#eyes-polo {
  position: absolute;
  display: block;
  translate: -80px 98px;
  width: 328px;
  height: 80px;
  scale: 0.5;
  z-index: 1;
  background-position: -983px 0;
}
#box-bottom {
  transition: opacity, 0.3s ease;
}
#picto-box {
  position: absolute;
  display: flex;
  scale: 0.78;
  position: absolute;
  width: 1500px;
  translate: -170px -25px;
  transition: opacity 0.5s ease;
}

#eyelids {
  display: none;
  position: absolute;
  z-index: 3;
  transform: translateY(-455px);
}

.picto {
  display: block;
  width: 130px;
  height: 130px;
  scale: 0.475;
  transform: translate(0, 10px);
  opacity: 0;
  background-color: transparent;
  cursor: pointer;
  transition: transform, opacity, 0.5s var(--easeQuantOut);
  margin-left: -28px;
  margin-right: -28px;
  z-index: 99;
}

.absolute {
  position: absolute;
}

.picto-in-use {
  opacity: 0.25!important;
  translate: 0 0!important;
  pointer-events: none!important;
  box-shadow: none!important;
  transition: none!important;
}
.bns-bt {
  position: absolute !important;
  translate: -47px -5px;
}
.bns-eye {
  translate: 34px 12px !important;
}
.delay-bns-svg {
  transform: translate(29px, 76px);
  scale: 0.85;
}
.bns-bt {
  display: none;
  z-index: 1;
}
@keyframes pop-eye {
  0% {
    scale: 0;
  }
  50% {
    scale: 0.5;
  }
  100% {
    scale: 0.45;
  }
}

#bsn-1-delay-circle-svg,
#bsn-2-delay-circle-svg,
#bsn-3-delay-circle-svg {
  position: absolute;
  scale: 0.2;
}
#bsn-1-delay-svg,
#bsn-2-delay-svg,
#bsn-3-delay-svg {
  visibility: hidden;
  translate: 14px -94px;
}
@keyframes pop-explo {
  0% {
    scale: 0;
  }
  50% {
    scale: 0.9;
  }
  100% {
    scale: 0.85;
  }
}

.acerte {
  opacity: 0;
}

.pop .acerte {
  opacity: 0.5;
}

.acerte-box {
  pointer-events: none;
  scale: 0.9;
  margin-right: 10px;
  margin-top: 12px;
}

.acerte-box::before,
.acerte-box::after {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.acerte-box:hover ~ *::after,
.acerte-box:hover ~ *::before {
  opacity: 0;
  transition: none;
}

*:has(~ .acerte-box:hover)::before,
*:has(~ .acerte-box:hover)::after {
  opacity: 0;
  transition: none;
}

.acerte-box:hover::before,
.acerte-box:hover::after {
  opacity: 1;
  transition: none;
}

.acerte-box::after {
  position: absolute;
  content: "find the right combo to unlock!";
  font-family: "ms gothic";
  text-transform: uppercase;
  color: #fff;
  translate: -145px 2px;
  scale: 0.95;
  text-align: left;
  height: 30px;
  width: 110px;
  font-size: 12px;
}

.acerte-box::before {
  content: "";
  position: absolute;
  background-color: #26457b;
  width: 175px;
  height: 50px;
  translate: -133px -9.2px;
  z-index: -1;
  border-radius: 50px;
}

.bonus-btn {
  visibility: hidden;
  pointer-events: none;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  margin: 5px;
  margin-right: 10px;
  border-radius: 50px;
  padding: 15px;
  z-index: 999;
  color: white;
  background-color: rgba(0, 0, 0, 0.3);
  transition: opacity 0.4s ease;
}

.unlocked-bonus {
  pointer-events: all;
  white-space: nowrap;
  padding-right: 70px;
  text-align: left;
  animation: bonus-bt-unlock 0.6s var(--easeQuantOut) !important;
}

.bns-bt {
  height: 50px;
  transform: translate(-1px, 3px);
}

.bns-bt::before {
  content: "";
  position: absolute;
  width: 175px;
  height: 50px;
  border-radius: 50px;
  text-align: left;
  background: #808080;
  translate: -87.5px 5px;
  animation: unlockBckAnim 0.5s var(--easeQuantOut) !important;
}

.bns-bt::after {
  content: attr(txt);
  position: absolute;
  text-transform: uppercase;
  font-family: "ms gothic";
  font-size: 13px;
  color: #fff;
  width: 110px;
  scale: 01;
  text-align: left;
  translate: -127.5px -22.5px;
  height: 50px;
}
.bns-bt::before,
.bns-bt::after {
  opacity: 1;
  transition: opacity 0.5s ease;
}
.bns-bt.closed::before,
.bns-bt.closed::after {
  opacity: 0;
}
.bns-bt.closed:hover:before,
.bns-bt.closed:hover:after {
  opacity: 1;
  transition: none;
}
#reset-tip {
  translate: 1040px -72.5px;
}
#auto-tip {
  translate: 1080px -72.5px;
}
#settings-tip {
  translate: 1125px -72.5px;
}
.bt-tip {
  opacity: 0;
  font-family: "ms gothic";
  position: absolute;
  z-index: 999999;
  text-transform: uppercase;
  text-align: center;
  font-size: 13px;
  background-color: #333;
  pointer-events: none;
  color: #fff;
  padding: 5px;
  transition: opacity 0.3s ease;
}
.bt-tip::before{
  content: "";
  position: absolute;
  width: 15px;
  height: 26px;
  translate: -5px 10px;
  z-index: -1;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('data:image/svg+xml,%3Csvg version=%221.1%22 xmlns=%22http://www.w3.org/2000/svg%22 xmlns:xlink=%22http://www.w3.org/1999/xlink%22 width=%2213.36003%22 height=%2222.10478%22 viewBox=%220,0,13.36003,22.10478%22%3E%3Cg transform=%22translate(-231.36647,-163.74622)%22%3E%3Cg fill=%22%23333333%22 stroke=%22none%22 stroke-width=%22none%22 stroke-miterlimit=%2210%22%3E%3Cpath d=%22M231.36647,185.85101l5.1011,-22.10478h8.25893z%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');

}
.top-btns:hover + .bt-tip {
  opacity: 1;
  transition: none;
}

.bt-tip:has(~ .top-btns:hover) {
  opacity: 0;
  transition: none;
}
.animate#record-btn {
  animation: slide-down 0.3s var(--easeQuantOut);
}
@keyframes slide-down {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes pop {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
.bns-explo {
  fill: #fff;
  position: absolute;
  scale: 0.85;
  translate: 35px 5px;
  animation: rotate-360 5s infinite linear;
}
.bns-eye {
  scale: 0.45;
  translate: 9px -21.5px;
}
@keyframes rotate-360 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes controls-rem {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(380px);
  }
}

.ch-progress {
  position: absolute;
  display: none;
  scale: 0.12;
  translate: -40px -35px;
  opacity: 1;
  z-index: 999;
  stroke-dashoffset: -472px;
}

.ch-progress > circle {
  transform-origin: center;
  rotate: 270deg;
}

@keyframes wait-pop-out {
  0% {
    scale: 0.12;
  }
  50% {
    scale: 0.145;
  }
  100% {
    scale: 0;
  }
}

.sprite {
  position: absolute;
  z-index: 1;
  visibility: hidden;
  width: 164px !important;
  height: 380px !important;
  translate: 0 -10px;
  transform: translateY(30px);
  scale: var(--sprite-scale);
  transition: translate 0.5s cubic-bezier(0.9, 0.01, 0.22, 0.99);
}

.ch-frame {
  display: block;
  position: absolute;
  translate: -70px -195px;
  width: 328px;
  height: 760px;
  scale: 0.5;
  background-position: 0 0;
}

.ch-blank-frame {
  position: absolute;
  translate: -70px -195px;
  width: 328px;
  height: 760px;
  scale: 0.5;
  opacity: 0;
  background-position: -656px 0;
}

.ch-body {
  display: none;
  position: absolute;
  width: 328px;
  height: 760px;
  scale: 0.5;
  translate: -70px -195px;
  background-position: -328px 0;
}

.ch-head {
  display: none;
  width: 328px;
  height: 398px;
  scale: 0.5;
  position: absolute;
  transform-origin: top;
  translate: -70px;
  background-position: 0 770px;
}

@keyframes polo-jump {
  0% {
    transform: translateY(28px);
  }
  25% {
    transform: translateY(18px);
  }
  50% {
    transform: translateY(34px);
  }
  100% {
    transform: translateY(30px);
  }
}

@keyframes polo-rem {
  0% {
    transform: translateY(30px);
  }
  50% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(380px);
  }
}

#intro-box {
  display: none;
  scale: 1.25;
  translate: -51px 200px;
}

#big-note,
#medium-note,
#small-note {
  visibility: hidden;
  opacity: 0.5;
}

#txt2 #forget {
  translate: 0 -50px;
}
#forget {
  width: 100px;
}

#drag,
#drop,
#create,
#txt2 #share,
#txt2 #tons-likes,
#txt2 #top50,
#txt2 #forget {
  display: none;
  position: absolute;
  width: 100px;
  color: #25447f;
  text-transform: uppercase;
  transition: translate 0.5s ease;
}
#drag,
#txt2 #share {
  translate: -200px 50px;
}
#txt2 #share {
  translate: -200px 200px;
}
#drop,
#txt2 #tons-likes {
  translate: 0 50px;
}
#txt2 #tons-likes {
  translate: 0 200px;
}
#txt2 #top50 {
  translate: 200px 200px;
}
#create {
  translate: 200px 50px;
}
#intro-share-icn,
#intro-likes-icn,
#intro-trophy-icn {
  display: none;
  scale: 1.3;
  position: absolute;
}
#intro-share-icn {
  translate: -185px 50px;
}
#intro-likes-icn {
  translate: 15px 50px;
}
#intro-trophy-icn {
  translate: 215px 45px;
}
.animate#drag,
.animate#drop,
.animate#create {
  display: block;
  animation: slide-up 0.4s ease;
}
.plus {
  scale: 1.5;
}
.plus#left {
  position: absolute;
  translate: -60px 75px;
}
.plus#right {
  position: absolute;
  translate: 160px 75px;
}
.animate#big-note,
.animate#medium-note,
.animate#small-note {
  visibility: visible;
  animation: slide-down-mid 0.3s var(--easeQuantOut);
}

#notes-box {
  scale: 0.8;
  position: absolute;
  translate: 220px -20px;
}

@keyframes pop-out {
  0% {
    transform-origin: center;
    scale: 1;
  }
  50% {
    transform-origin: center;
    scale: 1.1;
  }
  100% {
    transform-origin: center;
    scale: 0;
  }
}


@keyframes strong-slide-down-out {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(50px);
  }
}
@keyframes strong-slide-down {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slide-down-mid {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
  100% {
    opacity: 0.5;
    transform: translateY(0);
  }
}

@keyframes slideDownOut {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(10px);
  }
}

@keyframes pump {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

#medium-note {
  scale: 0.65;
  translate: -50px 10px;
}

#small-note {
  scale: 0.5;
  translate: 25px -110px;
}

#cursor {
  position: absolute;
  scale: 0.5;
  opacity: 0;
  z-index: 999;
  translate: -350px 200px;
  transition: translate, opacity, 0.5s ease;
}
#head-box {
  translate: 0 -15px;
}

#intro-picto {
  position: absolute;
  display: none;
  scale: 0.75;
  width: 136px;
  height: 136px;
  translate: -215px 0;
  z-index: 9;
  transition: translate, scale, opacity, 0.5s ease;
}

#intro-head {
  background-repeat: no-repeat;
  display: none;
  width: 328px;
  height: 398px;
  scale: 0.5;
  position: absolute;
  translate: -115px 0;
  transform-origin: top;
  z-index: 2;
}

@keyframes slide-left-bounce {
  0% {
    opacity: 0;
    translate: 20px;
  }
  50% {
    opacity: 0.5;
    translate: -5px;
  }
  100% {
    opacity: 0.5;
    translate: 0;
  }
}

@keyframes icon-use {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.5;
  }
}
@keyframes icon-restore {
  to {
    opacity: 1;
  }
}
.x:hover {
  opacity: 0.75;
}
@keyframes popup-close {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes popup-open {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.popup-opened {
  display: block;
  z-index: 25 !important;
  animation: popup-open 0.45s ease;
}

.popup-opened#select-version {
  width: 841px;
  display: flex !important;
}
.blur {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#front-layer > div {
  position: absolute;
  z-index: 23;
}
.bonus-unlocking {
  scale: 0.25;
  transform: translate(601px, -21px) !important;
}
#trans {
  position: absolute !important;
  opacity: 1;
  z-index: 9999999 !important;
  pointer-events: none;
  translate: -1500px -500px;
  width: 1000%;
  height: 1000%;
  background-color: #fafafa;
  transition: opacity 0.4s ease;
}
#reading-box {
  pointer-events: none;
  position: absolute;
  width: 905px;
  translate: 105px 25px;
  height: 5px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#reading-box > div{
  position: absolute;
  height: 5px;
}
#void-read-bar {
  width: 100%;
  background-color: #aaa;
}
#reading-bar {
  width: 0%;
  background-color: #b23232;
}
#limit-record {
  background-color: #d5d5d5;
}
#bar-dashed {
  width: 100%;
  opacity: 1;
}
#reading-box #marker *{
  position: absolute;
  background: #fff;
  width: 2.5px;
  height: 5px;
}
@keyframes reading-bar-fill {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}
#blur,
#global-blur-black {
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity, 0.3s ease !important;
}

#blur {
  display: none;
}

#global-blur-black {
  z-index: 90;
}

#global-blur {
  display: none;
  background-color: rgba(255, 255, 255, 0.5);
}

.blur.blur {
  pointer-events: all;
  z-index: 3;
  opacity: 1;
  transition: opacity, 0.3s ease !important;
}
@keyframes hover {
  0% {
    scale: 1;
  }
  50% {
    scale: 1.08;
  }
  100% {
    scale: 1.06;
  }
}
#select-version {
  display: flex;
  height: 360px !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}

#screen-too-short {
  opacity: 0;
  width: 100%;
  height: 100%;
  justify-self: center;
  align-self: center;
  position: absolute;
  background-color: #fafafa;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 99;
}

@media (max-width: 1000px) {
  #game{
    scale: 60%;
    translate: 0px 10px
  }
  #bandeau{
    scale: 0.6;
    left: -23px;
  }
}