::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
:root {
  --cursor-pointer: url('img/cursor_button32x32.png') 0 0, pointer;
  --cursor-default: url('img/cursor32x32.png') 0 0, default;
  --build-hl-h: 199;
  --build-hl-border-mm: 0.42mm;
}

a:any-link,
button,
input[type='button'],
input[type='submit'],
input[type='reset'],
[role='button'] {
  cursor: var(--cursor-pointer);
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes ready {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 400%;
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes volumeShine {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0.5em rgba(139, 92, 246, 0.5);
  }
  50% {
    box-shadow:
      0 0 1em rgba(217, 70, 239, 0.8),
      0 0 1.5em rgba(236, 72, 153, 0.5);
  }
}

html,
body {
  padding: 0;
  margin: 0;
  background: #dcdcdc;
  font: 2.13cqh/1.5 'DejaVuSans', sans-serif;
}
body {
  overscroll-behavior: contain;
  overscroll-behavior-y: none;
  background-image: url('img/bg.jpg');
  background-position: center;
  background-attachment: fixed;
  background-repeat: repeat-y;
  background-size: cover;
  height: 100cqh;
  overflow: hidden;
  container-type: inline-size;
}

input,
button,
img,
iframe {
  padding: 0;
  margin: 0;
  border: none;
}

.iframe-stats iframe {
  width: 100vw;
  height: 100vh;
}

.iframe-stats-navbar {
  width: 3vw;
  height: 3vw;
  border-radius: 50%;
  position: fixed;
  z-index: 999;
  background: rgba(255, 255, 255, 0.1);
  padding: 1vw;
  text-align: center;
}

.noselect {
  user-select: none;
}

input,
select {
  outline: none;
  appearance: none;
  border: none;
}

.telegram-bot {
  background-image: url('icons/tg.svg');
  background-repeat: no-repeat;
  position: relative;
  width: 4.8cqh;
  margin-left: -0.5cqh;
  bottom: 0.5cqh;
  height: 6cqh;
}

.steamauth:before {
  content: '';
  background-image: url('icons/steam.webp');
  background-size: cover;
  display: inline-block;
  height: 1.3em;
  width: 1.3em;
  margin-right: 0.2em;
  margin-bottom: -0.3em;
  margin-top: -0.75em;
}

.invite-input {
  display: flex;
  align-items: center;
}

rz {
  color: yellowgreen;
}

num {
  color: yellow;
}

tn {
  color: #ff8c00;
}

prime {
  color: cyan;
}

crystal {
  color: inherit;
}

crystal:after {
  content: '';
  display: inline-block;
  height: 1em;
  width: 1em;
  background-image: url('img/queue/DiamondBlue.png');
  background-size: cover;
  vertical-align: sub;
}

gray {
  color: #a5a5a5;
}

orange-l {
  color: #ff9966;
}

yellow {
  color: #dcca64;
}

orange-d {
  color: #ff8c00;
}

amethyst {
  color: #9966cc;
}

white {
  color: #ffffff;
}

black {
  color: #000000;
}

red-d {
  color: #b00000;
}

coral-l {
  color: #f08080;
}

blue-b {
  color: #4169e1;
}

blood-d {
  color: #960018;
}

cyan-d {
  color: #00a0a0;
}

frost {
  color: #64cdf0;
}

bronze {
  color: #b87333;
}

blue-l {
  color: #8cd5ff;
}

electric-blue {
  color: #3ba7ff;
}

magenta {
  color: #ca4fff;
}

lime {
  color: #37d337;
}

cinnabar {
  color: #f41200;
}

carrot {
  color: #ff9124;
}

hr {
  display: block;
  width: 70%;
  height: 2px;
  background-color: #a7a062;
  margin: 15px auto 10px;
  border: none;
}

prime:after {
  content: '';
  background-image: url('icons/2497.webp');
  background-size: cover;
  display: inline-block;
  height: 1em;
  width: 1em;
  margin-left: 0.2em;
}

fiz {
  color: orangered;
}

fiz:after {
  content: '';
  background-image: url('icons/2602.webp');
  background-size: cover;
  display: inline-block;
  height: 1em;
  width: 1em;
  margin-left: 0.2em;
}

speedtal:after {
  content: '';
  background-image: url('icons/cooldown.webp');
  background-size: cover;
  display: inline-block;
  height: 1em;
  width: 1em;
  margin-left: 0.2em;
}

mag {
  color: lightblue;
}

mag:after {
  content: '';
  background-image: url('icons/2599.webp');
  background-size: cover;
  display: inline-block;
  height: 1em;
  width: 1em;
  margin-left: 0.2em;
}

detail {
  color: #a2872a;
}

detail:after {
  content: '';
  background-image: url('icons/detail.webp');
  background-size: cover;
  display: inline-block;
  height: 0.8em;
  width: 0.85em;
  margin-left: 0.2em;
}

mana {
  color: #01f6fa;
}

mana:after {
  content: '';
  background-image: url('icons/mana.webp');
  background-size: cover;
  display: inline-block;
  height: 0.8em;
  width: 0.85em;
  margin-left: 0.2em;
}

lifecost {
  color: #f80201;
}

lifecost:after {
  content: '';
  background-image: url('icons/lifecost.webp');
  background-size: cover;
  display: inline-block;
  height: 0.8em;
  width: 0.85em;
  margin-left: 0.2em;
}

CD {
  color: #e3d0d4;
}

CD:after {
  content: '';
  background-image: url('icons/cooldown.webp');
  background-size: cover;
  display: inline-block;
  height: 0.8em;
  width: 0.85em;
  margin-left: 0.2em;
}

bloodlust {
  color: #d80e00;
}

bloodlust:after {
  content: '';
  background-image: url('icons/bloodlust.webp');
  background-size: cover;
  display: inline-block;
  height: 0.8em;
  width: 0.85em;
  margin-left: 0.2em;
}

Shadow {
  color: #e967f5;
}

Shadow:after {
  content: '';
  background-image: url('icons/Shadow.webp');
  background-size: cover;
  display: inline-block;
  height: 0.8em;
  width: 0.85em;
  margin-left: 0.2em;
}

select option {
  color: #fff;
  background-color: #252525;
}

.login_box {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  height: 100cqh;
}

.login-box-forma {
  display: flex;
  height: 80cqh;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
}

.login-box-forma-right {
  display: flex;
  flex-flow: column nowrap;
  margin-left: 3vw;
}

.login-box-forma img {
  width: 15cqw;
}

.login-box-forma-logo {
  width: 100%;
}

.login-box-form-invite-text {
  font: 0.9vw / 1 'DejaVuSans', sans-serif;
  color: rgba(255, 255, 255, 0.8);
  font-style: italic;
  margin-bottom: 1vh;
  text-align: center;
}

.login-box-forma-inputs {
  display: flex;
  flex-direction: column;
  background-image: url(img/main.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding-top: 8vh;
  /*width:20cqw;*/
}

input::placeholder {
  color: rgba(0, 0, 0, 0.3);
}

.login-box-forma-inputs select {
  background-image: url(img/button.png);
  background-size: 98% 98%;
  background-repeat: no-repeat;
  background-color: transparent;
  padding: 1.5vmin 0;
  color: #fff;
}

.login-box-forma-inputs input {
  background: rgba(255, 255, 255, 0.5);
  color: rgba(0, 0, 0, 0.9);
}

.login-box-forma-inputs input,
.login-box-forma-inputs select {
  transition: all 0.3s ease-out;
  width: auto;
  /*padding: 1vmin 0;*/
  margin-left: 4%;
  margin-right: 4%;
  margin-bottom: 2vh;
  font: 1.5rem / 1 'DejaVuSans', sans-serif;
  border: none;
  border-radius: 5vh;
  text-align: center;
}

.login-box-forma-inputs input:hover {
  background: rgba(255, 255, 255, 0.8);
}

.login-box-forma-buttons {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
}

.login-box-forma-buttons select {
  width: 100%;
}

.login-box-forma-buttons div {
  margin-right: 2cqh;
  margin-left: 2cqh;
  margin-bottom: 2cqh;
}

.login-box-forma-button {
  flex-grow: 1;
  transition: all 0.3s ease-out;
  background-image: url(img/button.png);
  background-size: 98% 98%;
  background-repeat: no-repeat;
  background-color: transparent;
  padding: 2vmin 2vmin;
  /*border-radius:50px;*/
  font: 1.3rem / 0.5 'DejaVuSans', sans-serif;
  text-align: center;
  /*background:rgba(255,255,255,0.2);*/
  color: #fff;
}

.login-box-forma-button:hover,
.login-box-forma-inputs select:hover {
  /*background:rgba(255,255,255,0.5);*/
  background-image: url(img/button1.png);
  background-size: 98% 98%;
  background-repeat: no-repeat;
  background-color: transparent;
  transform: scale(1.02);
}

.language-select-container {
  position: absolute;
  top: 10.5vh;
  right: 10.5vh;
}

.language-select-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(img/button2.png);
  background-size: 98%;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 0.3s ease;
}

.language-select-container:hover::before {
  background-image: url(img/button2.png);
  background-size: 100%;
}

.language-select-container select {
  padding: 0.7vh 3.5vh 0.5vh 1.8vh;
  border-radius: 1vh;
  background-color: transparent;
  color: white;
  cursor: var(--cursor-pointer);
  font-size: 1.8vh;
  transition: all 0.3s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.2vh center;
  background-size: 2vh;
  position: relative;
  z-index: 1;
}

.language-select-container select:hover {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
}

.language-select-container select:focus {
  outline: none;
}

.language-select-container select option {
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
}

.main,
.main-vertical,
.main-black {
  width: 100cqw;
  height: 100cqh;
}

.main,
.main-vertical {
  background-color: rgba(0, 0, 0, 0.2);
}

.main-vertical {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

.main-black {
  background-color: rgba(15, 15, 15, 0.7);
}

.main-header,
.main-body,
.main-body-full,
.main-footer,
.build {
  display: flex;
  flex-flow: row;
}

.main-body-column {
  display: flex;
  flex-flow: column nowrap;
}

.main-header {
  align-items: center;
  text-align: center;
  height: 15cqh;
  justify-content: space-evenly;
}

.main-header img {
  height: 15cqh;
}

.main-header-item,
.game-button {
  color: rgba(255, 255, 255, 0.5);
  text-shadow: rgba(0, 0, 0, 0.3) 0 0 1cqh;
  font: 3cqh / 1 'DejaVuSans', sans-serif;
  text-align: center;
  transition: all 0.3s ease-out;
  padding: 0.8cqh 1cqw;
  border-radius: 1cqh;
  box-shadow: 0 0 2cqh rgba(0, 0, 0, 0.3);
}

.main-header-item:hover,
.game-button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

.avatar {
  position: relative;
  width: 30cqmin;
  height: 30cqmin;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  justify-self: center;
  container-type: size;
}

.build-hero-stats-view {
  display: flex;
  flex-flow: column nowrap;
  font: 4cqw / 1 'DejaVuSans', sans-serif;
  container-type: inline-size;
  width: 100cqmin;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 10cqh;
  left: 2cqh;
}

.build-hero-stats-line {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  border-radius: 2cqh;
  background-image: linear-gradient(
    to bottom,
    rgba(4, 32, 42, 0.3),
    rgba(18, 69, 73, 0.6),
    rgba(21, 51, 59, 0.5),
    rgba(18, 69, 73, 0.6),
    rgba(4, 32, 42, 0.3)
  );
  border: 0.01cqh solid rgba(104, 158, 154, 0.4);
  margin-top: 0.2cqh;
  font-weight: 600;
  container-type: inline-size;
  width: 90cqw;
  height: calc(min(5cqh, 9cqw));
  font-size: calc(min(3cqh, 5.8cqw));
}

.build-hero-stats-settings {
  margin-top: 1cqh;
  display: flex;
  position: absolute;
  top: -10cqh;
  left: 107.5cqw;
}

/* Счётчик подсветки по стат-фильтру (рядом с кнопкой земли); на мобильной скрыт в @media ниже */
.build-hero-stats-highlight-count {
  display: flex;
  position: absolute;
  top: 1cqh;
  left: 107.5cqw;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  z-index: 10000;
}

.build-hero-stats-highlight-count-badge {
  box-sizing: border-box;
  min-width: calc(min(10cqh, 20cqw));
  height: calc(min(10cqh, 20cqw));
  padding: 0 calc(min(0.7cqh, 1.4cqw));
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* чуть темнее основного градиента #wbuild (середина ~ rgba(21,51,59)) */
  background: rgba(4, 32, 42, 0.82);
  box-shadow: inset 0 0 0 0.08cqh rgba(0, 0, 0, 0.35);
  pointer-events: auto;
}

.build-hero-stats-highlight-count-value {
  font-weight: 700;
  font-size: calc(min(3.6cqh, 6.8cqw));
  line-height: 1;
  color: rgba(232, 248, 248, 0.95);
  text-shadow: 0 0 0.12cqh rgba(0, 0, 0, 0.75);
  pointer-events: auto;
}

.build-hero-stats-highlight-count[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 1.2cqh);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 0.85cqh 1cqw;
  border-radius: 1.5cqh;
  background: rgba(0, 0, 0, 0.72);
  border: 0.01cqh solid rgba(104, 158, 154, 0.4);
  color: rgba(232, 248, 248, 0.95);
  font-weight: 600;
  font-size: calc(min(2.4cqh, 4.8cqw));
  z-index: 10001;
  pointer-events: none;
  text-shadow: 0 0 0.1cqh rgba(0, 0, 0, 0.8);
}

.build-hero-stats-setting-land-type {
  width: calc(min(10cqh, 20cqw));
  height: calc(min(10cqh, 20cqw));
  background-size: contain;
}

.build-hero-stats-setting-land-type-rz {
  background-image: url('talents/22.webp');
}

.build-hero-stats-setting-land-type-vz {
  background-image: url('talents/21.webp');
}

/*.build-hero-stats-line:nth-child(n+10) {
}

.build-hero-stats-line:nth-last-child(-n+3) {
	box-shadow: 0 0 2cqmin rgba(200,200,200,0.2);
	cursor: var(--cursor-pointer);
	border: 0;
}

.build-hero-stats-line .wrapper {
	position: absolute;
	border: 0.5cqmin solid #000;
	color: #fff;
	background: #333b;
	cursor: var(--cursor-pointer);
}

.build-hero-stats-line .wrapper div {
	padding: 0.5cqh;
}

.build-hero-stats-line .wrapper .home.highlight {
	background: rgb(154, 205, 50);
}

.build-hero-stats-line .wrapper .enemy.highlight {
	background: red;
}

.build-hero-stats-line .noNumber div:last-child {
	display: none;
}*/

.build-hero-stats-item {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  text-shadow: 0 0 0.1cqh rgba(25, 25, 25, 0.9);
  padding: calc(min(1cqh, 2cqw));
  border-radius: 2cqh;
  box-shadow: 0 0 2cqh rgba(0, 0, 0, 0.3);
  flex-grow: 1;
}

.build-hero-stats-item.passive {
  box-shadow: none;
}

.build-hero-stats-item.passive:hover {
  background: none;
}

.build-hero-stats-item.highlight {
  background: #2a6d3d !important;
}

.build-hero-stats-daw {
  width: calc(min(4cqh, 8cqw));
  height: calc(min(4cqh, 8cqw));
  padding: 0.1cqh;
  border-radius: 50%;
  margin-right: 0.1cqh;
}

.build-hero-stats-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.build-hero-stats-item div:first-child {
  margin-left: 1cqw;
  color: #fff;
  font-family: 'DejaVuSans', sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: 'wdth' 100;
}

.build-hero-stats-item div:last-child {
  font-family: 'DejaVuSans', sans-serif;
  color: #ffe9c1;
  margin-right: 1cqw;
}

/* Базовый стиль кнопки закрытия */
.close-button {
  position: absolute;
  top: 0;
  right: 0;
  width: 5vh;
  height: 5vh;
  background-image: url('content/icons/close-cropped.svg');
  background-repeat: no-repeat;
  background-position: center;
  cursor: var(--cursor-pointer);
  opacity: 1;
  transition: all 0.3s ease;
  border: none;
  background-color: transparent;
  z-index: 10;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transform: translate(50%, -40%); /* Сдвигаем кнопку на половину её ширины/высоты */
}

/* Альтернативный вариант - увеличение всей кнопки */
.close-button:hover {
  opacity: 1;
  transform: translate(50%, -40%) scale(1.1);
}

/* help button */
.help-button {
  position: absolute;
  container: help / size;
  top: 0;
  right: 4.4vh;
  width: 3vh;
  height: 3vh;
  cursor: var(--cursor-pointer);
  border: none;
  padding: 0;
  margin: 0;
  background: #ffdb32; /* fallback */
  background: linear-gradient(180deg, rgba(255, 219, 50, 1) 0%, rgba(212, 139, 0, 1) 100%);
  border: 0.3vh solid rgb(208, 180, 96);
  border-radius: 50%;
  box-shadow:
    0 0 0 0.25cqh rgba(0, 0, 0, 0.2) inset,
    0 0 0 0.25cqh rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center;
  transform: translate(50%, -40%);
  transition: all 0.2s ease;
  z-index: 9999;
}

.help-button:hover {
  transform: translate(50%, -40%) scale(1.1);
}

.help-button::before {
  position: absolute;
  inset: 10cqh;
  content: '';
  background-image: url('icons/help.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  user-select: none;
  pointer-events: none;
}

.splash-content:has(.splash-help) {
  aspect-ratio: 16 / 9;
  width: calc(min(50cqw, 1000px));
}

.splash-help{
  display: flex;
  flex-direction: column;
  font-size: 2.25cqmax;
  height: 100%;
  padding: 5cqmin 5cqmin 0cqmin 5cqmin;
}

.splash-help-container {
  flex: 1;
  text-align: left;
  scrollbar-width: auto;
  padding-right: 1cqh;
  overflow-y: auto;
  max-height: 45cqh;
}

.splash-help-container::-webkit-scrollbar {
  width: 1cqh;
}

.splash-help-container::-webkit-scrollbar-track {
  background: rgba(20, 35, 42, 0.6);
  border-radius: 1cqh;
}

.splash-help-container::-webkit-scrollbar-thumb {
  background: rgba(90, 160, 200, 0.9);
  border-radius: 1cqh;
  border: 0.25cqh solid rgba(20, 35, 42, 0.6); 
}

.splash-help-container::-webkit-scrollbar-thumb:hover {
  background: rgba(110, 185, 230, 1);
}

.splash-help-paragraph {
  margin: 2cqh 0;
}


.splash-help-img{
  display: block;
  width: 80%;
  height: auto;
  margin: 0 auto;
}

.close-image-style {
  width: 5vh !important;
  height: 5vh !important;
}

.build-active-bar-hint {
  width: 100cqw;
  font-size: 1.5cqmin;
  font-family: 'DejaVuSans', sans-serif;
  color: rgb(255 255 255 / 50%);
  position: absolute;
  bottom: -7cqh;
}

button.build-action-item {
  background-color: transparent;
  background-size: 30cqmin;
  background-repeat: no-repeat;
  width: 17cqmin;
  height: 17cqmin;
  border-width: 0;
  margin: 1cqmin;
  padding: 1cqmin;
  box-shadow: 0 0 2cqmin rgba(0, 0, 0, 0.3);
  container-type: inline-size;
  display: flex;
  align-items: center;
}

button.build-action-item:hover {
  transform: scale(1.06);
  filter: brightness(1.1);
}

button.build-action-item.build-action-item-active {
  transform: scale(1.06);
  filter: brightness(1.12);
}

.build-action-item-background {
  width: 100cqw;
  height: 100cqw;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: filter 0.16s ease, transform 0.16s ease;
}

.build-action-item:hover .build-action-item-background,
.build-action-item:hover .btn-duplicate {
  filter: brightness(1.14) drop-shadow(0 0 0.35cqh rgba(255, 255, 255, 0.3));
}

button.build-action-item.build-action-item-active .build-action-item-background,
button.build-action-item.build-action-item-active .btn-duplicate {
  filter: brightness(1.2) saturate(1.1) drop-shadow(0 0 0.5cqh rgba(255, 255, 255, 0.4));
}

button.build-action-item.btn-hover.color-1.build-action-item-disabled .build-action-item-background,
button.build-action-item.btn-hover.color-1.build-action-item-disabled .btn-duplicate {
  filter: grayscale(1) brightness(0.72);
}

button.build-action-item.build-action-item-disabled:hover {
  transform: none;
  filter: none;
}

/* Recreated action buttons: only icon, no legacy frame/background effects. */
button.build-action-item.btn-hover.color-1 {
  background: transparent;
  background-image: none;
  box-shadow: none;
  border: 0;
  padding: 0;
}

button.build-action-item.btn-hover.color-1 .build-action-item-background,
button.build-action-item.btn-hover.color-1 .btn-duplicate {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: none;
  opacity: 1;
}

button.build-action-item.btn-hover.color-1 .btn-duplicate {
  position: static;
  transform: none;
}

.btn-create {
  background-position: 0cqw 0;
}

.btn-random {
  background-position: 8cqw 0;
}

.btn-trash {
  background-position: 0cqw 0;
}

.btn-combat-mode {
  position: relative;
  background-image: url('img/buttonColor.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  overflow: hidden;
}

.btn-combat-mode-count {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);
  color: rgb(175 170 104 / 98%);
  font: 600 3.8cqh / 1 'DejaVuSans', sans-serif;
  text-shadow: 0 0.25cqh 0.35cqh rgba(0, 0, 0, 0.72);
  pointer-events: none;
  z-index: 2;
}

.btn-combat-mode-count.btn-combat-mode-count-raw {
  width: 7.2cqh;
  height: 4.6cqh;
  transform: translate(-50%, -50%);
  background: url('img/combatModeRaw.png') center/contain no-repeat;
}

.btn-sort-sets-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7.2cqh;
  height: 4.6cqh;
  transform: translate(-50%, -50%);
  background: url('img/sortModeRaw.png') center/contain no-repeat;
  pointer-events: none;
  z-index: 2;
}

.btn-combat-mode-glass {
  position: absolute;
  inset: 0;
  background: url('img/buttonGlass.png') center/contain no-repeat;
  pointer-events: none;
  z-index: 3;
}

/* On hover/active global button filter changes text rasterization; keep combat-mode number stable */

.buttons-talents-and-sets {
  display: none;
  justify-content: center;
}

.btn-separator {
  color: #dfdfdf;
  font-size: 8cqmin;
  line-height: 8cqmin;
  align-self: center;
}

.btn-skins,
.btn-talents,
.btn-sets {
  width: 30cqmin;
  height: 8cqmin;
  font-weight: bold;
  font-size: 4cqmin;
  color: white;
  margin: 1cqh;
  border-radius: 4cqmin;
  background-size: 300% 100%;
  border-width: 0;
}

.button-build--wrapper {
  height: 5cqh;
}

.build-tab-item {
  border-top-left-radius: 1cqh !important;
  border-top-right-radius: 1cqh !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border: 0;
  padding: 0 2cqh;
  width: auto;
  height: 4cqh;
  font-size: 2cqh;
  overflow: hidden;
  position: relative;
  bottom: 0cqh;
  color: #fff;
  text-align: center;
}

.build-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
  max-width: 70cqw;
}

