/* FONT */
/* LICENSE: ./../font/Syne_Mono/OFL.txt */
@font-face { font-family: SyneMono; src: url('./../font/Syne_Mono/SyneMono-Regular.ttf'); font-weight: normal; font-style: normal; }

/* RESET */
*,
*::before,
*::after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

button,
input {
	font: inherit;
	cursor: url('./../img/cursor/pointer.png') 8 0, pointer;
}

input {
	width: 12ch;
}

body {
	display: grid;
	place-content: center;
	width: 100vw;
	height: 100vh;
	background-color: black;
	color: white;
	font-family: SyneMono, 'Courier New', Courier, monospace;
	overflow: hidden;
	user-select: none;
	cursor: url('./../img/cursor/default.png'), default;
	font-size: 30px;
}

.wrapper {
	width: 1920px;
	height: 1080px;
	background-color: #191329;
}

.wrapper__layer {
	position: absolute;
	width: 100%;
	height: 100%;
}

.scene {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #191329;
}

.scene > * {
	position: absolute;
}

.scene--hidden {
	display: none;
}

/* SCENES */

.general-btn {
	padding: .1em .8em;
	background-color: #191329;
	color: #DF0772;
	border: 2px solid #DF0772;
}

.general-btn:hover {
	background-color: #000;
	transition: color .2s ease
}

.general-btn:active {
	color: #FFFF1E;
}

.general-input {
	border: 2px dashed #DF0772;
	color: #AAF5FF;
	background-color: #191329;
	outline: none;
}

.general-input:focus {
	background-color: #000;
}

.avatar-img-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
}

.avatar-img {
	position: absolute;
	width: 100%;
	max-height: 100%;
	image-rendering: pixelated;
}

/* login */

.login__left {
	left: 186px;
	top: 330px;
}

.login__note {
	margin-top: 80px;
}

.login__reg-btn {
	margin-top: 50px;
}

.login__right {
	left: 1120px;
	top: 428px;
}

.login__familiar {
	margin-bottom: 30px;
}

.login__toggle {
	width: 50px;
	height: 50px;
	transform: translateY(6px);
	background-color: #352A55;
	border: none;
}

.login__log-btn {
	margin-top: 88px;
	margin-left: 356px;
}

.login__toggle:hover {
	background-color: #2B2147;
}

/* registration */

.scene_registration > * {
	position: absolute;
}

.registration__back-btn {
	top: 50px;
	padding: 0 50px 0 20px;
	background-color: #A997D8;
	border: none;
	clip-path: polygon(0 0, 100% 0, 96% 100%, 0 100%);
}

.registration__back-btn:hover {
	background-color: #8465D8;
}

.registration__heading {
	top: 18px;
	left: 50%;
	font-size: 80px;
	transform: translateX(-50%);
}

.registration__input-playername-label {
	left: 170px;
	top: 300px;
}

.registration__input-playername {
	left: 170px;
	top: 350px;
}

.registration__input-password-label {
	left: 170px;
	top: 420px;
}

.registration__input-password {
	left: 170px;
	top: 470px;
}

.registration__toggle {
	left: 383px;
	top: 464px;
	width: 50px;
	height: 50px;
	background-color: #352A55;
	border: none;
}

.registration__toggle:hover {
	background-color: #2B2147;
}

.registration__toggle:active {
	background-color: #191329;
}

.avatar-designer {
	display: flex;
	justify-content: space-between;
	right: 60px;
	top: 170px;
	width: 960px;
	height: 800px;
}

.avatar-designer__showroom {
	width: 536px;
	height: 100%;
}

.avatar-designer__controls {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	width: 354px;
	height: 100%;
}

.avatar-designer__controls > div {
	display: flex;
	justify-content: center;
	align-items: center;
}

.avatar-designer__controls button {
	display: inline-block;
	display: grid;
	place-content: center;
	width: 1.2em;
	height: 1.2em;
	background: none;
	color: #00F3FF;
	border: solid 2px #00F3FF;
}

.avatar-designer__controls button:hover {
	border-style: dashed;
	background-color: #2B2147;
	transition: background-color 1s ease .5s;
}

.avatar-designer__controls h3 {
	display: inline-block;
	text-align: center;
	width: 188px;
	color: #AAF5FF;
}

.registration__random-btn {
	top: 670px;
	left: 503px;
	transform: rotate(-90deg);
	transform-origin: 100% 0;
}

.registration__accept-btn {
	right: 60px;
	bottom: 30px;
}

/* bar */

.bar {
	position: absolute;
	top: 0!important; /* odstranit */
	left: 0;
	right: 0;
	height: 80px;
	background-image: url('./../img/bar-bg.png');
}

