/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/assets/styles/styles.scss?ngGlobalStyle ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: var(--al-o);
  }
}
@keyframes fade-out {
  0% {
    opacity: var(--al-o);
  }
  100% {
    opacity: 0;
  }
}
:root {
  --vh: 100dvh;
  /* App background – rich dark green radial gradient */
  --app-bg: radial-gradient(ellipse 120% 80% at 50% 0%, #071a0b 0%, #030d05 45%, #010602 100%);
  --app-grid: linear-gradient(rgba(0, 217, 95, 0.025) 1px, transparent 1px),
              linear-gradient(90deg, rgba(0, 217, 95, 0.025) 1px, transparent 1px);
  --st-bf: radial-gradient(1px 1px at 10% 20%, rgba(255, 255, 255, 0.8), transparent),
  radial-gradient(1px 1px at 80% 40%, rgba(255, 255, 255, 0.6), transparent),
  radial-gradient(1px 1px at 30% 70%, rgba(255, 255, 255, 0.5), transparent),
  radial-gradient(1px 1px at 60% 90%, rgba(255, 255, 255, 0.7), transparent);
  --st-af: radial-gradient(2px 2px at 25% 35%, rgba(255, 255, 255, 0.9), transparent),
  radial-gradient(1.5px 1.5px at 70% 60%, rgba(255, 255, 255, 0.7), transparent);
  --t-p: #ffffff;
  --t-p-i: #000000;
  --t-b: #00D95F;
  --t-y: #f1e860;
  --t-e: #ff3838;
  --t-su: #00d96b;
  --t-w: #fdb756;
  --t-se: #717e94;
  --t-t: #535d7b;
  --bg-p: #020A04;
  --bg-p-70: #020A0470;
  --bg-a: #030D05;
  --bg-b: #0B1C0D;
  --bg-t: #112014;
  --bg-w: #1B2E1E;
  --bg-se: #152818;
  --bg-h: linear-gradient(90deg, #0A1B0D 0%, #030D05 100%);
  --bg-sc: #1A2E1D;
  --bg-su-20: #2dcb4a20;
  --bg-e-20: #ff383820;
  --bg-w-20: #fdb75620;
  --b-s: #141b2c;
  --b-t: #ffffff0a;
  --b-d: #192437;
  --b-b: #3f567e;
  --btn-p: linear-gradient(180deg, #2ae076 0%, #00b851 100%) padding-box, linear-gradient(180deg, #ffffff 0%, #00d95f 100%) border-box;
  --btn-p-b-bg: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 35%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.1) 65%, transparent 100%);
  --btn-p-sh: inset 0 0 0 2px #000, inset 0 0 0 4px #00873b, inset 0 0 0 5px #6affab, 0 0 0 2px #00d95f, 0 0 8px rgba(0, 217, 95, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.8), inset 0 -4px 8px rgba(0, 0, 0, 0.25);
  --btn-p-a: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 35%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.1) 65%, transparent 100%);
  --btn-d: var(--bg-t);
  --btn-l: #1e293b;
  --btn-g: var(--bg-h);
  --mu-bg: #0f1729;
  --sw-bg-a: #e3eb73;
  --sw-bg-d: #2e3d56;
  --sh-b: 0 4px 4px 0 #00000033, 0 3px 6px 0 #ffffff1a inset;
  --t-w-bg: linear-gradient(180deg, var(--t-w) 0%, #FFD000 100%);
  --t-w-sh: 0 4px 12px 0 #FFFFFFCC inset, 0 0 48px 0 #FDCB56;
  --al-bg: var(--bg-b);
  --al-i: #3C54F1;
  --al-i-sh: 3px 0px 5px 0px #3C54F145;
  --al-e: #D53B36;
  --al-e-sh: 3px 0px 5px 0px #D53B3645;
  --al-w: #F9A825;
  --al-w-sh: 3px 0px 5px 0px #F9A82545;
  --al-s: #2DCB4A;
  --al-s-sh: 3px 0px 5px 0px #2DCB4A45;
  --htp-c-sr: #b34dff;
  --htp-c-db: #00D95F;
  --htp-btn: #00c3f4;
  --htp-cb-a: #56e5ff;
  --htp-t-se: #8096bb;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/inter-700.woff2") format("woff2");
}
:root {
  --font-family: "Inter";
}

html {
  font-size: 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--t-b) var(--bg-sc);
}

::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: var(--bg-sc);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: var(--t-b);
}

body {
  margin: 0;
  width: 100%;
  overflow: hidden;
  color: var(--t-p);
  height: var(--vh);
  background-color: var(--bg-p);
  padding: 0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
  font-family: var(--font-family), -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--st-bf);
  background-size: 120px 120px;
  background-repeat: repeat;
  opacity: 0.6;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--st-af);
  background-size: 300px 300px;
  background-repeat: repeat;
  opacity: 0.8;
}

