/*
sass --watch scss/Main.scss:main.css
*/
#background_img {
  image-rendering: pixelated;
  position: absolute;
  height: 100%;
  margin: auto;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}

#background_shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

#main_columns {
  position: absolute;
  display: grid;
  grid-template-columns: 25% auto 25%;
  grid-gap: 5%;
  width: 100%;
  height: 100%;
}

#left_bar {
  display: grid;
  width: 100%;
}

#right_bar {
  display: grid;
  grid-template-rows: auto auto 1fr;
  grid-gap: 2%;
}

.bottom_texts {
  color: #ffffff;
  font-size: 1.2vw;
  align-self: end;
  user-select: none;
  cursor: pointer;
  bottom: 1vw;
}

#partners_credits_cont {
  position: absolute;
  left: 2vw;
}

#title_cont {
  display: grid;
  grid-gap: 1vw;
  justify-items: center;
}

#new_character_continue_cont {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 6%;
  justify-items: center;
  width: 100%;
  user-select: none;
}

#title_img {
  width: 100%;
  padding-top: 6px;
  user-select: none;
}

.title_button_unselected {
  display: grid;
  justify-items: center;
  align-items: center;
  width: 100%;
  height: 2vw;
  font-size: 1vw;
  color: #ffffff;
  background-color: #ac3232;
  border: #ffffff solid 0.3vw;
  cursor: pointer;
}
.title_button_unselected:hover {
  filter: brightness(150%);
  transform: scale(1.1);
}

.title_button_selected {
  display: grid;
  justify-items: center;
  align-items: center;
  width: 100%;
  height: 2vw;
  font-size: 1vw;
  color: #ffffff;
  background-color: #d95763;
  border: #ffffff solid 0.3vw;
}

#play_inputs_cont {
  position: relative;
  display: grid;
  justify-items: center;
  width: 100%;
  height: 3.5vw;
}

.home_input {
  width: 100%;
  margin-bottom: 14px;
  padding-top: 6px;
  padding-bottom: 6px;
  background-color: #ffffff;
  cursor: pointer;
  text-align: center;
  color: #222034;
  font-size: 1.5vw;
  font-weight: bold;
  font-family: "Press Start 2P", cursive;
  letter-spacing: 0.1em;
  border: #ffffff solid 0.3vw;
}
.home_input:hover {
  font-size: 1.6vw;
  transform: scale(1.05);
}

#show_password {
  visibility: hidden;
  position: absolute;
  width: 2.9vw;
  padding: 0.3vw;
  left: -50px;
  cursor: pointer;
  user-select: none;
}
#show_password:hover {
  filter: brightness(150%);
  transform: scale(1.2);
}

.show_password_active {
  background-color: #ffffff;
}

.show_password_inactive {
  background-color: #222034;
}

#center_button {
  width: 100%;
  height: 70%;
  margin-top: 1vw;
}

#antisocial_bar {
  padding-top: 8px;
  display: grid;
  grid-template-columns: repeat(4, 20%);
  grid-gap: 5%;
  user-select: none;
}

.antisocial_button {
  display: grid;
  border: #ffffff solid 0.3vw;
  width: 4vw;
  height: 4vw;
  cursor: pointer;
}
.antisocial_button:hover {
  filter: brightness(150%);
  transform: scale(1.1);
}

.antisocial_icon {
  width: 80%;
  align-self: center;
  justify-self: center;
}

#notdiscord_button {
  background-color: #7289da;
}

#notreddit_button {
  background-color: #ff3f18;
}

#notfacebook_button {
  background-color: #4267b2;
}

#notwiki_button {
  background-color: #002a32;
}

#news_cont {
  width: 91%;
  display: grid;
  justify-items: center;
  text-align: center;
  color: #ffffff;
  background-color: #222034;
  font-weight: bold;
  padding-bottom: 1vw;
  user-select: none;
  cursor: pointer;
  border: #ffffff solid 0.3vw;
}
#news_cont:hover {
  filter: brightness(110%);
  transform: scale(1.05);
}

#news_header {
  margin: 0;
  padding: 10px;
  font-size: 2vw;
}

#news_date {
  margin: 0;
  font-size: 1.5vw;
}

#news_title {
  font-size: 1.5vw;
}

#news_image {
  width: 90%;
  user-select: none;
}

#language_cont {
  position: absolute;
  right: 2vw;
}

#language_list {
  position: absolute;
  right: 2vw;
  bottom: 2vw;
  text-align: center;
  color: #ffffff;
  background-color: #222034;
  font-size: 1vw;
  margin: 0;
  padding: 1vw;
  border: #ffffff 0.3vw solid;
  user-select: none;
}

.language_option {
  cursor: pointer;
  display: block;
  line-height: 2vw;
}
.language_option:hover {
  background-color: #222034;
  font-weight: bold;
  filter: brightness(150%);
  line-height: 2.5vw;
  border: #ffffff 0.3vw solid;
}

#center_text_cont {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  display: grid;
  align-content: center;
  justify-content: center;
  font-size: 3vw;
  text-align: center;
  user-select: none;
  color: #dadada;
  transform: translate(-50%, -50%);
}

