@charset "UTF-8";
:root {
  --black: rgba(0, 0, 0, 1);
  --white: rgba(255, 255, 255, 1);
  --heavy-yellow: rgba(115, 114, 9, 1);
  --light-yellow: rgba(240, 239, 66, 1);
  --light-yellow-hover: rgb(255, 255, 100, 1 );
  --heavy-red: rgba(115, 28, 37, 1);
  --light-red: rgba(184, 46, 60, 1);
  --heavy-blue: rgba(22, 71, 102, 1);
  --light-blue: rgba(40, 132, 189, 1);
  --heavy-green: rgba(55, 102, 49, 1);
  --light-green: rgba(84, 155, 74, 1);
  --heavy-brown: rgba(130, 64, 23, 1);
  --light-brown: rgba(195, 96, 34, 1);
  --body-bg-color: var(--black);
  --body-text-color: var(--white);
  --text-back-btn-fill: var(--white);
  --dive-in-back-btn-stroke: var(--heavy-green);
  --dive-in-back-btn-fill: var(--light-green);
  --alt-path-back-btn-stroke: var(--heavy-yellow);
  --alt-path-back-btn-fill: var(--light-yellow);
  --what-the-game-back-btn-stroke: var(--heavy-red);
  --what-the-game-back-btn-fill: var(--light-red);
  --crypto-revolution-back-btn-stroke: var(--heavy-blue);
  --crypto-revolution-back-btn-fill: var(--light-blue);
  --squad-up-back-btn-stroke: var(--heavy-green);
  --squad-up-back-btn-fill: var(--light-green);
  --random-back-btn-stroke: var(--heavy-red);
  --random-back-btn-fill: var(--light-red);
  --get-paid-back-btn-stroke: var(--heavy-blue);
  --get-paid-back-btn-fill: var(--light-blue);
  --pay-out-terms-back-btn-stroke: var(--heavy-yellow);
  --pay-out-terms-back-btn-fill: var(--light-yellow);
  --beyond-back-btn-stroke: var(--heavy-green);
  --beyond-back-btn-fill: var(--light-green);
  --terms-back-btn-stroke: var(--heavy-brown);
  --terms-back-btn-fill: var(--light-brown);
  --form-borders: var(--light-yellow);
  --form-bg: var(--black);
  --auth-label-bg-checked: var(--light-yellow);
  --auth-label-text-checked: var(--black);
  --input-bg: var(--light-yellow);
  --input-text: var(--black);
  --input-placeholder-bg: var(--light-yellow);
  --input-placeholder-text: var(--black);
  --checkbox-bg: var(--black);
  --checkbox-borders: var(--light-green);
  --checkbox-bg-checked: var(--light-green);
  --checkbox-borders-checked: var(--light-green);
  --checkbox-focus: var(--light-blue);
  --form-button-bg: var(--light-green);
  --form-button-text: var(--white);
  --input-placeholder-text: var(--black);
}

body.light {
  --body-bg-color: var(--white);
  --body-text-color: var(--black);
  --form-borders: var(--light-brown);
  --form-bg: var(--white);
  --auth-label-bg-checked: var(--light-brown);
  --auth-label-text-checked: var(--white);
  --input-bg: var(--light-brown);
  --input-text: var(--white);
  --input-placeholder-bg: var(--light-brown);
  --input-placeholder-text: var(--white);
  --checkbox-bg: var(--white);
  --checkbox-borders: var(--light-green);
  --input-placeholder-text: var(--white);
}