.build-list::-webkit-scrollbar {
  background-color: rgba(0, 51, 0, 0.479);
  height: 0.7cqh;
}

.build-list::-webkit-scrollbar-thumb {
  background-color: rgb(255, 255, 255);
}

.build-action-item {
  font-family: 'DejaVuSans', sans-serif;
  border-radius: 3cqh;
  box-shadow: 0 0 1cqh rgba(0, 0, 0, 0.3);
}

.build-play {
  background: rgba(255, 50, 0, 0.9);
  font: 2rem / 1 'DejaVuSans', sans-serif;
  color: rgba(255, 255, 255, 0.9);
  padding: 15px 20px;
  border-radius: 75px;
  text-shadow: 0 0 5px rgba(15, 15, 15, 0.5);
}

.button-play {
  font: 3cqh / 1 'DejaVuSans', sans-serif;
  background: rgba(255, 50, 0, 0.9);
  color: rgba(255, 255, 255, 0.9);
}

.build-level {
  container-type: inline-size;
  position: absolute;
  display: flex;
  flex-flow: column nowrap;
  font: 3cqh / 1 'DejaVuSans', sans-serif;
  color: #fff;
  font-weight: 800;
}

.build-level div {
  margin-left: calc(-100cqw / 6);
  width: calc(100cqw / 6);
  height: calc(100cqw / 6);
  text-align: center;
  line-height: calc(100cqw / 6);
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: scale(0.7);
  box-shadow: 0 0 2cqh rgba(25, 25, 25, 0.5);
}

.build-level,
.build-field {
  width: 70cqmin;
  height: 70cqmin;
}

.build-field {
  container-type: inline-size;
  display: flex;
  flex-flow: row wrap;
  border-radius: 2cqh;
  background: #fff2;
}

.build-field-row {
  width: 100cqw;
  height: calc(100cqw / 6);
  container-type: size;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

.build-level div.highlight {
  background: rgb(57, 166, 166) !important;
}

.build-field-row.highlight {
  background: #4789;
}

.build-hero-grid-item {
  width: 100cqh;
  height: 100cqh;
  container-type: size;
  position: relative;
  overflow: hidden;
}

.build-hero-grid-item .build-talent-item {
  background-size: 80cqw;
}

.build-talent-item-container {
  background-size: 100%;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  container-type: size;
  margin: 0;
  box-sizing: border-box;
}

.build-talent-item {
  width: 100cqw;
  height: 100cqw;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: relative; /* Изменено с static на relative */
  isolation: isolate;
  border-radius: 22%;
  overflow: hidden;
  transform-origin: center; /* Масштабирование от центра */
  will-change: transform; /* Оптимизация анимации */
}

.build-talent-item.build-combat-locked {
  filter: grayscale(0.9) brightness(0.7);
}

/* Combat mode readability: learned talents are slightly brighter than unlearned ones */
.build-field.build-combat-mode-on .build-talent-item.build-combat-learned {
  filter: saturate(1.36) brightness(1.52);
}

.build-field.build-combat-mode-on .build-talent-item.build-combat-learned::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 22%;
  background: rgba(0, 0, 0, 0.28);
  pointer-events: none;
  z-index: 1;
}

.build-field.build-combat-mode-on .build-talent-item:not(.build-combat-learned):not(.build-combat-locked) {
  filter: saturate(0.92) brightness(0.9);
}

@keyframes buildCombatSurroundedBlinkPulse {
  0%,
  86%,
  100% {
    transform: scale(1);
  }
  91% {
    transform: scale(0.9);
  }
  96% {
    transform: scale(1.06);
  }
}

.build-field.build-combat-mode-on .build-talent-item.build-combat-surrounded-blink {
  animation: buildCombatSurroundedBlinkPulse 3s ease-in-out infinite;
}

.build-talent-item .build-combat-order-badge {
  position: absolute;
  right: 6cqw;
  bottom: 6cqw;
  min-width: 22cqw;
  height: 26cqw;
  padding: 0 4cqw;
  border-radius: 6cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c2c786b8;
  font: 21cqw / 1 'DejaVuSans', sans-serif;
  font-weight: 700;
  text-shadow: 0 0 1.2cqw rgba(0, 0, 0, 0.9);
  background: linear-gradient(178deg, rgb(17 86 118 / 65%), rgb(12 54 76 / 65%));
  box-shadow: 0 0 1cqw rgba(0, 0, 0, 0.55);
  pointer-events: none;
  z-index: 1200;
}

@keyframes buildSetEmptySlotPreviewBlink {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

.build-hero-grid-item.build-set-empty-slot-preview {
  border-radius: 22%;
  background-repeat: no-repeat;
  background-position: center;
  /* Slightly smaller than the full slot (match actual .build-talent-item look) */
  background-size: 86% 86%;
  opacity: 0.35;
  transition: opacity 0.18s linear;
}

.build-hero-grid-item.build-set-empty-slot-preview::before {
  content: '';
  position: absolute;
  inset: 5%;
  border-radius: 22%;
  pointer-events: none;
  z-index: 2;
  border: 0.42cqh solid rgba(80, 190, 255, 0.55);
  box-shadow:
    inset 0 0 1.6cqh rgba(80, 190, 255, 0.22),
    inset 0 0 0.6cqh rgba(80, 190, 255, 0.2),
    0 0 1.2cqh rgba(80, 190, 255, 0.18);
  opacity: 0.35;
  transition: opacity 0.18s linear;
}

.build-hero-grid-item.build-talent-empty-slot-preview {
  border-radius: 22%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 86% 86%;
  opacity: 0.35;
  transition: opacity 0.18s linear;
}

.build-field.build-preview-blink-on .build-hero-grid-item.build-set-empty-slot-preview,
.build-field.build-preview-blink-on .build-hero-grid-item.build-talent-empty-slot-preview {
  opacity: 1;
}

.build-field.build-preview-blink-on .build-hero-grid-item.build-set-empty-slot-preview::before {
  opacity: 1;
}

.build-talent-item.dragging {
  transform: scale(1.1);
  transform-origin: center center;
  transition: transform 0.1s ease-out;
  z-index: 9999 ;
  position: absolute;
}

.build-talent-item-container .build-talent-item[data-active='1']:after,
.build-rarity-other:after,
.build-hero-grid-item .build-talent-item[data-active='1']:after {
  content: '';
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 22%;
  pointer-events: none;
  z-index: 999;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 86% 86%;
  background-image: url('icons/activeBorder.webp');
}

.build-rarity-other:after {
  content: none;
}

.build-talent-view {
  overflow: hidden;
  container-type: size;
  width: 120cqw;
  border-radius: 2cqh;
  height: 88cqh;
  align-self: end;
  margin-top: 0cqh;
  display: flex;
  flex-direction: column;
  gap: 1cqh;
}

.build-list-settings {
  position: absolute;
  top: 6.8cqh;
  right: 0;
  width: 4.4cqh;
  height: 4.4cqh;
  border-radius: 50%;
  border: none;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  cursor: var(--cursor-pointer);
  z-index: 10;
  background-color: #9d1818d1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain, cover;
  background-image: url('icons/settings.png'), url('img/queue/321.png');
  transform: translate(50%, -40%);
  color: rgba(255, 255, 255, 0.9);
  font: 1.8cqh / 1 'DejaVuSans', sans-serif;
}

.build-list-settings:hover {
  transform: translate(50%, -40%) scale(1.06);
}

.build-settings-panel {
  position: absolute;
  left: calc(100% + 1.2cqh);
  top: 10.6cqh;
  width: 20cqh;
  min-height: 17cqh;
  container-type: inline-size;
  border-radius: 2cqh;
  border: 0.15cqh solid rgb(158, 155, 104);
  background-image: linear-gradient(
    to bottom,
    rgba(4, 32, 42, 0.9),
    rgba(18, 69, 73, 0.85),
    rgba(21, 51, 59, 0.8),
    rgba(18, 69, 73, 0.85),
    rgba(4, 32, 42, 0.9)
  );
  padding: 1cqh 1.2cqh;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  gap: 0.15cqh;
  z-index: 45;
}

.build-settings-panel .castle-menu-slider {
  height: 1.05cqh;
}

.build-settings-panel .castle-menu-slider::-webkit-slider-runnable-track {
  height: 1.05cqh;
}

.build-settings-panel .castle-menu-slider::-moz-range-progress {
  height: 1.05cqh;
}

.build-settings-panel .castle-menu-slider::-moz-range-track {
  height: 1.05cqh;
}

.build-settings-panel .castle-menu-slider::-webkit-slider-thumb {
  width: 1.35cqh;
  height: 1.35cqh;
  margin-top: -0.15cqh;
}

.build-settings-panel .castle-menu-slider::-moz-range-thumb {
  width: 1.35cqh;
  height: 1.35cqh;
}

.build-settings-title {
  color: rgba(255, 255, 255, 0.95);
  font: 2cqh / 1.1 'DejaVuSans', sans-serif;
  text-align: center;
  margin-bottom: 0.3cqh;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  padding-bottom: 0.65cqh;
}

.build-settings-title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 75%;
  height: 0.12cqh;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(190, 214, 240, 0.08) 0%,
    rgba(210, 228, 248, 0.52) 50%,
    rgba(190, 214, 240, 0.08) 100%
  );
}

.build-settings-row-label {
  color: rgba(255, 255, 255, 0.85);
  font: 1.4cqh / 1.1 'DejaVuSans', sans-serif;
  text-align: center;
  margin-top: 0.6cqh;
  margin-bottom: -0.6cqh;
}

.build-settings-row-value {
  color: rgba(200, 220, 255, 0.9);
  font: 1.2cqh / 1.1 'DejaVuSans', sans-serif;
  text-align: center;
  margin-bottom: 0.2cqh;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  padding-bottom: 0.55cqh;
}

.build-settings-row-value::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 75%;
  height: 0.1cqh;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(177, 203, 232, 0.07) 0%,
    rgba(199, 220, 243, 0.44) 50%,
    rgba(177, 203, 232, 0.07) 100%
  );
}

.build-settings-panel .build-settings-row-value:last-of-type::after {
  display: none;
}

.build-settings-mode-dots {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.4cqh 0 -0.25cqh;
  padding: 0.1px 0.4cqh;
}

.build-settings-mode-dots::before {
  content: '';
  position: absolute;
  left: 1cqh;
  right: 1cqh;
  top: 50%;
  height: 0.18cqh;
  border-radius: 1cqh;
  background: linear-gradient(90deg, rgba(122, 159, 193, 0.8), rgba(174, 204, 234, 0.9), rgba(122, 159, 193, 0.8));
  transform: translateY(-50%);
}

