body {
    font-family: Arial, sans-serif;
    /*display: flex;*/
    justify-content: center;
    align-items: center;
    /*height: 100vh;*/
    margin: 0;
    background-color: #f0f0f0;
}

.game-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.game-grid {
    display: grid;
    gap: 2px;
    /*width: 80vw;
    height: 80vw;
    max-width: 600px;
    max-height: 600px;*/
    border: 2px solid #000;
    background-color: #ccc;
    position: relative;
}

.draggable-section {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    border: 1px solid #000;
    position: relative;
}

.tile.horizontal {
    background-image: url('path/to/horizontal-pipe-image.png');
    background-size: cover;
}

.tile.corner {
    background-image: url('path/to/corner-pipe-image.png');
    background-size: cover;
}

.tile.passover {
    background-image: url('path/to/passover-pipe-image.png');
    background-size: cover;
}

.tile.start {
    background-image: url('path/to/start-tile-image.png');
    background-size: cover;
}

.tile.end {
    background-image: url('path/to/end-tile-image.png');
    background-size: cover;
}

.tile.obstacle {
    background-color: brown;
}

.timer-display {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
}