/* noto-sans-thai-looped-regular - latin */
@font-face {
  font-display: swap;
  font-family: "Noto Sans Thai Looped";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/noto-sans-thai-looped-regular.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
* {
  font-family: "Noto Sans Thai Looped", sans-serif;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: "Noto Sans Thai Looped", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: var(--body-bg-color);
  color: var(--body-text-color);
}

body {
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Стандартный синтаксис */
}

body {
  margin: 0;
  overflow: hidden;
  background-color: black;
  width: 100dvw;
  height: 100dvh;
  transition: background-color 0.3s ease-in-out;
}
body .overlay-screen {
  position: fixed;
  inset: 0;
  text-align: center;
  align-content: center;
  transition: 1s;
}

svg {
  width: 100dvw;
  height: 100dvh;
}

.top-layer {
  z-index: 99;
}

@media (orientation: portrait) {
  svg {
    width: 100%;
  }
  .above {
    translate: -100% 0;
  }
  .below {
    translate: 100% 0;
  }
}
@media (orientation: landscape) {
  svg {
    height: 100%;
  }
  .above {
    translate: 0 -100%;
  }
  .below {
    translate: 0 100%;
  }
}
/* Диалог - форма обратной связи */
#contact-dialog {
  margin: auto;
  padding: 20px;
  width: 70%;
  height: 50%;
  background-color: rgb(115, 114, 9);
}

#contact-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.7);
}

#contact-dialog form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 80%;
  height: 80%;
}

#contact-dialog label {
  width: 80%;
}

#contact-dialog .row {
  display: flex;
}

#contact-dialog textarea {
  resize: none;
}

.article-container > :first-child {
  font-size: 1.5em;
  font-weight: bold;
}

/* Default fill color. We need it to have posibility to be clickable */
g[id$=-btn] {
  cursor: pointer;
  fill: var(--back-btn-container-default-fill);
}

#dive-in-back-btn:hover #back-btn-h1 {
  stroke: var(--dive-in-back-btn-fill);
}
#dive-in-back-btn:hover #back-btn-h2 {
  display: none;
}

#alt-path-back-btn:hover #back-btn-h1 {
  stroke: var(--alt-path-back-btn-fill);
}
#alt-path-back-btn:hover #back-btn-h2 {
  display: none;
}
#alt-path-back-btn:hover [id^=text-][id$=-back-btn] {
  fill: var(--white);
}

#what-the-game-back-btn:hover #back-btn-h1 {
  stroke: var(--what-the-game-back-btn-fill);
}
#what-the-game-back-btn:hover #back-btn-h2 {
  display: none;
}

#crypto-revolution-back-btn:hover #back-btn-h1 {
  stroke: var(--crypto-revolution-back-btn-fill);
}
#crypto-revolution-back-btn:hover #back-btn-h2 {
  display: none;
}

#squad-up-back-btn:hover #back-btn-h1 {
  stroke: var(--squad-up-back-btn-fill);
}
#squad-up-back-btn:hover #back-btn-h2 {
  display: none;
}

#random-back-btn:hover #back-btn-h1 {
  stroke: var(--random-back-btn-fill);
}
#random-back-btn:hover #back-btn-h2 {
  display: none;
}

#get-paid-back-btn:hover #back-btn-h1 {
  stroke: var(--get-paid-back-btn-fill);
}
#get-paid-back-btn:hover #back-btn-h2 {
  display: none;
}

#pay-out-terms-back-btn:hover #back-btn-h1 {
  stroke: var(--pay-out-terms-back-btn-fill);
}
#pay-out-terms-back-btn:hover #back-btn-h2 {
  display: none;
}
#pay-out-terms-back-btn:hover [id^=text-][id$=-back-btn] {
  fill: var(--text-back-btn-fill);
}

#beyond-back-btn:hover #back-btn-h1 {
  stroke: var(--beyond-back-btn-fill);
}
#beyond-back-btn:hover #back-btn-h2 {
  display: none;
}

#terms-back-btn:hover #back-btn-h1 {
  stroke: var(--terms-back-btn-fill);
}
#terms-back-btn:hover #back-btn-h2 {
  display: none;
}

/* game page hovers */
#call-realtors-btn:hover > rect {
  fill: rgb(184, 46, 60);
  stroke: rgb(255, 255, 255);
}
#call-realtors-btn:hover #click-bg > rect {
  fill: rgb(40, 132, 189);
}
#call-realtors-btn:hover #cr-window > rect {
  fill: rgb(115, 114, 9);
}
#call-realtors-btn:hover #cr-window > line {
  stroke: rgb(240, 239, 66);
}