.build-settings-mode-dot {
  position: relative;
  z-index: 1;
  width: 2.9cqh;
  height: 2.9cqh;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  border-radius: 50%;
  overflow: hidden;
  background-color: rgba(7, 34, 44, 0.96);
  background-image: url('icons/circle.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  box-shadow: 0 0 0.35cqh rgba(35, 65, 92, 0.9);
  padding: 0;
  cursor: var(--cursor-pointer);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.build-settings-mode-dot:hover {
  transform: scale(1.1);
  box-shadow: 0 0 0.6cqh rgba(130, 199, 255, 0.95);
}

.build-settings-mode-dot-active {
  background-image: url('icons/checkbox.webp');
  box-shadow: 0 0 0.9cqh rgba(22, 251, 103, 0.95);
}

.build-settings-slider-short {
  width: 100%;
}

.build-settings-hl-block {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5cqh;
  width: 100%;
  margin-top: 0.35cqh;
  box-sizing: border-box;
}

.build-settings-hl-sliders {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15cqh;
  position: relative;
  left: 0.6cqh;
}

.build-settings-hl-line-label {
  color: rgba(255, 255, 255, 0.78);
  font: 1.15cqh / 1.1 'DejaVuSans', sans-serif;
  text-align: left;
  user-select: none;
}

.build-settings-hl-hue-track,
.build-settings-hl-mm-track {
  position: relative;
  width: 93.6%;
  height: 1.1cqh;
  border-radius: 0.55cqh;
  box-sizing: border-box;
  border: 0.1cqh solid rgba(0, 0, 0, 0.35);
  cursor: var(--cursor-pointer);
  touch-action: none;
}

.build-settings-hl-hue-track {
  background: linear-gradient(
    90deg,
    hsl(0, 95%, 54%),
    hsl(45, 95%, 52%),
    hsl(90, 85%, 48%),
    hsl(135, 85%, 48%),
    hsl(180, 85%, 50%),
    hsl(225, 95%, 58%),
    hsl(270, 85%, 58%),
    hsl(315, 90%, 56%),
    hsl(360, 95%, 54%)
  );
}

.build-settings-hl-mm-track {
  background: linear-gradient(90deg, rgba(100, 100, 110, 0.5), rgba(210, 230, 248, 0.75));
}

.build-settings-hl-thumb {
  position: absolute;
  top: 50%;
  width: 0.35cqh;
  height: 130%;
  min-height: 9px;
  margin: 0;
  padding: 0;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 0 0.2cqh rgba(0, 0, 0, 0.85),
    0 0 0.4cqh rgba(255, 255, 255, 0.35);
  transform: translate(-50%, -50%);
  left: 0;
  pointer-events: none;
}

.build-settings-hl-reset {
  flex-shrink: 0;
  width: 2.6cqh;
  height: 2.6cqh;
  min-width: 3cqh;
  min-height: 3cqh;
  padding: 0px;
  margin: 0px;
  align-self: center;
  border-radius: 0.4cqh;
  border: 0.12cqh solid rgba(158, 155, 104, 0.9);
  background: rgba(12, 40, 48, 0.95);
  color: rgba(220, 235, 255, 0.95);
  font: bold 2.5cqh / 1 'DejaVuSans', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  position: relative;
  top: 0.6cqh;
}

.build-settings-hl-reset:hover {
  filter: brightness(1.12);
}

.build-alt-reset-hint {
  color: rgb(255 255 255 / 50%);
  font: 1.25cqh / 1.2 'DejaVuSans', sans-serif;
  text-align: center;
  user-select: none;
  margin: 0.35cqh 0 0;
  padding: 0 0.8cqh;
  margin-left: -34cqh;
}

.build-inventory-fieldset {
  width: 98cqw;
  background: #33333352;
  box-sizing: border-box;
  overflow: hidden;
  border: 0.35cqh solid rgba(255, 255, 255, 0.18);
  border-radius: 2.2cqh;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  /* remove default fieldset gap */
  min-width: 0;
}

.build-inventory-legend {
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: rgba(0, 0, 0, 1) 0 0 4cqh;
  font: 3cqh / 1 'DejaVuSans', sans-serif;
  padding: 0.25cqh 1.4cqh 0.1cqh;
  user-select: none;
}

.build-talents-section {
  flex: 3;
  margin-top: 3cqh;
}

.build-sets-section {
  flex: 1.3;
  margin-top: -1cqh;
  border-radius: 1.8cqh;
}

/* Alternate inventory layout (row) */
.build-talent-view.build-talent-view--row {
  flex-direction: row;
  margin-right: 1cqh;
}

.build-talent-view.build-talent-view--row .build-inventory-fieldset {
  width: auto;
  min-width: 0;
}

.build-talent-view.build-talent-view--row .build-talents-section {
  flex: 4;
  margin-top: 3cqh;
}

.build-talent-view.build-talent-view--row .build-sets-section {
  flex: 3;
  margin-top: 3cqh;
  border-radius: 1.8cqh;
}

.build-talent-view.build-talent-view--row .build-talents {
  grid-template-columns: repeat(4, 1fr);
}

.build-talent-view.build-talent-view--row .build-sets {
  grid-template-columns: repeat(3, 1fr);
}

/* Build settings: alternate inventory layout (row) */
.build-talent-view.build-talent-view--row {
  flex-direction: row;
  margin-right: 1cqh;
}

.build-talent-view.build-talent-view--row .build-inventory-fieldset {
  width: auto;
  min-width: 0;
}

.build-talent-view.build-talent-view--row .build-talents-section {
  flex: 4;
  margin-top: 3cqh;
}

.build-talent-view.build-talent-view--row .build-sets-section {
  flex: 3;
  margin-top: 3cqh;
}

.build-talent-view.build-talent-view--row .build-talents {
  grid-template-columns: repeat(4, 1fr);
}

.build-talent-view.build-talent-view--row .build-sets {
  grid-template-columns: repeat(3, 1fr);
}

.build-talents {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.6cqh;
  overflow-y: scroll;
  overflow-x: hidden;
  width: 100%;
  flex: 1;
  min-height: 0;
  height: auto;
  background: transparent;
  justify-content: start;
  align-content: flex-start;
  padding: 0.6cqh;
  box-sizing: border-box;
  border: none;
  border-radius: 0;
  margin-top: 0;
}

.build-ui-updating {
  visibility: hidden;
}

.build-sets {
  overflow-y: scroll;
  overflow-x: hidden;
  width: 100%;
  background: transparent;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-content: flex-start;
  justify-content: flex-start;
  padding: 0.6cqh;
  gap: 0.6cqh;
  box-sizing: border-box;
  border: none;
  border-radius: 0;
  margin-top: 0;
  flex: 1;
  min-height: 0;
}

.build-set-item {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 0.8cqh;
  background-size: cover;
  background-position: center;
  box-shadow: none;
  border: 0.25cqh solid rgb(205 154 154 / 22%);
  background-repeat: no-repeat;
  box-sizing: border-box;
}

.build-set-item:hover {
  border-color: rgba(255, 255, 255, 0.35);
}

.build-set-item.build-set-item-selected {
  border-color: rgba(255, 240, 138, 0.95);
  box-shadow: 0 0 0.7cqh rgba(255, 224, 116, 0.75);
}

.build-set-item.build-stat-filter-hover-set {
  border-width: calc(var(--build-hl-border-mm) * 1.2);
  border-color: hsl(var(--build-hl-h) 100% 68% / 0.95);
  box-shadow:
    inset 0 0 0 calc(var(--build-hl-border-mm) * 0.9) hsl(var(--build-hl-h) 100% 68% / 0.45),
    0 0 calc(var(--build-hl-border-mm) * 6.5) hsl(var(--build-hl-h) 100% 68% / 0.5);
}

.build-set-desc-icons {
  margin-top: 0.6cqh;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6cqh;
}

.build-set-desc-hints {
  margin-top: 0.8cqh;
  opacity: 0.9;
}

.build-set-desc-hints div {
  font-size: 1.2cqh;
  line-height: 1.3;
}

.build-set-desc-icon {
  width: 4cqh;
  height: 4cqh;
  border-radius: 0.6cqh;
}

.build-set-desc-icon.is-in-build {
  filter: grayscale(100%);
  opacity: 0.75;
}

@keyframes buildSetPulse {
  0% {
    opacity: 0.55;
    box-shadow:
      inset 0 0 0 calc(var(--build-hl-border-mm) * 1.31) hsl(var(--build-hl-h) 100% 66% / 0.55),
      inset 0 0 1.8cqh hsl(var(--build-hl-h) 100% 66% / 0.22),
      0 0 1.4cqh hsl(var(--build-hl-h) 100% 66% / 0.22);
  }
  50% {
    opacity: 1;
    box-shadow:
      inset 0 0 0 calc(var(--build-hl-border-mm) * 1.548) hsl(var(--build-hl-h) 100% 66% / 0.75),
      inset 0 0 2.4cqh hsl(var(--build-hl-h) 100% 66% / 0.3),
      0 0 2cqh hsl(var(--build-hl-h) 100% 66% / 0.34);
  }
  100% {
    opacity: 0.55;
    box-shadow:
      inset 0 0 0 calc(var(--build-hl-border-mm) * 1.31) hsl(var(--build-hl-h) 100% 66% / 0.55),
      inset 0 0 1.8cqh hsl(var(--build-hl-h) 100% 66% / 0.22),
      0 0 1.4cqh hsl(var(--build-hl-h) 100% 66% / 0.22);
  }
}

.build-field .build-talent-item.build-set-highlight,
.build-field .build-talent-item.build-stat-filter-hover,
.build-field .build-talent-item.build-highlight-settings-demo {
  outline: none;
  border-radius: inherit;
}

.build-field .build-talent-item.build-set-highlight::before,
.build-field .build-talent-item.build-stat-filter-hover::before,
.build-field .build-talent-item.build-highlight-settings-demo::before {
  content: '';
  position: absolute;
  inset: 5%;
  border-radius: 22%;
  pointer-events: none;
  z-index: 3;
  border: var(--build-hl-border-mm) solid hsl(var(--build-hl-h) 100% 66% / 0.55);
  box-shadow:
    inset 0 0 1.6cqh hsl(var(--build-hl-h) 100% 66% / 0.32),
    inset 0 0 0.6cqh hsl(var(--build-hl-h) 100% 66% / 0.3),
    0 0 1.2cqh hsl(var(--build-hl-h) 100% 66% / 0.24);
  animation: buildSetPulse 1.1s ease-in-out infinite;
}

/* Подсветка талантов в библиотеке при наведении на сет */
.build-talents .build-talent-item.build-set-highlight-lib,
.build-talents .build-talent-item.build-highlight-settings-demo-lib {
  outline: none;
  border-radius: inherit;
  box-shadow: none;
}

.build-talents .build-talent-item.build-set-highlight-lib::before,
.build-talents .build-talent-item.build-highlight-settings-demo-lib::before {
  content: '';
  position: absolute;
  inset: 0.55cqh;
  border-radius: 22%;
  pointer-events: none;
  z-index: 3;
  border: var(--build-hl-border-mm) solid hsl(var(--build-hl-h) 100% 66% / 0.55);
  box-shadow:
    inset 0 0 1.6cqh hsl(var(--build-hl-h) 100% 66% / 0.32),
    inset 0 0 0.6cqh hsl(var(--build-hl-h) 100% 66% / 0.3),
    0 0 1.2cqh hsl(var(--build-hl-h) 100% 66% / 0.24);
  animation: buildSetPulse 1.1s ease-in-out infinite;
}

.build-active-bar-container {
  container-type: inline-size;
  width: 120cqw;
  height: 10cqw;
  display: flex;
  justify-content: center;
  flex-flow: column;
  position: absolute;
  top: 89cqw;
  right: 17cqw;
}

.build-active-bar {
  position: absolute;
  container-type: inline-size;
  width: 100cqw;
  height: 16cqw;
  display: flex;
  justify-content: center;
  align-items: end;
  flex-flow: row wrap-reverse;
}

.build-active-bar-item {
  container-type: inline-size;
  width: calc(60cqw / 10);
  height: calc(60cqw / 10);
  margin-left: 0.5cqw;
  margin-right: 0.5cqw;
  margin-bottom: 1cqh;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 1cqh;
  border: 0.5cqh solid transparent;
  box-shadow: 0 0 1cqh rgba(25, 25, 25, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.build-active-bar-item:not(:empty):after {
  content: '';
  position: absolute;
  width: 1cqh;
  height: 1cqh;
  border-radius: 50%;
  background: gray;
  right: -1cqh;
  bottom: -1cqh;
  border: 0.2cqh solid #000;
}

.build-active-bar-key {
  container-type: inline-size;
  width: calc(60cqw / 10);
  height: calc(60cqw / 10);
  margin-left: 0.5cqw;
  margin-right: 0.5cqw;
  margin-bottom: 1cqh;
  border-radius: 1cqh;
  border: 0.5cqh solid transparent;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  position: relative;
  z-index: 11;
  top: -0.1cqw;
  left: -0.1cqw;
  font-size: 1.4cqw;
  white-space: nowrap;
  color: #ffe9c1;
  pointer-events: none;
  text-shadow: 2px 2px 2px black;
  font-weight: bold;
  font-family: 'DejaVuSans', sans-serif;
}

.build-rarity {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  position: absolute;
  width: 120cqw;
  top: 2cqh;
  right: 0;
}

.build-rarity div {
  width: 8cqw;
  height: 8cqw;
  border-radius: 50%;
  margin: 0 1cqw;
  container-type: size;
}

.build-rarity-other {
  background: rgba(255, 255, 255, 0.1);
  position: relative;
  isolation: isolate;
  text-align: center;
  font-size: 5cqw;
  line-height: auto;
  color: rgba(255, 255, 255, 0.8);
}

.build-description {
  width: auto;
  max-width: 60cqh;
  font: 1.4cqh / 1.3 'DejaVuSans', sans-serif;
  background: rgba(19, 26, 29, 0.933);
  border: .2cqh groove #6db9b95b;
  color: rgba(255, 255, 255, 0.8);
  padding: 1.5cqh 2cqh 1.5cqh 2cqh;
  border-radius: 1.5cqh;
}

.build-description b {
  font: 1.6cqh / 1 'DejaVuSans', sans-serif;
}

.build-description div {
  margin-top: 1cqh;
}

.build-description .build-set-main-desc {
  margin-top: 0;
}

.build-description span {
  display: block;
  font: 1.6cqh / 1 'DejaVuSans', sans-serif;
  color: rgb(107, 199, 71);
  margin-top: 1cqh;
}

.main-body {
  height: 60cqh;
}

.main-body-full,
.main-body-column {
  justify-content: center;
  height: 80cqh;
}

.main-body-item {
  display: flex;
  flex-flow: row nowrap;
  width: 47cqw;
}

.inventory-header {
  margin-top: 2cqh;
  width: 100cqw;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: rgba(0, 0, 0, 1) 0 0 4cqh;
  font: 8cqh / 1 'DejaVuSans', sans-serif;
}

.inventory {
  padding: 3cqh;
  font: 1rem / 1 'DejaVuSans', sans-serif;
  display: flex;
  flex-flow: row wrap;
  width: 100cqw;
  overflow-y: scroll;
  align-content: flex-start;
  justify-content: center;
}

.inventory div {
  width: 10cqh;
  height: 10cqh;
  margin: 1cqh 1cqh 5cqh 1cqh;
  background-size: cover;
  background-position: center;
  position: relative;
}

.inventory span {
  position: relative;
  width: 10cqh;
  text-align: center;
  top: 10cqh;
  color: rgba(255, 255, 255, 0.5);
}

.main-body-item-social {
  width: 23cqw;
  height: 60cqh;
}

.main-body-item-feed {
  height: 60cqh;
}

.feed-item img {
  width: 100%;
  border-radius: 75px;
}

.feed-item div {
  font: 2rem / 1.5 'DejaVuSans', sans-serif;
  color: rgba(255, 255, 255, 0.9);
}

.feed-item div,
.feed-item p {
  margin: 2vmin 3vmin;
}

.feed-item p {
  color: rgba(255, 255, 255, 0.7);
  font: 1.5rem / 1.5 'DejaVuSans', sans-serif;
  font-style: italic;
}

.main-body-item-chat {
  height: 60cqh;
  width: 44cqw;
  background: rgba(0, 0, 0, 0.1);
}

.main-footer {
  align-items: center;
  text-align: center;
  height: 25cqh;
}

.main-footer-download {
  flex-grow: 1;
  background: rgba(255, 255, 255, 0.1);
  padding: 2vmin 2vmin;
  border-radius: 75px;
  font: 1.5rem / 1 'DejaVuSans', sans-serif;
  color: rgba(0, 0, 0, 0.5);
  text-align: center;
}

.author {
  height: 0cqh;
  position: absolute;
  bottom: 0;
  text-shadow: rgb(49 196 190 / 95%) 0 0 5px;
  bottom: 96cqh;
  text-align: center;
  /*margin-bottom:108cqh;*/
  color: rgb(11 125 155 / 75%);
}

.rarity1 {
}

.rarity2 {
  box-shadow:
    0px 0px 2cqh rgba(174, 80, 251, 0.8),
    inset 1cqh 1cqh 1cqh rgba(174, 80, 251, 0.5);
  border-radius: 10cqh;
}

.rarity3 {
  box-shadow:
    0px 0px 2cqh rgba(255, 156, 32, 0.8),
    inset 1cqh 1cqh 1cqh rgba(255, 156, 32, 0.5);
  border-radius: 10cqh;
}

.rarity4 {
  box-shadow:
    0px 0px 2cqh rgba(255, 26, 26, 0.8),
    inset 1cqh 1cqh 1cqh rgba(255, 26, 26, 0.5);
  border-radius: 10cqh;
}

.hero {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: start;
  overflow-y: scroll;
  margin-top: 20px;
}

.hero-item {
  margin: 3cqh 0.3cqw;
  container-type: size;
  width: 14cqh;
  height: 14cqh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-item .name {
  position: absolute;
  top: -10cqh;
  width: 100cqw;
  text-align: center;
  font: 0.9rem / 1 'DejaVuSans', sans-serif;
  color: #fffd;
  text-shadow: rgba(0, 0, 0, 1) 0 0 5cqh;
}

.rank,
.castle-hero-rank {
  width: 100cqw;
  height: 1cqh;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  bottom: 12cqh;
  container-type: size;
  z-index: 5;
}

.castle-hero-rank {
  width: 90cqw;
  left: 7cqw;
  bottom: 28cqh;
}

.rank-icon,
.castle-hero-rank-icon {
  width: 22cqw;
  height: 22cqw;
  border-radius: 50%;
  background-size: 70% 70%;
  background-position: center;
  background-repeat: no-repeat;
}
.rank-icon-wrapper, .castle-hero-rank-icon-wrapper{
  background: url('/content/ranks/rateIconBack.png') center center no-repeat;
  padding: 2cqw;
  background-size: contain;
}
.castle-hero-rank-icon-wrapper{
  padding: 0;
}
.rank-lvl,
.castle-hero-rank-lvl {
  height: 12cqw;
  background: url("/content/ranks/ratingBack.png") center no-repeat;
  background-size: contain;
  border-radius: 150px 150px 154px 154px / 131px 131px 125px 125px;
  color: #fdd;
  font: 12cqw / 1 'DejaVuSans', sans-serif;
  font-weight: 600;
  padding: 4cqw 8cqw;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.castle-hero-rank-lvl {
  height: 12cqw;
  font: 14cqw / 1 'DejaVuSans', sans-serif;
  padding:  5cqw 8cqw;
}

.castle-hero-rank-icon {
  width: 34cqw;
  height: 34cqw;
  background-size: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.adm {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  overflow-y: auto;
  height: 100cqh;
  color: rgba(255, 255, 255, 0.9);
  font-family: 'DejaVuSans', sans-serif;
  background: rgba(25, 25, 35, 0.8);
  backdrop-filter: blur(10px);
  border-radius: 10px;
}

.adm div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.adm-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 0.5rem;
}

.adm div:hover {
  background: rgba(255, 255, 255, 0.1);
}

.adm input {
  width: 100%;
  max-width: 250px;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.9rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: white;
  transition: all 0.3s ease;
}

.adm input:focus {
  outline: none;
  border-color: rgba(100, 150, 255, 0.5);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 2px rgba(100, 150, 255, 0.2);
}

.adm label {
  min-width: 80px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
}

.adm::-webkit-scrollbar {
  width: 6px;
}

.adm::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

.adm::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px; /* Уменьшил скругление */
}

.adm::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.close-btn {
  cursor: var(--cursor-pointer);
  padding: 0.5rem 0.75rem;
  background: rgba(255, 50, 50, 0.2);
  border-radius: 6px;
  transition: all 0.2s ease;
  font-weight: bold;
}

.close-btn:hover {
  background: rgba(255, 50, 50, 0.3);
}

.talents-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.talent-item {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.error-message,
.notify-message {
  position: fixed;
  width: 94%;
  margin: 20cqh 3%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  top: 0;
  z-index: 9999;
}
.error-message {
  flex-flow: column nowrap;
  align-items: end;
}

.error-message div,
.notify-message div {
  padding: 1vmin 2vmin;
  border-radius: 15px;
  font: 1rem / 1 'DejaVuSans', sans-serif;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
}

.error-message div {
  background: rgba(255, 0, 0, 0.8);
}

.notify-message div {
  background: #008cffcc;
}

.splash,
.mm {
  position: fixed;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  width: 100cqw;
  height: 100cqh;
  backdrop-filter: blur(.5vmax);
  background: rgba(0, 0, 0, 0.6);
}

.splash {
  z-index: 9999;
}

.frame {
  position: fixed;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  width: 100cqw;
  height: 100cqh;
  z-index: 9999;
}

.frame-body {
  width: 80cqw;
  height: 80cqh;
  background: rgba(255, 0, 0, 0.5);
}

.frame {
  position: fixed;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  width: 100cqw;
  height: 100cqh;
  z-index: 9999;
}

.frame-body {
  width: 80cqw;
  height: 80cqh;
  background: rgba(255, 0, 0, 0.5);
}

.splash-text {
  text-align: center;
  margin: 0 0cqw;
  font: 1.2rem / 1.3 'DejaVuSans', sans-serif;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: rgba(0, 0, 0, 0.3) 0 0 0.5cqw;
}

.splash-text a {
  color: rgba(255, 50, 0, 0.9);
  font-weight: 800;
}

.mm {
  z-index: 9000;
}

.progress {
  position: relative;
  width: 90cqw;
  height: 15cqh;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3cqw;
}

.progress div {
  position: absolute;
  height: 15cqh;
  border-radius: 3cqw;
}

.progress div:first-child {
  width: 0%;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease-out;
}

.progress div:last-child {
  width: 100%;
  line-height: 15cqh;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: rgba(0, 0, 0, 0.5) 0 0 5px;
  font-size: 2.5cqw;
  font-weight: 800;
}

.splash-content {
  --splash-text-color: rgba(255, 255, 255, 0.9);
  /*--splash-bg-color: linear-gradient(to bottom, rgba(4, 32, 42, 0.9), rgba(18, 69, 73, 0.85), rgba(21, 51, 59, 0.8), rgba(18, 69, 73, 0.85), rgba(4, 32, 42, 0.9));*/
  /* background-image: url(img/main.png); */
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: min(35cqw, 500px); /* Ограничение максимальной ширины */
  padding: 2cqmin 0.5cqmin;
  display: flex;
  flex-direction: column;
  background: linear-gradient( to bottom, rgba(4, 32, 42, 0.9), rgba(18, 69, 73, 0.85), rgba(21, 51, 59, 0.8), rgba(18, 69, 73, 0.85), rgba(4, 32, 42, 0.9) );
	border-radius: 1.5cqh;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
	backdrop-filter: blur(8px);
  font-family: 'DejaVuSans', sans-serif;
  font-size: clamp(1.5rem, 3.5cqw, 2rem); /* Адаптивный размер текста */
  line-height: 1.3;
  color: var(--splash-text-color);
  text-align: center;
  container-type: inline-size;
  border: 0.1cqh solid rgb(158, 155, 104);
  position: relative;
}

.splash-content input {
  transition: all 0.3s ease-out;
  padding: 0.6vmin 0;
  margin-bottom: 15px;
  font: 1rem / 1 'DejaVuSans', sans-serif;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  border-radius: 50px;
  color: rgba(0, 0, 0, 0.9);
  text-align: center;
}

.splash-content input:hover {
  background: rgba(255, 255, 255, 0.8);
}
.splash-content-window {
  --splash-text-color: rgba(255, 255, 255, 0.9);
  --splash-bg-color: linear-gradient(
    to bottom,
    rgba(4, 32, 42, 0.9),
    rgba(18, 69, 73, 0.85),
    rgba(21, 51, 59, 0.8),
    rgba(18, 69, 73, 0.85),
    rgba(4, 32, 42, 0.9)
  );

  width: min(90cqw); /* Ограничение максимальной ширины */
  padding: 2.5cqmin;
  display: flex;
  flex-direction: column;
  background: var(--splash-bg-color);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  font-family: 'DejaVuSans', sans-serif;
  font-size: clamp(1.5cqw, 3.5cqh, 2cqh); /* Адаптивный размер текста */
  line-height: 1.3;
  color: var(--splash-text-color);
  text-align: center;
  container-type: inline-size;
  border: 0.1cqh solid rgb(158, 155, 104);
}

.splash-content-window input {
  transition: all 0.3s ease-out;
  width: 100%;
  padding: 0.6vmin 0;
  margin-bottom: 15px;
  font: 1rem / 1 'DejaVuSans', sans-serif;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  border-radius: 50px;
  color: rgba(0, 0, 0, 0.9);
  text-align: center;
}

.splash-content-window input:hover {
  background: rgba(255, 255, 255, 0.8);
}

.splash-content-button,
.splash-content-button-red {
  width: 30cqh;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin-top: 5cqmin;
  margin-left: auto;
  margin-right: auto;
  padding: 1.8cqmin;
  font-size: 1.3rem;
  /*background: rgba(255, 255, 255, 0.15);*/
  color: white;
  border: none;
  /*border-radius: 50px;*/
  cursor: var(--cursor-pointer);
  transition: all 0.25s ease-out;
}

.splash-content-button {
  background-image: url(img/button1.png);
}

.splash-content-button-red {
  background-image: url(img/button3.png);
}

/* Адаптация для маленьких экранов */
@container (width < 300px) {
  .splash-content {
    padding: 5cqmin;
    gap: 3cqmin;
    font-size: 1.3rem;
  }
}

/* Элементы внутри контента
.splash-content > * {
    margin: 4px;
    padding: 0.5cqmin 0;
}*/

.splash-content-button:hover,
.splash-content-button-red:hover {
  /*background: rgba(255, 255, 255, 0.25);*/
  transform: translateY(-2px);
}

.splash-content input:focus {
  outline: none;
  background: rgba(200, 200, 200, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.splash-content .close {
  top: -4cqh;
  right: -4cqh;
  background-size: contain;
  position: absolute;
  transform: scale(0.8);
  transition: transform 0.2s ease; /* Добавляем плавный переход */
}

.splash-content .wrap {
  display: flex;
  flex-direction: column;
  margin: 2cqh 2cqh;
}
.splash-content .wrap div {
  margin: 2cqh;
}

#castle-menu-text-change-nickname{
  font-size: 1.6cqh;
  white-space: nowrap;
}
#splash-content-button-modal-fraction{
  margin-top: 1.5cqh;
}
#build-create-input{
  margin-top: 2cqh;
}
#resetBuildText{
  margin: 2.5cqh 0;
}
#duplicateBuildModal{
  margin: 2.5cqh 0;
}
#search-friend-window-input{
  margin-top: 2cqh;
}
#friendRemoveText{
  margin-top: 2cqh;
}
.btn-duplicate {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 90%;
  background: url('content/icons/copy-white.svg') no-repeat center;
  background-size: contain;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}
.build-action-item:hover .btn-duplicate {
  opacity: 1;
  filter: brightness(1.2); /* Усиливаем яркость белого */
}

.btn-duplicate:hover {
  filter: invert(0.6) brightness(1.4); /* Эффект при наведении */
}
.btn-danger {
  background-color: #ff4d4d;
  color: white;
}
.btn-danger:hover {
  background-color: #ff3333;
}

/* Стили для окна замены билда */
.build-replace-title {
  font: 1.5rem / 1 'DejaVuSans', sans-serif;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 3cqh;
  text-align: center;
}

.build-replace-btn {
  transition: all 0.3s ease-out;
  width: 100%;
  padding: 2vmin 0;
  margin-bottom: 1cqh;
  font: 1.3rem / 1 'DejaVuSans', sans-serif;
  background: rgba(255, 255, 255, 0.3);
  border: none;
  border-radius: 50px;
  color: rgba(0, 0, 0, 0.9);
  text-align: center;
}

.build-replace-btn:hover {
  background: rgba(255, 255, 255, 0.6);
}

.build-replace-cancel {
  transition: all 0.3s ease-out;
  width: 100%;
  padding: 2vmin 0;
  margin-top: 2cqh;
  font: 1.3rem / 1 'DejaVuSans', sans-serif;
  background: rgba(255, 255, 255, 0.3);
  border: none;
  border-radius: 50px;
  color: rgba(0, 0, 0, 0.9);
  text-align: center;
}

.build-replace-cancel:hover {
  background: rgba(255, 100, 100, 0.6);
}

.mm-timer {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  /*background:rgba(255,50,0,0.9);*/
  font: 2.5rem / 1 'DejaVuSans', sans-serif;
  color: rgba(255, 255, 255, 0.6);
  text-shadow: rgba(0, 0, 0, 0.3) 0 0 5px;
  padding: 1cqh 1cqw;
  /*border-radius:15px;
	box-shadow:0 0 25px rgba(0,0,0,0.3);*/
}

.mm-ready-count {
  font: 4rem / 1 'DejaVuSans', sans-serif;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: rgba(0, 0, 0, 0.3) 0 0 5px;
  text-align: center;
  margin-top: 1cqh;
  margin-bottom: 1cqh;
  padding: 4cqh 1cqw;
  font-weight: 600;
  background-image: url(img/b3.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.mm-ready-button {
  font: 1.3cqw / 1 'DejaVuSans', sans-serif;
  padding: 0.8cqw;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: rgba(0, 0, 0, 0.5) 0 0 0.5cqw;
  position: relative;
  display: inline-block;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  background-image: url(img/button3.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /*background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
	background-size: 400%;
	border-radius: 1cqw;
	z-index: 1;
	animation: ready 8s linear infinite;*/
}

.mm-ready-button:hover {
  /*content: "";
	position: absolute;
	top: -5px;
	right: -5px;
	bottom: -5px;
	left: -5px;
	z-index: -1;*/
  background-image: url(img/button1.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform: scale(1.02);
  /*background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
	background-size: 400%;
	border-radius: 40px;
	opacity: 0;
	transition: .5s;
	filter: blur(20px);
	opacity: 1;
	animation: ready 8s linear infinite;*/
}

.mm-lobby {
  width: 100cqw;
  height: 100cqh;
  display: flex;
  flex-flow: column nowrap;
}

.mm-lobby-header {
  display: flex;
  flex-flow: row nowrap;
  width: 100cqw;
  height: 30cqh;
  justify-content: space-around;
  align-items: center;
  /*padding:3cqh 1cqw;*/
}

.mm-lobby-middle {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
  width: 100cqw;
  height: 70cqh;
  /*padding:3cqh 1cqw;*/
}

.mm-lobby-middle-chat {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  width: 33.33cqw;
  height: 70cqh;
}

.mm-lobby-middle-chat-map {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 45cqh;
}

.mm-lobby-middle-chat-body {
  height: 20cqh;
  overflow-y: scroll;
  border-radius: 0 1cqw 0 0;
  background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.3));
}

.mm-lobby-middle-chat-body-item {
  font: 1.1cqw / 1 'DejaVuSans', sans-serif;
  color: rgba(255, 255, 255, 0.7);
  padding: 0.5cqh 1cqw;
}

.mm-lobby-middle-chat-body-item div:first-child {
  display: inline;
  font-weight: bold;
  padding-right: 0.5cqw;
}

.mm-lobby-middle-chat-body-item div:last-child {
  display: inline;
  color: rgba(255, 255, 255, 0.7);
}

.mm-lobby-middle-chat-button {
  height: 5cqh;
  width: 94%;
  padding: 0 3%;
  font: 1.3cqw / 1 'DejaVuSans', sans-serif;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 0 0 3px 3px;
  color: rgba(255, 255, 255, 0.7);
}

.mm-lobby-middle-build {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  width: 33.33cqw;
  height: 70cqh;
}

.mm-player-ban {
  display: none;
  position: absolute;
  width: 2.5vw;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 115%;
  border: solid 0.1vw rgb(255, 0, 0);
  box-shadow: 0 0 15cqw rgb(255, 0, 0);
  z-index: 9999;
}

.lobby-build-tab {
  display: flex;
  flex-flow: row nowrap;
  width: 32cqw;
  overflow-x: auto;
}

.lobby-build-tab div {
  color: rgba(255, 255, 255, 0.5);
  text-shadow: rgba(0, 0, 0, 0.3) 0 0 5px;
  font: 1cqw / 1 'DejaVuSans', sans-serif;
  text-align: center;
  transition: all 0.3s ease-out;
  padding: 0.8cqh 1cqw;
  margin: 0 0.3cqw;
  border-radius: 1.3cqw;
}

.mm-lobby-middle-hero {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  width: 33.33cqw;
  height: 70cqh;
  overflow-y: scroll;
}

.mm-lobby-middle-hero-prompt {
  text-align: center;
  width: 33.33cqw;
  margin: 1cqw 0;
  font: 1.2cqw / 1 'DejaVuSans', sans-serif;
  color: rgba(255, 255, 255, 0.3);
}

.mm-lobby-middle-hero-item {
  width: 6.66cqw;
  height: 6.66cqw;
  margin: 0.3cqw 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  container-type: size;
}

.mm-lobby-middle-hero-line {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  width: 33.33cqw;
  margin: 1cqw 0;
  font: 1.3cqw / 1 'DejaVuSans', sans-serif;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: rgba(0, 0, 0, 0.3) 0 0 5px;
}

.mm-lobby-middle-hero-line div:first-child {
  border-radius: 50% 0 0 50%;
}

.mm-lobby-middle-hero-line div:last-child {
  border-radius: 0 50% 50% 0;
}

.mm-lobby-middle-hero-line-icon {
  width: 2cqw;
  height: 2cqw;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60%;
  background-color: rgba(34, 68, 68, 0.9);
}

.mm-lobby-middle-hero-line-name {
  height: 2cqw;
  line-height: 2cqw;
  padding: 0 2cqw;
  background-color: rgba(34, 68, 68, 0.9);
}

.mm-lobby-header-team {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  width: 45cqw;
}

.mm-lobby-header-team-player {
  width: 8cqw;
  margin: 0 0.5cqw;
}

.mm-lobby-header-team-player-hero {
  width: 8cqw;
  height: 8cqw;
  border-radius: 50%;
  background-size: 110%;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  box-shadow: 0 0 2cqw rgba(0, 0, 0, 0.5);
  container-type: size;
}

.mm-frame {
  position: absolute;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1.5);
  border-radius: 50%;
  z-index: 1;
}

.mm-lobby-header-team-player-name {
  margin-top: 3cqh;
  font: 1cqw / 1 'DejaVuSans', sans-serif;
  color: #fff;
  text-shadow: rgba(0, 0, 0, 0.3) 0 0 5px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lobby-timer > .mm-timer {
  background-image: url(img/timer.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font: 1.5cqw / 1 'DejaVuSans', sans-serif;
}

.lobby-select-hero {
  background: rgba(51, 255, 51, 0.7);
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  margin-top: 1cqh;
  border-radius: 5px;
}

.party {
  width: 100cqw;
  height: 40cqh;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

.party .chat {
  width: 70cqw;
  position: absolute;
  bottom: 30px;
  left: 10px;
}
.party .chat input {
  width: 70cqw;
  background: #000;
  color: #bbb;
}

.party-middle {
  width: 100cqw;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  align-items: center;
}

.party-middle-item {
  margin: 0 1cqw;
}

.party-middle-item-nickname {
  margin: 1cqw 0;
  text-align: center;
  font: bold 1.5cqw / 1 'DejaVuSans', sans-serif;
  color: #ccc;
}

.party-middle-item div:first-child span {
  margin-left: 10px;
}

.party-middle-item-ready {
  margin: 1cqw 0;
  text-align: center;
  font: 1.5cqw / 1 'DejaVuSans', sans-serif;
  color: rgba(153, 255, 51, 0.8);
  text-shadow: rgba(0, 0, 0, 0.3) 0 0 5px;
  font-weight: 600;
  font-style: italic;
}

.party-middle-item-not-ready {
  margin: 1cqw 0;
  text-align: center;
  font: 1.5cqw / 1 'DejaVuSans', sans-serif;
  color: rgba(255, 255, 255, 0.3);
  text-shadow: rgba(0, 0, 0, 0.3) 0 0 5px;
  font-weight: 600;
  font-style: italic;
}

.party-middle-item-middle {
  width: 10cqw;
  margin: auto;
  height: 10cqw;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  background-size: 110%;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
  font: 6cqw / 1 'DejaVuSans', sans-serif;
  line-height: 9.5cqw;
  text-align: center;
  color: rgba(255, 255, 255, 0.2);
  position: relative;
}

.party-hero,
.skin-change {
  display: flex;
  flex-flow: row wrap;
  overflow: scroll;
  width: calc(max(90cqh, 90cqw));
  height: 80cqmin;
  justify-content: center;
  align-items: center;
  margin: 0 2cqh;
  container-type: size;
}

.party-hero div {
  width: 15cqh;
  height: 15cqh;
}

.skin-change div {
  width: 25cqh;
  height: 25cqh;
}

.party-hero div,
.skin-change div {
  margin: 0.2cqw;
  background-position: center;
  background-repeat: repeat-y;
  background-color: rgba(255, 255, 255, 0.1);
  background-size: 110%;
  border-radius: 50%;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
}

.animation1 {
  background: linear-gradient(90deg, #ee765200, #e73c7e, #23a6d5, #23d5ab00);
  background-size: 100% 100%;
}

.animation-text {
  background: linear-gradient(90deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-clip: text;
  background-size: 400% 400%;
  transform: translate3d(0, 0, 0);
}

.owner-text {
  background-color: rgb(255, 50, 0);
  background-clip: text;
  background-size: 400% 400%;
  transform: translate3d(0, 0, 0);
}

.administration-text {
  background-color: rgb(255, 136, 0);
  background-clip: text;
  background-size: 400% 400%;
  transform: translate3d(0, 0, 0);
}

.administration-text:before,
.owner-text:before {
  content: '';
  background-image: url('icons/2497.webp');
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  height: 2cqh;
  width: 2cqh;
  margin-right: 0.2cqh;
  margin-left: 0.2cqh;
  margin-bottom: -0.2cqh;
}

.telegrambot-text {
  background-color: rgb(250, 229, 108);
  background-clip: text;
  background-size: 400% 400%;
  transform: translate3d(0, 0, 0);
}

.telegrambot-text:before {
  content: '';
  background-image: url('icons/telegram.webp');
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  height: 1.8cqh;
  width: 1.8cqh;
  margin-right: 0.2cqh;
  margin-left: 0.2cqh;
  margin-bottom: -0.2cqh;
}

.helper-text {
  background-color: rgb(250, 229, 108);
  background-clip: text;
  background-size: 400% 400%;
  transform: translate3d(0, 0, 0);
}

.helper-text:before {
  content: '';
  background-image: url('icons/helper.webp');
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  height: 2.3cqh;
  width: 2.3cqh;
  margin-right: 0.2cqh;
  margin-left: 0.2cqh;
  margin-bottom: -0.4cqh;
}

.administration-text:hover::after,
.owner-text:hover::after,
.telegrambot-text:hover::after,
.helper-text:hover::after {
  content: attr(data-role);
  position: absolute;
  right: calc(101%);
  background: rgba(32, 32, 32, 0.784);
  border: .2cqh groove rgba(154, 154, 154, 0.423);
  color: rgba(255, 255, 255, 0.8);
  padding: .5cqh 1cqh;
  border-radius: 1cqh;
  font: 1.5cqh / 1.3 'DejaVuSans', sans-serif;
  white-space: nowrap;
  pointer-events: none;
}

.chat [data-tooltip-role]:hover::after,
.chat [data-tooltip-source]:hover::after {
  display: none;
}

.chat-role-tooltip {
  display: none;
  position: fixed;
  z-index: 9999;
  background: rgba(32, 32, 32, 0.784);
  border: 0.2cqh groove rgba(154, 154, 154, 0.423);
  color: rgba(255, 255, 255, 0.8);
  padding: 0.5cqh 1cqh;
  border-radius: 1cqh;
  font: 1.5cqh / 1.3 'DejaVuSans', sans-serif;
  white-space: normal;
  pointer-events: none;
}


.gradient-animation-render-heavy {
  animation: gradient 10s ease infinite;
}

.top {
  width: 100cqw;
  height: 40cqh;
}

.top-scroll {
  width: 100cqw;
  height: 80cqh;
  overflow: scroll;
}

.wtop-scroll {
  width: 100cqw;
  height: 100cqh;
  overflow: scroll;
}

.wtop-scroll::-webkit-scrollbar {
  background-color: rgba(0, 51, 0, 0.479);
  width: 0.5cqw;
}
.wtop-scroll::-webkit-scrollbar-thumb {
  background-color: rgb(187, 202, 187);
}

.top,
.top-scroll,
.wtop-scroll {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  font: 1.3cqw / 1 'DejaVuSans', sans-serif;
  color: rgba(255, 255, 255, 0.5);
  text-shadow: rgba(0, 0, 0, 0.3) 0 0 5px;
}

.top-filter {
  width: 100cqw;
  padding: 1cqw;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  color: rgba(255, 255, 255, 0.9);
  position: relative;
}

.top-filter div {
  margin: 0 1cqw;
}

.top-filter div:first-child {
  width: 8cqw;
  min-width: 8cqw;
  height: 8cqw;
  background-size: 105%;
  background-position: center;
  background-repeat: no-repeat;
}

.top-filter div:last-child {
  font: 4cqw / 1 'DejaVuSans', sans-serif;
}

.top-filter:after {
  content: var(--filter-text, 'Нажмите, чтобы посмотреть рейтинг по отдельным героям');
  position: absolute;
  width: 100%;
  text-align: center;
  margin-top: 8cqw;
  font-size: small;
}

.top-item {
  width: 20cqw;
  margin: 0.3cqw 1cqw;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
  border-radius: 5cqw;
}

.top-item-hero {
  width: 5cqw;
  min-width: 5cqw;
  height: 5cqw;
  background-size: 105%;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.top-item-hero-rank {
  width: 1.5cqw;
  height: 1.5cqw;
  background: #244;
  border: 1px solid orange;
  border-radius: 50%;
  background-size: 80%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  bottom: 0;
}

.top-item-player {
  width: 100cqw;
  margin-right: auto;
  padding: 0 1cqw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.top-item-player div:last-child {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 0.5cqh;
  font-size: 1.5cqw;
}

.top-layout.wtop-scroll,
.top-layout.top-scroll {
  flex-flow: column nowrap;
  align-items: stretch;
  justify-content: flex-start;
  align-content: stretch;
  overflow: hidden;
}

.wtop-mode-bar {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  gap: 1.123cqw;
  width: 100%;
  flex-shrink: 0;
  padding: 0.874cqw 0.624cqw 1.498cqw;
  box-sizing: border-box;
  position: relative;
  left: -5.2cqw;
}

.wtop-mode-tab {
  padding: 0.874cqw 2.496cqw;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0.874cqw;
  background: rgba(0, 0, 0, 0.4);
  color: rgba(255, 255, 255, 0.88);
  cursor: var(--cursor-pointer);
  font: inherit;
  font-size: 2.57cqw;
  text-shadow: rgba(0, 0, 0, 0.35) 0 0 9px;
}

.wtop-mode-tab.is-active {
  border-color: rgba(255, 200, 120, 0.85);
  box-shadow: 0 0 34px rgba(255, 180, 80, 0.35);
  color: rgba(255, 255, 255, 1);
}

.wtop-podium-row {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.69cqw;
  width: 100%;
  flex-shrink: 0;
  padding: 0 0.4cqw 0.52cqw;
  box-sizing: border-box;
}

.wtop-podium {
  display: flex;
  flex-flow: row nowrap;
  justify-content: stretch;
  align-items: stretch;
  gap: 0.52cqw;
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
}

.wtop-podium .top-item.wtop-podium-card {
  --wtop-podium-crown-col: 6.1cqw;
  display: grid;
  grid-template-columns: 5.75cqw minmax(0, 1fr);
  align-items: center;
  column-gap: 0.35cqw;
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  margin: 0.35cqw 0.18cqw;
  border-radius: 5.75cqw;
  box-sizing: border-box;
  overflow: visible;
  cursor: var(--cursor-pointer);
  transition:
    filter 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.wtop-podium .top-item.wtop-podium-card:hover {
  filter: brightness(1.38) saturate(1.12) drop-shadow(0 0 16px rgba(255, 240, 200, 0.95));
}

.wtop-podium .top-item.wtop-podium-card:active {
  filter: brightness(1.2) saturate(1.06) drop-shadow(0 0 8px rgba(255, 220, 160, 0.6));
}

.wtop-podium-card-body {
  min-width: 0;
  max-width: 100%;
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
  align-self: stretch;
  overflow: hidden;
}

.wtop-podium-hero-wrap {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.wtop-podium-hero-wrap .top-item-hero {
  position: relative;
}

.wtop-podium-card-body .wtop-podium-crown-slot {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--wtop-podium-crown-col, 6.1cqw);
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  padding-right: 0.45cqw;
  z-index: 3;
  pointer-events: none;
}

.wtop-crown {
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.wtop-podium-card-body .wtop-podium-crown-slot .wtop-crown--podium {
  height: 70%;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: right center;
}

.wtop-cell--hero-with-crown {
  position: relative;
  overflow: visible;
}

.wtop-cell--hero-with-crown .wtop-cell-hero-icon,
.wtop-cell--hero-with-crown .wtop-cell-hero-name {
  position: relative;
  z-index: 2;
}

.wtop-cell--hero-with-crown .wtop-crown--row {
  position: absolute;
  left: auto;
  right: 0.25cqw;
  top: 50%;
  transform: translateY(-50%);
  height: 50%;
  width: auto;
  max-width: min(48%, 20cqw);
  object-fit: contain;
  object-position: right center;
  z-index: 3;
}

.wtop-podium .top-item.wtop-podium-card--1 {
  background: linear-gradient(
    165deg,
    #e8c547 0%,
    #c9a227 22%,
    #8a6b18 48%,
    #5c4510 72%,
    #3d2e0a 100%
  );
  border: 1px solid rgba(255, 230, 140, 0.75);
  box-shadow:
    0 0 18px rgba(255, 215, 100, 0.65),
    0 0 40px rgba(212, 175, 55, 0.45),
    inset 0 2px 0 rgba(255, 248, 200, 0.35),
    inset 0 -1px 0 rgba(60, 45, 10, 0.4);
}

.wtop-podium .top-item.wtop-podium-card--2 {
  background: linear-gradient(
    165deg,
    #e8e8ec 0%,
    #b8b8c2 22%,
    #8a8a96 48%,
    #5c5c68 72%,
    #3a3a44 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 0 16px rgba(220, 225, 235, 0.55),
    0 0 36px rgba(160, 170, 190, 0.35),
    inset 0 2px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(40, 42, 50, 0.35);
}

.wtop-podium .top-item.wtop-podium-card--3 {
  background: linear-gradient(
    165deg,
    #cd8c52 0%,
    #a56b3a 22%,
    #7a4e28 48%,
    #523418 72%,
    #352210 100%
  );
  border: 1px solid rgba(230, 160, 100, 0.65);
  box-shadow:
    0 0 16px rgba(205, 127, 50, 0.55),
    0 0 34px rgba(140, 80, 40, 0.38),
    inset 0 2px 0 rgba(255, 200, 150, 0.22),
    inset 0 -1px 0 rgba(40, 22, 12, 0.45);
}

.wtop-podium .top-item-hero {
  width: 5.75cqw;
  min-width: 5.75cqw;
  height: 5.75cqw;
}

.wtop-podium .top-item-hero-rank {
  width: 1.73cqw;
  height: 1.73cqw;
}

.wtop-podium .wtop-podium-card-body > .wtop-podium-player {
  white-space: normal;
  text-overflow: clip;
  margin: 0;
  padding: 0 calc(var(--wtop-podium-crown-col, 6.1cqw) + 0.45cqw) 0 0.35cqw;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: 0 1 auto;
  align-self: stretch;
  overflow: hidden;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  text-align: left;
}

.wtop-podium .wtop-podium-player .wtop-podium-name-line {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  direction: ltr;
  unicode-bidi: plaintext;
  font-size: 2.7cqw;
  font-weight: 700;
  line-height: 1.12;
  color: #fff;
  text-shadow:
    0 0.1cqw 0.3cqw rgba(0, 0, 0, 0.9),
    0 0.035cqw 0.07cqw rgba(0, 0, 0, 0.95);
}

.wtop-podium .wtop-podium-player div:last-child {
  margin-top: 0.58cqh;
  font-size: 1.8cqw;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 0.08cqw 0.2cqw rgba(0, 0, 0, 0.75);
}

.wtop-list-row {
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 0 0.7cqw 0.5cqw;
  box-sizing: border-box;
}

.wtop-list-scroll {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
  font-size: 2.6cqw;
  line-height: 1;
  scrollbar-width: auto;
  scrollbar-color: #196a6d #103b41b7;
}

.wtop-podium-row .wtop-hero-filter {
  width: 5.98cqw;
  height: 5.98cqw;
  min-width: 5.98cqw;
  padding: 0.29cqw;
}

.wtop-hero-filter {
  flex-shrink: 0;
  width: 5.2cqw;
  height: 5.2cqw;
  min-width: 5.2cqw;
  border: 2px solid rgba(201, 162, 39, 0.75);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  cursor: var(--cursor-pointer);
  padding: 0.25cqw;
  box-sizing: border-box;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wtop-hero-filter-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.wtop-hero-filter:focus-visible {
  outline: 2px solid rgba(255, 200, 120, 0.9);
  outline-offset: 2px;
}

.wtop-table-header {
  display: grid;
  grid-template-columns: 9cqw minmax(0, 3fr) minmax(0, 2fr) 10.5cqw;
  gap: 0.8cqw;
  width: 100%;
  flex-shrink: 0;
  margin-bottom: 0.7cqw;
  box-sizing: border-box;
}

.wtop-table-row {
  display: grid;
  grid-template-columns: 9cqw minmax(0, 3fr) minmax(0, 2fr) 10.5cqw;
  gap: 0.8cqw;
  align-items: stretch;
  width: 100%;
  margin-bottom: 0.7cqw;
  box-sizing: border-box;
  cursor: var(--cursor-pointer);
  transition: filter 0.2s ease;
  border-radius: 0.85cqw;
}

.wtop-table-row:hover {
  filter: brightness(1.52) contrast(1.08) drop-shadow(0 0 14px rgba(140, 210, 255, 0.75));
}

.wtop-table-row:active {
  filter: brightness(1.28) contrast(1.04) drop-shadow(0 0 6px rgba(120, 190, 255, 0.45));
}

.wtop-cell {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 24, 36, 0.58);
  border-radius: 0.7cqw;
  padding: 0.7cqw 1.1cqw;
  text-align: center;
  min-height: 6.8cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: 2.4cqw;
  color: rgba(255, 255, 255, 0.82);
}

.wtop-table-header .wtop-cell {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.68);
  font-size: 2.1cqw;
  background: rgba(0, 12, 20, 0.65);
  box-shadow: none;
}

.wtop-hero-stats-header {
  display: grid;
  grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.8cqw;
  width: 100%;
  flex-shrink: 0;
  margin-bottom: 0.7cqw;
  box-sizing: border-box;
}

.wtop-hero-stats-row {
  display: grid;
  grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.8cqw;
  align-items: stretch;
  width: 100%;
  margin-bottom: 0.7cqw;
  box-sizing: border-box;
}

.wtop-sortable-header {
  font: inherit;
  cursor: var(--cursor-pointer);
  color: rgba(255, 255, 255, 0.68);
  font-size: 2.1cqw;
  font-weight: 600;
  background: rgba(0, 12, 20, 0.65);
}

.wtop-sortable-header.is-active {
  border-color: rgba(255, 200, 120, 0.82);
  color: rgba(255, 230, 200, 0.95);
}

.wtop-cell--name {
  justify-content: flex-start;
  text-align: left;
  min-width: 0;
  overflow: hidden;
}

.wtop-cell-name-text {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
}

.wtop-cell--hero {
  justify-content: flex-start;
  gap: 0.9cqw;
  padding-left: 0.8cqw;
}

.wtop-cell--hero-stats-hero {
  justify-content: flex-start;
}

.wtop-hero-title-cell {
  padding-right: 0.6cqw;
}

.wtop-hero-title-split {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6cqw;
}

.wtop-hero-title-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wtop-hero-period-toggle {
  min-height: 4.5cqw;
  padding: 0.35cqw 0.9cqw;
  border-radius: 0.6cqw;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(0, 0, 0, 0.35);
  color: rgba(255, 220, 180, 0.96);
  font-size: 1.75cqw;
  line-height: 1;
  cursor: var(--cursor-pointer);
  white-space: nowrap;
}

.wtop-hero-period-toggle:hover {
  filter: brightness(1.2);
}

.wtop-cell-hero-icon {
  width: 6.4cqw;
  height: 6.4cqw;
  min-width: 6.4cqw;
  border-radius: 0.6cqw;
  background-size: cover;
  background-position: center;
  border: none;
  flex-shrink: 0;
}

.wtop-cell-hero-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  font-size: 2.2cqw;
  color: rgba(255, 255, 255, 0.78);
}

.wtop-cell--rating {
  font-weight: 600;
  color: rgba(255, 230, 200, 0.95);
}

.wtop-cell--hero-stat-number {
  font-weight: 600;
}

.wtop-cell--hero-stat-winrate {
  color: rgba(200, 255, 200, 0.95);
}

.wtop-empty-hint {
  width: 100%;
  text-align: center;
  padding: 2cqw;
  color: rgba(255, 255, 255, 0.45);
  font-size: 2.6cqw;
}

.build-top {
  font: 3cqw / 1 'DejaVuSans', sans-serif;
}

.build-top,
.build-bottom {
  color: rgba(255, 255, 255, 0.7);
  text-shadow: rgba(0, 0, 0, 0.3) 0 0 5px;
  text-align: center;
  padding: 1cqw 0;
}

.build-body {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  height: 100%;
}

.build-body-row {
  display: flex;
  flex-flow: row nowrap;
  height: 16.66%;
}

.build-body-row div {
  width: 16.66%;
  min-width: 16.66%;
  height: auto;
  background-size: 90%;
  background-position: center;
  background-repeat: no-repeat;
}

.build-bottom {
  font: 1.5cqw / 1 'DejaVuSans', sans-serif;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

.build-bottom div {
}

.search {
  --search-text-color: rgba(255, 255, 255, 0.9);
  --search-bg-color: linear-gradient(
    to bottom,
    rgba(4, 32, 42, 0.9),
    rgba(18, 69, 73, 0.85),
    rgba(21, 51, 59, 0.8),
    rgba(18, 69, 73, 0.85),
    rgba(4, 32, 42, 0.9)
  );

  display: flex;
  flex-flow: column nowrap;
  width: min(50cqw, 500px);
  padding: 2.5cqmin;
  background: var(--search-bg-color);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  font-family: 'DejaVuSans', sans-serif;
  color: var(--search-text-color);
  container-type: inline-size;
  border: 0.1cqh solid rgb(158, 155, 104);
}

.search-input {
  width: 100%;
  padding: 1.2cqmin 0.1cqmin;
  margin-bottom: 1.5cqmin;
  font-size: clamp(0.9rem, 1.5cqw, 1.2rem);
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 50px;
  color: var(--search-text-color);
  text-align: center;
  transition: all 0.3s ease-out;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.search-input:hover {
  background: rgba(255, 255, 255, 0.25);
}

.search-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 2px rgba(100, 150, 255, 0.3);
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.search-body {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 1cqmin;
  margin: 1.5cqmin 0;
}

.search-body div {
  padding: 1cqmin 2cqmin;
  font-size: clamp(0.8rem, 1.5cqw, 1rem);
  color: rgba(255, 255, 255, 0.8);
  border-radius: 15px;
  cursor: var(--cursor-pointer);
  transition: all 0.25s ease-out;
}

.search-body div:hover {
  background: rgba(255, 255, 255, 0.3);
  text-decoration: underline;
  transform: translateY(-1px);
}

.search-bottom {
  text-align: center;
  font-size: clamp(0.8rem, 1.5cqw, 1rem);
  color: rgba(255, 255, 255, 0.7);
  margin-top: 1cqmin;
}

/* Адаптация для маленьких экранов */
@container (width < 300px) {
  .search {
    padding: 3cqmin;
    width: 80cqw;
  }

  .search-input {
    padding: 1.5cqmin;
  }

  .search-body div {
    padding: 1.2cqmin;
  }
}

#ADMStat {
  position: fixed;
  top: 10vh;
  right: 2vh;
  z-index: 9999;
  font: 1cqw / 1 'DejaVuSans', sans-serif;
  padding: 0.3vw;
  color: white;
  font-size: 1cqh;
  text-shadow: 2px 2px 4px black;
  background-color: gray;
  border-radius: 4cqh;
  opacity: 0.7;
}

.history {
  display: flex;
  flex-flow: column nowrap;
  overflow: scroll;
  height: 80cqh;
  font: 2cqw / 1 'DejaVuSans', sans-serif;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: rgba(0, 0, 0, 0.3) 0 0 5px;
}

.whistory {
  display: flex;
  flex-flow: column nowrap;
  overflow: scroll;
  height: 100cqh;
  font: 2cqw / 1 'DejaVuSans', sans-serif;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: rgba(0, 0, 0, 0.3) 0 0 5px;
}
.whistory::-webkit-scrollbar {
  background-color: rgba(0, 51, 0, 0.479);
  width: 1cqw;
}
.whistory::-webkit-scrollbar-thumb {
  background-color: rgb(187, 202, 187);
}

.history-item {
  width: 89cqw;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 0 2.2cqh rgba(0, 0, 0, 0.3);
  border-radius: 5cqw;
  margin: 1cqw 3cqw;
  padding-right: 3cqw;
}

.history-item div:first-child {
  width: 4cqw;
  min-width: 4cqw;
  height: 4cqw;
  background-size: 105%;
  background-position: center;
  background-repeat: no-repeat;
}

.history-text-box {
  width: 20cqh;
  text-align: center;
}

.ready-button {
  font: 1.5cqw / 1 'DejaVuSans', sans-serif;
  padding: 1cqw;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: rgba(0, 0, 0, 0.5) 0 0 0.5cqw;
  position: relative;
  display: inline-block;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
  border-radius: 1cqw;
  z-index: 1;
  animation: ready 8s linear infinite;
}

.ready-button:before {
  content: '';
  position: absolute;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  z-index: -1;
  background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
  border-radius: 40px;
  opacity: 0;
  transition: 0.5s;
  filter: blur(20px);
  opacity: 1;
  animation: ready 8s linear infinite;
}

.buttons {
  margin: 10%;
  text-align: center;
}

.btn-hover {
  transform: scale(0.95);
  transition: all 0.4s ease-in-out;
}
.btn-hover:hover {
  transform: scale(1);
  z-index: 1;
}

.btn-hover.color-1 {
  box-shadow: 0 0.1cqh 1cqh 0 rgba(49, 196, 190, 0.75);
}

.btn-hover.color-2 {
  background-image: linear-gradient(to right, rgb(57, 166, 166), rgb(85, 175, 200), #82d9a8, rgb(131, 216, 249));
  box-shadow: 0 0.1cqh 1cqh 0 rgba(49, 196, 190, 0.75);
}

.btn-hover.color-3 {
  background-image: linear-gradient(150deg, rgb(130, 217, 168), rgb(27, 50, 161), rgb(130, 217, 168));
  box-shadow: 0 0.1cqh 1cqh 0 rgba(49, 196, 190, 0.75);
}

.btn-hover.color-4 {
  background: #000;
  box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
}

.list-highlight {
  text-shadow: #000 0 0 0.4cqh;
  font-weight: 600;
  background-image: linear-gradient(
    to bottom,
    rgba(16, 120, 108, 0.8),
    rgba(18, 135, 121, 0.8),
    rgba(20, 150, 135, 0.8),
    rgba(20, 150, 135, 0.8),
    rgba(24, 180, 162, 0.8)
  );
  box-shadow: 0 0.1cqh 1cqh 0 rgba(49, 196, 190, 0.75);
  font: 2cqh / 1.3 'DejaVuSans', sans-serif;
}

.list-not-highlight {
  text-shadow: #000 0 0 0.2cqh;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  background-image: linear-gradient(to right, rgba(32, 131, 114, 0.7), rgba(32, 131, 114, 0.7));
  box-shadow: 0 0.1cqh 1cqh 0 rgba(49, 196, 190, 0.75);
  font: 2cqh / 1.3 'DejaVuSans', sans-serif;
}

.list-not-highlight:hover {
  transition: all 0.4s ease-in-out;
  color: rgba(255, 255, 255, 1);
}

/* Smartcast animation, adapted from https://codepen.io/michellebarker/pen/gOMBPQj */

:root {
  --d: 4000ms;
  --angle: 90deg;
  --gradX: 100%;
  --gradY: 50%;
  --c1: rgba(168, 239, 200, 1);
  --c2: rgba(168, 239, 200, 0.1);
}

@property --angle {
  syntax: '<angle>';
  initial-value: 90deg;
  inherits: true;
}

@property --gradX {
  syntax: '<percentage>';
  initial-value: 50%;
  inherits: true;
}

@property --gradY {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: true;
}

@keyframes glowing {
  0% {
    background-color: #91d;
    box-shadow: 0 0 6px #90f;
  }
  50% {
    background-color: #a0f;
    box-shadow: 0 0 40px #b0d;
  }
  100% {
    background-color: #70f;
    box-shadow: 0 0 5px #63e;
  }
}

.smartcast {
  background-image:
    linear-gradient(#515152, #515152),
    conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  animation: borderRotate var(--d) linear infinite forwards;
}
.smartcast:after {
  background: #8f9 !important;
}

.chat {
  position: relative;
  width: 80%;
  height: 13cqh;
  padding: 5%;
  transition: all 0.3s ease-out;
  opacity: 80%;
  border: 0.2cqh groove rgb(158, 155, 104);
  background-image: linear-gradient(1turn, rgba(25, 71, 67, 0.8), rgba(18, 69, 73, 0.9), rgba(21, 51, 59, 0.8), rgba(4, 32, 42, 0.8));
  box-shadow: -2cqh 10cqh 5cqh #0c1f2220;
  border-radius: 1cqh 1cqh 1cqh 1cqh / 1cqh 1cqh 1cqh 1cqh;
}

.chat.chat-has-pinned {
  height: 18cqh;
}

.chat:hover {
  height: 58cqh;
  opacity: 100%;
  transition: all 0.3s ease-out;
}

.chat.chat-has-pinned:hover {
  height: 63cqh;
}

.chat-body {
  height: 10cqh;
  overflow-y: scroll;
  transition: all 0.3s ease-out;
  display: flex;
  flex-direction: column-reverse;
}

.chat-pinned-container {
  position: relative;
  margin-top: 0.5cqh;
  padding-top: 0.5cqh;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.chat-pinned-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: var(--cursor-pointer);
  padding: 0.4cqh 0.6cqh;
  border: 0.2cqh groove rgb(158, 155, 104);
  background-image: linear-gradient(1turn, rgba(25, 71, 67, 0.8), rgba(18, 69, 73, 0.9), rgba(21, 51, 59, 0.8), rgba(4, 32, 42, 0.8));
  box-shadow: -2cqh 10cqh 5cqh #0c1f2220;
  border-radius: 1cqh 1cqh 1cqh 1cqh / 1cqh 1cqh 1cqh 1cqh;
  overflow: hidden;
  white-space: nowrap;
}

.chat-pinned-header > div:first-child,
.chat-pinned-header .chat-pinned-count {
  flex-shrink: 0;
}

.chat-pinned-header > div:nth-child(2) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-pinned-count {
  margin-left: 0.5cqh;
  padding: 0.1cqh 0.5cqh;
  border-radius: 999px;
  background: rgba(255, 215, 0, 0.2);
  color: rgba(255, 255, 255, 0.9);
  font: 1.6cqh / 1 'DejaVuSans', sans-serif;
}

.chat-pinned-list-wrap {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin-bottom: 0.5cqh;
  z-index: 2;
  border: 0.2cqh groove rgb(158, 155, 104);
  background-image: linear-gradient(1turn, rgba(25, 71, 67, 0.95), rgba(18, 69, 73, 0.95), rgba(21, 51, 59, 0.95), rgba(4, 32, 42, 0.95));
  box-shadow: -2cqh 10cqh 5cqh #0c1f2220;
  border-radius: 1cqh 1cqh 1cqh 1cqh / 1cqh 1cqh 1cqh 1cqh;
  max-height: 35cqh;
  overflow-y: auto;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin-bottom 0.3s ease-out;
}

.chat-pinned-list-wrap.chat-pinned-list-wrap-collapsed {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-bottom: 0;
  pointer-events: none;
}

.chat-pinned-list {
  padding: 0.5cqh;
  display: flex;
  flex-direction: column-reverse;
}

.chat:hover .chat-body {
  height: 55cqh;
}

.chat-input-container {
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.9);
}

.chat-input {
  position: relative;
  bottom: 0;
  width: 90%;
  height: 4cqh;
  background: none;
  font: 2cqh / 1 'DejaVuSans', sans-serif;
  color: rgba(255, 255, 255, 0.9);
  word-wrap: normal;
}

.scroll-btn {
  position: relative;
  width: 2.5cqh;
  height: 2.5cqh;
  font: 2cqh / 1 'DejaVuSans', sans-serif;
  color: rgba(255, 255, 255, 0.377);
}

.chat-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.chat-body-item {
  display: flex;
  align-items: center;
  padding: 0.7cqh;
}

.chat-body-item-content {
  flex: 1;
  min-width: 0;
}

.chat-body-item div {
  display: inline;
  font: 2cqh / 1 'DejaVuSans', sans-serif;
  text-shadow: rgba(0, 0, 0, 0.3) 0 0 0.2cqw;
  transition: all 0.3s ease-out;
  color: rgba(240, 240, 230, 0.9);
}

.chat-body-item div a {
  color: rgb(0, 225, 255);

  text-decoration: underline;
  text-decoration-thickness: 0.1cqh;
}
.chat-body-item div a:visited {
  color: rgb(0, 179, 202);
}

.chat-body:hover .chat-body-item div {
  opacity: 100%;
}

.chat-body-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.chat-body-item div:first-child {
  color: rgb(250, 229, 108);
}	

.chat-body-item-time {
  display: inline-block;
  margin-left: 0.5cqh;
  font: 1.25cqh / 1 'DejaVuSans', sans-serif;
  color: rgb(254 255 235 / 60%);
}

.chat-pinned-message {
  background: rgba(255, 215, 0, 0.06);
  border-left: 0.2cqh solid rgba(255, 215, 0, 0.7);
}

.chat-pinned-message,
.chat-pinned-item {
  color: rgba(255, 255, 255, 0.95);
}

.chat-pinned-message div:last-child,
.chat-pinned-item div:last-child {
  color: rgba(255, 255, 255, 0.95);
}

.chat-pin-button {
  margin-left: auto;
  flex-shrink: 0;
  padding: 0.2cqh 0.4cqh;
  font: 1.6cqh / 1 'DejaVuSans', sans-serif;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 0.4cqh;
  cursor: var(--cursor-pointer);
}

.chat-pin-button:hover {
  background: rgba(255, 255, 255, 0.12);
}

.map,
.map-reverse {
  width: 100%;
  height: 100%;
  position: relative;
  box-shadow: 0 0 0.5cqw rgba(0, 0, 0, 0.9);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 107%;
  border-radius: 50%;
}

.map {
  background-image: url('img/map.png');
}

.map-reverse {
  background-image: url('img/map.png');
}

.map-item-1,
.map-item-2,
.map-item-3,
.map-item-4,
.map-item-5,
.map-item-6 {
  position: absolute;
  width: 12%;
  height: 12%;
  background-color: rgba(255, 255, 255, 0.3);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 110%;
  border-radius: 50%;
  backdrop-filter: blur(0.2cqw);
}

.map-item-1:hover,
.map-item-2:hover,
.map-item-3:hover,
.map-item-4:hover,
.map-item-5:hover,
.map-item-6:hover {
  background-color: rgba(255, 255, 255, 0.7);
}

.map-item-1 {
  left: 25%;
  top: 12%;
}

.map-item-2 {
  left: 44%;
  bottom: 46%;
}

.map-item-3 {
  left: 64%;
  bottom: 15%;
}

.map-item-4 {
  left: 20%;
  top: 37%;
}

.map-item-5 {
  left: 39%;
  bottom: 21%;
}

.map-item-6 {
  left: 11%;
  top: 62%;
}

.map-reverse .map-item-1 {
  left: 25%;
  top: 12%;
}

.map-reverse .map-item-2 {
  left: 44%;
  bottom: 46%;
}

.map-reverse .map-item-3 {
  left: 64%;
  bottom: 15%;
}

.map-reverse .map-item-4 {
  left: 51%;
  top: 19%;
}

.map-reverse .map-item-5 {
  left: 68%;
  bottom: 40%;
}

.map-reverse .map-item-6 {
  left: 79%;
  top: 25%;
}

@keyframes borderRotate {
  100% {
    --angle: 450deg;
  }
}

.game {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100cqw;
  height: 100cqh;
  border-radius: 3cqh;
  background-color: rgba(15, 15, 15, 0.7);
  container-type: size;
}

.game-description {
  font: 2.7cqh / 1.3 'DejaVuSans', sans-serif;
  color: rgba(255, 255, 255, 0.6);
  width: 60cqw;
  height: 100cqh;
  align-content: center;
}

.game-button {
  margin-top: 3cqh;
}

.game-rarity-general {
  width: 100cqw;
  height: 100cqw;
  background-size: contain;
  position: relative;
  margin: 2cqh 0;
}

.game-text {
  position: absolute;
  left: -30cqw;
  width: 10cqw;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 25cqw;
  text-shadow: rgba(0, 0, 0, 0.3) 0 0 1cqh;
}

.game-description p {
  font-style: italic;
}
.game-scoring {
  width: 5cqw;
  height: 100cqh;
  position: relative;
  container-type: size;
}
.game-info {
  width: 100cqw;
  height: 9cqh;
  position: relative;
  justify-self: center;
  align-content: center;
  container-type: size;
}
.game-info span {
  margin: 1cqw 0;
}

.game-field-scoring-container {
  width: 100cqw;
  height: 90cqh;
  display: flex;
  position: relative;
  container-type: size;
  justify-content: center;
  align-items: center;
}

.game-field {
  width: 90cqw;
  height: 100cqh;
  position: relative;
  justify-self: center;
  container-type: size;
}

.game-view-score {
  width: 200cqw;
  height: 100cqh;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 800;
  text-shadow: rgba(0, 0, 0, 0.5) 0 0 0.5cqw;
  position: absolute;
  left: -50cqw;
}

.game-view-info {
  width: 100cqw;
  color: rgba(255, 255, 255, 0.3);
  text-align: center;
  display: flex;
  justify-content: center;
  font-size: 2cqw;
  text-wrap: nowrap;
}
.game-view-info div {
  margin: 0 10cqh;
}

.game-unit-item,
.game-unit-bg {
  width: 100cqw;
  height: 100cqh;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 100cqh;
  position: absolute;
  transform: scale(0.9);
  opacity: 0;
}
.unit-container {
  width: calc(min(95cqh / 10, 95cqw / 15));
  height: calc(min(95cqh / 10, 95cqw / 15));
  position: absolute;
  left: calc(max(0cqh, (100cqw - (min(95cqh / 10, 95cqw / 15) * 15)) / 2));
  top: calc(max(0cqh, (100cqh - (min(95cqh / 10, 95cqw / 15) * 10)) / 2));
  container-type: size;
}
.game-unit-item {
  z-index: 9999;
}
.game-unit-bg {
  z-index: 9998;
}

.aram-background {
  position: relative;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  height: 100vh;
}

.aram-background-part {
  position: absolute;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  height: 100vh;
  backdrop-filter: blur(5vmax);
}

.aram-text {
  font: 2vw / 1.4 'DejaVuSans', sans-serif;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  color: rgba(255, 255, 255, 0.9);
  opacity: 0;
}

.aram-text h1 {
  font-size: 4vw;
  padding: 0;
  margin: 0;
}

.aram-text-center {
  margin-left: 25%;
  width: 55%;
}

.aram-briefing {
  position: absolute;
  width: 38vw;
  height: 38vh;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 2vw;
  top: 20vh;
  left: 14vw;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 15cqh rgba(0, 0, 0, 1);
}

.aram-timer {
  position: absolute;
  bottom: -2vh;
  background: rgba(255, 50, 0, 0.9);
  font: 1.5vw / 1 'DejaVuSans', sans-serif;
  color: rgba(255, 255, 255, 0.9);
  padding: 1cqh 1cqw;
  border-radius: 0.8vw;
  text-shadow: rgba(0, 0, 0, 0.3) 0 0 1cqw;
}

.aram-briefing-left {
  top: 25%;
  left: 8%;
  position: absolute;
  width: 15%;
  aspect-ratio: 1/1;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  border-radius: 50%;
}

.aram-random {
  animation: rotate 1.3s linear infinite;
  z-index: 2;
  background-image: url('img/l1.png');
  aspect-ratio: 1/1;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
}

.aram-briefing-right {
  width: 50%;
  padding: 0 3%;
}

.aram-briefing-right h3 {
  margin: 0;
  font: 1.2cqw / 1 'DejaVuSans', sans-serif;
  font-style: italic;
  color: rgba(255, 255, 255, 0.9);
}

.aram-briefing-right p {
  margin: 4% 0;
  font: 1cqw / 1.4 'DejaVuSans', sans-serif;
  color: rgba(255, 255, 255, 0.7);
}

.aram-hero-role {
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.5cqh 0.5cqw;
  border-radius: 0.4vw;
}

#wtop,
#whistory {
  container-type: size;
  position: absolute;
  margin-top: 10cqh;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  text-align: center;
  width: calc(min(150cqh, 95cqw) * 0.9);
  height: calc(80cqh*0.9);
  z-index: 9;
  /*background-color: #8d8b8b;*/
  border-radius: 2cqh;
  border: 0.1cqh solid rgb(158, 155, 104);
  background-image: linear-gradient(
    to bottom,
    rgba(4, 32, 42, 0.9),
    rgba(18, 69, 73, 0.85),
    rgba(21, 51, 59, 0.8),
    rgba(18, 69, 73, 0.85),
    rgba(4, 32, 42, 0.9)
  );
  display: flex;
  align-items: center;
}

#wtop {
  width: calc(min(150cqh, 95cqw) * 0.45);
}

#wbuild {
  container-type: size;
  position: absolute;
  margin-top: 12cqh;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  text-align: center;
  width: calc(min(135cqh, 95cqw) * 0.9);
  height: calc(min(85cqh, 60cqw) * 0.9);
  /*background-color: #8d8b8b;*/
  border-radius: .5cqh;
  border: 0.2cqh groove rgb(158, 155, 104);
  background-image: linear-gradient(
    to bottom,
    rgba(4, 32, 42, 0.9),
    rgba(18, 69, 73, 0.85),
    rgba(21, 51, 59, 0.8),
    rgba(18, 69, 73, 0.85),
    rgba(4, 32, 42, 0.9)
  );
  display: flex;
  align-items: center;
  z-index: 100;
}

#winventory {
  container-type: size;
  position: absolute;
  margin-top: 12cqh;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  text-align: center;
  width: calc(min(80cqh, 95cqw));
  height: 60cqh;
  /*background-color: #8d8b8b;*/
  border-radius: 2cqh;
  border: 0.1cqh solid rgb(158, 155, 104);
  background-image: linear-gradient(
    to bottom,
    rgba(4, 32, 42, 0.9),
    rgba(18, 69, 73, 0.85),
    rgba(21, 51, 59, 0.8),
    rgba(18, 69, 73, 0.85),
    rgba(4, 32, 42, 0.9)
  );
  display: flex;
  align-items: center;
}

#wgame {
  container-type: size;
  position: absolute;
  margin-top: 9cqh;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  text-align: center;
  width: calc(min(120cqh, 95cqw));
  height: 77cqh;
  /*background-color: #8d8b8b;*/
  border-radius: 2cqh;
  border: 0.1cqh solid rgb(158, 155, 104);
  background-image: linear-gradient(
    to bottom,
    rgba(4, 32, 42, 0.9),
    rgba(18, 69, 73, 0.85),
    rgba(21, 51, 59, 0.8),
    rgba(18, 69, 73, 0.85),
    rgba(4, 32, 42, 0.9)
  );
  display: flex;
  align-items: center;
}

#wquest {
  position: absolute;
  left: 50%;
  top: 15cqh;
  transform: translateX(-50%);
  z-index: 100;
  width: 80cqh;
  max-width: 92vw;
  height: auto;
  border-radius: 2cqh;
  border: 0.25cqh solid rgb(208, 180, 96);
  background-image: linear-gradient(
    to bottom,
    rgba(4, 32, 42, 0.96),
    rgba(18, 69, 73, 0.92) 40%,
    rgba(21, 51, 59, 0.9) 60%,
    rgba(18, 69, 73, 0.92)
  );
  box-shadow:
    0 0.6cqh 1.8cqh rgba(0, 0, 0, 0.45),
    inset 0 0 0.7cqh rgba(255, 255, 255, 0.06);
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: 1.6cqh;
  padding: 3.6cqh 3.6cqh 2.6cqh 14cqh;
  color: #e7f7f9;
  text-align: left;
  overflow: visible;
}

#wquest:hover {
  z-index: 140;
}
.wquest__avatar,
.quest_container {
  position: absolute;
  top: -6cqh;
  left: -4cqh;
  width: 15cqh;
  height: 15cqh;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.55),
    inset 0 0 0 2px rgba(212, 186, 92, 0.9);
  z-index: 10;
}
.wquest__avatar {
  position: relative;
  top: 0;
  left: 0;
}
/* --- Контейнер наград --- */
.wquest__rewards {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 1em;
  flex-wrap: wrap;
  margin-top: 0.8em;
  text-align: center;
}

/* --- Чип награды --- */
.wquest__chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4em;

  min-width: 70px;
  padding: 10px 8px 12px 8px;
  border-radius: 14px;

  box-shadow:
    inset 0 6px 12px rgba(0, 0, 0, 0.35),
    0 4px 10px rgba(0, 0, 0, 0.25);

  backdrop-filter: blur(2px);
  line-height: 1.1;
}

/* --- Иконка --- */
.wquest__chip-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: center / 70% no-repeat;
  background-color: rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* --- Значение под иконкой --- */
.wquest__chip-value {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #ffc24a;

  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.6),
    0 0 6px rgba(0, 0, 0, 0.25);
  margin-top: 4px;
}

#wquest .wquest__close {
  position: absolute;
  right: 1.2cqh;
  top: 1cqh;
  width: 3.2cqh;
  height: 3.2cqh;
  cursor: var(--cursor-pointer);
  user-select: none;
  display: block;
  filter: drop-shadow(0 0.6cqh 1.2cqh rgba(0, 0, 0, 0.35));
  transition:
    transform 0.08s ease,
    filter 0.15s ease;
}
#wquest .wquest__close:hover {
  filter: drop-shadow(0 0.8cqh 1.6cqh rgba(0, 0, 0, 0.45)) brightness(1.05);
}
#wquest .wquest__close:active {
  transform: translateY(0.2cqh) scale(0.98);
}