.scale-up-center {
  -webkit-animation: scale-up-center 2s ease-out infinite alternate both;
  animation: scale-up-center 2s ease-out infinite alternate both;
}

@-webkit-keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
/*
#main_tooltip {
  position: absolute;
  width: 800px;
  max-width: 80%;
  top: 15%;
  left: 50%;
  padding: 20px;
  transform: translateX(-50%);
  text-align: center;
  color: $colourDB32VeryDarkPurple;
  background-color: $colourDB32WhiteOpacity80;
  visibility: hidden;
}
*/
/*
#warning_message {
  text-align: center;
  color: $colourDB32Red;
  background-color: $colourDB32White;
  font-size: 24px;
  font-weight: bold;
  padding: 10px;
  visibility: hidden;
}
}*/
/*
#controls {
  display: grid;
  grid-template-rows: 25% 25% 25% 25%;
  grid-template-columns: 50% 50%;
  align-items: center;
  justify-items: center;
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  height: 48%;
  text-align: center;
  color: $colourDB32White;
  font-weight: bold;
  font-size: 18px;
  user-select: none;
}*/
/*
.controls_image {
  transform: scale(4);
}*/
/*
#credits {
  position: absolute;
  bottom: 0;
  right: 30px;
  height: 5%;
  background-color: $colourDB32White;
  padding: 6px;
  line-height: 5vh;
  user-select: none;
  &:hover {
    transform: scale(1.1);
    filter: brightness(110%);
  }
}*/
/*
#partners_button {
    position: absolute;
    bottom: 0;
    left: 30px;
    height: 5%;
    background-color: $colourDB32White;
    padding: 6px;
    line-height: 5vh;
    user-select: none;
    &:hover {
        transform: scale(1.1);
        filter: brightness(110%);
    }
}*/
#partners_cont {
  position: absolute;
  overflow: auto;
  display: inline-block;
  text-align: center;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: 85%;
  background-color: #222034;
  border: #ffffff 0.3vw solid;
  user-select: none;
  visibility: hidden;
}

#partners_close {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 13px;
  font-size: 2vw;
  background-color: #ffffff;
  cursor: pointer;
}
#partners_close:hover {
  background-color: #222034;
  color: #ffffff;
}

#partners_header {
  background-color: #ffffff;
  color: #222034;
  padding: 24px;
  font-size: 1.5vw;
  font-weight: bold;
}

#iogames_space_logo {
  width: 75%;
  padding: 20px;
}

#crazy_games_logo {
  width: 80%;
  padding: 20px;
}

#x1p_logo {
  width: 35%;
  padding: 20px;
}

.gui_zoomable {
  zoom: 1;
  -moz-transform: scale(1);
  -moz-transform-origin: 0 0;
}

#gui_cont {
  position: absolute;
  width: 100%;
  height: 100%;
  visibility: hidden;
  pointer-events: none;
}

#chat_input {
  position: absolute;
  width: 30%;
  height: 40px;
  top: 30%;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  color: #3f3f74;
  background-color: rgba(255, 255, 255, 0.8);
  font-size: 20px;
  font-weight: bold;
  font-family: "Press Start 2P", cursive;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-align: center;
  visibility: hidden;
}

.normal_cursor {
  cursor: url(./assets/img/gui/hud/normal-cursor.png), auto;
}

.hand_cursor {
  cursor: url(./assets/img/gui/hud/hand-cursor.png) 8 0, auto;
}

.attack_cursor {
  cursor: url(./assets/img/gui/hud/attack-cursor.png), auto;
}

.gui_icon {
  width: 34px;
  height: 34px;
  padding: 4px;
  pointer-events: auto;
  user-select: none;
}
.gui_icon:hover {
  -webkit-filter: brightness(150%);
  transform: scale(1.2);
}

.inline_cont {
  display: flex;
  user-select: none;
}

.text_counter {
  position: relative;
  top: 8px;
  height: 30px;
  display: flex;
  justify-content: left;
  align-items: center;
  padding-left: 10px;
  user-select: none;
  font-size: 24px;
  font-weight: bold;
  color: #ffffff;
  -webkit-text-stroke: 1px #222034;
}

.text_counter_transition {
  visibility: hidden;
  animation-delay: 3s;
  animation-duration: 2s;
  animation-timing-function: ease-in;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
#top_left_corner_cont {
  position: absolute;
  display: block;
  top: 10px;
  left: 10px;
  pointer-events: none;
  transform-origin: top left;
}

.gui_counter_icon {
  width: 16px;
  height: 16px;
  padding: 1px;
  margin-top: 12px;
  pointer-events: auto;
}

#top_right_corner_cont {
  position: absolute;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  top: 10px;
  right: 10px;
  float: right;
  pointer-events: none;
  transform-origin: top right;
}

#bottom_left_corner_cont {
  position: absolute;
  display: block;
  bottom: 10px;
  left: 10px;
  pointer-events: none;
  transform-origin: bottom left;
}

#bottom_right_corner_cont {
  position: absolute;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  bottom: 10px;
  right: 10px;
  float: right;
  pointer-events: none;
  transform-origin: bottom right;
}