#buy-next-lvl-btn:hover #central-yellow-circle {
  fill: rgb(40, 132, 189);
}
#buy-next-lvl-btn:hover #middle-black-circle {
  stroke: rgb(240, 239, 66);
}
#buy-next-lvl-btn:hover #buy-next-lvl-text > text {
  fill: rgb(255, 255, 255);
  stroke: rgb(255, 255, 255);
}

#attack-btn:hover #central-black-circle {
  fill: rgb(184, 46, 60);
}
#attack-btn:hover #outside-circle {
  stroke: rgb(240, 239, 66);
  stroke-width: 1px;
  fill: black;
}

#reference-container:hover #copy-refferal-id-text-inside-field {
  fill: rgb(84, 155, 74);
}
#reference-container:hover #copy-link-field {
  fill: rgb(84, 155, 74);
}

#reference-id-btn:hover #copy-refferal-id-full-field {
  stroke: rgb(255, 255, 255);
  stroke-width: 1px;
}

#reference-link-btn:hover #copy-link-field {
  stroke: rgb(255, 255, 255);
  stroke-width: 1px;
}

.bookmark-container:hover [id$=-inactive] > path,
.bookmark-container:hover [id$=-inactive] > circle {
  stroke: rgb(255, 255, 255);
  stroke-width: 1px;
}

/**
 * Анимация интерактивных SVG-индикаторов.
 * Родительские группы (#count-random, #chance-random, #get-from-random)
 * выступают триггерами (:hover) для анимации внутренних элементов.
 */
/* Базовое состояние скрытого текста */
#count-random #count-random-text-hover,
#count-random #chance-random-text-hover,
#count-random #gfr-text-hover,
#chance-random #count-random-text-hover,
#chance-random #chance-random-text-hover,
#chance-random #gfr-text-hover,
#get-from-random #count-random-text-hover,
#get-from-random #chance-random-text-hover,
#get-from-random #gfr-text-hover {
  opacity: 0;
  translate: 0 0;
  transition: translate 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* Базовое состояние основного текста */
#count-random #count-random-text,
#count-random #chance-random-text,
#count-random #gfr-text,
#chance-random #count-random-text,
#chance-random #chance-random-text,
#chance-random #gfr-text,
#get-from-random #count-random-text,
#get-from-random #chance-random-text,
#get-from-random #gfr-text {
  translate: 0 0;
  transition: translate 0.3s ease-in-out;
}

/* Базовое состояние внутренних колец */
#count-random [id$=-inside],
#chance-random [id$=-inside],
#get-from-random [id$=-inside] {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.3s ease-in-out;
}

/* Индикация интерактивности */
#count-random:hover,
#chance-random:hover,
#get-from-random:hover {
  cursor: pointer;
}

/* Анимация: появление и смещение скрытого текста */
#count-random:hover #count-random-text-hover,
#count-random:hover #chance-random-text-hover,
#count-random:hover #gfr-text-hover,
#chance-random:hover #count-random-text-hover,
#chance-random:hover #chance-random-text-hover,
#chance-random:hover #gfr-text-hover,
#get-from-random:hover #count-random-text-hover,
#get-from-random:hover #chance-random-text-hover,
#get-from-random:hover #gfr-text-hover {
  translate: 0 -6px;
  opacity: 1;
}

/* Анимация: смещение основного текста вниз */
#count-random:hover #count-random-text,
#count-random:hover #chance-random-text,
#count-random:hover #gfr-text,
#chance-random:hover #count-random-text,
#chance-random:hover #chance-random-text,
#chance-random:hover #gfr-text,
#get-from-random:hover #count-random-text,
#get-from-random:hover #chance-random-text,
#get-from-random:hover #gfr-text {
  translate: 0 12px;
}

/* Анимация: увеличение первого (зеленого) кольца */
#count-random:hover [id$=-green-1st-inside],
#chance-random:hover [id$=-green-1st-inside],
#get-from-random:hover [id$=-green-1st-inside] {
  transform: scale(1.214);
}

