@font-face {
  font-family: Goodland;
  src: url('../fonts/Goodland-Light.otf') format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Goodland;
  src: url('../fonts/Goodland-SemiBold.otf') format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Goodland;
  src: url('../fonts/Goodland-Medium.otf') format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Goodland;
  src: url('../fonts/Goodland-UltraBold.otf') format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.wrapper {
  background-image: url('../images/bg_blurred.jpg');
  background-position: 50%;
  background-size: cover;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  display: flex;
  position: relative;
}

.block_main {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1700px;
  height: auto;
  margin-top: -25px;
  padding-left: 25px;
  padding-right: 25px;
  display: flex;
}

.radar {
  background-image: linear-gradient(135deg, #fff, #cfcfcf);
  border: 2px solid #bcbdbd;
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-left: 0;
  margin-right: 0;
  padding: 14px;
  display: flex;
}

.block_balls {
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  margin-bottom: 50px;
  display: flex;
  position: absolute;
  inset: auto auto 0%;
}

.block_ball {
  background-image: linear-gradient(135deg, #e09337, #d6672e);
  border-radius: 100%;
  width: 100px;
  height: 100px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 7.5px;
}

.block_leaderboard {
  background-color: #000;
  border-radius: 0;
  flex-flow: column;
  width: 300px;
  height: 382px;
  padding: 3px;
  display: flex;
}

.header {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: auto;
  margin-top: 25px;
  padding-left: 25px;
  padding-right: 25px;
  display: flex;
  position: absolute;
  inset: 0% 0% auto;
}

.header_name {
  background-color: #0000;
  width: 180px;
  height: 60px;
}

.connect {
  color: #671800;
  background-color: #ee7032;
  border: 5px solid #000;
  border-width: 2px 5px 5px 2px;
  justify-content: center;
  align-items: center;
  width: 180px;
  height: 60px;
  padding-bottom: 12px;
  font-family: Goodland, Impact, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 22px;
  display: flex;
}

.connect:hover {
  background-color: #ffb20a;
}

.dk {
  background-color: #e3e3e3;
  border-radius: 20px;
  width: 300px;
  height: 350px;
}

.block_center {
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
}

.block_button {
  margin-top: 50px;
}

.button_search {
  color: #671800;
  background-color: #ee7032;
  border: 5px solid #000;
  border-width: 2px 5px 5px 2px;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 60px;
  font-family: Goodland, Impact, sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 28px;
  display: flex;
}

.button_search:hover {
  background-color: #ffb20a;
}

.block_radar {
  background-image: linear-gradient(135deg, #fff, #cfcfcf);
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 300px;
  margin-left: 25px;
  margin-right: 25px;
  padding: 7px;
  display: flex;
}

.radar_in {
  background-color: #6c6c6c;
  background-image: url('../images/radar.png');
  background-position: 50%;
  background-size: cover;
  border: 2px solid #fff;
  border-radius: 100%;
  width: 100%;
  height: 100%;
  position: relative;
}

.radar_position {
  background-image: url('../images/radar_position.png');
  background-position: 50%;
  background-size: cover;
  border-radius: 0%;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.radar_balls_1 {
  opacity: 0;
  background-image: url('../images/radar_balls_1.png');
  background-position: 50%;
  background-size: cover;
  border-radius: 100%;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.radar_balls_2 {
  opacity: 0;
  background-image: url('../images/radar_balls_2.png');
  background-position: 50%;
  background-size: cover;
  border-radius: 100%;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.ball {
  background-color: #965518;
  border: 2px solid #de9a59;
  border-radius: 100%;
  width: 100%;
  height: 100%;
  padding: 5px;
}

.ball_in {
  background-color: #573d30;
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  display: flex;
}

.b1, .b2, .b3, .b4, .b5, .b6, .b7 {
  height: 95%;
  display: none;
}

/* Loading Section Styles */
.section_loading {
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  z-index: 1001;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
}

.block_loading_container {
  background-color: #482a1d;
  border: 5px solid #000;
  width: 500px;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.block_loading {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-left: 30px;
  padding-right: 30px;
  display: flex;
  position: relative;
}

.loading_title {
  color: #ffd49b;
  text-align: center;
  font-family: Goodland, Impact, sans-serif;
  font-size: 45px;
  font-weight: 700;
  line-height: 50px;
  margin-bottom: 30px;
  animation: pulse 1.5s ease-in-out infinite;
}

.loading_animation {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
}

.loading_dots {
  display: flex;
  gap: 10px;
}

.loading_dots .dot {
  width: 15px;
  height: 15px;
  background-color: #ee7032;
  border-radius: 50%;
  animation: bounce 1.4s ease-in-out infinite both;
}

.loading_dots .dot:nth-child(1) { animation-delay: -0.32s; }
.loading_dots .dot:nth-child(2) { animation-delay: -0.16s; }
.loading_dots .dot:nth-child(3) { animation-delay: 0s; }

.suspense_text {
  color: #ffd49b;
  text-align: center;
  font-family: Goodland, Impact, sans-serif;
  font-size: 18px;
  font-weight: 400;
  opacity: 0.8;
  animation: fadeInOut 2s ease-in-out infinite;
}

.block_loading.searching {
  animation: searchPulse 2s ease-in-out infinite;
}

/* Result Reveal Animation */
.result-reveal {
  animation: revealResult 0.8s ease-out forwards;
  transform: scale(0.8);
  opacity: 0;
}

/* Keyframe Animations */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.05); }
}

@keyframes bounce {
  0%, 80%, 100% { 
    transform: scale(0);
  } 
  40% { 
    transform: scale(1);
  }
}

@keyframes fadeInOut {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes searchPulse {
  0%, 100% { 
    background-color: #482a1d;
    box-shadow: inset 0 0 20px rgba(238, 112, 50, 0.3);
  }
  50% { 
    background-color: #5a3424;
    box-shadow: inset 0 0 40px rgba(238, 112, 50, 0.6);
  }
}

@keyframes revealResult {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.block_title {
  background-color: #ee7032;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40px;
  display: flex;
}

.block2 {
  background-color: #5f4335;
  border: 2px solid #bd8153;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 45px;
  margin-top: 3px;
  padding: 5px 5px 5px 10px;
  display: flex;
}

.block_tier {
  background-color: #5f4335;
  border: 2px solid #bd8153;
  flex: auto;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40px;
  margin-top: 3px;
  display: flex;
}

.leaderboard_in {
  background-color: #5f4335;
  border: 2px solid #bd8153;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 45px;
  margin-top: 3px;
  padding-left: 10px;
  padding-right: 5px;
  display: flex;
}

.h1 {
  color: #000;
  font-family: Goodland, Impact, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 22px;
}

.h2 {
  color: #fff;
  font-family: Goodland, Impact, sans-serif;
  font-size: 18px;
  line-height: 18px;
}

.block_data {
  background-color: #422d23;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100%;
  display: flex;
}

.tier, .balls, .tries, .wallet {
  color: #fff;
  font-family: Goodland, Impact, sans-serif;
  font-size: 18px;
  line-height: 18px;
}

.leaderball {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.block_user_stats {
  width: 100%;
  position: relative;
}

.block_pfp {
  height: 150%;
  margin-bottom: 2px;
  margin-left: 25px;
  position: absolute;
  inset: auto auto 0% 0%;
}

.pfp {
  height: 100%;
}

.section_character {
  z-index: 1000;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  background-color: #2e1509c4;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  inset: 0%;
}

.block_outfit {
  background-color: #000;
  border-radius: 0;
  flex-flow: column;
  width: 600px;
  height: 600px;
  padding: 3px;
  display: none;
  position: relative;
}

.block_chara_custom {
  background-color: #5f4335;
  border: 2px solid #bd8153;
  flex: auto;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40px;
  margin-top: 3px;
  display: flex;
}

.character {
  pointer-events: auto;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  margin-bottom: 128px;
  display: flex;
  position: relative;
}

.base {
  pointer-events: none;
  width: auto;
  height: 100%;
  margin-bottom: 0;
  position: relative;
}

.block_selection {
  z-index: 2;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background-color: #442718db;
  border: 2px solid #000;
  justify-content: space-around;
  align-items: center;
  height: 70px;
  padding-left: 5px;
  padding-right: 5px;
  display: flex;
  position: absolute;
  inset: auto 0% 0%;
}

.pick_body01 {
  background-color: #301d15;
  background-image: url('../images/outfit01_preview.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  border: 2px #bd8153;
  border-radius: 6px;
  width: 50px;
  height: 50px;
  margin-left: 3px;
  margin-right: 3px;
}

.pick_body02 {
  background-color: #301d15;
  background-image: url('../images/outfit02_preview.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  border: 2px #bd8153;
  border-radius: 6px;
  width: 50px;
  height: 50px;
  margin-left: 3px;
  margin-right: 3px;
}

.pick_body03 {
  background-color: #301d15;
  background-image: url('../images/outfit03_preview.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  border: 2px #bd8153;
  border-radius: 6px;
  width: 50px;
  height: 50px;
  margin-left: 3px;
  margin-right: 3px;
}

.pick_body04 {
  background-color: #301d15;
  background-image: url('../images/outfit04_preview.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  border: 2px #bd8153;
  border-radius: 6px;
  width: 50px;
  height: 50px;
  margin-left: 3px;
  margin-right: 3px;
}

.pick_body05 {
  background-color: #301d15;
  background-image: url('../images/outfit05_preview.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  border: 2px #bd8153;
  border-radius: 6px;
  width: 50px;
  height: 50px;
  margin-left: 3px;
  margin-right: 3px;
}

.pick_body06 {
  background-color: #301d15;
  background-image: url('../images/outfit06_preview.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  border: 2px #bd8153;
  border-radius: 6px;
  width: 50px;
  height: 50px;
  margin-left: 3px;
  margin-right: 3px;
}

.pick_body07 {
  background-color: #301d15;
  background-image: url('../images/outfit07_preview.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  border: 2px #bd8153;
  border-radius: 6px;
  width: 50px;
  height: 50px;
  margin-left: 3px;
  margin-right: 3px;
}

.pick_body08 {
  background-color: #301d15;
  background-image: url('../images/outfit08_preview.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  border: 2px #bd8153;
  border-radius: 6px;
  width: 50px;
  height: 50px;
  margin-left: 3px;
  margin-right: 3px;
}

.pick_body09 {
  background-color: #301d15;
  background-image: url('../images/outfit09_preview.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  border: 2px #bd8153;
  border-radius: 6px;
  width: 50px;
  height: 50px;
  margin-left: 3px;
  margin-right: 3px;
}

.pick_body10 {
  background-color: #301d15;
  background-image: url('../images/outfit10_preview.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  border: 2px #bd8153;
  border-radius: 6px;
  width: 50px;
  height: 50px;
  margin-left: 3px;
  margin-right: 3px;
}

.block_continue {
  justify-content: center;
  align-items: center;
  width: 600px;
  margin-top: 10px;
  display: flex;
  position: absolute;
  inset: auto 0% -12%;
}

.button_next {
  color: #671800;
  background-color: #ee7032;
  border: 5px solid #000;
  border-width: 2px 5px 5px 2px;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 60px;
  margin-left: 5px;
  margin-right: 5px;
  font-family: Goodland, Impact, sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 28px;
  display: flex;
}

.button_next:hover {
  background-color: #ffb20a;
}

.block_face {
  background-color: #000;
  border-radius: 0;
  flex-flow: column;
  width: 600px;
  height: 600px;
  padding: 3px;
  display: none;
  position: relative;
}

.pick_face01 {
  background-color: #301d15;
  background-image: url('../images/face01_preview.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  border: 2px #bd8153;
  border-radius: 6px;
  width: 50px;
  height: 50px;
  margin-left: 3px;
  margin-right: 3px;
}

.pick_face02 {
  background-color: #301d15;
  background-image: url('../images/face02_preview.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  border: 2px #bd8153;
  border-radius: 6px;
  width: 50px;
  height: 50px;
  margin-left: 3px;
  margin-right: 3px;
}

.pick_face03 {
  background-color: #301d15;
  background-image: url('../images/face03_preview.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  border: 2px #bd8153;
  border-radius: 6px;
  width: 50px;
  height: 50px;
  margin-left: 3px;
  margin-right: 3px;
}

.pick_face04 {
  background-color: #301d15;
  background-image: url('../images/face04_preview.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  border: 2px #bd8153;
  border-radius: 6px;
  width: 50px;
  height: 50px;
  margin-left: 3px;
  margin-right: 3px;
}

.pick_face05 {
  background-color: #301d15;
  background-image: url('../images/face05_preview.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  border: 2px #bd8153;
  border-radius: 6px;
  width: 50px;
  height: 50px;
  margin-left: 3px;
  margin-right: 3px;
}

.pick_face06 {
  background-color: #301d15;
  background-image: url('../images/face06_preview.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  border: 2px #bd8153;
  border-radius: 6px;
  width: 50px;
  height: 50px;
  margin-left: 3px;
  margin-right: 3px;
}

.pick_face07 {
  background-color: #301d15;
  background-image: url('../images/face07_preview.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  border: 2px #bd8153;
  border-radius: 6px;
  width: 50px;
  height: 50px;
  margin-left: 3px;
  margin-right: 3px;
}

.pick_face08 {
  background-color: #301d15;
  background-image: url('../images/face08_preview.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  border: 2px #bd8153;
  border-radius: 6px;
  width: 50px;
  height: 50px;
  margin-left: 3px;
  margin-right: 3px;
}

.pick_face09 {
  background-color: #301d15;
  background-image: url('../images/face09_preview.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  border: 2px #bd8153;
  border-radius: 6px;
  width: 50px;
  height: 50px;
  margin-left: 3px;
  margin-right: 3px;
}

.block_hair {
  background-color: #000;
  border-radius: 0;
  flex-flow: column;
  width: 600px;
  height: 600px;
  padding: 3px;
  display: none;
  position: relative;
}

.pick_hair02 {
  background-color: #301d15;
  background-image: url('../images/hair02_preview.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  border: 2px #bd8153;
  border-radius: 6px;
  width: 50px;
  height: 50px;
  margin-left: 3px;
  margin-right: 3px;
}

.pick_hair03 {
  background-color: #301d15;
  background-image: url('../images/hair03_preview.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  border: 2px #bd8153;
  border-radius: 6px;
  width: 50px;
  height: 50px;
  margin-left: 3px;
  margin-right: 3px;
}

.pick_hair04 {
  background-color: #301d15;
  background-image: url('../images/hair04_preview.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  border: 2px #bd8153;
  border-radius: 6px;
  width: 50px;
  height: 50px;
  margin-left: 3px;
  margin-right: 3px;
}

.pick_hair05 {
  background-color: #301d15;
  background-image: url('../images/hair05_preview.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  border: 2px #bd8153;
  border-radius: 6px;
  width: 50px;
  height: 50px;
  margin-left: 3px;
  margin-right: 3px;
}

.pick_hair06 {
  background-color: #301d15;
  background-image: url('../images/hair06_preview.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  border: 2px #bd8153;
  border-radius: 6px;
  width: 50px;
  height: 50px;
  margin-left: 3px;
  margin-right: 3px;
}

.pick_hair07 {
  background-color: #301d15;
  background-image: url('../images/hair07_preview.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  border: 2px #bd8153;
  border-radius: 6px;
  width: 50px;
  height: 50px;
  margin-left: 3px;
  margin-right: 3px;
}

.pick_hair08 {
  background-color: #301d15;
  background-image: url('../images/hair08_preview.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  border: 2px #bd8153;
  border-radius: 6px;
  width: 50px;
  height: 50px;
  margin-left: 3px;
  margin-right: 3px;
}

.pick_hair09 {
  background-color: #301d15;
  background-image: url('../images/hair09_preview.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  border: 2px #bd8153;
  border-radius: 6px;
  width: 50px;
  height: 50px;
  margin-left: 3px;
  margin-right: 3px;
}

.d {
  background-color: #301d15;
  border: 2px #bd8153;
  border-radius: 6px;
  width: 50px;
  height: 50px;
  margin-left: 3px;
  margin-right: 3px;
}

.block_accessory {
  background-color: #000;
  border-radius: 0;
  flex-flow: column;
  width: 600px;
  height: 600px;
  padding: 3px;
  display: none;
  position: relative;
}

.button_previous {
  color: #671800;
  background-color: #ee7032;
  border: 5px solid #000;
  border-width: 2px 5px 5px 2px;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 60px;
  margin-left: 5px;
  margin-right: 5px;
  font-family: Goodland, Impact, sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 28px;
  display: flex;
}

.button_previous:hover {
  background-color: #ffb20a;
}

.pick_bg02 {
  background-color: #301d15;
  background-image: url('../images/bg02_preview.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 90%;
  border: 2px #bd8153;
  border-radius: 6px;
  width: 50px;
  height: 50px;
  margin-left: 3px;
  margin-right: 3px;
}

.pick_bg03 {
  background-color: #301d15;
  background-image: url('../images/bg03_preview.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 90%;
  border: 2px #bd8153;
  border-radius: 6px;
  width: 50px;
  height: 50px;
  margin-left: 3px;
  margin-right: 3px;
}

.pick_bg04 {
  background-color: #301d15;
  background-image: url('../images/bg04_preview.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 90%;
  border: 2px #bd8153;
  border-radius: 6px;
  width: 50px;
  height: 50px;
  margin-left: 3px;
  margin-right: 3px;
}

.pick_bg_none, .pick_hair_none, .pick_mask_none {
  background-color: #301d15;
  background-image: url('../images/none.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  border: 2px #bd8153;
  border-radius: 6px;
  width: 50px;
  height: 50px;
  margin-left: 3px;
  margin-right: 3px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Base transition for all pick buttons */
[class^="pick_"] {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover effects for all pick buttons */
[class^="pick_"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.pick_bg_none:hover, .pick_hair_none:hover, .pick_mask_none:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.outfit01, .face01, .hair02, .bg02 {
  height: 100%;
  margin-bottom: 0;
  position: absolute;
}

.block_custom {
  background-color: #000;
  border-radius: 0;
  flex-flow: column;
  width: 600px;
  height: 600px;
  padding: 3px;
  display: flex;
  position: relative;
}

.custom_welcome {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-bottom: 0;
  padding: 25px;
  display: flex;
  position: relative;
}

.block_intro {
  background-color: #482a1d;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-left: 30px;
  padding-right: 30px;
  display: flex;
}

.button_create {
  color: #671800;
  text-align: center;
  background-color: #ee7032;
  border: 5px solid #000;
  border-width: 2px 5px 5px 2px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60px;
  margin-left: 5px;
  margin-right: 5px;
  font-family: Goodland, Impact, sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 28px;
  display: flex;
}

.button_create:hover {
  background-color: #ffb20a;
}

.button_close_search {
  color: #671800;
  text-align: center;
  background-color: #ee7032;
  border: 5px solid #000;
  border-width: 2px 5px 5px 2px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60px;
  margin-left: 5px;
  margin-right: 5px;
  font-family: Goodland, Impact, sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 28px;
  display: flex;
}

.button_close_search:hover {
  background-color: #ffb20a;
}

.intro_para {
  color: #ffd49b;
  text-align: center;
  margin-bottom: 0;
  font-family: Goodland, Impact, sans-serif;
  font-size: 35px;
  line-height: 40px;
}

.vegeta {
  background-image: url('../images/vegeta.jpg');
  background-position: 50% 47%;
  background-repeat: no-repeat;
  background-size: auto;
  border: 3px solid #000;
  width: 100%;
  height: 200px;
  margin-bottom: 40px;
}

.logo {
  height: 100%;
}

.section_discover {
  z-index: 1000;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  background-color: #2e1509c4;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  inset: 0%;
}

.block_discover {
  background-color: #000;
  border-radius: 0;
  flex-flow: column;
  width: 600px;
  height: 600px;
  padding: 3px;
  display: flex;
  position: relative;
}

.text-block {
  color: #ffd49b;
  font-family: Goodland, Impact, sans-serif;
  font-size: 35px;
  font-weight: 500;
  line-height: 40px;
}

.found_title {
  color: #ffd49b;
  text-align: center;
  margin-bottom: 0;
  font-family: Goodland, Impact, sans-serif;
  font-size: 35px;
  line-height: 40px;
}

.found_item {
  background-color: #381d12;
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  width: 180px;
  height: 180px;
  display: flex;
}

.block_found_amount {
  background-color: #301a11;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 65px;
  display: flex;
}

.block_found {
  background-color: #5f4335;
  border: 2px solid #bd8153;
  flex: auto;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40px;
  margin-top: 3px;
  display: flex;
}

.block_found_in {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-bottom: 0;
  padding: 25px;
  display: flex;
  position: relative;
}

.block_airdrop {
  background-color: #482a1d;
  flex-flow: column;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-left: 30px;
  padding-right: 30px;
  display: none;
}

.prize {
  color: #ffd49b;
  text-align: center;
  font-family: Goodland, Impact, sans-serif;
  font-size: 30px;
  line-height: 30px;
}

.block_bnb {
  background-color: #482a1d;
  flex-flow: column;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-left: 30px;
  padding-right: 30px;
  display: none;
}

.bnb {
  height: 70%;
}

.block_dragonball {
  background-color: #482a1d;
  flex-flow: column;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-left: 30px;
  padding-right: 30px;
  display: flex;
}

.block_nothing {
  background-color: #482a1d;
  flex-flow: column;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-left: 30px;
  padding-right: 30px;
  display: flex;
}

.dragonball {
  height: 70%;
}

.nothing {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}

.menu_link {
  color: #fff;
  background-color: #0000;
  margin-left: 30px;
  margin-right: 30px;
  padding: 0;
  font-family: Goodland, Impact, sans-serif;
  font-size: 30px;
  font-weight: 500;
  line-height: 30px;
}

.menu_link:hover {
  color: #ffe764;
}

.button_leaderboard {
  color: #671800;
  background-color: #ee7032;
  border: 5px solid #000;
  border-width: 2px 5px 5px 2px;
  justify-content: center;
  align-items: center;
  width: 180px;
  height: 60px;
  padding-bottom: 12px;
  font-family: Goodland, Impact, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 22px;
  display: none;
}

.button_leaderboard:hover {
  background-color: #ffb20a;
}

.menu_mobile {
  display: none;
}

.profile_mobile {
  display: none;
}

.section_rules {
  z-index: 1000;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  background-color: #2e1509c4;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  inset: 0%;
}

.rules_para {
  color: #ffd49b;
  text-align: center;
  margin-bottom: 30px;
  font-family: Goodland, Impact, sans-serif;
  font-size: 30px;
  line-height: 35px;
}

.block_rules {
  background-color: #000;
  border-radius: 0;
  flex-flow: column;
  width: 600px;
  height: auto;
  padding: 3px;
  display: flex;
  position: relative;
}

.block_rules_in {
  background-color: #5f4335;
  border: 2px solid #bd8153;
  flex: auto;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  margin-top: 3px;
  display: flex;
}

.block_rules_details {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  margin-bottom: 0;
  padding: 25px;
  display: flex;
  position: relative;
}

.rules {
  background-color: #482a1d;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  padding: 30px;
  display: flex;
}

.block_details {
  background-color: #311b11;
  border-radius: 7px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60px;
  margin-bottom: 15px;
  display: flex;
}

.h3 {
  color: #ffd49b;
  font-family: Goodland, Impact, sans-serif;
  font-size: 25px;
  line-height: 25px;
}

.tier_amount, .tier1_amount-copy {
  color: #ffd49b;
  margin-left: 15px;
  margin-right: 15px;
  font-family: Goodland, Impact, sans-serif;
  font-size: 25px;
  line-height: 25px;
}

.button_close {
  color: #671800;
  text-align: center;
  background-color: #ee7032;
  border: 5px solid #000;
  border-width: 2px 5px 5px 2px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60px;
  margin-left: 5px;
  margin-right: 5px;
  font-family: Goodland, Impact, sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 28px;
  display: flex;
}

.button_close:hover {
  background-color: #ffb20a;
}

.block_title_2 {
  background-color: #ee7032;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40px;
  display: flex;
}

.section_prizes {
  z-index: 1000;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  background-color: #2e1509c4;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  inset: 0%;
}

.block_prizes {
  background-color: #000;
  border-radius: 0;
  flex-flow: column;
  width: 600px;
  height: auto;
  padding: 3px;
  display: flex;
  position: relative;
}

.block_prizes_in {
  background-color: #5f4335;
  border: 2px solid #bd8153;
  flex: auto;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  margin-top: 3px;
  display: flex;
}

.block_prizes_details {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  margin-bottom: 0;
  padding: 25px;
  display: flex;
  position: relative;
}

.prizes {
  background-color: #482a1d;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  padding: 30px 30px 15px;
  display: flex;
}

.prize_gold {
  background-color: #ffbd2d;
  border: 2px solid #fff3d7;
  border-radius: 7px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 60px;
  margin-bottom: 15px;
  display: flex;
}

.h4 {
  color: #2c2c2c;
  font-family: Goodland, Impact, sans-serif;
  font-size: 25px;
  font-weight: 600;
  line-height: 25px;
}

.h5 {
  color: #ffd49b;
  font-family: Goodland, Impact, sans-serif;
  font-size: 25px;
  line-height: 25px;
}

.block_next {
  justify-content: center;
  align-items: center;
  width: 600px;
  margin-top: 10px;
  display: flex;
  position: absolute;
  inset: auto 0% -12%;
}

.block_final {
  background-color: #000;
  border-radius: 0;
  flex-flow: column;
  width: 600px;
  height: 600px;
  padding: 3px;
  display: none;
  position: relative;
}

.final_pfp {
  pointer-events: none;
  width: auto;
  height: 100%;
  margin-bottom: 0;
  position: relative;
}

.block_continue_rules {
  justify-content: center;
  align-items: center;
  width: 600px;
  margin-top: 10px;
  display: flex;
  position: absolute;
  inset: auto 0% -9%;
}

.block_continue_prizes {
  justify-content: center;
  align-items: center;
  width: 600px;
  margin-top: 10px;
  display: flex;
  position: absolute;
  inset: auto 0% -8%;
}

.block_continue_found {
  justify-content: center;
  align-items: center;
  width: 600px;
  margin-top: 10px;
  display: flex;
  position: absolute;
  inset: auto 0% -11%;
}

.section_leaderboard_mobile {
  z-index: 1000;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  background-color: #2e1509c4;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  inset: 0%;
}

.block_continue_leaderboard {
  justify-content: center;
  align-items: center;
  width: 600px;
  margin-top: 10px;
  display: flex;
  position: absolute;
  inset: auto 0% -8%;
}

.section_menu_mobile {
  z-index: 1000;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  background-color: #2e1509c4;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  inset: 0%;
}

.section_profile_mobile {
  z-index: 1000;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  background-color: #2e1509c4;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  inset: 0%;
}

.menu_link_moobile {
  background-color: #0000;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 0;
  font-family: Goodland, Impact, sans-serif;
  font-size: 75px;
  font-weight: 700;
  line-height: 75px;
}

.close_mobile {
  display: none;
}

.block_mask {
  background-color: #000;
  border-radius: 0;
  flex-flow: column;
  width: 600px;
  height: 600px;
  padding: 3px;
  display: none;
  position: relative;
}

.pick_mask02 {
  background-color: #301d15;
  background-image: url('../images/mask02_preview.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 90%;
  border: 2px #bd8153;
  border-radius: 6px;
  width: 50px;
  height: 50px;
  margin-left: 3px;
  margin-right: 3px;
}

.mask02 {
  height: 100%;
  position: absolute;
}

.button_confirm {
  color: #671800;
  background-color: #ee7032;
  border: 5px solid #000;
  border-width: 2px 5px 5px 2px;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 60px;
  margin-left: 5px;
  margin-right: 5px;
  font-family: Goodland, Impact, sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 28px;
  display: flex;
}

.button_confirm:hover {
  background-color: #ffb20a;
}

.confirm {
  color: #671800;
  background-color: #ee7032;
  border: 5px solid #000;
  border-width: 2px 5px 5px 2px;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 60px;
  margin-left: 5px;
  margin-right: 5px;
  font-family: Goodland, Impact, sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 28px;
  display: flex;
}

.confirm:hover {
  background-color: #ffb20a;
}

.button_download {
  color: #671800;
  background-color: #ee7032;
  border: 5px solid #000;
  border-width: 2px 5px 5px 2px;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 60px;
  margin-left: 5px;
  margin-right: 5px;
  font-family: Goodland, Impact, sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 28px;
  display: flex;
}

.button_download:hover {
  background-color: #ffb20a;
}

@media screen and (min-width: 1280px) {
  .wrapper {
    background-image: url('../images/bg_blurred.jpg');
    background-position: 50%;
    background-size: cover;
  }

  .block_main {
    margin-top: -50px;
    padding-left: 25px;
    padding-right: 25px;
  }

  .radar {
    width: 100%;
    height: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .block_balls {
    margin-bottom: 50px;
  }

  .block_ball {
    width: 135px;
    max-width: none;
    height: 135px;
    margin-left: 10px;
    margin-right: 10px;
    padding: 9px;
  }

  .block_leaderboard {
    width: 400px;
    height: 430px;
  }

  .header {
    width: 100%;
    height: auto;
    margin-top: 50px;
    padding-left: 50px;
    padding-right: 50px;
  }

  .header_name {
    width: 180px;
    height: 60px;
  }

  .connect {
    width: 180px;
    height: 60px;
    padding: 0 0 3px;
    font-weight: 600;
  }

  .connect:hover {
    background-color: #ffb20a;
  }

  .dk {
    width: 400px;
    height: 500px;
  }

  .block_button {
    margin-top: 50px;
  }

  .button_search {
    background-color: #ee7032;
  }

  .button_search:hover {
    background-color: #ffb20a;
  }

  .block_radar {
    width: 450px;
    height: 450px;
    margin-left: 50px;
    margin-right: 50px;
  }

  .block_title {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .leaderboard_in {
    height: 52px;
  }

  .h1 {
    color: #000;
    font-family: Goodland, Impact, sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 22px;
  }

  .block_user_stats {
    justify-content: center;
    align-items: center;
    width: 95%;
    display: flex;
    position: relative;
  }

  .block_pfp {
    height: 166%;
    margin-left: 13px;
    position: absolute;
    inset: auto auto 0% 0%;
  }

  .pfp {
    display: none;
  }

  .section_character {
    z-index: 1000;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: none;
    position: fixed;
    inset: 0%;
  }

  .block_outfit {
    width: 650px;
    height: 650px;
  }

  .block_continue {
    width: 650px;
  }

  .button_next {
    background-color: #ee7032;
  }

  .block_face, .block_hair, .block_accessory {
    width: 650px;
    height: 650px;
  }

  .button_previous {
    background-color: #ee7032;
  }

  .block_custom {
    width: 650px;
    height: 650px;
  }

  .button_create {
    background-color: #ee7032;
  }

  .button_close_search {
    background-color: #ee7032;
  }

  .vegeta {
    background-size: 100%;
  }

  .section_discover {
    z-index: 1000;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: none;
    position: fixed;
    inset: 0%;
  }

  .block_discover {
    width: 650px;
    height: 650px;
  }

  .found_item {
    width: 250px;
    height: 250px;
  }

  .block_menu {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .menu_link {
    background-color: #0000;
    padding: 0;
  }

  .button_leaderboard {
    width: 180px;
    height: 60px;
    padding: 0 0 3px;
    font-weight: 600;
  }

  .button_leaderboard:hover {
    background-color: #ffb20a;
  }

  .section_rules {
    z-index: 1000;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: none;
    position: fixed;
    inset: 0%;
  }

  .block_rules {
    width: 650px;
    height: auto;
  }

  .rules {
    padding-bottom: 30px;
  }

  .button_close {
    background-color: #ee7032;
  }

  .block_title_2 {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .section_prizes {
    z-index: 1000;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: none;
    position: fixed;
    inset: 0%;
  }

  .block_prizes {
    width: 650px;
    height: auto;
  }

  .prizes {
    padding-bottom: 15px;
  }

  .block_next {
    width: 650px;
    bottom: -11%;
  }

  .block_final {
    width: 650px;
    height: 650px;
    display: none;
  }

  .block_continue_rules, .block_continue_prizes, .block_continue_found {
    width: 650px;
  }

  .section_leaderboard_mobile {
    z-index: 1000;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: none;
    position: fixed;
    inset: 0%;
  }

  .block_continue_leaderboard {
    width: 650px;
  }

  .section_menu_mobile {
    z-index: 1000;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: none;
    position: fixed;
    inset: 0%;
  }

  .block_mask {
    width: 650px;
    height: 650px;
  }

  .button_confirm, .confirm {
    background-color: #ee7032;
  }

  .button_download {
    background-color: #ee7032;
  }
}

@media screen and (max-width: 991px) {
  .radar {
    width: 100%;
    height: 100%;
  }

  .block_balls {
    margin-bottom: 25px;
  }

  .block_ball {
    width: 90px;
    height: 90px;
    margin-left: 7.5px;
    margin-right: 7.5px;
  }

  .block_leaderboard, .dk {
    display: none;
  }

  .section_profile_mobile .block_leaderboard {
    display: flex;
  }

  .section_profile_mobile .pfp {
    display: none;
  }

  .block_button {
    margin-top: 25px;
  }

  .block_radar {
    width: 450px;
    height: 450px;
    margin-left: 0;
    margin-right: 0;
  }

  .block_outfit, .block_face, .block_hair, .block_accessory {
    display: none;
  }

  .block_custom, .block_discover {
    display: flex;
  }

  .menu_link {
    margin-left: 15px;
    margin-right: 15px;
    font-size: 20px;
    line-height: 20px;
  }

  .button_leaderboard, .menu_mobile {
    display: none;
  }

  .block_rules, .block_prizes {
    display: flex;
  }

  .block_final, .close_mobile, .block_mask {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .radar {
    width: 100%;
    height: 100%;
  }

  .block_balls {
    flex-flow: wrap;
    margin-bottom: 118px;
  }

  .block_ball {
    width: 80px;
    height: 80px;
    margin-left: 5px;
    margin-right: 5px;
    padding: 5px;
  }

  .header {
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
  }

  .header_name {
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 80px;
    display: flex;
    position: relative;
  }

  .header_name .profile_mobile {
    position: absolute;
    right: 70px;
    top: 50%;
    transform: translateY(-50%);
  }

  .header_name .menu_mobile {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .connect {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .button_search {
    width: 180px;
    height: 50px;
  }

  .block_radar {
    width: 350px;
    height: 350px;
  }

  .ball {
    padding: 3px;
  }

  .block_outfit {
    width: 450px;
    height: 450px;
    display: none;
  }

  .pick_body01, .pick_body02, .pick_body03, .pick_body04, .pick_body05, .pick_body06, .pick_body07, .pick_body08, .pick_body09, .pick_body10 {
    width: 40px;
    height: 40px;
  }

  .block_continue {
    width: 450px;
    bottom: -13%;
  }

  .button_next {
    width: 180px;
    height: 50px;
  }

  .block_face, .block_hair {
    width: 450px;
    height: 450px;
    display: none;
  }

  .pick_hair02, .pick_hair03, .pick_hair04, .pick_hair05, .pick_hair06, .pick_hair07, .pick_hair08, .pick_hair09 {
    width: 45px;
    height: 45px;
  }

  .block_accessory {
    width: 450px;
    height: 450px;
    display: none;
  }

  .button_previous {
    width: 180px;
    height: 50px;
  }

  .pick_hair_none {
    width: 45px;
    height: 45px;
  }

  .block_custom {
    width: 450px;
    height: 450px;
    display: flex;
  }

  .button_create {
    width: 100%;
    height: 50px;
    font-size: 22px;
    line-height: 22px;
  }

  .button_close_search {
    width: 100%;
    height: 50px;
    font-size: 22px;
    line-height: 22px;
  }

  .loading_title {
    font-size: 35px;
    line-height: 40px;
    margin-bottom: 25px;
  }

  .suspense_text {
    font-size: 16px;
  }

  .block_loading_container {
    width: 450px;
    height: 380px;
  }

  .intro_para {
    font-size: 25px;
    line-height: 30px;
  }

  .vegeta {
    background-size: auto 141%;
    height: 140px;
    margin-bottom: 30px;
  }

  .block_discover {
    width: 450px;
    height: 450px;
    display: flex;
  }

  .found_title {
    font-size: 25px;
    line-height: 30px;
  }

  .found_item {
    width: 150px;
    height: 150px;
  }

  .block_found_amount {
    height: 50px;
  }

  .prize {
    font-size: 25px;
    line-height: 25px;
  }

  .block_menu {
    display: none;
  }

  .button_leaderboard {
    width: 100%;
    display: flex;
  }

  .menu_mobile {
    background-color: #ee7032;
    background-image: url('../images/menu_mobile.svg');
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: auto 80%;
    border: 5px solid #000;
    border-width: 2px 5px 5px 2px;
    width: 60px;
    height: 60px;
    display: flex;
  }

  .menu_mobile:hover {
    background-color: #ffb20a;
  }

  .profile_mobile {
    background-color: #ee7032;
    background-image: url('../images/profile_mobile.svg');
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: auto 80%;
    border: 5px solid #000;
    border-width: 2px 5px 5px 2px;
    width: 60px;
    height: 60px;
    display: flex;
  }

  .profile_mobile:hover {
    background-color: #ffb20a;
  }

  .rules_para {
    font-size: 22px;
    line-height: 30px;
  }

  .block_rules {
    width: 450px;
    height: auto;
    display: flex;
  }

  .block_rules_details {
    padding: 15px;
  }

  .rules {
    padding-left: 15px;
    padding-right: 15px;
  }

  .h3, .tier_amount {
    font-size: 18px;
    line-height: 18px;
  }

  .button_close {
    width: 100%;
    height: 50px;
    font-size: 22px;
    line-height: 22px;
  }

  .block_prizes {
    width: 450px;
    height: auto;
    display: flex;
  }

  .block_prizes_details {
    padding: 15px;
  }

  .prizes {
    padding: 10px;
  }

  .h4, .h5 {
    font-size: 25px;
    line-height: 25px;
  }

  .block_next {
    width: 450px;
    bottom: -13%;
  }

  .block_final {
    width: 450px;
    height: 450px;
    display: none;
  }

  .block_continue_rules {
    width: 450px;
    bottom: -9%;
  }

  .block_continue_prizes {
    width: 450px;
    bottom: -7%;
  }

  .block_continue_found {
    width: 450px;
    bottom: -13%;
  }

  .section_leaderboard_mobile {
    display: none;
  }

  .block_continue_leaderboard {
    width: 450px;
    bottom: -13%;
  }

  .section_menu_mobile {
    display: none;
  }

  .close_mobile {
    background-color: #ee7032;
    background-image: url('../images/menu_mobile.svg');
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: auto 80%;
    border: 5px solid #000;
    border-width: 2px 5px 5px 2px;
    width: 60px;
    height: 60px;
    display: flex;
  }

  .close_mobile:hover {
    background-color: #ffb20a;
  }

  .block_mask {
    width: 450px;
    height: 450px;
    display: none;
  }

  .button_confirm, .confirm {
    width: 180px;
    height: 50px;
  }

  .button_download {
    width: 180px;
    height: 50px;
  }
}

@media screen and (max-width: 479px) {
  .wrapper {
    background-position: 50%;
    justify-content: space-between;
    padding: 20px 10px;
  }

  .block_main {
    margin-top: 0;
    padding-left: 0;
    padding-right: 0;
    position: relative;
  }

  .radar {
    width: 100%;
    height: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .block_balls {
    flex-flow: wrap;
    width: 100%;
    margin: 0 0 75px;
    padding-left: 0;
    padding-right: 0;
    position: relative;
  }

  .block_ball {
    width: 65px;
    height: 65px;
    margin: 5px;
    padding: 3px;
  }

  .header {
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    margin-top: 0;
    padding-left: 0;
    padding-right: 0;
    position: relative;
  }

  .header_name {
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 55px;
    display: flex;
    position: relative;
  }

  .header_name .profile_mobile {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
  }

  .header_name .menu_mobile {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .connect {
    border-radius: 8px;
    width: 100%;
    height: 50px;
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 22px;
    line-height: 22px;
  }

  .block_center {
    width: 100%;
  }

  .block_button {
    margin-top: 15px;
  }

  .button_search {
    height: 40px;
    padding-bottom: 12px;
    font-size: 22px;
    line-height: 22px;
  }

  .block_radar {
    width: 300px;
    height: 300px;
    margin-left: 0;
    margin-right: 0;
  }

  .ball {
    padding: 2px;
  }

  .h1 {
    font-size: 18px;
    line-height: 18px;
  }

  .block_outfit {
    width: 300px;
    height: 300px;
    display: none;
  }

  .character, .base {
    margin-bottom: 0;
  }

  .block_selection {
    flex-flow: wrap;
    justify-content: center;
    height: 111px;
    bottom: 103%;
  }

  .block_continue {
    width: 100%;
    margin-top: 0;
    bottom: -19%;
  }

  .button_next {
    width: 150px;
    height: 45px;
    font-size: 20px;
    line-height: 20px;
  }

  .block_face, .block_hair, .block_accessory {
    width: 300px;
    height: 300px;
    display: none;
  }

  .button_previous {
    width: 150px;
    height: 45px;
    font-size: 20px;
    line-height: 20px;
  }

  .outfit01, .face01, .hair02 {
    margin-bottom: 0;
  }

  .block_custom {
    width: 300px;
    height: 350px;
    display: flex;
  }

  .custom_welcome {
    margin-bottom: 0;
    padding: 15px;
  }

  .block_intro {
    padding-left: 20px;
    padding-right: 20px;
  }

  .button_create {
    width: 100%;
    height: 45px;
    font-size: 20px;
    line-height: 20px;
  }

  .button_close_search {
    width: 100%;
    height: 45px;
    font-size: 20px;
    line-height: 20px;
  }

  .loading_title {
    font-size: 28px;
    line-height: 32px;
    margin-bottom: 20px;
  }

  .suspense_text {
    font-size: 14px;
  }

  .loading_dots .dot {
    width: 12px;
    height: 12px;
  }

  .block_loading_container {
    width: 400px;
    height: 350px;
  }

  .intro_para {
    font-size: 18px;
    line-height: 28px;
  }

  .vegeta {
    background-size: auto 207%;
    height: 80px;
    margin-bottom: 20px;
  }

  .block_discover {
    width: 300px;
    height: 350px;
    display: flex;
  }

  .found_title {
    font-size: 18px;
    line-height: 28px;
  }

  .found_item {
    width: 120px;
    height: 120px;
  }

  .block_found_amount {
    border-radius: 4px;
    height: 35px;
  }

  .block_found_in {
    margin-bottom: 0;
    padding: 15px;
  }

  .block_airdrop {
    padding-left: 20px;
    padding-right: 20px;
  }

  .prize {
    font-size: 18px;
    line-height: 18px;
  }

  .block_bnb, .block_dragonball, .block_nothing {
    padding-left: 20px;
    padding-right: 20px;
  }

  .button_leaderboard {
    border-radius: 8px;
    width: 100%;
    height: 50px;
    margin-top: 5px;
    font-size: 22px;
    line-height: 22px;
  }

  .menu_mobile {
    background-color: #ee7032;
    background-image: url('../images/menu_mobile.svg');
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: auto 80%;
    border: 5px solid #000;
    border-width: 2px 5px 5px 2px;
    border-radius: 6px;
    width: 50px;
    height: 50px;
  }

  .menu_mobile:hover {
    background-color: #ffb20a;
  }

  .profile_mobile {
    background-color: #ee7032;
    background-image: url('../images/profile_mobile.svg');
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: auto 80%;
    border: 5px solid #000;
    border-width: 2px 5px 5px 2px;
    border-radius: 6px;
    width: 50px;
    height: 50px;
  }

  .profile_mobile:hover {
    background-color: #ffb20a;
  }

  .section_rules {
    display: none;
  }

  .rules_para {
    font-size: 18px;
    line-height: 28px;
  }

  .block_rules {
    width: 90%;
    height: auto;
    display: flex;
  }

  .block_rules_details {
    margin-bottom: 0;
    padding: 15px 10px;
  }

  .rules {
    padding-bottom: 15px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .block_details {
    height: 40px;
    padding-left: 5px;
    padding-right: 5px;
  }

  .h3 {
    font-size: 14px;
    line-height: 14px;
  }

  .tier_amount {
    font-size: 16px;
    line-height: 16px;
  }

  .button_close {
    width: 100%;
    height: 45px;
    font-size: 20px;
    line-height: 20px;
  }

  .section_prizes {
    display: none;
  }

  .block_prizes {
    width: 90%;
    height: auto;
    display: flex;
  }

  .block_prizes_details {
    margin-bottom: 0;
    padding: 15px 10px;
  }

  .prizes {
    padding-left: 10px;
    padding-right: 10px;
  }

  .prize_gold {
    height: 40px;
    padding-left: 5px;
    padding-right: 5px;
  }

  .h4 {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    line-height: 20px;
  }

  .h5 {
    text-align: center;
    font-size: 20px;
    line-height: 20px;
  }

  .block_next {
    width: 100%;
    margin-top: 0;
    bottom: -16%;
  }

  .block_final {
    width: 300px;
    height: 300px;
    display: none;
  }

  .final_pfp {
    margin-bottom: 0;
  }

  .block_continue_rules, .block_continue_prizes {
    width: 100%;
    margin-top: 0;
    bottom: -8%;
  }

  .block_continue_found {
    width: 100%;
    margin-top: 0;
    bottom: -15%;
  }

  .section_leaderboard_mobile {
    display: none;
  }

  .block_continue_leaderboard {
    width: 100%;
    margin-top: 0;
    bottom: -12%;
  }

  .section_menu_mobile {
    display: none;
  }

  .menu_link_moobile {
    text-align: center;
    font-size: 50px;
    line-height: 50px;
  }

  .close_mobile {
    background-color: #ee7032;
    background-image: url('../images/close_white.svg');
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: auto 80%;
    border: 5px solid #000;
    border-width: 2px 5px 5px 2px;
    border-radius: 6px;
    width: 50px;
    height: 50px;
    margin-top: 15px;
  }

  .close_mobile:hover {
    background-color: #ffb20a;
  }

  .block_mask {
    width: 300px;
    height: 300px;
    display: none;
  }

  .button_confirm, .confirm {
    width: 150px;
    height: 45px;
    font-size: 20px;
    line-height: 20px;
  }

  .button_download {
    width: 150px;
    height: 45px;
    font-size: 20px;
    line-height: 20px;
  }
}


@font-face {
  font-family: 'Goodland';
  src: url('../fonts/Goodland-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Goodland';
  src: url('../fonts/Goodland-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Goodland';
  src: url('../fonts/Goodland-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Goodland';
  src: url('../fonts/Goodland-UltraBold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}