body { 
	margin:0; 
	font-family:sans-serif; 
	background:#eef; 
}

h1 {
	margin:10px; 
	color:#0277bd; 
	text-align:center;
	}

#gameArea { 
position:relative; 
width:100%; 
height:500px; 
margin:0 auto; 
border:2px solid #0277bd; 
border-radius:10px; 
background:#333; 
overflow:hidden;
}

.object { 
position:absolute; 
width:80px; 
height:80px; 
cursor:pointer; 
border-radius:8px; 
display:flex; 
justify-content:center; 
align-items:center; 
transition:transform .2s; z-index:10; }

.object img { 
width:100px; 
height:110px; 
}

.object:hover { 
transform:scale(1.1); 
}

#character { 
position:relative; 
width:200px; 
height:200px; 
margin: 100px auto;
text-align: center;
transition:left 1s linear, top 1s linear; 
z-index:50; 
}

.character img {
    width: 150px;
}

/* Облачко */
.speech {
    position: absolute;
    bottom: 205px;      /* над головой */
    left: 55%;
    transform: translateX(-50%);
    background: #ffffff;
    padding: 12px 16px;
    border-radius: 16px;
    border: 2px solid #333;
    font-family: Arial, sans-serif;
    font-size: 14px;
    width: 220px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Хвостик облачка */
.speech::after {
    content: "";
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 12px 10px 0;
    border-style: solid;
    border-color: #ffffff transparent transparent transparent;
}

.speech {
    opacity: 0;
    animation: fadeIn 1s ease forwards;
    animation-delay: 0.5s;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

#taskPanel { 
width:880px; 
background:#fff; 
margin:10px auto; 
padding:10px; 
border-radius:8px; 
}

#taskText { 
font-weight:700; 
margin-bottom:5px; 
}

#options { 
display:flex; 
flex-direction:column; 
gap:2px; 
margin-top:5px; 
}

#message { 
margin-top:6px; 
min-height:20px; 
font-weight:700; 
}

#phone { 
position:absolute; 
bottom:20px; 
/* right:20px; */ 
width:60px; 
height:60px; 
border-radius:50%; 
background:#0277bd; 
display:flex; 
align-items:center; 
justify-content:center; 
font-size:30px; 
cursor:pointer; 
color:#fff; 
box-shadow:0 0 15px rgba(0,0,0,0.6); 
display:none; 
animation: vibrate 0.3s infinite; 
}

@keyframes vibrate { 
	0% { transform:rotate(-10deg);} 
	50%{
		transform:rotate(10deg);
		} 
		100%{
			transform:rotate(-10deg);
		} 
}
button{
	margin:10px; 
	padding:6px 12px; 
	font-weight:700; 
	cursor:pointer;
}
	
.cli-console, .cmd-console { 
background:#000; 
color:#0f0; 
font-family:monospace; 
padding:5px; 
height:150px; 
overflow-y:auto; 
white-space:pre-wrap; 
margin-top:5px;
}

.cmd-input { 
outline:none; 
}