@font-face {
	font-family: 'main_font';
	src: url('RobGraves.ttf') format('truetype');
}
body {
	user-select: none;
	overflow: hidden;
    margin: 0;
    height: 100vh;
    display: grid;
    place-items: center;
    background-color: black;
}
* {
    -webkit-tap-highlight-color: transparent;
    outline: none;
}
#game {
	position: relative;
	overflow: hidden;
}
#game_background {
	animation: day_background 15s ease-in-out infinite;
}
@keyframes movingX {
	0%, 100% {transform: translateX(0%);}
	33% {transform: translateX(0.03%);}
	66% {transform: translateX(-0.03%);}
}
@keyframes movingY {
	0%, 100% {transform: translateY(0%);}
	33% {transform: translateY(0.05%);}
	66% {transform: translateY(-0.05%);}
}
@keyframes day_background {
	0%, 100% {filter: saturate(100%);}
	50% {filter: saturate(115%);}
}
@keyframes evening_background {
	0%, 100% {filter: saturate(80%) brightness(80%) contrast(110%) opacity(95%) hue-rotate(320deg);}
	50% {filter: saturate(90%) brightness(85%) contrast(105%) opacity(100%) hue-rotate(340deg);}
}
@keyframes night_background {
	0%, 100% {filter: saturate(60%) brightness(70%) contrast(110%) opacity(85%) hue-rotate(110deg);}
}
#vignette {
	background-image: radial-gradient(transparent 70%, black);
	opacity: 50%;
	z-index: 98;
}
#light_background {
	background: white;
	opacity: 0;
	animation: lighting 20s ease-in-out infinite;
}
@keyframes lighting {
	0%, 100% {opacity: 0;background: white;}
	40% {opacity: 0.05;background: white;}
	60% {opacity: 0.05;background: yellow;}
}
.background {
	width: 100%;
	height: 100%;
	position: absolute;
	object-fit: cover;
	inset: 0;
	pointer-events: none;
}
.art {
	width: 90%;
	height: 90%;
	position: absolute;
	object-fit: contain;
	inset: 50%;
	transform: translate(-50%,-50%);
	pointer-events: none;
	animation: art_anim 30s ease-in-out infinite;
}
.anim_video {
	width: 90%;
	height: 90%;
	position: absolute;
	object-fit: contain;
	inset: 50%;
	transform: translate(-50%,-50%);
	pointer-events: none;
}
@keyframes art_anim {
	0%, 100% {transform: skew(0deg,0.5deg) translate(-50%,-50%);}
	14% {transform: skew(-0.5deg,0.5deg) translate(-49%,-50%);}
	28% {transform: skew(0.5deg,0.5deg) translate(-50%,-50%);}
	42% {transform: skew(-0.5deg,0deg) translate(-51%,-50%);}
	56% {transform: skew(0deg,-0.5deg) translate(-50%,-50%);}
	70% {transform: skew(0.5deg,0deg) translate(-50%,-50%);}
	84% {transform: skew(-0.5deg,-0.5deg) translate(-50%,-50%);}
	/*0%, 50%, 100% {transform: skew(0deg,0deg) translate(-50%,-50%) rotate(0deg);}
	25% {transform: skew(0.1deg,-0.1deg) translate(-49.5%,-50%) scale(1.01) rotate(0.3deg);}
	75% {transform: skew(-0.1deg,0.1deg) translate(-50.5%,-50%) scale(1.01) rotate(-0.3deg);}*/
	
}
@keyframes art_anim_sex {
	0% {transform: skew(0deg,0deg) translate(-50%,-50%);}
	25% {transform: skew(-2deg,0deg) translate(-50%,-50%);}
	50% {transform: skew(2deg,0deg) translate(-50%,-50%);}
	75% {transform: skew(-1deg,0deg) translate(-50%,-50%);}
}
#crt_background {
	background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 0.4%, transparent 0.4%, transparent 0.8%);
	z-index: 98;
}
#black_background {
	--mousex: 50%;
	--mousey: 50%;
	--blackness: 1000%;
	--alpha: 0.9;
	background: radial-gradient(circle at var(--mousex) var(--mousey), transparent 0%, rgba(0, 0, 0, var(--alpha)) var(--blackness));
	z-index: 98;
}
@keyframes fade {
	0% {background: radial-gradient(circle at var(--mousex) var(--mousey), transparent 0%, rgba(0, 0, 0, 0.9) 1000%);}
	100% {background: radial-gradient(circle at var(--mousex) var(--mousey), transparent 0%, rgba(0, 0, 0, 0.9) 0%);}
}
@media (min-aspect-ratio: 16/9) {
    #game {
        width: calc(100vh*16/9);
        height: 100vh;
        font-size: calc((100vh*16/9)/100);
    }
}
@media (max-aspect-ratio: 16/9) {
    #game {
        width: 100vw;
        height: calc(100vw*9/16);
        font-size: calc(100vw/100);
    }
}
/* -------------------------------------------------------------------------------------------------------------------------------- */
.glow {
	--min_opacity: 0.3;
	--max_opacity: 0.7;
	--radius: 80%;
    position: absolute;
    cursor: pointer;
	border-radius: 50%;
	box-sizing: border-box;
	background: radial-gradient(circle at center, rgba(0, 255, 0, 0.5) 0%, rgba(0, 255, 0, 0) var(--radius), transparent 100%);
	animation: pulse 3s linear infinite;
	opacity: var(--min_opacity);
}
.glow_low {
	--min_opacity: 0.2;
	--max_opacity: 0.4;
}
@keyframes pulse {
    0%, 100% {opacity: var(--min_opacity);}
    50% {opacity: var(--max_opacity);}
}
@keyframes fade_in {
    to {opacity: var(--min_opacity);}
}
@keyframes fade_out {
    to {opacity: 0;}
}
/* -------------------------------------------------------------------------------------------------------------------------------- */
.text {
	--min_opacity: 0.6;
    position: absolute;
	opacity: var(--min_opacity);
	font-family: 'main_font';
	font-size: 5em;
	text-align: center;
	padding: 0 5%;
	box-sizing: border-box;
	white-space: pre-line;
	z-index: 5;
}
.text_click {
	--min_opacity: 0.6;
    position: absolute;
	opacity: var(--min_opacity);
	font-family: 'main_font';
	font-size: 2em;
	text-align: right;
	box-sizing: border-box;
	white-space: pre-line;
	color: rgb(0, 255, 0);
	text-shadow: 0.05em 0.05em 0em rgba(0,0,0,1);
	z-index: 0;
	pointer-events: none;
	animation: add 0.7s ease-in-out forwards;
}
.text_rep {
	--min_opacity: 0.6;
    position: absolute;
	opacity: var(--min_opacity);
	font-family: 'main_font';
	font-size: 4em;
	text-align: center;
	padding: 0 5%;
	box-sizing: border-box;
	white-space: pre-line;
	z-index: 5;
	color: rgb(0, 255, 0);
	text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,1);
}
#text_info {
	font-size: 2em;
}
.text_dialog {
	--min_opacity: 0.8;
	opacity: var(--min_opacity);
	font-family: 'main_font';
	font-size: 2.0em;
	text-align: center;
	text-shadow: 0.15em 0.15em 0.2em black, -0.15em -0.15em 0.2em black, 0.15em -0.15em 0.2em black, -0.15em 0.15em 0.2em black;
	color: white;
	z-index: 5;
	width: 30%;
	transform: translate(-50%, -50%);
	transition: left 0.2s ease-in-out;
	word-wrap: anywhere;
}
a {
	color: inherit;
}
.ok {
	--min_opacity: 0.4;
	--max_opacity: 0.6;
    position: absolute;
    cursor: pointer;
	animation: fade_in 5s ease-in-out 1s forwards, pulse 3s linear 5.5s infinite;
	opacity: 0;
	height: 9%;
	bottom: 11%;
	left: 85%;
	transform: translate(-50%, 50%); 
	z-index: 95;
	transition: filter 0.2s;
}
.ok:hover {
	filter: saturate(120%) brightness(140%);
}
.play {
	--min_opacity: 0.6;
	--max_opacity: 0.95;
    position: absolute;
    cursor: pointer;
	animation: pulse 3s linear infinite;
	opacity: var(--min_opacity);
	height: 15%;
	bottom: 50%;
	left: 50%;
	transform: translate(-50%, 50%); 
	z-index: 1;
	transition: filter 0.2s;
}
.play:hover {
	filter: saturate(120%) brightness(140%);
}
.exit {
	--min_opacity: 0.6;
	--max_opacity: 0.95;
    position: absolute;
    cursor: pointer;
	animation: pulse 3s linear infinite;
	opacity: var(--min_opacity);
	height: 10%;
	bottom: 88%;
	left: 93%;
	transform: translate(-50%, 50%); 
	z-index: 1;
	transition: filter 0.2s;
}
.exit:hover {
	filter: saturate(120%) brightness(140%);
}
.easy {
	--min_opacity: 0.6;
	--max_opacity: 0.95;
    position: absolute;
    cursor: pointer;
	animation: pulse 3s linear infinite;
	opacity: var(--min_opacity);
	height: 7%;
	bottom: 50%;
	left: 44%;
	transform: translate(-50%, 50%); 
	z-index: 1;
	transition: filter 0.2s;
}
.hard {
	--min_opacity: 0.6;
	--max_opacity: 0.95;
    position: absolute;
    cursor: pointer;
	animation: pulse 3s linear infinite;
	opacity: var(--min_opacity);
	height: 7%;
	bottom: 50%;
	left: 56%;
	transform: translate(-50%, 50%); 
	z-index: 1;
	transition: filter 0.2s;
}
.img_selected {
	display: inline-block; /* важно, чтобы граница отображалась по размеру изображения */
	border-bottom: 0.3em solid rgba(0, 0, 0, 0.4);
}
.delete {
	--min_opacity: 0.6;
	--max_opacity: 0.95;
    position: absolute;
    cursor: pointer;
	animation: pulse 3s linear infinite;
	opacity: var(--min_opacity);
	height: 6%;
	bottom: 44%;
	left: 54%;
	transform: translate(-50%, 50%); 
	z-index: 1;
	transition: filter 0.2s;
}
.delete:hover {
	filter: saturate(120%) brightness(140%);
}
.gallery {
	--min_opacity: 0.6;
	--max_opacity: 0.95;
    position: absolute;
    cursor: pointer;
	animation: pulse 3s linear infinite;
	opacity: var(--min_opacity);
	height: 15%;
	bottom: 35%;
	left: 50%;
	transform: translate(-50%, 50%); 
	z-index: 1;
	transition: filter 0.2s;
}
.gallery:hover {
	filter: saturate(120%) brightness(140%);
}
/* -------------------------------------------------------------------------------------------------------------------------------- */
#characters-container {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 70%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.character_img {
	object-fit: cover;
	min-width: 0;
	height: 100%;
	z-index: 1;
	filter: drop-shadow(0.5em 1em 2em rgba(0, 0, 0, 0.7));
	animation: breathing 4s ease-in-out infinite;
	margin: -5%;
	cursor: pointer;
}
@keyframes breathing {
	0%, 100% {transform: scale(1);}
	50% {transform: scale(1.02);}
}
@keyframes rotation {
	0%, 100% {transform: rotate(0deg);}
	25% {transform: rotate(-2deg);}
	75% {transform: rotate(2deg);}
}
@keyframes zooming {
	0%, 100% {transform: scale(1);}
	50% {transform: scale(1.03);}
}
@keyframes zooming2 {
	0%, 100% {transform: scale(1);}
	50% {transform: scale(1.3);}
}
.cloud {
	--min_opacity: 90%;
	position: absolute;
	animation: fade_in 1s ease-in-out forwards, zooming 1.3s linear infinite;
	z-index: 5;
	opacity: 0%;
}
.cloud#dialog_cloud {
	background-image: url('images/cloud.png');
	background-size: cover;
	align-items: center;
	display: flex;
	justify-content: center;
}
.lootbox {
	background-image: url('images/lootbox1.png');
	background-size: contain;
	align-items: center;
	display: flex;
	justify-content: center;
	background-repeat: no-repeat;
	opacity: 0.6;
	filter: drop-shadow(0.5em 0.5em 0.5em rgba(0, 0, 0, 0.7));
}
.lootbox#loot_box2 {
	background-image: url('images/lootbox2.png');
}
.loot_container {
	background-color: gray;
	transform: translate(-50%, -50%);
	width: 30%;
	height: 45%;
	display: flex;
	flex-direction: column;
	opacity: 0.9;
	box-shadow: 0em 0em 1em rgba(0,0,0,0.8);
	border-radius: 0.5em;
	border: 0.2em solid rgba(0,0,0,0.3);
}
.loot_roulette {
	flex: 1;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	gap: 1em;
	padding: 1%;
}
.loot_items {
	flex: 1;
	display: flex;
	align-content: center;
	flex-wrap: wrap;
	overflow: hidden;
	padding: 1%;
	justify-content: center;
}
.window {
	--min_opacity: 1.0;
	opacity: 0;
	background-color: black;
	transform: translate(-50%, -50%);
	width: 40%;
	height: 70%;
	border-radius: 0.5em;
	border: 0.15em solid rgba(255,255,255);
	box-shadow: 0em 0em 1em rgba(0,0,0,0.8);
	display: flex;
	flex-direction: column;
	animation: fade_in 0.2s ease-in-out forwards;
}
.window_header {
	color: rgba(255,255,255);
	padding: 1%;
	display: flex;
	align-content: center;
	justify-content: space-between;
	user-select: none;
}
.window_title {
	flex-grow: 1;
	font-family: 'Consolas', monospace;
	font-size: 1.2em;
	text-align: center;
}
.window_close {
	width: 5%;
	background-color: #f23f42;
	color: white;
	border: none;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Consolas', monospace;
	font-size: 1.2em;
	border-radius: 0.2em;
}
.window_close:hover {
    background-color: #cc0000;
}
.window_content {
	background-color: black;
	flex-grow: 1;
	padding: 1%;
	font-family: 'Consolas', monospace;
	font-size: 1.2em;
	color: white;
	white-space: normal;
	word-break: break-all;
	overflow: hidden;
	line-height: 1.2;
	border: none;
	resize: none;
	outline: none;
	cursor: default;
	border-radius: 0.5em;
}
/* -------------------------------------------------------------------------------------------------------------------------------- */
#inv_grid {
	--min_opacity: 1.0;
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(4,12%);
	justify-content: center;
	align-content: center;
	gap: 1%;
	z-index: 90;
	margin: auto;
	width: 50%;
	opacity: 0;
	animation: fade_in 0.2s ease-in-out forwards;
}
.item {
	background-size: contain;
	box-shadow: 0.5em 0.5em 1em rgba(0,0,0,0.5);
	transition: transform 0.2s, opacity 0.2s;
	height: 100%;
	width: 100%;
}
.item.clicked {
	transform: scale(1.06);
	filter: saturate(50%) brightness(120%);
	opacity: 40%;
}
.item_clickable:hover {
	transform: scale(1.03);
	filter: saturate(120%) brightness(120%);
}
.add_item {
    position: absolute;
	animation: add 1s ease-in-out forwards;
	z-index: 1;
	pointer-events: none;
}
@keyframes add {
	0%, 100% {transform: translate(-50%,-50%) scale(0);}
	50% {transform: translate(-50%,-50%) scale(1.2);}
}
#progressbar {
	--min_opacity: 0.6;
	background-color: gray;
	opacity: 0;
	animation: fade_in 0.2s ease-in-out forwards;
	border: 0.3em solid #000;
}
#progress {
	position: relative;
	background-color: green;
	z-index: 1;
	transition: width 0.2s ease;
}
/* -------------------------------------------------------------------------------------------------------------------------------- */
#cheats {
	position: absolute;
	inset: 0;
	display: none;
	grid-template-columns: repeat(3,max-content);
	justify-content: center;
	align-content: center;
	gap: 2%;
	background: black;
	opacity: 0.7;
	z-index: 90;
}
.btn {
	cursor: pointer;
	font-family: 'main_font';
	font-size: 2em;
}
/* -------------------------------------------------------------------------------------------------------------------------------- */
.bottom_black {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -96%;
	height: 100%;
	background: black;
	z-index: 999;
}
.left_black {
	position: absolute;
	left: -100%;
	top: 0;
	width: 100%;
	height: 100%;
	background: black;
	z-index: 999;
}