/* Анимация: увеличение второго (красного) кольца */
#count-random:hover [id$=-red-2nd-inside],
#chance-random:hover [id$=-red-2nd-inside],
#get-from-random:hover [id$=-red-2nd-inside] {
  transform: scale(1.091);
}

#education-skill-icon-container:hover #education-skill-icon,
#education-skill-icon-container:hover #education-skill-icon-stroke {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
#education-skill-icon-container:hover #education-circle-outside,
#education-skill-icon-container:hover #education-text-extended,
#education-skill-icon-container:hover #education-text-points {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

#power-skill-icon-container:hover #power-skill-icon,
#power-skill-icon-container:hover #power-skill-icon-stroke {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
#power-skill-icon-container:hover #power-circle-outside,
#power-skill-icon-container:hover #power-text-extended,
#power-skill-icon-container:hover #power-text-points {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

#business-skill-icon-container:hover #business-skill-icon,
#business-skill-icon-container:hover #business-skill-icon-stroke {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
#business-skill-icon-container:hover #business-circle-outside,
#business-skill-icon-container:hover #business-text-extended,
#business-skill-icon-container:hover #business-text-points {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

:hover > #modal-hutor-bg {
  stroke: rgb(195, 96, 34);
  stroke-width: 1px;
}

:hover > [id$=-btn-image],
:hover > [id$=-btn-bg] {
  stroke: rgb(255, 255, 255);
  stroke-width: 1px;
}

[hidden] {
  display: none !important;
}

#auth-form,
#verify-email-form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 20px;
  gap: 20px;
  border: 1px solid var(--form-borders);
  background-color: var(--form-bg);
  overflow-y: auto;
  overflow-x: hidden;
}

.auth {
  display: flex;
  flex-direction: row;
  gap: 30px;
}
.auth > label {
  cursor: pointer;
  font-size: 1.3rem;
  font-weight: bold;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--form-borders);
  min-width: 120px;
  height: 44px;
  transition: all 0.2s ease;
}
.auth > label:has(:checked) {
  background-color: var(--auth-label-bg-checked);
  color: var(--auth-label-text-checked);
  white-space: nowrap;
}

.logo-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.logo-container .title {
  font-size: 2.8rem;
  padding: 0;
  margin: 0;
}

.eth-account-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  font-size: 1.2rem;
}
.eth-account-container > * {
  margin: 0;
  padding: 0;
}
.eth-account-container .eth-account {
  cursor: pointer;
}

.credentials {
  display: flex;
  flex-direction: column;
  width: 80%;
  gap: 20px;
  align-items: center;
}

input {
  font-size: 1.3rem;
  text-align: center;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  background-color: var(--input-bg);
  border: none;
}
input::placeholder {
  color: var(--input-placeholder-text);
}

:has([value=login]:checked) .reference {
  display: none;
}

:has([value=register]:checked) .restore {
  display: none;
}

:has([value=login]:checked) .restore:has(:checked) + #auth-submit-btn {
  visibility: hidden;
  z-index: -10;
}

.reference,
.restore {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 80%;
  gap: 20px;
  font-size: 1.1rem;
  height: 44px;
}
.reference > label,
.restore > label {
  cursor: pointer;
  display: flex;
  align-items: center;
  min-width: 50%;
}
.reference :not(:has(:checked)) + input,
.restore :not(:has(:checked)) + input {
  visibility: hidden;
}
.reference :not(:has(:checked)) + button,
.restore :not(:has(:checked)) + button {
  visibility: hidden;
}
.reference [type=checkbox],
.restore [type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  margin-right: 10px;
  width: 25px;
  height: 25px;
  background-color: var(--checkbox-bg);
  border: 1px solid var(--checkbox-borders);
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}
.reference [type=checkbox]:checked,
.restore [type=checkbox]:checked {
  background-color: var(--checkbox-bg-checked);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
}
.reference [type=checkbox]:focus-visible,
.restore [type=checkbox]:focus-visible {
  outline: 1px solid var(--checkbox-focus);
  outline-offset: 2px;
}