input {
  border: none;
  outline: none;
  appearance: none;
  box-shadow: none;
  background-color: transparent;
}

* {
  hyphens: auto;
  border-width: 0;
  -webkit-user-select: none;
          user-select: none;
  border-style: solid;
  font-family: inherit;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

button, input, optgroup, select, textarea {
  touch-action: manipulation;
  font-weight: inherit;
  line-height: inherit;
  font-size: 100%;
  color: inherit;
  margin: 0;
  padding: 0;
}

strong {
  font-weight: 600 !important;
}

b {
  font-weight: 700 !important;
}

p, h3, h2, h1 {
  margin: 0;
}

pln-svg {
  display: flex;
}

.c-p {
  color: var(--t-p);
  fill: var(--t-p);
}

.c-p-i {
  color: var(--t-p-i);
  fill: var(--t-p-i);
}

.c-b {
  color: var(--t-b);
}

.c-y {
  color: var(--t-y);
}

.c-e {
  color: var(--t-e);
}

.c-su {
  color: var(--t-su);
}

.c-w {
  color: var(--t-w);
}

.c-se {
  color: var(--t-se);
  fill: var(--t-se);
}

.c-t {
  color: var(--t-t);
}

.cu-p {
  cursor: pointer;
}

.a-i-c {
  align-items: center;
}

.u-c {
  text-transform: uppercase;
}

.l-b-a {
  line-break: anywhere;
}

.o-y-a {
  overflow-x: hidden;
  overflow-y: auto;
}

.s-t {
  -webkit-user-select: text;
          user-select: text;
}

.l-c {
  text-transform: lowercase;
}

.g-4 {
  display: flex;
  gap: 0.25rem;
}

.g-8 {
  display: flex;
  gap: 0.5rem;
}

.g-12 {
  display: flex;
  gap: 0.75rem;
}

.g-16 {
  display: flex;
  gap: 0.75rem;
}

.p-s-16 {
  padding: 0 1rem;
}

.p-16 {
  padding: 1rem;
}

.t-s {
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.125rem;
}

.t-s-s {
  font-weight: 500;
  font-size: 0.625rem;
  line-height: 1rem;
}

.t-r {
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.375rem;
}

.t-h {
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.625rem;
}

.t-s-h {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5rem;
}

.m-we {
  font-weight: 500;
}

.h-w {
  width: 50%;
}

.f-w {
  width: 100%;
}

.m-l-a {
  margin-left: auto;
}

.m-a {
  margin: auto;
}

.t-a-l {
  text-align: left;
}

.t-a-c {
  text-align: center;
}

.t-a-r {
  text-align: right;
}

.w-b-a {
  word-break: break-all;
}

.f-c {
  display: flex;
  flex-direction: column;
}

.m-h {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: space-between;
}
.m-h div {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.h-h {
  width: 100%;
  display: flex;
  position: relative;
  align-items: center;
  gap: 0.25rem;
  justify-content: space-between;
}
.h-h div {
  display: flex;
  align-items: center;
  gap: 1rem;
}

@media only screen and (max-width: 600px), only screen and (max-height: 600px) and (min-width: 560px) and (max-width: 1000px) {
  .m-m-b .modal__overlay {
    align-items: flex-end;
  }
  .m-m-b .modal__container {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    max-height: 100%;
  }
}

.m-h-t-p .modal__overlay {
  backdrop-filter: blur(20px);
}

.m-m-w .modal__container {
  background: transparent;
  border: none;
}

.alert {
  --ai-t: 0;
  --al-o: 1;
  display: flex;
  overflow: hidden;
  position: absolute;
  color: var(--t-p);
  right: var(--ai-t);
  opacity: var(--al-o);
  flex-direction: column;
  will-change: transform, opacity;
  transition: transform 100ms ease;
}
.alert .wrapper {
  width: 100%;
  position: relative;
  background: var(--bg-b);
  border-radius: 1rem;
}
.alert.fade-in {
  animation: fade-in 100ms ease-in;
  opacity: var(--al-o);
}
.alert.fade-out {
  animation: fade-out 100ms ease-in;
  opacity: 0;
}

.disabled, .stopped {
  opacity: 0.6;
  cursor: default;
  pointer-events: none;
}

.click-area {
  position: relative;
}
.click-area::after {
  content: "";
  position: absolute;
  inset: var(--t-a-e);
  background: transparent;
}

.landscape {
  display: none;
}

.portrait {
  display: block;
}

.mobile-landscape .landscape {
  display: block;
}
.mobile-landscape .portrait {
  display: none;
}

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