.right_black {
	position: absolute;
	right: -100%;
	top: 0;
	width: 100%;
	height: 100%;
	background: black;
	z-index: 999;
}
/* -------------------------------------------------------------------------------------------------------------------------------- */
.hearticon.cloud {
	transition: rotate 0.5s ease;
}
.hearticon.cloud.click {
	rotate: 360deg;
}
.screamer {
	background-image: url('images/harms.jpg');
	background-size: contain;
	align-items: center;
	display: flex;
	justify-content: center;
	background-repeat: no-repeat;
	opacity: 0.9;
	border: 0.3em solid black;
	transform: translate(-50%,50%);
}
.angry, .alert {
	opacity: 0.5;
	pointer-events: none;
}
.cheats {
	--min_opacity: 0.6;
	--max_opacity: 0.95;
    position: absolute;
    cursor: pointer;
	animation: pulse 3s linear infinite;
	opacity: var(--min_opacity);
	height: 7%;
	bottom: 10%;
	left: 6%;
	transform: translate(-50%, 50%); 
	z-index: 10;
	transition: filter 0.2s;
}
#gallery_container {
	position: absolute;
	inset: 0;
	display: grid;
	justify-content: center;
	align-content: center;
	gap: 2%;
	background: black;
	z-index: 90;
	width: 100%;
	margin: auto;
	grid-template-columns: repeat(5,14%);
}
.gallery_item {
	cursor: pointer;
	height: 100%;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}