#hp_energy_bars_cont {
  position: absolute;
  left: 50%;
  bottom: 80px;
  transform: translateX(-50%);
}

#audio_counter, #gui_zoom_counter {
  position: relative;
  top: 8px;
  left: -8px;
  width: 90px;
  visibility: hidden;
}

#fullscreen_icon, #virtual_dpad_icon {
  opacity: 0.5;
  visibility: hidden;
}

#inventory_icon {
  position: absolute;
  bottom: 10px;
  right: 50px;
}

#dungeon_timer_cont {
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  text-align: center;
  user-select: none;
  font-weight: bold;
  color: #ffffff;
  font-size: 20px;
  -webkit-text-stroke: 1px #222034;
}

#dungeon_timer_value {
  font-size: 30px;
}

#dungeon_keys_cont {
  position: absolute;
  left: 50%;
  top: 70px;
  transform: translateX(-50%);
  text-align: center;
  user-select: none;
  font-weight: bold;
  color: #ffffff;
  font-size: 20px;
  -webkit-text-stroke: 1px #222034;
}

#dungeon_keys_list {
  display: inline-flex;
  background-color: #ffffff40;
  border: 2px black solid;
  padding: 4px;
}

.dungeon_key_icon {
  width: 48px;
  height: 48px;
}

#stats_panel {
  visibility: hidden;
}

#stats_inner_cont {
  height: 100%;
  display: grid;
  grid-template-columns: 32% 2% auto;
}

#stat_icons_cont {
  background-color: rgba(132, 126, 135, 0.8);
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: repeat(5, 20%);
  align-items: center;
  justify-items: center;
  padding: 26px 10px 5px 15px;
}

.stat_icon_cont_cont {
  height: 100%;
  width: 83%;
}

.stat_icon_cont {
  display: grid;
  align-items: center;
  justify-items: center;
  height: 70%;
  border: 6px solid #222034;
  text-align: center;
  background-color: #ffffff;
  cursor: url(./assets/img/gui/hud/hand-cursor.png) 8 0, auto;
}
.stat_icon_cont:hover {
  filter: brightness(150%);
  transform: scale(1.2);
}

.stat_icon {
  height: 100%;
}

#stat_info_cont {
  text-align: center;
  width: 100%;
  padding-top: 18px;
  background-color: rgba(155, 173, 183, 0.8);
}

#stat_name {
  font-weight: bolder;
  font-size: 28px;
}

#stat_description {
  padding-left: 10px;
  padding-right: 10px;
}

#stat_level_counter {
  font-weight: bold;
  font-size: 22px;
  padding-top: 10px;
}

#stat_exp_counter {
  font-weight: bold;
  padding: 10px;
}

.stat_info_text {
  font-size: 13px;
  color: #222034;
}

.generic_tooltip {
  color: #ffffff;
  text-align: center;
  background-color: #222034;
  line-height: 1.2;
  padding: 8px;
  z-index: 1000;
  visibility: hidden;
}

.top_left_tooltip {
  position: absolute;
  margin-top: 20px;
  margin-left: 40px;
  width: 400px;
}

.top_right_tooltip {
  position: absolute;
  margin-top: 20px;
  margin-right: 40px;
  width: 400px;
  right: 0px;
}

.bottom_right_tooltip {
  position: absolute;
  margin-top: 20px;
  margin-right: 40px;
  width: 400px;
  right: 0px;
  transform: translateY(-100%);
}

#hitpoint_cont {
  position: relative;
}

#hitpoint_tooltip {
  bottom: 0;
  margin-top: 0;
  margin-bottom: 20px;
}

#energy_cont {
  position: relative;
}

#energy_tooltip {
  bottom: 0;
  margin-top: 0;
  margin-bottom: 20px;
}

#inventory_tooltip {
  position: absolute;
  width: 50%;
  bottom: 50px;
  right: 50%;
  transform: translateX(50%);
  margin-bottom: 30px;
}

.panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  visibility: hidden;
}

.panel_header {
  position: relative;
}

.panel_name {
  height: 20px;
  width: 50%;
  float: left;
  text-align: center;
  font-size: 20px;
  padding: 4px 4px 12px 4px;
  font-weight: bold;
  font-family: "Press Start 2P";
  letter-spacing: 0.1em;
  color: #222034;
  background-color: rgba(255, 255, 255, 0.8);
  user-select: none;
}

.panel_tooltip {
  position: absolute;
  left: 270px;
  bottom: 0px;
  text-align: center;
  font-size: 26px;
  padding: 4px 12px 4px 12px;
  margin-bottom: 10px;
  font-family: "Press Start 2P";
  letter-spacing: 0.1em;
  color: #222034;
  background-color: rgba(255, 255, 255, 0.8);
  user-select: none;
  visibility: hidden;
}

#game_over_prompt {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  font-family: "Press Start 2P";
  letter-spacing: 0.1em;
  color: #3f3f74;
  padding: 10px;
  visibility: hidden;
}

#game_over {
  font-size: 40px;
  font-weight: bolder;
  padding: 10px;
}

#game_over_message {
  display: inline-block;
  font-size: 20px;
  font-weight: bold;
  padding: 10px;
}

