/* gamestyle.css */
#game-field {
    position: relative; /* Устанавливаем относительное позиционирование */
    /*overflow: hidden; /* Ограничиваем видимость содержимого */
    /*background-repeat: no-repeat; background-position: 0 0;*/
    
}
#game-field-bg {/* удалить - не используется*/
/* div
    display: grid;   
    grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));   
    gap: 0; 
    */
/*table*/
    border-collapse: collapse;
    margin: 0;          /* Убрать внешние отступы */
    padding: 0;         /* Убрать внутренние отступы */
    border-spacing: 0;  /* Удаляем пространство между ячейками */
}
#game-field-bg td {
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    border: none;       /* Полностью удаляем границу */
    outline: none;      /* Убираем контуры вокруг элемента */
}

.tile {
    /*position: absolute;*/
    z-index: 10; /* Тайлы находятся на слое 10 */
    height: 42px;
    width: 42px;
    min-width:42px; min-height:42px;
    box-sizing: content-box;   /* Это важно, чтобы размер тайла учитывался только содержимое */
    
    /*ещвщ кузуфе!background-repeat: repeat-x;               /* Повторяем фон по оси X */
    /*background-size: auto;                     /* Используем исходный размер изображения */
}

.player {
    position: relative; //relative;
    z-index: 100; /* Игрок находится на верхнем слое */
    width: 42px;
    height: 42px;
    background-size: contain;
}

.item {
    position: absolute;
    z-index: 50; /* Предметы расположены между слоем тайлов и игроком */
    width: 42px;
    height: 42px;
    background-size: cover;
}
.inventar-item {
    z-index: 50; /* Предметы расположены между слоем тайлов и игроком */
    width: 42px;
    height: 42px;
    background-size: cover;
    cursor: pointer;
    border: 2px dashed yellow;
}
#inventar-panel {
  display: flex; /* Makes the container a flex container */
  gap: 10px; /* Adds space between the flex items */
}

.tile:hover {
    /*border:solid yellow 1px;*/
     box-shadow: inset 0 0 0 1px yellow;
}
.item:hover {
    /*border:solid red 1px;*/
    box-shadow: inset 0 0 0 1px red;
}
/*
.heal-item {
    background-image: url('healing_item.png');
}
.tool-item {
    background-image: url('shovel_tool.png');
}
.teleport-item {
    background-image: url('teleport_pad.png');
}*/



/* Элемент частицы */
/*.particle {
    position: absolute;
    border-radius: 50%;
    width: 10px; / * диаметр частицы * /
    height: 10px;
    background-color: red; / * цвет частицы * /
    transform: translate(-50%, -50%); / * центровка по центру ячейки * /
    z-index: 110; / * выводится поверх фона * /
}*/

/* Базовые настройки частиц */
.particle {
    position: absolute;
    transform: translate(-50%, -50%); /* центрирование */
    z-index: 110; /* частицы находятся поверх всего */
}

/* Простые круглые частицы */
.simple-particle {
    border-radius: 50%; /* делаем круглые */
    width: 10px;
    height: 10px;
    background-color: rgba(255, 0, 0, 1); /* красный цвет */
}

/* Изображения частиц */
.image-particle {
    width: 42px; /* Размер соответствует размеру тайла */
    height: 42px;
    background-size: cover; /* покрывает весь div */
    background-position: center; /* центрировка изображения */
}

/* Перемещение вверх */
.move-up {
    animation-name: moveUpAnimation;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

/* Перемещение вниз */
.move-down {
    animation-name: moveDownAnimation;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}
/* Эффект постепенного исчезания */
.fade-out {
    animation-name: fadeOutAnimation;
    animation-duration: 1s;
    animation-fill-mode: forwards; /* останавливаемся в последнем кадре */
}
.fade-out-3s {
    animation-name: fadeOutAnimation;
    animation-duration: 3s;
    animation-fill-mode: forwards; /* останавливаемся в последнем кадре */
}

@keyframes fadeOutAnimation {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@keyframes moveUpAnimation {
    from {
        top: initial;
    }
    to {
        top: calc(initial - 80px); /* перемещение вверх на 80 пикселей */
    }
}

@keyframes moveDownAnimation {
    from {
        top: initial;
    }
    to {
        top: calc(initial + 80px); /* перемещение вниз на 80 пикселей */
    }
}


/* Эффект плавного появления текста */
.fade-in {
    animation: fadeInEffect 0.3s ease-in forwards;
}

@keyframes fadeInEffect {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}

/* Задержанный эффект исчезновения */
.fade-out-delayed {
    animation: fadeOutEffect 0.3s linear 0.7s forwards;
}

@keyframes fadeOutEffect {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Общие стили для текстовых частиц */
.text-particle {
    font-size: 16px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 4px 8px;
    border-radius: 4px;
    pointer-events: none; /* Не перехватываем клики */
    user-select: none; /* Отключаем выделение текста */
    z-index: 100; /* Над всеми элементами */
}


/* player info */
/* Основной контейнер */
.info-container {
  display: grid;
  gap: 1rem;
  font-family: Arial, Helvetica, sans-serif;
}

.player-info h3, .map-info h3, .inventory-container h3 {
  margin: 0;
  font-size: 1.1em;
}

#health-bar {
  width: 150px;
  height: 15px;
  appearance: none;
  background-color: #eaa;
  border-radius: 10px;
  overflow: hidden;
}

#health-bar::-webkit-progress-value {
  background-color: green;
  transition: all .3s ease-in-out;
}

#stamina-bar {
  width: 150px;
  height: 15px;
  appearance: none;
  background-color: #bbb;
  border-radius: 10px;
  overflow: hidden;
}

#stamina-bar::-webkit-progress-value {
  background-color: blue;
  transition: all .3s ease-in-out;
}

#instrument-image {
  width: 42px;
  height: auto;
  vertical-align: middle;
  margin-left: 5px;
}

.inventory-container div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.inventory-container img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 5px;
}