body {
    margin: 0;
    font-family: sans-serif;
    display: flex;
    background-color: #333;
    color: #eee;
    overflow: hidden;
}

#sidebar {
    width: 250px;
    padding: 20px;
    background-color: #444;
    border-right: 2px solid #aaa;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

button {
    padding: 10px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* --- Стили Карты и Объектов --- */

#game-map {
    flex-grow: 1;
    background-color: #88BBAA; /* Светло-зеленый/бежевый "нормальный" фон карты */
    position: relative; /* Важно: все объекты внутри будут позиционироваться относительно этой карты */
    overflow: hidden;
}

/* Общий стиль для всех объектов, управляемых Matter.js */
.physical-object {
    position: absolute; /* Позволяет JS двигать их по карте */
    transform-origin: center center; /* Точка вращения */
    box-sizing: border-box; /* Размеры включают границы/отступы */
}

/* Стили для "Guy" */
.guy {
    width: 40px;
    height: 80px;
    background-color: #E74C3C; /* Ярко-красный */
    border: 2px solid #C0392B;
    border-radius: 5px;
}

/* Стили для "Коробки" */
.box {
    width: 50px;
    height: 50px;
    background-color: #3498DB; /* Ярко-синий */
    border: 2px solid #2980B9;
}