body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 20px;
    background-color: #f0f0f0;
    touch-action: none; /* Prevent default touch actions like scrolling on the body */
}

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

#controls {
    display: flex;
    align-items: center;
    gap: 10px; /* Adjusted gap for new button */
    padding: 10px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    flex-wrap: wrap; /* Allow controls to wrap if too many */
}

#controls label, #controls span {
    margin-left: 5px;
}

#brushSizeValue {
    min-width: 20px;
    text-align: right;
}

#drawingCanvas {
    border: 2px solid #333;
    background-color: #fff;
    cursor: crosshair;
    touch-action: none; /* Important for touch drawing */
}

#playerListContainer {
    width: 800px;
    padding: 10px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#playerListContainer h3 {
    margin-top: 0;
}

#playerList {
    list-style-type: none;
    padding: 0;
}

#playerList li {
    padding: 5px 0;
    border-bottom: 1px solid #eee;
}

#playerList li:last-child {
    border-bottom: none;
}

/* Styling for active tool buttons */
#controls button.active-tool, #controls input[type="color"].active-tool {
    border: 2px solid dodgerblue;
    box-shadow: 0 0 5px dodgerblue;
}

/* Basic styling for player avatars if you add them */
.avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}

.rainbow-text {
    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: bold;
}

.admin-tag {
    color: #DAA520; /* Goldenrod */
    font-weight: bold;
}

.admin-button {
    margin-left: 10px;
    padding: 2px 6px;
    font-size: 0.8em;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #f0f0f0;
}

.admin-button:hover {
    background-color: #e0e0e0;
}

/* Sticker Panel Styles */
.sticker-panel {
    display: flex; /* Will be toggled by JS */
    gap: 10px;
    padding: 10px;
    background-color: #e9e9e9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    flex-wrap: wrap;
    width: 800px; /* Match canvas width */
    box-sizing: border-box;
}

.sticker-item {
    width: 50px;
    height: 50px;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 4px;
    transition: border-color 0.2s, transform 0.1s;
    background-color: #fff;
    padding: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.sticker-item:hover {
    border-color: #aaa;
    transform: scale(1.05);
}

.sticker-item.selected {
    border-color: dodgerblue;
    box-shadow: 0 0 5px dodgerblue;
    transform: scale(1.05);
}

.sticker-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}