#play_again_button {
  background-color: #37946e;
  left: 50%;
  margin: 16px;
  margin-left: 20%;
  margin-right: 20%;
  padding: 20px;
  font-weight: bolder;
  font-size: 40px;
  color: #ffffff;
}

#play_again_button:hover {
  background-color: #6abe30;
}

#inventory_bar {
  position: absolute;
  display: inline-grid;
  grid-template-columns: repeat(10, 56px);
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.inventory_slot {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  pointer-events: auto;
  user-select: none;
  cursor: url(./assets/img/gui/hud/hand-cursor.png) 8 0, auto;
}
.inventory_slot:hover {
  filter: brightness(120%);
  transform: scale(1.1);
}

.inventory_slot_border {
  position: absolute;
  width: 48px;
  height: 48px;
  pointer-events: none;
}

.inventory_slot_add_button {
  position: absolute;
  width: 48px;
  height: 48px;
  bottom: 54px;
  pointer-events: auto;
}
.inventory_slot_add_button:hover {
  filter: brightness(120%);
  transform: scale(1.1);
}

.inventory_slot_equipped {
  position: absolute;
  bottom: 44px;
  width: 48px;
  object-fit: contain;
  visibility: hidden;
  pointer-events: none;
}

.inventory_slot_durability {
  position: absolute;
  bottom: 6px;
  width: 48px;
  object-fit: contain;
  visibility: hidden;
  pointer-events: none;
}

.inventory_slot_icon {
  position: absolute;
  width: 48px;
  height: 48px;
  visibility: hidden;
  pointer-events: none;
}

#inventory_message {
  position: absolute;
  width: 100%;
  bottom: 150px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: 24px;
  color: #ffffff;
  background-color: #222034;
  padding: 10px;
  user-select: none;
}

#item_tooltip_cont {
  position: absolute;
  visibility: hidden;
  bottom: 146px;
  left: 50%;
  width: 75%;
  transform: translateX(-50%);
  text-align: center;
  color: #ffffff;
  background-color: #222034;
  padding: 8px;
  user-select: none;
  pointer-events: none;
}

#item_name {
  font-weight: bold;
  font-size: 20px;
}

#virtual_dpad {
  width: 100%;
  height: 100%;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}

#virtual_dpad_up {
  position: absolute;
  left: 50%;
  top: 25%;
  height: 10%;
  max-width: 20%;
  transform: translateX(-50%);
  pointer-events: auto;
}

#virtual_dpad_down {
  position: absolute;
  left: 50%;
  bottom: 25%;
  height: 10%;
  max-width: 20%;
  transform: translateX(-50%);
  pointer-events: auto;
}

#virtual_dpad_left {
  position: absolute;
  left: 25%;
  top: 50%;
  width: 10%;
  max-height: 20%;
  transform: translateY(-50%);
  pointer-events: auto;
}

#virtual_dpad_right {
  position: absolute;
  right: 25%;
  top: 50%;
  width: 10%;
  max-height: 20%;
  transform: translateY(-50%);
  pointer-events: auto;
}

.virtual_dpad_hover:hover {
  -webkit-filter: brightness(150%);
}

#crafting_panel {
  visibility: hidden;
}

#crafting_inner_cont {
  height: 80%;
  display: grid;
  grid-template-columns: repeat(7, auto);
  grid-template-rows: 50% 50%;
  align-items: center;
  justify-items: center;
  padding: 12px;
  padding-top: 33px;
}

#crafting_tooltip {
  visibility: hidden;
  position: absolute;
  max-width: 250px;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  background-color: #222034;
  padding: 6px;
  top: 0%;
  transform: translate(-100%, 0%);
  left: 0%;
}

.crafting_component_slot_cont {
  background-color: rgba(105, 106, 106, 0.5);
  width: 72%;
  border: 6px solid #222034;
}
.crafting_component_slot_cont:hover {
  transform: scale(1.1);
  filter: brightness(150%);
}

.crafting_component_slot_icon {
  visibility: hidden;
  width: 100%;
}

#crafting_arrow_icon {
  width: 100%;
}

.crafting_button {
  visibility: hidden;
  width: 75%;
  cursor: url(./assets/img/gui/hud/hand-cursor.png) 8 0, auto;
}
.crafting_button:hover {
  transform: scale(1.2);
  filter: brightness(150%);
}

#dungeon_panel {
  visibility: hidden;
}

#dungeon_inner_cont {
  height: 100%;
  display: grid;
  grid-template-rows: 11% 3% 15% 3% auto;
  text-align: center;
}

#dungeon_name {
  background-color: rgba(132, 126, 135, 0.8);
  height: 100%;
  width: 100%;
  display: grid;
  align-items: end;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
}

#dungeon_details_cont {
  display: grid;
  grid-template-columns: auto 3% auto 3% auto;
}

.dungeon_details_cont_item {
  background-color: rgba(155, 173, 183, 0.8);
  padding: 4px;
}

.dungeon_details_heading {
  font-weight: bold;
  font-size: 10px;
  align-self: end;
}

#dungeon_cost_cont {
  display: grid;
  grid-template-columns: 15% auto;
  align-items: center;
}

#dungeon_cost_icon {
  width: 100%;
  padding-left: 14px;
}

