.ach-fill {
  width: 100%;
  height: 100%;
  position: relative;
}
.ach-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, transparent 42%, rgba(0, 0, 0, 0.18) 100%);
  pointer-events: none;
}
.anim-goldPulse {
  animation: goldPulse 1.5s ease-in-out infinite;
}
@keyframes goldPulse {
  0% {
    box-shadow: 0cqi 0cqi 0.29239766cqi 0cqi rgba(212, 175, 55, 0.3), inset 0cqi 0cqi 0cqi 0.05847953cqi rgba(212, 175, 55, 0.2);
  }
  50% {
    box-shadow: 0cqi 0cqi 1.16959064cqi 0.29239766cqi rgba(212, 175, 55, 0.7), inset 0cqi 0cqi 0cqi 0.11695906cqi rgba(212, 175, 55, 0.5);
  }
  100% {
    box-shadow: 0cqi 0cqi 0.29239766cqi 0cqi rgba(212, 175, 55, 0.3), inset 0cqi 0cqi 0cqi 0.05847953cqi rgba(212, 175, 55, 0.2);
  }
}
@keyframes goldFlicker {
  0% {
    box-shadow: 0cqi 0cqi 0.46783626cqi 0.05847953cqi rgba(255, 215, 0, 0.4), inset 0cqi 0cqi 0cqi 0.11695906cqi rgba(255, 215, 0, 0.2);
  }
  20% {
    box-shadow: 0cqi 0cqi 1.05263158cqi 0.23391813cqi rgba(255, 215, 0, 0.7), inset 0cqi 0cqi 0cqi 0.11695906cqi rgba(255, 215, 0, 0.4);
  }
  40% {
    box-shadow: 0cqi 0cqi 0.58479532cqi 0.11695906cqi rgba(255, 215, 0, 0.5), inset 0cqi 0cqi 0cqi 0.11695906cqi rgba(255, 215, 0, 0.3);
  }
  60% {
    box-shadow: 0cqi 0cqi 1.4619883cqi 0.35087719cqi rgba(255, 215, 0, 0.8), inset 0cqi 0cqi 0cqi 0.1754386cqi rgba(255, 215, 0, 0.5);
  }
  80% {
    box-shadow: 0cqi 0cqi 0.70175439cqi 0.1754386cqi rgba(255, 215, 0, 0.5), inset 0cqi 0cqi 0cqi 0.11695906cqi rgba(255, 215, 0, 0.3);
  }
  100% {
    box-shadow: 0cqi 0cqi 0.46783626cqi 0.05847953cqi rgba(255, 215, 0, 0.4), inset 0cqi 0cqi 0cqi 0.11695906cqi rgba(255, 215, 0, 0.2);
  }
}
@keyframes goldSlide {
  0% {
    box-shadow: -0.58479532cqi 0cqi 0.87719298cqi -0.29239766cqi rgba(255, 215, 0, 0.7), inset 0cqi 0cqi 0cqi 0.05847953cqi rgba(255, 215, 0, 0.3);
  }
  25% {
    box-shadow: 0cqi 0cqi 1.16959064cqi 0.1754386cqi rgba(255, 215, 0, 0.9), inset 0cqi 0cqi 0cqi 0.11695906cqi rgba(255, 215, 0, 0.5);
  }
  50% {
    box-shadow: 0.58479532cqi 0cqi 0.87719298cqi -0.29239766cqi rgba(255, 215, 0, 0.7), inset 0cqi 0cqi 0cqi 0.05847953cqi rgba(255, 215, 0, 0.3);
  }
  75% {
    box-shadow: 0cqi 0cqi 1.16959064cqi 0.1754386cqi rgba(255, 215, 0, 0.9), inset 0cqi 0cqi 0cqi 0.11695906cqi rgba(255, 215, 0, 0.5);
  }
  100% {
    box-shadow: -0.58479532cqi 0cqi 0.87719298cqi -0.29239766cqi rgba(255, 215, 0, 0.7), inset 0cqi 0cqi 0cqi 0.05847953cqi rgba(255, 215, 0, 0.3);
  }
}
html {
  background: #000;
  --blue: #0d2dfe;
}
@media only screen and (min-width: 768px) {
  p {
    margin-bottom: 0.70175439cqi;
  }
}
.gamewrapper {
  display: flex;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
}
.gamewrapper-in {
  container-type: inline-size;
  container-name: game;
  width: min(100vw, 1600vh / 9);
  height: min(100vh, 900vw / 16);
  aspect-ratio: 16 / 9;
  /* по умолчанию */
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  transform: translate(0);
}
/* На узких экранах (ближе к 4:3) */
@media (max-aspect-ratio: 16/10) {
  .gamewrapper-in {
    aspect-ratio: 16 / 10;
    width: min(100vw, 1600vh / 10);
    height: min(100vh, 1000vw / 16);
  }
}
@media (max-aspect-ratio: 4/3) {
  .gamewrapper-in {
    aspect-ratio: 4 / 3;
    width: min(100vw, 400vh / 3);
    height: min(100vh, 300vw / 4);
  }
}
.gamewrapper-scroll {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: auto;
}
body {
  font-family: 'opensans', system-ui;
  font-weight: 400;
  font-style: normal;
  background: #000;
  color: #fff;
  user-select: none;
  cursor: url('../icons/cursors/cursor.png'), auto;
}
@media only screen and (min-width: 768px) {
  body {
    font-size: 0.81871345cqi;
  }
}
@media only screen and (max-width: 767px) {
  body {
    font-size: 14px;
  }
}
html,
body {
  overscroll-behavior: none;
}
body {
  transition: opacity 0.8s;
}
body.faded {
  pointer-events: none;
  opacity: 0;
}
html {
  /* Firefox */
  scrollbar-width: none;
  /* IE and Edge */
  -ms-overflow-style: none;
}
/* For WebKit browsers (Chrome, Safari, Opera) */
*::-webkit-scrollbar {
  display: none;
}
.buffs {
  position: absolute;
  top: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
@media only screen and (min-width: 768px) {
  .buffs {
    margin-top: 0.1754386cqi;
  }
}
@media only screen and (min-width: 768px) {
  .buffs {
    left: 0.40935673cqi;
  }
}
@media only screen and (min-width: 768px) {
  .buffs {
    right: 0.40935673cqi;
  }
}
.buffs .buff {
  background: #000;
  display: inline-flex;
  align-items: center;
  border: 2px solid #777777;
  box-shadow: 0px 0px 0px 0.1754386cqi #000;
}
@media only screen and (min-width: 768px) {
  .buffs .buff {
    padding: 0.29239766cqi;
  }
}
@media only screen and (min-width: 768px) {
  .buffs .buff {
    margin: 0.1754386cqi;
  }
}
@media only screen and (min-width: 768px) {
  .buffs .buff {
    border-width: 0.11695906cqi;
  }
}
@media only screen and (min-width: 768px) {
  .buffs .buff {
    border-radius: 0.29239766cqi;
  }
}
.buffs img.turns-icons {
  opacity: 0.6;
}
@media only screen and (min-width: 768px) {
  .buffs img.turns-icons {
    height: 1.22807018cqi;
  }
}
@media only screen and (min-width: 768px) {
  .buffs img.turns-icons {
    margin-right: 0.23391813cqi;
  }
}
@media only screen and (min-width: 768px) {
  .buffs .buff-icon img {
    height: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  .buffs .buff-icon img {
    margin-right: 0.46783626cqi;
  }
}
.buffs .buff-icon:last-child img {
  margin-right: 0;
}
.buffs .buff-turns {
  white-space: nowrap;
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .buffs .buff-turns {
    font-size: 1.16959064cqi;
  }
}
@media only screen and (max-width: 767px) {
  .buffs .buff-turns {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) {
  .buffs .buff-value {
    margin-right: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .buffs .buff-value {
    font-size: 1.16959064cqi;
  }
}
@media only screen and (max-width: 767px) {
  .buffs .buff-value {
    font-size: 20px;
  }
}
.buffs .buff-value:last-child {
  margin-right: 0;
}
.std-build-modal .modal-content {
  position: absolute;
  left: 50%;
  top: 50%;
  background: url(../images/build-modal.jpg) center no-repeat;
  transform: translate(-50%, -50%);
  background-size: cover;
  border: 10px solid #432e18;
  border-radius: 0;
}
@media only screen and (min-width: 768px) {
  .std-build-modal .modal-content {
    width: 46.78362573cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-build-modal .modal-content {
    border-width: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-build-modal .modal-content {
    padding: 1.75438596cqi;
  }
}
.std-build-modal .std-build-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media only screen and (min-width: 768px) {
  .std-build-modal .std-build-modal-header {
    margin-top: -0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-build-modal .std-build-modal-header {
    margin-bottom: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-build-modal .std-build-modal-title {
    font-size: 1.16959064cqi;
  }
}
@media only screen and (max-width: 767px) {
  .std-build-modal .std-build-modal-title {
    font-size: 20px;
  }
}
.std-build-modal .modal-dialog {
  margin: 0;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: auto;
}
.std-btn-blue {
  font-family: var(--fontTitle);
  background: var(--blue);
  color: #ffefdd;
  box-shadow: inset 0cqi 0.05847953cqi 0.1754386cqi 0cqi #1054ff, 0cqi 0.29239766cqi 0cqi 0cqi #0e318b;
  font-weight: bold;
  transition: 0.3s;
  display: inline-block;
  border: none;
  outline: none;
}
@media only screen and (min-width: 768px) {
  .std-btn-blue {
    font-size: 1.28654971cqi;
  }
}
@media only screen and (max-width: 767px) {
  .std-btn-blue {
    font-size: 22px;
  }
}
@media only screen and (min-width: 768px) {
  .std-btn-blue {
    border-radius: 0.46783626cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-btn-blue {
    padding-top: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-btn-blue {
    padding-right: 2.33918129cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-btn-blue {
    padding-bottom: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-btn-blue {
    padding-left: 2.33918129cqi;
  }
}
.std-btn-blue.--block {
  display: block;
  text-align: center;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .std-btn-blue.--sm {
    padding-top: 0.76023392cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-btn-blue.--sm {
    padding-right: 1.6374269cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-btn-blue.--sm {
    padding-bottom: 0.76023392cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-btn-blue.--sm {
    padding-left: 1.6374269cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-btn-blue.--sm {
    font-size: 1.16959064cqi;
  }
}
@media only screen and (max-width: 767px) {
  .std-btn-blue.--sm {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) {
  .std-btn-blue.--xs {
    padding-top: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-btn-blue.--xs {
    padding-right: 1.28654971cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-btn-blue.--xs {
    padding-bottom: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-btn-blue.--xs {
    padding-left: 1.28654971cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-btn-blue.--xs {
    font-size: 1.05263158cqi;
  }
}
@media only screen and (max-width: 767px) {
  .std-btn-blue.--xs {
    font-size: 18px;
  }
}
.std-btn-blue.transparent {
  background: transparent !important;
  box-shadow: none !important;
}
.std-btn-blue:hover {
  background: #2d49ff;
  transform: translateY(-2px);
  box-shadow: inset 0cqi 0.05847953cqi 0.1754386cqi 0cqi #5d8bff, 0cqi 0.40935673cqi 0cqi 0cqi #0e318b;
}
.std-btn-blue:active {
  transform: translateY(4px);
  box-shadow: inset 0cqi 0.05847953cqi 0.1754386cqi 0cqi #5d8bff, 0cqi 0.11695906cqi 0cqi 0cqi #0e318b;
}
.std-btn-blue.fixed-bottom {
  position: fixed;
  z-index: 5;
}
@media only screen and (min-width: 768px) {
  .std-btn-blue.fixed-bottom {
    bottom: 2.92397661cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-btn-blue.fixed-bottom {
    right: 1.75438596cqi;
  }
}
.std-btn-blue[disabled],
.std-btn-blue .disabled {
  opacity: 0.4;
  pointer-events: none;
}
.std-color-orange {
  color: #ffcd89;
}
.custom-scrollbar {
  overflow-y: auto !important;
  overflow-x: auto !important;
}
.custom-scrollbar.--scrollable {
  overflow-y: scroll !important;
}
@media only screen and (min-width: 768px) {
  .custom-scrollbar.--scrollable {
    padding-right: 0.46783626cqi;
  }
}
.custom-scrollbar.--scrollable::-webkit-scrollbar {
  -webkit-appearance: none !important;
  display: block !important;
}
@media only screen and (min-width: 768px) {
  .custom-scrollbar.--scrollable::-webkit-scrollbar {
    width: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .custom-scrollbar.--scrollable::-webkit-scrollbar {
    height: 0.58479532cqi;
  }
}
.custom-scrollbar.--scrollable::-webkit-scrollbar-track {
  background: #2a241c !important;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.6);
}
@media only screen and (min-width: 768px) {
  .custom-scrollbar.--scrollable::-webkit-scrollbar-track {
    border-radius: 0.1754386cqi;
  }
}
.custom-scrollbar.--scrollable::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ffca77 0%, #cc7c00 45%, #8a5500 100%) !important;
  border: 1px solid #463222;
  box-shadow: 0 0 4px rgba(204, 124, 0, 0.35);
}
@media only screen and (min-width: 768px) {
  .custom-scrollbar.--scrollable::-webkit-scrollbar-thumb {
    border-radius: 0.1754386cqi;
  }
}
@media only screen and (min-width: 768px) {
  .custom-scrollbar.--scrollable::-webkit-scrollbar-thumb {
    min-height: 1.87134503cqi;
  }
}
.custom-scrollbar.--scrollable::-webkit-scrollbar-thumb:hover,
.custom-scrollbar.--scrollable::-webkit-scrollbar-thumb:active,
.custom-scrollbar.--scrollable::-webkit-scrollbar-thumb:window-inactive {
  background: linear-gradient(180deg, #ffca77 0%, #cc7c00 45%, #8a5500 100%) !important;
}
.custom-scrollbar.--scrollable::-webkit-scrollbar-corner {
  background: #2a241c !important;
}
@supports not selector(::-webkit-scrollbar) {
  .custom-scrollbar.--scrollable {
    scrollbar-width: thin;
    scrollbar-color: #cc7c00 #2a241c;
  }
}
.std-background-content {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: auto;
}
@media only screen and (min-width: 768px) {
  .std-background-content {
    top: 0cqi;
  }
}
.std-background-content.bot {
  background-position: center bottom;
}
.std-background-content.shop {
  background-image: url(../images/backgrounds/shop.jpg);
}
.std-background-content.treasure {
  background-image: url(../images/backgrounds/treasure.jpg);
}
.std-background-content.camp {
  background-image: url(../images/backgrounds/camp.jpg);
}
.std-background-content.secret {
  background-image: url(../images/backgrounds/secret.jpg);
}
.std-left-title {
  position: fixed;
  font-family: var(--fontTitle);
  z-index: 20;
}
@media only screen and (min-width: 768px) {
  .std-left-title {
    font-size: 1.98830409cqi;
  }
}
@media only screen and (max-width: 767px) {
  .std-left-title {
    font-size: 34px;
  }
}
@media only screen and (min-width: 768px) {
  .std-left-title {
    left: 1.6374269cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-left-title {
    top: 0.93567251cqi;
  }
}
.fader {
  transition: 0.8s;
}
.fader.active {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
@font-face {
  font-family: 'opensans';
  src: url('../fonts/opensans.ttf') format('truetype');
}
@font-face {
  font-family: 'Play-Regular';
  src: url('../fonts/Play-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Play-Bold';
  src: url('../fonts/Play-Bold.ttf') format('truetype');
}
body {
  --fontTitle: 'Play-Bold';
}
.font-title {
  font-family: var(--fontTitle);
}
.grad-bronze {
  background: #E1B38A;
  background: linear-gradient(180deg, #e1b38a 0%, #714b39 100%);
}
.grad-bronze-inner {
  background: #535155;
  background: linear-gradient(180deg, #141116 0%, #1e1b21 100%);
}
.grad-wood {
  background: #E1B38A;
  background: linear-gradient(180deg, #f3d494 0%, #9e6f45 100%);
}
.icon {
  background-position: center;
  background-size: cover;
}
.icon-circle {
  border: 3px solid #000;
  border-radius: 50%;
  background-color: #000;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: inline-block;
}
@media only screen and (min-width: 768px) {
  .icon-circle {
    width: 3.04093567cqi;
  }
}
@media only screen and (min-width: 768px) {
  .icon-circle {
    height: 3.04093567cqi;
  }
}
@media only screen and (min-width: 768px) {
  .icon-circle {
    border-width: 0.1754386cqi;
  }
}
.icon-circle.deck-add {
  background-image: url(../icons/ui/deck-add.png);
}
.icon-circle.deck-rename {
  background-image: url(../icons/ui/deck-rename.png);
}
.icon-circle.deck-delete {
  background-image: url(../icons/ui/deck-delete.png);
}
.item-glow {
  animation: itemDiscover 0.6s ease-out forwards;
}
.item-glow-ray {
  animation: rayOfLight 0.8s ease-out forwards;
}
@keyframes itemDiscover {
  0% {
    transform: scale(1);
    filter: brightness(1) drop-shadow(0 0 0 rgba(255, 215, 0, 0));
  }
  30% {
    transform: scale(1.3);
    filter: brightness(1.4) drop-shadow(0 0 12px rgba(255, 215, 0, 0.9));
  }
  60% {
    transform: scale(1.1);
    filter: brightness(1.2) drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
  }
  100% {
    transform: scale(1);
    filter: brightness(1) drop-shadow(0 0 4px rgba(255, 215, 0, 0.3));
  }
}
@keyframes gentlePulse {
  0%,
  100% {
    filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.7));
  }
}
@keyframes rayOfLight {
  0% {
    transform: scale(1);
    filter: brightness(1) drop-shadow(0 0 0 gold);
  }
  25% {
    transform: scale(1.2) rotate(8deg);
    filter: brightness(1.6) drop-shadow(0 0 15px gold);
  }
  50% {
    transform: scale(0.9) rotate(-3deg);
    filter: brightness(1.3) drop-shadow(0 0 8px gold);
  }
  100% {
    transform: scale(1) rotate(0deg);
    filter: brightness(1) drop-shadow(0 0 0px rgba(255, 215, 0, 0.5));
  }
}
@keyframes rainbowGlow {
  0% {
    transform: scale(1);
    filter: brightness(1) drop-shadow(0 0 0 gold);
  }
  30% {
    transform: scale(1.25);
    filter: brightness(1.4) drop-shadow(0 0 12px #ff00ff) drop-shadow(0 0 6px #00ffff);
  }
  60% {
    transform: scale(1.1);
    filter: brightness(1.2) drop-shadow(0 0 8px #ffff00) drop-shadow(0 0 4px #ff00ff);
  }
  100% {
    transform: scale(1);
    filter: brightness(1) drop-shadow(0 0 4px rgba(255, 215, 0, 0.4));
  }
}
.link-bg {
  text-decoration: none !important;
  background: #a78223;
  transition: 0.3s;
  color: #fff !important;
}
.link-bg:hover {
  cursor: url('../icons/cursors/pointer.png'), auto;
  background: #cf9c17;
}
/* Контейнер для линий */
.connection-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  overflow: visible;
}
/* Базовые стили для всех линий */
.connection-line {
  fill: none;
  stroke-linecap: round;
  animation: var(--animation-name, flowDash) var(--animation-speed, 2s) linear infinite;
}
/* Свечение */
/* ========== ПЛАВНЫЕ БЕСКОНЕЧНЫЕ АНИМАЦИИ ========== */
/* Простая волна - плавное движение */
@keyframes flowDash {
  from {
    stroke-dashoffset: 60;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes flowDashReverse {
  from {
    stroke-dashoffset: -60;
  }
  to {
    stroke-dashoffset: 0;
  }
}
/* Пульсация - плавное изменение ширины */
@keyframes smoothPulse {
  0% {
    opacity: 0.7;
  }
  @media only screen and (min-width: 768px) {
    0% {
      stroke-width: 0.11695906cqi;
    }
  }
  50% {
    opacity: 1;
  }
  @media only screen and (min-width: 768px) {
    50% {
      stroke-width: 0.29239766cqi;
    }
  }
  100% {
    opacity: 0.7;
  }
  @media only screen and (min-width: 768px) {
    100% {
      stroke-width: 0.11695906cqi;
    }
  }
}
/* Пульсация с движением */
@keyframes pulseFlow {
  0% {
    stroke-dashoffset: 60;
  }
  @media only screen and (min-width: 768px) {
    0% {
      stroke-width: 0.11695906cqi;
    }
  }
  50% {
    stroke-dashoffset: 30;
  }
  @media only screen and (min-width: 768px) {
    50% {
      stroke-width: 0.23391813cqi;
    }
  }
  100% {
    stroke-dashoffset: 0;
  }
  @media only screen and (min-width: 768px) {
    100% {
      stroke-width: 0.11695906cqi;
    }
  }
}
/* Мерцание - плавное изменение яркости */
@keyframes smoothGlow {
  0% {
    filter: drop-shadow(0 0 2px currentColor);
    opacity: 0.8;
  }
  50% {
    filter: drop-shadow(0 0 12px currentColor);
    opacity: 1;
  }
  100% {
    filter: drop-shadow(0 0 2px currentColor);
    opacity: 0.8;
  }
}
/* Двойное мерцание */
@keyframes doubleGlow {
  0% {
    filter: drop-shadow(0 0 2px currentColor) drop-shadow(0 0 0px currentColor);
    opacity: 0.7;
  }
  33% {
    filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 0 4px currentColor);
    opacity: 0.9;
  }
  66% {
    filter: drop-shadow(0 0 12px currentColor) drop-shadow(0 0 8px currentColor);
    opacity: 1;
  }
  100% {
    filter: drop-shadow(0 0 2px currentColor) drop-shadow(0 0 0px currentColor);
    opacity: 0.7;
  }
}
/* Огонь - пульсация с тепловым мерцанием */
@keyframes fireGlow {
  0% {
    filter: drop-shadow(0 0 3px #ff5500) drop-shadow(0 0 1px #ff3300);
    opacity: 0.9;
  }
  @media only screen and (min-width: 768px) {
    0% {
      stroke-width: 0.1754386cqi;
    }
  }
  25% {
    filter: drop-shadow(0 0 8px #ff8800) drop-shadow(0 0 4px #ff5500);
    opacity: 1;
  }
  @media only screen and (min-width: 768px) {
    25% {
      stroke-width: 0.29239766cqi;
    }
  }
  50% {
    filter: drop-shadow(0 0 12px #ffaa00) drop-shadow(0 0 8px #ff6600);
    opacity: 1;
  }
  @media only screen and (min-width: 768px) {
    50% {
      stroke-width: 0.35087719cqi;
    }
  }
  75% {
    filter: drop-shadow(0 0 8px #ff8800) drop-shadow(0 0 4px #ff5500);
    opacity: 0.9;
  }
  @media only screen and (min-width: 768px) {
    75% {
      stroke-width: 0.23391813cqi;
    }
  }
  100% {
    filter: drop-shadow(0 0 3px #ff5500) drop-shadow(0 0 1px #ff3300);
    opacity: 0.9;
  }
  @media only screen and (min-width: 768px) {
    100% {
      stroke-width: 0.1754386cqi;
    }
  }
}
/* Лед - мерцание с холодным свечением */
@keyframes iceGlow {
  0% {
    filter: drop-shadow(0 0 2px #88ccff) drop-shadow(0 0 1px #aaddff);
    opacity: 0.8;
  }
  33% {
    filter: drop-shadow(0 0 8px #aaddff) drop-shadow(0 0 4px #88ccff);
    opacity: 1;
  }
  66% {
    filter: drop-shadow(0 0 12px #ffffff) drop-shadow(0 0 8px #aaddff);
    opacity: 1;
  }
  100% {
    filter: drop-shadow(0 0 2px #88ccff) drop-shadow(0 0 1px #aaddff);
    opacity: 0.8;
  }
}
/* Яд - плавное движение капель */
@keyframes poisonFlow {
  0% {
    stroke-dashoffset: 60;
    filter: drop-shadow(0 0 2px #88ff88);
  }
  50% {
    stroke-dashoffset: 30;
    filter: drop-shadow(0 0 8px #44aa44);
  }
  100% {
    stroke-dashoffset: 0;
    filter: drop-shadow(0 0 2px #88ff88);
  }
}
/* Яд - плавное движение капель */
@keyframes goldstealFlow {
  0% {
    stroke-dashoffset: -100;
    filter: drop-shadow(0 0 4px #000000);
  }
  50% {
    stroke-dashoffset: -50;
    filter: drop-shadow(0 0 1px #000000);
  }
  100% {
    stroke-dashoffset: 0;
    filter: drop-shadow(0 0 4px #000000);
  }
}
/* Земля - плавное дрожание */
@keyframes earthTremor {
  0% {
    transform: translate(0px, 0px);
    filter: drop-shadow(0 0 2px #886633);
  }
  20% {
    transform: translate(-1px, 0.5px);
  }
  40% {
    transform: translate(1px, -0.5px);
  }
  60% {
    transform: translate(-0.5px, 1px);
  }
  80% {
    transform: translate(0.5px, -1px);
  }
  100% {
    transform: translate(0px, 0px);
    filter: drop-shadow(0 0 2px #886633);
  }
}
/* Вода - плавные волны */
@keyframes waterWave {
  0% {
    filter: drop-shadow(0 0 2px #3388ff);
  }
  @media only screen and (min-width: 768px) {
    0% {
      stroke-width: 0.1754386cqi;
    }
  }
  25% {
    filter: drop-shadow(0 0 8px #44aaff);
  }
  @media only screen and (min-width: 768px) {
    25% {
      stroke-width: 0.23391813cqi;
    }
  }
  50% {
    filter: drop-shadow(0 0 12px #88aaff);
  }
  @media only screen and (min-width: 768px) {
    50% {
      stroke-width: 0.29239766cqi;
    }
  }
  75% {
    filter: drop-shadow(0 0 8px #44aaff);
  }
  @media only screen and (min-width: 768px) {
    75% {
      stroke-width: 0.23391813cqi;
    }
  }
  100% {
    filter: drop-shadow(0 0 2px #3388ff);
  }
  @media only screen and (min-width: 768px) {
    100% {
      stroke-width: 0.1754386cqi;
    }
  }
}
/* Вода - плавные волны */
@keyframes attackWave {
  0% {
    filter: drop-shadow(0 0 2px #3388ff);
  }
  @media only screen and (min-width: 768px) {
    0% {
      stroke-width: 0.1754386cqi;
    }
  }
  25% {
    filter: drop-shadow(0 0 8px #44aaff);
  }
  @media only screen and (min-width: 768px) {
    25% {
      stroke-width: 0.23391813cqi;
    }
  }
  50% {
    filter: drop-shadow(0 0 12px #88aaff);
  }
  @media only screen and (min-width: 768px) {
    50% {
      stroke-width: 0.29239766cqi;
    }
  }
  75% {
    filter: drop-shadow(0 0 8px #44aaff);
  }
  @media only screen and (min-width: 768px) {
    75% {
      stroke-width: 0.23391813cqi;
    }
  }
  100% {
    filter: drop-shadow(0 0 2px #3388ff);
  }
  @media only screen and (min-width: 768px) {
    100% {
      stroke-width: 0.1754386cqi;
    }
  }
}
/* Ветер - плавное течение */
@keyframes windFlow {
  0% {
    stroke-dashoffset: 80;
    filter: drop-shadow(0 0 2px #ccffcc);
  }
  100% {
    stroke-dashoffset: 0;
    filter: drop-shadow(0 0 8px #aaffaa);
  }
}
@keyframes injuryFlow {
  0% {
    stroke-dashoffset: 90;
    filter: drop-shadow(0 0 0px #000000);
  }
  50% {
    filter: drop-shadow(0 0 2px #ff0000);
  }
  100% {
    stroke-dashoffset: 0;
    filter: drop-shadow(0 0 0px #000000);
  }
}
/* Тьма - плавное пульсирование */
@keyframes darkPulse {
  0% {
    opacity: 0.5;
    filter: drop-shadow(0 0 3px #aa44aa);
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 15px #880088);
  }
  100% {
    opacity: 0.5;
    filter: drop-shadow(0 0 3px #aa44aa);
  }
}
/* Свет - плавное сияние */
@keyframes holyPulse {
  0% {
    filter: drop-shadow(0 0 5px #ffffaa);
  }
  @media only screen and (min-width: 768px) {
    0% {
      stroke-width: 0.1754386cqi;
    }
  }
  50% {
    filter: drop-shadow(0 0 25px #ffffff);
  }
  @media only screen and (min-width: 768px) {
    50% {
      stroke-width: 0.29239766cqi;
    }
  }
  100% {
    filter: drop-shadow(0 0 5px #ffffaa);
  }
  @media only screen and (min-width: 768px) {
    100% {
      stroke-width: 0.1754386cqi;
    }
  }
}
/* Магия - плавное переливание */
@keyframes magicFlow {
  0% {
    stroke-dashoffset: 60;
    filter: drop-shadow(0 0 2px #aa88ff) hue-rotate(0deg);
  }
  33% {
    filter: drop-shadow(0 0 12px #ff88ff) hue-rotate(30deg);
  }
  66% {
    filter: drop-shadow(0 0 12px #88aaff) hue-rotate(60deg);
  }
  100% {
    stroke-dashoffset: 0;
    filter: drop-shadow(0 0 2px #aa88ff) hue-rotate(0deg);
  }
}
/* Искры - быстрое мерцание */
@keyframes sparkFlicker {
  0% {
    filter: drop-shadow(0 0 2px gold);
    opacity: 0.5;
  }
  @media only screen and (min-width: 768px) {
    0% {
      stroke-width: 0.11695906cqi;
    }
  }
  25% {
    filter: drop-shadow(0 0 10px orange) drop-shadow(0 0 5px yellow);
    opacity: 1;
  }
  @media only screen and (min-width: 768px) {
    25% {
      stroke-width: 0.23391813cqi;
    }
  }
  50% {
    filter: drop-shadow(0 0 15px orange) drop-shadow(0 0 10px yellow);
    opacity: 1;
  }
  @media only screen and (min-width: 768px) {
    50% {
      stroke-width: 0.29239766cqi;
    }
  }
  75% {
    filter: drop-shadow(0 0 8px gold) drop-shadow(0 0 4px orange);
    opacity: 0.8;
  }
  @media only screen and (min-width: 768px) {
    75% {
      stroke-width: 0.1754386cqi;
    }
  }
  100% {
    filter: drop-shadow(0 0 2px gold);
    opacity: 0.5;
  }
  @media only screen and (min-width: 768px) {
    100% {
      stroke-width: 0.11695906cqi;
    }
  }
}
/* Энергия - плавный поток */
@keyframes energyFlow {
  0% {
    stroke-dashoffset: 60;
    filter: drop-shadow(0 0 2px #ffff00);
  }
  @media only screen and (min-width: 768px) {
    0% {
      stroke-width: 0.11695906cqi;
    }
  }
  25% {
    filter: drop-shadow(0 0 10px #ffaa00);
  }
  @media only screen and (min-width: 768px) {
    25% {
      stroke-width: 0.23391813cqi;
    }
  }
  50% {
    stroke-dashoffset: 30;
    filter: drop-shadow(0 0 20px #ff8800);
  }
  @media only screen and (min-width: 768px) {
    50% {
      stroke-width: 0.29239766cqi;
    }
  }
  75% {
    filter: drop-shadow(0 0 10px #ffaa00);
  }
  @media only screen and (min-width: 768px) {
    75% {
      stroke-width: 0.1754386cqi;
    }
  }
  100% {
    stroke-dashoffset: 0;
    filter: drop-shadow(0 0 2px #ffff00);
  }
  @media only screen and (min-width: 768px) {
    100% {
      stroke-width: 0.11695906cqi;
    }
  }
}
/* Лечение - плавное пульсирование */
@keyframes healPulse {
  0% {
    filter: drop-shadow(0 0 3px #88ff88);
  }
  @media only screen and (min-width: 768px) {
    0% {
      stroke-width: 0.1754386cqi;
    }
  }
  50% {
    filter: drop-shadow(0 0 20px #aaffaa);
  }
  @media only screen and (min-width: 768px) {
    50% {
      stroke-width: 0.35087719cqi;
    }
  }
  100% {
    filter: drop-shadow(0 0 3px #88ff88);
  }
  @media only screen and (min-width: 768px) {
    100% {
      stroke-width: 0.1754386cqi;
    }
  }
}
/* Проклятие - плавное извивание */
@keyframes curseWrithe {
  0% {
    transform: translate(0px, 0px);
    filter: drop-shadow(0 0 3px #880088);
  }
  20% {
    transform: translate(1px, -0.5px);
    filter: drop-shadow(0 0 8px #aa44aa);
  }
  40% {
    transform: translate(-1px, 1px);
    filter: drop-shadow(0 0 12px #660066);
  }
  60% {
    transform: translate(0.5px, -1px);
    filter: drop-shadow(0 0 8px #aa44aa);
  }
  80% {
    transform: translate(-0.5px, 0.5px);
    filter: drop-shadow(0 0 5px #880088);
  }
  100% {
    transform: translate(0px, 0px);
    filter: drop-shadow(0 0 3px #880088);
  }
}
/* Неон - плавное мерцание */
@keyframes neonGlow {
  0% {
    opacity: 0.7;
    filter: drop-shadow(0 0 5px currentColor);
  }
  33% {
    opacity: 0.9;
    filter: drop-shadow(0 0 15px currentColor) drop-shadow(0 0 5px currentColor);
  }
  66% {
    opacity: 1;
    filter: drop-shadow(0 0 25px currentColor) drop-shadow(0 0 15px currentColor);
  }
  100% {
    opacity: 0.7;
    filter: drop-shadow(0 0 5px currentColor);
  }
}
/* Радуга - плавная смена цветов */
@keyframes rainbowFlow {
  0% {
    stroke-dashoffset: 60;
    filter: drop-shadow(0 0 2px #ff0000) hue-rotate(0deg);
  }
  33% {
    filter: drop-shadow(0 0 10px #00ff00) hue-rotate(120deg);
  }
  66% {
    filter: drop-shadow(0 0 10px #0000ff) hue-rotate(240deg);
  }
  100% {
    stroke-dashoffset: 0;
    filter: drop-shadow(0 0 2px #ff0000) hue-rotate(360deg);
  }
}
/* Молния - очень быстрое мерцание */
@keyframes lightningFlash {
  0% {
    opacity: 1;
    filter: drop-shadow(0 0 10px #ffff00);
  }
  @media only screen and (min-width: 768px) {
    0% {
      stroke-width: 0.23391813cqi;
    }
  }
  20% {
    opacity: 0.2;
    filter: drop-shadow(0 0 20px #ffffff);
  }
  @media only screen and (min-width: 768px) {
    20% {
      stroke-width: 0.11695906cqi;
    }
  }
  40% {
    opacity: 1;
    filter: drop-shadow(0 0 30px #ffffaa);
  }
  @media only screen and (min-width: 768px) {
    40% {
      stroke-width: 0.35087719cqi;
    }
  }
  60% {
    opacity: 0.3;
    filter: drop-shadow(0 0 15px #ffff00);
  }
  @media only screen and (min-width: 768px) {
    60% {
      stroke-width: 0.1754386cqi;
    }
  }
  80% {
    opacity: 0.8;
    filter: drop-shadow(0 0 25px #ffaa00);
  }
  @media only screen and (min-width: 768px) {
    80% {
      stroke-width: 0.29239766cqi;
    }
  }
  100% {
    opacity: 1;
    filter: drop-shadow(0 0 10px #ffff00);
  }
  @media only screen and (min-width: 768px) {
    100% {
      stroke-width: 0.23391813cqi;
    }
  }
}
/* ========== КЛАССЫ ЛИНИЙ ========== */
/* Базовые */
.line-wave {
  --animation-name: flowDash;
  --animation-speed: 3s;
}
.line-pulse {
  --animation-name: smoothPulse;
  --animation-speed: 2s;
}
.line-dashed {
  --animation-name: flowDash;
  --animation-speed: 2.5s;
}
.line-solid {
  --animation-name: smoothPulse;
  --animation-speed: 3s;
}
/* Магические */
.line-magic {
  --animation-name: magicFlow;
  --animation-speed: 4s;
}
.line-lightning {
  --animation-name: lightningFlash;
  --animation-speed: 0.3s;
}
.line-fire {
  --animation-name: fireGlow;
  --animation-speed: 2s;
}
.line-ice {
  --animation-name: iceGlow;
  --animation-speed: 3s;
}
.line-poison {
  --animation-name: poisonFlow;
  --animation-speed: 3.5s;
}
.line-goldsteal {
  --animation-name: goldstealFlow;
  --animation-speed: 1.5s;
}
.line-lifesteal {
  --animation-name: flowDashReverse;
}
.line-holy {
  --animation-name: holyPulse;
  --animation-speed: 2.5s;
}
.line-dark {
  --animation-name: darkPulse;
  --animation-speed: 3s;
}
.line-arcane {
  --animation-name: magicFlow;
  --animation-speed: 3.5s;
}
/* Элементальные */
.line-earth {
  --animation-name: earthTremor;
  --animation-speed: 4s;
}
.line-wind {
  --animation-name: windFlow;
  --animation-speed: 3s;
}
.line-injury {
  --animation-name: injuryFlow;
  --animation-speed: 3s;
}
.line-water {
  --animation-name: waterWave;
  --animation-speed: 3.5s;
}
.line-sneakstrike {
  animation: none;
}
@media only screen and (min-width: 768px) {
  .line-sneakstrike {
    stroke-dasharray: 0.23391813cqi 0.81871345cqi;
  }
}
/* Эмоциональные */
.line-rage {
  --animation-name: fireGlow;
  --animation-speed: 1.5s;
}
.line-heal {
  --animation-name: healPulse;
  --animation-speed: 2.5s;
}
.line-protect {
  --animation-name: holyPulse;
  --animation-speed: 3s;
}
.line-curse {
  --animation-name: curseWrithe;
  --animation-speed: 4s;
}
.line-charm {
  --animation-name: magicFlow;
  --animation-speed: 3s;
}
/* Специальные */
.line-spark {
  --animation-name: sparkFlicker;
  --animation-speed: 0.8s;
}
.line-glow {
  --animation-name: smoothGlow;
  --animation-speed: 2.5s;
}
.line-neon {
  --animation-name: neonGlow;
  --animation-speed: 2s;
}
.line-rainbow {
  --animation-name: rainbowFlow;
  --animation-speed: 5s;
}
/* Потоки */
.line-flow {
  --animation-name: flowDash;
  --animation-speed: 3s;
}
.line-stream {
  --animation-name: windFlow;
  --animation-speed: 2.5s;
}
.line-pulse-wave {
  --animation-name: pulseFlow;
  --animation-speed: 3s;
}
.line-energy {
  --animation-name: energyFlow;
  --animation-speed: 2s;
}
/* Множественные линии */
.line-double {
  --animation-name: flowDash;
  --animation-speed: 3s;
}
@media only screen and (min-width: 768px) {
  .line-double {
    stroke-dasharray: 0.58479532cqi 0.58479532cqi;
  }
}
.line-triple {
  --animation-name: flowDash;
  --animation-speed: 4s;
  stroke-dasharray: 5 5 10 5;
}
.line-dotted {
  --animation-name: flowDash;
  --animation-speed: 2s;
}
@media only screen and (min-width: 768px) {
  .line-dotted {
    stroke-dasharray: 0.11695906cqi 0.46783626cqi;
  }
}
.line-zigzag {
  --animation-name: flowDash;
  --animation-speed: 3.5s;
  stroke-dasharray: 10 10 20 5;
}
.std-list-item {
  border: 3px solid #675e50;
  display: flex;
  background: #504130;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .std-list-item {
    border-width: 0.1754386cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-list-item {
    margin-bottom: 0.87719298cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-list-item {
    padding: 0.87719298cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-list-item {
    border-radius: 0.1754386cqi;
  }
}
.std-list-item:hover {
  cursor: url('../icons/cursors/pointer.png'), auto;
  border-color: #988b7d;
  background: #6d5c48;
}
body > canvas {
  pointer-events: none;
}
body.modal-open .gamewrapper {
  filter: blur(5px);
}
.std-modal-closer {
  background: url(../icons/closer.png) center no-repeat;
  background-size: contain;
  position: fixed;
  overflow: hidden;
  box-shadow: 0px 0px 0px 0.1754386cqi #000;
  border-radius: 50%;
  transition: 0.3s;
  z-index: 20;
}
@media only screen and (min-width: 768px) {
  .std-modal-closer {
    width: 4.09356725cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-modal-closer {
    height: 4.09356725cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-modal-closer {
    right: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-modal-closer {
    top: 1.75438596cqi;
  }
}
.std-modal-closer:hover {
  transform: translateY(-3px);
}
.std-modal-closer-in {
  background: url(../icons/closer.png) center no-repeat;
  background-size: contain;
  transition: 0.3s;
  z-index: 20;
  overflow: hidden;
  box-shadow: 0px 0px 0px 0.1754386cqi #000;
  border-radius: 50%;
}
@media only screen and (min-width: 768px) {
  .std-modal-closer-in {
    width: 4.09356725cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-modal-closer-in {
    height: 4.09356725cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-modal-closer-in {
    min-width: 4.09356725cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-modal-closer-in {
    min-height: 4.09356725cqi;
  }
}
.std-modal-closer-in:hover {
  transform: translateY(-3px);
}
.std-modal-closer-sm {
  background: url(../icons/closer.png) center no-repeat;
  background-size: contain;
  position: fixed;
  transition: 0.3s;
  overflow: hidden;
  box-shadow: 0px 0px 0px 0.11695906cqi #000;
  border-radius: 50%;
  z-index: 20;
}
@media only screen and (min-width: 768px) {
  .std-modal-closer-sm {
    width: 2.33918129cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-modal-closer-sm {
    height: 2.33918129cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-modal-closer-sm {
    right: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-modal-closer-sm {
    top: 1.4619883cqi;
  }
}
.std-modal-closer-sm:hover {
  transform: translateY(-2px);
}
.std-modal-closer-outer {
  background: url(../icons/closer.png) center no-repeat;
  background-size: contain;
  position: absolute;
  border-radius: 50%;
  transition: 0.3s;
  z-index: 20;
}
@media only screen and (min-width: 768px) {
  .std-modal-closer-outer {
    width: 2.92397661cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-modal-closer-outer {
    height: 2.92397661cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-modal-closer-outer {
    top: 2.33918129cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-modal-closer-outer {
    right: 2.92397661cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-modal-closer-outer {
    top: 1.4619883cqi;
  }
}
.std-modal-closer-outer:hover {
  transform: translateY(-2px);
}
.std-info-modal .modal-dialog {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .std-info-modal .modal-dialog {
    width: 35.0877193cqi;
  }
}
.std-info-modal .modal-content {
  position: relative;
  background: #39312e;
  width: 100%;
  border: 10px solid #c28442;
}
@media only screen and (min-width: 768px) {
  .std-info-modal .modal-content {
    padding: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-info-modal .modal-content {
    margin-top: 2.33918129cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-info-modal .modal-content {
    margin-bottom: 2.33918129cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-info-modal .modal-content {
    border-width: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-info-modal .modal-content {
    border-radius: 3.50877193cqi;
  }
}
.std-info-modal .std-info-modal-img img {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .std-info-modal .std-info-modal-img {
    margin-right: -2.92397661cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-info-modal .std-info-modal-img {
    margin-bottom: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-info-modal .std-info-modal-img {
    margin-left: -2.92397661cqi;
  }
}
.std-info-modal .std-info-modal-pers {
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .std-info-modal .std-info-modal-pers {
    margin-top: -0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-info-modal .std-info-modal-pers {
    margin-bottom: 1.16959064cqi;
  }
}
.std-info-modal .std-info-modal-pers-left {
  border: 3px solid #56493c;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .std-info-modal .std-info-modal-pers-left {
    border-radius: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-info-modal .std-info-modal-pers-left {
    border-width: 0.1754386cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-info-modal .std-info-modal-pers-left img {
    width: 7.01754386cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-info-modal .std-info-modal-pers-right {
    padding-left: 0.99415205cqi;
  }
}
.std-info-modal .std-info-modal-pers-right-title {
  font-family: var(--fontTitle);
}
@media only screen and (min-width: 768px) {
  .std-info-modal .std-info-modal-pers-right-title {
    font-size: 1.40350877cqi;
  }
}
@media only screen and (max-width: 767px) {
  .std-info-modal .std-info-modal-pers-right-title {
    font-size: 24px;
  }
}
.std-info-modal .std-info-modal-pers-right-desc {
  opacity: 0.4;
  font-family: var(--fontTitle);
}
@media only screen and (min-width: 768px) {
  .std-info-modal .std-info-modal-pers-right-desc {
    margin-top: 0.29239766cqi;
  }
}
.std-info-modal .std-info-modal-title {
  font-size: 120%;
  font-weight: bold;
  color: #ffdb86;
  font-family: var(--fontTitle);
}
@media only screen and (min-width: 768px) {
  .std-info-modal .std-info-modal-title {
    margin-bottom: 2.33918129cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-info-modal .std-info-modal-content {
    padding: 2.92397661cqi;
  }
}
@media only screen and (min-width: 768px) {
  .std-info-modal .std-info-modal-content {
    font-size: 1.05263158cqi;
  }
}
@media only screen and (max-width: 767px) {
  .std-info-modal .std-info-modal-content {
    font-size: 18px;
  }
}
.std-info-modal .std-info-modal-content p {
  margin-bottom: 1em;
}
.std-info-modal .std-info-modal-content .highlight {
  text-align: center;
  color: #ffdb86;
  font-family: var(--fontTitle);
  font-weight: bold;
}
.std-info-modal .std-info-modal-footer {
  margin-top: 2em;
  text-align: center;
}
.youwin {
  background: #1a1a1a;
  background: radial-gradient(circle, rgba(26, 26, 26, 0.2) 0%, #000000 100%), radial-gradient(circle, rgba(26, 23, 43, 0.93) 1%, rgba(14, 14, 143, 0) 100%), radial-gradient(circle, rgba(26, 23, 43, 0.93) 14%, rgba(14, 14, 143, 0) 100%);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2444;
  transition: 0.4s;
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
@media only screen and (min-width: 768px) {
  .youwin {
    padding-top: 4.67836257cqi;
  }
}
@media only screen and (min-width: 768px) {
  .youwin {
    padding-bottom: 4.67836257cqi;
  }
}
.youwin.active {
  opacity: 1;
  visibility: visible;
}
.youwin .youwin-top {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.youwin .youwin-awards {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (min-width: 768px) {
  .youwin .youwin-awards {
    margin-top: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  .youwin .youwin-awards {
    margin-bottom: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .youwin .youwin-awards {
    min-height: 5.84795322cqi;
  }
}
.youwin .youwin-awards-awards {
  display: flex;
  align-items: center;
}
.youwin span.coin-award {
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .youwin span.coin-award {
    font-size: 2.33918129cqi;
  }
}
@media only screen and (max-width: 767px) {
  .youwin span.coin-award {
    font-size: 40px;
  }
}
.youwin span.coin-award img {
  border-radius: 50%;
}
@media only screen and (min-width: 768px) {
  .youwin span.coin-award img {
    width: 2.33918129cqi;
  }
}
@media only screen and (min-width: 768px) {
  .youwin span.coin-award img {
    height: 2.33918129cqi;
  }
}
@media only screen and (min-width: 768px) {
  .youwin span.coin-award img {
    margin-right: 0.52631579cqi;
  }
}
@media only screen and (min-width: 768px) {
  .youwin span.coin-award img {
    margin-top: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .youwin .award {
    margin-left: 1.75438596cqi;
  }
}
.youwin .award:first-child {
  margin-left: 0;
}
.youwin .youwin-inner {
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .youwin .youwin-title {
    font-size: 3.85964912cqi;
  }
}
@media only screen and (max-width: 767px) {
  .youwin .youwin-title {
    font-size: 66px;
  }
}
.youloose {
  background: #1a1a1a;
  background: radial-gradient(circle, rgba(26, 26, 26, 0.2) 0%, #000000 100%), radial-gradient(circle, rgba(90, 44, 44, 0.93) 1%, rgba(143, 14, 14, 0) 100%), radial-gradient(circle, rgba(194, 12, 12, 0.93) 14%, rgba(143, 14, 14, 0) 100%);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2444;
  transition: 0.4s;
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.youloose.active {
  opacity: 1;
  visibility: visible;
}
.youloose .youwin-top {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.youloose .youwin-inner {
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .youloose .youwin-title {
    font-size: 3.85964912cqi;
  }
}
@media only screen and (max-width: 767px) {
  .youloose .youwin-title {
    font-size: 66px;
  }
}
@media only screen and (min-width: 768px) {
  .youloose .youwin-title {
    margin-bottom: 3.50877193cqi;
  }
}
@media only screen and (min-width: 768px) {
  .rzslider {
    height: 2.33918129cqi;
  }
}
@media only screen and (min-width: 768px) {
  .rzslider {
    margin-top: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .rzslider {
    margin-bottom: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .rzslider .rz-bar-wrapper {
    height: 2.33918129cqi;
  }
}
@media only screen and (min-width: 768px) {
  .rzslider .rz-bar-wrapper {
    padding-top: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .rzslider .rz-bar-wrapper {
    margin-top: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .rzslider .rz-bar-wrapper .rz-bar {
    height: 0.58479532cqi;
  }
}
.rzslider .rz-pointer {
  border-radius: 50%;
  background: linear-gradient(180deg, #fce18f 0%, #9b5532 100%);
  border: 3px solid #432e18;
}
@media only screen and (min-width: 768px) {
  .rzslider .rz-pointer {
    width: 2.33918129cqi;
  }
}
@media only screen and (min-width: 768px) {
  .rzslider .rz-pointer {
    height: 2.33918129cqi;
  }
}
@media only screen and (min-width: 768px) {
  .rzslider .rz-pointer {
    top: -0.29239766cqi;
  }
}
@media only screen and (min-width: 768px) {
  .rzslider .rz-pointer {
    border-width: 0.1754386cqi;
  }
}
.rzslider .rz-pointer:after {
  display: none;
}
@media only screen and (min-width: 768px) {
  .rzslider .rz-ticks {
    top: 0.58479532cqi;
  }
}
.rzslider .rz-tick {
  background: #848484;
}
@media only screen and (min-width: 768px) {
  .rzslider .rz-tick {
    width: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .rzslider .rz-tick {
    height: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .rzslider .rz-tick {
    margin-left: 1.16959064cqi;
  }
}
.rzslider .rz-bar {
  background-color: #ffffff29;
}
@media only screen and (min-width: 768px) {
  .rzslider .rz-bar {
    border-radius: 0.23391813cqi;
  }
}
@keyframes drag-shake {
  0% {
    transform: rotate(0deg) scale(1);
  }
  20% {
    transform: rotate(3deg) scale(1.02);
  }
  40% {
    transform: rotate(-2deg) scale(0.98);
  }
  60% {
    transform: rotate(4deg) scale(1.01);
  }
  80% {
    transform: rotate(-3deg) scale(0.99);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}
.spell-shaking {
  animation: drag-shake 0.3s infinite ease-in-out;
  cursor: grabbing;
}
.fs-toggler {
  position: fixed;
  bottom: 0;
  left: 0;
  background: #ffffffa1;
  z-index: 2222222222;
  border-radius: 0 10px 0 0;
}
@media only screen and (min-width: 768px) {
  .fs-toggler {
    width: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .fs-toggler {
    height: 1.16959064cqi;
  }
}
.vfull {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #000;
}
.touch-scroll-dragging * {
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
/* Для AngularJS анимации */
.touch-scroll-dragging [ng-click],
.touch-scroll-dragging [ng-click] * {
  pointer-events: none !important;
}
achievement-toast {
  display: block;
  position: fixed;
  z-index: 950;
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  achievement-toast {
    top: 5.26315789cqi;
  }
}
@media only screen and (min-width: 768px) {
  achievement-toast {
    right: 1.16959064cqi;
  }
}
achievement-toast .achievement-toast {
  pointer-events: none;
  opacity: 0;
  transform: translateX(120%);
  transition: 0.4s ease;
}
achievement-toast .achievement-toast.visible {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  cursor: url('../icons/cursors/pointer.png'), auto;
}
achievement-toast .achievement-toast-in {
  display: flex;
  align-items: center;
  background: #1a1614;
  border: 2px solid #cc7c00;
  box-shadow: 0px 0px 0px 0.23391813cqi #000;
}
@media only screen and (min-width: 768px) {
  achievement-toast .achievement-toast-in {
    border-width: 0.11695906cqi;
  }
}
@media only screen and (min-width: 768px) {
  achievement-toast .achievement-toast-in {
    border-radius: 0.70175439cqi;
  }
}
@media only screen and (min-width: 768px) {
  achievement-toast .achievement-toast-in {
    padding: 0.70175439cqi;
  }
}
@media only screen and (min-width: 768px) {
  achievement-toast .achievement-toast-in {
    min-width: 16.37426901cqi;
  }
}
@media only screen and (min-width: 768px) {
  achievement-toast .achievement-toast-in {
    max-width: 21.05263158cqi;
  }
}
achievement-toast .at-image {
  background: #000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #666;
}
@media only screen and (min-width: 768px) {
  achievement-toast .at-image {
    width: 3.2748538cqi;
  }
}
@media only screen and (min-width: 768px) {
  achievement-toast .at-image {
    height: 3.2748538cqi;
  }
}
@media only screen and (min-width: 768px) {
  achievement-toast .at-image {
    min-width: 3.2748538cqi;
  }
}
@media only screen and (min-width: 768px) {
  achievement-toast .at-image {
    border-radius: 0.46783626cqi;
  }
}
@media only screen and (min-width: 768px) {
  achievement-toast .at-image {
    margin-right: 0.70175439cqi;
  }
}
achievement-toast .at-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
achievement-toast .at-text {
  flex: 1;
  min-width: 0;
}
achievement-toast .at-label {
  color: #cc7c00;
}
@media only screen and (min-width: 768px) {
  achievement-toast .at-label {
    font-size: 0.76023392cqi;
  }
}
@media only screen and (max-width: 767px) {
  achievement-toast .at-label {
    font-size: 13px;
  }
}
@media only screen and (min-width: 768px) {
  achievement-toast .at-label {
    margin-bottom: 0.23391813cqi;
  }
}
achievement-toast .at-title {
  color: #ffca77;
  line-height: 1.2;
}
@media only screen and (min-width: 768px) {
  achievement-toast .at-title {
    font-size: 0.99415205cqi;
  }
}
@media only screen and (max-width: 767px) {
  achievement-toast .at-title {
    font-size: 17px;
  }
}
.act3line {
  position: fixed;
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  transform: translateX(-50%);
  /* Анимация 1: Переливы ярости внутри градиента */
  /* Анимация 2: Движение песчаных вихрей (полос) вперед */
  /* Анимация 3: Божественное песчаное свечение (пульсация) */
}
@media only screen and (min-width: 768px) {
  .act3line {
    top: 1.75438596cqi;
  }
}
.act3line .line-inner {
  border: 2px solid #000;
  background: #61492ee6;
  overflow: hidden;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .act3line .line-inner {
    min-width: 19.29824561cqi;
  }
}
@media only screen and (min-width: 768px) {
  .act3line .line-inner {
    height: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .act3line .line-inner {
    border-width: 0.11695906cqi;
  }
}
@media only screen and (min-width: 768px) {
  .act3line .line-inner {
    border-radius: 0.46783626cqi;
  }
}
.act3line .line-label {
  white-space: nowrap;
  text-shadow: 2px 1px 0px #000;
}
@media only screen and (min-width: 768px) {
  .act3line .line-label {
    font-size: 1.16959064cqi;
  }
}
@media only screen and (max-width: 767px) {
  .act3line .line-label {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) {
  .act3line .line-label {
    margin-right: 0.99415205cqi;
  }
}
@media only screen and (min-width: 768px) {
  .act3line .line-label {
    margin-top: -0.1754386cqi;
  }
}
.act3line .red-line {
  height: 100%;
  background: #0b3679;
  transition: 0.4s;
  overflow: hidden;
  position: relative;
  /* Градиент: грозовой серый -> песчаный -> золотистый песок -> грозовой серый */
  background: linear-gradient(90deg, #5c5c5c 0%, #d2b48c 35%, #e6caa7 50%, #c2a679 65%, #4a4a4a 100%);
  background-size: 400% 400%;
  /* Запуск анимаций: бушующий вихрь и пульсация бога */
}
@media only screen and (min-width: 768px) {
  .act3line .red-line {
    border-radius: 0.29239766cqi;
  }
}
.act3line .red-line.warn {
  animation: storm-surge 2s ease infinite, storm-glow 4s ease-in-out infinite alternate;
}
.act3line .red-line:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 40px 40px;
  animation: wind-move 7s linear infinite;
  opacity: 0.6;
}
@keyframes storm-surge {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes wind-move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 40px 0;
  }
}
@keyframes storm-glow {
  0% {
    box-shadow: 0cqi 0cqi 0.46783626cqi 0cqi rgba(210, 180, 140, 0.5), inset 0cqi 0cqi 0.35087719cqi 0cqi rgba(255, 255, 255, 0.2);
    filter: brightness(1);
  }
  100% {
    box-shadow: 0cqi 0cqi 1.28654971cqi 0cqi rgba(230, 202, 167, 0.8), inset 0cqi 0cqi 0.70175439cqi 0cqi rgba(255, 255, 255, 0.4);
    filter: brightness(1.25);
  }
}
.act4rockfall {
  position: fixed;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  border: 2px solid #000;
  background: rgba(55, 42, 32, 0.88);
  text-align: left;
  cursor: help;
  transition: 0.25s;
}
@media only screen and (min-width: 768px) {
  .act4rockfall {
    top: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  .act4rockfall {
    padding: 0.46783626cqi 0.93567251cqi;
  }
}
@media only screen and (min-width: 768px) {
  .act4rockfall {
    border-radius: 0.46783626cqi;
  }
}
.act4rockfall .a4r-label {
  white-space: nowrap;
  text-shadow: 2px 1px 0 #000;
  color: #e8d4b8;
}
@media only screen and (min-width: 768px) {
  .act4rockfall .a4r-label {
    font-size: 1.16959064cqi;
  }
}
@media only screen and (max-width: 767px) {
  .act4rockfall .a4r-label {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) {
  .act4rockfall .a4r-label {
    margin-right: 0.81871345cqi;
  }
}
@media only screen and (min-width: 768px) {
  .act4rockfall .a4r-label {
    margin-top: -0.11695906cqi;
  }
}
.act4rockfall .a4r-hint {
  line-height: 1.25;
  color: #cbb89a;
  max-width: 360px;
}
@media only screen and (min-width: 768px) {
  .act4rockfall .a4r-hint {
    font-size: 0.81871345cqi;
  }
}
@media only screen and (max-width: 767px) {
  .act4rockfall .a4r-hint {
    font-size: 14px;
  }
}
.act4rockfall.danger {
  background: rgba(90, 30, 20, 0.92);
  border-color: #c44;
  animation: act4-rockfall-pulse 0.9s ease-in-out infinite alternate;
}
.act4rockfall.danger .a4r-label,
.act4rockfall.danger .a4r-hint {
  color: #ffe0c8;
}
@keyframes act4-rockfall-pulse {
  0% {
    filter: brightness(1);
  }
  100% {
    filter: brightness(1.2);
  }
}
act-map {
  /* Контейнер для SVG и точек */
  /* Стили для SVG */
  /* Обычные хаотичные линии */
  /* Контейнер для точек */
  /* Точка-комната */
  /* Выделенная точка */
  /* Текст внутри точки */
  /* Подсказка с типом */
  /* Информация о пути */
}
act-map .map {
  width: 100%;
  z-index: 2;
  position: relative;
}
@media only screen and (min-width: 768px) {
  act-map .map {
    margin-top: 7.60233918cqi;
  }
}
act-map .map-svg-container {
  position: relative;
  width: 100%;
}
act-map .map-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}
act-map .map-svg path {
  pointer-events: none;
  transition: stroke 0.3s ease, stroke-width 0.3s ease;
}
act-map .room-connection {
  fill: none;
  stroke: #ffffff4f;
}
@media only screen and (min-width: 768px) {
  act-map .room-connection {
    stroke-width: 0.1754386cqi;
  }
}
@media only screen and (min-width: 768px) {
  act-map .room-connection {
    stroke-dasharray: 0.46783626cqi 0.35087719cqi;
  }
}
act-map .rooms-container {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 10;
}
act-map .room-node {
  position: absolute;
  border-radius: 50%;
  background-size: 103%;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  cursor: url('../icons/cursors/pointer.png'), auto;
  transition: all 0.3s ease;
  box-shadow: 0cqi 0.11695906cqi 0.35087719cqi 0cqi #000;
  z-index: 100;
  pointer-events: none !important;
}
@media only screen and (min-width: 768px) {
  act-map .room-node {
    width: 4.09356725cqi;
  }
}
@media only screen and (min-width: 768px) {
  act-map .room-node {
    height: 4.09356725cqi;
  }
}
act-map .room-node[data-type="combat"] {
  background-image: url(../icons/rooms/combat-4.png);
  border-color: #4f4f4f;
}
act-map .room-node.is-next {
  pointer-events: all !important;
  animation: nextRooms 2s ease-in-out infinite;
}
act-map .room-node.fly-to {
  pointer-events: all !important;
  animation: none !important;
}
act-map .room-node.fly-to:after {
  content: '';
  background: url(../icons/ui/jump.png) center no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  right: 106%;
  transform: translateY(-50%);
}
@media only screen and (min-width: 768px) {
  act-map .room-node.fly-to:after {
    width: 2.33918129cqi;
  }
}
@media only screen and (min-width: 768px) {
  act-map .room-node.fly-to:after {
    height: 2.33918129cqi;
  }
}
act-map .room-node.is-current:after {
  content: '';
  background: url(../icons/rooms/you.png) center no-repeat;
  position: absolute;
  white-space: nowrap;
  left: 50%;
  transform: translateX(-50%);
  background-size: 103%;
}
@media only screen and (min-width: 768px) {
  act-map .room-node.is-current:after {
    width: 5.14619883cqi;
  }
}
@media only screen and (min-width: 768px) {
  act-map .room-node.is-current:after {
    height: 5.14619883cqi;
  }
}
@media only screen and (min-width: 768px) {
  act-map .room-node.is-current:after {
    font-size: 0.70175439cqi;
  }
}
@media only screen and (max-width: 767px) {
  act-map .room-node.is-current:after {
    font-size: 12px;
  }
}
@media only screen and (min-width: 768px) {
  act-map .room-node.is-current:after {
    border-radius: 2.92397661cqi;
  }
}
act-map .room-node.scale-95 {
  background-image: url(../icons/rooms/combat-4.png);
}
act-map .room-node.scale-90 {
  background-image: url(../icons/rooms/combat-1.png);
}
act-map .room-node.scale-85 {
  background-image: url(../icons/rooms/combat-1.png);
}
act-map .room-node.scale-80 {
  background-image: url(../icons/rooms/combat-1.png);
}
act-map .room-node[data-type="you"] {
  background-image: url(../icons/rooms/you.png);
  border-color: #4f4f4f;
}
act-map .room-node[data-type="start"] {
  background-image: url(../icons/rooms/start.png);
  border-color: #5a6658;
}
act-map .room-node[data-type="elite"] {
  background-image: url(../icons/rooms/elite.png);
  border: 2px solid #ff4747;
}
@media only screen and (min-width: 768px) {
  act-map .room-node[data-type="elite"] {
    border-width: 0.11695906cqi;
  }
}
act-map .room-node[data-type="treasure"] {
  background-image: url(../icons/rooms/treasure.png);
  border: 2px solid #ffe070;
}
@media only screen and (min-width: 768px) {
  act-map .room-node[data-type="treasure"] {
    border-width: 0.11695906cqi;
  }
}
act-map .room-node[data-type="secret"] {
  background-image: url(../icons/rooms/secret.png);
  border-color: #4f4f4f;
}
act-map .room-node[data-type="shop"] {
  background-image: url(../icons/rooms/shop.png);
  border-color: #4f4f4f;
}
act-map .room-node[data-type="camp"] {
  background-image: url(../icons/rooms/camp.png);
  border: 2px solid #60d742;
}
@media only screen and (min-width: 768px) {
  act-map .room-node[data-type="camp"] {
    border-width: 0.11695906cqi;
  }
}
act-map .room-node[data-type="boss"] {
  z-index: 200;
  background-image: url(../icons/rooms/boss.png);
  border-color: #4f4f4f;
}
@media only screen and (min-width: 768px) {
  act-map .room-node[data-type="boss"] {
    width: 4.67836257cqi;
  }
}
@media only screen and (min-width: 768px) {
  act-map .room-node[data-type="boss"] {
    height: 4.67836257cqi;
  }
}
act-map .room-node.selected {
  border-color: #ffd700;
  box-shadow: 0cqi 0cqi 1.4619883cqi 0cqi #ffd700;
  transform: translate(-50%, -50%) scale(1.2);
  z-index: 300;
}
act-map .room-node.selected[data-type="start"] {
  border-color: #fff;
  box-shadow: 0cqi 0cqi 1.75438596cqi 0cqi #4caf50;
}
act-map .room-id {
  color: white;
  font-weight: bold;
  display: none;
}
@media only screen and (min-width: 768px) {
  act-map .room-id {
    font-size: 0.81871345cqi;
  }
}
@media only screen and (max-width: 767px) {
  act-map .room-id {
    font-size: 14px;
  }
}
act-map .room-node:hover {
  transform: translate(-50%, -50%) scale(1.25);
  z-index: 400;
}
@keyframes nextRooms {
  0% {
    box-shadow: 0px 0px 0px 0.29239766cqi #0063d2;
  }
  50% {
    box-shadow: 0px 0px 0px 0.58479532cqi #0078ff;
  }
  100% {
    box-shadow: 0px 0px 0px 0.29239766cqi #0063d2;
  }
}
card-decks-editor-opener {
  display: block;
}
card-decks-editor-opener .card-decks-opener-wrap {
  display: flex;
  align-items: center;
  cursor: url('../icons/cursors/pointer.png'), auto;
  transition: 0.3s;
}
@media only screen and (min-width: 768px) {
  card-decks-editor-opener .card-decks-opener-wrap {
    gap: 0.70175439cqi;
  }
}
@media only screen and (max-width: 767px) {
  card-decks-editor-opener .card-decks-opener-wrap {
    gap: 12px;
  }
}
card-decks-editor-opener .card-decks-opener-wrap:hover {
  transform: scale(1.03);
}
card-decks-editor-opener .card-decks-opener {
  flex-shrink: 0;
}
card-decks-editor-opener .card-decks-opener img {
  display: block;
}
@media only screen and (min-width: 768px) {
  card-decks-editor-opener .card-decks-opener img {
    width: 4.21052632cqi;
  }
}
card-decks-editor-opener .card-decks-name {
  line-height: 1.25;
  opacity: 0.85;
}
@media only screen and (min-width: 768px) {
  card-decks-editor-opener .card-decks-name {
    font-size: 0.93567251cqi;
  }
}
@media only screen and (max-width: 767px) {
  card-decks-editor-opener .card-decks-name {
    font-size: 16px;
  }
}
game-card {
  display: block;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
  justify-content: center;
}
@media only screen and (min-width: 768px) {
  game-card[small="1"] .card-border {
    padding: 0.1754386cqi;
  }
}
game-card .card {
  background: linear-gradient(180deg, #484848 0%, #23242f 100%);
  color: #fff;
  position: relative;
  cursor: pointer;
  box-sizing: border-box;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform, max-width, margin;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), max-width 0.4s ease, margin 0.4s ease;
}
@media only screen and (min-width: 768px) {
  game-card .card {
    padding: 0.76023392cqi;
  }
}
@media only screen and (min-width: 768px) {
  game-card .card {
    min-height: 9.94152047cqi;
  }
}
@media only screen and (min-width: 768px) {
  game-card .card {
    border-radius: 0.35087719cqi;
  }
}
@media only screen and (min-width: 768px) {
  game-card .card {
    max-width: 8.1871345cqi;
  }
}
@media only screen and (min-width: 768px) {
  game-card .card.sm {
    padding: 0.40935673cqi;
  }
}
@media only screen and (min-width: 768px) {
  game-card .card.sm {
    min-height: 7.01754386cqi;
  }
}
@media only screen and (min-width: 768px) {
  game-card .card.sm {
    max-height: 7.01754386cqi;
  }
}
@media only screen and (min-width: 768px) {
  game-card .card.sm {
    max-width: 5.61403509cqi;
  }
}
@media only screen and (min-width: 768px) {
  game-card .card.sm {
    min-width: 5.61403509cqi;
  }
}
game-card .card-border {
  background: linear-gradient(180deg, #e3c194 0%, #c69f76 100%);
}
@media only screen and (min-width: 768px) {
  game-card .card-border {
    border-radius: 0.35087719cqi;
  }
}
@media only screen and (min-width: 768px) {
  game-card .card-border {
    padding: 0.29239766cqi;
  }
}
game-card .card-border[type="rare"] {
  background: linear-gradient(180deg, #90b9ff 0%, #3e7aff 100%);
}
game-card .card-border[type="rare"] .card {
  background: linear-gradient(180deg, #517496 0%, #11153c 100%);
}
game-card .card-icon {
  position: relative;
  z-index: 3;
}
game-card .card-icon img {
  width: 100%;
}
cards-combat {
  position: fixed;
  z-index: 2000;
  bottom: 0;
  left: 0;
  transition: opacity 0.5s, visibility 0.5s;
  /* Контейнер для колоды */
  /* Сложная внутренняя верстка карты */
  /* Плейсхолдер внутри колоды (полностью невидимый, но держит место) */
  /* Временный технический класс для точного замера координат БЕЗ наклона */
  /* Класс плавного схлопывания плейсхолдера по ширине */
  /* Выделенный слой для анимации перетаскивания и возврата */
  /* Тень активного перетаскивания у курсора */
  /* Плавный полет домой (с затуханием тени) */
  /* Когда карта используется */
  /* Панель действий */
}
cards-combat.same-cubics-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
cards-combat.turn-locked .card-wrapper,
cards-combat.turn-locked .other-cards {
  filter: grayscale(1);
  opacity: 0.6;
  pointer-events: none;
}
cards-combat .other-cards {
  text-align: center;
  position: fixed;
  z-index: 22;
  transition: 0.3s;
}
@media only screen and (min-width: 768px) {
  cards-combat .other-cards {
    left: 7.01754386cqi;
  }
}
@media only screen and (min-width: 768px) {
  cards-combat .other-cards {
    bottom: 2.33918129cqi;
  }
}
cards-combat .other-cards:hover {
  transform: scale(1.05);
  cursor: url('../icons/cursors/pointer.png'), auto;
}
@media only screen and (min-width: 768px) {
  cards-combat .other-cards.collected {
    left: 1.75438596cqi;
  }
}
cards-combat .other-cards.passive {
  opacity: 0.6;
  filter: grayscale(1);
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  cards-combat .other-cards img {
    width: 5.26315789cqi;
  }
}
cards-combat .other-cards .count {
  background: #747d98;
  color: #fff;
  position: absolute;
  border-radius: 50%;
  box-shadow: 0.1754386cqi -0.11695906cqi 0.1754386cqi 0cqi #00000063;
}
@media only screen and (min-width: 768px) {
  cards-combat .other-cards .count {
    height: 2.10526316cqi;
  }
}
@media only screen and (min-width: 768px) {
  cards-combat .other-cards .count {
    line-height: 1.87134503cqi;
  }
}
@media only screen and (min-width: 768px) {
  cards-combat .other-cards .count {
    min-width: 2.10526316cqi;
  }
}
@media only screen and (min-width: 768px) {
  cards-combat .other-cards .count {
    font-size: 1.16959064cqi;
  }
}
@media only screen and (max-width: 767px) {
  cards-combat .other-cards .count {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) {
  cards-combat .other-cards .count {
    left: -0.29239766cqi;
  }
}
@media only screen and (min-width: 768px) {
  cards-combat .other-cards .count {
    bottom: 0.1754386cqi;
  }
}
cards-combat .deck-container {
  display: flex;
  justify-content: center;
  padding-top: 0;
  z-index: 10;
  position: absolute;
}
@media only screen and (min-width: 768px) {
  cards-combat .deck-container {
    bottom: 8.1871345cqi;
  }
}
@media only screen and (min-width: 768px) {
  cards-combat .deck-container {
    left: 5.26315789cqi;
  }
}
cards-combat .deck-container[cards-count="1"] .card-wrapper:nth-child(1) {
  transform: rotate(0deg) translateY(-10px) translateX(20px);
}
cards-combat .deck-container[cards-count="2"] .card-wrapper:nth-child(1) {
  transform: rotate(-6deg) translateY(-10px);
}
cards-combat .deck-container[cards-count="2"] .card-wrapper:nth-child(2) {
  transform: rotate(14deg) translateY(-15px);
}
cards-combat .deck-container[cards-count="3"] .card-wrapper:nth-child(1) {
  transform: rotate(-12deg) translateY(-10px);
}
cards-combat .deck-container[cards-count="3"] .card-wrapper:nth-child(2) {
  transform: rotate(6deg) translateY(-20px);
}
cards-combat .deck-container[cards-count="3"] .card-wrapper:nth-child(3) {
  transform: rotate(24deg) translateY(-30px);
}
cards-combat .deck-container[cards-count="4"] .card-wrapper:nth-child(1) {
  transform: rotate(-16deg) translateY(-10px);
}
cards-combat .deck-container[cards-count="4"] .card-wrapper:nth-child(2) {
  transform: rotate(1deg) translateY(-20px);
}
cards-combat .deck-container[cards-count="4"] .card-wrapper:nth-child(3) {
  transform: rotate(19deg) translateY(-30px);
}
cards-combat .deck-container[cards-count="4"] .card-wrapper:nth-child(4) {
  transform: rotate(35deg) translateY(-40px);
}
cards-combat .card-wrapper {
  transition: 0.3s;
  position: absolute;
  left: 0;
  transform-origin: 50% 200%;
  animation: cardWrapperPar 6s ease-in-out infinite;
}
@media only screen and (min-width: 768px) {
  cards-combat .card-wrapper {
    width: 5.26315789cqi;
  }
}
@media only screen and (min-width: 768px) {
  cards-combat .card-wrapper {
    height: 7.42690058cqi;
  }
}
@media only screen and (min-width: 768px) {
  cards-combat .card-wrapper {
    margin-top: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  cards-combat .card-wrapper {
    margin-right: 0.35087719cqi;
  }
}
@media only screen and (min-width: 768px) {
  cards-combat .card-wrapper {
    margin-bottom: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  cards-combat .card-wrapper {
    margin-left: 0.35087719cqi;
  }
}
@media only screen and (min-width: 768px) {
  cards-combat .card-wrapper {
    bottom: 0cqi;
  }
}
cards-combat .card-wrapper.hide-anim {
  opacity: 0;
  width: 0;
}
cards-combat .card-wrapper game-card {
  transition: 0.3s;
}
cards-combat .card-wrapper:hover game-card {
  transform: translateY(-10px);
}
cards-combat .card.phantom {
  opacity: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
  transition: none !important;
}
cards-combat .card.measuring-slot {
  opacity: 0 !important;
  transform: none !important;
  /* Временно убираем rotate для корректного замера BoundingBox */
  box-shadow: none !important;
  pointer-events: none !important;
  transition: none !important;
}
cards-combat .card.collapsing-placeholder {
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-width: 0 !important;
  opacity: 0 !important;
  transition: min-height 0.4s cubic-bezier(0.25, 1, 0.5, 1), max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1), margin 0.4s ease, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
@keyframes cardWrapperPar {
  0% {
    transform-origin: 50% 200%;
  }
  50% {
    transform-origin: 42% 215%;
  }
  100% {
    transform-origin: 50% 200%;
  }
}
cards-modal {
  position: relative;
  z-index: 9999;
}
cards-modal .deck-overlay {
  position: fixed;
  z-index: 100;
  background: #151728f6;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: 0.3s;
  opacity: 0;
  visibility: hidden;
}
cards-modal .cards-arr {
  display: flex;
  flex-wrap: wrap;
}
@media only screen and (min-width: 768px) {
  cards-modal .cards-arr {
    gap: 1.16959064cqi;
  }
}
@media only screen and (max-width: 767px) {
  cards-modal .cards-arr {
    gap: 20px;
  }
}
@media only screen and (min-width: 768px) {
  cards-modal .cards-arr {
    margin-bottom: 1.75438596cqi;
  }
}
cards-modal .cards-arr:last-child {
  margin-bottom: 0;
}
@media only screen and (min-width: 768px) {
  cards-modal .dm-suptitle {
    font-size: 1.75438596cqi;
  }
}
@media only screen and (max-width: 767px) {
  cards-modal .dm-suptitle {
    font-size: 30px;
  }
}
@media only screen and (min-width: 768px) {
  cards-modal .dm-suptitle {
    margin-bottom: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  cards-modal .dm-suptitle {
    margin-top: -1.05263158cqi;
  }
}
cards-modal .dm-desc {
  opacity: 0.6;
}
@media only screen and (min-width: 768px) {
  cards-modal .dm-desc {
    font-size: 1.05263158cqi;
  }
}
@media only screen and (max-width: 767px) {
  cards-modal .dm-desc {
    font-size: 18px;
  }
}
@media only screen and (min-width: 768px) {
  cards-modal .dm-desc {
    margin-bottom: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  cards-modal .dm-desc {
    padding-right: 4.09356725cqi;
  }
}
@media only screen and (min-width: 768px) {
  cards-modal .dm-title {
    font-size: 1.40350877cqi;
  }
}
@media only screen and (max-width: 767px) {
  cards-modal .dm-title {
    font-size: 24px;
  }
}
@media only screen and (min-width: 768px) {
  cards-modal .dm-title {
    margin-bottom: 1.16959064cqi;
  }
}
cards-modal .deck-modal {
  position: fixed;
  left: 50%;
  transition: 0.3s;
  transform: translate(-50%, -45%);
  opacity: 0;
  visibility: hidden;
  top: 50%;
  z-index: 101;
  background: #0a0b0f;
  border: 10px solid #725e47;
  box-shadow: 0cqi 1.75438596cqi 2.92397661cqi -1.16959064cqi #0009;
}
@media only screen and (min-width: 768px) {
  cards-modal .deck-modal {
    min-width: 34.50292398cqi;
  }
}
@media only screen and (min-width: 768px) {
  cards-modal .deck-modal {
    max-width: 50.29239766cqi;
  }
}
@media only screen and (min-width: 768px) {
  cards-modal .deck-modal {
    padding: 3.50877193cqi;
  }
}
@media only screen and (min-width: 768px) {
  cards-modal .deck-modal {
    border-width: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  cards-modal .deck-modal {
    border-radius: 3.50877193cqi;
  }
}
cards-modal .deck-wrapper.active .deck-overlay {
  opacity: 1;
  visibility: visible;
}
cards-modal .deck-wrapper.active .deck-modal {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%);
}
choose-item-start .cis-wrapper {
  background: #000;
  animation: chooseItemsStart 3s ease-in-out infinite;
  text-align: center;
  margin: 40px auto -20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  choose-item-start .cis-wrapper {
    padding-top: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  choose-item-start .cis-wrapper {
    padding-bottom: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  choose-item-start .cis-wrapper {
    border-radius: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  choose-item-start .cis-wrapper {
    width: 23.39181287cqi;
  }
}
choose-item-start .cis-wrapper.stopper {
  animation: none;
}
choose-item-start .cis-desc {
  opacity: 0.4;
}
@media only screen and (min-width: 768px) {
  choose-item-start .cis-desc {
    margin-top: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  choose-item-start .cis-desc {
    font-size: 0.81871345cqi;
  }
}
@media only screen and (max-width: 767px) {
  choose-item-start .cis-desc {
    font-size: 14px;
  }
}
@media only screen and (min-width: 768px) {
  choose-item-start .cis-desc {
    margin-bottom: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  choose-item-start .cis-title {
    font-size: 1.05263158cqi;
  }
}
@media only screen and (max-width: 767px) {
  choose-item-start .cis-title {
    font-size: 18px;
  }
}
choose-item-start .cis-items {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
@media only screen and (min-width: 768px) {
  choose-item-start .cis-items {
    margin-top: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  choose-item-start .cis-items {
    max-width: 21.05263158cqi;
  }
}
@media only screen and (min-width: 768px) {
  choose-item-start .cis-item img {
    height: 3.21637427cqi;
  }
}
choose-item-start .cis-item {
  margin: 0 20px;
  transition: 0.3s;
}
choose-item-start .cis-item:hover {
  filter: drop-shadow(1px 3px 3px #00bcff);
  transform: scale(1.1);
}
choose-item-start .cis-item.passive {
  transform: scale(0.75);
  filter: grayscale(1);
  opacity: 0.5;
}
choose-item-start .cis-item.active {
  transform: scale(1.25);
  filter: drop-shadow(1px 3px 3px #00bcff);
}
@keyframes chooseItemsStart {
  0% {
    box-shadow: 0px 0px 0px 0.11695906cqi #0067da;
  }
  50% {
    box-shadow: 0px 0px 0px 0.46783626cqi #0067da;
  }
  100% {
    box-shadow: 0px 0px 0px 0.11695906cqi #0067da;
  }
}
.clever-wrap {
  position: fixed;
  z-index: 4;
  transition: 0.3s;
}
@media only screen and (min-width: 768px) {
  .clever-wrap {
    bottom: 8.77192982cqi;
  }
}
@media only screen and (min-width: 768px) {
  .clever-wrap {
    left: 2.92397661cqi;
  }
}
@media only screen and (min-width: 768px) {
  .clever-wrap {
    width: 8.77192982cqi;
  }
}
@media only screen and (min-width: 768px) {
  .clever-wrap {
    height: 8.77192982cqi;
  }
}
.clever-wrap.pick {
  animation: cleverPiePickOut 3s ease-in-out infinite;
}
.clever-wrap.pick .clever-pie-out {
  animation: cleverPiePick 3s ease-in-out infinite;
}
.clever-wrap.used {
  transform: scale(0.9);
  filter: grayscale(1);
  animation: none !important;
}
.clever-wrap.used .clever-pie-out {
  animation: none !important;
}
.clever-wrap img {
  width: 100%;
}
.clever-wrap .clever-image {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
@media only screen and (min-width: 768px) {
  .clever-wrap .clever-image {
    width: 7.19298246cqi;
  }
}
@media only screen and (min-width: 768px) {
  .clever-wrap .clever-image {
    height: 7.60233918cqi;
  }
}
.clever-wrap .clever-pie-out {
  transform: rotate(90deg);
  border-radius: 50%;
}
@media only screen and (min-width: 768px) {
  .clever-wrap .clever-pie-out {
    width: 8.77192982cqi;
  }
}
@media only screen and (min-width: 768px) {
  .clever-wrap .clever-pie-out {
    height: 8.77192982cqi;
  }
}
.clever-wrap .clever-pie {
  width: 100%;
  height: 100%;
  transition: 0.4s;
  border-radius: 50%;
  position: relative;
  background: conic-gradient(#3aa53a 0deg, #5fc15f 20%, #328f3a 50%, #1e782a 80%, #3aa53a 100%);
  mask: conic-gradient(black 0deg, black var(--angle, 0deg), transparent var(--angle, 0deg), transparent 360deg);
  transform: rotate(-90deg);
  box-shadow: 0cqi 0.23391813cqi 0.70175439cqi 0cqi rgba(0, 0, 0, 0.15), inset 0cqi 0cqi 0cqi 0.1754386cqi rgba(255, 252, 200, 0.5);
}
.clever-wrap .clever-pie.hidepie {
  animation: none!important;
  transform: rotate(-90deg) scale(0.7);
  opacity: 0;
}
@keyframes cleverPiePick {
  0%,
  100% {
    filter: contrast(1.3);
    transform: rotate(90deg) scale(1.05);
  }
  50% {
    filter: contrast(1);
    transform: rotate(90deg) scale(1);
  }
}
@keyframes cleverPiePickOut {
  0%,
  100% {
    transform: scale(1.05);
  }
  50% {
    transform: scale(1);
  }
}
cubic-area {
  /* Взлет с увеличением и вращением */
  /* ========== АНИМАЦИИ ПАДЕНИЯ ========== */
  /* Падение с уменьшением и вращением */
  /* ========== 3D АНИМАЦИИ ========== */
  /* 3D вращение при взлете */
  /* 3D вращение при падении */
  /* ========== КЛАССЫ ДЛЯ АНИМАЦИЙ ========== */
  /* Обычный взлет */
  /* 3D взлет */
  /* Обычное падение */
  /* 3D падение */
  /* ========== ЭФФЕКТЫ ========== */
  /* Парение в воздухе (обычное состояние) */
  /* Эффект при наведении */
  /* Эффект при клике */
}
cubic-area .dice {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transform-style: preserve-3d;
  transition: all 0.3s ease;
  pointer-events: none;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.3));
}
@media only screen and (min-width: 768px) {
  cubic-area .dice {
    width: 2.92397661cqi;
  }
}
@media only screen and (min-width: 768px) {
  cubic-area .dice {
    height: 2.92397661cqi;
  }
}
@media only screen and (min-width: 768px) {
  cubic-area .dice {
    border-radius: 0.58479532cqi;
  }
}
cubic-area .dice.checked {
  filter: brightness(0.8);
  opacity: 0.8 !important;
}
cubic-area .cubic-area-root {
  display: flex;
  position: relative;
}
@media only screen and (min-width: 768px) {
  cubic-area .cubic-area-root {
    gap: 0.87719298cqi;
  }
}
@media only screen and (max-width: 767px) {
  cubic-area .cubic-area-root {
    gap: 15px;
  }
}
cubic-area .future-dice-preview {
  position: absolute;
}
@media only screen and (min-width: 768px) {
  cubic-area .future-dice-preview {
    left: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  cubic-area .future-dice-preview {
    top: 4.09356725cqi;
  }
}
cubic-area .future-dice-preview .future-dice-label {
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
@media only screen and (min-width: 768px) {
  cubic-area .future-dice-preview .future-dice-label {
    font-size: 0.58479532cqi;
  }
}
@media only screen and (max-width: 767px) {
  cubic-area .future-dice-preview .future-dice-label {
    font-size: 10px;
  }
}
@media only screen and (min-width: 768px) {
  cubic-area .future-dice-preview .future-dice-label {
    margin-bottom: 0.35087719cqi;
  }
}
cubic-area .future-dice-preview .future-dice-row {
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  cubic-area .future-dice-preview .future-dice-row {
    gap: 0.46783626cqi;
  }
}
@media only screen and (max-width: 767px) {
  cubic-area .future-dice-preview .future-dice-row {
    gap: 8px;
  }
}
cubic-area .future-dice-preview .dice.preview {
  position: relative;
  opacity: 0.75;
  animation: none;
}
@media only screen and (min-width: 768px) {
  cubic-area .future-dice-preview .dice.preview {
    width: 1.98830409cqi;
  }
}
@media only screen and (min-width: 768px) {
  cubic-area .future-dice-preview .dice.preview {
    height: 1.98830409cqi;
  }
}
@media only screen and (min-width: 768px) {
  cubic-area .future-dice-preview .dice.preview {
    border-radius: 0.29239766cqi;
  }
}
@keyframes diceFlyUp {
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
    opacity: 1;
  }
  30% {
    transform: translateY(100px) scale(1.5) rotate(180deg);
    opacity: 0.8;
  }
  60% {
    transform: translateY(200px) scale(2) rotate(360deg);
    opacity: 0.4;
  }
  100% {
    transform: translateY(300px) scale(2.5) rotate(540deg);
    opacity: 0;
  }
}
@keyframes diceFallDown {
  0% {
    transform: translateY(300px) scale(2.5) rotate(540deg);
    opacity: 0;
  }
  30% {
    transform: translateY(150px) scale(1.8) rotate(360deg);
    opacity: 0.5;
  }
  60% {
    transform: translateY(50px) scale(1.2) rotate(180deg);
    opacity: 0.8;
  }
  100% {
    transform: translateY(0) scale(1) rotate(0deg);
    opacity: 1;
  }
}
@keyframes dice3DFly {
  0% {
    transform: translateY(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);
    opacity: 1;
  }
  20% {
    transform: translateY(60px) rotateX(90deg) rotateY(45deg) rotateZ(30deg) scale(1.3);
    opacity: 0.9;
  }
  40% {
    transform: translateY(120px) rotateX(180deg) rotateY(90deg) rotateZ(60deg) scale(1.6);
    opacity: 0.7;
  }
  60% {
    transform: translateY(180px) rotateX(270deg) rotateY(135deg) rotateZ(90deg) scale(1.9);
    opacity: 0.5;
  }
  80% {
    transform: translateY(240px) rotateX(360deg) rotateY(180deg) rotateZ(120deg) scale(2.2);
    opacity: 0.3;
  }
  100% {
    transform: translateY(300px) rotateX(450deg) rotateY(225deg) rotateZ(150deg) scale(5.5);
    opacity: 0;
  }
}
@keyframes dice3DFall {
  0% {
    transform: translateY(300px) rotateX(450deg) rotateY(225deg) rotateZ(150deg) scale(5.5);
    opacity: 0;
  }
  20% {
    transform: translateY(240px) rotateX(360deg) rotateY(180deg) rotateZ(120deg) scale(2.2);
    opacity: 0.3;
  }
  40% {
    transform: translateY(180px) rotateX(270deg) rotateY(135deg) rotateZ(90deg) scale(1.9);
    opacity: 0.5;
  }
  60% {
    transform: translateY(120px) rotateX(180deg) rotateY(90deg) rotateZ(60deg) scale(1.6);
    opacity: 0.7;
  }
  80% {
    transform: translateY(60px) rotateX(90deg) rotateY(45deg) rotateZ(30deg) scale(1.3);
    opacity: 0.9;
  }
  100% {
    transform: translateY(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);
    opacity: 1;
  }
}
cubic-area .dice.fly-up {
  animation: diceFlyUp 0.5s ease-in forwards;
}
cubic-area .dice.fly-3d {
  animation: dice3DFly 1s ease-in forwards;
}
cubic-area .dice.fall-down {
  animation: diceFallDown 0.3s ease-out forwards;
}
cubic-area .dice.fall-3d {
  animation: dice3DFall 1s ease-out forwards;
}
@keyframes diceFloat {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(2deg);
  }
}
cubic-area .dice:hover {
  transform: scale(1.1) rotate(5deg);
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.4));
  transition: all 0.3s ease;
  cursor: url('../icons/cursors/pointer.png'), auto;
}
cubic-area .dice:active {
  transform: scale(0.95);
  transition: transform 0.1s ease;
}
currencies {
  display: flex;
  align-items: center;
}
currencies .scur {
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  currencies .scur {
    margin-right: 1.75438596cqi;
  }
}
currencies .scur-icon img {
  width: 100%;
}
currencies .scur-icon {
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.7);
}
@media only screen and (min-width: 768px) {
  currencies .scur-icon {
    width: 2.10526316cqi;
  }
}
@media only screen and (min-width: 768px) {
  currencies .scur-icon {
    height: 2.10526316cqi;
  }
}
@media only screen and (min-width: 768px) {
  currencies .scur-icon {
    margin-right: 0.64327485cqi;
  }
}
@media only screen and (min-width: 768px) {
  currencies .scur-value {
    font-size: 1.6374269cqi;
  }
}
@media only screen and (max-width: 767px) {
  currencies .scur-value {
    font-size: 28px;
  }
}
@media only screen and (min-width: 768px) {
  currencies .scur-value {
    margin-top: -0.11695906cqi;
  }
}
enemy .passiv {
  background: #000000;
}
@media only screen and (min-width: 768px) {
  enemy .passiv {
    min-width: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  enemy .passiv {
    height: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  enemy .passiv {
    border-radius: 0.29239766cqi;
  }
}
@media only screen and (min-width: 768px) {
  enemy .passiv {
    padding: 0.1754386cqi;
  }
}
enemy .pers-tooltip {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
}
enemy .buffs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: static;
}
@media only screen and (min-width: 768px) {
  enemy .buffs {
    min-height: 2.92397661cqi;
  }
}
enemy .passiv-icon {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: center;
}
enemy .enemy-plan {
  font-family: var(--fontTitle);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
@media only screen and (min-width: 768px) {
  enemy .enemy-plan {
    margin-bottom: 1.16959064cqi;
  }
}
enemy .enemy-plan.is-hidden {
  animation: hiddenPlan 2s ease-in-out infinite;
}
enemy .enemy-plan.inPlanReleased .enemy-plan-inner {
  transform: scale(1.4);
}
enemy .enemy-plan .enemy-plan-turns {
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  enemy .enemy-plan .enemy-plan-turns {
    margin-left: 0.93567251cqi;
  }
}
enemy .enemy-plan .enemy-plan-turns img {
  opacity: 0.5;
}
@media only screen and (min-width: 768px) {
  enemy .enemy-plan .enemy-plan-turns img {
    height: 1.11111111cqi;
  }
}
enemy .enemy-plan span.turns-value {
  opacity: 0.8;
}
@media only screen and (min-width: 768px) {
  enemy .enemy-plan span.turns-value {
    font-size: 1.40350877cqi;
  }
}
@media only screen and (max-width: 767px) {
  enemy .enemy-plan span.turns-value {
    font-size: 24px;
  }
}
@media only screen and (min-width: 768px) {
  enemy .enemy-plan span.turns-value {
    margin-right: 0.11695906cqi;
  }
}
@media only screen and (min-width: 768px) {
  enemy .enemy-plan span.turns-value {
    margin-top: -0.05847953cqi;
  }
}
enemy .enemy-plan .enemy-plan-inner {
  transition: 0.1s;
  background: #000;
  border: 2px solid #777;
  box-shadow: 0px 0px 0px 0.1754386cqi #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (min-width: 768px) {
  enemy .enemy-plan .enemy-plan-inner {
    min-width: 4.09356725cqi;
  }
}
@media only screen and (min-width: 768px) {
  enemy .enemy-plan .enemy-plan-inner {
    height: 2.69005848cqi;
  }
}
@media only screen and (min-width: 768px) {
  enemy .enemy-plan .enemy-plan-inner {
    border-radius: 0.23391813cqi;
  }
}
@media only screen and (min-width: 768px) {
  enemy .enemy-plan .enemy-plan-inner {
    border-width: 0.11695906cqi;
  }
}
@media only screen and (min-width: 768px) {
  enemy .enemy-plan .enemy-plan-inner {
    padding-top: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  enemy .enemy-plan .enemy-plan-inner {
    padding-right: 0.87719298cqi;
  }
}
@media only screen and (min-width: 768px) {
  enemy .enemy-plan .enemy-plan-inner {
    padding-bottom: 0.11695906cqi;
  }
}
@media only screen and (min-width: 768px) {
  enemy .enemy-plan .enemy-plan-inner {
    padding-left: 0.87719298cqi;
  }
}
@media only screen and (min-width: 768px) {
  enemy .enemy-plan .enemy-plan-icon img {
    height: 1.87134503cqi;
  }
}
enemy .enemy-plan .enemy-plan-icon.plan-unknown .plan-unknown-label {
  opacity: 0.75;
}
@media only screen and (min-width: 768px) {
  enemy .enemy-plan .enemy-plan-icon.plan-unknown .plan-unknown-label {
    font-size: 1.75438596cqi;
  }
}
@media only screen and (max-width: 767px) {
  enemy .enemy-plan .enemy-plan-icon.plan-unknown .plan-unknown-label {
    font-size: 30px;
  }
}
@media only screen and (min-width: 768px) {
  enemy .enemy-plan .enemy-plan-icon.plan-unknown .plan-unknown-label {
    line-height: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  enemy .enemy-plan .enemy-plan-damage {
    margin-right: 0.35087719cqi;
  }
}
@media only screen and (min-width: 768px) {
  enemy .enemy-plan .enemy-plan-damage {
    line-height: 1.69590643cqi;
  }
}
@media only screen and (min-width: 768px) {
  enemy .enemy-plan .enemy-plan-damage {
    font-size: 1.69590643cqi;
  }
}
@media only screen and (max-width: 767px) {
  enemy .enemy-plan .enemy-plan-damage {
    font-size: 29px;
  }
}
@media only screen and (min-width: 768px) {
  enemy .enemy-plan .enemy-plan-damage {
    margin-top: -0.05847953cqi;
  }
}
enemy .enemy-plan .plan-icon {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
}
@media only screen and (min-width: 768px) {
  enemy .enemy-plan .plan-icon {
    width: 1.57894737cqi;
  }
}
@media only screen and (min-width: 768px) {
  enemy .enemy-plan .plan-icon {
    height: 1.57894737cqi;
  }
}
enemy .spells-enemy {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (min-width: 768px) {
  enemy .spells-enemy {
    top: -1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  enemy .spells-enemy {
    margin-bottom: 0.58479532cqi;
  }
}
enemy .spells-enemy .pers-spell {
  transform: scale(0.7) !important;
}
@media only screen and (min-width: 768px) {
  enemy .spells-enemy .pers-spell {
    margin-left: -1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  enemy .spells-enemy .pers-spell {
    margin-right: -1.16959064cqi;
  }
}
enemy .pers-name {
  display: none;
  position: absolute;
  background: #404040;
  text-align: center;
  border: 3px solid #000000;
}
@media only screen and (min-width: 768px) {
  enemy .pers-name {
    bottom: 2.28070175cqi;
  }
}
@media only screen and (min-width: 768px) {
  enemy .pers-name {
    left: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  enemy .pers-name {
    right: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  enemy .pers-name {
    padding-top: 0.29239766cqi;
  }
}
@media only screen and (min-width: 768px) {
  enemy .pers-name {
    padding-right: 0.29239766cqi;
  }
}
@media only screen and (min-width: 768px) {
  enemy .pers-name {
    padding-bottom: 0.70175439cqi;
  }
}
@media only screen and (min-width: 768px) {
  enemy .pers-name {
    padding-left: 0.29239766cqi;
  }
}
@media only screen and (min-width: 768px) {
  enemy .pers-name {
    border-radius: 0.87719298cqi;
  }
}
@media only screen and (min-width: 768px) {
  enemy .pers-name {
    border-width: 0.1754386cqi;
  }
}
@media only screen and (min-width: 768px) {
  enemy .pers-name {
    margin-bottom: -0.46783626cqi;
  }
}
enemy .pers-area {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  enemy .pers-area {
    margin-left: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  enemy .pers-area {
    margin-right: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  enemy .pers-area.isBoss .pers-portrait {
    width: 14.61988304cqi;
  }
}
@media only screen and (min-width: 768px) {
  enemy .pers-area.isBoss .life-line-wrapper {
    margin-top: -0.29239766cqi;
  }
}
enemy .pers-area.isBoss .pers-name {
  display: block;
}
@media only screen and (min-width: 768px) {
  enemy .pers-area.isElite .pers-portrait {
    width: 14.61988304cqi;
  }
}
@media only screen and (min-width: 768px) {
  enemy .pers-area.isElite .life-line-wrapper {
    margin-top: -0.29239766cqi;
  }
}
enemy .pers-area.isElite .pers-name {
  display: block;
}
enemy .pers-area.passive-4 life-line .counter {
  display: none;
}
enemy .pers-area.passive-4 .life-unknown-tooltip {
  display: block;
}
enemy .pers-area.passive-2:not(.defeated):not(.canselect) .pers-bg {
  animation: evasion-blink 4.5s ease-in-out infinite;
}
enemy .pers-area.attacking {
  opacity: 0 !important;
  pointer-events: none !important;
}
enemy .pers-area.defeated {
  pointer-events: none;
  filter: grayscale(1);
}
enemy .pers-area.defeated .pers-spells {
  pointer-events: none;
  opacity: 0;
}
enemy .pers-area.selected .pers-portrait {
  box-shadow: 0px 0px 0px 0.40935673cqi #004bff;
}
enemy .pers-area.canselect .pers-bg {
  cursor: url('../icons/cursors/pointer.png'), auto;
  animation: hero-can-select 0.8s ease-in-out infinite;
}
enemy .pers-area.canselect .pers-tooltip {
  display: none;
}
enemy .pers-portrait {
  position: relative;
  margin: auto;
}
@media only screen and (min-width: 768px) {
  enemy .pers-portrait {
    width: 11.11111111cqi;
  }
}
enemy .pers-bg {
  width: 100%;
  padding-top: 100%;
  background-position: center;
  background-size: cover;
  border: 3px solid #000;
}
@media only screen and (min-width: 768px) {
  enemy .pers-bg {
    border-radius: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  enemy .pers-bg {
    border-width: 0.1754386cqi;
  }
}
enemy .pers-item {
  position: relative;
}
@media only screen and (min-width: 768px) {
  enemy .armor-item img {
    height: 2.33918129cqi;
  }
}
enemy .armor-item {
  position: relative;
}
@media only screen and (min-width: 768px) {
  enemy .armor-item {
    margin-right: -0.58479532cqi;
  }
}
enemy span.armor-item-value {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-shadow: 1px 1px 0px #000;
}
@media only screen and (min-width: 768px) {
  enemy span.armor-item-value {
    font-size: 1.28654971cqi;
  }
}
@media only screen and (max-width: 767px) {
  enemy span.armor-item-value {
    font-size: 22px;
  }
}
@media only screen and (min-width: 768px) {
  enemy span.armor-item-value {
    margin-top: -0.05847953cqi;
  }
}
enemy .armor-flex {
  display: flex;
}
@media only screen and (min-width: 768px) {
  enemy .armor-flex {
    margin-left: 0.23391813cqi;
  }
}
@media only screen and (min-width: 768px) {
  enemy .armor-flex {
    margin-right: 0.35087719cqi;
  }
}
@keyframes hiddenPlan {
  0% {
    filter: blur(0px);
  }
  50% {
    filter: blur(3px);
  }
  100% {
    filter: blur(0px);
  }
}
@keyframes evasion-blink {
  0%,
  33.333% {
    opacity: 1;
  }
  38.889% {
    opacity: 0.5;
  }
  44.444% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  55.556%,
  88.889% {
    opacity: 1;
  }
  94.444% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
fortune-wheel {
  position: relative;
}
fortune-wheel .fortune-wheel-opener {
  background: url(../icons/fortune-wheel.png) center no-repeat;
  background-size: cover;
}
@media only screen and (min-width: 768px) {
  fortune-wheel .fortune-wheel-opener {
    width: 2.92397661cqi;
  }
}
@media only screen and (min-width: 768px) {
  fortune-wheel .fortune-wheel-opener {
    height: 2.92397661cqi;
  }
}
fortune-wheel .fortune-wheel-modal {
  transition: 0.4s;
  position: fixed;
  z-index: 443;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  background: #191a1ffc;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.04);
}
fortune-wheel .fortune-wheel-modal.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
fortune-wheel .fortune-wheel-modal-in {
  width: 100%;
}
fortune-wheel .f-flex {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row-reverse;
}
fortune-wheel .f-flex-left {
  text-align: left;
}
@media only screen and (min-width: 768px) {
  fortune-wheel .f-flex-left {
    margin-left: 9.35672515cqi;
  }
}
@media only screen and (min-width: 768px) {
  fortune-wheel .fwm-title {
    font-size: 2.92397661cqi;
  }
}
@media only screen and (max-width: 767px) {
  fortune-wheel .fwm-title {
    font-size: 50px;
  }
}
fortune-wheel .fwm-desc {
  opacity: 0.7;
}
@media only screen and (min-width: 768px) {
  fortune-wheel .fwm-desc {
    font-size: 1.16959064cqi;
  }
}
@media only screen and (max-width: 767px) {
  fortune-wheel .fwm-desc {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) {
  fortune-wheel .fwm-desc {
    margin-bottom: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  fortune-wheel .fwm-desc {
    margin-top: 0.58479532cqi;
  }
}
fortune-wheel .fwm-notice {
  opacity: 0.5;
  font-style: italic;
}
@media only screen and (min-width: 768px) {
  fortune-wheel .fwm-notice {
    font-size: 0.93567251cqi;
  }
}
@media only screen and (max-width: 767px) {
  fortune-wheel .fwm-notice {
    font-size: 16px;
  }
}
@media only screen and (min-width: 768px) {
  fortune-wheel .fwm-notice {
    margin-bottom: 2.92397661cqi;
  }
}
fortune-wheel .cwaert {
  display: flex;
  flex-direction: column;
  align-items: center;
}
fortune-wheel .circle-wrapper {
  position: relative;
}
@media only screen and (min-width: 768px) {
  fortune-wheel .circle-wrapper {
    margin-top: 2.92397661cqi;
  }
}
@media only screen and (min-width: 768px) {
  fortune-wheel .circle-wrapper {
    margin-right: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  fortune-wheel .circle-wrapper {
    margin-bottom: 2.92397661cqi;
  }
}
@media only screen and (min-width: 768px) {
  fortune-wheel .circle-wrapper {
    margin-left: 0cqi;
  }
}
fortune-wheel .luck-circle-out {
  border-radius: 50%;
  box-shadow: 0cqi 0cqi 1.75438596cqi 0cqi rgba(0, 0, 0, 0.8);
}
@media only screen and (min-width: 768px) {
  fortune-wheel .luck-circle-out {
    padding: 1.16959064cqi;
  }
}
fortune-wheel .luck-circle {
  border-radius: 50%;
  position: relative;
  box-sizing: border-box;
  background-color: #1e1107;
}
@media only screen and (min-width: 768px) {
  fortune-wheel .luck-circle {
    width: 35.0877193cqi;
  }
}
@media only screen and (min-width: 768px) {
  fortune-wheel .luck-circle {
    height: 35.0877193cqi;
  }
}
fortune-wheel .luck-circle:after {
  content: '';
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0cqi -0.11695906cqi 0cqi 0.40935673cqi #715439, inset 0cqi -0.23391813cqi 1.16959064cqi 0.70175439cqi #231d14;
  position: absolute;
  border-radius: 50%;
  z-index: 2;
}
fortune-wheel .grid-holder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  background: conic-gradient(from 0deg, #5c3d24 0deg 30deg, #4a2e1b 30deg 60deg, #533823 60deg 90deg, #6a482f 90deg 120deg, #54351f 120deg 150deg, #4c321f 150deg 180deg, #4a2d1b 180deg 210deg, #614028 210deg 240deg, #4f311c 240deg 270deg, #4f331d 270deg 300deg, #4b311e 300deg 330deg, #66442b 330deg 360deg);
  animation: rotate 300s linear infinite;
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
fortune-wheel .radial-line {
  position: absolute;
  top: 0;
  left: calc(50% - 1px);
  height: 50%;
  background: #241611;
  transform-origin: bottom center;
  z-index: 2;
}
@media only screen and (min-width: 768px) {
  fortune-wheel .radial-line {
    width: 0.11695906cqi;
  }
}
fortune-wheel .edge-box {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  box-shadow: 0cqi 0.29239766cqi 0.58479532cqi 0cqi rgba(0, 0, 0, 0.6);
  z-index: 5;
  background-position: center;
  background-size: cover;
}
@media only screen and (min-width: 768px) {
  fortune-wheel .edge-box {
    width: 2.33918129cqi;
  }
}
@media only screen and (min-width: 768px) {
  fortune-wheel .edge-box {
    height: 2.33918129cqi;
  }
}
@media only screen and (min-width: 768px) {
  fortune-wheel .edge-box {
    border-radius: 0.23391813cqi;
  }
}
@media only screen and (min-width: 768px) {
  fortune-wheel .edge-box {
    font-size: 0.93567251cqi;
  }
}
@media only screen and (max-width: 767px) {
  fortune-wheel .edge-box {
    font-size: 16px;
  }
}
fortune-wheel .box-1 {
  left: calc(50% - 20px);
  background-image: url(../icons/dice/1.png);
}
@media only screen and (min-width: 768px) {
  fortune-wheel .box-1 {
    top: -5.26315789cqi;
  }
}
fortune-wheel .box-2 {
  top: calc(50% - 20px);
  background-image: url(../icons/dice/2.png);
}
@media only screen and (min-width: 768px) {
  fortune-wheel .box-2 {
    right: -5.26315789cqi;
  }
}
fortune-wheel .box-3 {
  left: calc(50% - 20px);
  background-image: url(../icons/dice/3.png);
}
@media only screen and (min-width: 768px) {
  fortune-wheel .box-3 {
    bottom: -5.26315789cqi;
  }
}
fortune-wheel .box-4 {
  top: calc(50% - 20px);
  background-image: url(../icons/dice/4.png);
}
@media only screen and (min-width: 768px) {
  fortune-wheel .box-4 {
    left: -5.26315789cqi;
  }
}
fortune-wheel .target {
  border-radius: 50%;
  position: absolute;
  /* Вернули аппаратное центрирование, оно гарантирует 100% попадание пиксель в пиксель */
  transform: translate3d(-50%, -50%, 0);
  cursor: grab;
  touch-action: none;
  z-index: 10;
  background: radial-gradient(circle, #ffb347 0%, #ffcc33 40%, #8c6239 80%, #26140a 100%);
  box-shadow: 0cqi 0.23391813cqi 0.58479532cqi 0cqi rgba(0, 0, 0, 0.7), inset 0cqi 0.11695906cqi 0.1754386cqi 0cqi rgba(255, 255, 255, 0.4);
  border: 3px solid #000;
}
@media only screen and (min-width: 768px) {
  fortune-wheel .target {
    width: 2.45614035cqi;
  }
}
@media only screen and (min-width: 768px) {
  fortune-wheel .target {
    height: 2.45614035cqi;
  }
}
@media only screen and (min-width: 768px) {
  fortune-wheel .target {
    border-width: 0.1754386cqi;
  }
}
fortune-wheel .target:active {
  cursor: grabbing;
}
hero .spells-pers {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (min-width: 768px) {
  hero .spells-pers {
    top: -1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  hero .spells-pers {
    margin-bottom: 0.58479532cqi;
  }
}
hero .spells-pers .pers-spell {
  transform: scale(0.7) !important;
}
@media only screen and (min-width: 768px) {
  hero .spells-pers .pers-spell {
    margin-left: -1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  hero .spells-pers .pers-spell {
    margin-right: -1.16959064cqi;
  }
}
hero .pers-back {
  position: absolute;
  cursor: pointer;
  display: flex;
  justify-content: center;
  z-index: 22;
  opacity: 0.6;
  filter: drop-shadow(0px 0px 1px black);
  transition: 0.3s;
}
@media only screen and (min-width: 768px) {
  hero .pers-back {
    padding-top: 0.70175439cqi;
  }
}
@media only screen and (min-width: 768px) {
  hero .pers-back {
    top: -3.80116959cqi;
  }
}
@media only screen and (min-width: 768px) {
  hero .pers-back {
    left: 4.9122807cqi;
  }
}
@media only screen and (min-width: 768px) {
  hero .pers-back img {
    width: 1.98830409cqi;
  }
}
hero .pers-back:hover {
  transform: scale(1.2) translateY(-4px);
  opacity: 1;
}
hero .pers-top {
  position: relative;
}
hero .pers-target-point {
  position: absolute;
  left: 38%;
}
@media only screen and (min-width: 768px) {
  hero .pers-target-point {
    bottom: 0.58479532cqi;
  }
}
hero .power-area {
  position: absolute;
  display: flex;
  z-index: 2;
  border: 1px solid #000;
}
@media only screen and (min-width: 768px) {
  hero .power-area {
    right: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  hero .power-area {
    height: 0.64327485cqi;
  }
}
@media only screen and (min-width: 768px) {
  hero .power-area {
    top: 0.46783626cqi;
  }
}
@media only screen and (min-width: 768px) {
  hero .power-area {
    gap: 0cqi;
  }
}
@media only screen and (max-width: 767px) {
  hero .power-area {
    gap: 0px;
  }
}
@media only screen and (min-width: 768px) {
  hero .power-area {
    left: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  hero .power-area {
    border-width: 0.05847953cqi;
  }
}
@media only screen and (min-width: 768px) {
  hero .power-area {
    border-radius: 0.58479532cqi;
  }
}
hero .power-area.rage .power-item.selected {
  background: #be2c2c;
}
hero .power-item {
  background: #00000061;
  width: 100%;
  height: 100%;
  box-shadow: inset 0cqi 0cqi 0cqi 0.05847953cqi #0e1c0c;
  border-radius: 0;
}
@media only screen and (min-width: 768px) {
  hero .power-item {
    margin-right: -0.05847953cqi;
  }
}
hero .power-item:first-child {
  border-radius: 10px 0 0 10px;
}
hero .power-item:last-child {
  border-radius: 0 10px 10px 0;
  margin-right: 0;
}
hero .power-item.selected {
  background: #ffac32;
}
hero .pers-name {
  text-align: center;
}
@media only screen and (min-width: 768px) {
  hero .pers-name {
    font-size: 1.40350877cqi;
  }
}
@media only screen and (max-width: 767px) {
  hero .pers-name {
    font-size: 24px;
  }
}
@media only screen and (min-width: 768px) {
  hero .pers-name {
    margin-bottom: 0.58479532cqi;
  }
}
hero .pers-stunned {
  background: #414141ad url(../icons/actions/stun.svg) center repeat;
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 2;
  background-size: 56px;
  opacity: 1;
  visibility: visible;
}
@media only screen and (min-width: 768px) {
  hero .pers-stunned {
    left: 0cqi;
  }
}
hero .pers-item {
  transition: 0.15s;
  position: relative;
}
@media only screen and (min-width: 768px) {
  hero .pers-item {
    width: 11.69590643cqi;
  }
}
hero .pers-item.activated {
  transform: scale(1.1);
}
hero .pers-spells {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
@media only screen and (min-width: 768px) {
  hero .pers-spells {
    margin-top: -0.87719298cqi;
  }
}
@media only screen and (min-width: 768px) {
  hero .pers-spells {
    margin-left: 0.58479532cqi;
  }
}
hero .pers-area {
  display: flex;
  align-items: center;
  position: relative;
  transition: 0.3s;
}
@media only screen and (min-width: 768px) {
  hero .pers-area {
    margin-left: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  hero .pers-area {
    margin-right: 1.75438596cqi;
  }
}
hero .pers-area.backed {
  transform: translateY(-43px);
  filter: grayscale(0.2);
}
hero .pers-area.backed .pers-bg {
  box-shadow: 0cqi 0.46783626cqi 1.16959064cqi 0cqi #00000094, 0cqi 0cqi 0cqi 0.35087719cqi #ffffff94;
}
hero .pers-area.backed .pers-back {
  display: none;
}
hero .pers-area.stunned .pers-back {
  display: none;
}
hero .pers-area.defeated {
  pointer-events: none;
  filter: grayscale(1);
  opacity: 0.8;
}
hero .pers-area.defeated .pers-spells,
hero .pers-area.defeated .pers-back {
  pointer-events: none;
  opacity: 0;
}
hero .pers-area.selected .pers-bg {
  box-shadow: 0px 0px 0px 0.40935673cqi #004bff;
}
hero .pers-area.canselect .pers-bg {
  cursor: url('../icons/cursors/pointer.png'), auto;
  animation: hero-can-select 0.8s ease-in-out infinite;
}
@media only screen and (min-width: 768px) {
  hero .pers-area.--small {
    margin-left: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  hero .pers-area.--small {
    margin-right: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  hero .pers-area.--small .pers-item {
    width: 9.35672515cqi;
  }
}
@media only screen and (min-width: 768px) {
  hero .pers-area.--small .pers-portrait {
    width: 9.35672515cqi;
  }
}
@media only screen and (min-width: 768px) {
  hero .pers-area.--small .pers-portrait {
    height: 9.35672515cqi;
  }
}
hero .pers-portrait {
  position: relative;
  margin: auto;
}
hero .pers-portrait.attacking {
  filter: grayscale(1) !important;
  opacity: 0.3 !important;
}
hero .pers-bg {
  width: 100%;
  padding-top: 142%;
  background-position: center;
  background-size: cover;
  position: relative;
  box-shadow: 0cqi 0.46783626cqi 1.16959064cqi 0cqi #00000094;
  border: 3px solid #000;
}
@media only screen and (min-width: 768px) {
  hero .pers-bg {
    border-radius: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  hero .pers-bg {
    border-width: 0.1754386cqi;
  }
}
.heroes-arr {
  display: flex;
  position: fixed;
  justify-content: center;
  z-index: 223;
  flex-direction: column;
}
@media only screen and (min-width: 768px) {
  .heroes-arr {
    margin-top: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroes-arr {
    top: 6.43274854cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroes-arr {
    right: 0.11695906cqi;
  }
}
.heroes-arr .hero-avatar img {
  width: 100%;
}
.heroes-arr .hero-avatar {
  overflow: hidden;
  position: relative;
  z-index: 22;
  border: 3px solid #000000;
  box-shadow: 0px 0px 0px 0.11695906cqi #ffffff;
}
@media only screen and (min-width: 768px) {
  .heroes-arr .hero-avatar {
    height: 2.69005848cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroes-arr .hero-avatar {
    width: 2.69005848cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroes-arr .hero-avatar {
    border-radius: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroes-arr .hero-avatar {
    margin-top: -0.29239766cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroes-arr .hero-avatar {
    border-width: 0.1754386cqi;
  }
}
.heroes-arr .hero-item {
  display: flex;
}
@media only screen and (min-width: 768px) {
  .heroes-arr .hero-item {
    margin-top: 1.05263158cqi;
  }
}
.heroes-arr .hero-item.defeat {
  filter: grayscale(1);
}
.heroes-arr .hero-line {
  position: relative;
}
@media only screen and (min-width: 768px) {
  .heroes-arr .hero-line {
    width: 11.69590643cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroes-arr .hero-line {
    height: 2.33918129cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroes-arr .hero-line {
    padding-top: 0.11695906cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroes-arr .hero-line {
    margin-left: -0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroes-arr .hero-line {
    margin-right: 1.16959064cqi;
  }
}
hike-items .mods {
  position: fixed;
  z-index: 32;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  hike-items .mods {
    top: 10.52631579cqi;
  }
}
@media only screen and (min-width: 768px) {
  hike-items .mods {
    left: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  hike-items .mods {
    bottom: 18.71345029cqi;
  }
}
hike-items .mod {
  transition: 0.3s;
  position: relative;
}
@media only screen and (min-width: 768px) {
  hike-items .mod {
    height: 3.50877193cqi;
  }
}
@media only screen and (min-width: 768px) {
  hike-items .mod {
    margin-right: 0.70175439cqi;
  }
}
@media only screen and (min-width: 768px) {
  hike-items .mod {
    margin-bottom: 0.70175439cqi;
  }
}
hike-items .mod.reloaded img {
  transform: scale(1.5) rotate(-10deg);
  filter: drop-shadow(2px 3px 3px #00bcff);
}
hike-items .mod.clickable {
  border-color: #2c82ff;
}
hike-items .mod.clickable:not(.disabled):hover {
  cursor: url('../icons/cursors/pointer.png'), auto;
  transform: scale(1.05);
}
hike-items .mod.clickable.cool {
  transform: scale(0.9);
  filter: blur(3px);
  pointer-events: none;
}
hike-items .mod.disabled {
  border-color: #5a5a5a;
  filter: grayscale(0.7);
}
hike-items .mod .charges {
  position: absolute;
  background: #0087e0;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  hike-items .mod .charges {
    right: -0.29239766cqi;
  }
}
@media only screen and (min-width: 768px) {
  hike-items .mod .charges {
    bottom: -0.29239766cqi;
  }
}
@media only screen and (min-width: 768px) {
  hike-items .mod .charges {
    min-width: 1.87134503cqi;
  }
}
@media only screen and (min-width: 768px) {
  hike-items .mod .charges {
    font-size: 0.93567251cqi;
  }
}
@media only screen and (max-width: 767px) {
  hike-items .mod .charges {
    font-size: 16px;
  }
}
@media only screen and (min-width: 768px) {
  hike-items .mod .charges {
    padding-top: 0.1754386cqi;
  }
}
@media only screen and (min-width: 768px) {
  hike-items .mod .charges {
    padding-right: 0.1754386cqi;
  }
}
@media only screen and (min-width: 768px) {
  hike-items .mod .charges {
    padding-bottom: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  hike-items .mod .charges {
    padding-left: 0.1754386cqi;
  }
}
@media only screen and (min-width: 768px) {
  hike-items .mod .charges {
    height: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  hike-items .mod .charges {
    border-radius: 0.58479532cqi;
  }
}
hike-items .mod img {
  height: 100%;
  transition: 0.2s;
}
.life-line-wrapper {
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .life-line-wrapper {
    margin-top: -1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .life-line-wrapper {
    margin-left: 0.87719298cqi;
  }
}
@media only screen and (min-width: 768px) {
  .life-line-wrapper {
    margin-right: 0.87719298cqi;
  }
}
life-line {
  width: 100%;
  box-shadow: 0px 0px 0px 0.11695906cqi #000000;
  z-index: 2;
  display: block;
  position: relative;
  background-image: linear-gradient(to bottom, #deb295, #c2977d, #a77c66, #8c624f, #724a3a);
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  life-line {
    height: 2.10526316cqi;
  }
}
@media only screen and (min-width: 768px) {
  life-line {
    border-radius: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  life-line {
    padding: 0.11695906cqi;
  }
}
life-line .life-unknown-tooltip {
  position: absolute;
  left: 50%;
  font-family: var(--fontTitle);
  opacity: 0.6;
  transform: translateX(-50%);
  display: none;
  z-index: 2;
}
@media only screen and (min-width: 768px) {
  life-line .life-unknown-tooltip {
    top: -0.11695906cqi;
  }
}
@media only screen and (min-width: 768px) {
  life-line .life-unknown-tooltip {
    font-size: 1.22807018cqi;
  }
}
@media only screen and (max-width: 767px) {
  life-line .life-unknown-tooltip {
    font-size: 21px;
  }
}
life-line .red-line {
  height: 100%;
  background: #c52020;
  transition: 0.4s;
}
life-line .line-inner {
  width: 100%;
  height: 100%;
  border: 2px solid #000;
  background: #380505;
  overflow: hidden;
  position: relative;
}
@media only screen and (min-width: 768px) {
  life-line .line-inner {
    border-width: 0.11695906cqi;
  }
}
@media only screen and (min-width: 768px) {
  life-line .line-inner {
    border-radius: 0.46783626cqi;
  }
}
life-line .line-inner:after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to bottom, #99999921, #ffffff41, #ffffff31, #ffffff21, #ffffff00, #ffffff00);
}
life-line .counter {
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  font-family: var(--fontTitle);
}
@media only screen and (min-width: 768px) {
  life-line .counter {
    top: 0.11695906cqi;
  }
}
@media only screen and (min-width: 768px) {
  life-line .counter {
    font-size: 1.28654971cqi;
  }
}
@media only screen and (max-width: 767px) {
  life-line .counter {
    font-size: 22px;
  }
}
@media only screen and (min-width: 768px) {
  life-line .counter {
    line-height: 1.28654971cqi;
  }
}
.map-jumper .map-jumper-btn {
  display: flex;
  position: fixed;
  transition: 0.3s;
  pointer-events: none;
  align-items: center;
  flex-direction: column;
}
@media only screen and (min-width: 768px) {
  .map-jumper .map-jumper-btn {
    bottom: 2.33918129cqi;
  }
}
@media only screen and (min-width: 768px) {
  .map-jumper .map-jumper-btn {
    right: 2.33918129cqi;
  }
}
@media only screen and (min-width: 768px) {
  .map-jumper .map-jumper-btn {
    gap: 0.58479532cqi;
  }
}
@media only screen and (max-width: 767px) {
  .map-jumper .map-jumper-btn {
    gap: 10px;
  }
}
.map-jumper .map-jumper-btn.passive {
  opacity: 0.8;
  filter: grayscale(50%);
}
@media only screen and (min-width: 768px) {
  .map-jumper .map-jumper-btn .mj-icon img {
    width: 7.01754386cqi;
  }
}
.map-jumper .map-jumper-btn .mj-text {
  margin-left: 0px;
}
.map-jumper .map-jumper-btn .mj-text-count {
  opacity: 0.6;
}
@media only screen and (min-width: 768px) {
  .map-jumper .map-jumper-btn .mj-text-count {
    font-size: 0.93567251cqi;
  }
}
@media only screen and (max-width: 767px) {
  .map-jumper .map-jumper-btn .mj-text-count {
    font-size: 16px;
  }
}
.neutral-spells-combat {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .neutral-spells-combat {
    margin-top: 4.21052632cqi;
  }
}
@media only screen and (min-width: 768px) {
  .neutral-spells-combat {
    margin-left: -3.80116959cqi;
  }
}
@media only screen and (min-width: 768px) {
  .neutral-spells-combat {
    margin-right: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .neutral-spells-combat .neutral-spell-slot {
    margin-bottom: 0.58479532cqi;
  }
}
.neutral-spells-combat .pers-spell {
  position: relative;
  border: 2px solid #4c4c4c;
}
@media only screen and (min-width: 768px) {
  .neutral-spells-combat .pers-spell {
    border-width: 0.11695906cqi;
  }
}
@media only screen and (min-width: 768px) {
  .neutral-spells-combat .pers-spell {
    border-radius: 0.35087719cqi;
  }
}
.neutral-spells-combat .pers-spell.disabled .spell-icon-inner {
  filter: grayscale(1);
  opacity: 0.45;
}
.neutral-spells-combat .pers-spell.selected {
  border-color: #dfa445;
}
.neutral-spells-combat .spell-icon {
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .neutral-spells-combat .spell-icon {
    width: 3.04093567cqi;
  }
}
@media only screen and (min-width: 768px) {
  .neutral-spells-combat .spell-icon {
    height: 3.04093567cqi;
  }
}
.neutral-spells-combat .spell-icon-inner {
  width: 100%;
  height: 100%;
  background-size: cover;
}
.neutral-spells-combat .spell-cubic {
  position: absolute;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .neutral-spells-combat .spell-cubic {
    right: -0.23391813cqi;
  }
}
@media only screen and (min-width: 768px) {
  .neutral-spells-combat .spell-cubic {
    bottom: -0.23391813cqi;
  }
}
@media only screen and (min-width: 768px) {
  .neutral-spells-combat .spell-cubic {
    width: 1.40350877cqi;
  }
}
@media only screen and (min-width: 768px) {
  .neutral-spells-combat .spell-cubic {
    height: 1.40350877cqi;
  }
}
@media only screen and (min-width: 768px) {
  .neutral-spells-combat .spell-cubic {
    border-radius: 0.23391813cqi;
  }
}
.neutral-spells-combat .spell-cubic .cubic {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
@media only screen and (min-width: 768px) {
  .neutral-spells-combat .spell-cubic .cubic {
    border-radius: 0.23391813cqi;
  }
}
.neutral-spells-start {
  cursor: url('../icons/cursors/pointer.png'), auto;
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 768px) {
  .neutral-spells-start {
    margin-top: 3.50877193cqi;
  }
}
@media only screen and (min-width: 768px) {
  .neutral-spells-start {
    gap: 1.4619883cqi;
  }
}
@media only screen and (max-width: 767px) {
  .neutral-spells-start {
    gap: 25px;
  }
}
.neutral-spells-start .nss-spell-wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
}
@media only screen and (min-width: 768px) {
  .neutral-spells-start .nss-spell-wrapper {
    gap: 0.58479532cqi;
  }
}
@media only screen and (max-width: 767px) {
  .neutral-spells-start .nss-spell-wrapper {
    gap: 10px;
  }
}
.neutral-spells-start .nss-dice {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (min-width: 768px) {
  .neutral-spells-start .nss-dice {
    width: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .neutral-spells-start .nss-dice {
    height: 1.16959064cqi;
  }
}
.neutral-spells-start .nss-dice img {
  width: 100%;
}
.neutral-spells-start .nss-spells-row {
  display: flex;
}
@media only screen and (min-width: 768px) {
  .neutral-spells-start .nss-spells-row {
    gap: 2.33918129cqi;
  }
}
@media only screen and (max-width: 767px) {
  .neutral-spells-start .nss-spells-row {
    gap: 40px;
  }
}
.neutral-spells-start .nss-spell {
  border: 2px solid #4c4c4c;
  overflow: hidden;
  transition: 0.3s;
  cursor: url('../icons/cursors/pointer.png'), auto;
}
@media only screen and (min-width: 768px) {
  .neutral-spells-start .nss-spell {
    border-width: 0.11695906cqi;
  }
}
@media only screen and (min-width: 768px) {
  .neutral-spells-start .nss-spell {
    border-radius: 0.35087719cqi;
  }
}
.neutral-spells-start .nss-spell:hover {
  transform: scale(1.08);
  border-color: #dfa445;
}
.neutral-spells-start .spell-icon {
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .neutral-spells-start .spell-icon {
    width: 3.04093567cqi;
  }
}
@media only screen and (min-width: 768px) {
  .neutral-spells-start .spell-icon {
    height: 3.04093567cqi;
  }
}
.neutral-spells-start .spell-icon-inner {
  width: 100%;
  height: 100%;
  background-size: cover;
}
.tooltip-info {
  position: fixed;
  background: #000;
  z-index: 10000;
  pointer-events: none;
  border: 3px solid #555;
  box-shadow: 0px 0px 0px 0.1754386cqi #000;
}
@media only screen and (min-width: 768px) {
  .tooltip-info {
    padding: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .tooltip-info {
    border-radius: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .tooltip-info {
    max-width: 25.73099415cqi;
  }
}
@media only screen and (min-width: 768px) {
  .tooltip-info {
    border-width: 0.1754386cqi;
  }
}
.tooltip-info.passive {
  opacity: 0;
}
.tooltip-info .spell-aftertitle {
  opacity: 0.5;
}
@media only screen and (min-width: 768px) {
  .tooltip-info .spell-aftertitle {
    margin-top: -0.64327485cqi;
  }
}
@media only screen and (min-width: 768px) {
  .tooltip-info .spell-aftertitle {
    margin-bottom: 0.70175439cqi;
  }
}
@media only screen and (min-width: 768px) {
  .tooltip-info .spell-aftertitle {
    font-size: 0.93567251cqi;
  }
}
@media only screen and (max-width: 767px) {
  .tooltip-info .spell-aftertitle {
    font-size: 16px;
  }
}
.tooltip-info .spell-aftertitle:last-child {
  margin-bottom: 0 !important;
}
.tooltip-info .spell-title {
  font-family: var(--fontTitle);
}
@media only screen and (min-width: 768px) {
  .tooltip-info .spell-title {
    margin-bottom: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .tooltip-info .spell-title {
    font-size: 1.28654971cqi;
  }
}
@media only screen and (max-width: 767px) {
  .tooltip-info .spell-title {
    font-size: 22px;
  }
}
.tooltip-info .spell-title:last-child {
  margin-bottom: 0;
}
.tooltip-info .spell-text {
  opacity: 0.8;
}
@media only screen and (min-width: 768px) {
  .tooltip-info .spell-text {
    font-size: 0.93567251cqi;
  }
}
@media only screen and (max-width: 767px) {
  .tooltip-info .spell-text {
    font-size: 16px;
  }
}
.tooltip-info .spell-small {
  opacity: 0.5;
}
@media only screen and (min-width: 768px) {
  .tooltip-info .spell-small {
    margin-top: 0.64327485cqi;
  }
}
@media only screen and (min-width: 768px) {
  .tooltip-info .spell-small {
    font-size: 0.81871345cqi;
  }
}
@media only screen and (max-width: 767px) {
  .tooltip-info .spell-small {
    font-size: 14px;
  }
}
.tooltip-info .spell-after {
  display: flex;
  font-family: var(--fontTitle);
}
.tooltip-info .spell-target {
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .tooltip-info .spell-target {
    margin-top: 0.87719298cqi;
  }
}
@media only screen and (min-width: 768px) {
  .tooltip-info .spell-target {
    margin-right: 0.87719298cqi;
  }
}
.tooltip-info .spell-target:last-child {
  margin-right: 0;
}
@media only screen and (min-width: 768px) {
  .tooltip-info .spell-target img {
    height: 1.6374269cqi;
  }
}
@media only screen and (min-width: 768px) {
  .tooltip-info .spell-target .sp-text {
    padding-top: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .tooltip-info .spell-target .sp-text {
    margin-left: 0.40935673cqi;
  }
}
@media only screen and (min-width: 768px) {
  .tooltip-info .spell-target .sp-text {
    font-size: 0.99415205cqi;
  }
}
@media only screen and (max-width: 767px) {
  .tooltip-info .spell-target .sp-text {
    font-size: 17px;
  }
}
.tooltip-info .spell-target .sp-text:first-child {
  margin-left: 0;
}
run-turn .next-step {
  position: fixed;
  z-index: 22;
  color: #fff;
  cursor: url(../icons/cursors/pointer.png), auto;
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  run-turn .next-step {
    bottom: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  run-turn .next-step {
    right: 1.16959064cqi;
  }
}
run-turn.disabled .next-step-img {
  filter: grayscale(1);
  pointer-events: none;
}
run-turn .next-step-img {
  background: url(../icons/play.jpg) center no-repeat;
  background-size: 102%;
  border-radius: 100%;
  position: relative;
  z-index: 3;
  transition: 0.3s;
}
@media only screen and (min-width: 768px) {
  run-turn .next-step-img {
    min-width: 5.84795322cqi;
  }
}
@media only screen and (min-width: 768px) {
  run-turn .next-step-img {
    min-height: 5.84795322cqi;
  }
}
run-turn .next-step-img:hover {
  transform: scale(1.1);
  filter: contrast(1.3);
}
run-turn div#game-timer-place {
  position: relative;
  transition: 0.3s;
  visibility: hidden;
  opacity: 0;
}
@media only screen and (min-width: 768px) {
  run-turn div#game-timer-place {
    height: 3.97660819cqi;
  }
}
@media only screen and (min-width: 768px) {
  run-turn div#game-timer-place {
    margin-right: 1.16959064cqi;
  }
}
run-turn div#game-timer-place.active {
  opacity: 1;
  visibility: visible;
}
same-cubics-area.moved .same-cubics {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.same-cubics {
  background: #27225fbf;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 444;
  transition: 0.5s;
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: 0px 0px 0 0px;
  transform: translateX(50px);
  border-left: 10px solid #000;
}
@media only screen and (min-width: 768px) {
  .same-cubics {
    width: 28.07017544cqi;
  }
}
@media only screen and (min-width: 768px) {
  .same-cubics .sc-award-title {
    font-size: 1.05263158cqi;
  }
}
@media only screen and (max-width: 767px) {
  .same-cubics .sc-award-title {
    font-size: 18px;
  }
}
@media only screen and (min-width: 768px) {
  .same-cubics .sc-award-title {
    margin-bottom: 0.35087719cqi;
  }
}
.same-cubics .sc-award-tooltip {
  opacity: 0.7;
}
.same-cubics .sc-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.same-cubics .sc-left {
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .same-cubics .sc-left {
    margin-bottom: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  .same-cubics .sc-title {
    font-size: 2.33918129cqi;
  }
}
@media only screen and (max-width: 767px) {
  .same-cubics .sc-title {
    font-size: 40px;
  }
}
@media only screen and (min-width: 768px) {
  .same-cubics .sc-desc {
    font-size: 0.99415205cqi;
  }
}
@media only screen and (max-width: 767px) {
  .same-cubics .sc-desc {
    font-size: 17px;
  }
}
@media only screen and (min-width: 768px) {
  .same-cubics .sc-desc {
    margin-top: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .same-cubics .sc-awards {
    margin-top: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .same-cubics .sc-awards {
    margin-right: 2.33918129cqi;
  }
}
@media only screen and (min-width: 768px) {
  .same-cubics .sc-awards {
    margin-bottom: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .same-cubics .sc-awards {
    margin-left: 2.33918129cqi;
  }
}
.same-cubics .sc-award {
  background: #121222;
  text-align: center;
  transition: 0.3s;
}
@media only screen and (min-width: 768px) {
  .same-cubics .sc-award {
    padding-top: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .same-cubics .sc-award {
    padding-right: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  .same-cubics .sc-award {
    padding-bottom: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .same-cubics .sc-award {
    padding-left: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  .same-cubics .sc-award {
    margin-bottom: 0.87719298cqi;
  }
}
@media only screen and (min-width: 768px) {
  .same-cubics .sc-award {
    font-size: 0.93567251cqi;
  }
}
@media only screen and (max-width: 767px) {
  .same-cubics .sc-award {
    font-size: 16px;
  }
}
@media only screen and (min-width: 768px) {
  .same-cubics .sc-award {
    border-radius: 0.58479532cqi;
  }
}
.same-cubics .sc-award:hover {
  cursor: url('../icons/cursors/pointer.png'), auto;
  background: #0d0d7d;
}
selected-spells {
  position: fixed;
  z-index: 22;
}
@media only screen and (min-width: 768px) {
  selected-spells {
    right: 2.16374269cqi;
  }
}
@media only screen and (min-width: 768px) {
  selected-spells {
    bottom: 9.94152047cqi;
  }
}
selected-spells .spells-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media only screen and (min-width: 768px) {
  selected-spells .spells-column {
    padding: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  selected-spells .spells-column .pers-spell {
    margin-top: 0.23391813cqi;
  }
}
@media only screen and (min-width: 768px) {
  selected-spells .spells-column .pers-spell {
    margin-bottom: 0.23391813cqi;
  }
}
selected-spells .pers-spell {
  padding: 0 !important;
}
selected-spells .spell-icon {
  border: 4px solid #0079ff !important;
}
@media only screen and (min-width: 768px) {
  selected-spells .spell-icon {
    border-width: 0.23391813cqi;
  }
}
selected-spells .spell-seq {
  position: absolute;
  right: 100%;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-radius: 50%;
  text-shadow: 2px 3px BLACK;
}
@media only screen and (min-width: 768px) {
  selected-spells .spell-seq {
    font-size: 1.34502924cqi;
  }
}
@media only screen and (max-width: 767px) {
  selected-spells .spell-seq {
    font-size: 23px;
  }
}
@media only screen and (min-width: 768px) {
  selected-spells .spell-seq {
    margin-right: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  selected-spells .spell-seq {
    padding-top: 0.1754386cqi;
  }
}
toggler {
  display: block;
}
.toggler {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
  cursor: url('../icons/cursors/pointer.png'), auto;
}
@media only screen and (min-width: 768px) {
  .toggler {
    margin-bottom: 1.16959064cqi;
  }
}
.toggler .toggler-label {
  flex: 1;
  padding-right: 16px;
}
.toggler .toggler-track {
  position: relative;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(207, 155, 72, 0.35);
  transition: background 0.2s, border-color 0.2s;
}
@media only screen and (min-width: 768px) {
  .toggler .toggler-track {
    width: 2.57309942cqi;
  }
}
@media only screen and (min-width: 768px) {
  .toggler .toggler-track {
    height: 1.40350877cqi;
  }
}
.toggler .toggler-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0cqi 0.05847953cqi 0.1754386cqi 0cqi rgba(0, 0, 0, 0.35);
  transition: left 0.2s;
}
@media only screen and (min-width: 768px) {
  .toggler .toggler-knob {
    width: 1.05263158cqi;
  }
}
@media only screen and (min-width: 768px) {
  .toggler .toggler-knob {
    height: 1.05263158cqi;
  }
}
.toggler.is-on .toggler-track {
  background: rgba(207, 155, 72, 0.45);
  border-color: #cf9b48;
}
.toggler.is-on .toggler-knob {
  left: 22px;
}
topbar {
  position: fixed;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media only screen and (min-width: 768px) {
  topbar {
    top: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  topbar {
    right: 0.58479532cqi;
  }
}
topbar .tb-lefter {
  display: flex;
  align-items: center;
}
topbar .music-opener {
  cursor: url('../icons/cursors/pointer.png'), auto;
}
topbar .music-opener.disabled {
  filter: grayscale(1);
  opacity: 0.6;
  pointer-events: none;
}
topbar .combat-log-opener {
  cursor: url('../icons/cursors/pointer.png'), auto;
}
topbar svg.img-combat-log {
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0px 0px 0px 0.11695906cqi #000;
  background: #39312e;
  box-sizing: border-box;
}
@media only screen and (min-width: 768px) {
  topbar svg.img-combat-log {
    width: 2.92397661cqi;
  }
}
@media only screen and (min-width: 768px) {
  topbar svg.img-combat-log {
    height: 2.92397661cqi;
  }
}
@media only screen and (min-width: 768px) {
  topbar svg.img-combat-log {
    padding: 0.58479532cqi;
  }
}
topbar svg.img-music {
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0px 0px 0px 0.11695906cqi #000;
  background: #39312e;
  box-sizing: border-box;
}
@media only screen and (min-width: 768px) {
  topbar svg.img-music {
    width: 2.92397661cqi;
  }
}
@media only screen and (min-width: 768px) {
  topbar svg.img-music {
    height: 2.92397661cqi;
  }
}
@media only screen and (min-width: 768px) {
  topbar svg.img-music {
    padding: 0.58479532cqi;
  }
}
topbar .achievements-opener {
  cursor: url('../icons/cursors/pointer.png'), auto;
}
topbar .achievements-opener.pulsing .img-ach {
  animation: ach-icon-pulse 1s ease-in-out 3;
}
topbar img.img-menu {
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0px 0px 0px 0.11695906cqi #000;
}
@media only screen and (min-width: 768px) {
  topbar img.img-menu {
    width: 2.92397661cqi;
  }
}
topbar img.img-best,
topbar img.img-ach {
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0px 0px 0px 0.11695906cqi #000;
}
@media only screen and (min-width: 768px) {
  topbar img.img-best,
  topbar img.img-ach {
    width: 2.92397661cqi;
  }
}
topbar .tb-right {
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  topbar .tb-right > * {
    margin-right: 0.58479532cqi;
  }
}
topbar .menu-opener {
  cursor: url('../icons/cursors/pointer.png'), auto;
}
topbar .menu-opener.disabled {
  filter: grayscale(1);
  opacity: 0.6;
  pointer-events: none;
}
@keyframes ach-icon-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}
canvas#trail-canvas {
  position: fixed;
  z-index: 222;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
}
/* Класс анимации подсветки контейнера */
.heal-container {
  position: relative;
  overflow: hidden;
  animation: healFlash 0.5s ease-out;
}
@keyframes healFlash {
  0% {
    border-color: #00ce2f;
    box-shadow: 0cqi 0cqi 1.4619883cqi 0cqi rgba(46, 204, 113, 0.7);
  }
  100% {
    border-color: #000;
    box-shadow: 0cqi 0.46783626cqi 1.16959064cqi 0cqi #00000094;
  }
}
/* Анимированные плюсики */
.heal-plus {
  position: absolute;
  color: #2ecc71;
  text-shadow: 2px 2px 0px #000;
  font-weight: bold;
  font-family: Arial, sans-serif;
  user-select: none;
  pointer-events: none;
  opacity: 0;
  transform: translate(0, 0);
  /* Время анимации контролируется через JS переменную --dur */
  animation: healUp var(--dur) ease-out forwards;
}
@media only screen and (min-width: 768px) {
  .heal-plus {
    font-size: 3.50877193cqi;
  }
}
@media only screen and (max-width: 767px) {
  .heal-plus {
    font-size: 60px;
  }
}
@keyframes healUp {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.4) rotate(0deg);
  }
  20% {
    opacity: 1;
    transform: translate(calc(var(--tx) * 0.2), -15px) scale(1.3) rotate(calc(var(--tx) * 0.1deg));
  }
  100% {
    opacity: 0;
    /* Вылетают вверх на случайное расстояние --ty и вбок на --tx */
    transform: translate(var(--tx), var(--ty)) scale(0.6) rotate(calc(var(--tx) * 0.4deg));
  }
}
/* Число восстановленного здоровья */
.heal-amount {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  color: #2ecc71;
  font-weight: 900;
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0, 0, 0, 0.8), 0 0 15px rgba(46, 204, 113, 0.6);
  pointer-events: none;
  user-select: none;
  opacity: 0;
  animation: healTextUp 1.2s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}
@media only screen and (min-width: 768px) {
  .heal-amount {
    font-size: 2.80701754cqi;
  }
}
@media only screen and (max-width: 767px) {
  .heal-amount {
    font-size: 48px;
  }
}
@keyframes healTextUp {
  0% {
    opacity: 0;
    transform: translate(-50%, 20px) scale(0.6);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -60%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -100px) scale(0.8);
  }
}
.choose-target {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 90;
  background: radial-gradient(circle, #0088ff 50%, rgba(0, 136, 255, 0) 100%);
  transform: translate(-50%, -50%);
  text-align: center;
  opacity: 0;
  transition: 0.25s;
  visibility: hidden;
}
@media only screen and (min-width: 768px) {
  .choose-target {
    padding-top: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  .choose-target {
    padding-right: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  .choose-target {
    padding-bottom: 2.33918129cqi;
  }
}
@media only screen and (min-width: 768px) {
  .choose-target {
    padding-left: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  .choose-target {
    border-radius: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .choose-target {
    width: 57.89473684cqi;
  }
}
.choose-target.active {
  opacity: 1;
  visibility: visible;
}
.choose-target.active .choose-target-inner {
  animation: can-select-in 0.8s ease-in-out infinite;
}
.choose-target .choose-target-inner {
  transition: 0.3s;
  transform: scale(0.9);
}
@media only screen and (min-width: 768px) {
  .choose-target .cti-title {
    font-size: 2.33918129cqi;
  }
}
@media only screen and (max-width: 767px) {
  .choose-target .cti-title {
    font-size: 40px;
  }
}
.choose-target .cti-text {
  opacity: 0.6;
}
@media only screen and (min-width: 768px) {
  .choose-target .cti-text {
    font-size: 1.40350877cqi;
  }
}
@media only screen and (max-width: 767px) {
  .choose-target .cti-text {
    font-size: 24px;
  }
}
@keyframes can-select-in {
  0% {
    transform: scale(0.96);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.96);
  }
}
.achievementsModal {
  background: #000;
}
.achievementsModal .bg {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  z-index: 2;
  pointer-events: none;
  opacity: 0.3;
  background-image: url(../images/backgrounds/rooms/colods.jpg);
}
.achievementsModal .modal-dialog {
  box-shadow: none !important;
  transform: none !important;
  width: 100%;
  height: 100cqi;
  margin: 0;
  padding: 0;
}
.achievementsModal .modal-content {
  width: 100%;
  background: transparent;
  border: none;
  box-shadow: none !important;
}
@media only screen and (min-width: 768px) {
  .achievementsModal .modal-content {
    padding-top: 2.92397661cqi;
  }
}
.achievementsModal .achievements-window {
  display: flex;
  flex-direction: column;
  margin: auto;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
}
@media only screen and (min-width: 768px) {
  .achievementsModal .achievements-window {
    width: 70.1754386cqi;
  }
}
@media only screen and (min-width: 768px) {
  .achievementsModal .achievements-window {
    bottom: 2.92397661cqi;
  }
}
@media only screen and (min-width: 768px) {
  .achievementsModal .achievements-window {
    top: 1.75438596cqi;
  }
}
.achievementsModal .std-modal-closer-in {
  position: absolute;
}
@media only screen and (min-width: 768px) {
  .achievementsModal .std-modal-closer-in {
    top: 0.46783626cqi;
  }
}
@media only screen and (min-width: 768px) {
  .achievementsModal .std-modal-closer-in {
    right: -5.26315789cqi;
  }
}
.achievementsModal .achievements-window-top,
.achievementsModal .achievements-window-bottom {
  position: relative;
  z-index: 2;
}
.achievementsModal .achievements-window-top img,
.achievementsModal .achievements-window-bottom img {
  width: 100%;
}
.achievementsModal .achievements-window-content {
  background: #1a1614;
  position: relative;
  z-index: 1;
  border-left: 4px solid #463222;
  border-right: 4px solid #463222;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 768px) {
  .achievementsModal .achievements-window-content {
    margin-top: -0.46783626cqi;
  }
}
@media only screen and (min-width: 768px) {
  .achievementsModal .achievements-window-content {
    margin-left: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .achievementsModal .achievements-window-content {
    margin-right: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .achievementsModal .achievements-window-content {
    margin-bottom: -0.29239766cqi;
  }
}
@media only screen and (min-width: 768px) {
  .achievementsModal .achievements-window-content {
    border-width: 0.23391813cqi;
  }
}
.achievementsModal .ach-flex {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.achievementsModal .ach-tabs-container {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .achievementsModal .ach-tabs-container {
    min-width: 23.39181287cqi;
  }
}
@media only screen and (min-width: 768px) {
  .achievementsModal .ach-tabs-container {
    max-width: 23.39181287cqi;
  }
}
@media only screen and (min-width: 768px) {
  .achievementsModal .ach-tabs-container {
    padding: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  .achievementsModal .ach-tabs-container {
    padding-right: 0cqi;
  }
}
.achievementsModal .ach-header {
  color: #ffca77;
}
@media only screen and (min-width: 768px) {
  .achievementsModal .ach-header {
    font-size: 1.6374269cqi;
  }
}
@media only screen and (max-width: 767px) {
  .achievementsModal .ach-header {
    font-size: 28px;
  }
}
@media only screen and (min-width: 768px) {
  .achievementsModal .ach-header {
    margin-bottom: 0.46783626cqi;
  }
}
.achievementsModal .ach-progress {
  opacity: 0.7;
}
@media only screen and (min-width: 768px) {
  .achievementsModal .ach-progress {
    font-size: 0.87719298cqi;
  }
}
@media only screen and (max-width: 767px) {
  .achievementsModal .ach-progress {
    font-size: 15px;
  }
}
@media only screen and (min-width: 768px) {
  .achievementsModal .ach-progress {
    margin-bottom: 1.16959064cqi;
  }
}
.achievementsModal .ach-menu-title {
  color: #ffca77;
  flex-shrink: 0;
  line-height: 1.1;
}
@media only screen and (min-width: 768px) {
  .achievementsModal .ach-menu-title {
    font-size: 2.10526316cqi;
  }
}
@media only screen and (max-width: 767px) {
  .achievementsModal .ach-menu-title {
    font-size: 36px;
  }
}
@media only screen and (min-width: 768px) {
  .achievementsModal .ach-menu-title {
    margin-bottom: 1.16959064cqi;
  }
}
.achievementsModal .ach-tabs {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
@media only screen and (min-width: 768px) {
  .achievementsModal .ach-tabs {
    gap: 0.46783626cqi;
  }
}
@media only screen and (max-width: 767px) {
  .achievementsModal .ach-tabs {
    gap: 8px;
  }
}
@media only screen and (min-width: 768px) {
  .achievementsModal .ach-tabs {
    margin-top: 0.58479532cqi;
  }
}
.achievementsModal .ach-tab {
  background: #38342c9c;
  border: 2px solid #000;
  transition: 0.2s;
  opacity: 0.8;
  align-items: center;
  display: flex;
  cursor: url('../icons/cursors/pointer.png'), auto;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .achievementsModal .ach-tab {
    border-width: 0.11695906cqi;
  }
}
@media only screen and (min-width: 768px) {
  .achievementsModal .ach-tab {
    border-radius: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .achievementsModal .ach-tab {
    padding-left: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .achievementsModal .ach-tab {
    padding-right: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .achievementsModal .ach-tab {
    padding-top: 0.70175439cqi;
  }
}
@media only screen and (min-width: 768px) {
  .achievementsModal .ach-tab {
    padding-bottom: 0.70175439cqi;
  }
}
@media only screen and (min-width: 768px) {
  .achievementsModal .ach-tab {
    min-height: 4.21052632cqi;
  }
}
.achievementsModal .ach-tab:hover {
  filter: brightness(1.08);
}
.achievementsModal .ach-tab.selected {
  opacity: 1;
  border-color: #cc7c00;
  background: #4a3f2e;
}
.achievementsModal .ach-tab.selected .att-progress-bar {
  background: #ffca77;
}
.achievementsModal .ach-tab.selected .att-count {
  color: #ffca77;
  opacity: 1;
}
.achievementsModal .att-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .achievementsModal .att-top {
    gap: 0.58479532cqi;
  }
}
@media only screen and (max-width: 767px) {
  .achievementsModal .att-top {
    gap: 10px;
  }
}
.achievementsModal .att-title {
  line-height: 1.25;
  flex: 1;
  min-width: 0;
}
@media only screen and (min-width: 768px) {
  .achievementsModal .att-title {
    font-size: 1.05263158cqi;
  }
}
@media only screen and (max-width: 767px) {
  .achievementsModal .att-title {
    font-size: 18px;
  }
}
.achievementsModal .att-count {
  opacity: 0.7;
  flex-shrink: 0;
  white-space: nowrap;
}
@media only screen and (min-width: 768px) {
  .achievementsModal .att-count {
    font-size: 0.81871345cqi;
  }
}
@media only screen and (max-width: 767px) {
  .achievementsModal .att-count {
    font-size: 14px;
  }
}
@media only screen and (min-width: 768px) {
  .achievementsModal .att-count {
    margin-top: 0.11695906cqi;
  }
}
.achievementsModal .att-progress {
  width: 100%;
  height: 6px;
  min-height: 6px;
  background: #1a1410;
  border: 1px solid #4a3f2e;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .achievementsModal .att-progress {
    margin-top: 0.58479532cqi;
  }
}
.achievementsModal .att-progress-bar {
  display: block;
  height: 6px;
  min-height: 6px;
  background: #cc7c00;
  border-radius: 2px;
  transition: width 0.3s ease;
}
.achievementsModal .ach-tab-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  width: 100%;
}
.achievementsModal .ach-content {
  width: 100%;
  min-width: 0;
  flex: 1;
  min-height: 0;
}
@media only screen and (min-width: 768px) {
  .achievementsModal .page-content {
    padding: 1.75438596cqi;
  }
}
.achievementsModal .page-title {
  color: #ffca77;
  line-height: 1.1;
}
@media only screen and (min-width: 768px) {
  .achievementsModal .page-title {
    font-size: 2.10526316cqi;
  }
}
@media only screen and (max-width: 767px) {
  .achievementsModal .page-title {
    font-size: 36px;
  }
}
@media only screen and (min-width: 768px) {
  .achievementsModal .page-title {
    margin-bottom: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .achievementsModal .achievements-list {
    margin-top: 0.58479532cqi;
  }
}
.achievementsModal .achievement {
  display: flex;
  transition: 0.3s;
}
@media only screen and (min-width: 768px) {
  .achievementsModal .achievement {
    margin-bottom: 0.93567251cqi;
  }
}
.achievementsModal .achievement.locked {
  opacity: 0.55;
}
.achievementsModal .ach-image {
  text-align: center;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid #666;
}
@media only screen and (min-width: 768px) {
  .achievementsModal .ach-image {
    min-width: 4.67836257cqi;
  }
}
@media only screen and (min-width: 768px) {
  .achievementsModal .ach-image {
    max-width: 4.67836257cqi;
  }
}
@media only screen and (min-width: 768px) {
  .achievementsModal .ach-image {
    min-height: 4.67836257cqi;
  }
}
@media only screen and (min-width: 768px) {
  .achievementsModal .ach-image {
    font-size: 1.75438596cqi;
  }
}
@media only screen and (max-width: 767px) {
  .achievementsModal .ach-image {
    font-size: 30px;
  }
}
@media only screen and (min-width: 768px) {
  .achievementsModal .ach-image {
    border-radius: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .achievementsModal .ach-image {
    margin-right: 0.70175439cqi;
  }
}
@media only screen and (min-width: 768px) {
  .achievementsModal .ach-image {
    border-width: 0.11695906cqi;
  }
}
.achievementsModal .ach-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.achievementsModal .ach-image.nono {
  background: #333;
}
.achievementsModal .ach-info {
  background: #000;
  border: 2px solid #666;
  box-shadow: 0px 0px 0px 0.1754386cqi #000;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media only screen and (min-width: 768px) {
  .achievementsModal .ach-info {
    border-width: 0.11695906cqi;
  }
}
@media only screen and (min-width: 768px) {
  .achievementsModal .ach-info {
    border-radius: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .achievementsModal .ach-info {
    padding: 0.93567251cqi;
  }
}
.achievementsModal .ach-titlearea {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.achievementsModal .ach-title {
  color: #ffca77;
}
@media only screen and (min-width: 768px) {
  .achievementsModal .ach-title {
    font-size: 1.16959064cqi;
  }
}
@media only screen and (max-width: 767px) {
  .achievementsModal .ach-title {
    font-size: 20px;
  }
}
.achievementsModal .achievement.locked .ach-title {
  color: #999;
}
.achievementsModal .ach-date {
  opacity: 0.5;
}
@media only screen and (min-width: 768px) {
  .achievementsModal .ach-date {
    font-size: 0.76023392cqi;
  }
}
@media only screen and (max-width: 767px) {
  .achievementsModal .ach-date {
    font-size: 13px;
  }
}
.achievementsModal .ach-desc {
  opacity: 0.85;
}
@media only screen and (min-width: 768px) {
  .achievementsModal .ach-desc {
    margin-top: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .achievementsModal .ach-desc {
    font-size: 0.87719298cqi;
  }
}
@media only screen and (max-width: 767px) {
  .achievementsModal .ach-desc {
    font-size: 15px;
  }
}
.achievementsModal .ach-desc.locked-text {
  font-style: italic;
  opacity: 0.5;
}
.achievementsModal .ach-item-progress {
  width: 100%;
  height: 5px;
  min-height: 5px;
  background: #1a1410;
  border: 1px solid #4a3f2e;
  border-radius: 3px;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .achievementsModal .ach-item-progress {
    margin-top: 0.58479532cqi;
  }
}
.achievementsModal .ach-item-progress-bar {
  display: block;
  height: 5px;
  min-height: 5px;
  background: #cc7c00;
  border-radius: 2px;
  transition: width 0.3s ease;
}
.achievementsModal .achievement.locked .ach-item-progress-bar {
  background: #8a6a3a;
}
.achievementsModal .achievement:not(.locked) .ach-item-progress-bar {
  background: #ffca77;
}
.actMusicModal {
  background: #000;
}
.actMusicModal .bg {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #0e0a08;
  z-index: 2;
  pointer-events: none;
  opacity: 0.6;
}
.actMusicModal .modal-dialog {
  box-shadow: none !important;
  transform: none !important;
  width: 100%;
  height: 100cqi;
  margin: 0;
  padding: 0;
}
.actMusicModal .modal-content {
  width: 100%;
  background: transparent;
  border: none;
  box-shadow: none !important;
}
@media only screen and (min-width: 768px) {
  .actMusicModal .modal-content {
    padding-top: 2.92397661cqi;
  }
}
.actMusicModal .hero-window {
  display: flex;
  flex-direction: column;
  margin: auto;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
}
@media only screen and (min-width: 768px) {
  .actMusicModal .hero-window {
    width: 40.93567251cqi;
  }
}
@media only screen and (min-width: 768px) {
  .actMusicModal .hero-window {
    bottom: 2.92397661cqi;
  }
}
@media only screen and (min-width: 768px) {
  .actMusicModal .hero-window {
    top: 1.75438596cqi;
  }
}
.actMusicModal .std-modal-closer-in {
  position: absolute;
}
@media only screen and (min-width: 768px) {
  .actMusicModal .std-modal-closer-in {
    top: 0.46783626cqi;
  }
}
@media only screen and (min-width: 768px) {
  .actMusicModal .std-modal-closer-in {
    right: -5.26315789cqi;
  }
}
.actMusicModal .hero-window-top,
.actMusicModal .hero-window-bottom {
  position: relative;
  z-index: 2;
}
.actMusicModal .hero-window-top img,
.actMusicModal .hero-window-bottom img {
  width: 100%;
}
.actMusicModal .hero-window-content {
  background: #000000db;
  position: relative;
  z-index: 1;
  border-left: 4px solid #463222;
  border-right: 4px solid #463222;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .actMusicModal .hero-window-content {
    padding: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  .actMusicModal .hero-window-content {
    margin-top: -0.46783626cqi;
  }
}
@media only screen and (min-width: 768px) {
  .actMusicModal .hero-window-content {
    margin-left: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .actMusicModal .hero-window-content {
    margin-right: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .actMusicModal .hero-window-content {
    margin-bottom: -0.29239766cqi;
  }
}
@media only screen and (min-width: 768px) {
  .actMusicModal .hero-window-content {
    border-width: 0.23391813cqi;
  }
}
.actMusicModal .act-music-title {
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .actMusicModal .act-music-title {
    font-size: 1.6374269cqi;
  }
}
@media only screen and (max-width: 767px) {
  .actMusicModal .act-music-title {
    font-size: 28px;
  }
}
@media only screen and (min-width: 768px) {
  .actMusicModal .act-music-title {
    margin-bottom: 1.16959064cqi;
  }
}
.actMusicModal .act-music-acts {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
@media only screen and (min-width: 768px) {
  .actMusicModal .act-music-acts {
    margin-bottom: 1.16959064cqi;
  }
}
.actMusicModal .act-music-act {
  display: flex;
  align-items: center;
  cursor: url('../icons/cursors/pointer.png'), auto;
  overflow: hidden;
  border: 2px solid #000;
  background: #38342c9c;
  transition: border-color 0.2s, background 0.2s;
}
@media only screen and (min-width: 768px) {
  .actMusicModal .act-music-act {
    border-radius: 0.46783626cqi;
  }
}
@media only screen and (min-width: 768px) {
  .actMusicModal .act-music-act {
    border-width: 0.11695906cqi;
  }
}
@media only screen and (min-width: 768px) {
  .actMusicModal .act-music-act {
    margin-bottom: 0.46783626cqi;
  }
}
.actMusicModal .act-music-act:last-child {
  margin-bottom: 0;
}
.actMusicModal .act-music-act.selected {
  border-color: #cf9b48;
  background: #4a3f2e;
}
.actMusicModal .act-music-act.playing:not(.selected) {
  border-color: #5d8bff;
}
.actMusicModal .act-music-act-bg {
  background-position: center;
  background-size: cover;
  flex-shrink: 0;
}
@media only screen and (min-width: 768px) {
  .actMusicModal .act-music-act-bg {
    width: 4.67836257cqi;
  }
}
@media only screen and (min-width: 768px) {
  .actMusicModal .act-music-act-bg {
    min-width: 4.67836257cqi;
  }
}
@media only screen and (min-width: 768px) {
  .actMusicModal .act-music-act-bg {
    height: 2.80701754cqi;
  }
}
.actMusicModal .act-music-act-info {
  display: flex;
  align-items: center;
  min-width: 0;
}
@media only screen and (min-width: 768px) {
  .actMusicModal .act-music-act-info {
    gap: 0.70175439cqi;
  }
}
@media only screen and (max-width: 767px) {
  .actMusicModal .act-music-act-info {
    gap: 12px;
  }
}
@media only screen and (min-width: 768px) {
  .actMusicModal .act-music-act-info {
    padding-top: 0.46783626cqi;
  }
}
@media only screen and (min-width: 768px) {
  .actMusicModal .act-music-act-info {
    padding-right: 0.93567251cqi;
  }
}
@media only screen and (min-width: 768px) {
  .actMusicModal .act-music-act-info {
    padding-bottom: 0.46783626cqi;
  }
}
@media only screen and (min-width: 768px) {
  .actMusicModal .act-music-act-info {
    padding-left: 0.70175439cqi;
  }
}
.actMusicModal .act-music-act-number {
  opacity: 0.6;
  white-space: nowrap;
}
@media only screen and (min-width: 768px) {
  .actMusicModal .act-music-act-number {
    font-size: 0.81871345cqi;
  }
}
@media only screen and (max-width: 767px) {
  .actMusicModal .act-music-act-number {
    font-size: 14px;
  }
}
.actMusicModal .act-music-act-title {
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media only screen and (min-width: 768px) {
  .actMusicModal .act-music-act-title {
    font-size: 1.05263158cqi;
  }
}
@media only screen and (max-width: 767px) {
  .actMusicModal .act-music-act-title {
    font-size: 18px;
  }
}
.actMusicModal .act-music-footer {
  flex-shrink: 0;
}
.actMusicModal .act-music-playing {
  text-align: center;
  opacity: 0.8;
}
@media only screen and (min-width: 768px) {
  .actMusicModal .act-music-playing {
    margin-bottom: 0.87719298cqi;
  }
}
@media only screen and (min-width: 768px) {
  .actMusicModal .act-music-playing {
    font-size: 0.81871345cqi;
  }
}
@media only screen and (max-width: 767px) {
  .actMusicModal .act-music-playing {
    font-size: 14px;
  }
}
.actMusicModal .act-music-playing .font-title {
  color: #cf9b48;
}
.bestiaryModal {
  background: #000;
}
.bestiaryModal .bg {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  z-index: 2;
  pointer-events: none;
  opacity: 0.3;
  background-image: url(../images/backgrounds/rooms/colods.jpg);
}
.bestiaryModal .modal-dialog {
  box-shadow: none !important;
  transform: none !important;
  width: 100%;
  height: 100cqi;
  margin: 0;
  padding: 0;
}
.bestiaryModal .modal-content {
  width: 100%;
  background: transparent;
  border: none;
  box-shadow: none !important;
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .modal-content {
    padding-top: 2.92397661cqi;
  }
}
.bestiaryModal .bestiary-window {
  display: flex;
  flex-direction: column;
  margin: auto;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .bestiary-window {
    width: 70.1754386cqi;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .bestiary-window {
    bottom: 2.92397661cqi;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .bestiary-window {
    top: 1.75438596cqi;
  }
}
.bestiaryModal .std-modal-closer-in {
  position: absolute;
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .std-modal-closer-in {
    top: 0.46783626cqi;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .std-modal-closer-in {
    right: -5.26315789cqi;
  }
}
.bestiaryModal .bestiary-window-top,
.bestiaryModal .bestiary-window-bottom {
  position: relative;
  z-index: 2;
}
.bestiaryModal .bestiary-window-top img,
.bestiaryModal .bestiary-window-bottom img {
  width: 100%;
}
.bestiaryModal .bestiary-window-content {
  background: #1a1614;
  position: relative;
  z-index: 1;
  border-left: 4px solid #463222;
  border-right: 4px solid #463222;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .bestiary-window-content {
    margin-top: -0.46783626cqi;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .bestiary-window-content {
    margin-left: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .bestiary-window-content {
    margin-right: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .bestiary-window-content {
    margin-bottom: -0.29239766cqi;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .bestiary-window-content {
    border-width: 0.23391813cqi;
  }
}
.bestiaryModal .best-flex {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.bestiaryModal .best-tabs-container {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .best-tabs-container {
    min-width: 23.39181287cqi;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .best-tabs-container {
    max-width: 23.39181287cqi;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .best-tabs-container {
    padding: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .best-tabs-container {
    padding-right: 0cqi;
  }
}
.bestiaryModal .best-tabs {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .best-tabs {
    gap: 0.46783626cqi;
  }
}
@media only screen and (max-width: 767px) {
  .bestiaryModal .best-tabs {
    gap: 8px;
  }
}
.bestiaryModal .bast-tab {
  background: #38342c9c;
  border: 2px solid #000;
  transition: 0.2s;
  opacity: 0.8;
  align-items: center;
  display: flex;
  cursor: url('../icons/cursors/pointer.png'), auto;
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .bast-tab {
    border-width: 0.11695906cqi;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .bast-tab {
    border-radius: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .bast-tab {
    padding-left: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .bast-tab {
    padding-right: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .bast-tab {
    min-height: 3.50877193cqi;
  }
}
.bestiaryModal .bast-tab:hover {
  filter: brightness(1.08);
}
.bestiaryModal .bast-tab.selected {
  opacity: 1;
  border-color: #cc7c00;
  background: #4a3f2e;
}
.bestiaryModal .btt-title {
  line-height: 1.25;
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .btt-title {
    font-size: 1.05263158cqi;
  }
}
@media only screen and (max-width: 767px) {
  .bestiaryModal .btt-title {
    font-size: 18px;
  }
}
.bestiaryModal .best-tab-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.bestiaryModal .best-content {
  width: 100%;
  min-width: 0;
  flex: 1;
  min-height: 0;
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .page-content {
    padding: 1.75438596cqi;
  }
}
.bestiaryModal .page-title {
  color: #ffca77;
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .page-title {
    font-size: 2.10526316cqi;
  }
}
@media only screen and (max-width: 767px) {
  .bestiaryModal .page-title {
    font-size: 36px;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .page-title {
    margin-bottom: 1.16959064cqi;
  }
}
.bestiaryModal .page-desc {
  opacity: 0.85;
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .page-desc {
    font-size: 0.99415205cqi;
  }
}
@media only screen and (max-width: 767px) {
  .bestiaryModal .page-desc {
    font-size: 17px;
  }
}
.bestiaryModal .page-subtitle {
  color: #ffca77;
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .page-subtitle {
    font-size: 1.40350877cqi;
  }
}
@media only screen and (max-width: 767px) {
  .bestiaryModal .page-subtitle {
    font-size: 24px;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .page-subtitle {
    margin-top: 2.04678363cqi;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .page-subtitle {
    margin-bottom: 1.16959064cqi;
  }
}
.bestiaryModal .buy-this {
  background: #000;
  border: 2px solid #666;
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .buy-this {
    border-width: 0.11695906cqi;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .buy-this {
    border-radius: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .buy-this {
    padding: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .buy-this {
    font-size: 0.93567251cqi;
  }
}
@media only screen and (max-width: 767px) {
  .bestiaryModal .buy-this {
    font-size: 16px;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .buy-this {
    margin-top: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .buy-this {
    margin-bottom: 2.92397661cqi;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .buy-this-text {
    margin-bottom: 1.16959064cqi;
  }
}
.bestiaryModal .buy-this-button {
  display: flex;
  align-items: center;
}
.bestiaryModal .buy-this-button img {
  border-radius: 50%;
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .buy-this-button img {
    width: 1.4619883cqi;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .buy-this-button img {
    margin-left: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .buy-this-button img {
    margin-top: -0.1754386cqi;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .money-now {
    margin-left: 1.16959064cqi;
  }
}
.bestiaryModal .enemy-info {
  background: #000;
  border: 2px solid #666;
  box-shadow: 0px 0px 0px 0.1754386cqi #000;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .enemy-info {
    border-width: 0.11695906cqi;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .enemy-info {
    border-radius: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .enemy-info {
    padding: 1.16959064cqi;
  }
}
.bestiaryModal .enemy-info.boss .bm-title {
  color: #ffca77;
}
.bestiaryModal .enemy-info.elite .bm-title {
  color: #c9a0ff;
}
.bestiaryModal .enemy {
  display: flex;
  transition: 0.3s;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .enemy {
    margin-bottom: 1.16959064cqi;
  }
}
.bestiaryModal .attack-title {
  display: flex;
  align-items: center;
  font-family: var(--fontTitle);
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .attack-title {
    margin-top: 2.33918129cqi;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .attack-title {
    margin-bottom: 0.81871345cqi;
  }
}
.bestiaryModal .at-img {
  display: flex;
  align-items: center;
  background: #000;
  border: 1px solid #7f7f7f;
  justify-content: center;
  box-shadow: 0px 0px 0px 0.1754386cqi #000;
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .at-img {
    height: 2.63157895cqi;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .at-img {
    width: 2.63157895cqi;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .at-img {
    padding: 0.29239766cqi;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .at-img {
    border-radius: 0.40935673cqi;
  }
}
.bestiaryModal .at-img img {
  max-width: 100%;
  max-height: 100%;
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .at-text {
    margin-left: 0.87719298cqi;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .at-text {
    font-size: 1.16959064cqi;
  }
}
@media only screen and (max-width: 767px) {
  .bestiaryModal .at-text {
    font-size: 20px;
  }
}
.bestiaryModal .at-text ul {
  padding-left: 0;
  margin-left: 0;
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .enemies-list {
    margin-top: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .enemy-text {
    margin-top: 0.87719298cqi;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .enemy-text {
    font-size: 0.93567251cqi;
  }
}
@media only screen and (max-width: 767px) {
  .bestiaryModal .enemy-text {
    font-size: 16px;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .enemy-text p {
    margin-bottom: 0.93567251cqi;
  }
}
.bestiaryModal .enemy-text ul {
  list-style-type: none;
  padding-left: 0;
}
.bestiaryModal .enemy-text ul li::before {
  content: "• ";
}
.bestiaryModal .enemy-titlearea {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bestiaryModal .enemy-right {
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .enemy-right {
    font-size: 1.16959064cqi;
  }
}
@media only screen and (max-width: 767px) {
  .bestiaryModal .enemy-right {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .enemy-right img {
    width: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .enemy-right img {
    margin-left: 0.58479532cqi;
  }
}
.bestiaryModal .bm-image {
  height: 100%;
  text-align: center;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .bm-image {
    min-width: 5.84795322cqi;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .bm-image {
    max-width: 5.84795322cqi;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .bm-image {
    line-height: 5.84795322cqi;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .bm-image {
    font-size: 1.75438596cqi;
  }
}
@media only screen and (max-width: 767px) {
  .bestiaryModal .bm-image {
    font-size: 30px;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .bm-image {
    border-radius: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .bm-image {
    margin-right: 0.58479532cqi;
  }
}
.bestiaryModal .bm-image img {
  width: 100%;
}
.bestiaryModal .bm-image.nono {
  background: #333;
}
.bestiaryModal .enemy-left {
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .bestiaryModal .bm-title {
    font-size: 1.16959064cqi;
  }
}
@media only screen and (max-width: 767px) {
  .bestiaryModal .bm-title {
    font-size: 20px;
  }
}
.bestiaryModal .page-actions ul {
  padding-left: 20px;
  list-style-type: none;
  padding-left: 0px;
}
.bestiaryModal .page-actions ul li::before {
  content: "• ";
}
.cardDecksEditorModal {
  background: #000;
}
.cardDecksEditorModal .bg {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  z-index: 2;
  pointer-events: none;
  opacity: 0.6;
  background-image: url(../images/backgrounds/rooms/colods.jpg);
}
.cardDecksEditorModal .modal-dialog {
  box-shadow: none !important;
  transform: none !important;
  width: 100%;
  height: 100cqi;
  margin: 0;
  padding: 0;
}
.cardDecksEditorModal .modal-content {
  width: 100%;
  background: transparent;
  border: none;
  box-shadow: none !important;
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .modal-content {
    padding-top: 2.92397661cqi;
  }
}
.cardDecksEditorModal .cde-window {
  display: flex;
  flex-direction: column;
  margin: auto;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-window {
    width: 70.1754386cqi;
  }
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-window {
    bottom: 2.92397661cqi;
  }
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-window {
    top: 1.75438596cqi;
  }
}
.cardDecksEditorModal .std-modal-closer-in {
  position: absolute;
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .std-modal-closer-in {
    top: 0.46783626cqi;
  }
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .std-modal-closer-in {
    right: -5.26315789cqi;
  }
}
.cardDecksEditorModal .cde-window-top,
.cardDecksEditorModal .cde-window-bottom {
  position: relative;
  z-index: 2;
}
.cardDecksEditorModal .cde-window-top img,
.cardDecksEditorModal .cde-window-bottom img {
  width: 100%;
}
.cardDecksEditorModal .cde-window-content {
  background: #1a1614;
  position: relative;
  z-index: 1;
  border-left: 4px solid #463222;
  border-right: 4px solid #463222;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-window-content {
    margin-top: -0.46783626cqi;
  }
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-window-content {
    margin-left: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-window-content {
    margin-right: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-window-content {
    margin-bottom: -0.29239766cqi;
  }
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-window-content {
    border-width: 0.23391813cqi;
  }
}
.cardDecksEditorModal .cde-flex {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.cardDecksEditorModal .cde-sidebar {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: #000;
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-sidebar {
    min-width: 23.39181287cqi;
  }
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-sidebar {
    max-width: 23.39181287cqi;
  }
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-sidebar {
    padding: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-sidebar {
    padding-right: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-sidebar {
    gap: 0.93567251cqi;
  }
}
@media only screen and (max-width: 767px) {
  .cardDecksEditorModal .cde-sidebar {
    gap: 16px;
  }
}
.cardDecksEditorModal .cde-header {
  flex-shrink: 0;
}
.cardDecksEditorModal .cde-title {
  color: #ffca77;
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-title {
    font-size: 2.10526316cqi;
  }
}
@media only screen and (max-width: 767px) {
  .cardDecksEditorModal .cde-title {
    font-size: 36px;
  }
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-title {
    margin-bottom: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-title {
    margin-right: 0.58479532cqi;
  }
}
.cardDecksEditorModal .cde-rules {
  line-height: 1.4;
  opacity: 0.65;
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-rules {
    font-size: 0.93567251cqi;
  }
}
@media only screen and (max-width: 767px) {
  .cardDecksEditorModal .cde-rules {
    font-size: 16px;
  }
}
.cardDecksEditorModal .cde-decks-list {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-decks-list {
    gap: 0.46783626cqi;
  }
}
@media only screen and (max-width: 767px) {
  .cardDecksEditorModal .cde-decks-list {
    gap: 8px;
  }
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-decks-list {
    padding-right: 0.70175439cqi;
  }
}
.cardDecksEditorModal .cde-deck {
  background: #38342c9c;
  border: 2px solid #000;
  cursor: url('../icons/cursors/pointer.png'), auto;
  transition: 0.2s;
  flex-shrink: 0;
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-deck {
    border-width: 0.11695906cqi;
  }
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-deck {
    border-radius: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-deck {
    padding: 0.81871345cqi;
  }
}
.cardDecksEditorModal .cde-deck.active {
  border-color: #cc7c00;
  background: #4a3f2e;
}
.cardDecksEditorModal .cde-deck:hover {
  filter: brightness(1.08);
}
.cardDecksEditorModal .cde-deck-name {
  line-height: 1.25;
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-deck-name {
    font-size: 1.05263158cqi;
  }
}
@media only screen and (max-width: 767px) {
  .cardDecksEditorModal .cde-deck-name {
    font-size: 18px;
  }
}
.cardDecksEditorModal .cde-top-flex {
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-top-flex {
    margin-bottom: 0.58479532cqi;
  }
}
.cardDecksEditorModal .cde-content {
  width: 100%;
  min-width: 0;
  flex: 1;
  min-height: 0;
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-content {
    padding: 1.75438596cqi;
  }
}
.cardDecksEditorModal .cde-deck-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-deck-toolbar {
    gap: 0.93567251cqi;
  }
}
@media only screen and (max-width: 767px) {
  .cardDecksEditorModal .cde-deck-toolbar {
    gap: 16px;
  }
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-deck-toolbar {
    margin-bottom: 1.40350877cqi;
  }
}
.cardDecksEditorModal .cde-deck-toolbar-name {
  line-height: 1.2;
  color: #ffca77;
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-deck-toolbar-name {
    font-size: 1.6374269cqi;
  }
}
@media only screen and (max-width: 767px) {
  .cardDecksEditorModal .cde-deck-toolbar-name {
    font-size: 28px;
  }
}
.cardDecksEditorModal .cde-deck-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-deck-toolbar-actions {
    gap: 0.58479532cqi;
  }
}
@media only screen and (max-width: 767px) {
  .cardDecksEditorModal .cde-deck-toolbar-actions {
    gap: 10px;
  }
}
.cardDecksEditorModal .cde-deck-delete-btn {
  background: #8b2e2e;
  box-shadow: inset 0 1px 3px 0 #c44, 0 5px 0 0 #5a1a1a;
}
.cardDecksEditorModal .cde-deck-delete-btn:hover {
  background: #a33a3a;
  box-shadow: inset 0 1px 3px 0 #d55, 0 7px 0 0 #5a1a1a;
}
.cardDecksEditorModal .cde-deck-delete-btn:active {
  box-shadow: inset 0 1px 3px 0 #c44, 0 2px 0 0 #5a1a1a;
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-cards-block {
    margin-bottom: 1.75438596cqi;
  }
}
.cardDecksEditorModal .cde-cards-block:last-child {
  margin-bottom: 0;
}
.cardDecksEditorModal .cde-section-title {
  color: #ffca77;
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-section-title {
    font-size: 1.28654971cqi;
  }
}
@media only screen and (max-width: 767px) {
  .cardDecksEditorModal .cde-section-title {
    font-size: 22px;
  }
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-section-title {
    margin-bottom: 0.93567251cqi;
  }
}
.cardDecksEditorModal .cde-count {
  opacity: 0.6;
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-count {
    font-size: 1.05263158cqi;
  }
}
@media only screen and (max-width: 767px) {
  .cardDecksEditorModal .cde-count {
    font-size: 18px;
  }
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-count {
    margin-left: 0.46783626cqi;
  }
}
.cardDecksEditorModal .cde-cards-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-cards-grid {
    gap: 0.58479532cqi;
  }
}
@media only screen and (max-width: 767px) {
  .cardDecksEditorModal .cde-cards-grid {
    gap: 10px;
  }
}
.cardDecksEditorModal .cde-card-wrap {
  position: relative;
  cursor: url('../icons/cursors/pointer.png'), auto;
  aspect-ratio: 83 / 100;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-card-wrap {
    width: 6.19883041cqi;
  }
}
.cardDecksEditorModal .cde-card-wrap.disabled {
  opacity: 0.35;
  filter: grayscale(0.8);
  pointer-events: none;
}
.cardDecksEditorModal .cde-card-count {
  position: absolute;
  background: #747d98;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  box-shadow: 0.11695906cqi -0.05847953cqi 0.1754386cqi 0cqi #00000063;
  pointer-events: none;
  z-index: 2;
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-card-count {
    right: -0.23391813cqi;
  }
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-card-count {
    bottom: -0.23391813cqi;
  }
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-card-count {
    height: 1.6374269cqi;
  }
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-card-count {
    min-width: 1.6374269cqi;
  }
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-card-count {
    line-height: 1.40350877cqi;
  }
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-card-count {
    font-size: 0.93567251cqi;
  }
}
@media only screen and (max-width: 767px) {
  .cardDecksEditorModal .cde-card-count {
    font-size: 16px;
  }
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-card-count {
    padding-left: 0.35087719cqi;
  }
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-card-count {
    padding-right: 0.35087719cqi;
  }
}
.cardDecksEditorModal .cde-empty {
  opacity: 0.45;
}
@media only screen and (min-width: 768px) {
  .cardDecksEditorModal .cde-empty {
    font-size: 0.93567251cqi;
  }
}
@media only screen and (max-width: 767px) {
  .cardDecksEditorModal .cde-empty {
    font-size: 16px;
  }
}
.cleverUsed .bonus {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
}
@media only screen and (min-width: 768px) {
  .cleverUsed .bonus {
    margin-top: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .cleverUsed .bonus {
    margin-bottom: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .combatLogModal .modal-dialog {
    max-width: 32.74853801cqi;
  }
}
.combat-log-modal .combat-log-list {
  max-height: 420px;
  overflow: auto;
  text-align: left;
  background: rgba(0, 0, 0, 0.25);
}
@media only screen and (min-width: 768px) {
  .combat-log-modal .combat-log-list {
    padding: 0.46783626cqi;
  }
}
@media only screen and (min-width: 768px) {
  .combat-log-modal .combat-log-list {
    margin-bottom: 0.93567251cqi;
  }
}
@media only screen and (min-width: 768px) {
  .combat-log-modal .combat-log-list {
    border-radius: 0.46783626cqi;
  }
}
.combat-log-modal .combat-log-row {
  display: flex;
  align-items: flex-start;
  line-height: 1.35em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
@media only screen and (min-width: 768px) {
  .combat-log-modal .combat-log-row {
    padding: 0.35087719cqi;
  }
}
@media only screen and (min-width: 768px) {
  .combat-log-modal .combat-log-row {
    font-size: 0.93567251cqi;
  }
}
@media only screen and (max-width: 767px) {
  .combat-log-modal .combat-log-row {
    font-size: 16px;
  }
}
.combat-log-modal .combat-log-row.turn {
  opacity: 0.7;
  justify-content: center;
  border-bottom: none;
}
@media only screen and (min-width: 768px) {
  .combat-log-modal .combat-log-row.turn {
    font-size: 0.81871345cqi;
  }
}
@media only screen and (max-width: 767px) {
  .combat-log-modal .combat-log-row.turn {
    font-size: 14px;
  }
}
@media only screen and (min-width: 768px) {
  .combat-log-modal .combat-log-row.turn {
    padding-top: 0.70175439cqi;
  }
}
.combat-log-modal .combat-log-row.death {
  color: #ff8f8f;
}
.combat-log-modal .combat-log-row.heal {
  color: #9dffb0;
}
.combat-log-modal .combat-log-row.arena {
  color: #efbc2b;
}
.combat-log-modal .combat-log-turn {
  min-width: 28px;
  opacity: 0.55;
  padding-top: 1px;
}
@media only screen and (min-width: 768px) {
  .combat-log-modal .combat-log-turn {
    font-size: 0.81871345cqi;
  }
}
@media only screen and (max-width: 767px) {
  .combat-log-modal .combat-log-turn {
    font-size: 14px;
  }
}
@media only screen and (min-width: 768px) {
  .combat-log-modal .combat-log-turn {
    margin-right: 0.58479532cqi;
  }
}
.combat-log-modal .combat-log-text {
  flex: 1;
}
.combat-log-modal .combat-log-empty {
  opacity: 0.7;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .combat-log-modal .combat-log-empty {
    margin-bottom: 0.93567251cqi;
  }
}
.gameMenuModal .modal-dialog {
  margin: 0;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: auto;
  background: #171519db;
}
.gameMenuModal .img-wrapper {
  margin: 0 auto 0px;
}
@media only screen and (min-width: 768px) {
  .gameMenuModal .img-wrapper {
    width: 17.54385965cqi;
  }
}
@media only screen and (min-width: 768px) {
  .gameMenuModal .img-wrapper {
    margin-bottom: 1.75438596cqi;
  }
}
.gameMenuModal .img-wrapper img {
  width: 100%;
}
.gameMenuModal .modal-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: inset 0cqi 0cqi 0.1754386cqi 0cqi #5d4111;
  font-family: var(--fontTitle);
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .gameMenuModal .modal-content {
    width: 29.23976608cqi;
  }
}
@media only screen and (min-width: 768px) {
  .gameMenuModal .modal-content {
    border-radius: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .gameMenuModal .grad-inner {
    padding: 0.87719298cqi;
  }
}
.gameMenuModal .menu-button {
  text-align: center;
  opacity: 0.5;
  transition: 0.3s;
  letter-spacing: 2px;
}
@media only screen and (min-width: 768px) {
  .gameMenuModal .menu-button {
    line-height: 3.21637427cqi;
  }
}
@media only screen and (min-width: 768px) {
  .gameMenuModal .menu-button {
    font-size: 1.69590643cqi;
  }
}
@media only screen and (max-width: 767px) {
  .gameMenuModal .menu-button {
    font-size: 29px;
  }
}
.gameMenuModal .menu-button:hover {
  cursor: url('../icons/cursors/pointer.png'), auto;
  opacity: 1;
}
.gameMenuModal .menu {
  box-shadow: inset 0cqi 0cqi 0.81871345cqi 0cqi #00000075;
}
@media only screen and (min-width: 768px) {
  .gameMenuModal .menu {
    padding-top: 2.92397661cqi;
  }
}
@media only screen and (min-width: 768px) {
  .gameMenuModal .menu {
    padding-right: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .gameMenuModal .menu {
    padding-bottom: 4.09356725cqi;
  }
}
@media only screen and (min-width: 768px) {
  .gameMenuModal .menu {
    border-radius: 0.64327485cqi;
  }
}
.heroModal {
  background: #000;
  /* Define the shadow movement */
}
.heroModal .bg {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  z-index: 2;
  pointer-events: none;
  opacity: 0.3;
  transition: opacity 0.4s;
}
.heroModal .hero-modal-root.--room-view .bg {
  opacity: 1;
}
.heroModal .hero-window {
  display: flex;
  flex-direction: column;
  margin: auto;
  position: relative;
  z-index: 4;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
}
@media only screen and (min-width: 768px) {
  .heroModal .hero-window {
    width: 70.1754386cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .hero-window {
    bottom: 2.92397661cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .hero-window {
    top: 1.75438596cqi;
  }
}
.heroModal .hero-skin,
.heroModal .hero-room {
  position: fixed;
  z-index: 5;
  border-radius: 50%;
  transition: 0.3s;
}
@media only screen and (min-width: 768px) {
  .heroModal .hero-skin,
  .heroModal .hero-room {
    bottom: 2.33918129cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .hero-skin,
  .heroModal .hero-room {
    width: 8.77192982cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .hero-skin,
  .heroModal .hero-room {
    height: 8.77192982cqi;
  }
}
.heroModal .hero-skin img,
.heroModal .hero-room img {
  width: 100%;
}
.heroModal .hero-skin:hover,
.heroModal .hero-room:hover {
  transform: scale(1.1);
  cursor: url('../icons/cursors/pointer.png'), auto;
}
@media only screen and (min-width: 768px) {
  .heroModal .hero-skin {
    right: 2.33918129cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .hero-room {
    left: 2.33918129cqi;
  }
}
.heroModal .std-modal-closer-in {
  position: absolute;
}
@media only screen and (min-width: 768px) {
  .heroModal .std-modal-closer-in {
    top: 0.46783626cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .std-modal-closer-in {
    right: -5.26315789cqi;
  }
}
.heroModal .hero-window-content {
  background: #000000db;
  position: relative;
  z-index: 1;
  border-left: 4px solid #463222;
  border-right: 4px solid #463222;
}
@media only screen and (min-width: 768px) {
  .heroModal .hero-window-content {
    padding: 2.92397661cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .hero-window-content {
    margin-top: -0.46783626cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .hero-window-content {
    margin-left: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .hero-window-content {
    margin-right: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .hero-window-content {
    margin-bottom: -0.29239766cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .hero-window-content {
    border-width: 0.23391813cqi;
  }
}
.heroModal .hero-window-bottom {
  position: relative;
  z-index: 2;
}
.heroModal .hero-window-top {
  position: relative;
  z-index: 2;
}
.heroModal .hero-window-top img {
  width: 100%;
}
.heroModal .hero-window-bottom img {
  width: 100%;
}
.heroModal .hero-room-back {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
}
@media only screen and (min-width: 768px) {
  .heroModal .hero-room-back {
    bottom: 2.33918129cqi;
  }
}
.heroModal .spell-after {
  display: flex;
  font-family: var(--fontTitle);
}
.heroModal .spell-target {
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .heroModal .spell-target {
    margin-right: 0.87719298cqi;
  }
}
.heroModal .spell-target:last-child {
  margin-right: 0;
}
@media only screen and (min-width: 768px) {
  .heroModal .spell-target img {
    height: 1.6374269cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .spell-target .sp-text {
    padding-top: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .spell-target .sp-text {
    margin-left: 0.40935673cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .spell-target .sp-text {
    font-size: 0.99415205cqi;
  }
}
@media only screen and (max-width: 767px) {
  .heroModal .spell-target .sp-text {
    font-size: 17px;
  }
}
.heroModal .spell-target .sp-text:first-child {
  margin-left: 0;
}
.heroModal .modal-dialog {
  box-shadow: none !important;
  transform: none !important;
  width: 100%;
  height: 100cqi;
  margin: 0;
  padding: 0;
}
.heroModal .levels-area {
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 768px) {
  .heroModal .levels-area {
    gap: 0.58479532cqi;
  }
}
@media only screen and (max-width: 767px) {
  .heroModal .levels-area {
    gap: 10px;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .levels-area {
    padding-bottom: 2.33918129cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .levels-area {
    margin-top: 1.16959064cqi;
  }
}
.heroModal .add-hp {
  background: #cc7c00;
  text-align: center;
  color: #ffffff;
  animation: updateSpellPoints 2s infinite ease-in-out;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}
@media only screen and (min-width: 768px) {
  .heroModal .add-hp {
    width: 2.10526316cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .add-hp {
    height: 2.10526316cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .add-hp {
    margin-left: 0.58479532cqi;
  }
}
.heroModal .add-hp img {
  width: 100%;
}
.heroModal .hero-lifeline {
  display: flex;
  align-items: center;
  justify-content: center;
}
.heroModal .hero-level {
  opacity: 0.75;
  white-space: nowrap;
}
@media only screen and (min-width: 768px) {
  .heroModal .hero-level {
    font-size: 1.16959064cqi;
  }
}
@media only screen and (max-width: 767px) {
  .heroModal .hero-level {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .hero-lifeline .hp {
    height: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .hero-lifeline .hp {
    margin-top: 0.23391813cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .hero-lifeline .hp {
    margin-right: 0.23391813cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .lefe-count {
    font-size: 1.75438596cqi;
  }
}
@media only screen and (max-width: 767px) {
  .heroModal .lefe-count {
    font-size: 30px;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .lefe-count {
    margin-right: 0.40935673cqi;
  }
}
.heroModal .level-item {
  width: 100%;
  background: #38342c9c;
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 2px solid #000;
}
@media only screen and (min-width: 768px) {
  .heroModal .level-item {
    border-radius: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .level-item {
    padding-top: 0.52631579cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .level-item {
    padding-right: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .level-item {
    padding-bottom: 0.52631579cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .level-item {
    padding-left: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .level-item {
    font-size: 0.93567251cqi;
  }
}
@media only screen and (max-width: 767px) {
  .heroModal .level-item {
    font-size: 16px;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .level-item {
    border-width: 0.11695906cqi;
  }
}
.heroModal .level-item-line {
  height: 100%;
  position: absolute;
  bottom: 0;
  background: #cc7c00;
  left: 0;
  right: 0;
  z-index: 2;
}
.heroModal .hero-ext {
  position: relative;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .heroModal .hero-ext {
    font-size: 1.40350877cqi;
  }
}
@media only screen and (max-width: 767px) {
  .heroModal .hero-ext {
    font-size: 24px;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .hero-ext {
    margin-bottom: 0.58479532cqi;
  }
}
.heroModal .on-level {
  position: relative;
  z-index: 3;
  opacity: 0.5;
}
.heroModal .reward {
  position: relative;
  z-index: 3;
}
@media only screen and (min-width: 768px) {
  .heroModal .reward {
    margin-top: 0.11695906cqi;
  }
}
.heroModal .reward-hp {
  opacity: 0.85;
}
@media only screen and (min-width: 768px) {
  .heroModal .reward-hp {
    margin-top: 0.11695906cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .reward-hp {
    font-size: 0.81871345cqi;
  }
}
@media only screen and (max-width: 767px) {
  .heroModal .reward-hp {
    font-size: 14px;
  }
}
.heroModal .spell-level-arr {
  display: flex;
  opacity: 0.5;
}
@media only screen and (min-width: 768px) {
  .heroModal .spell-level-arr {
    margin-bottom: 0.40935673cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .spell-level-arr {
    margin-top: 0.40935673cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .spell-tooltip {
    margin-top: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .spell-tooltip {
    margin-bottom: 0.87719298cqi;
  }
}
.heroModal .spell-level-arr.active {
  color: #ffca77;
  opacity: 1;
}
.heroModal .spell {
  display: flex;
  align-items: start;
}
@media only screen and (min-width: 768px) {
  .heroModal .spell {
    margin-bottom: 2.33918129cqi;
  }
}
.heroModal .spell-icon img {
  border: 2px solid #555;
}
@media only screen and (min-width: 768px) {
  .heroModal .spell-icon img {
    width: 3.74269006cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .spell-icon img {
    border-width: 0.11695906cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .spell-icon img {
    border-radius: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .spell-icon {
    margin-right: 1.16959064cqi;
  }
}
.heroModal .spell-info {
  width: 100%;
  box-shadow: 0px 0px 0px 0.1754386cqi #000;
}
@media only screen and (min-width: 768px) {
  .heroModal .spell-info {
    border-radius: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .spell-title {
    font-size: 1.16959064cqi;
  }
}
@media only screen and (max-width: 767px) {
  .heroModal .spell-title {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .spell-title {
    margin-bottom: 0.11695906cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .spell-tooltip {
    font-size: 0.93567251cqi;
  }
}
@media only screen and (max-width: 767px) {
  .heroModal .spell-tooltip {
    font-size: 16px;
  }
}
.heroModal .modal-content {
  width: 100%;
  background: transparent;
  border: none;
  box-shadow: none !important;
}
@media only screen and (min-width: 768px) {
  .heroModal .modal-content {
    padding-top: 2.92397661cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .hero-left {
    margin-right: 4.67836257cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .hero-left {
    min-width: 20.46783626cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .hero-left {
    max-width: 20.46783626cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .spell-bot {
    margin-top: 0.87719298cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .spell-bot {
    height: 2.10526316cqi;
  }
}
.heroModal .spell-bot {
  display: flex;
  align-items: center;
}
.heroModal .spell-upgrade {
  background: #cc7c00;
  margin-left: auto;
  display: inline-block;
  animation: updateSpellPoints 2s infinite ease-in-out;
}
@media only screen and (min-width: 768px) {
  .heroModal .spell-upgrade {
    font-size: 0.81871345cqi;
  }
}
@media only screen and (max-width: 767px) {
  .heroModal .spell-upgrade {
    font-size: 14px;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .spell-upgrade {
    padding-top: 0.29239766cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .spell-upgrade {
    padding-right: 0.87719298cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .spell-upgrade {
    padding-bottom: 0.29239766cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .spell-upgrade {
    padding-left: 0.87719298cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .spell-upgrade {
    border-radius: 0.23391813cqi;
  }
}
.heroModal .hero-flex {
  display: flex;
  justify-content: space-between;
}
.heroModal .hero-info-area {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .heroModal .hero-info-desc-block {
    max-width: 37.42690058cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .hero-info-desc-block {
    margin-bottom: 3.50877193cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .hero-info-desc {
    font-size: 0.99415205cqi;
  }
}
@media only screen and (max-width: 767px) {
  .heroModal .hero-info-desc {
    font-size: 17px;
  }
}
.heroModal .hero-info-afterdesc {
  opacity: 0.75;
}
@media only screen and (min-width: 768px) {
  .heroModal .hero-info-afterdesc {
    font-size: 0.87719298cqi;
  }
}
@media only screen and (max-width: 767px) {
  .heroModal .hero-info-afterdesc {
    font-size: 15px;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .hero-info-afterdesc {
    margin-top: 0.70175439cqi;
  }
}
.heroModal .talents-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media only screen and (min-width: 768px) {
  .heroModal .talents-flex {
    margin-bottom: 3.50877193cqi;
  }
}
.heroModal .hero-info-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media only screen and (min-width: 768px) {
  .heroModal .hero-info-top {
    padding-top: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .hero-info-top {
    margin-bottom: 1.16959064cqi;
  }
}
.heroModal .no-talents {
  opacity: 0.4;
}
@media only screen and (min-width: 768px) {
  .heroModal .no-talents {
    font-size: 1.05263158cqi;
  }
}
@media only screen and (max-width: 767px) {
  .heroModal .no-talents {
    font-size: 18px;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .no-talents {
    line-height: 2.45614035cqi;
  }
}
.heroModal .yes-talents {
  font-weight: bold;
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .heroModal .yes-talents {
    font-size: 1.05263158cqi;
  }
}
@media only screen and (max-width: 767px) {
  .heroModal .yes-talents {
    font-size: 18px;
  }
}
.heroModal .tal-text {
  animation: useTalents 2s infinite ease-in-out;
}
.heroModal .spell-areafwe {
  background: #000;
  border: 2px solid #666;
}
@media only screen and (min-width: 768px) {
  .heroModal .spell-areafwe {
    border-width: 0.11695906cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .spell-areafwe {
    border-radius: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .spell-areafwe {
    padding-top: 1.05263158cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .spell-areafwe {
    padding-right: 1.40350877cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .spell-areafwe {
    padding-bottom: 1.05263158cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .spell-areafwe {
    padding-left: 1.40350877cqi;
  }
}
.heroModal .spell-areafwe.upgrade {
  transition: 0.2s;
  animation: updateSpellPanel 2s infinite ease-in-out;
}
.heroModal .spell-areafwe.upgrade:hover {
  border-color: #cc7c00;
  cursor: pointer;
}
.heroModal .spell-info-top {
  display: flex;
  justify-content: space-between;
}
@media only screen and (min-width: 768px) {
  .heroModal .spell-info-top {
    margin-bottom: 0.58479532cqi;
  }
}
.heroModal .spell-level {
  opacity: 0.6;
}
@media only screen and (min-width: 768px) {
  .heroModal .spell-level {
    margin-top: -0.05847953cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroModal .hero-name {
    font-size: 2.33918129cqi;
  }
}
@media only screen and (max-width: 767px) {
  .heroModal .hero-name {
    font-size: 40px;
  }
}
.heroModal .hero-avatar-in {
  background-position: center;
  background-size: cover;
}
.heroModal .hero-avatar-in img {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .heroModal .hero-avatar-in img {
    border-radius: 1.16959064cqi;
  }
}
.heroModal .hero-skins-btn {
  width: 100%;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .heroModal .hero-skins-btn {
    margin-top: 0.70175439cqi;
  }
}
.heroModal .hero-room-btn {
  width: 100%;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .heroModal .hero-room-btn {
    margin-top: 0.70175439cqi;
  }
}
@keyframes updateSpellPanel {
  0% {
    background: #4a3f2e;
  }
  50% {
    background: #3d2c1a;
  }
  100% {
    background: #4a3f2e;
  }
}
@keyframes updateSpellText {
  0% {
    color: #fff;
  }
  50% {
    color: #ff8e27;
  }
  100% {
    color: #fff;
  }
}
@keyframes blickAddIcon {
  0% {
    filter: contrast(1);
  }
  50% {
    filter: contrast(1.2);
  }
  100% {
    filter: contrast(1);
  }
}
@keyframes useTalents {
  0% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.03);
  }
  100% {
    opacity: 0.6;
    transform: scale(1);
  }
}
@keyframes updateSpellPoints {
  0% {
    box-shadow: 0px 0px 0px 0cqi #0098ff;
    transform: scale(1.1);
  }
  70% {
    box-shadow: 0px 0px 0px 1.16959064cqi rgba(0, 152, 255, 0);
    transform: scale(1);
  }
  90% {
    box-shadow: 0px 0px 0px 0cqi rgba(0, 152, 255, 0);
    transform: scale(1);
  }
  100% {
    box-shadow: 0px 0px 0px 0cqi rgba(0, 152, 255, 0);
    transform: scale(1.1);
  }
}
.heroSkinsModal {
  background: #000;
}
.heroSkinsModal .modal-dialog {
  box-shadow: none !important;
  transform: none !important;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.heroSkinsModal .modal-content {
  background: #000;
  border: none;
  box-shadow: none;
  height: 100%;
  border-radius: 0;
  overflow: hidden;
}
.heroSkinsModal .hero-skins-wrap {
  background: #000;
  color: #f0e0c0;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.heroSkinsModal .hero-skins-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  z-index: 2;
}
@media only screen and (min-width: 768px) {
  .heroSkinsModal .hero-skins-header {
    padding-top: 1.57894737cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroSkinsModal .hero-skins-header {
    padding-bottom: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroSkinsModal .hero-skins-header {
    padding-left: 2.33918129cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroSkinsModal .hero-skins-header {
    padding-right: 2.33918129cqi;
  }
}
@media only screen and (max-width: 767px) {
  .heroSkinsModal .hero-skins-header {
    padding: 16px;
  }
}
.heroSkinsModal .hero-skins-title {
  position: relative;
  z-index: 1;
  color: #ffd080;
}
@media only screen and (min-width: 768px) {
  .heroSkinsModal .hero-skins-title {
    font-size: 1.87134503cqi;
  }
}
@media only screen and (max-width: 767px) {
  .heroSkinsModal .hero-skins-title {
    font-size: 32px;
  }
}
.heroSkinsModal .hero-skins-hero-name {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50%;
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  .heroSkinsModal .hero-skins-hero-name {
    font-size: 2.10526316cqi;
  }
}
@media only screen and (max-width: 767px) {
  .heroSkinsModal .hero-skins-hero-name {
    font-size: 36px;
  }
}
.heroSkinsModal .std-modal-closer-in {
  position: relative;
  z-index: 1;
}
.heroSkinsModal .hero-skins-content {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 0;
  height: 100%;
  z-index: 2;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .heroSkinsModal .hero-skins-content {
    padding-left: 2.33918129cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroSkinsModal .hero-skins-content {
    padding-right: 2.33918129cqi;
  }
}
@media only screen and (max-width: 767px) {
  .heroSkinsModal .hero-skins-content {
    padding: 0 12px 12px;
  }
}
.heroSkinsModal .hero-skins-row {
  display: flex;
  justify-items: center;
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
}
@media only screen and (min-width: 768px) {
  .heroSkinsModal .hero-skins-row {
    gap: 1.75438596cqi;
  }
}
@media only screen and (max-width: 767px) {
  .heroSkinsModal .hero-skins-row {
    gap: 30px;
  }
}
@media only screen and (max-width: 767px) and only screen and (min-width: 768px) {
  .heroSkinsModal .hero-skins-row {
    gap: 0.46783626cqi;
  }
}
@media only screen and (max-width: 767px) and only screen and (max-width: 767px) {
  .heroSkinsModal .hero-skins-row {
    gap: 8px;
  }
}
.heroSkinsModal .hero-skin-item {
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
  width: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  transition: transform 0.2s;
}
.heroSkinsModal .hero-skin-item:hover:not(.--locked):not(.--selected) {
  transform: scale(1.03);
}
.heroSkinsModal .hero-skin-item.--selected {
  pointer-events: none;
}
.heroSkinsModal .hero-skin-item.--selected .hero-skin-image-wrap {
  border-color: #ffe8a8;
  box-shadow: 0 0 32px rgba(255, 224, 140, 0.65), 0 0 12px rgba(255, 208, 128, 0.45);
}
.heroSkinsModal .hero-skin-item.--selected .hero-skin-name {
  color: #ffe8a8;
}
.heroSkinsModal .hero-skin-item.--locked {
  cursor: default;
  pointer-events: none;
}
.heroSkinsModal .hero-skin-item.--locked .hero-skin-image {
  opacity: 1;
  filter: blur(12px) grayscale(0.2);
}
.heroSkinsModal .hero-skin-item.--locked .hero-skin-image-wrap:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  box-shadow: inset 0px 0px 10px 8px #45423d;
  z-index: 2;
}
.heroSkinsModal .hero-skin-item.--locked .hero-skin-image-wrap:after {
  content: '';
  background: url(../images/level-block.png) center no-repeat;
  background-size: contain;
  top: 50%;
  left: 50%;
  position: absolute;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
}
.heroSkinsModal .hero-skin-bg {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: url(../images/backgrounds/rooms/skins.jpg) center no-repeat;
  opacity: 0.3;
  background-size: cover;
  z-index: 1;
}
.heroSkinsModal .hero-skin-image-wrap {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border: 3px solid transparent;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
@media only screen and (min-width: 768px) {
  .heroSkinsModal .hero-skin-image-wrap {
    border-width: 0.1754386cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroSkinsModal .hero-skin-image-wrap {
    border-radius: 0.93567251cqi;
  }
}
.heroSkinsModal .hero-skin-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center bottom;
}
.heroSkinsModal .hero-skin-name {
  flex-shrink: 0;
  width: 100%;
  text-align: center;
  color: #e0d0b0;
  line-height: 1.4;
}
@media only screen and (min-width: 768px) {
  .heroSkinsModal .hero-skin-name {
    font-size: 0.99415205cqi;
  }
}
@media only screen and (max-width: 767px) {
  .heroSkinsModal .hero-skin-name {
    font-size: 17px;
  }
}
@media only screen and (min-width: 768px) {
  .heroSkinsModal .hero-skin-name {
    margin-top: 1.16959064cqi;
  }
}
.heroSkinsModal .hero-skin-status {
  position: absolute;
  flex-shrink: 0;
  width: 100%;
  text-align: center;
  line-height: 1.3;
  background: #ffe8a8;
  color: #000;
}
@media only screen and (min-width: 768px) {
  .heroSkinsModal .hero-skin-status {
    font-size: 1.05263158cqi;
  }
}
@media only screen and (max-width: 767px) {
  .heroSkinsModal .hero-skin-status {
    font-size: 18px;
  }
}
@media only screen and (min-width: 768px) {
  .heroSkinsModal .hero-skin-status {
    line-height: 2.22222222cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroSkinsModal .hero-skin-status {
    top: -2.69005848cqi;
  }
}
@media only screen and (min-width: 768px) {
  .heroSkinsModal .hero-skin-status {
    border-radius: 0.58479532cqi;
  }
}
.heroSkinsModal .hero-skin-lock-text {
  color: #999;
}
@media only screen and (min-width: 768px) {
  .heroSkinsModal .hero-skin-lock-text {
    font-size: 0.87719298cqi;
  }
}
@media only screen and (max-width: 767px) {
  .heroSkinsModal .hero-skin-lock-text {
    font-size: 15px;
  }
}
@media only screen and (min-width: 768px) {
  .loadGameModal .modal-dialog {
    width: 40.93567251cqi;
  }
}
.loadGameModal .load-game-desc {
  opacity: 0.55;
  font-family: var(--fontTitle);
}
@media only screen and (min-width: 768px) {
  .loadGameModal .load-game-desc {
    margin-bottom: 1.4619883cqi;
  }
}
.loadGameModal .load-game-saves {
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 768px) {
  .loadGameModal .load-game-saves {
    gap: 0.70175439cqi;
  }
}
@media only screen and (max-width: 767px) {
  .loadGameModal .load-game-saves {
    gap: 12px;
  }
}
.loadGameModal .load-game-save {
  flex-direction: column;
  align-items: stretch;
  border-color: #5a4f42;
  background: linear-gradient(180deg, #5a4a3a 0%, #4a3d30 100%);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
@media only screen and (min-width: 768px) {
  .loadGameModal .load-game-save {
    padding: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .loadGameModal .load-game-save {
    gap: 0.81871345cqi;
  }
}
@media only screen and (max-width: 767px) {
  .loadGameModal .load-game-save {
    gap: 14px;
  }
}
@media only screen and (min-width: 768px) {
  .loadGameModal .load-game-save {
    border-radius: 0.46783626cqi;
  }
}
.loadGameModal .load-game-save:hover {
  border-color: #c28442;
  background: linear-gradient(180deg, #6d5a48 0%, #564636 100%);
  transform: translateY(-1px);
}
.loadGameModal .load-game-save.is-current {
  border-color: #c28442;
  box-shadow: 0 0 0 1px rgba(194, 132, 66, 0.35);
}
.loadGameModal .load-game-save-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
@media only screen and (min-width: 768px) {
  .loadGameModal .load-game-save-top {
    gap: 0.70175439cqi;
  }
}
@media only screen and (max-width: 767px) {
  .loadGameModal .load-game-save-top {
    gap: 12px;
  }
}
.loadGameModal .load-game-save-created {
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 768px) {
  .loadGameModal .load-game-save-created {
    gap: 0.23391813cqi;
  }
}
@media only screen and (max-width: 767px) {
  .loadGameModal .load-game-save-created {
    gap: 4px;
  }
}
.loadGameModal .load-game-badge {
  flex-shrink: 0;
  background: #c28442;
  color: #2a221c;
  font-family: var(--fontTitle);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
@media only screen and (min-width: 768px) {
  .loadGameModal .load-game-badge {
    padding: 0.23391813cqi 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .loadGameModal .load-game-badge {
    border-radius: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .loadGameModal .load-game-badge {
    font-size: 0.76023392cqi;
  }
}
@media only screen and (max-width: 767px) {
  .loadGameModal .load-game-badge {
    font-size: 13px;
  }
}
.loadGameModal .load-game-save-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media only screen and (min-width: 768px) {
  .loadGameModal .load-game-save-stats {
    gap: 0.70175439cqi;
  }
}
@media only screen and (max-width: 767px) {
  .loadGameModal .load-game-save-stats {
    gap: 12px;
  }
}
.loadGameModal .load-game-stat {
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.18);
}
@media only screen and (min-width: 768px) {
  .loadGameModal .load-game-stat {
    gap: 0.23391813cqi;
  }
}
@media only screen and (max-width: 767px) {
  .loadGameModal .load-game-stat {
    gap: 4px;
  }
}
@media only screen and (min-width: 768px) {
  .loadGameModal .load-game-stat {
    padding: 0.70175439cqi;
  }
}
@media only screen and (min-width: 768px) {
  .loadGameModal .load-game-stat {
    border-radius: 0.35087719cqi;
  }
}
.loadGameModal .load-game-label {
  opacity: 0.5;
  font-family: var(--fontTitle);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
@media only screen and (min-width: 768px) {
  .loadGameModal .load-game-label {
    font-size: 0.76023392cqi;
  }
}
@media only screen and (max-width: 767px) {
  .loadGameModal .load-game-label {
    font-size: 13px;
  }
}
.loadGameModal .load-game-value {
  font-family: var(--fontTitle);
  color: #ffdb86;
}
@media only screen and (min-width: 768px) {
  .loadGameModal .load-game-value {
    font-size: 1.05263158cqi;
  }
}
@media only screen and (max-width: 767px) {
  .loadGameModal .load-game-value {
    font-size: 18px;
  }
}
.loadGameModal .load-game-acts-value {
  font-weight: bold;
}
@media only screen and (min-width: 768px) {
  .loadGameModal .load-game-acts-value {
    font-size: 1.28654971cqi;
  }
}
@media only screen and (max-width: 767px) {
  .loadGameModal .load-game-acts-value {
    font-size: 22px;
  }
}
.loadGameModal .load-game-value-muted {
  color: inherit;
  opacity: 0.35;
}
.loadGameModal .load-game-save-currencies {
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .loadGameModal .load-game-save-currencies {
    gap: 0.93567251cqi;
  }
}
@media only screen and (max-width: 767px) {
  .loadGameModal .load-game-save-currencies {
    gap: 16px;
  }
}
@media only screen and (min-width: 768px) {
  .loadGameModal .load-game-save-currencies {
    padding-top: 0.11695906cqi;
  }
}
.loadGameModal .scur {
  display: flex;
  align-items: center;
}
.loadGameModal .scur-icon {
  border-radius: 50%;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .loadGameModal .scur-icon {
    width: 1.87134503cqi;
  }
}
@media only screen and (min-width: 768px) {
  .loadGameModal .scur-icon {
    margin-right: 0.46783626cqi;
  }
}
.loadGameModal .scur-icon img {
  width: 100%;
}
.loadGameModal .scur-value {
  font-family: var(--fontTitle);
  color: #ffdb86;
}
@media only screen and (min-width: 768px) {
  .loadGameModal .scur-value {
    font-size: 1.05263158cqi;
  }
}
@media only screen and (max-width: 767px) {
  .loadGameModal .scur-value {
    font-size: 18px;
  }
}
.loadGameModal .load-game-empty {
  text-align: center;
  opacity: 0.5;
  font-family: var(--fontTitle);
}
body {
  --modalDialogModal-mdao-bg: #000;
  --modalDialogModal-mdao-color: #bfbfbf;
}
.de8 {
  position: fixed;
  top: auto;
  left: auto;
  box-shadow: 0cqi 0.11695906cqi 0.58479532cqi 0cqi #0009;
  visibility: hidden;
  opacity: 0;
  transition: 0.3s;
  transform: scale(0.8);
}
@media only screen and (min-width: 768px) {
  .de8 {
    bottom: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .de8 {
    right: 1.57894737cqi;
  }
}
@media only screen and (min-width: 768px) {
  .de8 {
    width: 25.73099415cqi;
  }
}
@media only screen and (min-width: 768px) {
  .de8 {
    border-radius: 0.58479532cqi;
  }
}
.de8.big {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
}
.de8 .modal-dialog {
  width: 100%;
  margin: 0;
  transform: none;
  position: static;
  left: auto;
  top: auto;
}
.modalDialogModal .modal-dialog,
.modalDialogConfirmModal .modal-dialog {
  margin: 0;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: auto;
  max-width: none;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: none !important;
}
@media only screen and (min-width: 768px) {
  .modalDialogModal .modal-dialog,
  .modalDialogConfirmModal .modal-dialog {
    padding: 1.16959064cqi;
  }
}
.modalDialogModal .modal-content,
.modalDialogConfirmModal .modal-content {
  position: relative;
  width: 100%;
  margin: 0;
  background: #111111;
  border: none;
  color: #bfbfbf;
  box-shadow: none;
}
@media only screen and (min-width: 768px) {
  .modalDialogModal .modal-content,
  .modalDialogConfirmModal .modal-content {
    max-width: 29.23976608cqi;
  }
}
@media only screen and (min-width: 768px) {
  .modalDialogModal .modal-content,
  .modalDialogConfirmModal .modal-content {
    padding: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  .modalDialogModal .modal-content,
  .modalDialogConfirmModal .modal-content {
    padding-top: 2.10526316cqi;
  }
}
.modalDialogModal .std-modal-closer-sm,
.modalDialogConfirmModal .std-modal-closer-sm {
  position: absolute;
  background: none;
  box-shadow: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: url('../icons/cursors/pointer.png'), auto;
  opacity: 0.75;
  transition: opacity 0.2s, transform 0.2s;
}
@media only screen and (min-width: 768px) {
  .modalDialogModal .std-modal-closer-sm,
  .modalDialogConfirmModal .std-modal-closer-sm {
    right: 0.70175439cqi;
  }
}
@media only screen and (min-width: 768px) {
  .modalDialogModal .std-modal-closer-sm,
  .modalDialogConfirmModal .std-modal-closer-sm {
    top: 0.70175439cqi;
  }
}
@media only screen and (min-width: 768px) {
  .modalDialogModal .std-modal-closer-sm,
  .modalDialogConfirmModal .std-modal-closer-sm {
    width: 2.10526316cqi;
  }
}
@media only screen and (min-width: 768px) {
  .modalDialogModal .std-modal-closer-sm,
  .modalDialogConfirmModal .std-modal-closer-sm {
    height: 2.10526316cqi;
  }
}
.modalDialogModal .std-modal-closer-sm i,
.modalDialogConfirmModal .std-modal-closer-sm i {
  color: #fff;
  line-height: 1;
}
@media only screen and (min-width: 768px) {
  .modalDialogModal .std-modal-closer-sm i,
  .modalDialogConfirmModal .std-modal-closer-sm i {
    font-size: 1.6374269cqi;
  }
}
@media only screen and (max-width: 767px) {
  .modalDialogModal .std-modal-closer-sm i,
  .modalDialogConfirmModal .std-modal-closer-sm i {
    font-size: 28px;
  }
}
.modalDialogModal .std-modal-closer-sm:hover,
.modalDialogConfirmModal .std-modal-closer-sm:hover {
  opacity: 1;
  transform: none;
}
.modalDialogModal .std-modal-title,
.modalDialogConfirmModal .std-modal-title {
  font-weight: bold;
  color: #fff;
}
@media only screen and (min-width: 768px) {
  .modalDialogModal .std-modal-title,
  .modalDialogConfirmModal .std-modal-title {
    margin-bottom: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  .modalDialogModal .std-modal-title,
  .modalDialogConfirmModal .std-modal-title {
    font-size: 1.28654971cqi;
  }
}
@media only screen and (max-width: 767px) {
  .modalDialogModal .std-modal-title,
  .modalDialogConfirmModal .std-modal-title {
    font-size: 22px;
  }
}
@media only screen and (min-width: 768px) {
  .modalDialogModal .std-modal-title,
  .modalDialogConfirmModal .std-modal-title {
    padding-right: 2.10526316cqi;
  }
}
.modalDialogModal .modal-text,
.modalDialogConfirmModal .modal-text {
  word-break: break-word;
  color: #bfbfbf;
}
@media only screen and (min-width: 768px) {
  .modalDialogModal .modal-text,
  .modalDialogConfirmModal .modal-text {
    font-size: 0.99415205cqi;
  }
}
@media only screen and (max-width: 767px) {
  .modalDialogModal .modal-text,
  .modalDialogConfirmModal .modal-text {
    font-size: 17px;
  }
}
.modalDialogModal .modal-footer,
.modalDialogConfirmModal .modal-footer {
  border-top: 0;
  padding: 0;
}
@media only screen and (min-width: 768px) {
  .modalDialogModal .modal-footer,
  .modalDialogConfirmModal .modal-footer {
    margin-top: 0.87719298cqi;
  }
}
.modalDialogConfirmModal .modal-text {
  overflow: auto;
}
@media only screen and (min-width: 768px) {
  .modalDialogConfirmModal .modal-text {
    max-height: 23.39181287cqi;
  }
}
.modalDialogModal .mda-field label {
  display: block;
  color: #bfbfbf;
}
@media only screen and (min-width: 768px) {
  .modalDialogModal .mda-field label {
    margin-bottom: 0.46783626cqi;
  }
}
.modalDialogModal .mda-input,
.modalDialogModal .mda-textarea {
  display: block;
  width: 100%;
  background: #000;
  border: 1px solid #535353;
  color: #bfbfbf;
  line-height: 1.35;
  outline: none;
  box-shadow: none;
}
@media only screen and (min-width: 768px) {
  .modalDialogModal .mda-input,
  .modalDialogModal .mda-textarea {
    border-width: 0.05847953cqi;
  }
}
@media only screen and (min-width: 768px) {
  .modalDialogModal .mda-input,
  .modalDialogModal .mda-textarea {
    border-radius: 0.35087719cqi;
  }
}
@media only screen and (min-width: 768px) {
  .modalDialogModal .mda-input,
  .modalDialogModal .mda-textarea {
    padding-top: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .modalDialogModal .mda-input,
  .modalDialogModal .mda-textarea {
    padding-right: 0.70175439cqi;
  }
}
@media only screen and (min-width: 768px) {
  .modalDialogModal .mda-input,
  .modalDialogModal .mda-textarea {
    padding-bottom: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .modalDialogModal .mda-input,
  .modalDialogModal .mda-textarea {
    padding-left: 0.70175439cqi;
  }
}
@media only screen and (min-width: 768px) {
  .modalDialogModal .mda-input,
  .modalDialogModal .mda-textarea {
    font-size: 0.99415205cqi;
  }
}
@media only screen and (max-width: 767px) {
  .modalDialogModal .mda-input,
  .modalDialogModal .mda-textarea {
    font-size: 17px;
  }
}
.modalDialogModal .mda-input:focus,
.modalDialogModal .mda-textarea:focus {
  border-color: #7a7a7a;
}
.modalDialogModal .mda-textarea {
  resize: vertical;
  min-height: 110px;
}
.modalDialogModal pre.mdaow {
  background: #000;
  color: #bfbfbf;
  white-space: break-spaces;
  border: 1px solid #535353;
}
@media only screen and (min-width: 768px) {
  .modalDialogModal pre.mdaow {
    font-size: 0.64327485cqi;
  }
}
@media only screen and (max-width: 767px) {
  .modalDialogModal pre.mdaow {
    font-size: 11px;
  }
}
@media only screen and (min-width: 768px) {
  .modalDialogModal pre.mdaow {
    margin-top: 0.46783626cqi;
  }
}
@media only screen and (min-width: 768px) {
  .modalDialogModal pre.mdaow {
    margin-bottom: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .modalDialogModal pre.mdaow {
    border-width: 0.05847953cqi;
  }
}
@media only screen and (min-width: 768px) {
  .modalDialogModal pre.mdaow {
    border-radius: 0.35087719cqi;
  }
}
@media only screen and (min-width: 768px) {
  .modalDialogModal pre.mdaow {
    padding: 0.70175439cqi;
  }
}
.neutralSpellsEditorModal {
  background: #000;
}
.neutralSpellsEditorModal .bg {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  z-index: 2;
  pointer-events: none;
  opacity: 0.6;
  background-image: url(../images/backgrounds/rooms/colods.jpg);
}
.neutralSpellsEditorModal .modal-dialog {
  box-shadow: none !important;
  transform: none !important;
  width: 100%;
  height: 100cqi;
  margin: 0;
  padding: 0;
}
.neutralSpellsEditorModal .modal-content {
  width: 100%;
  background: transparent;
  border: none;
  box-shadow: none !important;
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .modal-content {
    padding-top: 2.92397661cqi;
  }
}
.neutralSpellsEditorModal .nse-window {
  display: flex;
  flex-direction: column;
  margin: auto;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .nse-window {
    width: 57.30994152cqi;
  }
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .nse-window {
    bottom: 2.92397661cqi;
  }
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .nse-window {
    top: 1.75438596cqi;
  }
}
.neutralSpellsEditorModal .std-modal-closer-in {
  position: absolute;
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .std-modal-closer-in {
    top: 0.46783626cqi;
  }
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .std-modal-closer-in {
    right: -5.26315789cqi;
  }
}
.neutralSpellsEditorModal .nse-window-top,
.neutralSpellsEditorModal .nse-window-bottom {
  position: relative;
  z-index: 2;
}
.neutralSpellsEditorModal .nse-window-top img,
.neutralSpellsEditorModal .nse-window-bottom img {
  width: 100%;
}
.neutralSpellsEditorModal .nse-window-content {
  background: #1a1614;
  position: relative;
  z-index: 1;
  border-left: 4px solid #463222;
  border-right: 4px solid #463222;
  flex: 1;
  min-height: 0;
  overflow: auto;
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .nse-window-content {
    margin-top: -0.46783626cqi;
  }
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .nse-window-content {
    margin-left: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .nse-window-content {
    margin-right: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .nse-window-content {
    margin-bottom: -0.29239766cqi;
  }
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .nse-window-content {
    border-width: 0.23391813cqi;
  }
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .nse-window-content {
    padding: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .nse-header {
    margin-bottom: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .nse-title {
    font-size: 1.6374269cqi;
  }
}
@media only screen and (max-width: 767px) {
  .neutralSpellsEditorModal .nse-title {
    font-size: 28px;
  }
}
.neutralSpellsEditorModal .nse-subtitle {
  opacity: 0.6;
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .nse-subtitle {
    font-size: 0.81871345cqi;
  }
}
@media only screen and (max-width: 767px) {
  .neutralSpellsEditorModal .nse-subtitle {
    font-size: 14px;
  }
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .nse-subtitle {
    margin-top: 0.35087719cqi;
  }
}
.neutralSpellsEditorModal .nse-spells-list {
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .nse-spells-list {
    gap: 0.58479532cqi;
  }
}
@media only screen and (max-width: 767px) {
  .neutralSpellsEditorModal .nse-spells-list {
    gap: 10px;
  }
}
.neutralSpellsEditorModal .nse-spell-row {
  display: flex;
  align-items: flex-start;
  background: #2a2420;
  border: 2px solid #463222;
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .nse-spell-row {
    gap: 0.81871345cqi;
  }
}
@media only screen and (max-width: 767px) {
  .neutralSpellsEditorModal .nse-spell-row {
    gap: 14px;
  }
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .nse-spell-row {
    border-width: 0.11695906cqi;
  }
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .nse-spell-row {
    border-radius: 0.46783626cqi;
  }
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .nse-spell-row {
    padding: 0.70175439cqi;
  }
}
.neutralSpellsEditorModal .nse-spell-row.locked {
  opacity: 0.4;
}
.neutralSpellsEditorModal .nse-spell-icon {
  background-size: cover;
  flex-shrink: 0;
  border: 2px solid #555;
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .nse-spell-icon {
    width: 3.2748538cqi;
  }
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .nse-spell-icon {
    height: 3.2748538cqi;
  }
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .nse-spell-icon {
    border-radius: 0.46783626cqi;
  }
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .nse-spell-icon {
    border-width: 0.11695906cqi;
  }
}
.neutralSpellsEditorModal .nse-spell-body {
  flex: 1;
  min-width: 0;
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .nse-spell-name {
    font-size: 1.05263158cqi;
  }
}
@media only screen and (max-width: 767px) {
  .neutralSpellsEditorModal .nse-spell-name {
    font-size: 18px;
  }
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .nse-spell-name {
    margin-bottom: 0.46783626cqi;
  }
}
.neutralSpellsEditorModal .nse-spell-levels {
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .nse-spell-levels {
    gap: 0.35087719cqi;
  }
}
@media only screen and (max-width: 767px) {
  .neutralSpellsEditorModal .nse-spell-levels {
    gap: 6px;
  }
}
.neutralSpellsEditorModal .nse-level-line {
  line-height: 1.35em;
  opacity: 0.55;
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .nse-level-line {
    font-size: 0.81871345cqi;
  }
}
@media only screen and (max-width: 767px) {
  .neutralSpellsEditorModal .nse-level-line {
    font-size: 14px;
  }
}
.neutralSpellsEditorModal .nse-level-line.active {
  opacity: 1;
  color: #ffca77;
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .nse-level-mark {
    margin-right: 0.23391813cqi;
  }
}
.neutralSpellsEditorModal .nse-spell-locked {
  opacity: 0.7;
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .nse-spell-locked {
    font-size: 0.76023392cqi;
  }
}
@media only screen and (max-width: 767px) {
  .neutralSpellsEditorModal .nse-spell-locked {
    font-size: 13px;
  }
}
.neutralSpellsEditorModal .nse-upgrade {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: center;
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .nse-upgrade {
    gap: 0.46783626cqi;
  }
}
@media only screen and (max-width: 767px) {
  .neutralSpellsEditorModal .nse-upgrade {
    gap: 8px;
  }
}
.neutralSpellsEditorModal .nse-upgrade-cost {
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .nse-upgrade-cost {
    gap: 0.23391813cqi;
  }
}
@media only screen and (max-width: 767px) {
  .neutralSpellsEditorModal .nse-upgrade-cost {
    gap: 4px;
  }
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .nse-upgrade-cost {
    font-size: 0.81871345cqi;
  }
}
@media only screen and (max-width: 767px) {
  .neutralSpellsEditorModal .nse-upgrade-cost {
    font-size: 14px;
  }
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .nse-upgrade-cost img {
    width: 0.93567251cqi;
  }
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .nse-upgrade-cost img {
    height: 0.93567251cqi;
  }
}
.neutralSpellsEditorModal .nse-upgrade-cost.disabled {
  opacity: 0.4;
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .nse-upgrade-btn {
    font-size: 0.70175439cqi;
  }
}
@media only screen and (max-width: 767px) {
  .neutralSpellsEditorModal .nse-upgrade-btn {
    font-size: 12px;
  }
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .nse-upgrade-btn {
    padding: 0.35087719cqi 0.70175439cqi;
  }
}
.neutralSpellsEditorModal .nse-upgrade-btn.disabled {
  opacity: 0.4;
  pointer-events: none;
}
.neutralSpellsEditorModal .nse-faces {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  align-self: center;
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .nse-faces {
    gap: 0.46783626cqi;
  }
}
@media only screen and (max-width: 767px) {
  .neutralSpellsEditorModal .nse-faces {
    gap: 8px;
  }
}
.neutralSpellsEditorModal .nse-face-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #463222;
  background: #1a1614;
  cursor: url('../icons/cursors/pointer.png'), auto;
  opacity: 0.6;
  transition: 0.2s;
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .nse-face-slot {
    width: 3.04093567cqi;
  }
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .nse-face-slot {
    height: 3.04093567cqi;
  }
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .nse-face-slot {
    border-width: 0.11695906cqi;
  }
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .nse-face-slot {
    border-radius: 0.46783626cqi;
  }
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .nse-face-slot img {
    width: 2.10526316cqi;
  }
}
@media only screen and (min-width: 768px) {
  .neutralSpellsEditorModal .nse-face-slot img {
    border-radius: 0.29239766cqi;
  }
}
.neutralSpellsEditorModal .nse-face-slot:hover {
  border-color: #a07840;
}
.neutralSpellsEditorModal .nse-face-slot.active {
  opacity: 1;
  border-color: #dfa445;
  background: #3a3028;
  box-shadow: 0 0 12px rgba(223, 164, 69, 0.25);
}
.newActModal .modal-dialog {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .newActModal .modal-dialog {
    width: 29.23976608cqi;
  }
}
.newActModal .modal-content {
  background: #39312e;
  width: 100%;
  text-align: center;
  border: 10px solid #c28442;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .newActModal .modal-content {
    padding: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .newActModal .modal-content {
    border-width: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .newActModal .modal-content {
    border-radius: 3.50877193cqi;
  }
}
.newActModal .wrapper-inner {
  position: relative;
  z-index: 2;
}
.newActModal .wrapper {
  aspect-ratio: 9 / 15;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: end;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .newActModal .wrapper {
    border-radius: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .newActModal .wrapper {
    padding: 2.33918129cqi;
  }
}
.newActModal .wrapper:after {
  position: absolute;
  content: '';
  pointer-events: none;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: linear-gradient(to bottom, #0e172500, #13111d00, #120b1402, #0c050988, #000000cc);
}
.newActModal .new-spell-title {
  opacity: 0.8;
}
@media only screen and (min-width: 768px) {
  .newActModal .new-spell-title {
    font-size: 1.16959064cqi;
  }
}
@media only screen and (max-width: 767px) {
  .newActModal .new-spell-title {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) {
  .newActModal .new-spell-title {
    margin-bottom: 0.58479532cqi;
  }
}
.newActModal .spell-title {
  line-height: 1.2em;
}
@media only screen and (min-width: 768px) {
  .newActModal .spell-title {
    margin-top: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .newActModal .spell-title {
    font-size: 2.33918129cqi;
  }
}
@media only screen and (max-width: 767px) {
  .newActModal .spell-title {
    font-size: 40px;
  }
}
@media only screen and (min-width: 768px) {
  .newActModal .spell-title {
    margin-bottom: 1.75438596cqi;
  }
}
.newHeroModal .modal-dialog {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .newHeroModal .modal-dialog {
    width: 29.23976608cqi;
  }
}
.newHeroModal .modal-content {
  background: #39312e;
  width: 100%;
  text-align: center;
  border: 10px solid #c28442;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .newHeroModal .modal-content {
    padding: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .newHeroModal .modal-content {
    border-width: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .newHeroModal .modal-content {
    border-radius: 3.50877193cqi;
  }
}
.newHeroModal .wrapper-inner {
  position: relative;
  z-index: 2;
}
.newHeroModal .wrapper {
  aspect-ratio: 9 / 12.5;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: end;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .newHeroModal .wrapper {
    border-radius: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .newHeroModal .wrapper {
    padding: 2.33918129cqi;
  }
}
.newHeroModal .wrapper:after {
  position: absolute;
  content: '';
  pointer-events: none;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: linear-gradient(to bottom, #0e172500, #13111d00, #120b1402, #0c050988, #000000cc);
}
.newHeroModal .new-spell-title {
  opacity: 0.8;
}
@media only screen and (min-width: 768px) {
  .newHeroModal .new-spell-title {
    font-size: 1.16959064cqi;
  }
}
@media only screen and (max-width: 767px) {
  .newHeroModal .new-spell-title {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) {
  .newHeroModal .new-spell-title {
    margin-bottom: 0.58479532cqi;
  }
}
.newHeroModal .spell-title {
  line-height: 1.2em;
}
@media only screen and (min-width: 768px) {
  .newHeroModal .spell-title {
    margin-top: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .newHeroModal .spell-title {
    font-size: 2.33918129cqi;
  }
}
@media only screen and (max-width: 767px) {
  .newHeroModal .spell-title {
    font-size: 40px;
  }
}
@media only screen and (min-width: 768px) {
  .newHeroModal .spell-title {
    margin-bottom: 1.75438596cqi;
  }
}
.newNeutralSpellModal .modal-dialog {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .newNeutralSpellModal .modal-dialog {
    width: 29.23976608cqi;
  }
}
.newNeutralSpellModal .modal-content {
  background: #39312e;
  width: 100%;
  text-align: center;
  border: 10px solid #c28442;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .newNeutralSpellModal .modal-content {
    padding: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .newNeutralSpellModal .modal-content {
    border-width: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .newNeutralSpellModal .modal-content {
    border-radius: 3.50877193cqi;
  }
}
.newNeutralSpellModal .wrapper-inner {
  position: relative;
  z-index: 2;
}
.newNeutralSpellModal .wrapper {
  background: linear-gradient(180deg, #2a1f18 0%, #120b08 100%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .newNeutralSpellModal .wrapper {
    border-radius: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .newNeutralSpellModal .wrapper {
    padding: 2.33918129cqi;
  }
}
.newNeutralSpellModal .new-spell-title {
  opacity: 0.8;
}
@media only screen and (min-width: 768px) {
  .newNeutralSpellModal .new-spell-title {
    font-size: 1.16959064cqi;
  }
}
@media only screen and (max-width: 767px) {
  .newNeutralSpellModal .new-spell-title {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) {
  .newNeutralSpellModal .new-spell-title {
    margin-bottom: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .newNeutralSpellModal .spell-icon-wrap {
    margin-bottom: 1.16959064cqi;
  }
}
.newNeutralSpellModal .spell-icon {
  margin: auto;
  background-size: cover;
  background-position: center;
  border: 3px solid #c28442;
  box-shadow: 0 0 30px rgba(194, 132, 66, 0.35);
}
@media only screen and (min-width: 768px) {
  .newNeutralSpellModal .spell-icon {
    width: 7.01754386cqi;
  }
}
@media only screen and (min-width: 768px) {
  .newNeutralSpellModal .spell-icon {
    height: 7.01754386cqi;
  }
}
@media only screen and (min-width: 768px) {
  .newNeutralSpellModal .spell-icon {
    border-width: 0.1754386cqi;
  }
}
@media only screen and (min-width: 768px) {
  .newNeutralSpellModal .spell-icon {
    border-radius: 0.70175439cqi;
  }
}
.newNeutralSpellModal .spell-title {
  line-height: 1.2em;
}
@media only screen and (min-width: 768px) {
  .newNeutralSpellModal .spell-title {
    font-size: 1.87134503cqi;
  }
}
@media only screen and (max-width: 767px) {
  .newNeutralSpellModal .spell-title {
    font-size: 32px;
  }
}
@media only screen and (min-width: 768px) {
  .newNeutralSpellModal .spell-title {
    margin-bottom: 0.70175439cqi;
  }
}
.newNeutralSpellModal .spell-desc {
  opacity: 0.75;
  line-height: 1.4em;
}
@media only screen and (min-width: 768px) {
  .newNeutralSpellModal .spell-desc {
    font-size: 0.87719298cqi;
  }
}
@media only screen and (max-width: 767px) {
  .newNeutralSpellModal .spell-desc {
    font-size: 15px;
  }
}
@media only screen and (min-width: 768px) {
  .newNeutralSpellModal .spell-desc {
    margin-bottom: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  .newNeutralSpellModal .spell-desc {
    max-width: 18.71345029cqi;
  }
}
.newSkinModal .modal-dialog {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .newSkinModal .modal-dialog {
    width: 29.23976608cqi;
  }
}
.newSkinModal .modal-content {
  background: #39312e;
  width: 100%;
  text-align: center;
  border: 10px solid #c28442;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .newSkinModal .modal-content {
    padding: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .newSkinModal .modal-content {
    border-width: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .newSkinModal .modal-content {
    border-radius: 3.50877193cqi;
  }
}
.newSkinModal .wrapper-inner {
  position: relative;
  z-index: 2;
}
.newSkinModal .wrapper {
  aspect-ratio: 9 / 12.5;
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #1a1208;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: end;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .newSkinModal .wrapper {
    border-radius: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .newSkinModal .wrapper {
    padding: 2.33918129cqi;
  }
}
.newSkinModal .wrapper:after {
  position: absolute;
  content: '';
  pointer-events: none;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: linear-gradient(to bottom, #0e172500, #13111d00, #120b1402, #0c050988, #000000cc);
}
.newSkinModal .new-spell-title {
  opacity: 0.8;
}
@media only screen and (min-width: 768px) {
  .newSkinModal .new-spell-title {
    font-size: 1.16959064cqi;
  }
}
@media only screen and (max-width: 767px) {
  .newSkinModal .new-spell-title {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) {
  .newSkinModal .new-spell-title {
    margin-bottom: 0.58479532cqi;
  }
}
.newSkinModal .spell-title {
  line-height: 1.2em;
}
@media only screen and (min-width: 768px) {
  .newSkinModal .spell-title {
    margin-top: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .newSkinModal .spell-title {
    font-size: 2.33918129cqi;
  }
}
@media only screen and (max-width: 767px) {
  .newSkinModal .spell-title {
    font-size: 40px;
  }
}
@media only screen and (min-width: 768px) {
  .newSkinModal .spell-title {
    margin-bottom: 1.75438596cqi;
  }
}
.resurrectionModal .resurrection-modal-actions {
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 768px) {
  .resurrectionModal .resurrection-modal-actions {
    gap: 0.58479532cqi;
  }
}
@media only screen and (max-width: 767px) {
  .resurrectionModal .resurrection-modal-actions {
    gap: 10px;
  }
}
.resurrectionModal .resurrection-modal-actions .std-btn-blue {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (min-width: 768px) {
  .resurrectionModal .resurrection-modal-actions .std-btn-blue {
    gap: 0.46783626cqi;
  }
}
@media only screen and (max-width: 767px) {
  .resurrectionModal .resurrection-modal-actions .std-btn-blue {
    gap: 8px;
  }
}
.resurrectionModal .resurrection-price {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
@media only screen and (min-width: 768px) {
  .resurrectionModal .resurrection-price {
    gap: 0.23391813cqi;
  }
}
@media only screen and (max-width: 767px) {
  .resurrectionModal .resurrection-price {
    gap: 4px;
  }
}
.resurrectionModal .resurrection-price img {
  width: 18px;
  height: 18px;
}
.resurrectionModal .resurrection-price-inline {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-weight: bold;
}
@media only screen and (min-width: 768px) {
  .resurrectionModal .resurrection-price-inline {
    gap: 0.23391813cqi;
  }
}
@media only screen and (max-width: 767px) {
  .resurrectionModal .resurrection-price-inline {
    gap: 4px;
  }
}
.resurrectionModal .resurrection-price-inline img {
  width: 16px;
  height: 16px;
}
.pers-area.defeated .pers-resurrect {
  pointer-events: auto;
}
.pers-resurrect {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: auto;
  cursor: pointer;
  line-height: 1.2;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid #c9a227;
  color: #ffd966;
  animation: hero-can-select 1.6s ease-in-out infinite;
}
@media only screen and (min-width: 768px) {
  .pers-resurrect {
    top: -2.92397661cqi;
  }
}
@media only screen and (min-width: 768px) {
  .pers-resurrect {
    padding: 0.35087719cqi 0.87719298cqi;
  }
}
@media only screen and (min-width: 768px) {
  .pers-resurrect {
    font-size: 0.93567251cqi;
  }
}
@media only screen and (max-width: 767px) {
  .pers-resurrect {
    font-size: 16px;
  }
}
@media only screen and (min-width: 768px) {
  .pers-resurrect {
    border-radius: 0.23391813cqi;
  }
}
@media only screen and (min-width: 768px) {
  .pers-resurrect {
    border-width: 0.05847953cqi;
  }
}
.pers-resurrect:hover {
  background: rgba(40, 30, 0, 0.9);
}
.settingsModal .modal-dialog {
  margin: 0;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: auto;
}
.settingsModal .rzslider .rz-bubble {
  display: none;
}
.settingsModal .section-title {
  color: #cf9b48;
}
@media only screen and (min-width: 768px) {
  .settingsModal .section-title {
    font-size: 1.05263158cqi;
  }
}
@media only screen and (max-width: 767px) {
  .settingsModal .section-title {
    font-size: 18px;
  }
}
@media only screen and (min-width: 768px) {
  .settingsModal .section-title {
    margin-bottom: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .settingsModal .section-line {
    margin-bottom: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .settingsModal .section-line-title {
    margin-bottom: 0.58479532cqi;
  }
}
.settingsModal .section-line-hint {
  opacity: 0.6;
}
@media only screen and (min-width: 768px) {
  .settingsModal .section-line-hint {
    font-size: 0.81871345cqi;
  }
}
@media only screen and (max-width: 767px) {
  .settingsModal .section-line-hint {
    font-size: 14px;
  }
}
@media only screen and (min-width: 768px) {
  .settingsModal .section-line-hint {
    margin-bottom: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .settingsModal .section-line-hint {
    margin-top: -0.29239766cqi;
  }
}
@media only screen and (min-width: 768px) {
  .settingsModal .section-line + .section-title {
    margin-top: 0.58479532cqi;
  }
}
.settingsModal .settings-delete-save {
  display: inline-block;
  background: #8b2e2e;
  box-shadow: inset 0 1px 3px 0 #c44, 0 5px 0 0 #5a1a1a;
}
.settingsModal .settings-delete-save:hover {
  background: #a33a3a;
  box-shadow: inset 0 1px 3px 0 #d55, 0 7px 0 0 #5a1a1a;
}
.settingsModal .settings-delete-save:active {
  box-shadow: inset 0 1px 3px 0 #c44, 0 2px 0 0 #5a1a1a;
}
.s-act-map {
  /* Легенда */
}
@media only screen and (min-width: 768px) {
  .s-act-map hike-items .mods {
    top: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map hike-items .mods {
    bottom: 26.9005848cqi;
  }
}
.s-act-map .act-start {
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .s-act-map .act-start {
    font-size: 2.33918129cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-act-map .act-start {
    font-size: 40px;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .act-start {
    padding-top: 4.03508772cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .act-start {
    padding-bottom: 1.75438596cqi;
  }
}
.s-act-map .clever-bonus {
  display: flex;
}
@media only screen and (min-width: 768px) {
  .s-act-map .clever-bonus {
    margin-top: 0.58479532cqi;
  }
}
.s-act-map .coridor-title {
  position: absolute;
  color: #fff;
  font-weight: bold;
  white-space: nowrap;
  font-family: monospace;
  background: #0009;
  pointer-events: none;
  z-index: 20;
  transform: translateX(-50%);
  letter-spacing: 1px;
  font-family: var(--fontTitle);
}
@media only screen and (min-width: 768px) {
  .s-act-map .coridor-title {
    font-size: 1.40350877cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-act-map .coridor-title {
    font-size: 24px;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .coridor-title {
    border-radius: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .coridor-title {
    padding-top: 0.40935673cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .coridor-title {
    padding-right: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .coridor-title {
    padding-bottom: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .coridor-title {
    padding-left: 1.16959064cqi;
  }
}
.s-act-map .clever-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #00000094;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (min-width: 768px) {
  .s-act-map .clever-block {
    margin-top: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .clever-block {
    margin-bottom: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .clever-block {
    font-size: 1.16959064cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-act-map .clever-block {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .clever-block {
    width: 32.74853801cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .clever-block {
    margin-top: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .clever-block {
    margin-bottom: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .clever-block {
    padding-top: 2.33918129cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .clever-block {
    padding-right: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .clever-block {
    padding-bottom: 2.92397661cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .clever-block {
    padding-left: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .clever-block {
    border-radius: 0.58479532cqi;
  }
}
.s-act-map .clever-bonus-value {
  color: #ffe20d;
}
@media only screen and (min-width: 768px) {
  .s-act-map .clever-bonus-value {
    margin-left: 0.58479532cqi;
  }
}
.s-act-map .clever-title {
  opacity: 0.5;
  font-weight: bold;
}
@media only screen and (min-width: 768px) {
  .s-act-map .clever-title {
    margin-bottom: 0.58479532cqi;
  }
}
.s-act-map .sam-bg {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.3;
}
.s-act-map .sam-win {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .s-act-map .sam-win-title {
    font-size: 4.09356725cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-act-map .sam-win-title {
    font-size: 70px;
  }
}
.s-act-map .act-number {
  opacity: 0.3;
  font-size: 60%;
}
@media only screen and (min-width: 768px) {
  .s-act-map .act-number {
    margin-bottom: -0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .aw-info {
    font-size: 1.05263158cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-act-map .aw-info {
    font-size: 18px;
  }
}
.s-act-map .aw-title {
  opacity: 0.5;
}
.s-act-map .sam-win-text {
  opacity: 0.5;
}
@media only screen and (min-width: 768px) {
  .s-act-map .sam-win-text {
    font-size: 1.40350877cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-act-map .sam-win-text {
    font-size: 24px;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .sam-win-text {
    margin-bottom: 2.92397661cqi;
  }
}
.s-act-map .aw-last {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .s-act-map .aw-last {
    margin-top: 1.75438596cqi;
  }
}
.s-act-map .aw-img img {
  width: 100%;
}
.s-act-map .aw-img {
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .s-act-map .aw-img {
    width: 3.50877193cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .aw-img {
    border-radius: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .aw-img {
    margin-right: 0.87719298cqi;
  }
}
.s-act-map .bg {
  background: url(../images/acts/actmapbg.jpg) center no-repeat;
  background-size: cover;
  min-height: 100cqi;
}
@media only screen and (min-width: 768px) {
  .s-act-map .bg {
    padding-top: 2.92397661cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .bg {
    padding-bottom: 2.92397661cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .bg {
    padding-left: 9.35672515cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .bg {
    padding-right: 9.35672515cqi;
  }
}
.s-act-map .map-container {
  margin: 0px auto;
  z-index: 4;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .s-act-map .map-container {
    max-width: 72.51461988cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .map-container {
    padding-top: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .map-container {
    padding-right: 3.50877193cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .map-container {
    padding-bottom: 3.50877193cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .map-container {
    padding-left: 3.50877193cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .map-container {
    border-radius: 1.16959064cqi;
  }
}
.s-act-map .legend {
  position: fixed;
}
@media only screen and (min-width: 768px) {
  .s-act-map .legend {
    bottom: 2.16374269cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .legend {
    left: 1.28654971cqi;
  }
}
.s-act-map .legend-item {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
}
@media only screen and (min-width: 768px) {
  .s-act-map .legend-item {
    gap: 0.46783626cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-act-map .legend-item {
    gap: 8px;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .legend-item {
    font-size: 0.76023392cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-act-map .legend-item {
    font-size: 13px;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .legend-item {
    padding-top: 0.29239766cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .legend-item {
    padding-right: 0.93567251cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .legend-item {
    padding-bottom: 0.29239766cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .legend-item {
    padding-left: 0.29239766cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .legend-item {
    border-radius: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .legend-item {
    margin-bottom: 0.58479532cqi;
  }
}
.s-act-map .legend-color {
  border-radius: 50%;
  border: 0px solid;
  background-size: cover;
  background-position: center;
}
@media only screen and (min-width: 768px) {
  .s-act-map .legend-color {
    width: 2.10526316cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .legend-color {
    height: 2.10526316cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .legend-title {
    padding-top: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .legend-title {
    font-size: 1.05263158cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-act-map .legend-title {
    font-size: 18px;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .legend-title {
    margin-left: 0.29239766cqi;
  }
}
.s-act-map .legend-color.start {
  border-color: #4caf50;
  background: #1b5e20;
}
.s-act-map .legend-color.you img {
  position: absolute;
}
@media only screen and (min-width: 768px) {
  .s-act-map .legend-color.you img {
    width: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .legend-color.you img {
    margin-left: 0.11695906cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-act-map .legend-color.you img {
    margin-top: 0.05847953cqi;
  }
}
.s-act-map .legend-color.combat {
  background-image: url(../icons/rooms/combat.png);
  border-color: #4f4f4f;
}
.s-act-map .legend-color.elite {
  background-image: url(../icons/rooms/elite.png);
  border-color: #c80000;
}
.s-act-map .legend-color.you {
  background-image: url(../icons/rooms/you.png);
}
.s-act-map .legend-color.treasure {
  background-image: url(../icons/rooms/treasure.png);
  border-color: #fac607;
}
.s-act-map .legend-color.shop {
  background-image: url(../icons/rooms/shop.png);
  border-color: #4f4f4f;
}
.s-act-map .legend-color.camp {
  background-image: url(../icons/rooms/camp.png);
  border-color: #246f11;
}
.s-act-map .legend-color.secret {
  background-image: url(../icons/rooms/secret.png);
  border-color: #4f4f4f;
}
.s-act-map .legend-color.boss {
  background-image: url(../icons/rooms/boss.png);
  border-color: #ffffff;
}
.s-after-run .saf-bg {
  background: url(../images/backgrounds/heroes-up.jpg) center no-repeat;
  background-size: cover;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.s-after-run .saf-content {
  text-align: center;
  position: absolute;
  right: 0;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
@media only screen and (min-width: 768px) {
  .s-after-run .saf-title {
    font-size: 3.50877193cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-after-run .saf-title {
    font-size: 60px;
  }
}
.s-after-run .saf-heroes {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (min-width: 768px) {
  .s-after-run .saf-heroes {
    margin-top: 2.33918129cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-after-run .saf-heroes {
    margin-right: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-after-run .saf-heroes {
    margin-bottom: 3.50877193cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-after-run .saf-heroes {
    margin-left: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-after-run .saf-hero {
    margin-top: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-after-run .saf-hero {
    margin-right: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-after-run .saf-hero {
    margin-bottom: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-after-run .saf-hero {
    margin-left: 1.75438596cqi;
  }
}
.s-after-run .saf-hero.flick .saf-hero-rt-level {
  animation: after-run-level 0.8s ease-in-out infinite;
}
@media only screen and (min-width: 768px) {
  .s-after-run .saf-hero-image img {
    width: 14.61988304cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-after-run .saf-hero-image img {
    border-radius: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-after-run .saf-hero-name {
    font-size: 1.75438596cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-after-run .saf-hero-name {
    font-size: 30px;
  }
}
@media only screen and (min-width: 768px) {
  .s-after-run .saf-hero-name {
    margin-bottom: 0.93567251cqi;
  }
}
.s-after-run .saf-hero-exp {
  background: #403d50;
  z-index: 2;
  position: relative;
  border: 2px solid #000;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .s-after-run .saf-hero-exp {
    margin-top: -1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-after-run .saf-hero-exp {
    margin-right: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-after-run .saf-hero-exp {
    margin-bottom: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-after-run .saf-hero-exp {
    margin-left: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-after-run .saf-hero-exp {
    height: 2.45614035cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-after-run .saf-hero-exp {
    border-radius: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-after-run .saf-hero-exp {
    border-width: 0.11695906cqi;
  }
}
.s-after-run .saf-hero-rt-level {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}
@media only screen and (min-width: 768px) {
  .s-after-run .saf-hero-rt-level {
    line-height: 2.04678363cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-after-run .saf-hero-rt-level {
    font-size: 1.05263158cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-after-run .saf-hero-rt-level {
    font-size: 18px;
  }
}
.s-after-run .saf-hero-exp-line {
  height: 100%;
  background: #4267c1;
  transition: 0.3s;
}
.s-after-run .saf-level-up-hint {
  line-height: 1.4;
  color: #ff9;
}
@media only screen and (min-width: 768px) {
  .s-after-run .saf-level-up-hint {
    font-size: 1.16959064cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-after-run .saf-level-up-hint {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) {
  .s-after-run .saf-level-up-hint {
    margin-bottom: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-after-run .saf-level-up-hint {
    padding-left: 2.33918129cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-after-run .saf-level-up-hint {
    padding-right: 2.33918129cqi;
  }
}
@keyframes after-run-level {
  0% {
    transform: scale(1);
    color: #fff;
  }
  50% {
    transform: scale(1.1);
    color: #ff9;
  }
  100% {
    transform: scale(1);
    color: #fff;
  }
}
.s-autors .sa-flex {
  display: flex;
  margin: auto;
}
@media only screen and (min-width: 768px) {
  .s-autors .sa-flex {
    width: 58.47953216cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-autors .sa-flex {
    margin-top: 5.26315789cqi;
  }
}
.s-autors .sa-flex-left {
  min-width: 360px;
}
@media only screen and (min-width: 768px) {
  .s-autors .sa-flex-left {
    min-width: 21.05263158cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-autors .sa-flex-left {
    margin-right: 3.50877193cqi;
  }
}
.s-autors .sa-flex-left img {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .s-autors .sa-flex-left img {
    border-radius: 4.09356725cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-autors .sa-flex-right {
    font-size: 1.05263158cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-autors .sa-flex-right {
    font-size: 18px;
  }
}
@media only screen and (min-width: 768px) {
  .s-autors .sa-flex-right {
    padding-bottom: 5.84795322cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-autors .sa-h {
    font-size: 1.98830409cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-autors .sa-h {
    font-size: 34px;
  }
}
@media only screen and (min-width: 768px) {
  .s-autors .sa-h {
    margin-bottom: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-autors .names {
    margin-top: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-autors .names {
    margin-bottom: 1.75438596cqi;
  }
}
.s-autors .name {
  color: #ffbb58;
}
.s-before-5-act .saf-content {
  margin: auto;
  position: fixed;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
@media only screen and (min-width: 768px) {
  .s-before-5-act .saf-content {
    width: 76.02339181cqi;
  }
}
.s-before-5-act .saf-bg {
  background: url(../images/backgrounds/5/occup.jpg) center no-repeat;
  background-size: cover;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.s-before-5-act .title-select {
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .s-before-5-act .title-select {
    font-size: 2.57309942cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-before-5-act .title-select {
    font-size: 44px;
  }
}
.s-before-5-act .desc-select {
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .s-before-5-act .desc-select {
    font-size: 1.16959064cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-before-5-act .desc-select {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) {
  .s-before-5-act .desc-select {
    margin-top: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-before-5-act .desc-select {
    margin-bottom: 2.92397661cqi;
  }
}
.s-before-5-act .fract-flex {
  display: flex;
  justify-content: space-between;
}
@media only screen and (min-width: 768px) {
  .s-before-5-act .fract-flex {
    gap: 2.92397661cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-before-5-act .fract-flex {
    gap: 50px;
  }
}
.s-before-5-act .fract-flex.passive {
  pointer-events: none;
}
.s-before-5-act .fract {
  border: 3px solid #999;
  transition: 0.3s;
  width: 100%;
  opacity: 0.7;
  background: #000;
}
@media only screen and (min-width: 768px) {
  .s-before-5-act .fract {
    border-radius: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-before-5-act .fract {
    padding: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-before-5-act .fract {
    font-size: 0.93567251cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-before-5-act .fract {
    font-size: 16px;
  }
}
.s-before-5-act .fract.selected {
  border-color: #ff7c36;
  background-color: #222f;
  opacity: 1;
  transform: scale(1.05);
}
.s-before-5-act .fin-btn {
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .s-before-5-act .fin-btn {
    margin-top: 2.92397661cqi;
  }
}
.s-before-5-act .fin-btn-text {
  opacity: 0.6;
}
@media only screen and (min-width: 768px) {
  .s-before-5-act .fin-btn-text {
    font-size: 0.93567251cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-before-5-act .fin-btn-text {
    font-size: 16px;
  }
}
@media only screen and (min-width: 768px) {
  .s-before-5-act .fin-btn-text {
    margin-top: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-before-5-act .fract-title {
    font-size: 1.16959064cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-before-5-act .fract-title {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) {
  .s-before-5-act .fract-title {
    margin-bottom: 1.16959064cqi;
  }
}
.s-before-5-act .fract:hover {
  cursor: url('../icons/cursors/pointer.png'), auto;
  border-color: #c3832a;
  opacity: 1;
}
.s-devcheats {
  user-select: text !important;
  cursor: default !important;
  overflow: auto;
}
@media only screen and (min-width: 768px) {
  .s-devcheats {
    font-size: 0.93567251cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-devcheats {
    font-size: 16px;
  }
}
.s-devcheats .sdc-inner {
  margin: 0 auto;
}
@media only screen and (min-width: 768px) {
  .s-devcheats .sdc-inner {
    padding: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-devcheats .sdc-inner {
    max-width: 56.14035088cqi;
  }
}
.s-devcheats .sdc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media only screen and (min-width: 768px) {
  .s-devcheats .sdc-header {
    margin-bottom: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-devcheats .sdc-header {
    gap: 1.16959064cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-devcheats .sdc-header {
    gap: 20px;
  }
}
.s-devcheats .sdc-title {
  font-weight: bold;
}
@media only screen and (min-width: 768px) {
  .s-devcheats .sdc-title {
    font-size: 1.75438596cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-devcheats .sdc-title {
    font-size: 30px;
  }
}
.s-devcheats .sdc-back {
  white-space: nowrap;
}
.s-devcheats .sdc-status {
  background: #2a3a2a;
  color: #b8f0b8;
}
@media only screen and (min-width: 768px) {
  .s-devcheats .sdc-status {
    margin-bottom: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-devcheats .sdc-status {
    padding: 0.70175439cqi 0.93567251cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-devcheats .sdc-status {
    border-radius: 0.46783626cqi;
  }
}
.s-devcheats .sdc-empty,
.s-devcheats .sdc-empty-inline {
  color: #aaa;
}
@media only screen and (min-width: 768px) {
  .s-devcheats .sdc-empty-inline {
    margin-bottom: 0.70175439cqi;
  }
}
.s-devcheats .sdc-section {
  background: #222;
}
@media only screen and (min-width: 768px) {
  .s-devcheats .sdc-section {
    margin-bottom: 1.87134503cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-devcheats .sdc-section {
    padding: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-devcheats .sdc-section {
    border-radius: 0.58479532cqi;
  }
}
.s-devcheats .sdc-section-title {
  font-weight: bold;
}
@media only screen and (min-width: 768px) {
  .s-devcheats .sdc-section-title {
    font-size: 1.16959064cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-devcheats .sdc-section-title {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) {
  .s-devcheats .sdc-section-title {
    margin-bottom: 0.93567251cqi;
  }
}
.s-devcheats .sdc-row {
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .s-devcheats .sdc-row {
    gap: 0.70175439cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-devcheats .sdc-row {
    gap: 12px;
  }
}
.s-devcheats .sdc-row--wrap {
  flex-wrap: wrap;
}
.s-devcheats .sdc-input,
.s-devcheats .sdc-select {
  background: #111;
  border: 1px solid #444;
  color: #fff;
  min-width: 120px;
}
@media only screen and (min-width: 768px) {
  .s-devcheats .sdc-input,
  .s-devcheats .sdc-select {
    border-radius: 0.35087719cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-devcheats .sdc-input,
  .s-devcheats .sdc-select {
    padding: 0.46783626cqi 0.70175439cqi;
  }
}
.s-devcheats .sdc-field {
  display: flex;
  flex-direction: column;
  min-width: 180px;
}
@media only screen and (min-width: 768px) {
  .s-devcheats .sdc-field {
    gap: 0.35087719cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-devcheats .sdc-field {
    gap: 6px;
  }
}
.s-devcheats .sdc-field span {
  color: #aaa;
}
@media only screen and (min-width: 768px) {
  .s-devcheats .sdc-field span {
    font-size: 0.76023392cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-devcheats .sdc-field span {
    font-size: 13px;
  }
}
.s-devcheats .sdc-cards {
  display: flex;
  flex-wrap: wrap;
}
@media only screen and (min-width: 768px) {
  .s-devcheats .sdc-cards {
    gap: 0.70175439cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-devcheats .sdc-cards {
    gap: 12px;
  }
}
.s-devcheats .sdc-card {
  width: 110px;
  background: #333;
  cursor: pointer;
  transition: background 0.15s;
}
@media only screen and (min-width: 768px) {
  .s-devcheats .sdc-card {
    border-radius: 0.46783626cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-devcheats .sdc-card {
    padding: 0.46783626cqi;
  }
}
.s-devcheats .sdc-card:hover {
  background: #444;
}
.s-devcheats .sdc-card.is-maxed {
  opacity: 0.45;
}
.s-devcheats .sdc-card img {
  width: 100%;
  display: block;
}
@media only screen and (min-width: 768px) {
  .s-devcheats .sdc-card img {
    border-radius: 0.35087719cqi;
  }
}
.s-devcheats .sdc-card-title {
  line-height: 1.3;
}
@media only screen and (min-width: 768px) {
  .s-devcheats .sdc-card-title {
    margin-top: 0.46783626cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-devcheats .sdc-card-title {
    font-size: 0.70175439cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-devcheats .sdc-card-title {
    font-size: 12px;
  }
}
.s-devcheats .sdc-card-count {
  font-weight: bold;
  color: #ffe051;
}
@media only screen and (min-width: 768px) {
  .s-devcheats .sdc-card-count {
    margin-top: 0.23391813cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-devcheats .sdc-card-count {
    font-size: 0.70175439cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-devcheats .sdc-card-count {
    font-size: 12px;
  }
}
.s-devenemies {
  user-select: text !important;
  cursor: default !important;
}
@media only screen and (min-width: 768px) {
  .s-devenemies {
    font-size: 0.93567251cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-devenemies {
    font-size: 16px;
  }
}
.s-devenemies .sd-acts {
  display: flex;
  overflow: auto;
}
.s-devenemies .enemy {
  display: flex;
  background: #222;
}
@media only screen and (min-width: 768px) {
  .s-devenemies .enemy {
    margin-bottom: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-devenemies .enemy {
    border-radius: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-devenemies .enemy {
    padding: 0.87719298cqi;
  }
}
.s-devenemies .erl-armor-vals {
  display: flex;
}
@media only screen and (min-width: 768px) {
  .s-devenemies .erl-armor-vals {
    gap: 0.58479532cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-devenemies .erl-armor-vals {
    gap: 10px;
  }
}
.s-devenemies .erl-flex {
  display: flex;
  margin-top: 30px;
}
@media only screen and (min-width: 768px) {
  .s-devenemies .erl-flex {
    gap: 1.75438596cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-devenemies .erl-flex {
    gap: 30px;
  }
}
.s-devenemies .erl-armor-item img {
  height: 24px;
}
.s-devenemies .erl-armor-item span {
  font-weight: bold;
  font-size: 20px;
  position: relative;
  top: 3px;
}
@media only screen and (min-width: 768px) {
  .s-devenemies .enemy-left img {
    width: 8.1871345cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-devenemies .enemy-left img {
    border-radius: 0.58479532cqi;
  }
}
.s-devenemies .enemy-right {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .s-devenemies .enemy-right {
    margin-left: 1.16959064cqi;
  }
}
.s-devenemies .enemy-right-top {
  display: flex;
  justify-content: space-between;
}
.s-devenemies .enemy-right-life {
  display: flex;
}
.s-devenemies .sd-act-title {
  font-weight: bold;
}
@media only screen and (min-width: 768px) {
  .s-devenemies .sd-act-title {
    font-size: 1.75438596cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-devenemies .sd-act-title {
    font-size: 30px;
  }
}
@media only screen and (min-width: 768px) {
  .s-devenemies .sd-act-title {
    margin-bottom: 1.16959064cqi;
  }
}
.s-devenemies .erl-item {
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .s-devenemies .erl-item {
    margin-left: 1.16959064cqi;
  }
}
.s-devenemies .erl-item.--l {
  color: #ff7f7f;
}
.s-devenemies .erl-item.--e {
  color: #ffe051;
}
@media only screen and (min-width: 768px) {
  .s-devenemies .sd-act {
    min-width: 42.10526316cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-devenemies .sd-act {
    padding: 1.16959064cqi;
  }
}
.s-devenemies .enemy-right-title {
  font-weight: bold;
}
@media only screen and (min-width: 768px) {
  .s-devenemies .enemy-right-title {
    font-size: 1.05263158cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-devenemies .enemy-right-title {
    font-size: 18px;
  }
}
@media only screen and (min-width: 768px) {
  .s-devenemies .erl-action {
    margin-top: 0.52631579cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-devenemies .erl-actions {
    margin-top: -0.29239766cqi;
  }
}
.s-direct .text {
  text-align: center;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
@media only screen and (min-width: 768px) {
  .s-direct .text {
    font-size: 1.16959064cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-direct .text {
    font-size: 20px;
  }
}
.s-direct a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid #fff;
}
@media only screen and (min-width: 768px) {
  .s-gameselector .sg-act-next {
    min-width: 0.05847953cqi;
  }
}
.s-gameselector .sg-fast-run img {
  transition: 0.3s;
  opacity: 0.7;
}
@media only screen and (min-width: 768px) {
  .s-gameselector .sg-fast-run img {
    height: 8.1871345cqi;
  }
}
.s-gameselector .sg-fast-run:hover img {
  opacity: 1;
  filter: drop-shadow(0px 1px 0px #55f);
}
.s-gameselector .sg-fast-run:hover .sg-rf-title {
  filter: drop-shadow(1px 1px 0px #55f);
}
.s-gameselector .sg-arena-run {
  position: fixed;
  display: flex;
  align-items: center;
  transition: 0.3s;
  z-index: 3;
}
@media only screen and (min-width: 768px) {
  .s-gameselector .sg-arena-run {
    bottom: 4.67836257cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-gameselector .sg-arena-run {
    left: 45.61403509cqi;
  }
}
.s-gameselector .sg-arena-run img {
  transition: 0.3s;
  opacity: 0.7;
}
@media only screen and (min-width: 768px) {
  .s-gameselector .sg-arena-run img {
    height: 5.84795322cqi;
  }
}
.s-gameselector .sg-arena-run .sg-arena-texts {
  text-align: right;
  z-index: 20;
}
@media only screen and (min-width: 768px) {
  .s-gameselector .sg-arena-run .sg-arena-texts {
    margin-right: -1.75438596cqi;
  }
}
.s-gameselector .sg-arena-run .sg-rf-title {
  font-family: var(--fontTitle);
  transition: 0.3s;
}
@media only screen and (min-width: 768px) {
  .s-gameselector .sg-arena-run .sg-rf-title {
    font-size: 1.98830409cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-gameselector .sg-arena-run .sg-rf-title {
    font-size: 34px;
  }
}
.s-gameselector .sg-arena-run .sg-arena-best {
  opacity: 0.75;
}
@media only screen and (min-width: 768px) {
  .s-gameselector .sg-arena-run .sg-arena-best {
    font-size: 0.93567251cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-gameselector .sg-arena-run .sg-arena-best {
    font-size: 16px;
  }
}
@media only screen and (min-width: 768px) {
  .s-gameselector .sg-arena-run .sg-arena-best {
    margin-top: 0.11695906cqi;
  }
}
.s-gameselector .sg-arena-run:hover img {
  opacity: 1;
  filter: drop-shadow(0px 1px 0px #efbc2b);
}
.s-gameselector .sg-arena-run:hover .sg-rf-title {
  filter: drop-shadow(1px 1px 0px #efbc2b);
}
.s-gameselector .sg-content {
  z-index: 2;
  position: fixed;
  left: 0;
  right: 0;
  overflow: auto;
}
@media only screen and (min-width: 768px) {
  .s-gameselector .sg-content {
    top: 4.67836257cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-gameselector .sg-content {
    bottom: 11.11111111cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-gameselector .sg-content {
    padding: 1.75438596cqi;
  }
}
.s-gameselector .sg-fast-run {
  position: fixed;
  display: flex;
  align-items: center;
  transition: 0.3s;
}
@media only screen and (min-width: 768px) {
  .s-gameselector .sg-fast-run {
    bottom: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-gameselector .sg-fast-run {
    right: 1.75438596cqi;
  }
}
.s-gameselector .sg-fast-run .sg-rf-title {
  font-family: var(--fontTitle);
  z-index: 20;
  transition: 0.3s;
}
@media only screen and (min-width: 768px) {
  .s-gameselector .sg-fast-run .sg-rf-title {
    font-size: 1.98830409cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-gameselector .sg-fast-run .sg-rf-title {
    font-size: 34px;
  }
}
@media only screen and (min-width: 768px) {
  .s-gameselector .sg-fast-run .sg-rf-title {
    margin-right: -3.50877193cqi;
  }
}
.s-gameselector .sg-multy-run {
  position: fixed;
  display: flex;
  align-items: center;
  transition: 0.3s;
}
@media only screen and (min-width: 768px) {
  .s-gameselector .sg-multy-run {
    bottom: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-gameselector .sg-multy-run {
    left: 1.75438596cqi;
  }
}
.s-gameselector .sg-multy-run img {
  transition: 0.3s;
  opacity: 0.7;
}
@media only screen and (min-width: 768px) {
  .s-gameselector .sg-multy-run img {
    height: 8.1871345cqi;
  }
}
.s-gameselector .sg-multy-run .sg-rf-title {
  font-family: var(--fontTitle);
  z-index: 20;
  transition: 0.3s;
}
@media only screen and (min-width: 768px) {
  .s-gameselector .sg-multy-run .sg-rf-title {
    font-size: 1.98830409cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-gameselector .sg-multy-run .sg-rf-title {
    font-size: 34px;
  }
}
@media only screen and (min-width: 768px) {
  .s-gameselector .sg-multy-run .sg-rf-title {
    margin-left: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-gameselector .sg-multy-run .sg-rf-title {
    margin-right: -2.92397661cqi;
  }
}
.s-gameselector .sg-multy-run:hover img {
  opacity: 1;
  filter: drop-shadow(0px 1px 0px #55f);
}
.s-gameselector .sg-multy-run:hover .sg-rf-title {
  filter: drop-shadow(1px 1px 0px #55f);
}
.s-gameselector .wins {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (min-width: 768px) {
  .s-gameselector .wins {
    padding-bottom: 0.70175439cqi;
  }
}
.s-gameselector .wins:before {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  content: '';
  background: #535155;
  background: linear-gradient(180deg, rgba(83, 81, 85, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
}
@media only screen and (min-width: 768px) {
  .s-gameselector .wins:before {
    height: 3.50877193cqi;
  }
}
.s-gameselector .wins img {
  width: 100%;
}
.s-gameselector .win {
  box-shadow: 0cqi 0.11695906cqi 0.23391813cqi 0.1754386cqi #000000b5;
  border: 2px solid #ffffff;
  overflow: hidden;
  z-index: 3;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .s-gameselector .win {
    border-width: 0.11695906cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-gameselector .win {
    border-radius: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-gameselector .win {
    min-width: 1.87134503cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-gameselector .win {
    max-width: 1.87134503cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-gameselector .win {
    margin: 0.23391813cqi;
  }
}
.s-gameselector .hidden-title {
  opacity: 0.5;
}
.s-gameselector .sg-lock-icon img {
  width: 100%;
}
.s-gameselector .sg-lock-area {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: #1f1f1fde;
}
.s-gameselector .sg-lock-icon {
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 40%;
}
.s-gameselector .sg-lock-full {
  width: 100%;
  height: 100%;
  backdrop-filter: blur(20px);
}
.s-gameselector .sg-lock-text {
  text-align: center;
  left: 10%;
  right: 10%;
  position: absolute;
  line-height: 1.2em;
  color: #efbc2b;
}
@media only screen and (min-width: 768px) {
  .s-gameselector .sg-lock-text {
    font-size: 1.16959064cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-gameselector .sg-lock-text {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) {
  .s-gameselector .sg-lock-text {
    bottom: 1.75438596cqi;
  }
}
.s-gameselector .sg-lock-text.nexter {
  opacity: 0.35;
}
.s-gameselector .sg-act-bg {
  aspect-ratio: 50 / 85;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: calc(100% - 100px);
  position: relative;
  overflow: hidden;
  transition: 0.3s;
}
@media only screen and (min-width: 768px) {
  .s-gameselector .sg-act-bg {
    border-radius: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-gameselector .sg-act-left {
    min-height: 5.84795322cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-gameselector .sg-act-left {
    padding-top: 1.16959064cqi;
  }
}
.s-gameselector .sg-act {
  position: relative;
  background-position: center;
  background-size: cover;
  height: 100%;
  display: flex;
  transition: 0.3s;
  flex-direction: column;
  justify-content: space-between;
}
@media only screen and (min-width: 768px) {
  .s-gameselector .sg-act {
    margin-right: 2.33918129cqi;
  }
}
.s-gameselector .sg-act:hover .sg-act-bg {
  transform: translateY(-1%);
}
.s-gameselector .sg-act.selected .sg-act-bg {
  animation: goldFlicker 1.5s ease-in-out infinite;
}
.s-gameselector .sg-act.sq .sg-act-bg {
  aspect-ratio: 1 / 1;
}
.s-gameselector .sg-content-left {
  width: 100%;
  display: flex;
  height: 100%;
}
@media only screen and (min-width: 768px) {
  .s-gameselector .sg-act-title {
    margin-top: -0.29239766cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-gameselector .sg-act-title {
    font-size: 1.52046784cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-gameselector .sg-act-title {
    font-size: 26px;
  }
}
.s-gameselector .sg-act-number {
  opacity: 0.6;
}
@media only screen and (min-width: 768px) {
  .s-gameselector .sg-act-number {
    font-size: 1.16959064cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-gameselector .sg-act-number {
    font-size: 20px;
  }
}
.s-kikey-auth .text {
  text-align: center;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
@media only screen and (min-width: 768px) {
  .s-kikey-auth .text {
    font-size: 1.16959064cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-kikey-auth .text {
    font-size: 20px;
  }
}
.s-menu {
  background: #000000;
  /* Взлет с увеличением и вращением */
}
.s-menu .sm-ui {
  opacity: 0;
  visibility: hidden;
}
.s-menu .sm-menu-wrapper {
  position: fixed;
  opacity: 0;
  visibility: hidden;
}
@media only screen and (min-width: 768px) {
  .s-menu .sm-menu-wrapper {
    left: 6.43274854cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-menu .sm-menu-wrapper {
    bottom: 5.84795322cqi;
  }
}
.s-menu .sm-mw-button {
  opacity: 0;
  transition: 0.3s;
  display: inline-block;
}
@media only screen and (min-width: 768px) {
  .s-menu .sm-mw-button {
    line-height: 3.50877193cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-menu .sm-mw-button {
    font-size: 2.33918129cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-menu .sm-mw-button {
    font-size: 40px;
  }
}
.s-menu .sm-bg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  transition: 0.9s;
  opacity: 0;
  visibility: hidden;
  background: url(../images/menu.jpg) center no-repeat;
  background-size: cover;
}
.s-menu .sm-lang {
  position: fixed;
  text-align: right;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
@media only screen and (min-width: 768px) {
  .s-menu .sm-lang {
    top: 2.92397661cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-menu .sm-lang {
    right: 2.92397661cqi;
  }
}
.s-menu .sm-lang-title {
  color: #cf9b48;
}
@media only screen and (min-width: 768px) {
  .s-menu .sm-lang-title {
    font-size: 1.28654971cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-menu .sm-lang-title {
    font-size: 22px;
  }
}
@media only screen and (min-width: 768px) {
  .s-menu .sm-lang-title {
    margin-bottom: 0.58479532cqi;
  }
}
.s-menu .sm-lang-list {
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 768px) {
  .s-menu .sm-lang-list {
    gap: 0.58479532cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-menu .sm-lang-list {
    gap: 10px;
  }
}
@media only screen and (min-width: 768px) {
  .s-menu .sm-lang-list {
    width: 9.94152047cqi;
  }
}
.s-menu .sm-lang-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  transition: 0.3s;
  cursor: url('../icons/cursors/pointer.png'), auto;
  background: #120e0a;
  border: 1px solid rgba(207, 155, 72, 0.65);
  text-align: center;
  color: #fff;
}
@media only screen and (min-width: 768px) {
  .s-menu .sm-lang-item {
    height: 3.2748538cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-menu .sm-lang-item {
    padding-top: 0.35087719cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-menu .sm-lang-item {
    padding-bottom: 0.35087719cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-menu .sm-lang-item {
    padding-left: 0.46783626cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-menu .sm-lang-item {
    padding-right: 0.46783626cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-menu .sm-lang-item {
    border-radius: 0.35087719cqi;
  }
}
.s-menu .sm-lang-item:hover {
  background: #1a1510;
  border-color: #cf9b48;
}
.s-menu .sm-lang-item.is-active {
  background: #241a0f;
  border-color: #cf9b48;
  color: #cf9b48;
  box-shadow: 0 0 12px rgba(207, 155, 72, 0.35);
}
.s-menu .sm-lang-item-code {
  display: block;
  font-weight: 600;
  letter-spacing: 0.06em;
}
@media only screen and (min-width: 768px) {
  .s-menu .sm-lang-item-code {
    font-size: 0.93567251cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-menu .sm-lang-item-code {
    font-size: 16px;
  }
}
@media only screen and (min-width: 768px) {
  .s-menu .sm-lang-item-code {
    line-height: 1.16959064cqi;
  }
}
.s-menu .sm-lang-item-name {
  display: block;
  white-space: normal;
  word-break: break-word;
}
@media only screen and (min-width: 768px) {
  .s-menu .sm-lang-item-name {
    font-size: 0.76023392cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-menu .sm-lang-item-name {
    font-size: 13px;
  }
}
@media only screen and (min-width: 768px) {
  .s-menu .sm-lang-item-name {
    line-height: 0.93567251cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-menu .sm-lang-item-name {
    margin-top: 0.11695906cqi;
  }
}
.s-menu a.go-to-studio {
  position: fixed;
}
@media only screen and (min-width: 768px) {
  .s-menu a.go-to-studio {
    bottom: 2.92397661cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-menu a.go-to-studio {
    right: 2.92397661cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-menu a.go-to-studio {
    width: 9.94152047cqi;
  }
}
.s-menu a.go-to-studio img {
  width: 100%;
}
.s-menu.runned .sm-bg {
  opacity: 0.8;
  visibility: visible;
}
.s-menu.runned .sm-mw-button {
  opacity: 0.7;
}
.s-menu.runned .sm-mw-button:hover {
  opacity: 1;
  cursor: url('../icons/cursors/pointer.png'), auto;
}
.s-menu.runned .sm-ui {
  opacity: 1;
  visibility: visible;
}
.s-menu.runned .sm-menu-wrapper {
  opacity: 1;
  visibility: visible;
}
.s-menu.runned .sm-lang {
  opacity: 1;
  visibility: visible;
}
@keyframes smenuGlow {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.5;
  }
}
.s-newgame .slide {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.6s;
  text-align: center;
  opacity: 0;
}
@media only screen and (min-width: 768px) {
  .s-newgame .slide {
    font-size: 2.10526316cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-newgame .slide {
    font-size: 36px;
  }
}
.s-newgame .slide.active {
  opacity: 1;
}
.s-newgame .slide-text {
  transition: 0.6s;
  opacity: 0;
}
.s-newgame .slide-text.active {
  opacity: 1;
}
@media only screen and (min-width: 768px) {
  .s-newgame .logo-studio {
    width: 40.93567251cqi;
  }
}
.s-newgame .pres-text {
  opacity: 0.6;
}
@media only screen and (min-width: 768px) {
  .s-newgame .pres-text {
    margin-top: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-newgame .logo-game {
    width: 42.10526316cqi;
  }
}
.s-othertab .text {
  text-align: center;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
@media only screen and (min-width: 768px) {
  .s-othertab .text {
    font-size: 1.16959064cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-othertab .text {
    font-size: 20px;
  }
}
.s-start {
  /* Define the shadow movement */
}
.s-start .ss-act-head {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .s-start .ss-act-head {
    top: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .ss-act-number {
    font-size: 1.98830409cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-start .ss-act-number {
    font-size: 34px;
  }
}
.s-start .ss-act-after {
  opacity: 0.5;
}
@media only screen and (min-width: 768px) {
  .s-start .ss-act-after {
    font-size: 0.81871345cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-start .ss-act-after {
    font-size: 14px;
  }
}
.s-start .ss-decks-btn {
  position: fixed;
  z-index: 20;
}
@media only screen and (min-width: 768px) {
  .s-start .ss-decks-btn {
    bottom: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .ss-decks-btn {
    left: 1.75438596cqi;
  }
}
.s-start .ss-start-actions {
  position: fixed;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
}
@media only screen and (min-width: 768px) {
  .s-start .ss-start-actions {
    right: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .ss-start-actions {
    bottom: 1.75438596cqi;
  }
}
.s-start .ss-start-actions clever {
  display: block;
  overflow: visible;
  flex-shrink: 0;
}
@media only screen and (min-width: 768px) {
  .s-start .ss-start-actions clever {
    width: 2.63157895cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .ss-start-actions clever {
    height: 2.63157895cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .ss-start-actions clever {
    margin-bottom: 0.46783626cqi;
  }
}
.s-start .ss-start-actions clever > div {
  width: 100%;
  height: 100%;
}
.s-start .next-step-text {
  position: relative;
  bottom: auto;
  right: auto;
  z-index: 2;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}
@media only screen and (min-width: 768px) {
  .s-start .next-step-text {
    font-size: 1.40350877cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-start .next-step-text {
    font-size: 24px;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .next-step-text {
    margin-bottom: 0.58479532cqi;
  }
}
.s-start .next-step {
  color: #fff;
  position: relative;
  bottom: auto;
  right: auto;
  z-index: 20;
  transition: 0.3s;
  background: url(../icons/play.jpg) center no-repeat;
  text-align: center;
  border-radius: 50%;
  background-size: 102%;
}
@media only screen and (min-width: 768px) {
  .s-start .next-step {
    font-size: 1.40350877cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-start .next-step {
    font-size: 24px;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .next-step {
    height: 7.60233918cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .next-step {
    width: 7.60233918cqi;
  }
}
.s-start .next-step:hover {
  transform: scale(1.1);
  filter: contrast(1.3);
  cursor: url('../icons/cursors/pointer.png'), auto;
}
.s-start .ss-bg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: url(../images/start.jpg) center no-repeat;
  opacity: 0.2;
  background-size: cover;
}
.s-start .pers-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: 0.3s;
  border: 2px solid #000;
  flex-direction: column;
}
@media only screen and (min-width: 768px) {
  .s-start .pers-info {
    margin-bottom: 0.76023392cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .pers-info {
    border-width: 0.11695906cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .pers-info {
    border-radius: 0.58479532cqi;
  }
}
.s-start .pers-info:hover {
  transform: scale(1.03);
  cursor: pointer;
}
.s-start .tip-sort {
  position: absolute;
  pointer-events: none;
  opacity: 0.4;
  white-space: nowrap;
}
@media only screen and (min-width: 768px) {
  .s-start .tip-sort {
    font-size: 0.93567251cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-start .tip-sort {
    font-size: 16px;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .tip-sort {
    left: 2.33918129cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .tip-sort {
    bottom: 4.09356725cqi;
  }
}
.s-start button.talants {
  background: #6d4f3e;
  border: 2px solid #865d45;
}
@media only screen and (min-width: 768px) {
  .s-start button.talants {
    border-width: 0.11695906cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start button.talants {
    height: 1.87134503cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start button.talants {
    border-radius: 0.29239766cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start button.talants {
    padding-top: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start button.talants {
    padding-right: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start button.talants {
    padding-bottom: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start button.talants {
    padding-left: 1.16959064cqi;
  }
}
.s-start .pers-right {
  width: 100%;
}
.s-start .exp-line {
  width: 100%;
  background: #342523;
  position: relative;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
  border-top: 2px solid #000;
}
@media only screen and (min-width: 768px) {
  .s-start .exp-line {
    height: 1.87134503cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .exp-line {
    padding: 0cqi;
  }
}
.s-start .exp-line-inner {
  height: 100%;
  background: #cc7c00;
}
.s-start .exp-line-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  white-space: nowrap;
}
@media only screen and (min-width: 768px) {
  .s-start .exp-line-text {
    font-size: 0.93567251cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-start .exp-line-text {
    font-size: 16px;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .exp-line-text {
    margin-top: -0.05847953cqi;
  }
}
.s-start span.shuffle-title {
  opacity: 0.7;
}
@media only screen and (min-width: 768px) {
  .s-start .right-area {
    min-width: 23.39181287cqi;
  }
}
.s-start .area-flex {
  display: flex;
}
.s-start .items {
  display: flex;
  position: fixed;
  z-index: 34;
}
@media only screen and (min-width: 768px) {
  .s-start .items {
    bottom: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .items {
    left: 1.16959064cqi;
  }
}
.s-start .hero-selector-area {
  overflow: auto;
  display: flex;
  justify-content: safe center;
  align-items: safe center;
}
@media only screen and (min-width: 768px) {
  .s-start .hero-selector-area {
    padding-top: 8.77192982cqi;
  }
}
.s-start .hero-selector {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .s-start .hero-selector {
    padding-top: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .hero-selector {
    padding-bottom: 0cqi;
  }
}
.s-start .h-sel {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  position: relative;
  align-items: center;
  z-index: 3;
  height: 100%;
}
@media only screen and (min-width: 768px) {
  .s-start .h-sel {
    margin-right: 0.58479532cqi;
  }
}
.s-start .shuffler {
  background: url(../icons/shuffle.png) center no-repeat;
  background-size: cover;
  transition: 0.3s;
  opacity: 0;
  visibility: hidden;
}
@media only screen and (min-width: 768px) {
  .s-start .shuffler {
    width: 5.84795322cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .shuffler {
    height: 5.84795322cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .shuffler {
    margin-top: 2.22222222cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .shuffler {
    margin-bottom: 3.04093567cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .shuffler.heroes-compact {
    margin-top: 1.11111111cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .shuffler.heroes-compact {
    margin-bottom: 2.39766082cqi;
  }
}
.s-start .shuffler.active {
  opacity: 1;
  visibility: visible;
}
.s-start .shuffler:hover {
  transform: scale(1.1);
  filter: contrast(1.3);
  cursor: url('../icons/cursors/pointer.png'), auto;
}
.s-start .ui {
  position: relative;
  z-index: 22;
}
.s-start .act-title {
  text-align: center;
  position: fixed;
  white-space: nowrap;
  left: 50%;
  transform: translateX(-50%);
}
@media only screen and (min-width: 768px) {
  .s-start .act-title {
    bottom: 2.33918129cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .act-title {
    font-size: 1.40350877cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-start .act-title {
    font-size: 24px;
  }
}
.s-start .act-left {
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .s-start .act-left {
    font-size: 1.75438596cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-start .act-left {
    font-size: 30px;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .act-left {
    width: 5.84795322cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .act-left {
    line-height: 5.84795322cqi;
  }
}
.s-start .rzslider .rz-bubble {
  display: none !important;
}
.s-start .rzslider .rz-bar {
  background: #ffffff2e;
}
.s-start .rzslider .rz-pointer {
  z-index: 3;
  cursor: url('../icons/cursors/pointer.png'), auto;
  background-color: #dfa445;
  transition: all linear 0.3s;
}
@media only screen and (min-width: 768px) {
  .s-start .rzslider .rz-pointer {
    top: -0.81871345cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .rzslider .rz-pointer {
    width: 1.87134503cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .rzslider .rz-pointer {
    height: 1.87134503cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .rzslider .rz-pointer {
    border-radius: 0.23391813cqi;
  }
}
.s-start .rzslider .rz-pointer:after {
  display: none;
}
.s-start .diff {
  position: fixed;
  z-index: 32;
  left: 50%;
  transform: translate(-50%);
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .s-start .diff {
    top: 1.4619883cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .diff {
    min-width: 11.69590643cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .diff {
    max-width: 11.69590643cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .diff-slider {
    min-width: 11.69590643cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .diff-slider {
    max-width: 11.69590643cqi;
  }
}
.s-start .diff-label-title {
  opacity: 1;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .s-start .diff-label-title {
    margin-right: 1.16959064cqi;
  }
}
.s-start .awd {
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 768px) {
  .s-start .rzslider {
    margin-top: 0.76023392cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .rzslider {
    margin-bottom: 0.76023392cqi;
  }
}
.s-start .pers-rel {
  position: relative;
}
.s-start .heroes {
  display: flex;
  position: relative;
  z-index: 3;
}
@media only screen and (min-width: 768px) {
  .s-start .heroes.heroes-compact .pers-portrait {
    width: 6.5497076cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .heroes.heroes-compact .pers-portrait {
    height: 6.5497076cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .heroes.heroes-compact .hero-points {
    width: 1.87134503cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .heroes.heroes-compact .hero-points {
    height: 1.87134503cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .heroes.heroes-compact .hero-points {
    line-height: 1.69590643cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .heroes.heroes-compact .hero-points {
    font-size: 0.93567251cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-start .heroes.heroes-compact .hero-points {
    font-size: 16px;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .heroes.heroes-compact .exp-line {
    height: 1.52046784cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .heroes.heroes-compact .exp-line-text {
    font-size: 0.76023392cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-start .heroes.heroes-compact .exp-line-text {
    font-size: 13px;
  }
}
.s-start .back {
  color: #fff;
  position: fixed;
  opacity: 1;
  z-index: 2022;
  transition: 0.3s;
}
@media only screen and (min-width: 768px) {
  .s-start .back {
    bottom: 2.04678363cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .back {
    left: 2.92397661cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .back {
    font-size: 1.75438596cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-start .back {
    font-size: 30px;
  }
}
.s-start .background {
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  position: fixed;
  left: 0;
  right: 0;
  background-image: url(../images/start.jpg);
}
@media only screen and (min-width: 768px) {
  .s-start .background {
    bottom: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .background {
    top: 3.50877193cqi;
  }
}
.s-start .spells-dices {
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 768px) {
  .s-start .spells-dices {
    padding-top: 0.1754386cqi;
  }
}
.s-start .spells-dice {
  text-align: center;
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .s-start .spells-dice {
    height: 3.62573099cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .spells-dice img {
    width: 2.10526316cqi;
  }
}
.s-start .hero {
  display: flex;
  align-items: center;
  flex-direction: column;
}
@media only screen and (min-width: 768px) {
  .s-start .hero {
    margin-right: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .hero {
    margin-left: 0.58479532cqi;
  }
}
.s-start .inactive .spell-icon {
  filter: grayscale(1);
}
.s-start .hero-points {
  position: absolute;
  z-index: 2;
  background: #cc7c00;
  border-radius: 50%;
  text-align: center;
  color: #ffffff;
  animation-name: shadow-pulse-new-spell;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  border: 2px solid #ff9a00;
}
@media only screen and (min-width: 768px) {
  .s-start .hero-points {
    right: -0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .hero-points {
    top: -0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .hero-points {
    width: 2.33918129cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .hero-points {
    height: 2.33918129cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .hero-points {
    line-height: 2.10526316cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .hero-points {
    font-size: 1.16959064cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-start .hero-points {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .hero-points {
    border-width: 0.11695906cqi;
  }
}
.s-start .hero-act-completed {
  position: absolute;
  left: 50%;
  z-index: 2;
  background: #2d8a3e;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #4caf50;
  pointer-events: auto;
}
@media only screen and (min-width: 768px) {
  .s-start .hero-act-completed {
    margin-left: -0.87719298cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .hero-act-completed {
    top: -2.33918129cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .hero-act-completed {
    border-radius: 0.29239766cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .hero-act-completed {
    width: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .hero-act-completed {
    height: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .hero-act-completed {
    border-width: 0.11695906cqi;
  }
}
.s-start .hero-act-completed img {
  filter: brightness(0) invert(1);
}
@media only screen and (min-width: 768px) {
  .s-start .hero-act-completed img {
    width: 0.93567251cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .hero-act-completed img {
    height: 0.93567251cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .heroes.heroes-compact .hero-act-completed {
    width: 1.87134503cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .heroes.heroes-compact .hero-act-completed {
    height: 1.87134503cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .heroes.heroes-compact .hero-act-completed {
    left: -0.46783626cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .heroes.heroes-compact .hero-act-completed {
    top: -0.46783626cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .heroes.heroes-compact .hero-act-completed img {
    width: 1.05263158cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .heroes.heroes-compact .hero-act-completed img {
    height: 1.05263158cqi;
  }
}
.s-start .passive-hero .pers-portrait {
  filter: grayscale(70%);
}
.s-start .pers-portrait {
  position: relative;
}
@media only screen and (min-width: 768px) {
  .s-start .pers-portrait {
    width: 8.1871345cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .pers-portrait {
    height: 8.1871345cqi;
  }
}
.s-start .pers-bg {
  height: 100%;
  width: 100%;
  background-size: cover;
  border-radius: 10px 10px 0 0;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .s-start .pers-bg {
    margin-top: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .pers-bg {
    margin-left: 0cqi;
  }
}
.s-start .pers-spells {
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;
}
.s-start .pers-spell {
  position: relative;
  border: 2px solid #4c4c4c;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .s-start .pers-spell {
    margin-top: 0.40935673cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .pers-spell {
    border-width: 0.11695906cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .pers-spell {
    border-radius: 0.35087719cqi;
  }
}
.s-start .pers-spell.is-new-spell {
  z-index: 2;
  /* Apply the animation */
  animation-name: shadow-pulse-new-spell;
  animation-duration: 1.5s;
  animation-iteration-count: 10;
  /* This runs it exactly 10 times */
  animation-timing-function: ease-in-out;
}
.s-start .pers-spell.locked:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #000a url(../images/level-block.png) center no-repeat;
  background-size: 149%;
}
.s-start .pers-spell.locked:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #000a;
}
.s-start .pers-spell:first-child {
  margin-left: 0;
}
.s-start .spell-icon {
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .s-start .spell-icon {
    width: 3.04093567cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-start .spell-icon {
    height: 3.04093567cqi;
  }
}
.s-start .spell-icon-inner {
  width: 100%;
  height: 100%;
  background-size: cover;
}
@keyframes shadow-pulse-new-spell {
  0% {
    box-shadow: 0px 0px 0px 0cqi #0098ff;
    transform: scale(1.1);
  }
  70% {
    box-shadow: 0px 0px 0px 1.16959064cqi rgba(0, 152, 255, 0);
    transform: scale(1);
  }
  90% {
    box-shadow: 0px 0px 0px 0cqi rgba(0, 152, 255, 0);
    transform: scale(1);
  }
  100% {
    box-shadow: 0px 0px 0px 0cqi rgba(0, 152, 255, 0);
    transform: scale(1.1);
  }
}
#particle-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100cqi;
  height: 100cqi;
  pointer-events: none;
  z-index: 10000;
}
.magic-arrow-svg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100cqi;
  height: 100cqi;
  pointer-events: none;
  z-index: 9999;
  display: block;
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}
.magic-arrow-svg.visible {
  opacity: 1;
}
@keyframes flow {
  0%,
  100% {
    stop-color: var(--c1);
  }
  33% {
    stop-color: var(--c2);
  }
  66% {
    stop-color: var(--c3);
  }
}
.e1 {
  --c1: #ffd;
  --c2: #f90;
  --c3: #f30;
  animation: flow 1.5s infinite linear;
}
.e2 {
  --c1: #f90;
  --c2: #f30;
  --c3: #ffd;
  animation: flow 1.5s infinite linear;
  animation-delay: -0.5s;
}
.e3 {
  --c1: #f30;
  --c2: #ffd;
  --c3: #f90;
  animation: flow 1.5s infinite linear;
  animation-delay: -1s;
}
.a1 {
  --c1: #ffffcc;
  --c2: #d4ff00;
  --c3: #00cc44;
  animation: flow 1.5s infinite linear;
}
.a2 {
  --c1: #d4ff00;
  --c2: #00cc44;
  --c3: #ffffcc;
  animation: flow 1.5s infinite linear;
  animation-delay: -0.5s;
}
.a3 {
  --c1: #00cc44;
  --c2: #ffffcc;
  --c3: #d4ff00;
  animation: flow 1.5s infinite linear;
  animation-delay: -1s;
}
.effect-massattack {
  position: fixed;
  top: 20%;
  left: 50%;
  transform-origin: 0 100%;
  animation: effMassattack 0.23s ease-out forwards;
  opacity: 0;
}
@media only screen and (min-width: 768px) {
  .effect-massattack {
    bottom: 0.58479532cqi;
  }
}
.effect-massattack img {
  height: 100%;
}
@keyframes effMassattack {
  0% {
    opacity: 0;
    transform: rotate(-35deg) translate(-100%, -20%);
  }
  20% {
    opacity: 1;
    transform: rotate(-20deg) translate(-100%, -20%);
  }
  40% {
    transform: rotate(-5deg) translate(-100%, -20%);
  }
  60% {
    transform: rotate(10deg) translate(-100%, -20%);
  }
  80% {
    opacity: 1;
    transform: rotate(25deg) translate(-100%, -20%);
  }
  100% {
    opacity: 0;
    transform: rotate(40deg) translate(-100%, -20%);
  }
}
.rockfall-canvas {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 999999 !important;
}
@keyframes rockfall-shake {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  10% {
    transform: translate(-2px, -3px) rotate(-0.5deg);
  }
  20% {
    transform: translate(3px, 2px) rotate(0.5deg);
  }
  30% {
    transform: translate(-3px, 1px) rotate(-0.3deg);
  }
  40% {
    transform: translate(2px, -2px) rotate(0.3deg);
  }
  50% {
    transform: translate(-1px, 3px) rotate(-0.2deg);
  }
  60% {
    transform: translate(1px, -1px) rotate(0.2deg);
  }
  70% {
    transform: translate(-2px, 0px) rotate(-0.1deg);
  }
  80% {
    transform: translate(1px, 1px) rotate(0.1deg);
  }
  90% {
    transform: translate(0, -1px) rotate(0deg);
  }
  100% {
    transform: translate(0, 0) rotate(0);
  }
}
/* Базовые стили для эффекта опасности камнепада */
/* Альтернативный CSS-класс с темной прозрачной рамкой */
@keyframes rockfallDangerDarkPulse {
  0% {
    border-color: rgba(70, 50, 35, 0.5);
    box-shadow: 0cqi 0cqi 0.87719298cqi 0cqi rgba(30, 20, 15, 0.3), inset 0cqi 0cqi 0.70175439cqi 0cqi rgba(60, 40, 25, 0.2), 0px 0px 0px 0.1754386cqi rgba(25, 15, 8, 0.2);
    border-width: 6px;
  }
  50% {
    border-color: rgba(160, 120, 80, 0.7);
    box-shadow: 0cqi 0cqi 2.33918129cqi 0cqi rgba(60, 45, 30, 0.6), inset 0cqi 0cqi 2.04678363cqi 0cqi rgba(120, 85, 55, 0.4), 0px 0px 0px 0.46783626cqi rgba(40, 25, 15, 0.4);
    border-width: 14px;
  }
  100% {
    border-color: rgba(70, 50, 35, 0.5);
    box-shadow: 0cqi 0cqi 0.87719298cqi 0cqi rgba(30, 20, 15, 0.3), inset 0cqi 0cqi 0.70175439cqi 0cqi rgba(60, 40, 25, 0.2), 0px 0px 0px 0.1754386cqi rgba(25, 15, 8, 0.2);
    border-width: 6px;
  }
}
.shake-error {
  animation: shake-error 0.3s ease-in-out;
}
@keyframes shake-error {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-6px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(6px);
  }
}
/* --- Контейнеры анимации (вспышки на самом персонаже) --- */
.eff-dt-damage-container {
  animation: eff-dt-flash-damage 0.2s ease-out;
}
.eff-dt-crit-container {
  animation: eff-dt-flash-crit 0.1s ease-in-out 3;
}
/* --- Контейнер-обертка для числа и иконки --- */
.eff-dt-damage-wrapper {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
}
.eff-dt-damage-wrapper .eff-dt-damage-content {
  position: relative;
  display: flex;
  align-items: center;
  transform-origin: center;
  animation: eff-dt-float-damage 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@media only screen and (min-width: 768px) {
  .eff-dt-damage-wrapper .eff-dt-damage-content {
    gap: 0.46783626cqi;
  }
}
@media only screen and (max-width: 767px) {
  .eff-dt-damage-wrapper .eff-dt-damage-content {
    gap: 8px;
  }
}
.eff-dt-damage-wrapper.eff-dt-is-crit .eff-dt-damage-content {
  animation: eff-dt-float-crit 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
/* --- Стили для иконки --- */
.eff-dt-damage-icon {
  background-color: #222;
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0cqi 0.05847953cqi 0.1754386cqi 0cqi rgba(0, 0, 0, 0.3);
}
@media only screen and (min-width: 768px) {
  .eff-dt-damage-icon {
    border-radius: 0.1754386cqi;
  }
}
@media only screen and (min-width: 768px) {
  .eff-dt-damage-icon {
    max-width: 2.33918129cqi;
  }
}
@media only screen and (min-width: 768px) {
  .eff-dt-damage-icon {
    max-height: 2.33918129cqi;
  }
}
/* --- Главное число урона --- */
.eff-dt-damage-amount {
  font-family: var(--fontTitle);
  font-weight: bold;
  color: #e67e22;
  text-shadow: 2px 2px 1px #000;
  white-space: nowrap;
}
@media only screen and (min-width: 768px) {
  .eff-dt-damage-amount {
    font-size: 2.45614035cqi;
  }
}
@media only screen and (max-width: 767px) {
  .eff-dt-damage-amount {
    font-size: 42px;
  }
}
/* Модификатор критического урона */
.eff-dt-damage-amount.eff-dt-is-crit {
  color: #dc3545;
  text-shadow: 0 0 8px #ff0000, 2px 2px 2px #000;
}
@media only screen and (min-width: 768px) {
  .eff-dt-damage-amount.eff-dt-is-crit {
    font-size: 3.39181287cqi;
  }
}
@media only screen and (max-width: 767px) {
  .eff-dt-damage-amount.eff-dt-is-crit {
    font-size: 58px;
  }
}
/* Критические значения для иконки при крите */
.eff-dt-damage-wrapper.eff-dt-is-crit .eff-dt-damage-icon {
  box-shadow: 0cqi 0cqi 0.29239766cqi 0cqi #ff0000;
}
/* --- Магические искры летящие в стороны (опционально) --- */
.eff-dt-damage-spark {
  position: fixed;
  transform: translate(-50%, -50%);
  color: #bdc3c7;
  text-shadow: 0 0 3px #000;
  pointer-events: none;
  opacity: 0;
  z-index: 9998;
  animation: eff-dt-spark-explosion var(--dur) ease-out forwards;
}
.eff-dt-damage-spark.eff-dt-is-crit {
  color: #ff4757;
  text-shadow: 0 0 5px #ff0000;
}
/* --- АНИМАЦИИ (KEYFRAMES) --- */
/* Обычный вылет цифры вверх */
@keyframes eff-dt-float-damage {
  0% {
    transform: translate(-50%, 60px) scale(0.6);
    opacity: 0;
  }
  20% {
    transform: translate(-50%, 30px) scale(1.1);
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -20px) scale(1);
    opacity: 0;
  }
}
/* Агрессивный вылет крита с легким покачиванием и ротацией */
@keyframes eff-dt-float-crit {
  0% {
    transform: translate(-50%, 0) scale(0.3) rotate(-15deg);
    opacity: 0;
  }
  15% {
    transform: translate(-50%, -30px) scale(1.4) rotate(10deg);
    opacity: 1;
  }
  30% {
    transform: translate(-50%, -25px) scale(1.2) rotate(-5deg);
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -100px) scale(1) rotate(0deg);
    opacity: 0;
  }
}
/* Разлет искр с сохранением центрирования */
@keyframes eff-dt-spark-explosion {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.2);
    opacity: 0;
  }
}
/* Вспышки по краям карты персонажа при ударе */
@keyframes eff-dt-flash-damage {
  0% {
    box-shadow: inset 0cqi 0cqi 1.75438596cqi 0cqi rgba(230, 126, 34, 0.8);
  }
  100% {
    box-shadow: inset 0cqi 0cqi 0cqi 0cqi rgba(230, 126, 34, 0);
  }
}
@keyframes eff-dt-flash-crit {
  0% {
    box-shadow: inset 0cqi 0cqi 2.33918129cqi 0cqi #dc3545;
    transform: translate(3px, 2px);
  }
  50% {
    transform: translate(-2px, -3px);
  }
  100% {
    box-shadow: inset 0cqi 0cqi 0cqi 0cqi rgba(220, 53, 69, 0);
    transform: translate(0, 0);
  }
}
/* --- Адаптация под маленькие экраны --- */
@media (max-width: 768px) and only screen and (min-width: 768px) {
  .eff-dt-damage-icon {
    max-width: 1.75438596cqi;
  }
}
@media (max-width: 768px) and only screen and (min-width: 768px) {
  .eff-dt-damage-icon {
    max-height: 1.75438596cqi;
  }
}
@media (max-width: 768px) and only screen and (min-width: 768px) {
  .eff-dt-damage-amount {
    font-size: 1.87134503cqi;
  }
}
@media (max-width: 768px) and only screen and (max-width: 767px) {
  .eff-dt-damage-amount {
    font-size: 32px;
  }
}
@media (max-width: 768px) and only screen and (min-width: 768px) {
  .eff-dt-damage-amount.eff-dt-is-crit {
    font-size: 2.57309942cqi;
  }
}
@media (max-width: 768px) and only screen and (max-width: 767px) {
  .eff-dt-damage-amount.eff-dt-is-crit {
    font-size: 44px;
  }
}
.e-tod-popup-message {
  position: fixed;
  z-index: 10000;
  background: #000;
  color: #fff;
  font-weight: 500;
  text-align: center;
  box-shadow: 0cqi 0.58479532cqi 1.75438596cqi 0cqi rgba(0, 0, 0, 0.3);
  pointer-events: none;
  white-space: nowrap;
}
@media only screen and (min-width: 768px) {
  .e-tod-popup-message {
    padding-top: 0.87719298cqi;
  }
}
@media only screen and (min-width: 768px) {
  .e-tod-popup-message {
    padding-right: 1.4619883cqi;
  }
}
@media only screen and (min-width: 768px) {
  .e-tod-popup-message {
    padding-bottom: 0.87719298cqi;
  }
}
@media only screen and (min-width: 768px) {
  .e-tod-popup-message {
    padding-left: 1.4619883cqi;
  }
}
@media only screen and (min-width: 768px) {
  .e-tod-popup-message {
    border-radius: 0.70175439cqi;
  }
}
@media only screen and (min-width: 768px) {
  .e-tod-popup-message {
    font-size: 1.05263158cqi;
  }
}
@media only screen and (max-width: 767px) {
  .e-tod-popup-message {
    font-size: 18px;
  }
}
.e-tod-popup-message br {
  display: block;
  content: "";
}
@media only screen and (min-width: 768px) {
  .e-tod-popup-message br {
    margin-top: 0.29239766cqi;
  }
}
@media only screen and (min-width: 768px) {
  .e-tod-popup-message br {
    margin-right: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .e-tod-popup-message br {
    margin-bottom: 0.29239766cqi;
  }
}
@media only screen and (min-width: 768px) {
  .e-tod-popup-message br {
    margin-left: 0cqi;
  }
}
/* Анимации с префиксом e-tod- */
@keyframes e-tod-popIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes e-tod-popOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}
.e-tod-animate-in {
  animation: e-tod-popIn 0.4s ease forwards;
}
.e-tod-animate-out {
  animation: e-tod-popOut 0.4s ease forwards;
}
.s-room-camp .pers {
  display: flex;
  z-index: 20;
}
.s-room-camp .pers .pers-spells,
.s-room-camp .pers .pers-back {
  display: none !important;
}
.s-room-camp .src-title {
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .s-room-camp .src-title {
    font-size: 1.75438596cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-room-camp .src-title {
    font-size: 30px;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-camp .src-title {
    margin-top: 2.92397661cqi;
  }
}
.s-room-camp .power-area {
  display: none !important;
}
.s-room-camp .src-flex {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .s-room-camp .src-flex {
    padding-top: 5.26315789cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-camp .src-actions {
    padding-bottom: 5.84795322cqi;
  }
}
.s-room-camp .src-action-append {
  opacity: 0.5;
  font-size: 80%;
}
@media only screen and (min-width: 768px) {
  .s-room-camp .src-action-append {
    margin-top: 0.29239766cqi;
  }
}
.s-room-camp .src-action {
  background: #000000c4;
  text-align: center;
  transition: 0.3s;
}
@media only screen and (min-width: 768px) {
  .s-room-camp .src-action {
    padding-top: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-camp .src-action {
    padding-right: 2.33918129cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-camp .src-action {
    padding-bottom: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-camp .src-action {
    padding-left: 2.33918129cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-camp .src-action {
    margin-top: 0.81871345cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-camp .src-action {
    font-size: 1.05263158cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-room-camp .src-action {
    font-size: 18px;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-camp .src-action {
    border-radius: 1.16959064cqi;
  }
}
.s-room-camp .src-action.selected {
  background: #0e2dfe !important;
}
.s-room-camp .src-action:hover {
  background: #4a538e;
  cursor: url('../icons/cursors/pointer.png'), auto;
}
.s-room-camp .src-action-title {
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .s-room-camp .pers-area {
    margin-left: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-camp .pers-area {
    margin-right: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-combat[act="3"] .pers {
    top: 8.1871345cqi;
  }
}
.s-room-combat .winloose-blocker.active {
  pointer-events: none;
}
.s-room-combat .units-area {
  position: relative;
  height: 100%;
  width: 100%;
  transition: 0.5s;
}
@media only screen and (min-width: 768px) {
  .s-room-combat .units-area.moved {
    width: calc(100% - (380 / 1710 * 100cqi));
  }
}
.s-room-combat .killed {
  position: fixed;
  z-index: 22;
  opacity: 0.7;
}
@media only screen and (min-width: 768px) {
  .s-room-combat .killed {
    bottom: 8.01169591cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-combat .killed {
    right: 2.92397661cqi;
  }
}
.s-room-combat .arena-hud {
  position: fixed;
  z-index: 22;
  text-align: right;
  line-height: 1.3em;
}
@media only screen and (min-width: 768px) {
  .s-room-combat .arena-hud {
    top: 6.43274854cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-combat .arena-hud {
    right: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-combat .arena-hud {
    font-size: 1.28654971cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-room-combat .arena-hud {
    font-size: 22px;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-combat .arena-hud .arena-hud-score {
    font-size: 1.6374269cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-room-combat .arena-hud .arena-hud-score {
    font-size: 28px;
  }
}
.s-room-combat .arena-hud .arena-hud-kills {
  opacity: 0.75;
}
@media only screen and (min-width: 768px) {
  .s-room-combat .arena-hud .arena-hud-kills {
    font-size: 1.05263158cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-room-combat .arena-hud .arena-hud-kills {
    font-size: 18px;
  }
}
.s-room-combat .arena-turn-points {
  position: fixed;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  z-index: 80;
  color: #efbc2b;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
  pointer-events: none;
  animation: arenaTurnPointsPop 2s ease-out forwards;
}
@media only screen and (min-width: 768px) {
  .s-room-combat .arena-turn-points {
    font-size: 4.21052632cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-room-combat .arena-turn-points {
    font-size: 72px;
  }
}
@keyframes arenaTurnPointsPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -40%) scale(0.6);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
  }
  35% {
    transform: translate(-50%, -50%) scale(1);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -65%) scale(1);
  }
}
@media only screen and (min-width: 768px) {
  .s-room-combat .arena-result-score {
    font-size: 2.10526316cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-room-combat .arena-result-score {
    font-size: 36px;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-combat .arena-result-score {
    margin-bottom: 0.46783626cqi;
  }
}
.s-room-combat .arena-result-kills {
  opacity: 0.8;
}
@media only screen and (min-width: 768px) {
  .s-room-combat .arena-result-kills {
    margin-bottom: 0.70175439cqi;
  }
}
.s-room-combat .arena-result-record {
  color: #efbc2b;
}
@media only screen and (min-width: 768px) {
  .s-room-combat .arena-result-record {
    margin-bottom: 0.93567251cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-combat .arena-result-record {
    font-size: 1.6374269cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-room-combat .arena-result-record {
    font-size: 28px;
  }
}
.s-room-combat .arena-result-best {
  opacity: 0.8;
}
@media only screen and (min-width: 768px) {
  .s-room-combat .arena-result-best {
    margin-bottom: 0.93567251cqi;
  }
}
.s-room-combat .right-area {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 222;
}
@media only screen and (min-width: 768px) {
  .s-room-combat .right-area {
    top: 5.84795322cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-combat .right-area {
    width: 8.1871345cqi;
  }
}
.s-room-combat .bg-area {
  position: fixed;
  left: 0;
  bottom: 0;
}
@media only screen and (min-width: 768px) {
  .s-room-combat .bg-area {
    top: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-combat .bg-area {
    right: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-combat hike-items.--future-dice .mods {
    top: 14.61988304cqi;
  }
}
.s-room-combat .turn {
  z-index: 2;
}
@media only screen and (min-width: 768px) {
  .s-room-combat .turn {
    font-size: 1.6374269cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-room-combat .turn {
    font-size: 28px;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-combat .turn {
    margin-bottom: 1.16959064cqi;
  }
}
.s-room-combat .cti-small {
  opacity: 0.45;
  cursor: url('../icons/cursors/pointer.png'), auto;
}
@media only screen and (min-width: 768px) {
  .s-room-combat .cti-small {
    padding: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-combat .cti-small {
    font-size: 0.93567251cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-room-combat .cti-small {
    font-size: 16px;
  }
}
.s-room-combat .background {
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
.s-room-combat .background:after {
  content: '';
  background-image: radial-gradient(circle, #00000000, #00000011, #00000022, #00000033, #00000044, #00000077, #000000aa);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
.s-room-combat .enemies {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  z-index: 40;
  justify-content: center;
  align-items: end;
}
@media only screen and (min-width: 768px) {
  .s-room-combat .enemies {
    bottom: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-combat .enemies[count="4"] enemy .pers-area {
    margin-left: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-combat .enemies[count="4"] enemy .pers-area {
    margin-right: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-combat .enemies[count="5"] enemy .pers-area {
    margin-left: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-combat .enemies[count="5"] enemy .pers-area {
    margin-right: 0.58479532cqi;
  }
}
.s-room-combat .pers {
  position: absolute;
  right: 0;
  display: flex;
  z-index: 20;
  justify-content: center;
}
@media only screen and (min-width: 768px) {
  .s-room-combat .pers {
    left: 5.26315789cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-combat .pers {
    top: 5.26315789cqi;
  }
}
.s-room-combat .spell-cubic {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  position: absolute;
  left: 100%;
  top: 50%;
  overflow: hidden;
  transform: translateY(-50%);
}
@media only screen and (min-width: 768px) {
  .s-room-combat .spell-cubic {
    margin-left: 0.46783626cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-combat .spell-cubic {
    border-radius: 0.29239766cqi;
  }
}
.s-room-combat .spell-cubic .cubic {
  background-position: center;
  background-size: contain;
}
@media only screen and (min-width: 768px) {
  .s-room-combat .spell-cubic .cubic {
    width: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-combat .spell-cubic .cubic {
    height: 1.16959064cqi;
  }
}
.s-room-combat .spell-icon {
  transition: all 0.2s ease-in;
  background: #222 !important;
}
@media only screen and (min-width: 768px) {
  .s-room-combat .spell-icon {
    width: 3.62573099cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-combat .spell-icon {
    height: 3.62573099cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-combat .spell-icon {
    border-radius: 0.58479532cqi;
  }
}
.s-room-combat .spell-icon-inner {
  background-size: cover;
  width: 100%;
  height: 100%;
  position: relative;
  transition: all 0.2s ease-in;
  background-position: center;
  border: 2px solid #000;
}
@media only screen and (min-width: 768px) {
  .s-room-combat .spell-icon-inner {
    border-width: 0.11695906cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-combat .spell-icon-inner {
    border-radius: 0.58479532cqi;
  }
}
.s-room-combat .spell-icon-inner:after {
  content: '';
  position: absolute;
  background: url(../icons/check.svg) center no-repeat;
  background-size: 76%;
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
@media only screen and (min-width: 768px) {
  .s-room-combat .spell-icon-inner:after {
    left: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-combat .spell-icon-inner:after {
    right: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-combat .spell-icon-inner:after {
    top: 0cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-combat .spell-icon-inner:after {
    bottom: 0cqi;
  }
}
.s-room-combat .pers-spell {
  transition: opacity 0.2s, filter 0.2s, transform 0.2s;
  z-index: 2;
  position: relative;
  background-image: linear-gradient(to bottom, #deb295, #c2977d, #a77c66, #8c624f, #724a3a);
  box-shadow: 0cqi 0.23391813cqi 0.11695906cqi -0.11695906cqi #00000057;
}
@media only screen and (min-width: 768px) {
  .s-room-combat .pers-spell {
    margin-top: 0.23391813cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-combat .pers-spell {
    margin-bottom: 0.23391813cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-combat .pers-spell {
    padding: 0.11695906cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-combat .pers-spell {
    border-radius: 0.70175439cqi;
  }
}
.s-room-combat .pers-spell:first-child {
  margin-top: 0;
}
.s-room-combat .pers-spell:last-child {
  margin-bottom: 0;
}
.s-room-combat .pers-spell.passive .spell-icon-inner {
  opacity: 0.45;
}
.s-room-combat .pers-spell.runned {
  opacity: 0.8;
  transform: scale(0.8);
  filter: grayscale(1);
  pointer-events: none;
}
.s-room-combat .pers-spell.selected .spell-icon {
  border-color: #0070ff;
}
.s-room-combat .pers-spell.selected .spell-icon-inner:after {
  opacity: 1;
  visibility: visible;
}
.s-room-combat .pers-spell.disabled {
  filter: grayscale(1);
  transform: scale(1) !important;
  opacity: 0.6;
  cursor: url('../icons/cursors/cursor.png'), auto !important;
}
.s-room-combat .pers-spell.disabled .spell-icon-inner {
  opacity: 0.3;
}
.s-room-combat .pers-spell:hover {
  cursor: url('../icons/cursors/pointer.png'), auto;
}
.s-room-combat .cubics-area {
  position: absolute;
  z-index: 445;
}
@media only screen and (min-width: 768px) {
  .s-room-combat .cubics-area {
    top: 1.75438596cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-combat .cubics-area {
    left: 1.75438596cqi;
  }
}
@keyframes hero-can-select {
  0% {
    box-shadow: 0px 0px 0px 0.5cqi #004bff00, 0px 0px 0px 0.5cqi #0000;
  }
  50% {
    box-shadow: 0px 0px 0px 0.5cqi #4faaff, 0px 0px 0px 0.6cqi #000;
  }
  100% {
    box-shadow: 0px 0px 0px 0.5cqi #004bff00, 0px 0px 0px 0.5cqi #0000;
  }
}
.s-room-secret .srs-content-bg {
  position: fixed;
  bottom: 0;
  top: 0;
  right: 0;
  left: 0;
  z-index: 3;
}
.s-room-secret .srs-content-bg[position="right"] {
  background-image: linear-gradient(117deg, #00000000 40%, #0d111fcc 80%);
}
.s-room-secret .srs-content-bg[position="left"] {
  background-image: linear-gradient(230deg, #00000000 40%, #0d111fcc 80%);
}
.s-room-secret .alt-bg {
  transition: 0.6s;
}
.s-room-secret .hidden-bg {
  opacity: 0;
  visibility: hidden;
}
.s-room-secret .srs-content {
  position: fixed;
  z-index: 4;
}
@media only screen and (min-width: 768px) {
  .s-room-secret .srs-content {
    bottom: 5.84795322cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-secret .srs-content {
    font-size: 1.16959064cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-room-secret .srs-content {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-secret .srs-content {
    width: 37.42690058cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-secret .srs-content[position="right"] {
    right: 5.84795322cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-secret .srs-content[position="left"] {
    left: 5.84795322cqi;
  }
}
.s-room-secret .bgbg {
  background: #0005;
  backdrop-filter: blur(4px);
}
@media only screen and (min-width: 768px) {
  .s-room-secret .bgbg {
    padding: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-secret .bgbg {
    border-radius: 0.58479532cqi;
  }
}
.s-room-secret .sc-out {
  text-align: right;
}
@media only screen and (min-width: 768px) {
  .s-room-secret .sc-out {
    margin-top: 1.16959064cqi;
  }
}
.s-room-secret .sc-choose {
  color: #aaa;
}
@media only screen and (min-width: 768px) {
  .s-room-secret .sc-choose {
    margin-top: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-secret .sc-choose {
    margin-bottom: 0.58479532cqi;
  }
}
.s-room-secret .sc-actions {
  display: flex;
  flex-direction: column;
  align-items: start;
  width: max-content;
}
@media only screen and (min-width: 768px) {
  .s-room-secret .sc-actions {
    margin-top: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-secret .sc-actions {
    margin-bottom: 1.16959064cqi;
  }
}
.s-room-secret .sc-action {
  width: 100%;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .s-room-secret .sc-action {
    margin-top: 0.87719298cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-secret .sc-action .std-btn-blue {
    min-width: 17.54385965cqi;
  }
}
@keyframes newFeatureText {
  0% {
    color: #ffa03d;
  }
  50% {
    color: #ffdf5b;
  }
  100% {
    color: #ffa03d;
  }
}
.s-room-secret-choice .std-background-content.secret-choice-room {
  background-image: url(../images/secrets/secrets.jpg);
  display: flex;
  flex-direction: column;
}
.s-room-secret-choice .rsc-flex {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .s-room-secret-choice .rsc-flex {
    padding-bottom: 5.84795322cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-secret-choice .rsc-flex {
    padding-top: 2.92397661cqi;
  }
}
.s-room-secret-choice .rsc-title {
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .s-room-secret-choice .rsc-title {
    font-size: 1.75438596cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-room-secret-choice .rsc-title {
    font-size: 30px;
  }
}
.s-room-secret-choice .rsc-desc {
  opacity: 0.7;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .s-room-secret-choice .rsc-desc {
    margin-top: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-secret-choice .rsc-desc {
    margin-bottom: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-secret-choice .rsc-desc {
    max-width: 32.74853801cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-secret-choice .rsc-actions {
    width: 32.74853801cqi;
  }
}
.s-room-secret-choice .rsc-action {
  background: #000000c4;
  text-align: center;
  transition: 0.3s;
}
@media only screen and (min-width: 768px) {
  .s-room-secret-choice .rsc-action {
    padding-top: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-secret-choice .rsc-action {
    padding-right: 2.33918129cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-secret-choice .rsc-action {
    padding-bottom: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-secret-choice .rsc-action {
    padding-left: 2.33918129cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-secret-choice .rsc-action {
    margin-top: 0.81871345cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-secret-choice .rsc-action {
    font-size: 1.05263158cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-room-secret-choice .rsc-action {
    font-size: 18px;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-secret-choice .rsc-action {
    border-radius: 1.16959064cqi;
  }
}
.s-room-secret-choice .rsc-action.selected {
  background: #0e2dfe !important;
}
.s-room-secret-choice .rsc-action:hover {
  background: #4a538e;
  cursor: url('../icons/cursors/pointer.png'), auto;
}
.s-room-secret-choice .rsc-action-title {
  text-align: center;
}
.s-room-secret-choice .rsc-action-tooltip {
  opacity: 0.75;
}
@media only screen and (min-width: 768px) {
  .s-room-secret-choice .rsc-action-tooltip {
    margin-top: 0.46783626cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-secret-choice .rsc-action-tooltip {
    font-size: 0.87719298cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-room-secret-choice .rsc-action-tooltip {
    font-size: 15px;
  }
}
.s-room-secret-choice .std-btn-blue.disabled {
  opacity: 0.4;
  pointer-events: none;
}
.s-room-shop .cards-row {
  display: flex;
  align-items: center;
}
.s-room-shop .cards-its-title {
  opacity: 0.7;
}
@media only screen and (min-width: 768px) {
  .s-room-shop .cards-its-title {
    font-size: 1.16959064cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-room-shop .cards-its-title {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-shop .cards-its-title {
    margin-bottom: 1.16959064cqi;
  }
}
.s-room-shop .items-arr {
  display: flex;
  justify-content: space-between;
}
.s-room-shop .cards-arr {
  display: flex;
}
.s-room-shop .cards-its {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
@media only screen and (min-width: 768px) {
  .s-room-shop .cards-arr {
    gap: 0.58479532cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-room-shop .cards-arr {
    gap: 10px;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-shop .cards-row {
    gap: 2.33918129cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-room-shop .cards-row {
    gap: 40px;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-shop .cards-row {
    margin-bottom: 1.75438596cqi;
  }
}
.s-room-shop .block {
  background: #303a5099;
}
@media only screen and (min-width: 768px) {
  .s-room-shop .block {
    padding: 2.92397661cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-shop .block {
    border-radius: 3.50877193cqi;
  }
}
.s-room-shop .cost {
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .s-room-shop .cost {
    margin-top: 0.58479532cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-shop hike-items .mods {
    top: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-shop hike-items .mods {
    bottom: 15.20467836cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-shop .cost img {
    width: 1.52046784cqi;
  }
}
.s-room-shop .blocks-flex {
  display: flex;
  position: fixed;
  align-items: center;
  justify-content: center;
  top: 0;
  bottom: 0;
}
@media only screen and (min-width: 768px) {
  .s-room-shop .blocks-flex {
    right: 21.05263158cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-shop .blocks-flex {
    left: 8.77192982cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-shop .blocks-flex {
    gap: 2.33918129cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-room-shop .blocks-flex {
    gap: 40px;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-shop .block-title {
    font-size: 1.75438596cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-room-shop .block-title {
    font-size: 30px;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-shop .block-title {
    margin-bottom: 2.33918129cqi;
  }
}
.s-room-shop .cost-icon {
  overflow: hidden;
  border-radius: 50%;
}
@media only screen and (min-width: 768px) {
  .s-room-shop .cost-icon {
    margin-right: 0.29239766cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-shop .cost-value {
    font-size: 1.16959064cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-room-shop .cost-value {
    font-size: 20px;
  }
}
.s-room-shop game-card:before {
  content: '';
  background: url(../icons/check.svg) center no-repeat;
  position: absolute;
  z-index: 2;
  background-size: contain;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.7);
  transition: 0.3s;
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  .s-room-shop game-card:before {
    left: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-shop game-card:before {
    right: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-shop game-card:before {
    top: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-shop game-card:before {
    bottom: 1.16959064cqi;
  }
}
.s-room-shop .card-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.s-room-shop .card-wrap.solded .cost {
  opacity: 0;
  pointer-events: none;
}
.s-room-shop .card-wrap.solded game-card .card-icon {
  opacity: 0.8;
}
.s-room-shop .card-wrap.solded game-card:before {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.s-room-shop .card-wrap.sale game-card .card-icon {
  opacity: 0;
}
.s-room-shop .card-wrap.sale .cost-value {
  color: #ffea2a;
  transform: scale(1.14);
}
.s-room-shop .card-wrap.sale game-card:after {
  pointer-events: none;
  content: '?';
  font-family: var(--fontTitle);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  text-shadow: 0px 2px 4px #ffd300;
}
@media only screen and (min-width: 768px) {
  .s-room-shop .card-wrap.sale game-card:after {
    font-size: 5.26315789cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-room-shop .card-wrap.sale game-card:after {
    font-size: 90px;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-shop .card-wrap.sale game-card:after {
    padding-bottom: 0.46783626cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-shop .blocks-right {
    min-width: 32.16374269cqi;
  }
}
.s-room-shop .item-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.s-room-shop .item-wrap .item-img {
  max-width: 100%;
  max-height: 100%;
}
.s-room-shop .item-wrap .item-img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (min-width: 768px) {
  .s-room-shop .item-wrap .item-img-wrap {
    height: 5.26315789cqi;
  }
}
.s-room-shop .item-wrap.solded {
  opacity: 0.2;
  pointer-events: none;
}
.s-room-shop .item-wrap.solded .cost {
  opacity: 0;
  pointer-events: none;
}
.s-room-shop .item-wrap.sale .cost-value {
  color: #ffea2a;
  transform: scale(1.14);
}
.s-room-treasure .srt-content {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  text-align: center;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #0008;
}
@media only screen and (min-width: 768px) {
  .s-room-treasure .srt-title {
    font-size: 2.92397661cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-room-treasure .srt-title {
    font-size: 50px;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-treasure .srt-title {
    margin-top: 8.1871345cqi;
  }
}
.s-room-treasure .bad-bg {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: auto;
  background-image: url(../images/backgrounds/treasure-bad.jpg);
  z-index: 22;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
@media only screen and (min-width: 768px) {
  .s-room-treasure .bad-bg {
    top: 0cqi;
  }
}
.s-room-treasure .bad-bg.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1.2);
}
.s-room-treasure .srt-after {
  opacity: 0.5;
}
@media only screen and (min-width: 768px) {
  .s-room-treasure .srt-after {
    font-size: 1.16959064cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-room-treasure .srt-after {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-treasure .srt-after {
    margin-top: 0.1754386cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-treasure .skip-chest {
    margin-top: 1.16959064cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-treasure .srt-actions {
    margin-bottom: 3.50877193cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-treasure .trap-title {
    font-size: 2.33918129cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-room-treasure .trap-title {
    font-size: 40px;
  }
}
.s-room-treasure .exit-btn {
  position: relative;
  z-index: 88;
}
@media only screen and (min-width: 768px) {
  .s-room-treasure .trap-text {
    margin-bottom: 5.84795322cqi;
  }
}
@media only screen and (min-width: 768px) {
  .s-room-treasure .trap-text {
    font-size: 1.16959064cqi;
  }
}
@media only screen and (max-width: 767px) {
  .s-room-treasure .trap-text {
    font-size: 20px;
  }
}
.s-room-treasure .trap-info {
  transition: 0.4s;
  opacity: 0;
  visibility: hidden;
  position: fixed;
  bottom: 0;
  z-index: 44;
  background: linear-gradient(180deg, #00000000 0%, #502727 100%);
  left: 0;
  right: 0;
  text-align: center;
  transform: translateY(50px);
}
@media only screen and (min-width: 768px) {
  .s-room-treasure .trap-info {
    padding-top: 8.77192982cqi;
  }
}
.s-room-treasure .trap-info.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}
.s-room-treasure .danger-alert {
  position: fixed;
  top: 0;
  left: 0;
  width: 100cqi;
  height: 100cqi;
  pointer-events: none;
  z-index: 33;
  opacity: 0;
  animation: fast-vignette-blink 1.6s ease-in-out forwards;
  /* Красная виньетка (центр прозрачный, края насыщенно-красные) */
  background: radial-gradient(circle, transparent 30%, rgba(255, 0, 0, 0.8) 100%);
}
@keyframes fast-vignette-blink {
  /* Вспышка 1 */
  0% {
    opacity: 0;
  }
  16% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  /* Вспышка 2 */
  50% {
    opacity: 1;
  }
  66% {
    opacity: 0;
  }
  /* Вспышка 3 */
  83% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@media only screen and (min-width: 768px) {
  .item-award img {
    height: 4.09356725cqi;
  }
}