* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
#root {
  height: 100%;
  margin: 0 auto;
  position: relative;
}
ol,
p,
div,
label,
h1,
h2,
h3 {
  list-style: none;
}
.App {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  display: flex;
}
@font-face {
  font-family: Roboto-Black;
  src: url(../assets/Roboto-Black-C4p4DKlf.ttf) format("truetype");
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Roboto-Medium;
  src: url(../assets/Roboto-Medium-D0XNiZmU.ttf) format("truetype");
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Cardust-Regular;
  src: url(../assets/CardustRegular-CC0FrQ_n.otf) format("opentype");
  font-style: normal;
  font-display: swap;
}
.App {
  background-image: url(../images/game-bot-bg1.jpg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
.Final {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}
.Final__bg {
  z-index: 0;
  pointer-events: none;
  width: 90%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
}
.Final__content {
  z-index: 4;
  width: 100%;
  max-width: 500px;
  height: 100%;
  position: relative;
}
.Final__bot-bg {
  z-index: 5;
  pointer-events: none;
  width: 90%;
  height: auto;
  position: absolute;
  bottom: 0;
  right: 0;
}
.Final__btn-sound {
  z-index: 8;
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  background-color: #0000;
  border: none;
  width: 68px;
  height: 68px;
  padding: 0;
  position: absolute;
  top: 13%;
  left: 5px;
  transform: translateY(-20%);
}
.Final__sound {
  width: 100%;
  display: block;
}
.Final__logo {
  z-index: 6;
  pointer-events: none;
  width: 100%;
  max-width: 175px;
  position: absolute;
  top: 5%;
  right: 5%;
}
.Final__text_container {
  z-index: 5;
  width: 100%;
  max-width: 430px;
  height: auto;
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
}
.Final__text_container_panel {
  pointer-events: none;
  width: 100%;
  height: auto;
  display: block;
}
.Final__text_textContainer {
  z-index: 3;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 65px 50px 0 35px;
  display: flex;
  position: absolute;
  inset: 0;
}
.Final__text_title {
  color: #ffde49;
  letter-spacing: -0.4px;
  text-transform: uppercase;
  text-align: center;
  font-family: Roboto-Black;
  font-size: 24px;
  line-height: 1.02;
}
.Final__text_subtitle {
  color: #fff;
  letter-spacing: -0.4px;
  text-transform: uppercase;
  text-align: center;
  margin-top: 10px;
  font-family: Roboto-Medium;
  font-size: 16px;
  line-height: 1.15;
}
.Final_btn-wrapper {
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0 15px;
  display: flex;
}
.Final_btn {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  background-color: #0000;
  border: none;
  width: 100%;
  max-width: 290px;
  margin-top: 5px;
  padding: 0;
  position: relative;
}
.Final_btn_img {
  width: 100%;
  display: block;
}
.Final_btn-text {
  color: #ff7318;
  letter-spacing: -0.4px;
  text-align: center;
  white-space: nowrap;
  font-family: Roboto-Black;
  font-size: 22px;
  position: absolute;
  top: 62%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.Final__franko {
  z-index: 5;
  pointer-events: none;
  width: 100%;
  max-width: clamp(450px, 75vw, 500px);
  position: absolute;
  bottom: -22%;
  left: 50%;
  transform: translate(-50%) scale(1.05);
}
@media (height>=700px) {
  .Final__franko {
    bottom: -14%;
  }
}
@media (height>=770px) {
  .Final__franko {
    bottom: -12%;
  }
  .Final__text_textContainer {
    justify-content: center;
    padding: 70px 50px 50px 35px;
  }
}
@media (width<=1023px) and (orientation: landscape) {
  .Final__content {
    max-width: none;
  }
  .Final__bg {
    width: min(58vw, 520px);
  }
  .Final__bot-bg {
    width: min(44vw, 360px);
    bottom: 0;
    right: 0;
  }
  .Final__logo {
    width: clamp(120px, 22vw, 220px);
    max-width: none;
    top: 5%;
    left: 6%;
    right: auto;
  }
  .Final__btn-sound {
    cursor: pointer;
    width: clamp(40px, 8vh, 56px);
    height: clamp(40px, 8vh, 56px);
    top: 20%;
    left: auto;
    right: 5%;
    transform: none;
  }
  .Final__text_container {
    width: min(42vw, 330px);
    max-width: none;
    inset: 50% 5% auto auto;
    transform: translateY(-50%);
  }
  .Final__text_textContainer {
    justify-content: center;
    padding: clamp(24px, 4vw, 36px) clamp(18px, 2.8vw, 28px)
      clamp(16px, 2vw, 22px);
  }
  .Final__text_title {
    font-size: clamp(18px, 2.8vw, 30px);
    line-height: 1.02;
  }
  .Final__text_subtitle {
    margin-top: 10px;
    font-size: clamp(10px, 1.45vw, 15px);
    line-height: 1.12;
  }
  .Final_btn {
    width: min(68%, 185px);
    max-width: none;
    margin-top: 14px;
  }
  .Final_btn-text {
    font-size: clamp(15px, 2vw, 20px);
    top: 58%;
  }
  .Final__franko {
    width: min(54vw, 420px);
    max-width: none;
    bottom: -4%;
    left: -1%;
    transform: none;
  }
}
@media (width<=1023px) and (orientation: landscape) and (height<=430px) {
  .Final__logo {
    width: clamp(105px, 17vw, 160px);
    top: 4%;
  }
  .Final__btn-sound {
    width: 38px;
    height: 38px;
    top: 18%;
  }
  .Final__bot-bg {
    width: min(40vw, 300px);
  }
  .Final__text_container {
    width: min(38vw, 285px);
    right: 4%;
  }
  .Final__text_textContainer {
    padding: 20px 16px 14px;
  }
  .Final__text_title {
    font-size: clamp(16px, 2.4vw, 24px);
  }
  .Final__text_subtitle {
    margin-top: 8px;
    font-size: clamp(9px, 1.2vw, 12px);
  }
  .Final_btn {
    width: min(64%, 155px);
    margin-top: 12px;
  }
  .Final_btn-text {
    font-size: 14px;
  }
  .Final__franko {
    width: min(48vw, 320px);
    bottom: -5%;
  }
}
@media (width>=1024px) {
  .Final__content {
    z-index: 6;
    max-width: none;
  }
  .Final__bg {
    width: clamp(420px, 52vw, 760px);
    display: none;
    top: 0;
    left: 0;
  }
  .Final__bot-bg {
    width: clamp(320px, 36vw, 660px);
    bottom: 0;
    right: 0;
  }
  .Final__logo {
    z-index: 5;
    width: clamp(180px, 23vw, 440px);
    max-width: none;
    top: 4%;
    left: 20%;
    right: auto;
  }
  .Final__btn-sound {
    cursor: pointer;
    width: clamp(48px, 4vw, 64px);
    height: clamp(48px, 4vw, 64px);
    top: 24%;
    left: auto;
    right: 14%;
    transform: none;
  }
  .Final__text_container {
    width: clamp(320px, 31vw, 800px);
    max-width: none;
    inset: 50% 13% auto auto;
    transform: translateY(-50%);
  }
  .Final__text_textContainer {
    justify-content: center;
    padding: 52px 60px 20px;
  }
  .Final__text_title {
    font-size: clamp(28px, 2.4vw, 40px);
    line-height: 1;
  }
  .Final__text_subtitle {
    margin-top: 14px;
    padding: 0 50px;
    font-size: clamp(14px, 1.05vw, 18px);
    line-height: 1.15;
  }
  .Final_btn {
    cursor: pointer;
    width: 100%;
    max-width: 322px;
    margin-top: 18px;
  }
  .Final_btn-text {
    font-size: clamp(18px, 1.4vw, 24px);
    top: 64%;
  }
  .Final__franko {
    z-index: 4;
    width: clamp(360px, 50vw, 950px);
    max-width: none;
    bottom: -20%;
    left: 10%;
    transform: none;
  }
}
.Game {
  flex-direction: column;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}
.Game-top {
  z-index: 2;
  background-image: url(../assets/game-top-bg-blue-Cre9hSF0.jpg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  flex-shrink: 0;
  width: 100%;
  height: 30%;
  min-height: 170px;
  position: relative;
}
.Game__bane {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  z-index: 7;
  will-change: transform;
  width: clamp(270px, 34vw, 520px);
  transition: transform 0.38s;
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(100%, 50%);
}
.Game__bane--visible {
  transform: translate(30%, 30%) rotate(-35deg);
}
.Game__bg {
  z-index: 0;
  pointer-events: none;
  height: 90%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.Game__line {
  z-index: 1;
  pointer-events: none;
  width: 100%;
  height: 20%;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
}
.Game__btn-sound {
  z-index: 8;
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  background-color: #0000;
  border: none;
  width: 68px;
  height: 68px;
  padding: 0;
  position: absolute;
  bottom: 0;
  left: 5%;
  transform: translateY(50%);
}
.Game__sound {
  width: 100%;
  display: block;
}
.Game__franko-wrap {
  z-index: 6;
  pointer-events: none;
  width: 100%;
  max-width: 110px;
  position: absolute;
  bottom: 2%;
  left: 50%;
  transform: translate(-75%);
}
.Game__franko {
  width: 100%;
  display: block;
}
.Game__hook-anchor {
  pointer-events: none;
  width: 4px;
  height: 4px;
  position: absolute;
  bottom: 17%;
  right: 18%;
}
.Game__logo {
  z-index: 8;
  width: 100%;
  max-width: 135px;
  display: block;
  position: absolute;
  top: 8%;
  right: 5%;
}
.Game__score {
  width: 100%;
  max-width: 135px;
  position: relative;
}
.Game__score--floating {
  z-index: 8;
  position: absolute;
  top: 20%;
  right: 5%;
  transform: translateY(-5%);
}
.Game__score-img {
  object-fit: cover;
  width: 100%;
  display: block;
}
.Game__score-count {
  color: #3b57f3;
  letter-spacing: -0.4px;
  font-family: Cardust-Regular;
  font-size: 24px;
  line-height: 1;
  position: absolute;
  top: 45%;
  right: 25%;
  transform: translateY(-50%);
}
.Game-bot {
  z-index: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  flex: 1;
  position: relative;
  overflow: hidden;
}
.Game__diamond {
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  z-index: 1;
  display: block;
  position: absolute;
}
.Game__hook-layer {
  z-index: 5;
  pointer-events: none;
  position: absolute;
  inset: 0;
}
.Game__rope {
  object-fit: fill;
  transform-origin: 50% 0;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  z-index: 5;
  width: 6px;
  position: absolute;
}
.Game__hook {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  z-index: 6;
  width: 42px;
  position: absolute;
}
.Game__diamond--caught {
  z-index: 6;
}
.Game__score-box {
  position: relative;
}
.Game__score-box--penalty {
  animation: 0.46s scorePenaltyPulse;
}
.Game__score-delta {
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  background: #ffffffeb;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  display: flex;
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translate(-50%, 12px) scale(0.85);
  box-shadow: 0 8px 20px #0000002e;
}
.Game__score-delta--visible {
  animation: 0.9s forwards scoreDeltaFloat;
}
.Game__score-delta-icon {
  flex-shrink: 0;
  width: clamp(18px, 2vw, 26px);
  display: block;
}
.Game__score-delta-text {
  color: #ff3b30;
  letter-spacing: -0.3px;
  font-family: Cardust-Regular;
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1;
}
.Game__explosion {
  opacity: 0;
  pointer-events: none;
  z-index: 12;
  width: 64px;
  height: 64px;
  position: absolute;
  transform: translate(-50%, -50%) scale(0.12);
}
.Game__explosion--visible {
  animation: 0.62s cubic-bezier(0.2, 0.8, 0.2, 1) forwards bombExplosionCore;
}
.Game__explosion:before,
.Game__explosion:after {
  content: "";
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.Game__explosion:before {
  background: radial-gradient(
    circle,
    #fff 0 12%,
    #fff7b0 12% 24%,
    #ffd54f 24% 40%,
    #ff9800 40% 58%,
    #ff5a00 58% 74%,
    #ff280073 74% 88%,
    #f000 100%
  );
  border-radius: 50%;
  width: 100%;
  height: 100%;
  animation: 0.62s ease-out forwards explosionFireball;
  box-shadow:
    0 0 18px #fffffff2,
    0 0 34px #ffd75ae6,
    0 0 60px #ff7800b8,
    0 0 92px #ff460073;
}
.Game__explosion:after {
  background: 0 0;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: 0.62s ease-out forwards explosionSparks;
  box-shadow:
    0 -88px 0 3px #ffe082,
    22px -78px 0 3px #ffd54f,
    46px -64px 0 3px #ffca28,
    68px -42px 0 3px #ff9800,
    84px -18px 0 3px #ffb300,
    90px 10px 0 3px #ffd54f,
    76px 38px 0 3px #ff9800,
    56px 62px 0 3px #ffca28,
    28px 80px 0 3px #ffb300,
    0 92px 0 3px #ffe082,
    -28px 80px 0 3px #ff9800,
    -56px 62px 0 3px #ffca28,
    -76px 38px 0 3px #ffb300,
    -90px 10px 0 3px #ffe082,
    -84px -18px 0 3px #ff9800,
    -68px -42px 0 3px #ffca28,
    -46px -64px 0 3px #ffb300,
    -22px -78px 0 3px #ffd54f;
}
.Game__explosion-flash,
.Game__explosion-ring,
.Game__explosion-smoke {
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.Game__explosion-flash {
  opacity: 0;
  background: #fffffff2;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  box-shadow:
    0 0 22px #fffffff2,
    0 0 44px #fff0aad9,
    0 0 72px #ffb4008c;
}
.Game__explosion--visible .Game__explosion-flash {
  animation: 0.24s ease-out forwards explosionFlash;
}
.Game__explosion-ring {
  opacity: 0;
  border: 6px solid #ffebaafa;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  box-shadow:
    0 0 18px #ffe178cc,
    0 0 36px #ff8c0073;
}
.Game__explosion--visible .Game__explosion-ring {
  animation: 0.62s ease-out forwards explosionRing;
}
.Game__explosion-smoke {
  opacity: 0;
  background: radial-gradient(
    circle,
    #5a5a5a66 0 22%,
    #46464647 36%,
    #37373724 54%,
    #28282800 76%
  );
  border-radius: 50%;
  width: 74px;
  height: 74px;
}
.Game__explosion--visible .Game__explosion-smoke {
  animation: 0.82s ease-out forwards explosionSmoke;
}
@keyframes bombExplosionCore {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.12);
  }
  8% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.45);
  }
  28% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
  }
  60% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.9);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.45);
  }
}
@keyframes explosionFireball {
  0% {
    opacity: 0;
    filter: blur();
    transform: translate(-50%, -50%) scale(0.18);
  }
  15% {
    opacity: 1;
    filter: blur(0.4px);
    transform: translate(-50%, -50%) scale(0.95);
  }
  45% {
    opacity: 1;
    filter: blur(0.8px);
    transform: translate(-50%, -50%) scale(1.65);
  }
  to {
    opacity: 0;
    filter: blur(4px);
    transform: translate(-50%, -50%) scale(2.6);
  }
}
@keyframes explosionSparks {
  0% {
    opacity: 0;
    filter: blur();
    transform: translate(-50%, -50%) scale(0.18) rotate(0);
  }
  14% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.55) rotate(6deg);
  }
  50% {
    opacity: 1;
    filter: blur(0.3px);
    transform: translate(-50%, -50%) scale(1) rotate(15deg);
  }
  to {
    opacity: 0;
    filter: blur(1.5px);
    transform: translate(-50%, -50%) scale(1.55) rotate(24deg);
  }
}
@keyframes explosionFlash {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
  }
  30% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.8);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.8);
  }
}
@keyframes explosionRing {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.18);
  }
  16% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.85);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(4.2);
  }
}
@keyframes explosionSmoke {
  0% {
    opacity: 0;
    filter: blur();
    transform: translate(-50%, -50%) scale(0.4);
  }
  24% {
    opacity: 0.42;
    transform: translate(-50%, -50%) scale(1);
  }
  to {
    opacity: 0;
    filter: blur(6px);
    transform: translate(-50%, -50%) scale(2.45);
  }
}
.Game__franko-wrap--hit {
  animation: 0.32s frankoBlastShake;
}
@keyframes frankoBlastShake {
  0% {
    transform: translate(-75%);
  }
  15% {
    transform: translate(-72%) rotate(-4deg) scale(1.03);
  }
  30% {
    transform: translate(-78%) rotate(3deg) scale(0.98);
  }
  45% {
    transform: translate(-73%) rotate(-2deg) scale(1.02);
  }
  60% {
    transform: translate(-77%) rotate(2deg);
  }
  to {
    transform: translate(-75%);
  }
}
@media (width>=1024px) {
  @keyframes frankoBlastShake {
    0% {
      transform: translate(-50%);
    }
    15% {
      transform: translate(-47%) rotate(-4deg) scale(1.03);
    }
    30% {
      transform: translate(-53%) rotate(3deg) scale(0.98);
    }
    45% {
      transform: translate(-48%) rotate(-2deg) scale(1.02);
    }
    60% {
      transform: translate(-52%) rotate(2deg);
    }
    to {
      transform: translate(-50%);
    }
  }
}
@keyframes scoreDeltaFloat {
  0% {
    opacity: 0;
    transform: translate(-50%, 12px) scale(0.85);
  }
  15% {
    opacity: 1;
    transform: translate(-50%) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -34px) scale(1.05);
  }
}
@keyframes scorePenaltyPulse {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.12) rotate(-3deg);
  }
  45% {
    transform: scale(0.95) rotate(3deg);
  }
  70% {
    transform: scale(1.06) rotate(-2deg);
  }
  to {
    transform: scale(1);
  }
}
@media (width<=1023px) and (orientation: landscape) and (height<=430px) {
  .Game-top {
    min-height: 96px;
  }
  .Game__btn-sound {
    width: 40px;
    height: 40px;
    top: 10%;
  }
  .Game__franko-wrap {
    width: clamp(82px, 13vw, 135px);
    bottom: -4%;
  }
  .Game__logo {
    width: clamp(88px, 14vw, 135px);
  }
  .Game__score {
    width: clamp(82px, 13vw, 125px);
  }
  .Game__score--floating {
    top: 20%;
  }
  .Game__score-count {
    font-size: clamp(16px, 2vw, 22px);
  }
  .Game__rope {
    width: 4px;
  }
  .Game__hook {
    width: 34px;
  }
}
@media (width>=1024px) {
  .Game-top {
    height: clamp(170px, 28vh, 230px);
    min-height: 170px;
  }
  .Game__bg {
    transform-origin: 100% 0;
    width: clamp(520px, 48vw, 820px);
    left: auto;
    right: 0;
    transform: scaleX(-1);
  }
  .Game__btn-sound {
    cursor: pointer;
    width: clamp(56px, 4.4vw, 74px);
    height: clamp(56px, 4.4vw, 74px);
    bottom: 3%;
    left: auto;
    right: 4%;
  }
  .Game__franko-wrap {
    width: clamp(120px, 9vw, 165px);
    max-width: none;
    left: 50%;
    transform: translate(-50%);
  }
  .Game__logo {
    width: clamp(150px, 16vw, 250px);
    max-width: none;
    top: 14%;
    left: 7%;
    right: auto;
  }
  .Game__score {
    width: clamp(135px, 11vw, 190px);
    max-width: none;
  }
  .Game__score--floating {
    inset: auto auto clamp(26px, 4vh, 42px) 50%;
    transform: translate(-50%);
  }
  .Game__score-count {
    font-size: clamp(26px, 2vw, 38px);
    top: 45%;
    right: 21%;
  }
  .Game__rope {
    width: clamp(5px, 0.45vw, 8px);
  }
  .Game__hook {
    width: clamp(42px, 3.2vw, 58px);
  }
}
.Start {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}
.Start__content {
  z-index: 2;
  width: 100%;
  max-width: 500px;
  height: 100%;
  position: relative;
}
.Start__bg {
  z-index: 0;
  pointer-events: none;
  width: 95%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
}
.Start__franko {
  z-index: 1;
  pointer-events: none;
  width: min(100%, 500px);
  max-width: none;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.18);
}
.Start__logo {
  z-index: 6;
  width: min(42vw, 175px);
  max-width: none;
  position: absolute;
  top: 5%;
  right: 5%;
}
.Start__btn-sound {
  z-index: 7;
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  background: 0 0;
  border: none;
  width: 68px;
  height: 68px;
  padding: 0;
  position: absolute;
  top: 13%;
  left: 5%;
  transform: translateY(50%);
}
.Start__sound {
  width: 100%;
  display: block;
}
.Start__text_container {
  z-index: 3;
  justify-content: center;
  align-items: center;
  width: 90%;
  max-width: 400px;
  display: flex;
  position: absolute;
  bottom: 3%;
  left: 50%;
  transform: translate(-50%);
}
.Start__text_container_panel {
  width: 100%;
  display: block;
}
.Start__text_textContainer {
  z-index: 3;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
  height: 100%;
  padding: clamp(46px, 11vw, 64px) 28px 28px;
  display: flex;
  position: absolute;
  inset: 0;
}
.Start__text_title {
  color: #ffde49;
  letter-spacing: -0.4px;
  text-transform: uppercase;
  text-align: center;
  padding: 0 15px;
  font-family: Roboto-Black;
  font-size: 28px;
  line-height: 1;
}
.Start__text_subtitle {
  color: #fff;
  letter-spacing: -0.4px;
  text-transform: uppercase;
  text-align: center;
  margin-top: 10px;
  padding: 0 20px;
  font-family: Roboto-Medium;
  font-size: 16px;
  line-height: 1.15;
}
.Start_btn-wrapper {
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0 15px;
  display: flex;
}
.Start_btn {
  background: 0 0;
  border: none;
  width: 100%;
  margin: 24px auto 0;
  padding: 0;
  display: block;
  position: relative;
}
.Start_btn_img {
  width: 100%;
  display: block;
}
.Start_btn-text {
  color: #ff7318;
  letter-spacing: -0.4px;
  text-align: center;
  white-space: nowrap;
  font-family: Roboto-Black;
  font-size: 22px;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media (width<=1023px) and (orientation: landscape) {
  .Start__content {
    max-width: none;
  }
  .Start__bg {
    width: min(58vw, 520px);
  }
  .Start__logo {
    width: clamp(130px, 30vw, 420px);
    top: 4%;
    right: 6%;
  }
  .Start__btn-sound {
    cursor: pointer;
    width: clamp(42px, 8vh, 62px);
    height: clamp(42px, 8vh, 62px);
    top: 25%;
    left: auto;
    right: 2%;
    transform: none;
  }
  .Start__franko {
    width: min(52vw, 430px);
    inset: auto -2% -20% auto;
    transform: none;
  }
  .Start__text_container {
    width: min(40vw, 360px);
    max-width: none;
    top: 50%;
    bottom: auto;
    left: 20%;
    transform: translateY(-50%);
  }
  .Start__text_textContainer {
    padding: clamp(24px, 4vw, 38px) clamp(18px, 2.8vw, 28px)
      clamp(18px, 2vw, 24px);
  }
  .Start__text_title {
    font-size: clamp(18px, 2.8vw, 30px);
    line-height: 1;
  }
  .Start__text_subtitle {
    margin-top: 10px;
    font-size: clamp(10px, 1.45vw, 15px);
    line-height: 1.12;
  }
}
@media (width<=1023px) and (orientation: landscape) and (height<=430px) {
  .Start__logo {
    width: clamp(110px, 17vw, 160px);
    top: 3%;
  }
  .Start__btn-sound {
    width: 40px;
    height: 40px;
    top: 17%;
  }
  .Start__franko {
    width: min(48vw, 360px);
    bottom: -20%;
  }
  .Start__text_container {
    width: min(36vw, 300px);
    left: 4%;
  }
  .Start__text_textContainer {
    padding: 50px 16px 16px;
  }
  .Start__text_title {
    font-size: clamp(16px, 2.4vw, 24px);
  }
  .Start__text_subtitle {
    margin-top: 8px;
    font-size: clamp(9px, 1.2vw, 12px);
  }
  .Start_btn {
    margin-top: 12px;
  }
  .Start_btn-text {
    font-size: 14px;
  }
}
@media (width>=1024px) {
  .Start__content {
    max-width: none;
  }
  .Start__bg {
    width: clamp(420px, 52vw, 760px);
    top: 0;
    left: 0;
  }
  .Start__logo {
    width: clamp(180px, 28vw, 430px);
    top: 5%;
    right: 17%;
  }
  .Start__btn-sound {
    cursor: pointer;
    width: clamp(54px, 4.4vw, 72px);
    height: clamp(54px, 4.4vw, 72px);
    top: 30%;
    left: auto;
    right: 13%;
    transform: none;
  }
  .Start__franko {
    width: clamp(360px, 50vw, 900px);
    inset: auto 10% -20% auto;
    transform: none;
  }
  .Start__text_container {
    width: clamp(320px, 31vw, 650px);
    max-width: none;
    top: 50%;
    bottom: auto;
    left: 25%;
    transform: translateY(-50%);
  }
  .Start__text_textContainer {
    padding: 64px 38px 34px;
  }
  .Start__text_title {
    padding-left: 10px;
    padding-right: 20px;
    font-size: clamp(28px, 2.3vw, 40px);
  }
  .Start__text_subtitle {
    margin-top: 16px;
    padding: 0 50px;
    font-size: clamp(14px, 1.1vw, 18px);
    line-height: 1.15;
  }
  .Start_btn {
    cursor: pointer;
    width: 100%;
    max-width: 322px;
  }
  .Start_btn-text {
    font-size: clamp(18px, 1.5vw, 24px);
    top: 62%;
  }
}
.IceCurtain {
  z-index: 30;
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.IceCurtain:before {
  content: "";
  opacity: 0;
  z-index: 1;
  background: #032449;
  transition: opacity 0.7s;
  position: absolute;
  inset: 0;
}
.IceCurtain__top,
.IceCurtain__bottom {
  z-index: 2;
  will-change: transform;
  width: 100%;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  display: block;
  position: absolute;
  left: 0;
}
.IceCurtain__top {
  top: 0;
  transform: translateY(-100%);
}
.IceCurtain__bottom {
  bottom: 0;
  transform: translateY(100%);
}
.IceCurtain__overlay {
  z-index: 5;
  opacity: 0;
  justify-content: center;
  align-items: center;
  transition: opacity 0.45s;
  display: flex;
  position: absolute;
  inset: 0;
}
.IceCurtain__overlay-logo {
  width: 100%;
  max-width: 290px;
  display: block;
}
.IceCurtain__overlay-logo-top {
  width: 100%;
  max-width: 185px;
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translate(-50%);
}
.IceCurtain--closed:before {
  opacity: 1;
}
.IceCurtain--closed .IceCurtain__top,
.IceCurtain--closed .IceCurtain__bottom {
  transform: translateY(0);
}
.IceCurtain--closed .IceCurtain__overlay {
  opacity: 1;
}