.dungeon_bottom_cont {
  position: relative;
  background-color: #222034;
}

.dungeon_create_button_cont {
  height: 100%;
  left: 50%;
  top: 50%;
  margin-top: 6px;
  user-select: none;
  cursor: url(./assets/img/gui/hud/hand-cursor.png) 8 0, auto;
}
.dungeon_create_button_cont:hover {
  filter: brightness(150%);
  transform: translate(-50%, -50%) scale(1.1);
}

#dungeon_create_button {
  height: 100%;
  left: 50%;
  top: 50%;
}

.dungeon_button_text {
  left: 50%;
  top: 50%;
  font-size: 16px;
  color: #222034;
}

#dungeon_party_selection_cont {
  display: grid;
  grid-template-rows: 6% auto 12%;
  background-color: rgba(155, 173, 183, 0.8);
  height: 100%;
}

#dungeon_parties_cont {
  overflow: auto;
  overflow-x: hidden;
}

#dungeon_party_cont {
  display: grid;
  grid-template-rows: 6% auto 12%;
  background-color: rgba(155, 173, 183, 0.8);
  height: 100%;
}

.dungeon_party_button_cont {
  position: relative;
  display: grid;
  align-items: center;
  justify-items: center;
  height: 100%;
  left: 50%;
  top: 50%;
  margin-top: 6px;
  transform: translate(-50%, -50%);
  user-select: none;
  cursor: url(./assets/img/gui/hud/hand-cursor.png) 8 0, auto;
}
.dungeon_party_button_cont:hover {
  filter: brightness(150%);
  transform: translate(-50%, -50%) scale(1.1);
}

.dungeon_party_button {
  height: 100%;
}

#dungeon_party_members {
  overflow: auto;
}

.dungeon_party_bottom_cont {
  position: relative;
  background-color: #222034;
  display: grid;
  grid-template-columns: 50% 50%;
}

.dungeon_party_button_text {
  position: absolute;
}

.dungeon_party_member_slot_cont {
  background-color: #222034;
  display: grid;
  grid-template-columns: 1fr auto;
  text-align: center;
  align-items: center;
  grid-gap: 4px;
  font-size: 14px;
  margin: 8px;
  border-width: 4px;
  border-style: solid;
  border-color: #222034;
}

.dungeon_party_kick_member_button_cont {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dungeon_party_kick_member_button {
  height: 100%;
  cursor: url(./assets/img/gui/hud/hand-cursor.png) 8 0, auto;
}
.dungeon_party_kick_member_button:hover {
  filter: brightness(150%);
  transform: scale(1.2);
}

.dungeon_party_slot_cont {
  cursor: url(./assets/img/gui/hud/hand-cursor.png) 8 0, auto;
  grid-gap: 0px;
}
.dungeon_party_slot_cont:hover {
  filter: brightness(150%);
  transform: scale(1.03);
}

#bank_panel {
  visibility: hidden;
}

#bank_tooltip {
  position: absolute;
  max-width: 250px;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  background-color: #222034;
  padding: 6px;
  top: 0%;
  transform: translate(-100%, 0%);
  left: 0%;
}

#bank_inner_cont {
  display: grid;
  height: 100%;
  grid-template-columns: 15% 2% auto;
}

#bank_tabs_cont {
  display: grid;
  grid-template-rows: repeat(4, 25%);
  justify-items: center;
  align-items: center;
  background-color: rgba(132, 126, 135, 0.8);
  padding-top: 40px;
}

.bank_tab_cont {
  position: relative;
  width: 100%;
  text-align: center;
}

.bank_tab_button {
  width: 70%;
  cursor: url(./assets/img/gui/hud/hand-cursor.png) 8 0, auto;
}
.bank_tab_button:hover {
  transform: scale(1.1);
  filter: brightness(150%);
}

#bank_contents {
  background-color: rgba(155, 173, 183, 0.5);
  display: grid;
  grid-template-columns: repeat(5, 20%);
  grid-template-rows: repeat(3, 33%);
  justify-items: center;
  align-items: center;
  padding: 12px;
}

.bank_slot_cont {
  height: 83%;
  background-color: #696a6a;
  border: 4px solid #222034;
  margin: 4px;
  pointer-events: auto;
  user-select: none;
  cursor: url(./assets/img/gui/hud/hand-cursor.png) 8 0, auto;
}
.bank_slot_cont:hover {
  transform: scale(1.1);
  filter: brightness(150%);
}

.bank_slot_icon {
  position: relative;
  width: 100%;
  pointer-events: none;
}

.bank_slot_durability {
  position: relative;
  bottom: 5px;
  width: 110%;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

#spell_bar {
  visibility: hidden;
  position: absolute;
  width: 400px;
  bottom: 200px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: auto;
}

#spell_slots_cont {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  align-items: center;
  justify-items: center;
}

#spell_tooltip {
  visibility: hidden;
  position: absolute;
  bottom: 40px;
  left: 50%;
  width: 120%;
  transform: translateX(-50%);
  text-align: center;
  color: #ffffff;
  background-color: #222034;
  padding: 8px;
  user-select: none;
  pointer-events: none;
}