#wquest .wquest__rewards {
  display: flex;
  gap: 2.2cqh;
  align-items: center;
}
#wquest .wquest__rewards--center {
  justify-content: center;
}

#wquest .wquest__portrait {
  position: absolute;
  top: -5cqh;
  left: -5cqh;
  width: 18cqh;
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
  z-index: 2;
  border: 0.3cqh solid rgb(208, 180, 96);
  box-shadow:
    0 1cqh 2cqh rgba(0, 0, 0, 0.5),
    inset 0 0 0.5cqh rgba(255, 255, 255, 0.35);
  filter: drop-shadow(0 1.2cqh 1.8cqh rgba(0, 0, 0, 0.45));
}
#wquest .wquest__portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#wquest .wquest__titlebar {
  width: 100%;
  margin-bottom: 3cqh;
  background: linear-gradient(to bottom, rgba(255, 221, 120, 0.25), rgba(255, 221, 120, 0.06));
  border-radius: 1.2cqh;
  padding: 1.4cqh 1.8cqh;
  box-shadow:
    inset 0 0 0 0.2cqh rgba(255, 225, 150, 0.25),
    inset 0 1.2cqh 2.2cqh rgba(255, 255, 255, 0.07);
}
#wquest .wquest__title {
  margin: 0;
  font-size: 2.4cqh;
  font-weight: 800;
  text-align: center;
  color: #ffe79e;
  text-shadow: 0 0.3cqh 0.6cqh rgba(0, 0, 0, 0.55);
}
#wquest .wquest__subtitle {
  font-size: 1.6cqh;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
}