#auth-submit-btn,
#verify-email-submit-btn,
#password-restore-btn {
  cursor: pointer;
  padding: 5px;
  font-size: 1.1rem;
  font-weight: bold;
  background-color: var(--form-button-bg);
  color: var(--form-button-text);
  width: 50%;
  min-width: 150px;
  height: 44px;
  border: none;
}

#code-form-info,
#code-form-info-2,
#timer {
  font-size: 1.3rem;
  margin: 0;
  text-align: center;
}

#single-numbers {
  display: flex;
  flex-direction: row;
  gap: 15px;
  justify-content: center;
}
#single-numbers > input {
  width: 60px;
  height: 70px;
  font-size: 2rem;
}

@media (orientation: landscape) {
  #auth-form,
  #verify-email-form {
    width: 60dvw;
    height: 70dvh;
  }
}
@media (orientation: portrait) {
  #auth-form,
  #verify-email-form {
    width: 80dvw;
    height: 60dvh;
  }
}
@media (orientation: landscape) and (pointer: coarse) and (hover: none) {
  #auth-form,
  #verify-email-form {
    width: 85dvw;
    height: 95dvh;
    gap: 10px;
  }
  #auth-form .logo-container,
  #verify-email-form .logo-container {
    display: none;
  }
  #auth-form .credentials,
  #verify-email-form .credentials {
    flex-direction: row;
    width: 100%;
  }
  #auth-form .eth-account-container,
  #verify-email-form .eth-account-container {
    font-size: 1rem;
  }
  #auth-form #single-numbers > input,
  #verify-email-form #single-numbers > input {
    width: 45px;
    height: 50px;
  }
}
@media (orientation: portrait) and (pointer: coarse) and (hover: none) {
  #auth-form,
  #verify-email-form {
    width: 95dvw;
    height: 80dvh;
    gap: 15px;
  }
  #auth-form .credentials,
  #verify-email-form .credentials {
    width: 100%;
  }
  #auth-form .reference,
  #auth-form .restore,
  #verify-email-form .reference,
  #verify-email-form .restore {
    width: 100%;
    flex-direction: column;
    align-items: center;
  }
  #auth-form .reference > label,
  #auth-form .restore > label,
  #verify-email-form .reference > label,
  #verify-email-form .restore > label {
    width: 100%;
    justify-content: center;
  }
  #auth-form .reference input[type=text], #auth-form .reference button,
  #auth-form .restore input[type=text],
  #auth-form .restore button,
  #verify-email-form .reference input[type=text],
  #verify-email-form .reference button,
  #verify-email-form .restore input[type=text],
  #verify-email-form .restore button {
    width: 80%;
  }
  #auth-form #single-numbers,
  #verify-email-form #single-numbers {
    gap: 5px;
  }
  #auth-form #single-numbers > input,
  #verify-email-form #single-numbers > input {
    width: 40px;
    height: 50px;
    font-size: 1.5rem;
    padding: 0;
  }
}
#contact-dialog {
  position: fixed;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(0.9);
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  padding: 20px;
  gap: 15px;
  border: 1px solid var(--form-borders);
  background-color: var(--heavy-yellow);
  color: var(--white) !important;
  width: 60vw;
  height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--light-yellow) var(--black);
  scrollbar-gutter: stable;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out, visibility 0.4s ease-in-out;
}
#contact-dialog::-webkit-scrollbar {
  width: 10px;
  display: block;
}
#contact-dialog::-webkit-scrollbar-track {
  background: var(--black);
}
#contact-dialog::-webkit-scrollbar-thumb {
  background-color: var(--light-yellow);
  border-radius: 10px;
  border: 2px solid var(--black);
}
#contact-dialog[open] {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
#contact-dialog.closing {
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(0.8);
  pointer-events: none;
}
#contact-dialog::backdrop {
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}
#contact-dialog[open]::backdrop {
  opacity: 1;
}
#contact-dialog .dialog-header {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 5px 0;
  flex-shrink: 0;
}
#contact-dialog .dialog-header .contact-title {
  font-size: 2.2rem;
  margin: 0;
  color: var(--white) !important;
}
#contact-dialog .dialog-header .close-btn {
  position: absolute;
  top: 50%;
  right: 1%;
  transform: translateY(-50%);
  background-color: var(--heavy-yellow);
  border: 1px solid var(--form-borders) !important;
  color: var(--white) !important;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
  z-index: 1010;
}
#contact-dialog .dialog-header .close-btn .close-icon-svg {
  width: 24px;
  height: 24px;
  pointer-events: none;
}
#contact-dialog .dialog-header .close-btn:hover {
  background-color: var(--light-red);
  color: var(--white) !important;
  border-color: var(--white) !important;
}
#contact-dialog #contact-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  gap: 10px;
  color: var(--white) !important;
}
#contact-dialog .credentials {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 10px;
  align-items: center;
  flex-grow: 1;
}
#contact-dialog .credentials .input-group {
  display: flex;
  flex-direction: column;
  width: 80%;
  gap: 5px;
}
#contact-dialog .credentials .input-group label {
  font-size: 1rem;
  color: var(--white) !important;
  font-weight: bold;
  text-align: left;
}
#contact-dialog .credentials .input-group .verification-wrapper {
  width: fit-content;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