#spell_tooltip_name {
  font-weight: bolder;
  font-size: 28px;
}

#spell_tooltip_description {
  padding-left: 10px;
  padding-right: 10px;
}

.spell_slot_cont {
  position: relative;
  width: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  cursor: url(./assets/img/gui/hud/hand-cursor.png) 8 0, auto;
}
.spell_slot_cont:hover {
  filter: brightness(150%);
  transform: scale(1.1);
}

.spell_slot_icon {
  position: absolute;
  width: 60%;
  user-select: none;
}

.spell_slot_border {
  position: absolute;
  width: 80%;
  user-select: none;
}

#account_panel {
  visibility: hidden;
}

#account_inner_cont {
  background-color: #222034;
  height: 100%;
  display: grid;
  grid-template-rows: 18% 16% 16% 16% auto;
  grid-template-columns: 100%;
  grid-gap: 12px;
  align-items: center;
  justify-items: center;
  text-align: center;
}

#account_top_info_cont {
  background-color: #9badb7;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.account_input {
  width: 80%;
  font-size: 16px;
  text-align: center;
  font-weight: bold;
  font-family: "Press Start 2P", cursive;
  letter-spacing: 0.1em;
  border: #000000 solid 4px;
  padding: 10px;
}
.account_input:hover {
  transform: scale(1.05);
}

.account_accept_button_cont {
  position: relative;
  height: 100%;
  width: 100%;
  cursor: url(./assets/img/gui/hud/hand-cursor.png) 8 0, auto;
}
.account_accept_button_cont:hover {
  filter: brightness(150%);
  transform: scale(1.1);
}

.account_accept_button_text {
  position: absolute;
  width: 57%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: bold;
  color: #222034;
}

.account_accept_button {
  height: 100%;
}

#account_warning_text {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  background-color: orange;
  border: 4px solid black;
  padding: 10px;
  font-size: 14px;
}

.account_input::-webkit-input-placeholder {
  font-size: 16px;
}

#create_account_game_panel {
  visibility: hidden;
}

#create_account_inner_cont {
  background-color: #222034;
  height: 100%;
  display: grid;
  grid-template-rows: 30% 15% 15% 13% auto;
  grid-template-columns: 100%;
  grid-gap: 12px;
  align-items: center;
  justify-items: center;
  text-align: center;
}

#create_account_top_info_cont {
  background-color: #9badb7;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.create_account_button_cont {
  position: relative;
  height: 100%;
  width: 100%;
  cursor: url(./assets/img/gui/hud/hand-cursor.png) 8 0, auto;
}
.create_account_button_cont:hover {
  filter: brightness(150%);
  transform: scale(1.1);
}

.create_account_button {
  height: 100%;
}

#create_account_bottom_info_cont {
  background-color: #d95763;
  width: 100%;
  height: 100%;
}

#create_account_warning_heading {
  padding-top: 6px;
  font-size: 22px;
  font-weight: bold;
}

#create_account_warning_text {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  background-color: orange;
  border: 4px solid black;
  padding: 10px;
  font-size: 14px;
}

.create_account_button_text {
  position: absolute;
  width: 57%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: bold;
  color: #222034;
}

.create_account_input {
  width: 80%;
  font-size: 16px;
  text-align: center;
  font-weight: bold;
  font-family: "Press Start 2P", cursive;
  letter-spacing: 0.1em;
  border: #000000 solid 4px;
  padding: 10px;
}
.create_account_input:hover {
  transform: scale(1.05);
}

.create_account_input::-webkit-input-placeholder {
  font-size: 16px;
}

#game_over_panel {
  visibility: hidden;
}

#game_over_inner_cont {
  background-color: #222034;
  height: 100%;
  display: grid;
  grid-template-rows: 60% auto;
  grid-gap: 12px;
  text-align: center;
}

#game_over_main_cont {
  background-color: #d95763;
  height: 100%;
  display: grid;
  align-items: center;
}

#game_over_info {
  font-size: 14px;
  font-weight: bold;
  padding: 10px;
}

#game_over_bottom_cont {
  position: relative;
}

#game_over_button_cont {
  height: 80%;
  left: 50%;
  top: 50%;
  user-select: none;
  cursor: url(./assets/img/gui/hud/hand-cursor.png) 8 0, auto;
}
#game_over_button_cont:hover {
  filter: brightness(150%);
  transform: translate(-50%, -50%) scale(1.1);
}

#game_over_button {
  height: 100%;
  left: 50%;
  top: 50%;
}

#game_over_text {
  left: 50%;
  top: 50%;
  font-size: 16px;
  font-weight: bold;
  color: #222034;
}

#clan_panel {
  visibility: hidden;
}

#clan_inner_cont {
  display: grid;
  height: 100%;
  grid-template-rows: 86% auto;
  background-color: #222034;
}

#clan_top_cont {
  height: 100%;
  display: grid;
  grid-template-columns: 64% auto;
  grid-gap: 12px;
}

#clan_member_list {
  overflow: auto;
  overflow-x: hidden;
  padding: 10px;
  padding-top: 22px;
  text-align: center;
  background-color: #9badb7;
}