#wquest .wquest__body {
  background: rgba(0, 0, 0, 0.18);
  margin-bottom: 3cqh;
  border: 0.15cqh solid rgba(255, 255, 255, 0.12);
  border-radius: 1.2cqh;
  padding: 2cqh;
  line-height: 1.45;
  font-size: 1.75cqh;
  color: rgba(235, 249, 252, 0.95);
  box-shadow: inset 0 0.6cqh 1.2cqh rgba(0, 0, 0, 0.25);
}

#wquest .wquest__objective {
  background: linear-gradient(to bottom, rgba(20, 100, 110, 0.35), rgba(10, 50, 60, 0.35));
  border: 0.2cqh solid rgba(119, 210, 220, 0.45);
  border-radius: 1.2cqh;
  padding: 1.6cqh;
  box-shadow: inset 0 0 0.8cqh rgba(0, 0, 0, 0.25);
}
#wquest .wquest__objective-text {
  background: rgba(0, 0, 0, 0.15);
  border: 0.15cqh solid rgba(255, 255, 255, 0.12);
  border-radius: 0.8cqh;
  padding: 1.4cqh 1.6cqh;
  font-size: 1.75cqh;
  color: rgba(235, 249, 252, 0.96);
}

#wquest .wquest__rewards {
  display: flex;
  gap: 2.2cqh;
  align-items: center;
  margin-top: 0.4cqh;
}
#wquest .wquest__chip {
  display: flex;
  flex-direction: column; /* иконка сверху, цифра снизу */
  align-items: center;
  justify-content: flex-start;
  gap: 0.6cqh;

  /* убрана жёсткая внутренняя тень */
  box-shadow: none;

  line-height: 1.1;
}