#contact-dialog .credentials .input-group .verification-wrapper label {
  width: 100%;
  text-align: left;
}
#contact-dialog .credentials input, #contact-dialog .credentials textarea {
  font-size: 1.1rem;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  background-color: var(--input-bg);
  border: 1px solid transparent;
  color: var(--input-text);
}
#contact-dialog .credentials input::placeholder, #contact-dialog .credentials textarea::placeholder {
  color: var(--input-placeholder-text);
  opacity: 0.7;
}
#contact-dialog .credentials input:focus, #contact-dialog .credentials textarea:focus {
  outline: none;
  border: 1px solid var(--form-borders);
}
#contact-dialog .credentials textarea {
  min-height: 120px;
  flex-grow: 1;
  resize: none;
}
#contact-dialog .single-numbers {
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  width: 100%;
}
#contact-dialog .single-numbers input {
  width: 40px !important;
  height: 50px !important;
  font-size: 1.5rem;
  background-color: var(--input-bg);
  color: var(--input-text);
  text-align: center;
  border: 1px solid transparent;
}
#contact-dialog .single-numbers input:focus {
  outline: none;
  border: 1px solid var(--form-borders);
}
#contact-dialog #contact-submit-btn {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  font-size: 1.2rem;
  font-weight: bold;
  background-color: var(--form-button-bg);
  color: var(--form-button-text);
  width: 60%;
  max-width: 250px;
  height: 44px;
  border: none;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
#contact-dialog #contact-submit-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}
#contact-dialog #contact-submit-btn.btn-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
#contact-dialog .status-bar {
  width: 100%;
  min-height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}
#contact-dialog .status-bar #contact-status-wrapper {
  margin: 0;
  color: var(--white) !important;
}
#contact-dialog .status-bar .timer-highlight {
  font-weight: bold;
  color: var(--light-red) !important;
}

@media (orientation: portrait) {
  #contact-dialog {
    width: 80vw;
    height: 60vh;
  }
  #contact-dialog .credentials .input-group {
    width: 96%;
  }
}
@media (pointer: coarse) and (hover: none) and (orientation: portrait) {
  #contact-dialog {
    width: 95vw;
    height: 90vh;
  }
  #contact-dialog .credentials .input-group {
    width: 96%;
  }
  #contact-dialog .single-numbers input {
    width: 35px !important;
    height: 45px !important;
  }
}
@media (pointer: coarse) and (hover: none) and (orientation: landscape) {
  #contact-dialog {
    width: 80vw;
    height: 95vh;
  }
  #contact-dialog::-webkit-scrollbar {
    width: 8px;
  }
  #contact-dialog .credentials textarea {
    min-height: 80px;
  }
}
text#ethereum {
  font-size: 10px;
  font-weight: bold;
}

text#price {
  font-size: 11px;
  font-weight: bold;
}

text#eth-price {
  font-size: 10px;
  font-weight: bold;
}

