немного порабтал над стилями. Сейчас всё работает

app/layouts/default.vue

@@ -97,12 +97,13 @@ watch(() => user.value?.exp, (newExp, oldExp) => {
 }
 
 .top-bar {
-  background-color: #f8f8f8;
+  background-color: #5a4b3a; /* Dark earthy brown */
   padding: 10px 15px;
-  border-bottom: 1px solid #eee;
+  border-bottom: 2px solid #4a3b2a; /* Darker brown border */
   display: flex;
   justify-content: flex-end; /* Align user info to the right */
   align-items: center;
+  color: #f0ead6; /* Creamy white text */
 }
 
 .user-info-top {
@@ -113,13 +114,18 @@ watch(() => user.value?.exp, (newExp, oldExp) => {
 }
 
 .logout-button {
-  background-color: #dc3545;
+  background-color: #a34a2a; /* Burnt orange/reddish brown */
   color: white;
-  border: none;
+  border: 1px solid #7b3b22;
   padding: 5px 10px;
   border-radius: 5px;
   cursor: pointer;
   font-size: 0.8em;
+  transition: background-color 0.2s;
+}
+
+.logout-button:hover {
+  background-color: #8e3f22;
 }
 
 .main-content {
@@ -132,12 +138,12 @@ watch(() => user.value?.exp, (newExp, oldExp) => {
   bottom: 0;
   left: 0;
   width: 100%;
-  background-color: #fff;
-  border-top: 1px solid #eee;
+  background-color: #5a4b3a; /* Dark earthy brown */
+  border-top: 2px solid #4a3b2a; /* Darker brown border */
   display: flex;
   justify-content: space-around;
   padding: 5px 0;
-  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); /* Slightly darker shadow */
   z-index: 1000;
 }
 
@@ -146,9 +152,14 @@ watch(() => user.value?.exp, (newExp, oldExp) => {
   flex-direction: column;
   align-items: center;
   text-decoration: none;
-  color: #555;
+  color: #f0ead6; /* Creamy white text */
   font-size: 0.7em;
   padding: 5px;
+  transition: color 0.2s;
+}
+
+.nav-item:hover {
+  color: #ffcc00; /* Gold/yellow on hover */
 }
 
 .nav-item .icon {
@@ -157,6 +168,6 @@ watch(() => user.value?.exp, (newExp, oldExp) => {
 }
 
 .nav-item.router-link-active {
-  color: #007bff;
+  color: #ffcc00; /* Gold/yellow for active link */
 }
 </style>

app/pages/village.vue

@@ -16,7 +16,7 @@
             v-for="tile in villageData.tiles"
             :key="tile.id"
             class="tile"
-            :class="{ selected: selectedTile && selectedTile.id === tile.id }"
+            :class="[tileClasses(tile), { selected: selectedTile && selectedTile.id === tile.id }]"
             @click="selectTile(tile)"
           >
             <span class="tile-content">{{ getTileEmoji(tile) }}</span>
@@ -102,6 +102,9 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
+import { useAuth } from '~/composables/useAuth'; // Import useAuth
+
+const { user, isAuthenticated, logout, updateUser } = useAuth(); // Destructure updateUser
 
 const { data: villageData, pending, error, refresh: refreshVillageData } = await useFetch('/api/village', {
   lazy: true,
@@ -130,11 +133,19 @@ const getTileEmoji = (tile) => {
   switch (tile.terrainType) {
     case 'BLOCKED_TREE': return '🌳';
     case 'BLOCKED_STONE': return '🪨';
-    case 'EMPTY': return '⬜';
+    case 'EMPTY': return '';
     default: return '❓';
   }
 };
 
+const tileClasses = (tile) => {
+  return {
+    'tile-blocked': tile.terrainType === 'BLOCKED_TREE' || tile.terrainType === 'BLOCKED_STONE',
+    'tile-object': !!tile.object,
+    'tile-empty': tile.terrainType === 'EMPTY' && !tile.object,
+  };
+};
+
 const selectTile = (tile) => {
   selectedTile.value = tile;
 };
@@ -243,6 +254,7 @@ const handleActionClick = async (action) => {
       alert(response.error.value.data?.statusMessage || 'An unknown error occurred.');
     } else {
       villageData.value = response.data.value;
+      updateUser(response.data.value.user); // Update global user state
       selectedTile.value = null;
       await refreshEvents(); // Refresh the event log
     }
@@ -328,13 +340,22 @@ const handleTriggerTick = () => handleAdminAction('/api/admin/village/trigger-ti
   justify-content: center;
   align-items: center;
   border: 1px solid #ccc;
-  background-color: #fff;
+  background-color: #fff; /* Default white for empty */
   cursor: pointer;
   transition: background-color 0.2s;
 }
 
+.tile.tile-blocked {
+  background-color: #e0e0e0; /* Light gray for blocked (tree/stone) */
+}
+
+.tile.tile-object {
+  background-color: #e6ffe6; /* Light green for tiles with user objects */
+}
+
 .tile:hover {
-  background-color: #e9e9e9;
+  background-color: #ffffe0; /* Light yellow for hover */
+  border: 1px solid #ffcc00; /* Subtle yellow border */
 }
 
 .tile.selected {