#wquest .wquest__chip-icon {
  width: 11cqh;
  height: 11cqh;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
}

@media (max-width: 680px) {
  #wquest {
    padding-left: 11cqh;
  }
  #wquest .wquest__portrait {
    top: -4cqh;
    left: -4cqh;
    width: 15cqh;
  }
}

.wquest__content {
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  align-items: center;
  justify-items: center;
}

.quest-accept-button {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: rgba(0, 0, 0, 0.5) 0 0 0.5cqw;
  position: relative;
  background-image: url(img/button3.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.quest-button-text {
  font: 2.3cqh / 1 'DejaVuSans', sans-serif;
  width: 25cqw;
  padding: 1.8cqh;
  text-align: center;
}

.quest-accept-button:hover {
  background-image: url(img/button1.png);
  background-repeat: no-repeat;
  transform: scale(1.02);
}

.keybindings-controls {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  border-top: 0.1cqh solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 -0.2cqh 1cqh rgba(0, 0, 0, 0.3);
}

.keybindings-wrapper {
  width: calc(100% - 1cqh);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin-top: 6cqh;
  overflow-y: auto;
  overflow-x: hidden;
  margin-right: 1cqh;
}

.keybindings-wrapper::-webkit-scrollbar,
.wtop-list-scroll::-webkit-scrollbar {
  height: 100%;
  width: 3.5cqh;
  background: #103b41b7;
  border-radius: 2cqh;
  border-left: 0.1cqh solid rgba(255, 255, 255, 0.1);
  border-right: 0.1cqh solid rgba(0, 0, 0, 0.2);
}

.keybindings-wrapper::-webkit-scrollbar-thumb,
.wtop-list-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #388484, #196a6d);
  border: 0.2cqh solid transparent;
  background-clip: padding-box;
  min-height: 200px;
  box-shadow: 0px 0.5cqh 1cqh 0px rgba(0, 0, 0, 0.2);
}

.keybindings-wrapper::-webkit-scrollbar-button,
.wtop-list-scroll::-webkit-scrollbar-button {
  display: none;
}

.keybindings-wrapper::-webkit-scrollbar-button:single-button,
.wtop-list-scroll::-webkit-scrollbar-button:single-button {
  display: block;
  background-size: 80% 60%;
  background-repeat: no-repeat;

  height: auto;
}

.keybindings-wrapper::-webkit-scrollbar-button:single-button:vertical:decrement,
.wtop-list-scroll::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><path d='M5 1 Q5.3 1 5.6 1.4 L8.6 6.6 Q9 7 8.4 7 H1.6 Q1 7 1.4 6.6 L4.4 1.4 Q4.7 1 5 1 Z' fill='%23f5c542'/></svg>");

  border-radius: 2cqh 2cqh 0 0 / 2cqh 2cqh 0 0;
  background-position: 50% 60%;
  border-top: 0.1cqh solid rgba(255, 255, 255, 0.2);
}

