@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;900&display=swap');

@font-face {
  font-family: game-font;
  src: url('/assets/font/BRLNSDB.TTF');
}

@keyframes spin {
  from {
    transform:rotate(0deg);
  }
  to {
    transform:rotate(360deg);
  }
}

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: game-font, 'Montserrat', sans-serif;
  font-size: 16px;
  background-color: #f0f0f0;
  color: #000000;
}

body::-webkit-scrollbar {
  width: 6px;
}

body::-webkit-scrollbar-track {
  background-color: #000;
}

body::-webkit-scrollbar-thumb {
  background-color: #333;
}

a {
  text-decoration: none;
}

button {
  padding: 8px 16px;
  color: #000000;
  background-image: linear-gradient(#ffcc00, #ffff74);
  border-radius: 8px;
  border: none;
  font-size: 16px;
  font-family: game-font, 'Montserrat', sans-serif;
}

button:hover {
  background-image: linear-gradient(#ffff00, #ffff00);
  cursor: pointer;
}

button:active {
  background-image: linear-gradient(#ffff00, #ffff00);
}

button:disabled {
  background-image: linear-gradient(rgb(134, 134, 134), #aaa);
}

input {
  background-color: transparent;
  border: 1px solid whitesmoke;
  color: whitesmoke;
  border-radius: 16px;
  font-family: game-font, 'Montserrat', sans-serif;
}

select {
  text-shadow: 0 0 2px #000;
  font-family: game-font, 'Montserrat', sans-serif;
}

.text-shadow {
  text-shadow: 0 0 2px #000;
}

.deep-shadow {
  box-shadow: inset -1px 2px 0 0px #412c1f, inset -1px -2px 0 1px #d19b54;
}

.text-shadow-thin {
  text-shadow: 0 0 1px #000;
}

.icon-button {
  width: 32px;
  height: 32px;
  padding: 0;
  text-align: center;
}

.icon-button-nobg {
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  padding: 0;
  text-align: center;
  color: #fff;
}

.icon-button-nobg:active,
.icon-button-nobg:hover {
  background-color: #ffffff30;
  color: #000;
}

.icon-button-nobg:disabled {
  background: none;
  color: #ffffff80;
}

#app {
  width: 100%;
  height: 100%;
}

.main-body {
  overflow-y: scroll;
  overflow-x: hidden;
  padding-top: 80px;
  padding-bottom: 70px;
  scrollbar-width: none;
}

.main-body::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

.loading {
  color: #fff;
  margin: 0 64px;
  padding: 100px;
}

.fw-frame {
  border-image: url('../assets/dialog_frame.webp') 32 / 16px / 0px stretch;
  border-style: solid;
  border-width: 16px;
  background-color: rgba(10, 13, 23, 0.576);
  background-clip: padding-box;
}

.fw-frame-top {
  border-image: url('../assets/dialog_frame.webp') 32 / 16px 0 0 0 / 0px stretch;
  border-style: solid;
  border-width: 5px 0 0 0;
  padding: 0px 16px 16px 16px;
  background-color: rgba(10, 13, 23, 1);
  background-clip: padding-box;
}

.fw-frame-bottom {
  border-image: url('../assets/dialog_frame.webp') 32 / 0 0 16px 0 / 0px stretch;
  border-style: solid;
  border-width: 0 0 16px 0;
  padding: 16px 16px 0 16px;
  background-color: rgba(10, 13, 23, 0.576);
  background-clip: padding-box;
}

.fw-frame-top-bottom {
  border-image: url('../assets/dialog_frame.webp') 32 / 16px 0 16px 0 / 0px stretch;
  border-style: solid;
  border-width: 16px 0 16px 0;
  padding: 0 16px 0 16px;
  background-color: rgba(10, 13, 23, 0.576);
  background-clip: padding-box;
}

.modal-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  background-color: #626262cb;
  overflow-y: auto;
  z-index: 10;
}

.modal {
  margin-top: 128px;
  border-radius: 16px;
  max-height: calc(100vh - 190px);
}

.dialog {
  padding: 20px;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  row-gap: 16px;
  margin: auto;
}

.w100p {
  width: 100%;
}

.h100p {
  height: 100%;
}

.flexbox {
  display: flex;
}

.flexbox.row {
  flex-flow: row nowrap;
}

.flexbox.column {
  flex-flow: column nowrap;
}

.flexbox.justify-center {
  justify-content: center;
}

.flexbox.justify-start {
  justify-content: flex-start;
}

.flexbox.justify-end {
  justify-content: flex-end;
}

.flexbox.justify-stretch {
  justify-content: stretch;
}

.flexbox.justify-space-around {
  justify-content: space-around;
}

.flexbox.justify-space-between {
  justify-content: space-between;
}

.flexbox.justify-space-evenly {
  justify-content: space-evenly;
}

.flexbox.align-center {
  align-items: center;
}

.flexbox.align-start {
  align-items: flex-start;
}

.flexbox.align-end {
  align-items: flex-end;
}

.flexbox.align-stretch {
  align-items: stretch;
}

.mr-10 {
  margin-right: 10px;
}

.ml-10 {
  margin-left: 10px;
}

.mt-10 {
  margin-top: 10px;
}

.mb-10 {
  margin-bottom: 10px;
}

.f-grayscale {
  filter: grayscale(100%);
}

.rarity-common {
  background: #848484;
  box-shadow: inset 1px 7px 6px 0 #b7b6cd;
  color: white;
}

.rarity-uncommon {
  background: #3CCE0A;
  box-shadow: inset 1px 7px 6px 0 #c5fa74;
  color: white;
}

.rarity-rare {
  background: #33ACFF;
  box-shadow: inset 1px 7px 6px 0 #00cff1;
  color: white;
}

.rarity-epic {
  background: #ad01ff;
  box-shadow: inset 1px 7px 6px 0 #e97efe;
  color: white;
}

.rarity-legendary {
  background: #fe6600;
  box-shadow: inset 1px 7px 6px 0 #ffe473;
  color: white;
}

.carousel button:hover {
  background-image: none;
}

.error {
  color: #870404;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}