.clan_member_text {
  font-size: 14px;
  white-space: nowrap;
  padding: 6px;
  margin: 6px 0 6px 6px;
  cursor: url(./assets/img/gui/hud/hand-cursor.png) 8 0, auto;
}
.clan_member_text:hover {
  font-weight: bold;
  filter: brightness(150%);
  transform: scale(1.1);
}

.clan_member_text_selected {
  font-size: 14px;
  white-space: nowrap;
  padding: 6px;
  margin: 6px 0 6px 6px;
  background-color: #595652;
  color: #ffffff;
  cursor: url(./assets/img/gui/hud/hand-cursor.png) 8 0, auto;
}
.clan_member_text_selected:hover {
  font-weight: bold;
  filter: brightness(150%);
}

#clan_details_cont {
  display: grid;
  grid-template-columns: 20% auto;
  grid-template-rows: repeat(5, 20%);
  align-items: center;
  justify-items: center;
  padding: 6px;
  background-color: #847e87;
}

.clan_details_icon {
  width: 100%;
}

#clan_bottom_cont {
  display: grid;
  grid-template-columns: 25% 25% auto 25%;
  grid-gap: 12px;
  align-items: center;
  justify-items: center;
  padding: 8px;
  padding-top: 26px;
}

.clan_bottom_button_cont {
  position: relative;
  width: 100%;
  user-select: none;
  cursor: url(./assets/img/gui/hud/hand-cursor.png) 8 0, auto;
}
.clan_bottom_button_cont:hover {
  filter: brightness(150%);
  transform: scale(1.1);
}

.clan_bottom_button {
  width: 100%;
  left: 50%;
  top: 50%;
}

.clan_bottom_text {
  left: 50%;
  top: 50%;
  font-size: 10px;
}

#hint_panel {
  visibility: hidden;
}

#hint_main_cont {
  background-color: #222034;
  height: 100%;
  display: grid;
  align-items: center;
  justify-items: center;
  text-align: center;
  overflow: auto;
  overflow-x: hidden;
}

#hint_text {
  font-size: 22px;
  font-weight: bold;
  color: #ffffff;
  padding: 10px;
  padding-top: 30px;
}

#hint_image {
  width: 90%;
  border: 26px #222034 solid;
}

#respawn_panel {
  visibility: hidden;
}

#respawn_inner_cont {
  background-color: #222034;
  height: 100%;
  display: grid;
  grid-template-rows: 60% auto;
  grid-gap: 12px;
  text-align: center;
}

#respawn_main_cont {
  background-color: #9badb7;
  height: 100%;
  display: grid;
  align-items: center;
}

#respawn_info {
  align-self: end;
  font-size: 14px;
  font-weight: bold;
}

#respawns_value_text {
  font-size: 40px;
  font-weight: bold;
}

#respawn_bottom_cont {
  position: relative;
}

#respawn_button_cont {
  height: 80%;
  left: 50%;
  top: 50%;
  user-select: none;
  cursor: url(./assets/img/gui/hud/hand-cursor.png) 8 0, auto;
}
#respawn_button_cont:hover {
  filter: brightness(150%);
  transform: translate(-50%, -50%) scale(1.1);
}

#respawn_button {
  height: 100%;
  left: 50%;
  top: 50%;
}

#respawn_text {
  left: 50%;
  top: 50%;
  font-size: 16px;
  font-weight: bold;
  color: #222034;
}

#shop_panel {
  visibility: hidden;
}

#shop_tooltip {
  position: absolute;
  max-width: 250px;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  background-color: #222034;
  padding: 6px;
  top: 0%;
}

.shop_tooltip_left {
  transform: translate(0%, 0%);
  left: 100%;
}

.shop_tooltip_right {
  transform: translate(-100%, 0%);
  left: 0%;
}

#shop_contents {
  background-color: rgba(155, 173, 183, 0.8);
  display: grid;
  height: 81%;
  overflow: auto;
  overflow-x: hidden;
  text-align: center;
  align-items: center;
  grid-template-columns: repeat(4, 25%);
  padding: 16px;
}

.shop_item_cont {
  background-color: rgba(255, 255, 255, 0.8);
  user-select: none;
  margin: 8px;
  border: 4px solid #222034;
  cursor: url(./assets/img/gui/hud/hand-cursor.png) 8 0, auto;
}
.shop_item_cont:hover {
  filter: brightness(150%);
  transform: scale(1.1);
}

.shop_item {
  height: 60px;
  margin: -4px;
  pointer-events: none;
  padding: 4px;
}

.shop_price_cont {
  height: 50px;
}

.shop_glory_icon {
  height: 20px;
}

.shop_price {
  color: #45283c;
  margin: 6px;
}

#shop_bottom_cont {
  position: relative;
  height: 15%;
  background-color: #222034;
}

.shop_buy_button_cont {
  height: 75%;
  left: 50%;
  top: 50%;
  user-select: none;
  cursor: url(./assets/img/gui/hud/hand-cursor.png) 8 0, auto;
}
.shop_buy_button_cont:hover {
  filter: brightness(150%);
  transform: translate(-50%, -50%) scale(1.1);
}

.shop_buy_button {
  height: 100%;
  left: 50%;
  top: 50%;
}