.bar__menu {
	position: absolute;
	display: flex;
	justify-content: center;
	gap: 320px;
	width: 100%;
	bottom: 0;
}

.bar__menu::after {
	content: '';
	width: 100px;
}

.bar__menu-btn {
	width: 210px;
	height: 52px;
	color: #AAF5FF;
	border: none;
	background: none;
}

.bar__menu-btn--selected {
	height: 53px;
	color: #00F3FF;
	background-image: url('./../img/bar-selected.png');
	transform: translateY(1px);
}

.bar__playername {
	position: absolute;
	right: 80px;
	top: 26px;
	background: none;
	color: #00FF00;
	text-decoration: underline;
	border: none;
	font-size: 22px;
	cursor: url('./../img/cursor/default.png'), default;
}
.bar__playername:hover {
	text-decoration: none;
	color: #9EFF7A;
	transition: color .4s ease;
}

.bar__playername::before {
	content: '@';
}

.bar__logout-btn {
	position: absolute;
	right: 10px;
	top: 24px;
	border: none;
	background: none;
}

/* mission */

.mission__choice {
	left: -242px;
	top: 253px;
	display: flex;
	flex-direction: row-reverse;
	transform-origin: 100% 0;
	transform: rotate(-90deg);
}

.mission__choice-btn {
	width: 245px;
	height: 60px;
	background: none;
	color: #AAF5FF;
	border: none;
}

.mission__choice-btn--selected {
	color: #00F3FF;
	background-color: #2B2147;
}

.mission__desc {
	top: 377px;
	left: 712px;
	color: #FFFF9E;
	width: 700px;
	max-height: 300px;
	font-size: 22px;
	overflow-y: scroll;
}

.mission__minutes-left {
	top: 892px;
	left: 615px;
	height: 30px;
	width: 442px;
	background-color: #352A55;
}

.mission__minutes-left-inner {
	position: absolute;
	height: 100%;
	background-color: #DF0772;
}

.mission__minutes-left-text {
	position: absolute;
	height: 100%;
	width: 100%;
	display: grid;
	place-content: center;
	font-size: 22px;
	color: white;
}

.mission_accept-btn {
	top: 862px;
	left: 1231px;
}

.mission__busy {
	background-color: #352A55;
	top: 140px;
	left: 370px;
	right: 370px;
	bottom: 40px;
	clip-path: polygon(0 0, 1150px 0, 1180px 20px, 1180px 660px, 1160px 680px, 1160px 830px, 1180px 850px, 1180px 900px, 40px 900px, 0 860px, 0 350px, 40px 310px, 40px 160px, 0 120px);
}

.mission__busy--hidden {
	display: none;
}

.mission__busy-text {
	position: absolute;
	top: 360px;
	width: 100%;
	text-align: center;
}

.mission__busy-bar {
	position: absolute;
	top: 410px;
	height: 60px;
	width: 100%;
	background-color: #DF0772;
	color: #000;
}

.mission__busy-bar-inner {
	position: absolute;
	right: 0;
	height: 100%;
	background-color: black;
}

.mission__busy-bar-text {
	position: absolute;
	display: grid;
	place-content: center;
	width: 100%;
	height: 100%;
	color: white;
	text-align: center;
}

.mission__busy-btn {
	position: absolute;
	left: 50%;
	top: 550px;
	transform: translateX(-50%);
}

.mission__busy-btn:disabled {
	opacity: 0.6;
	pointer-events: none;
}

/* inventory */

.inventory__avatar {
	top: 344px;
	left: 302px;
	width: 300px;
	height: 454px;
}

.inventory__level {
	top: 798px;
	left: 302px;
	width: 300px;
	height: 200px;
	color: black;
	background-color: #EAE6F7;
}

.inventory__level-text {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	padding: 12px;
}

.inventory__item {
	position: absolute;
	width: 200px;
	height: 200px;
	background-color: transparent;
	image-rendering: pixelated;
	cursor: url('./../img/cursor/grab.png') 10 13, grab;
	transition: border-width .1s linear, border-color 0s ease, outline .1s ease;
	border: 0px dotted red;
	outline: 0px solid transparent;
}

.inventory__item--highlight {
	outline: thick double #FFFF1E;
}

.grabbing-item,
.grabbing-item .inventory__item {
	cursor: url('./../img/cursor/grabbing.png') 10 13, grab;
}

.grabbing-item .inventory__item:hover {
	border: 3px dotted red;
}

.inventory__item > img {
	width: 100%;
	height: 100%;
	pointer-events: none;
}

[data-id="slot-weapon"] {
	top: 105px;
	left: 349px;
}