.keybindings-wrapper::-webkit-scrollbar-button:single-button:vertical:increment,
.wtop-list-scroll::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><path d='M5 9 Q5.3 9 5.6 8.6 L8.6 3.4 Q9 3 8.4 3 H1.6 Q1 3 1.4 3.4 L4.4 8.6 Q4.7 9 5 9 Z' fill='%23f5c542'/></svg>");
  border-radius: 0 0 2cqh 2cqh / 0 0 2cqh 2cqh;
  background-position: 80% 40%;
}

.keybinding-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 3cqh;
  border-top: 0.1cqh solid rgba(255, 255, 255, 0.2);
}

.keybinding-group-rows {
  width: 100%;
  padding: 0 3cqh;
  box-sizing: border-box;
}

.keybinding-row {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0 0;
  font-size: 3cqh;
}

.keybinding-label {
  width: 60%;
  text-align: left;
  font: 2.5cqh / 1 'DejaVuSans', sans-serif;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: rgba(0, 0, 0, 0.3) 0 0 0.5cqh;
}

.castle-keybinding-input {
  flex-shrink: 0;
  width: 30%;
  height: 4cqh;
  text-align: center;
  font-size: 2.5cqh;
  background: #0d3f3d;
  border-radius: 1.5cqh;
  box-shadow:
    0px 0.2cqh 0.2cqh 0.05cqh rgba(255, 255, 255, 0.336),
    /* white glow at bottom */ inset 0px 1.2cqh 1cqh -0.8cqh rgba(0, 0, 0, 0.8) /* inner black shadow at top */;
  color: #ffe5b7;
  transition: all 0.2s;
  text-shadow:
    -1px -1px 0 #612e0c,
    1px -1px 0 #612e0c,
    -1px 1px 0 #612e0c,
    1px 1px 0 #612e0c;
}

.keybinding-group-title {
  font: 5cqw / 1.2 'DejaVuSans', sans-serif;
  color: #ffe5b7;
  text-shadow:
    -1px -1px 0 #612e0c,
    1px -1px 0 #612e0c,
    -1px 1px 0 #612e0c,
    1px 1px 0 #612e0c;
  margin: 0;
  text-align: left;
  position: relative;
  padding: 1.5cqh 3cqh;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 1%, rgba(255, 255, 255, 0) 100%);
}

#wcastle-keybindings {
  container-type: size;
  position: absolute;
  margin-top: 18cqh;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  text-align: center;
  height: 59cqh;
  aspect-ratio: 500 / 660;
  border-radius: 2cqh;
  border: 0.1cqh solid rgb(158, 155, 104);
  background-image: linear-gradient(
    to bottom,
    rgba(4, 32, 42, 0.9),
    rgba(18, 69, 73, 0.85),
    rgba(21, 51, 59, 0.8),
    rgba(18, 69, 73, 0.85),
    rgba(4, 32, 42, 0.9)
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffe5b7;
  text-shadow:
    -1px 1px 0 #333333,
    1px -1px 0 #333333,
    -1px -1px 0 #333333,
    1px 1px 0 #333333;
  transition: background-color 0.3s ease-in-out;
}

#wcastle-keybindings:hover, #wcastle-menu:hover {
  background-color: #8d8b8b81;
}

/* Стили для кнопок */
.reset-btn {
  background-image: linear-gradient(to bottom, rgba(255, 235, 59, 0.3), rgba(245, 166, 35, 0.3));
}

.save-btn {
  background-image: linear-gradient(to bottom, rgba(76, 175, 80, 0.3), rgba(56, 142, 60, 0.3));
}

/* Анимации */
.input-success {
  background-color: rgba(76, 175, 80, 0.3) !important;
}

.input-error {
  background-color: rgba(244, 67, 54, 0.3) !important;
}

.action-success {
  background-image: linear-gradient(to bottom, rgba(76, 175, 80, 0.7), rgba(56, 142, 60, 0.7)) !important;
}

.action-error {
  background-image: linear-gradient(to bottom, rgba(244, 67, 54, 0.5), rgba(211, 47, 47, 0.5)) !important;
}

.menu-icons {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  width: 100cqw;
  margin-bottom: 5cqw;
  position: relative;
  container-type: inline-size;
}

.menu-icons img {
  width: calc(50cqw / 3);
  height: calc(50cqw / 3);
  margin: 0cqw 3.5cqw;
}

.support-text {
  width: 100cqw;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: rgba(0, 0, 0, 0.3) 0 0 1cqw;
  font: 7cqw / 1 'DejaVuSans', sans-serif;
  position: absolute;
  top: 18cqw;
}

.support-icons {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  width: 90cqw;
  position: absolute;
  top: 45cqw;
}
/* success icon */
i-success {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin: 0cqw 0.5cqw;
  background-image: url('ranks/99.png');
  background-size: cover;
  vertical-align: sub;
}

.support-icons img {
  width: 60%;
  height: auto;
  margin: 0cqw 0.5cqw;
}

.voice-info-panel {
  position: fixed;
  top: 27vh;
  display: none;
  flex-flow: column nowrap;
  justify-content: center;
  z-index: 9996;
}

/* Dedicated style hooks for detached voice window mode.
   You can safely tweak these values later without touching JS. */
.voice-window-mode {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  transform: none !important;
  z-index: 1 !important;
  --voice-monitor-scale: 1;
  --voice-window-size-factor: 0.9;
}

.voice-window-mode,
.voice-window-mode * {
  cursor: var(--cursor-default);
}

.voice-window-mode .voice-info-panel-body-item-name,
.voice-window-mode .voice-info-panel-body-item-mute,
.voice-window-mode .voice-info-panel-close,
.voice-window-mode button,
.voice-window-mode [role='button'],
.voice-window-mode a:any-link {
  cursor: var(--cursor-pointer);
}

.voice-window-mode .voice-info-panel-close {
  display: none !important;
}

.voice-window-mode .voice-info-panel-body {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: calc(26px * var(--voice-monitor-scale) * var(--voice-window-size-factor)) calc(22px * var(--voice-monitor-scale) * var(--voice-window-size-factor)) !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
  border-width: 0 !important;
  opacity: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable !important;
}

/* Full set of dedicated window-mode analog styles for voice UI.
   Edit these rules to tune popup appearance independently. */
.voice-window-mode .voice-info-panel-body-tutorial {
  font-size: calc(14px * var(--voice-monitor-scale) * var(--voice-window-size-factor));
  font-family: 'DejaVuSans', sans-serif;
  color: rgb(255, 232, 29, 1);
  text-shadow: 2px 2px 4px black;
  margin: calc(10px * var(--voice-monitor-scale) * var(--voice-window-size-factor)) 0 calc(8px * var(--voice-monitor-scale) * var(--voice-window-size-factor)) 0;
  line-height: 1.25;
}

.voice-window-mode .voice-info-panel-body-item {
  display: flex;
  margin-bottom: calc(14px * var(--voice-monitor-scale) * var(--voice-window-size-factor));
  flex-flow: column nowrap;
}

.voice-window-mode .voice-info-panel-body-item-controls {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--voice-monitor-scale) * var(--voice-window-size-factor));
  min-width: 0;
  width: 100%;
}

.voice-window-mode .voice-info-panel-body-item-mute {
  font-size: calc(28px * var(--voice-monitor-scale) * var(--voice-window-size-factor));
  line-height: 1;
}

.voice-window-mode .voice-info-panel-body-item-muted-by {
  font-size: calc(22px * var(--voice-monitor-scale) * var(--voice-window-size-factor));
  line-height: 1;
  color: #ff3b30;
  text-shadow: 0 0 6px rgba(255, 59, 48, 0.65);
  user-select: none;
}

.voice-window-mode .voice-info-panel-body-item-nostream {
  animation: pulse 2s infinite;
}

.voice-window-mode .voice-info-panel-body-item-name {
  font-size: calc(20px * var(--voice-monitor-scale) * var(--voice-window-size-factor));
  font-family: 'DejaVuSans', sans-serif;
  font-weight: bold;
  color: rgb(255, 232, 29, 1);
  margin-bottom: calc(6px * var(--voice-monitor-scale) * var(--voice-window-size-factor));
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 2px 2px 4px black;
}

.voice-window-mode .voice-info-panel-body-item-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10px * var(--voice-monitor-scale) * var(--voice-window-size-factor));
  position: relative;
}

.voice-window-mode .voice-info-panel-body-item-bar {
  flex-grow: 1;
  height: calc(18px * var(--voice-monitor-scale) * var(--voice-window-size-factor));
  background: rgba(255, 255, 255, 0.1);
  border-radius: calc(12px * var(--voice-monitor-scale) * var(--voice-window-size-factor));
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 0.5em rgba(0, 0, 0, 0.3);
}

.voice-window-mode .voice-info-panel-body-item-volume {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: calc(12px * var(--voice-monitor-scale) * var(--voice-window-size-factor));
  font-family: 'DejaVuSans', sans-serif;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  user-select: none;
}

.voice-window-mode .voice-info-panel-body-item-bar-level {
  height: 100%;
  background: linear-gradient(90deg, #8b5cf6, #d946ef, #ec4899);
  border-radius: calc(12px * var(--voice-monitor-scale) * var(--voice-window-size-factor));
  width: 0%;
  transition: width 0.1s ease;
  position: relative;
  overflow: hidden;
}

.voice-window-mode .voice-info-panel-body-item-bar-level-muted {
  background: transparent;
}

.voice-window-mode .voice-info-panel-body-item-bar-level-muted::before {
  display: none;
}

.voice-window-mode .voice-info-panel-body-item-bar-level::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: volumeShine 2s infinite;
}

.voice-info-panel-close {
  position: absolute;
  top: -0.9cqh;
  right: -0.9cqh;
  width: 2.8vh;
  height: 2.8vh;
  min-width: 2.8vh;
  min-height: 2.8vh;
  background-image: url('content/icons/close-cropped.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none;
  opacity: 1;
  display: block;
  z-index: 9997;
  transform: none !important;
}

.voice-info-panel-close:hover {
  transform: scale(1.08) !important;
}

.left-offset-with-shift {
  position: absolute;
  left: 10vh;
}

.left-offset-no-shift {
  position: absolute;
  left: 0vh;
}

.voice-info-panel-body {
  background-image: linear-gradient(1turn, rgba(25, 71, 67, 0.8), rgba(18, 69, 73, 0.9), rgba(21, 51, 59, 0.8), rgba(4, 32, 42, 0.8));
  border-radius: 1cqh 1cqh 1cqh 1cqh / 1cqh 1cqh 1cqh 1cqh;
  border: 0.2cqh groove rgb(158, 155, 104);
  opacity: 0.8;
  width: 7vw;
  padding: 2vh 1vw;
  z-index: 9996;
}

.voice-info-panel-body-tutorial {
  font-size: clamp(0.5em, 0.3vw, 0.5em);
  font-family: 'DejaVuSans', sans-serif;
  color: rgb(255, 232, 29, 1);
  text-shadow: 2px 2px 4px black;
  margin: 0.3vh;
}

.voice-info-panel-hint-divider {
  display: block;
  width: 100%;
  height: 1px;
  margin: 0.15em 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
}

.voice-info-panel-body-item {
  display: flex;
  margin-bottom: 1vh;
  flex-flow: column nowrap;
}

.voice-info-panel-body-item-controls {
  display: flex;
  align-items: center;
  gap: 0.4cqw;
  min-width: 0;
}

.voice-info-panel-body-item-mute {
  font-size: clamp(0.9em, 1.2vw, 1.6em);
  line-height: 1;
}

.voice-info-panel-body-item-muted-by {
  font-size: clamp(0.8em, 1.1vw, 1.4em);
  line-height: 1;
  color: #ff3b30;
  text-shadow: 0 0 0.4em rgba(255, 59, 48, 0.65);
  user-select: none;
}

.voice-info-panel-body-item-nostream {
  animation: pulse 2s infinite;
}

.voice-info-panel-body-item-name {
  font-size: clamp(0.5em, 0.5vw, 1em);
  font-family: 'DejaVuSans', sans-serif;
  font-weight: bold;
  color: rgb(255, 232, 29, 1);
  margin-bottom: 0.1vh;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 2px 2px 4px black;
}

.voice-info-panel-body-item-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1vw;
  position: relative;
}

.voice-info-panel-body-item-bar {
  flex-grow: 1;
  height: 0.7em;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0.4em;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 0.5em rgba(0, 0, 0, 0.3);
}

.voice-info-panel-body-item-volume {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(0.45em, 0.55vw, 0.85em);
  font-family: 'DejaVuSans', sans-serif;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 0 0.35em rgba(0, 0, 0, 0.85);
  pointer-events: none;
  user-select: none;
}

.voice-info-panel-body-item-bar-level {
  height: 100%;
  background: linear-gradient(90deg, #8b5cf6, #d946ef, #ec4899);
  border-radius: 0.4em;
  width: 0%;
  transition: width 0.1s ease;
  position: relative;
  overflow: hidden;
  /*animation:pulse 2s infinite;*/
}

.voice-info-panel-body-item-bar-level-muted {
  background: transparent;
}

.voice-info-panel-body-item-bar-level-muted::before {
  display: none;
}

.voice-info-panel-body-item-bar-level::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: volumeShine 2s infinite;
}
.modal-wrapper{
    width: 70cqh;
    height: 50cqh;
    border-radius: 1cqh;
    padding: 0 0 .2cqh 0;
    border: .1cqh groove rgba(255, 186, 57, 0.774);
}
.title-modal {
    display: flex;
    width: 100%;
    height: 2.2cqh;
    position: absolute;
    border-radius: .8cqh;
    justify-content: center;
    align-items: center;
    color: rgba(255, 255, 255, 0.705);
    top: 0;
    left: 0;
    z-index: 0.5;
    
}

.title-modal:before,.title-modal:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    border-radius: .8cqh;
}

.title-modal:before {
    left: 0;
    background-size: auto 100%;
    width: 16.5cqh;
    background-repeat: no-repeat;
    background-image: url(img/modalHeader.png);
    border-radius: .8cqh 0 0;
    z-index: -1;
    font-family: 'DejaVuSans', sans-serif
}

.title-modal:after {
    left: 16.4cqh;
    right: 0;
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-image: url(img/modalHeaderRight.png);
    border-radius: 0 .8cqh 0 0;
    z-index: -1
}
.modal-content{
    border-top: .1cqh groove rgb(255, 186, 57);
    width: 100%;
    height: 47.8cqh;
    background-color: rgba(16, 56, 59, 0.836);
    backdrop-filter: blur(1px);
    border-radius: 0 0 .8cqh .8cqh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.title-modal-text{
  font-size: 1.65cqh;
    text-shadow: rgba(0, 0, 0, .5) 0.1cqh 0.1cqh 0.1cqh, rgba(0, 0, 0, .5) 0.1cqh -0.1cqh 0.1cqh, rgba(0, 0, 0, .5) -0.1cqh 0.1cqh 0.1cqh, rgba(0, 0, 0, .5) -0.1cqh -0.1cqh 0.1cqh;
  color: rgb(252, 229, 188);
}
#wcastle-call,
#wcastle-invite {
  container-type: inline-size;
  position: absolute;
  margin-top: 30cqh;
  padding: 1cqh 3cqh;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  text-align: center;
  width: 35cqh;
  height: 17cqh;
  border-radius: 2cqh;
  /* Фоновый рисунок как в splash без градиента */
  /* background-image: url(img/main.png); */
  background:linear-gradient( rgba(12, 41, 43, 0.836),  rgba(20, 71, 73, 0.918));
  backdrop-filter: blur(1px);
  border-radius: .8cqh;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'DejaVuSans', sans-serif;
  color: rgba(255, 255, 255, 0.9);
  border: .1cqh groove rgba(255, 186, 57, 0.774);
  filter: drop-shadow(0 0 2cqh black);
  z-index: 9999;
}