.shop_buy_text {
  left: 50%;
  top: 50%;
  font-size: 20px;
  color: #222034;
}

#tasks_panel {
  visibility: hidden;
}

#tasks_panel_tooltip {
  position: absolute;
  width: 150px;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  background-color: #222034;
  padding: 6px;
  top: 50%;
  transform: translate(-100%, 0%);
  left: 50%;
}

#tasks_inner_cont {
  height: 100%;
  display: grid;
  grid-template-rows: 10% 3% auto 13%;
}

#tasks_headings_cont {
  background-color: rgba(132, 126, 135, 0.8);
  display: grid;
  grid-template-columns: 28% 41% auto;
  text-align: center;
  align-items: end;
  justify-items: center;
  grid-gap: 16px;
  font-weight: bold;
}

#tasks_list_cont {
  background-color: rgba(155, 173, 183, 0.5);
  overflow: auto;
}

#tasks_bottom_cont {
  background-color: #222034;
  position: relative;
  display: grid;
  justify-items: center;
  align-items: center;
  grid-template-columns: auto 50%;
  padding-top: 17px;
}

.tasks_bottom_button_cont {
  position: relative;
  width: 55%;
  user-select: none;
  cursor: url(./assets/img/gui/hud/hand-cursor.png) 8 0, auto;
}
.tasks_bottom_button_cont:hover {
  filter: brightness(150%);
  transform: scale(1.1);
}

.tasks_bottom_button {
  width: 100%;
  left: 50%;
  top: 50%;
}

.tasks_bottom_text {
  left: 50%;
  top: 50%;
  font-size: 14px;
  color: #222034;
}

.task_slot_cont {
  background-color: #222034;
  display: grid;
  grid-template-columns: 42% 18% auto;
  text-align: center;
  align-items: center;
  grid-gap: 4px;
  font-size: 14px;
  margin: 8px;
  border-width: 4px;
  border-style: solid;
  border-color: #222034;
  cursor: url(./assets/img/gui/hud/hand-cursor.png) 8 0, auto;
}
.task_slot_cont:hover {
  filter: brightness(150%);
  transform: scale(1.03);
}

.task_slot_cell {
  height: 100%;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.task_slot_task_name {
  height: auto;
  padding: 7px;
}

.task_reward_cont {
  display: grid;
  grid-template-columns: 15% 15% 15% 15% auto;
  grid-gap: 4px;
  align-items: center;
  justify-items: center;
}

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

.task_reward_item {
  visibility: hidden;
  width: 100%;
}
.task_reward_item:hover {
  filter: brightness(150%);
  transform: scale(1.3);
}

.task_glory_icon {
  width: 80%;
  pointer-events: none;
}

.panel_template_cont {
  left: 50%;
  top: 50%;
  pointer-events: auto;
}

.panel_template_main_cont {
  width: 400px;
  height: 300px;
  border: 8px solid #222034;
  outline: 8px solid #222034;
  user-select: none;
}

.panel_template_icon_border {
  left: 0%;
  top: 0%;
  width: 80px;
  user-select: none;
}

.panel_template_icon {
  left: 0%;
  top: 0%;
  width: 54px;
  user-select: none;
}

.panel_template_close_button {
  left: 100%;
  top: 0%;
  width: 52px;
  user-select: none;
  cursor: url(./assets/img/gui/hud/hand-cursor.png) 8 0, auto;
}
.panel_template_close_button:hover {
  transform: translate(-50%, -50%) scale(1.1);
  filter: brightness(150%);
}

.panel_template_top_corner {
  left: 100%;
  top: 0%;
  width: 36px;
  user-select: none;
}

.panel_template_left_corner {
  left: 0%;
  top: 100%;
  width: 36px;
  user-select: none;
}

.panel_template_right_corner {
  left: 100%;
  top: 100%;
  width: 36px;
  user-select: none;
}

.centered {
  position: absolute;
  transform: translate(-50%, -50%);
}

.panel_template_name_border {
  position: absolute;
  top: 0%;
  width: 100%;
  padding: 4px;
  color: #ffffff;
  font-size: 20px;
  -webkit-text-stroke: 14px #222034;
  transform: translateY(-50%);
  user-select: none;
}

.panel_template_name {
  position: absolute;
  top: 0%;
  width: 100%;
  padding: 4px;
  color: #ffffff;
  font-size: 20px;
  transform: translateY(-50%);
  user-select: none;
}

.panel_template_contents_cont {
  width: 100%;
  height: 100%;
}

.panel_template_spacer {
  background-color: #222034;
}

#game_canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: auto;
  margin-right: auto;
  transform: translate(-50%, -50%);
}

body {
  background-color: #000000;
}

img {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
}

::placeholder {
  color: #847e87;
  font-size: 1.5vw;
}

@font-face {
  font-family: "Press Start 2P";
  src: url("./assets/font/PressStart2P-Regular.ttf");
  font-weight: 400;
  font-weight: normal;
}
.press_start_font {
  font-family: "Press Start 2P", cursive;
  letter-spacing: 0.1em;
  line-height: 1.2;
}

/*# sourceMappingURL=main.css.map */