text#lvl-up {
  font-size: 11px;
  font-weight: bold;
}

g#buy-next-lvl-text > text {
  font-size: 10px;
  font-weight: bold;
  stroke: black;
  stroke-width: 0.1px;
}

text#attack-btn-text {
  font-size: 9px;
  font-weight: bold;
  stroke: white;
  stroke-width: 0.1px;
}

text#realtor-service-text {
  font-size: 10px;
  font-weight: bold;
}

text#if-you-need-help-text {
  font-size: 7px;
  font-weight: bold;
}

text#click-here-text {
  font-size: 8px;
  font-weight: bold;
}

text#lvl-info-text {
  font-size: 14px;
  font-weight: bold;
}

text#home-btn-active-text {
  font-size: 11px;
  font-weight: bold;
}

text#land-btn-active-text {
  font-size: 11px;
  font-weight: bold;
}

text#education-btn-active-text {
  font-size: 11px;
  font-weight: bold;
}

text#power-btn-active-text {
  font-size: 11px;
  font-weight: bold;
}

text#business-btn-active-text {
  font-size: 11px;
  font-weight: bold;
}

text#education-skill-icon-text {
  font-size: 7px;
  font-weight: bold;
}

text#power-skill-icon-text {
  font-size: 7px;
  font-weight: bold;
}

text#business-skill-icon-text {
  font-size: 7px;
  font-weight: bold;
}

.bookmark-container [id$=-inactive] {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}
.bookmark-container [id$=-active-container] {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
}

.bookmark-container.active-bookmark [id$=-inactive] {
  opacity: 0;
  pointer-events: none;
}
.bookmark-container.active-bookmark [id$=-active-container] {
  opacity: 1;
  pointer-events: auto;
}

.bookmark-content {
  display: none;
}

.bookmark-content.active-bookmark {
  display: block;
}

.grayscale {
  filter: grayscale(100%);
  /* Для плавного перехода при наведении, если нужно */
  transition: filter 0.3s ease;
}

#business-skill-icon-container,
#power-skill-icon-container,
#education-skill-icon-container {
  cursor: pointer;
}
#business-skill-icon-container [id$=-circle-outside],
#business-skill-icon-container [id$=-text-extended],
#business-skill-icon-container [id$=-text-points],
#power-skill-icon-container [id$=-circle-outside],
#power-skill-icon-container [id$=-text-extended],
#power-skill-icon-container [id$=-text-points],
#education-skill-icon-container [id$=-circle-outside],
#education-skill-icon-container [id$=-text-extended],
#education-skill-icon-container [id$=-text-points] {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

