/* === Global & Base Styles === */
body, html {
  margin: 0; padding: 0; width: 100vw; height: 100vh; overflow: hidden;
  background-color: #171c20; font-family: 'Press Start 2P', cursive;
  user-select: none; -webkit-user-select: none;
}

/* === Layout Containers === */
#ui-container, #top-right-ui, #zoom-controls {
  position: fixed; z-index: 10; display: flex; gap: 10px;
}
#ui-container { bottom: 15px; left: 15px; gap: 15px; align-items: flex-end; }
#top-right-ui { top: 15px; right: 15px; align-items: center; }
#zoom-controls { bottom: 15px; right: 15px; gap: 5px; }

/* === View & Canvases === */
#view { width: 100%; height: 100%; cursor: crosshair; }
#map-container { width: 1000px; height: 1000px; position: relative; transform-origin: 0 0; pointer-events: none; }
#pixel-canvas, #hover-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#pixel-canvas, #hover-canvas { image-rendering: pixelated; }
#pixel-canvas { background-color: #FFFFFF; }

/* === Shared Panel & Box Styles === */
.panel, #online-users, #zoom-in, #zoom-out {
  background-color: #a4b9be; color: #2d353e;
  border: 2px solid #2d353e; border-radius: 4px;
}
.panel { min-width: 200px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); }
.panel-header {
  background-color: #a4b9be; color: #2d353e; border-bottom: 2px solid #2d353e;
  border-radius: 2px 2px 0 0; padding: 8px 12px; font-size: 12px; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
}
.panel-body { padding: 12px; transition: all 0.3s ease; max-height: 400px; overflow: hidden; }
.panel-body.collapsed { max-height: 0; padding-top: 0; padding-bottom: 0; }

/* === Shared Button & Interactive Element Styles === */
#select-area-btn, #upload-image-btn, #clear-area-btn, #username-submit, #chat-submit, #zoom-in, #zoom-out, .panel-header, .color-box, input[type="color"] {
  cursor: pointer;
}
#select-area-btn, #upload-image-btn, #clear-area-btn, #username-submit, #chat-submit, #zoom-in, #zoom-out, #username-input, #chat-input {
  font-family: 'Press Start 2P', cursive;
}
#online-users, #zoom-in, #zoom-out { font-size: 12px; padding: 8px; }
#online-users, #zoom-in, #zoom-out { padding: 8px 12px; }
#select-area-btn, #upload-image-btn, #clear-area-btn {
  padding: 8px; border: none; background-color: #FFD635; color: #171c20;
  border-radius: 4px; font-size: 10px; width: 100%; margin-bottom: 10px;
}
#select-area-btn.active { background-color: #FF4500; }

/* === Shared Input & Text Area Styles === */
#username-input, #chat-input, #chat-box {
  background-color: #e1ebf4; border: 1px solid #a4b9be; color: #171c20;
  border-radius: 4px; user-select: text; -webkit-user-select: text;
  font-size: 10px; box-sizing: border-box;
}
#username-input, #chat-input { width: 100%; padding: 8px; }
#chat-box { height: 150px; overflow-y: auto; padding: 8px; margin-bottom: 10px; line-height: 1.4; }
#chat-input-container { display: flex; gap: 8px; margin-bottom: 10px; }
#chat-input { flex: 1; }

/* === Chat & Cooldown Styles === */
#join-chat-view { display: flex; flex-direction: column; gap: 10px; }
#main-chat-view.hidden, #join-chat-view.hidden { display: none; }
#username-submit, #chat-submit {
  padding: 8px; border: none; background-color: #2d353e; color: #f0f0f0;
  border-radius: 4px; font-size: 10px;
}
#pixel-cooldown, #chat-cooldown {
  padding: 8px; background-color: #2d353e; color: #f0f0f0;
  border-radius: 4px; text-align: center; min-height: 1.2em; font-size: 10px;
}
.chat-user { font-weight: bold; }
.chat-user.mod { color: #FF0000; }
#mod-badge { font-size: 8px !important; }
#chat-panel { width: 320px; }

/* === Color Palette & Picker Styles === */
#color-palette { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.color-box, input[type="color"] {
  width: 25px; height: 25px; border: 2px solid #43515e; border-radius: 4px;
  transition: all 0.1s ease-in-out;
}
.color-box.selected, input[type="color"].selected { border-color: #d8e0e2; transform: scale(1.1); }
.custom-color-container { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 10px; }
input[type="color"] {
  -webkit-appearance: none; appearance: none; padding: 0; margin: 0;
  background-color: transparent; box-sizing: border-box;
}
input[type="color"]:hover { transform: scale(1.05); }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch, input[type="color"]::-moz-color-swatch {
  border: none; box-sizing: border-box; width: 100%; height: 100%;
}

/* === Mobile Responsiveness === */
@media (max-width: 600px) {
  #ui-container { flex-direction: column-reverse; align-items: stretch; left: 10px; right: 10px; bottom: 10px; }
  #chat-panel { width: auto; }
  .panel { min-width: unset; }
  #zoom-controls { bottom: auto; top: 15px; left: 15px; right: auto; }
  #top-right-ui { flex-direction: column; align-items: flex-end; }
}