body:has(#wcastle-invite)::before,
body:has(#wcastle-call)::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(1vmax);
  z-index: 9998;
}


.castle-menu-items-modal{
  width: 100%;
  height: 20%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-top: 5cqh;
}
.splash-content-button-modal{
  width: 15cqh;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin-top: 2cqmin;
  margin-left: auto;
  margin-right: auto;
  padding: 1.8cqmin;
  font-size: 1.6cqh;
  background: url('img/button4.png') no-repeat center center/contain;
  color: white;
  border: none;
  /*border-radius: 50px;*/
  cursor: var(--cursor-pointer);
  transition: all 0.25s ease-out;
  text-shadow: rgba(0, 0, 0, .5) 0.1cqh 0.1cqh 0.1cqh, rgba(0, 0, 0, .5) 0.1cqh -0.1cqh 0.1cqh, rgba(0, 0, 0, .5) -0.1cqh 0.1cqh 0.1cqh, rgba(0, 0, 0, .5) -0.1cqh -0.1cqh 0.1cqh;
  color: rgb(252, 229, 188);
    filter: brightness(1.1);
}
#splash-content-button-modal-red{
  background: url('img/button5.png') no-repeat center center/contain;
}
.splash-content-button-modal:hover{
  filter: brightness(.9);
}
#wcastle-menu,
#wcastle-render-debug {
  container-type: inline-size;
  position: absolute;
  margin-top: 15cqh;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  text-align: center;
  width: calc(min(35cqh, 25cqw));
  /*height: 59cqh;*/
  /*background-color: #8d8b8b;*/
  border-radius: 1cqh;
  border: 0.1cqh solid rgb(158, 155, 104);
  background-image: linear-gradient(
    to bottom,
    rgba(4, 32, 42, 0.9),
    rgba(18, 69, 73, 0.85),
    rgba(21, 51, 59, 0.8),
    rgba(18, 69, 73, 0.85),
    rgba(4, 32, 42, 0.9)
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1cqh 1cqh;
  transition: background-color 0.3s ease-in-out;
  position: fixed;
  padding-top: 3cqh;
}

#wcastle-menu {
  z-index: 2147483647 !important;
}

#wcastle-render-debug {
  bottom: 0;
}
#wsteamauth {
  container-type: inline-size;
  position: absolute;
  margin-top: 5cqh;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  text-align: center;
  width: calc(min(60cqh, 40cqw));
  /*height: 59cqh;*/
  /*background-color: #8d8b8b;*/
  border-radius: 2cqh;
  border: 0.1cqh solid rgb(158, 155, 104);
  background-image: linear-gradient(
    to bottom,
    rgba(4, 32, 42, 1),
    rgba(18, 69, 73, 1),
    rgba(21, 51, 59, 1),
    rgba(18, 69, 73, 1),
    rgba(4, 32, 42, 1)
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1cqh 1cqh;
}

.castle-menu-title {
  width: 100cqw;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: rgba(0, 0, 0, 0.3) 0 0 1cqw;
  font: 1.5cqh 'DejaVuSans', sans-serif;
  margin-top: 3cqh;
}
.castle-menu-items {
  width: 100cqw;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.castle-menu-text {
  width: 80cqw;
  color: rgba(252, 229, 188, 0.9);
  text-shadow: rgba(0, 0, 0, 0.3) 0 0 1cqw;
  font: 6cqw / 1 'DejaVuSans', sans-serif;
  line-height: 7cqw;
  text-align: center;
  padding: 1cqw 1cqw;
  margin: 4cqw 1cqw;
  align-self: center;
}

.castle-menu-item-checkbox {
  width: 90cqw;
  color: rgba(252, 229, 188, 0.9);
  text-shadow: rgba(0, 0, 0, 0.3) 0 0 1cqw;
  text-align: left;
  font: 7cqw / 1 'DejaVuSans', sans-serif;
  padding: 1cqw 1cqw;
  margin: 1cqw 2cqw;
  position: relative;
}

.castle-menu-item-checkbox.is-disabled {
  opacity: 0.45;
}

.castle-menu-item-checkbox.is-disabled label {
  filter: grayscale(0.35);
}

.castle-menu-item-checkbox input[type='checkbox'] {
  appearance: none;
  width: 10cqw;
  height: 10cqw;
  background-color: transparent;
  position: absolute;
  right: 0cqw;
  top: 50%;
  transform: translateY(-50%);
}

.castle-menu-item-checkbox input[type='checkbox']::before {
  content: '';
  width: 100%;
  height: 100%;
  background-image: url('icons/circle.webp');
  background-size: cover;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
}

.castle-menu-item-checkbox input[type='checkbox']:checked::before {
  background-image: url('icons/checkbox.webp');
}

.castle-menu-item-button {
  width: 90cqw;
  height: 8cqw;
  color: rgba(252, 229, 188, 0.9);
  text-shadow: rgba(0, 0, 0, 0.3) 0 0 1cqw;
  font: 8cqw / 1 'DejaVuSans', sans-serif;
  text-align: center;
  padding: 2cqw 2cqw;
  margin: 2cqw 1cqw;
  border-radius: 2cqw;
  border: 0.2cqw solid rgb(158, 155, 104);
  background-color: #002724;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 0 1cqmin 1cqw rgba(0, 0, 0, 0.18), /* inner shadow for depth */
    inset 0 0 0 0.2cqw rgba(21, 23, 12, 1), /* inner border */
    0 0 0 0.2cqw rgba(69, 67, 40, 1) /* outer border */
    ; 
  } 

.castle-menu-item-button::before {
  content: '';
  inset: 0;
  position: absolute;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.25),
    transparent 20%
  );
  mix-blend-mode: color-dodge;
  pointer-events: none;
}

.castle-menu-item-button--red::before {
  background: linear-gradient(
    to bottom,
    #a1765b ,
    transparent 20%
  );
  mix-blend-mode: hard-light;
}

/* top light */
.castle-menu-item-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80%;
  border-radius: 50%;
  transform: translateY(-40%);
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.25),
    rgba(255, 255, 255, 0.08)
  );
  pointer-events: none;
}


.castle-menu-item-button--small {
  width: 30cqw;
  height: 4cqw;
  font: 4cqw / 1 'DejaVuSans', sans-serif;
  padding: 1.5cqw 2cqw;
}

.castle-menu-item-button--red {
  background-image: linear-gradient(
    to bottom,
    #634232 0%,
    #3b0f02 25%,
    #381001 100%
  );
  color: #f0c9b3;
}

.castle-menu-label {
  width: 90cqw;
  color: rgba(252, 229, 188, 0.9);
  text-shadow: rgba(0, 0, 0, 0.3) 0 0 1cqw;
  font: 8cqw / 1 'DejaVuSans', sans-serif;
  text-align: center;
  padding: 1cqw 1cqw;
  margin: 1cqw 1cqw;
}

.castle-menu-label-description {
  width: 90cqw;
  color: rgba(255, 255, 255, 0.6);
  text-shadow: rgba(0, 0, 0, 0.3) 0 0 1cqw;
  font: 4cqw / 1 'DejaVuSans', sans-serif;
  text-align: center;
  padding: 1cqw 1cqw;
  margin: 4cqw 1cqw;
  line-height: normal;
}

.castle-menu-slider {
  width: 90%;
  height: 5cqw;
  border-radius: 3cqh;
  border: 0.1cqh solid rgb(158, 155, 104);
  background-image: linear-gradient(
    to bottom,
    rgba(216, 216, 216, 0.8),
    rgba(18, 69, 73, 0.8),
    rgba(21, 51, 59, 0.8),
    rgba(18, 69, 73, 0.8),
    rgba(66, 71, 73, 0.8)
  );
  -webkit-appearance: none;
  appearance: none;
}

.castle-menu-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 5cqw;
  border-radius: 3cqh;
  background: linear-gradient(
    to right,
    rgba(0, 100, 150, 0.9) 0%,
    rgba(0, 100, 150, 0.9) var(--fill-percentage, 0%),
    transparent var(--fill-percentage, 0%),
    transparent 100%
  );
}

.castle-menu-slider::-moz-range-progress {
  height: 5cqw;
  border-radius: 3cqh 0 0 3cqh;
  background: rgba(0, 100, 150, 0.9);
}

.castle-menu-slider::-moz-range-track {
  width: 100%;
  height: 5cqw;
  border-radius: 3cqh;
  background: transparent;
}

.castle-menu-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 6cqw;
  height: 6cqw;
  border-radius: 50%;
  border: 0.1cqw solid rgb(158, 155, 104);
  background: rgba(4, 32, 42, 0.8);
  margin-top: -0.5cqw;
  position: relative;
  z-index: 2;
  cursor: var(--cursor-pointer);
}

.castle-menu-slider::-webkit-slider-thumb:hover {
  transform: scale(1.6);
}

.castle-menu-slider::-moz-range-thumb {
  transform: scale(1.6);
  border: 0;
  border-radius: 50%;
  background: url('./icons/slider.png') center center no-repeat;
  background-size: contain;
  cursor: var(--cursor-pointer);
  transition: .05s linear;
  filter: drop-shadow(0 0 .4cqh black);
}

#viewbuild {
  container-type: size;
  position: absolute;
  margin-top: 11cqh;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  text-align: center;
  width: calc(min(160cqh, 95cqw));
  height: 85cqh;
  border-radius: 2cqh; 
  border: 0.1cqh solid rgb(158, 155, 104);
  background-image: linear-gradient(
    to bottom,
    rgba(4, 32, 42, 0.9),
    rgba(18, 69, 73, 0.85),
    rgba(21, 51, 59, 0.8),
    rgba(18, 69, 73, 0.85),
    rgba(4, 32, 42, 0.9)
  );

  display: flex;
  align-items: center;
}

.build-horizontal {
  width: 100cqw;
  height: 80cqh;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.build-left {
  width: 20.6cqw;
  height: 100cqh;
  container-type: size;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.build-center {
  width: 50.4cqw;
  height: 80cqh;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.build-right {
  width: 29cqw;
  height: 100cqh;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 5;
}

.build-hero {
  width: 100cqw;
  height: 80cqh;
  container-type: size;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
}

/* Контейнер: аватар слева, кнопки справа столбиком. Нужна явная ширина — иначе cqmin у .avatar сходит в 0 */
.build-hero-avatar-and-name {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 1cqmin;
  width: 60cqh;
  max-width: 138cqw;
  box-sizing: border-box;
  container-type: inline-size;
  position: absolute;
  top: -8.5cqh;
  left:-5.5cqh;
}

.build-hero-avatar-actions {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  gap: 0.5cqh;
  flex: 0 0 auto;
  min-width: 0;
  position: relative;
  top: 4.9cqh;
}

.build-hero-avatar-actions .btn-skins {
  margin: 0;
  align-self: stretch;
}

.build-hero-nav-btn {
  width: 4cqh;
  height: 4cqh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  cursor: var(--cursor-pointer);
  opacity: 1 !important;
  filter: none !important;
  transform: scale(1);
  transition:
    transform 120ms ease,
    filter 120ms ease;
}

.build-hero-nav-btn:hover {
  transform: scale(1.08);
  filter: brightness(1.14) drop-shadow(0 0 0.5cqh rgba(255, 255, 255, 0.35)) !important;
}

.build-hero-nav-controls {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: 7;
}

.build-hero-nav-btn-left {
  position: absolute;
  top: -9cqh;
  left: 3.3cqh;
  width: 6cqh;
  height: 6cqh;
}

.build-hero-nav-btn-right {
  position: absolute;
  top: -9cqh;
  left: 18.9cqh;
  width: 6cqh;
  height: 6cqh;
}

.build-avatar-wrap {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  top: 0cqh;
}


.build-avatar-wrap .avatar {
  position: relative;
  cursor: var(--cursor-pointer);
  transition: filter 120ms ease, transform 120ms ease;
}

.build-avatar-wrap .avatar:hover {
  filter: brightness(0.80) contrast(1.05);
}


.build-avatar-tip {
  position: fixed;
  left: 0;
  top: 0;

  width: min(360px, 60vw);
  max-height: min(240px, 45vh);
  overflow: auto;

  padding: 10px 12px;

  background: rgba(25, 25, 25, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;

  color: #fff;
  font-family: 'DejaVuSans', sans-serif;
  font-size: 13px;
  line-height: 1.25;

  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(-6px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 0ms linear 140ms;

  z-index: 9999;
}
.build-avatar-tip.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 140ms ease, transform 140ms ease, visibility 0ms;
}

.build-avatar-tip .tip-title {
  font-weight: 700;
  font-size: 11.5px;
  margin-bottom: 6px;
  text-align: center;
}


.build-avatar-tip .tip-body {
  font-size: 10.8px;
  opacity: 0.95;
  white-space: pre-line;
  text-align: center;
}

.build-hero-avatar-and-name .name {
  text-align: center;
  color: #fff;
  font-family: 'DejaVuSans', sans-serif;
  font-size: 4cqmin;
  height: 4cqmin;
  line-height: 4cqmin;
}


.build-field-with-tabs {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.build-field-container {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.build-actions-view {
  width: 40cqh;
  container-type: inline-size;
  display: flex;
  flex-direction: row;
  justify-content: center;
  position: absolute;
  top: -8cqh;
}

.chat-flag {
    height: 2cqh;
    width: 2cqh;
    margin-right: 0.2cqh;
    margin-left: 0.2cqh;
    margin-bottom: -0.2cqh;
    display: inline-block;
}

.chat-source-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1cqh;
  height: 2.1cqh;
  margin-right: 0.25cqh;
  margin-left: 0.1cqh;
  margin-bottom: -0.25cqh;
  border-radius: 0.45cqh;
  background: rgba(16, 44, 58, 0.9);
  color: rgba(232, 247, 255, 0.96);
  font: 1.1cqh / 1 'DejaVuSans', sans-serif;
  font-weight: 700;
  letter-spacing: 0.04cqh;
  box-shadow: inset 0 0 0 0.07cqh rgba(160, 198, 224, 0.45);
}

.chat-source-icon-telegram {
  background-image: url('icons/telegram.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgba(17, 96, 146, 0.18);
  box-shadow: none;
}

.chat-source-icon-phone {
  background: transparent;
  color: rgba(215, 241, 255, 0.98);
  box-shadow: none;
  min-width: auto;
  width: 2.1cqh;
  font-size: 1.9cqh;
}

.chat-source-icon-steam {
  background-image: url('icons/steam2.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  box-shadow: none;
}

@media (max-aspect-ratio: 1/1) {
  .build-sets-section,
  .build-sets {
    display: none;
  }
  .build-horizontal {
    flex-direction: column;
    height: 100cqh;
    justify-content: center;
  }

  .build-left {
    width: 100cqw;
    height: 20cqh;
  }
  .build-hero-avatar-and-name {
    position: absolute;
    left: 0;
    top: -30cqh;
  }
  .btn-skins {
    font-size: 10cqw;
    width: 80cqw;
    height: 15cqw;
    line-height: 10cqw;
	display: none;
  }
  .avatar {
    width: 50cqh;
    height: 50cqh;
  }
  .build-hero-stats-view {
    height: 100cqh;
    flex-wrap: wrap;
    align-content: center;
    margin-bottom: 20cqh;
    margin: 0;
	position: relative;
	top: -26cqh;
  }
  .build-hero-stats-line {
    height: 18cqh;
    font-size: 8cqh;
  }
  .build-hero-stats-daw {
    width: 15cqw;
    height: 15cqw;
  }
  .build-hero-stats-settings {
    position: relative;
  }
  .build-hero-stats-highlight-count {
    display: none !important;
  }
  .build-hero-stats-setting-land-type {
    width: 25cqw;
    height: 25cqw;
  }

  .build-center {
    width: 100cqw;
    height: 55cqh;
    container-type: size;
  }
  .build-actions-view {
    position: relative;
    top: -14cqh;
    width: 40cqw;
  }
  .build-tab-item {
    height: 2cqh;
    font-size: 1.4cqh;
    bottom: -1cqh;
  }
  .build-active-bar-container {
    position: relative;
    bottom: auto;
  }
  .build-active-bar-hint {
    display: none;
  }

  .build-right {
    width: 100cqw;
    height: 15cqh;
    container-type: size;
  }
  .build-rarity {
    position: relative;
    width: 50cqw;
    height: auto;
    top: auto;
    container-type: inline-size;
	top: 2cqw;
  }
  .build-talent-view {
    width: 82cqw;
    height: 100cqh;
    align-self: center;
  }
  .build-list-settings,
  .build-settings-panel {
    display: none !important;
  }
  .build-talent-item-container {
    background-size: 12cqh;
    width: 56cqh;
    height: 56cqh;
    container-type: size;
    margin: 1cqh;
  }

  .chat {
    right: 0;
  }
  .build-talents {
    display: flex;
    flex-flow: row wrap;
    overflow: auto;
    width: 100cqw;
    height: 100cqh;
    background: #33333352;
    justify-content: start;
    align-content: flex-start;
	margin-top: 0cqh;
  }
  .build-active-bar-container {
    container-type: inline-size;
    width: 99cqw;
    height: 10cqw;
    display: flex;
    justify-content: center;
    flex-flow: column;
    position: relative;
    bottom: auto;
    top: -4cqh;
    left: auto;
    right: auto;
  }
  #wbuild {
    container-type: size;
    position: absolute;
    margin-top: 12cqh;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    width: calc(min(135cqh, 95cqw) * 0.9);
    height: calc(85cqh * 0.9);
    /* background-color: #8d8b8b; */
    border-radius: .5cqh;
    border: 0.2cqh groove rgb(158, 155, 104);
    background-image: linear-gradient(to bottom, rgba(4, 32, 42, 0.9), rgba(18, 69, 73, 0.85), rgba(21, 51, 59, 0.8), rgba(18, 69, 73, 0.85), rgba(4, 32, 42, 0.9));
    display: flex;
    align-items: center;
    z-index: 100;
  }
  .build-active-bar-item {
    container-type: inline-size;
    width: calc(80cqw / 12);
    height: calc(80cqw / 12);
    margin-left: 0.5cqw;
    margin-right: 0.5cqw;
    margin-bottom: 1cqh;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 1cqh;
    border: 0.5cqh solid transparent;
    box-shadow: 0 0 1cqh rgba(25, 25, 25, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .build-active-bar-key {
    width: calc(80cqw / 12);
    height: calc(80cqw / 12);
  }
  .build-hero-stats-settings {
    margin-top: 1cqh;
    display: flex;
    left: 7cqh;
  }
  .build-hero {
    width: 86cqw;
    height: 80cqh;
    container-type: size;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
  }
  .build-field-with-tabs {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    top: -13cqh;
  }
  .build-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: scroll;
    max-width: 34cqw;
    height: 4cqh;
  }
  .button-build--wrapper {
    height: 13cqh;
  }
  .splash-content-button, .splash-content-button-red {
    width: auto;
  }
}