/* Character / Avatar Editor styles */
#avatarEditor {
  width: var(--lobby-panel-width);
  max-width: var(--lobby-panel-width);
}

#avatarEditor .avatar-preview-row {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  gap: 8px;
  margin: 6px 0 10px;
  padding: 8px;
  background: #1a1a1a;
  border: 1px solid #444;
  border-radius: 4px;
}

#avatarEditor .avatar-preview-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

#avatarEditor .avatar-preview-col canvas {
  width: 56px;
  height: 92px;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  background: #242830;
  border: 1px solid #555;
}

#avatarEditor .avatar-preview-col .label {
  font-size: 7px;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#avatarEditor .avatar-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}

#avatarEditor .avatar-tab {
  flex: 1;
  padding: 6px 4px;
  font-size: 8px;
  font-family: inherit;
  background: #2a2a2a;
  color: #aaa;
  border: 1px solid #555;
  border-radius: 3px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#avatarEditor .avatar-tab:hover {
  background: #333;
  color: #eee;
}

#avatarEditor .avatar-tab.active {
  background: #4a3820;
  color: #ffcc00;
  border-color: #ffcc00;
}

#avatarEditor .avatar-options {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-bottom: 8px;
  min-height: 56px;
  flex: 1 1 auto;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: #555 #1a1a1a;
}

#avatarEditor .avatar-options::-webkit-scrollbar {
  width: 6px;
}

#avatarEditor .avatar-options::-webkit-scrollbar-track {
  background: #1a1a1a;
}

#avatarEditor .avatar-options::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 3px;
}

#avatarEditor .avatar-opt {
  padding: 4px 2px;
  font-size: 7px;
  font-family: inherit;
  background: #2a2a2a;
  color: #ccc;
  border: 1px solid #555;
  border-radius: 3px;
  cursor: pointer;
  text-align: center;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-transform: capitalize;
}

#avatarEditor .avatar-opt:hover {
  background: #333;
  color: #fff;
  border-color: #888;
}

#avatarEditor .avatar-opt.selected {
  background: #4a3820;
  color: #ffcc00;
  border-color: #ffcc00;
}

#avatarEditor .avatar-swatch {
  width: 18px;
  height: 18px;
  border-radius: 2px;
  border: 1px solid #333;
}

#avatarEditor .avatar-mini-canvas {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  width: 28px;
  height: 28px;
}

#avatarEditor .avatar-action-row {
  display: flex;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
}

#avatarEditor .avatar-action-row button {
  flex: 1;
}