[data-id="slot-head"] {
	top: 105px;
	left: 44px;
}

[data-id="slot-body"] {
	top: 435px;
	left: 44px;
}

[data-id="slot-hands"] {
	top: 105px;
	left: 656px;
}

[data-id="slot-shoes"] {
	top: 785px;
	left: 44px;
}

[data-id="slot-chip"] {
	top: 435px;
	left: 656px;
}

[data-id="slot-extra"] {
	top: 785px;
	left: 656px;
}

[data-id="slot-1"] {
	top: 105px;
	left: 1689px;
}

[data-id="slot-2"] {
	top: 105px;
	left: 1479px;
}

[data-id="slot-3"] {
	top: 105px;
	left: 1269px;
}

[data-id="slot-4"] {
	top: 315px;
	left: 1689px;
}

[data-id="slot-5"] {
	top: 315px;
	left: 1479px;
}

.inventory__trash {
	position: absolute;
	left: 1688px;
	top: 794px;
	width: 200px;
	height: 200px;
}

.grabbing-item .inventory__trash:hover {
	border: dashed 4px red;
}

.inventory__desc {
	right: 500px;
	bottom: 86px;
	padding: 8px;
	width: 500px;
	height: 200px;
	background-color: #495057;
	border: solid 3px #343A40;
}

/* ladder */

.ladder__column-names {
	top: 128px;
	right: 50%;
	display: flex;
	width: 700px;
	height: 22px;
	font-size: 22px;
	background-color: #eae6f7;
	color: #000;
}

.list {
	top: 150px;
	right: 50%;
	display: flex;
	flex-direction: column;
	width: 700px;
	height: 800px;
	background-color: #352A55;
	overflow: hidden;
}

.list__item {
	display: flex;
	font-size: 22px;
}

.list__item:nth-child(odd) {
	background-color: #ffffff0a;
}

.list__item--selected,
.list__item--selected:nth-child(odd) {
	background-color: #8465D8;
	color: black;
}

.list__item--highlight {
	color: #00FF00;
}

.list__item--selected.list__item--highlight {
	background-color: #201934;
	color: #00FF00;
}

.list__item-pos {
	width: 6ch;
	margin-right: 2ch;
	text-align-last: right;
}

.list__item-playername {
	width: 11ch;
	margin-right: 2ch;
}

.list__item-lvl {
	width: 6ch;
	margin-right: 2ch;
	text-align-last: right;
}

.list__item-score {
	width: 5ch;
	text-align-last: right;
}

.ladder__search {
	top: 950px;
	right: 50%;
	width: 700px;
	height: 60px;
}

.ladder__search-input {
	padding: 0 12px;
	width: 640px;
	height: 60px;
	background-color: #EAE6F7;
	color: #000;
	border: none;
}

.ladder__search-input:focus {
	color: #EAE6F7;
}

.ladder__search-btn {
	position: absolute;
	right: 0;
	top: 0;
	padding: 10px;
	width: 60px;
	height: 60px;
	background-color: #191329;
	border: none;
}

.ladder__search-btn:hover {
	background-color: #2B2147;
}

.ladder__upper-arrow {
	top: 150px;
	left: 200px;
	padding: 10px;
	width: 60px;
	height: 60px;
	background-color: #191329;
	border: none;
}

.ladder__lower-arrow {
	top: 890px;
	left: 200px;
	padding: 10px;
	width: 60px;
	height: 60px;
	background-color: #191329;
	border: none;
}

.ladder__upper-arrow:hover,
.ladder__lower-arrow:hover {
	background-color: #2B2147;
}

.ladder__item {
	image-rendering: pixelated;
}