#lvl-up-modal {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.9);
  top: 0;
  left: 0;
  z-index: 100;
}
#lvl-up-modal svg {
  width: 80%;
  height: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hide-modal {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.btn-disabled {
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: filter 0.3s ease;
  user-select: none;
}

/*
 * =============================================
 * Стилизация скроллбара под дизайн Sun Cent
 * =============================================
 */
/* --- 1. Стилизация для Firefox --- */
/* Устанавливаем цвета: 
   - Первый цвет (#FFEE15) - для ползунка (thumb)
   - Второй цвет (black) - для трека (track) 
*/
body {
  scrollbar-width: thin; /* Делаем скроллбар тонким */
  scrollbar-color: var(--light-yellow) var(--black);
}

/* --- 2. Стилизация для WebKit-браузеров (Chrome, Safari, Edge) --- */
/* Задаем ширину полосы прокрутки */
body::-webkit-scrollbar {
  width: 12px;
}

/* Стилизуем трек (фон), по которому движется ползунок.
   Делаем его черным, чтобы он сливался с фоном сайта. */
body::-webkit-scrollbar-track {
  background: var(--black);
}

/* Стилизуем сам ползунок.
   Используем яркий желтый цвет из вашего дизайна. */
body::-webkit-scrollbar-thumb {
  background-color: var(--heavy-yellow); /* Яркий желтый акцент */
  border-radius: 20px; /* Скругляем края для более мягкого вида */
  border: 3px solid var(--black); /* Создаем черную рамку вокруг ползунка */
}

/* Добавляем эффект при наведении на ползунок.
   Можно сделать его немного светлее или использовать другой цвет из палитры,
   например, зеленый. */
body::-webkit-scrollbar-thumb:hover {
  background-color: var(--light-yellow-hover); /* Более яркий желтый при наведении */
}

/* Скрываем стандартные кнопки со стрелками,
   так как они не вписываются в современный дизайн. */
body::-webkit-scrollbar-button {
  display: none;
}

/**
 * @file Skill Modal Styles
 * @description Refined layouts, exact theme colors, and smooth orientation handling.
 */
:root {
  /* Original Project Colors */
  --light-green: rgba(84, 155, 74, 1);
  --light-red: rgba(184, 46, 60, 1);
  --light-blue: rgba(40, 132, 189, 1);
  --light-yellow: rgba(240, 239, 66, 1);
}

.skill-hover-modal {
  /* Base positioning */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000000;
  /* Aesthetics */
  background: rgba(0, 0, 0, 0.95);
  border: 2px solid var(--light-green); /* Default border */
  color: #ffffff;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
  padding: 5%;
  box-sizing: border-box;
  font-family: "Noto Sans Thai Looped", sans-serif;
  overflow: hidden;
  /* Smooth transition properties */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.9); /* Start slightly smaller for a "pop" effect */
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* Smooth overshoot for a more "alive" feel */
  /* Skill-specific border colors (EXACT MATCHES) */
  /* Active state */
  /* Shared Typography */
  /* --- Orientation Logic --- */
}
.skill-hover-modal.type-education {
  border-color: var(--light-green);
}
.skill-hover-modal.type-power {
  border-color: var(--light-red);
}
.skill-hover-modal.type-business {
  border-color: var(--light-blue);
}
.skill-hover-modal.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.skill-hover-modal .skill-title {
  color: var(--light-yellow);
  text-transform: uppercase;
  margin: 0;
  font-size: 1.4rem;
  font-weight: bold;
}
.skill-hover-modal .skill-lvl, .skill-hover-modal .skill-name {
  margin: 5px 0 0 0;
  font-size: 1.1rem;
}
.skill-hover-modal .skill-description {
  white-space: pre-line;
  line-height: 1.5;
  font-size: 1rem;
  margin: 0;
}
@media (orientation: landscape) {
  .skill-hover-modal {
    width: 60vw;
    height: 70vh;
  }
  .skill-hover-modal .skill-hover-modal-portrait {
    display: none !important;
  }
  .skill-hover-modal .skill-hover-modal-landscape {
    display: flex !important;
    flex-direction: column;
    height: 100%;
    width: 100%;
  }
  .skill-hover-modal .skill-hover-modal-landscape .top {
    display: flex;
    flex-direction: row;
    height: auto;
    max-height: 70%;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .skill-hover-modal .skill-hover-modal-landscape .top .skill-icon {
    width: 50%;
    height: auto;
    object-fit: contain;
    margin: 0;
    padding: 0;
  }
  .skill-hover-modal .skill-hover-modal-landscape .top .skill-description-container {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .skill-hover-modal .skill-hover-modal-landscape .bottom {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow-y: auto;
    padding-top: 10px;
  }
}
@media (orientation: portrait) {
  .skill-hover-modal {
    width: 85vw;
    height: 60vh;
  }
  .skill-hover-modal .skill-hover-modal-landscape {
    display: none !important;
  }
  .skill-hover-modal .skill-hover-modal-portrait {
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    height: 100%;
    width: 100%;
  }
  .skill-hover-modal .skill-hover-modal-portrait .skill-description-container {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .skill-hover-modal .skill-hover-modal-portrait .skill-icon {
    width: 100%;
    max-height: 70%;
    height: auto;
    object-fit: contain;
    margin: 0;
    padding: 0;
  }
  .skill-hover-modal .skill-hover-modal-portrait .skill-description {
    flex: 1;
    width: 100%;
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 10px;
  }
}

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