.ladder__item > img {
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.ladder__avatar {
	top: 172px;
	left: 1228px;
	width: 400px;
	height: 600px;
}

.ladder__level-text {
	top: 772px;
	left: 1228px;
	padding-top: 14px;
	width: 400px;
	height: 58px;
	background-color: #201934;
	color: #EAE6F7;
	text-align: center;
}

.ladder__desc {
	top: 850px;
	left: 1228px;
	padding: 10px;
	width: 612px;
	height: 100px;
	background-color: #212529;
	border: solid 3px #343A40;
}

.ladder__item {
	position: absolute;
	width: 180px;
	height: 180px;
	background-color: #2B2147;
}

[data-id="ladder-slot-weapon"] {
	top: 770px;
	left: 1016px;
	transform: scaleX(-1);
}

[data-id="ladder-slot-head"] {
	top: 172px;
	left: 1016px;
}

[data-id="ladder-slot-body"] {
	top: 372px;
	left: 1016px;
}

[data-id="ladder-slot-shoes"] {
	top: 572px;
	left: 1016px;
}

[data-id="ladder-slot-hands"] {
	top: 172px;
	left: 1660px;
}

[data-id="ladder-slot-chip"] {
	top: 372px;
	left: 1660px;
}

[data-id="ladder-slot-extra"] {
	top: 572px;
	left: 1660px;
}

.ladder__attack-btn {
	top: 786px;
	left: 1660px;
	width: 180px;
}

.ladder__fights-left {
	top: 135px;
	right: 80px;
	font-size: 26px;
}



/* SCENES END */

.fight-container--hidden {
	opacity: 0;
	pointer-events: none;
}

.fight-container {}

.fight {
	position: absolute;
	inset: 100px;
}

.fight > * {
	position: absolute;
}

.fight__avatar-player {
	top: 80px;
	left: 260px;
	width: 300px;
	height: 454px;
}

.fight__text-player {
	top: 557px;
	left: 260px;
}

.fight__bar-player {
	top: 600px;
	left: 260px;
	width: 300px;
	height: 30px;
	background-color: #723855;
}

.fight__bar-player-inner {
	position: absolute;
	height: 100%;
	width: 0%;
	background-color: red;
}

.fight__bar-player-text {
	position: absolute;
	width: 100%;
	text-align: center;
}

.fight__desc-player {
	position: absolute;
	top: 640px;
	left: 260px;
	color: #d4d5d6;
}

.fight__weapon-player {
	height: 200px;
	width: 200px;
	top: 345px;
	left: 457px;
	image-rendering: pixelated;
}

.fight__avatar-opponent {
	top: 80px;
	right: 260px;
	width: 300px;
	height: 454px;
}
.fight__text-opponent {
	top: 557px;
	right: 260px;
}

.fight__bar-opponent {
	top: 600px;
	right: 260px;
	width: 300px;
	height: 30px;
	background-color: #723855;
}

.fight__bar-opponent-inner {
	position: absolute;
	height: 100%;
	width: 0%;
	background-color: red;
}

.fight__bar-opponent-text {
	position: absolute;
	width: 100%;
	text-align: center;
}

.fight__desc-opponent {
	position: absolute;
	top: 640px;
	right: 260px;
	color: #d4d5d6;
}

.fight__weapon-opponent {
	height: 200px;
	width: 200px;
	top: 345px;
	right: 457px;
	image-rendering: pixelated;
	transform: scaleX(-1);
}

.fight__weapon-player,
.fight__weapon-opponent {
	opacity: 1;
	transition: all .2s ease;
}

.fight__weapon--hidden {
	opacity: 0;
}

.fight__bar-player-inner,
.fight__bar-opponent-inner {
	transition: width .2s ease;
}

.message-container {
	background-color: #0000007a;
	opacity: 1;
	transition: opacity .2s ease;
}

.message-container--hidden {
	opacity: 0;
	pointer-events: none;
}

.message {
	position: absolute;
	left: 710px;
	top: 240px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 20px;
	width: 400px;
	height: 600px;
	background-color: #000000;
	color: #FFFF1E;
	font-size: 24px;
	clip-path: polygon(0 0, 40px 0, 60px 20px, 340px 20px, 360px 0, 400px 0, 400px 600px, 360px 600px, 340px 580px, 60px 580px, 40px 600px, 0 600px);
	border: 2px solid #00F3FF;
}

.message__text {
	margin-top: 30px;
	max-height: 400px;
	overflow-y: scroll;
}

.message__button {
	margin: 40px;
	padding: 10px;
	text-align: center;
	background-color: #201934;
	color: #EAE6F7;
	border: none;
	font-size: 22px;
}

.message__button:hover {
	background-color: #191329;
	color: #AAF5FF;
}

.click-locker {
	position: absolute;
	display: grid;
	place-content: center;
	width: 1920px;
	height: 1080px;
	background-color: #0f0f0fc2;
	pointer-events: none;
	opacity: 0;
	transition: opacity .4s ease;
}

.click-locker--active {
	opacity: 1;
	pointer-events: all;
	transition: opacity 1s ease 2s;
}

@keyframes rotation {
	0% {transform: rotate(0);}
	100% {transform: rotate(1turn);}
}

.click-locker::before {
	content: '';
	width: 230px;
	height: 230px;
	background-image: url('./../img/eye.png');
	background-size: cover;
	transform-origin: 50% 67%;
	animation: 1.7s rotation linear;
	animation-iteration-count: infinite;
	opacity: 0;
	transition: opacity .3s ease 2.4s;
}

.click-locker--active::before {
	opacity: 1;
}